pesona-ui 1.0.21 → 1.0.23

package/dist/index.esm.js

@@ -7938,7 +7938,7 @@ function v4(options, buf, offset) {
     return unsafeStringify(rnds);
 }
 
-const Checkbox = forwardRef(({ name, label, error, checked = false, onChange, ...rest }, ref) => {
+const Checkbox = forwardRef(({ name, label, message, error, checked = false, onChange, ...rest }, ref) => {
     const uniqueCheckboxId = v4();
     const handleChange = (event) => {
         onChange(event);
@@ -7948,10 +7948,7 @@ const Checkbox = forwardRef(({ name, label, error, checked = false, onChange, ..
             React.createElement("input", { className: "form-control", type: "checkbox", id: uniqueCheckboxId, name: name, ref: ref, role: "checkbox", checked: checked, onChange: handleChange, ...rest }),
             React.createElement("span", { className: "checkmark" }),
             label && React.createElement("span", { className: rest.required ? 'required' : '' }, label)),
-        error && React.createElement("small", { className: "form-message" },
-            " (",
-            error,
-            ")")));
+        error ? (React.createElement("small", { className: "form-message text-danger" }, error)) : (message && React.createElement("small", { className: "form-message text-muted" }, message))));
 });
 Checkbox.displayName = 'Checkbox';
 
@@ -8179,7 +8176,7 @@ const useDropdownPositionAndScroll = (isOpen, dropdownOptionsRef) => {
     }, [isOpen, dropdownOptionsRef]);
 };
 
-const Select = forwardRef(({ name, label, selectLabel, size = 'md', floatingLabel = false, error, options, value = '', onChange, required, disabled, }, ref) => {
+const Select = forwardRef(({ name, label, message, selectLabel, size = 'md', floatingLabel = false, error, options, value = '', onChange, required, disabled, }, ref) => {
     const [isOpen, setIsOpen] = useState(false);
     const dropdownRef = useRef(null);
     const dropdownOptionsRef = useRef(null);
@@ -8217,11 +8214,11 @@ const Select = forwardRef(({ name, label, selectLabel, size = 'md', floatingLabe
             label,
             " ",
             required && React.createElement("span", { className: "text-danger" }, "*"))),
-        error && React.createElement("small", { className: "form-message" }, error)));
+        error ? (React.createElement("small", { className: "form-message text-danger" }, error)) : (message && React.createElement("small", { className: "form-message text-muted" }, message))));
 });
 Select.displayName = 'Select';
 
-const DropdownDatePicker = React.forwardRef(({ name, label, floatingLabel, locale = 'id', error, value, ...rest }, ref) => {
+const DropdownDatePicker = React.forwardRef(({ name, label, message, floatingLabel, locale = 'id', error, value, ...rest }, ref) => {
     // Helper function to safely parse date
     const parseDate = (dateString) => {
         if (!dateString)
@@ -8291,7 +8288,7 @@ const DropdownDatePicker = React.forwardRef(({ name, label, floatingLabel, local
             React.createElement("div", { className: "col-md-4" },
                 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)));
+        error ? (React.createElement("small", { className: "form-message text-danger" }, error)) : (message && React.createElement("small", { className: "form-message text-muted" }, message))));
 });
 DropdownDatePicker.displayName = 'DropdownDatePicker';
 
@@ -8299,7 +8296,7 @@ const ClearInput = ({ type = 'text', className, ...rest }) => {
     return (React.createElement("input", { type: type, className: `clear ${className}`, ...rest }));
 };
 
-const Input = React.forwardRef(({ className, name, label, floatingLabel, error, ...rest }, ref) => {
+const Input = React.forwardRef(({ className, name, label, message, floatingLabel, error, ...rest }, ref) => {
     return (React.createElement(React.Fragment, null,
         !floatingLabel && label && (React.createElement("label", { htmlFor: name },
             label,
@@ -8310,17 +8307,23 @@ const Input = React.forwardRef(({ className, name, label, floatingLabel, error,
             label,
             " ",
             rest.required && React.createElement("span", { className: "text-danger" }, "*"))),
-        error !== undefined && React.createElement("small", { className: "form-message" }, error)));
+        error ? (React.createElement("small", { className: "form-message text-danger" }, error)) : (message && React.createElement("small", { className: "form-message text-muted" }, message))));
 });
 
-const InputDate = React.forwardRef(({ name, label, floatingLabel, value = '', error, ...rest }, ref) => {
+const InputDate = React.forwardRef(({ name, label, message, floatingLabel, value = '', error, ...rest }, ref) => {
     const [showDatePicker, setShowDatePicker] = useState(false);
-    const [selectedDate, setSelectedDate] = useState(value);
+    const [selectedDate, setSelectedDate] = useState(value ?? '');
     const datePickerRef = useRef(null);
+    // Sync when external value changes
+    React.useEffect(() => {
+        setSelectedDate(value);
+    }, [value]);
+    // Helper function to safely parse date
     const toggleDatePicker = (e) => {
         e.stopPropagation();
         setShowDatePicker((prevState) => !prevState);
     };
+    // Handle date selection from the date picker
     const handleDateSelect = (date) => {
         setSelectedDate(date);
         setShowDatePicker(false);
@@ -8330,6 +8333,7 @@ const InputDate = React.forwardRef(({ name, label, floatingLabel, value = '', er
             });
         }
     };
+    // Close date picker when clicking outside
     useOutsideClick([datePickerRef], () => {
         setShowDatePicker(false);
     });
@@ -8339,7 +8343,7 @@ const InputDate = React.forwardRef(({ name, label, floatingLabel, value = '', er
             " ",
             rest.required && React.createElement("span", { className: "text-danger" }, "*"))),
         React.createElement("div", { className: "input-group-icon" },
-            React.createElement("input", { type: "text", className: "form-control", id: name, name: name, placeholder: !floatingLabel ? ' ' : '', ref: ref, value: selectedDate, ...rest }),
+            React.createElement(Input, { type: "text", className: "form-control", id: name, name: name, placeholder: !floatingLabel ? ' ' : '', ref: ref, value: selectedDate, ...rest }),
             React.createElement("span", { role: "button", className: "icon", onClick: toggleDatePicker },
                 React.createElement(MdCalendarMonth, null)),
             showDatePicker && (React.createElement("div", { ref: datePickerRef },
@@ -8348,11 +8352,11 @@ const InputDate = React.forwardRef(({ name, label, floatingLabel, value = '', er
             label,
             " ",
             rest.required && React.createElement("span", { className: "text-danger" }, "*"))),
-        error && React.createElement("small", { className: "form-message" }, error)));
+        error ? (React.createElement("small", { className: "form-message text-danger" }, error)) : (message && React.createElement("small", { className: "form-message text-muted" }, message))));
 });
 InputDate.displayName = 'InputDate';
 
-const InputFile = forwardRef(({ name, label, accept, error, onChange, ...rest }, ref) => {
+const InputFile = forwardRef(({ name, label, message, accept, error, onChange, ...rest }, ref) => {
     const handleChange = (event) => {
         if (onChange) {
             onChange(event);
@@ -8364,7 +8368,7 @@ const InputFile = forwardRef(({ name, label, accept, error, onChange, ...rest },
             " ",
             rest.required && React.createElement("span", { className: "text-danger" }, "*"))),
         React.createElement("input", { type: "file", className: "form-control", id: name, name: name, accept: accept, onChange: handleChange, ref: ref, ...rest }),
-        error !== undefined && React.createElement("small", { className: "form-message" }, error)));
+        error ? (React.createElement("small", { className: "form-message text-danger" }, error)) : (message && React.createElement("small", { className: "form-message text-muted" }, message))));
 });
 InputFile.displayName = 'InputFile';
 
@@ -8372,7 +8376,7 @@ const InputImageSize = () => {
     return (React.createElement("div", null, "InputImageSize"));
 };
 
-const InputTextArea = React.forwardRef(({ name, label, floatingLabel, error, ...rest }, ref) => {
+const InputTextArea = React.forwardRef(({ name, label, message, floatingLabel, error, ...rest }, ref) => {
     return (React.createElement(React.Fragment, null,
         !floatingLabel && (React.createElement("label", { htmlFor: name },
             label,
@@ -8383,7 +8387,7 @@ const InputTextArea = React.forwardRef(({ name, label, floatingLabel, error, ...
             label,
             " ",
             rest.required && React.createElement("span", { className: "text-danger" }, "*"))),
-        error !== undefined && React.createElement("small", { className: "form-message" }, error)));
+        error ? (React.createElement("small", { className: "form-message text-danger" }, error)) : (message && React.createElement("small", { className: "form-message text-muted" }, message))));
 });
 InputTextArea.displayName = 'InputTextArea';
 
@@ -8394,7 +8398,7 @@ const commands = [
     { name: 'insertUnorderedList', label: 'Bullet List', icon: React.createElement(MdFormatListBulleted, { className: "icon" }) },
     { name: 'insertOrderedList', label: 'Number List', icon: React.createElement(MdFormatListNumbered, { className: "icon" }) },
 ];
-const InputWysiwyg = forwardRef(({ name, label, floatingLabel, error, value, ...rest }, ref) => {
+const InputWysiwyg = forwardRef(({ name, label, message, floatingLabel, error, value, ...rest }, ref) => {
     const editorRef = useRef(null);
     const [history, setHistory] = useState(['']);
     const [historyIndex, setHistoryIndex] = useState(0);
@@ -8505,11 +8509,11 @@ const InputWysiwyg = forwardRef(({ name, label, floatingLabel, error, value, ...
             label,
             " ",
             error && React.createElement("span", { className: "text-danger" }, "*"))),
-        error && React.createElement("small", { className: "form-message" }, error)));
+        error ? (React.createElement("small", { className: "form-message text-danger" }, error)) : (message && React.createElement("small", { className: "form-message text-muted" }, message))));
 });
 InputWysiwyg.displayName = 'InputWysiwyg';
 
-const Radio = React.forwardRef(({ name, label, options, error, ...rest }, ref) => {
+const Radio = React.forwardRef(({ name, label, message, options, error, ...rest }, ref) => {
     return (React.createElement(React.Fragment, null,
         label && (React.createElement("label", { htmlFor: name },
             label,
@@ -8523,10 +8527,10 @@ const Radio = React.forwardRef(({ name, label, options, error, ...rest }, ref) =
                     ref: ref, ...rest }),
                 React.createElement("label", { htmlFor: uniqueRadioId }, option.label)));
         })),
-        error && React.createElement("small", { className: "form-message" }, error)));
+        error ? (React.createElement("small", { className: "form-message text-danger" }, error)) : (message && React.createElement("small", { className: "form-message text-muted" }, message))));
 });
 
-const RadioButtonGroup = React.forwardRef(({ name, label, size = 'md', options, selectedValue, error, required, ...rest }, ref) => {
+const RadioButtonGroup = React.forwardRef(({ name, label, message, size = 'md', options, selectedValue, error, required, ...rest }, ref) => {
     return (React.createElement(React.Fragment, null,
         label && (React.createElement("label", { htmlFor: name },
             label,
@@ -8535,11 +8539,11 @@ const RadioButtonGroup = React.forwardRef(({ name, label, size = 'md', options,
         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)));
+        error ? (React.createElement("small", { className: "form-message text-danger" }, error)) : (message && React.createElement("small", { className: "form-message text-muted" }, message))));
 });
 RadioButtonGroup.displayName = 'RadioButtonGroup';
 
-const SelectMultiple = forwardRef(({ name, label, selectLabel, floatingLabel = false, error, options, value = [], onChange, required, disabled, className, }, ref) => {
+const SelectMultiple = forwardRef(({ name, label, message, selectLabel, floatingLabel = false, error, options, value = [], onChange, required, disabled, className, }, ref) => {
     const [isOpen, setIsOpen] = useState(false);
     const [selectedValues, setSelectedValues] = useState(value);
     const dropdownRef = useRef(null);
@@ -8584,11 +8588,11 @@ const SelectMultiple = forwardRef(({ name, label, selectLabel, floatingLabel = f
             label,
             " ",
             required && React.createElement("span", { className: "text-danger" }, "*"))),
-        error && React.createElement("small", { className: "form-message" }, error)));
+        error ? (React.createElement("small", { className: "form-message text-danger" }, error)) : (message && React.createElement("small", { className: "form-message text-muted" }, message))));
 });
 SelectMultiple.displayName = 'SelectMultiple';
 
-const SelectWithSearch = forwardRef(({ name, label, selectLabel, size = 'md', floatingLabel = false, error, options = [], value = '', onChange, required, disabled, selectSearch = '', setSelectSearch, isLoading = false, }, ref) => {
+const SelectWithSearch = forwardRef(({ name, label, message, selectLabel, size = 'md', floatingLabel = false, error, options = [], value = '', onChange, required, disabled, selectSearch = '', setSelectSearch, isLoading = false, }, ref) => {
     const [isOpen, setIsOpen] = useState(false);
     const dropdownRef = useRef(null);
     const dropdownOptionsRef = useRef(null);
@@ -8608,7 +8612,6 @@ const SelectWithSearch = forwardRef(({ name, label, selectLabel, size = 'md', fl
     const displayText = value
         ? options.find((option) => option.value === value)?.label
         : selectLabel || 'Select an option';
-    console.log(isLoading);
     return (React.createElement(React.Fragment, null,
         label && !floatingLabel && (React.createElement("label", { htmlFor: name },
             label,
@@ -8626,7 +8629,7 @@ const SelectWithSearch = forwardRef(({ name, label, selectLabel, size = 'md', fl
             label,
             " ",
             required && React.createElement("span", { className: "text-danger" }, "*"))),
-        error && React.createElement("small", { className: "form-message" }, error)));
+        error ? (React.createElement("small", { className: "form-message text-danger" }, error)) : (message && React.createElement("small", { className: "form-message text-muted" }, message))));
 });
 SelectWithSearch.displayName = 'SelectWithSearch';