pesona-ui 1.0.22 → 1.0.24
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs.js +25 -28
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.esm.js +25 -28
- package/dist/index.esm.js.map +1 -1
- package/dist/styles/pesona-ui.css +1 -1
- package/dist/types/components/Form/Checkbox/Checkbox.d.ts +1 -0
- package/dist/types/components/Form/DatePicker/DropdownDatePicker.d.ts +1 -0
- package/dist/types/components/Form/Input/Input.d.ts +1 -0
- package/dist/types/components/Form/Input/InputDate.d.ts +1 -0
- package/dist/types/components/Form/Input/InputFile.d.ts +1 -0
- package/dist/types/components/Form/Input/InputTextArea.d.ts +1 -0
- package/dist/types/components/Form/Input/InputWysiwyg.d.ts +1 -0
- package/dist/types/components/Form/Radio/Radio.d.ts +1 -0
- package/dist/types/components/Form/Radio/RadioButtonGroup.d.ts +1 -0
- package/dist/types/components/Form/Select/Select.d.ts +1 -0
- package/dist/types/components/Form/Select/SelectMultiple.d.ts +1 -0
- package/dist/types/components/Form/Select/SelectWithSearch.d.ts +1 -0
- package/package.json +1 -1
package/dist/index.esm.js
CHANGED
|
@@ -7938,7 +7938,7 @@ function v4(options, buf, offset) {
|
|
|
7938
7938
|
return unsafeStringify(rnds);
|
|
7939
7939
|
}
|
|
7940
7940
|
|
|
7941
|
-
const Checkbox = forwardRef(({ name, label, error, checked = false, onChange, ...rest }, ref) => {
|
|
7941
|
+
const Checkbox = forwardRef(({ name, label, message, error, checked = false, onChange, ...rest }, ref) => {
|
|
7942
7942
|
const uniqueCheckboxId = v4();
|
|
7943
7943
|
const handleChange = (event) => {
|
|
7944
7944
|
onChange(event);
|
|
@@ -7948,10 +7948,7 @@ const Checkbox = forwardRef(({ name, label, error, checked = false, onChange, ..
|
|
|
7948
7948
|
React.createElement("input", { className: "form-control", type: "checkbox", id: uniqueCheckboxId, name: name, ref: ref, role: "checkbox", checked: checked, onChange: handleChange, ...rest }),
|
|
7949
7949
|
React.createElement("span", { className: "checkmark" }),
|
|
7950
7950
|
label && React.createElement("span", { className: rest.required ? 'required' : '' }, label)),
|
|
7951
|
-
error && React.createElement("small", { className: "form-message" },
|
|
7952
|
-
" (",
|
|
7953
|
-
error,
|
|
7954
|
-
")")));
|
|
7951
|
+
error ? (React.createElement("small", { className: "form-message text-danger" }, error)) : (message && React.createElement("small", { className: "form-message text-muted" }, message))));
|
|
7955
7952
|
});
|
|
7956
7953
|
Checkbox.displayName = 'Checkbox';
|
|
7957
7954
|
|
|
@@ -8179,7 +8176,7 @@ const useDropdownPositionAndScroll = (isOpen, dropdownOptionsRef) => {
|
|
|
8179
8176
|
}, [isOpen, dropdownOptionsRef]);
|
|
8180
8177
|
};
|
|
8181
8178
|
|
|
8182
|
-
const Select = forwardRef(({ name, label, selectLabel, size = 'md', floatingLabel = false, error, options, value = '', onChange, required, disabled, }, ref) => {
|
|
8179
|
+
const Select = forwardRef(({ name, label, message, selectLabel, size = 'md', floatingLabel = false, error, options, value = '', onChange, required, disabled, }, ref) => {
|
|
8183
8180
|
const [isOpen, setIsOpen] = useState(false);
|
|
8184
8181
|
const dropdownRef = useRef(null);
|
|
8185
8182
|
const dropdownOptionsRef = useRef(null);
|
|
@@ -8217,11 +8214,11 @@ const Select = forwardRef(({ name, label, selectLabel, size = 'md', floatingLabe
|
|
|
8217
8214
|
label,
|
|
8218
8215
|
" ",
|
|
8219
8216
|
required && React.createElement("span", { className: "text-danger" }, "*"))),
|
|
8220
|
-
error
|
|
8217
|
+
error ? (React.createElement("small", { className: "form-message text-danger" }, error)) : (message && React.createElement("small", { className: "form-message text-muted" }, message))));
|
|
8221
8218
|
});
|
|
8222
8219
|
Select.displayName = 'Select';
|
|
8223
8220
|
|
|
8224
|
-
const DropdownDatePicker = React.forwardRef(({ name, label, floatingLabel, locale = 'id', error, value, ...rest }, ref) => {
|
|
8221
|
+
const DropdownDatePicker = React.forwardRef(({ name, label, message, floatingLabel, locale = 'id', error, value, ...rest }, ref) => {
|
|
8225
8222
|
// Helper function to safely parse date
|
|
8226
8223
|
const parseDate = (dateString) => {
|
|
8227
8224
|
if (!dateString)
|
|
@@ -8291,7 +8288,7 @@ const DropdownDatePicker = React.forwardRef(({ name, label, floatingLabel, local
|
|
|
8291
8288
|
React.createElement("div", { className: "col-md-4" },
|
|
8292
8289
|
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" }))),
|
|
8293
8290
|
floatingLabel && renderLabel,
|
|
8294
|
-
error
|
|
8291
|
+
error ? (React.createElement("small", { className: "form-message text-danger" }, error)) : (message && React.createElement("small", { className: "form-message text-muted" }, message))));
|
|
8295
8292
|
});
|
|
8296
8293
|
DropdownDatePicker.displayName = 'DropdownDatePicker';
|
|
8297
8294
|
|
|
@@ -8299,7 +8296,7 @@ const ClearInput = ({ type = 'text', className, ...rest }) => {
|
|
|
8299
8296
|
return (React.createElement("input", { type: type, className: `clear ${className}`, ...rest }));
|
|
8300
8297
|
};
|
|
8301
8298
|
|
|
8302
|
-
const Input = React.forwardRef(({ className, name, label, floatingLabel, error, ...rest }, ref) => {
|
|
8299
|
+
const Input = React.forwardRef(({ className, name, label, message, floatingLabel, error, ...rest }, ref) => {
|
|
8303
8300
|
return (React.createElement(React.Fragment, null,
|
|
8304
8301
|
!floatingLabel && label && (React.createElement("label", { htmlFor: name },
|
|
8305
8302
|
label,
|
|
@@ -8310,10 +8307,10 @@ const Input = React.forwardRef(({ className, name, label, floatingLabel, error,
|
|
|
8310
8307
|
label,
|
|
8311
8308
|
" ",
|
|
8312
8309
|
rest.required && React.createElement("span", { className: "text-danger" }, "*"))),
|
|
8313
|
-
error
|
|
8310
|
+
error ? (React.createElement("small", { className: "form-message text-danger" }, error)) : (message && React.createElement("small", { className: "form-message text-muted" }, message))));
|
|
8314
8311
|
});
|
|
8315
8312
|
|
|
8316
|
-
const InputDate = React.forwardRef(({ name, label, floatingLabel, value = '', error, ...rest }, ref) => {
|
|
8313
|
+
const InputDate = React.forwardRef(({ name, label, message, floatingLabel, value = '', error, ...rest }, ref) => {
|
|
8317
8314
|
const [showDatePicker, setShowDatePicker] = useState(false);
|
|
8318
8315
|
const [selectedDate, setSelectedDate] = useState(value ?? '');
|
|
8319
8316
|
const datePickerRef = useRef(null);
|
|
@@ -8347,7 +8344,7 @@ const InputDate = React.forwardRef(({ name, label, floatingLabel, value = '', er
|
|
|
8347
8344
|
rest.required && React.createElement("span", { className: "text-danger" }, "*"))),
|
|
8348
8345
|
React.createElement("div", { className: "input-group-icon" },
|
|
8349
8346
|
React.createElement(Input, { type: "text", className: "form-control", id: name, name: name, placeholder: !floatingLabel ? ' ' : '', ref: ref, value: selectedDate, ...rest }),
|
|
8350
|
-
React.createElement(
|
|
8347
|
+
React.createElement(Button, { role: "button", className: "icon", onClick: toggleDatePicker, tabIndex: 0, "aria-label": "Open date picker", disabled: rest.disabled },
|
|
8351
8348
|
React.createElement(MdCalendarMonth, null)),
|
|
8352
8349
|
showDatePicker && (React.createElement("div", { ref: datePickerRef },
|
|
8353
8350
|
React.createElement(DatePicker, { onSelect: handleDateSelect, defaultDate: selectedDate })))),
|
|
@@ -8355,11 +8352,11 @@ const InputDate = React.forwardRef(({ name, label, floatingLabel, value = '', er
|
|
|
8355
8352
|
label,
|
|
8356
8353
|
" ",
|
|
8357
8354
|
rest.required && React.createElement("span", { className: "text-danger" }, "*"))),
|
|
8358
|
-
error
|
|
8355
|
+
error ? (React.createElement("small", { className: "form-message text-danger" }, error)) : (message && React.createElement("small", { className: "form-message text-muted" }, message))));
|
|
8359
8356
|
});
|
|
8360
8357
|
InputDate.displayName = 'InputDate';
|
|
8361
8358
|
|
|
8362
|
-
const InputFile = forwardRef(({ name, label, accept, error, onChange, ...rest }, ref) => {
|
|
8359
|
+
const InputFile = forwardRef(({ name, label, message, accept, error, onChange, ...rest }, ref) => {
|
|
8363
8360
|
const handleChange = (event) => {
|
|
8364
8361
|
if (onChange) {
|
|
8365
8362
|
onChange(event);
|
|
@@ -8371,7 +8368,7 @@ const InputFile = forwardRef(({ name, label, accept, error, onChange, ...rest },
|
|
|
8371
8368
|
" ",
|
|
8372
8369
|
rest.required && React.createElement("span", { className: "text-danger" }, "*"))),
|
|
8373
8370
|
React.createElement("input", { type: "file", className: "form-control", id: name, name: name, accept: accept, onChange: handleChange, ref: ref, ...rest }),
|
|
8374
|
-
error
|
|
8371
|
+
error ? (React.createElement("small", { className: "form-message text-danger" }, error)) : (message && React.createElement("small", { className: "form-message text-muted" }, message))));
|
|
8375
8372
|
});
|
|
8376
8373
|
InputFile.displayName = 'InputFile';
|
|
8377
8374
|
|
|
@@ -8379,7 +8376,7 @@ const InputImageSize = () => {
|
|
|
8379
8376
|
return (React.createElement("div", null, "InputImageSize"));
|
|
8380
8377
|
};
|
|
8381
8378
|
|
|
8382
|
-
const InputTextArea = React.forwardRef(({ name, label, floatingLabel, error, ...rest }, ref) => {
|
|
8379
|
+
const InputTextArea = React.forwardRef(({ name, label, message, floatingLabel, error, ...rest }, ref) => {
|
|
8383
8380
|
return (React.createElement(React.Fragment, null,
|
|
8384
8381
|
!floatingLabel && (React.createElement("label", { htmlFor: name },
|
|
8385
8382
|
label,
|
|
@@ -8390,7 +8387,7 @@ const InputTextArea = React.forwardRef(({ name, label, floatingLabel, error, ...
|
|
|
8390
8387
|
label,
|
|
8391
8388
|
" ",
|
|
8392
8389
|
rest.required && React.createElement("span", { className: "text-danger" }, "*"))),
|
|
8393
|
-
error
|
|
8390
|
+
error ? (React.createElement("small", { className: "form-message text-danger" }, error)) : (message && React.createElement("small", { className: "form-message text-muted" }, message))));
|
|
8394
8391
|
});
|
|
8395
8392
|
InputTextArea.displayName = 'InputTextArea';
|
|
8396
8393
|
|
|
@@ -8401,7 +8398,7 @@ const commands = [
|
|
|
8401
8398
|
{ name: 'insertUnorderedList', label: 'Bullet List', icon: React.createElement(MdFormatListBulleted, { className: "icon" }) },
|
|
8402
8399
|
{ name: 'insertOrderedList', label: 'Number List', icon: React.createElement(MdFormatListNumbered, { className: "icon" }) },
|
|
8403
8400
|
];
|
|
8404
|
-
const InputWysiwyg = forwardRef(({ name, label, floatingLabel, error, value, ...rest }, ref) => {
|
|
8401
|
+
const InputWysiwyg = forwardRef(({ name, label, message, floatingLabel, error, value, ...rest }, ref) => {
|
|
8405
8402
|
const editorRef = useRef(null);
|
|
8406
8403
|
const [history, setHistory] = useState(['']);
|
|
8407
8404
|
const [historyIndex, setHistoryIndex] = useState(0);
|
|
@@ -8512,11 +8509,11 @@ const InputWysiwyg = forwardRef(({ name, label, floatingLabel, error, value, ...
|
|
|
8512
8509
|
label,
|
|
8513
8510
|
" ",
|
|
8514
8511
|
error && React.createElement("span", { className: "text-danger" }, "*"))),
|
|
8515
|
-
error
|
|
8512
|
+
error ? (React.createElement("small", { className: "form-message text-danger" }, error)) : (message && React.createElement("small", { className: "form-message text-muted" }, message))));
|
|
8516
8513
|
});
|
|
8517
8514
|
InputWysiwyg.displayName = 'InputWysiwyg';
|
|
8518
8515
|
|
|
8519
|
-
const Radio = React.forwardRef(({ name, label, options, error, ...rest }, ref) => {
|
|
8516
|
+
const Radio = React.forwardRef(({ name, label, message, options, error, ...rest }, ref) => {
|
|
8520
8517
|
return (React.createElement(React.Fragment, null,
|
|
8521
8518
|
label && (React.createElement("label", { htmlFor: name },
|
|
8522
8519
|
label,
|
|
@@ -8530,10 +8527,10 @@ const Radio = React.forwardRef(({ name, label, options, error, ...rest }, ref) =
|
|
|
8530
8527
|
ref: ref, ...rest }),
|
|
8531
8528
|
React.createElement("label", { htmlFor: uniqueRadioId }, option.label)));
|
|
8532
8529
|
})),
|
|
8533
|
-
error
|
|
8530
|
+
error ? (React.createElement("small", { className: "form-message text-danger" }, error)) : (message && React.createElement("small", { className: "form-message text-muted" }, message))));
|
|
8534
8531
|
});
|
|
8535
8532
|
|
|
8536
|
-
const RadioButtonGroup = React.forwardRef(({ name, label, size = 'md', options, selectedValue, error, required, ...rest }, ref) => {
|
|
8533
|
+
const RadioButtonGroup = React.forwardRef(({ name, label, message, size = 'md', options, selectedValue, error, required, ...rest }, ref) => {
|
|
8537
8534
|
return (React.createElement(React.Fragment, null,
|
|
8538
8535
|
label && (React.createElement("label", { htmlFor: name },
|
|
8539
8536
|
label,
|
|
@@ -8542,11 +8539,11 @@ const RadioButtonGroup = React.forwardRef(({ name, label, size = 'md', options,
|
|
|
8542
8539
|
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' : ''}` },
|
|
8543
8540
|
React.createElement("input", { type: "radio", id: option.value.toString(), name: name, value: option.value, ref: ref, ...rest }),
|
|
8544
8541
|
React.createElement("span", null, option.label))))),
|
|
8545
|
-
error
|
|
8542
|
+
error ? (React.createElement("small", { className: "form-message text-danger" }, error)) : (message && React.createElement("small", { className: "form-message text-muted" }, message))));
|
|
8546
8543
|
});
|
|
8547
8544
|
RadioButtonGroup.displayName = 'RadioButtonGroup';
|
|
8548
8545
|
|
|
8549
|
-
const SelectMultiple = forwardRef(({ name, label, selectLabel, floatingLabel = false, error, options, value = [], onChange, required, disabled, className, }, ref) => {
|
|
8546
|
+
const SelectMultiple = forwardRef(({ name, label, message, selectLabel, floatingLabel = false, error, options, value = [], onChange, required, disabled, className, }, ref) => {
|
|
8550
8547
|
const [isOpen, setIsOpen] = useState(false);
|
|
8551
8548
|
const [selectedValues, setSelectedValues] = useState(value);
|
|
8552
8549
|
const dropdownRef = useRef(null);
|
|
@@ -8591,11 +8588,11 @@ const SelectMultiple = forwardRef(({ name, label, selectLabel, floatingLabel = f
|
|
|
8591
8588
|
label,
|
|
8592
8589
|
" ",
|
|
8593
8590
|
required && React.createElement("span", { className: "text-danger" }, "*"))),
|
|
8594
|
-
error
|
|
8591
|
+
error ? (React.createElement("small", { className: "form-message text-danger" }, error)) : (message && React.createElement("small", { className: "form-message text-muted" }, message))));
|
|
8595
8592
|
});
|
|
8596
8593
|
SelectMultiple.displayName = 'SelectMultiple';
|
|
8597
8594
|
|
|
8598
|
-
const SelectWithSearch = forwardRef(({ name, label, selectLabel, size = 'md', floatingLabel = false, error, options = [], value = '', onChange, required, disabled, selectSearch = '', setSelectSearch, isLoading = false, }, ref) => {
|
|
8595
|
+
const SelectWithSearch = forwardRef(({ name, label, message, selectLabel, size = 'md', floatingLabel = false, error, options = [], value = '', onChange, required, disabled, selectSearch = '', setSelectSearch, isLoading = false, }, ref) => {
|
|
8599
8596
|
const [isOpen, setIsOpen] = useState(false);
|
|
8600
8597
|
const dropdownRef = useRef(null);
|
|
8601
8598
|
const dropdownOptionsRef = useRef(null);
|
|
@@ -8632,7 +8629,7 @@ const SelectWithSearch = forwardRef(({ name, label, selectLabel, size = 'md', fl
|
|
|
8632
8629
|
label,
|
|
8633
8630
|
" ",
|
|
8634
8631
|
required && React.createElement("span", { className: "text-danger" }, "*"))),
|
|
8635
|
-
error
|
|
8632
|
+
error ? (React.createElement("small", { className: "form-message text-danger" }, error)) : (message && React.createElement("small", { className: "form-message text-muted" }, message))));
|
|
8636
8633
|
});
|
|
8637
8634
|
SelectWithSearch.displayName = 'SelectWithSearch';
|
|
8638
8635
|
|