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.cjs.js
CHANGED
|
@@ -7940,7 +7940,7 @@ function v4(options, buf, offset) {
|
|
|
7940
7940
|
return unsafeStringify(rnds);
|
|
7941
7941
|
}
|
|
7942
7942
|
|
|
7943
|
-
const Checkbox = React.forwardRef(({ name, label, error, checked = false, onChange, ...rest }, ref) => {
|
|
7943
|
+
const Checkbox = React.forwardRef(({ name, label, message, error, checked = false, onChange, ...rest }, ref) => {
|
|
7944
7944
|
const uniqueCheckboxId = v4();
|
|
7945
7945
|
const handleChange = (event) => {
|
|
7946
7946
|
onChange(event);
|
|
@@ -7950,10 +7950,7 @@ const Checkbox = React.forwardRef(({ name, label, error, checked = false, onChan
|
|
|
7950
7950
|
React.createElement("input", { className: "form-control", type: "checkbox", id: uniqueCheckboxId, name: name, ref: ref, role: "checkbox", checked: checked, onChange: handleChange, ...rest }),
|
|
7951
7951
|
React.createElement("span", { className: "checkmark" }),
|
|
7952
7952
|
label && React.createElement("span", { className: rest.required ? 'required' : '' }, label)),
|
|
7953
|
-
error && React.createElement("small", { className: "form-message" },
|
|
7954
|
-
" (",
|
|
7955
|
-
error,
|
|
7956
|
-
")")));
|
|
7953
|
+
error ? (React.createElement("small", { className: "form-message text-danger" }, error)) : (message && React.createElement("small", { className: "form-message text-muted" }, message))));
|
|
7957
7954
|
});
|
|
7958
7955
|
Checkbox.displayName = 'Checkbox';
|
|
7959
7956
|
|
|
@@ -8181,7 +8178,7 @@ const useDropdownPositionAndScroll = (isOpen, dropdownOptionsRef) => {
|
|
|
8181
8178
|
}, [isOpen, dropdownOptionsRef]);
|
|
8182
8179
|
};
|
|
8183
8180
|
|
|
8184
|
-
const Select = React.forwardRef(({ name, label, selectLabel, size = 'md', floatingLabel = false, error, options, value = '', onChange, required, disabled, }, ref) => {
|
|
8181
|
+
const Select = React.forwardRef(({ name, label, message, selectLabel, size = 'md', floatingLabel = false, error, options, value = '', onChange, required, disabled, }, ref) => {
|
|
8185
8182
|
const [isOpen, setIsOpen] = React.useState(false);
|
|
8186
8183
|
const dropdownRef = React.useRef(null);
|
|
8187
8184
|
const dropdownOptionsRef = React.useRef(null);
|
|
@@ -8219,11 +8216,11 @@ const Select = React.forwardRef(({ name, label, selectLabel, size = 'md', floati
|
|
|
8219
8216
|
label,
|
|
8220
8217
|
" ",
|
|
8221
8218
|
required && React.createElement("span", { className: "text-danger" }, "*"))),
|
|
8222
|
-
error
|
|
8219
|
+
error ? (React.createElement("small", { className: "form-message text-danger" }, error)) : (message && React.createElement("small", { className: "form-message text-muted" }, message))));
|
|
8223
8220
|
});
|
|
8224
8221
|
Select.displayName = 'Select';
|
|
8225
8222
|
|
|
8226
|
-
const DropdownDatePicker = React.forwardRef(({ name, label, floatingLabel, locale = 'id', error, value, ...rest }, ref) => {
|
|
8223
|
+
const DropdownDatePicker = React.forwardRef(({ name, label, message, floatingLabel, locale = 'id', error, value, ...rest }, ref) => {
|
|
8227
8224
|
// Helper function to safely parse date
|
|
8228
8225
|
const parseDate = (dateString) => {
|
|
8229
8226
|
if (!dateString)
|
|
@@ -8293,7 +8290,7 @@ const DropdownDatePicker = React.forwardRef(({ name, label, floatingLabel, local
|
|
|
8293
8290
|
React.createElement("div", { className: "col-md-4" },
|
|
8294
8291
|
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" }))),
|
|
8295
8292
|
floatingLabel && renderLabel,
|
|
8296
|
-
error
|
|
8293
|
+
error ? (React.createElement("small", { className: "form-message text-danger" }, error)) : (message && React.createElement("small", { className: "form-message text-muted" }, message))));
|
|
8297
8294
|
});
|
|
8298
8295
|
DropdownDatePicker.displayName = 'DropdownDatePicker';
|
|
8299
8296
|
|
|
@@ -8301,7 +8298,7 @@ const ClearInput = ({ type = 'text', className, ...rest }) => {
|
|
|
8301
8298
|
return (React.createElement("input", { type: type, className: `clear ${className}`, ...rest }));
|
|
8302
8299
|
};
|
|
8303
8300
|
|
|
8304
|
-
const Input = React.forwardRef(({ className, name, label, floatingLabel, error, ...rest }, ref) => {
|
|
8301
|
+
const Input = React.forwardRef(({ className, name, label, message, floatingLabel, error, ...rest }, ref) => {
|
|
8305
8302
|
return (React.createElement(React.Fragment, null,
|
|
8306
8303
|
!floatingLabel && label && (React.createElement("label", { htmlFor: name },
|
|
8307
8304
|
label,
|
|
@@ -8312,10 +8309,10 @@ const Input = React.forwardRef(({ className, name, label, floatingLabel, error,
|
|
|
8312
8309
|
label,
|
|
8313
8310
|
" ",
|
|
8314
8311
|
rest.required && React.createElement("span", { className: "text-danger" }, "*"))),
|
|
8315
|
-
error
|
|
8312
|
+
error ? (React.createElement("small", { className: "form-message text-danger" }, error)) : (message && React.createElement("small", { className: "form-message text-muted" }, message))));
|
|
8316
8313
|
});
|
|
8317
8314
|
|
|
8318
|
-
const InputDate = React.forwardRef(({ name, label, floatingLabel, value = '', error, ...rest }, ref) => {
|
|
8315
|
+
const InputDate = React.forwardRef(({ name, label, message, floatingLabel, value = '', error, ...rest }, ref) => {
|
|
8319
8316
|
const [showDatePicker, setShowDatePicker] = React.useState(false);
|
|
8320
8317
|
const [selectedDate, setSelectedDate] = React.useState(value ?? '');
|
|
8321
8318
|
const datePickerRef = React.useRef(null);
|
|
@@ -8349,7 +8346,7 @@ const InputDate = React.forwardRef(({ name, label, floatingLabel, value = '', er
|
|
|
8349
8346
|
rest.required && React.createElement("span", { className: "text-danger" }, "*"))),
|
|
8350
8347
|
React.createElement("div", { className: "input-group-icon" },
|
|
8351
8348
|
React.createElement(Input, { type: "text", className: "form-control", id: name, name: name, placeholder: !floatingLabel ? ' ' : '', ref: ref, value: selectedDate, ...rest }),
|
|
8352
|
-
React.createElement(
|
|
8349
|
+
React.createElement(Button, { role: "button", className: "icon", onClick: toggleDatePicker, tabIndex: 0, "aria-label": "Open date picker", disabled: rest.disabled },
|
|
8353
8350
|
React.createElement(MdCalendarMonth, null)),
|
|
8354
8351
|
showDatePicker && (React.createElement("div", { ref: datePickerRef },
|
|
8355
8352
|
React.createElement(DatePicker, { onSelect: handleDateSelect, defaultDate: selectedDate })))),
|
|
@@ -8357,11 +8354,11 @@ const InputDate = React.forwardRef(({ name, label, floatingLabel, value = '', er
|
|
|
8357
8354
|
label,
|
|
8358
8355
|
" ",
|
|
8359
8356
|
rest.required && React.createElement("span", { className: "text-danger" }, "*"))),
|
|
8360
|
-
error
|
|
8357
|
+
error ? (React.createElement("small", { className: "form-message text-danger" }, error)) : (message && React.createElement("small", { className: "form-message text-muted" }, message))));
|
|
8361
8358
|
});
|
|
8362
8359
|
InputDate.displayName = 'InputDate';
|
|
8363
8360
|
|
|
8364
|
-
const InputFile = React.forwardRef(({ name, label, accept, error, onChange, ...rest }, ref) => {
|
|
8361
|
+
const InputFile = React.forwardRef(({ name, label, message, accept, error, onChange, ...rest }, ref) => {
|
|
8365
8362
|
const handleChange = (event) => {
|
|
8366
8363
|
if (onChange) {
|
|
8367
8364
|
onChange(event);
|
|
@@ -8373,7 +8370,7 @@ const InputFile = React.forwardRef(({ name, label, accept, error, onChange, ...r
|
|
|
8373
8370
|
" ",
|
|
8374
8371
|
rest.required && React.createElement("span", { className: "text-danger" }, "*"))),
|
|
8375
8372
|
React.createElement("input", { type: "file", className: "form-control", id: name, name: name, accept: accept, onChange: handleChange, ref: ref, ...rest }),
|
|
8376
|
-
error
|
|
8373
|
+
error ? (React.createElement("small", { className: "form-message text-danger" }, error)) : (message && React.createElement("small", { className: "form-message text-muted" }, message))));
|
|
8377
8374
|
});
|
|
8378
8375
|
InputFile.displayName = 'InputFile';
|
|
8379
8376
|
|
|
@@ -8381,7 +8378,7 @@ const InputImageSize = () => {
|
|
|
8381
8378
|
return (React.createElement("div", null, "InputImageSize"));
|
|
8382
8379
|
};
|
|
8383
8380
|
|
|
8384
|
-
const InputTextArea = React.forwardRef(({ name, label, floatingLabel, error, ...rest }, ref) => {
|
|
8381
|
+
const InputTextArea = React.forwardRef(({ name, label, message, floatingLabel, error, ...rest }, ref) => {
|
|
8385
8382
|
return (React.createElement(React.Fragment, null,
|
|
8386
8383
|
!floatingLabel && (React.createElement("label", { htmlFor: name },
|
|
8387
8384
|
label,
|
|
@@ -8392,7 +8389,7 @@ const InputTextArea = React.forwardRef(({ name, label, floatingLabel, error, ...
|
|
|
8392
8389
|
label,
|
|
8393
8390
|
" ",
|
|
8394
8391
|
rest.required && React.createElement("span", { className: "text-danger" }, "*"))),
|
|
8395
|
-
error
|
|
8392
|
+
error ? (React.createElement("small", { className: "form-message text-danger" }, error)) : (message && React.createElement("small", { className: "form-message text-muted" }, message))));
|
|
8396
8393
|
});
|
|
8397
8394
|
InputTextArea.displayName = 'InputTextArea';
|
|
8398
8395
|
|
|
@@ -8403,7 +8400,7 @@ const commands = [
|
|
|
8403
8400
|
{ name: 'insertUnorderedList', label: 'Bullet List', icon: React.createElement(MdFormatListBulleted, { className: "icon" }) },
|
|
8404
8401
|
{ name: 'insertOrderedList', label: 'Number List', icon: React.createElement(MdFormatListNumbered, { className: "icon" }) },
|
|
8405
8402
|
];
|
|
8406
|
-
const InputWysiwyg = React.forwardRef(({ name, label, floatingLabel, error, value, ...rest }, ref) => {
|
|
8403
|
+
const InputWysiwyg = React.forwardRef(({ name, label, message, floatingLabel, error, value, ...rest }, ref) => {
|
|
8407
8404
|
const editorRef = React.useRef(null);
|
|
8408
8405
|
const [history, setHistory] = React.useState(['']);
|
|
8409
8406
|
const [historyIndex, setHistoryIndex] = React.useState(0);
|
|
@@ -8514,11 +8511,11 @@ const InputWysiwyg = React.forwardRef(({ name, label, floatingLabel, error, valu
|
|
|
8514
8511
|
label,
|
|
8515
8512
|
" ",
|
|
8516
8513
|
error && React.createElement("span", { className: "text-danger" }, "*"))),
|
|
8517
|
-
error
|
|
8514
|
+
error ? (React.createElement("small", { className: "form-message text-danger" }, error)) : (message && React.createElement("small", { className: "form-message text-muted" }, message))));
|
|
8518
8515
|
});
|
|
8519
8516
|
InputWysiwyg.displayName = 'InputWysiwyg';
|
|
8520
8517
|
|
|
8521
|
-
const Radio = React.forwardRef(({ name, label, options, error, ...rest }, ref) => {
|
|
8518
|
+
const Radio = React.forwardRef(({ name, label, message, options, error, ...rest }, ref) => {
|
|
8522
8519
|
return (React.createElement(React.Fragment, null,
|
|
8523
8520
|
label && (React.createElement("label", { htmlFor: name },
|
|
8524
8521
|
label,
|
|
@@ -8532,10 +8529,10 @@ const Radio = React.forwardRef(({ name, label, options, error, ...rest }, ref) =
|
|
|
8532
8529
|
ref: ref, ...rest }),
|
|
8533
8530
|
React.createElement("label", { htmlFor: uniqueRadioId }, option.label)));
|
|
8534
8531
|
})),
|
|
8535
|
-
error
|
|
8532
|
+
error ? (React.createElement("small", { className: "form-message text-danger" }, error)) : (message && React.createElement("small", { className: "form-message text-muted" }, message))));
|
|
8536
8533
|
});
|
|
8537
8534
|
|
|
8538
|
-
const RadioButtonGroup = React.forwardRef(({ name, label, size = 'md', options, selectedValue, error, required, ...rest }, ref) => {
|
|
8535
|
+
const RadioButtonGroup = React.forwardRef(({ name, label, message, size = 'md', options, selectedValue, error, required, ...rest }, ref) => {
|
|
8539
8536
|
return (React.createElement(React.Fragment, null,
|
|
8540
8537
|
label && (React.createElement("label", { htmlFor: name },
|
|
8541
8538
|
label,
|
|
@@ -8544,11 +8541,11 @@ const RadioButtonGroup = React.forwardRef(({ name, label, size = 'md', options,
|
|
|
8544
8541
|
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' : ''}` },
|
|
8545
8542
|
React.createElement("input", { type: "radio", id: option.value.toString(), name: name, value: option.value, ref: ref, ...rest }),
|
|
8546
8543
|
React.createElement("span", null, option.label))))),
|
|
8547
|
-
error
|
|
8544
|
+
error ? (React.createElement("small", { className: "form-message text-danger" }, error)) : (message && React.createElement("small", { className: "form-message text-muted" }, message))));
|
|
8548
8545
|
});
|
|
8549
8546
|
RadioButtonGroup.displayName = 'RadioButtonGroup';
|
|
8550
8547
|
|
|
8551
|
-
const SelectMultiple = React.forwardRef(({ name, label, selectLabel, floatingLabel = false, error, options, value = [], onChange, required, disabled, className, }, ref) => {
|
|
8548
|
+
const SelectMultiple = React.forwardRef(({ name, label, message, selectLabel, floatingLabel = false, error, options, value = [], onChange, required, disabled, className, }, ref) => {
|
|
8552
8549
|
const [isOpen, setIsOpen] = React.useState(false);
|
|
8553
8550
|
const [selectedValues, setSelectedValues] = React.useState(value);
|
|
8554
8551
|
const dropdownRef = React.useRef(null);
|
|
@@ -8593,11 +8590,11 @@ const SelectMultiple = React.forwardRef(({ name, label, selectLabel, floatingLab
|
|
|
8593
8590
|
label,
|
|
8594
8591
|
" ",
|
|
8595
8592
|
required && React.createElement("span", { className: "text-danger" }, "*"))),
|
|
8596
|
-
error
|
|
8593
|
+
error ? (React.createElement("small", { className: "form-message text-danger" }, error)) : (message && React.createElement("small", { className: "form-message text-muted" }, message))));
|
|
8597
8594
|
});
|
|
8598
8595
|
SelectMultiple.displayName = 'SelectMultiple';
|
|
8599
8596
|
|
|
8600
|
-
const SelectWithSearch = React.forwardRef(({ name, label, selectLabel, size = 'md', floatingLabel = false, error, options = [], value = '', onChange, required, disabled, selectSearch = '', setSelectSearch, isLoading = false, }, ref) => {
|
|
8597
|
+
const SelectWithSearch = React.forwardRef(({ name, label, message, selectLabel, size = 'md', floatingLabel = false, error, options = [], value = '', onChange, required, disabled, selectSearch = '', setSelectSearch, isLoading = false, }, ref) => {
|
|
8601
8598
|
const [isOpen, setIsOpen] = React.useState(false);
|
|
8602
8599
|
const dropdownRef = React.useRef(null);
|
|
8603
8600
|
const dropdownOptionsRef = React.useRef(null);
|
|
@@ -8634,7 +8631,7 @@ const SelectWithSearch = React.forwardRef(({ name, label, selectLabel, size = 'm
|
|
|
8634
8631
|
label,
|
|
8635
8632
|
" ",
|
|
8636
8633
|
required && React.createElement("span", { className: "text-danger" }, "*"))),
|
|
8637
|
-
error
|
|
8634
|
+
error ? (React.createElement("small", { className: "form-message text-danger" }, error)) : (message && React.createElement("small", { className: "form-message text-muted" }, message))));
|
|
8638
8635
|
});
|
|
8639
8636
|
SelectWithSearch.displayName = 'SelectWithSearch';
|
|
8640
8637
|
|