pesona-ui 1.0.16 → 1.0.18
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 +10 -8
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.esm.js +10 -8
- package/dist/index.esm.js.map +1 -1
- package/dist/styles/pesona-ui.css +1 -1
- package/package.json +1 -1
package/dist/index.cjs.js
CHANGED
|
@@ -8202,6 +8202,9 @@ const Select = React.forwardRef(({ name, label, selectLabel, size = 'md', floati
|
|
|
8202
8202
|
setIsOpen(false);
|
|
8203
8203
|
};
|
|
8204
8204
|
}, []);
|
|
8205
|
+
const displayText = value
|
|
8206
|
+
? options.find((option) => option.value === value)?.label
|
|
8207
|
+
: selectLabel || 'Select an option';
|
|
8205
8208
|
return (React.createElement(React.Fragment, null,
|
|
8206
8209
|
label && !floatingLabel && (React.createElement("label", { htmlFor: name },
|
|
8207
8210
|
label,
|
|
@@ -8209,10 +8212,8 @@ const Select = React.forwardRef(({ name, label, selectLabel, size = 'md', floati
|
|
|
8209
8212
|
required && React.createElement("span", { className: "text-danger" }, "*"))),
|
|
8210
8213
|
React.createElement("div", { className: `dropdown-select-container ${size}`, ref: dropdownRef },
|
|
8211
8214
|
React.createElement("div", { className: `dropdown-header ${isOpen ? 'open' : ''} ${disabled ? 'disabled' : ''}`, onClick: () => !disabled && setIsOpen(!isOpen), ref: ref, "aria-haspopup": "listbox", "aria-expanded": isOpen },
|
|
8212
|
-
|
|
8213
|
-
|
|
8214
|
-
: selectLabel || 'Select an option',
|
|
8215
|
-
React.createElement(FiChevronDown, null)),
|
|
8215
|
+
React.createElement("span", { className: "label" }, displayText),
|
|
8216
|
+
React.createElement(FiChevronDown, { className: "arrow" })),
|
|
8216
8217
|
isOpen && (React.createElement("div", { className: `dropdown-options scrollbar ${disabled ? 'disabled' : ''}`, ref: dropdownOptionsRef, role: "listbox" }, options.map((option, index) => (React.createElement("div", { key: `${option.value}-${index}`, className: `option ${value === option.value ? 'selected' : ''}`, onClick: () => !disabled && handleOptionClick(option.value.toString()), role: "option", "aria-selected": value === option.value }, option.label)))))),
|
|
8217
8218
|
label && floatingLabel && (React.createElement("label", { htmlFor: name },
|
|
8218
8219
|
label,
|
|
@@ -8616,16 +8617,17 @@ const SelectWithSearch = React.forwardRef(({ name, label, selectLabel, size = 'm
|
|
|
8616
8617
|
React.useEffect(() => {
|
|
8617
8618
|
setSelectedValue(value);
|
|
8618
8619
|
}, [value]);
|
|
8620
|
+
const displayText = selectedValue
|
|
8621
|
+
? options.find((option) => option.value === selectedValue)?.label
|
|
8622
|
+
: selectLabel || 'Select an option';
|
|
8619
8623
|
return (React.createElement(React.Fragment, null,
|
|
8620
8624
|
label && !floatingLabel && (React.createElement("label", { htmlFor: name },
|
|
8621
8625
|
label,
|
|
8622
8626
|
required && React.createElement("span", { className: "text-danger" }, "*"))),
|
|
8623
8627
|
React.createElement("div", { className: `dropdown-select-container ${size}`, ref: dropdownRef },
|
|
8624
8628
|
React.createElement("div", { className: `dropdown-header ${isOpen ? 'open' : ''} ${disabled ? 'disabled' : ''}`, onClick: () => !disabled && setIsOpen(!isOpen), ref: ref, "aria-haspopup": "listbox", "aria-expanded": isOpen },
|
|
8625
|
-
|
|
8626
|
-
|
|
8627
|
-
: selectLabel || 'Select an option',
|
|
8628
|
-
React.createElement(FiChevronDown, null)),
|
|
8629
|
+
React.createElement("span", { className: "label" }, displayText),
|
|
8630
|
+
React.createElement(FiChevronDown, { className: "arrow" })),
|
|
8629
8631
|
isOpen && (React.createElement("div", { className: `dropdown-options scrollbar ${disabled ? 'disabled' : ''}`, ref: dropdownOptionsRef, role: "listbox" },
|
|
8630
8632
|
React.createElement("div", { className: "search-input" },
|
|
8631
8633
|
React.createElement(Input, { name: "search", placeholder: "Ketik untuk mencari..", type: "search", tabIndex: 0, autoComplete: "off", autoCorrect: "off", autoCapitalize: "off", spellCheck: false, role: "textbox", value: selectSearch, autoFocus: true, onChange: (e) => {
|