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.esm.js
CHANGED
|
@@ -8200,6 +8200,9 @@ const Select = forwardRef(({ name, label, selectLabel, size = 'md', floatingLabe
|
|
|
8200
8200
|
setIsOpen(false);
|
|
8201
8201
|
};
|
|
8202
8202
|
}, []);
|
|
8203
|
+
const displayText = value
|
|
8204
|
+
? options.find((option) => option.value === value)?.label
|
|
8205
|
+
: selectLabel || 'Select an option';
|
|
8203
8206
|
return (React.createElement(React.Fragment, null,
|
|
8204
8207
|
label && !floatingLabel && (React.createElement("label", { htmlFor: name },
|
|
8205
8208
|
label,
|
|
@@ -8207,10 +8210,8 @@ const Select = forwardRef(({ name, label, selectLabel, size = 'md', floatingLabe
|
|
|
8207
8210
|
required && React.createElement("span", { className: "text-danger" }, "*"))),
|
|
8208
8211
|
React.createElement("div", { className: `dropdown-select-container ${size}`, ref: dropdownRef },
|
|
8209
8212
|
React.createElement("div", { className: `dropdown-header ${isOpen ? 'open' : ''} ${disabled ? 'disabled' : ''}`, onClick: () => !disabled && setIsOpen(!isOpen), ref: ref, "aria-haspopup": "listbox", "aria-expanded": isOpen },
|
|
8210
|
-
|
|
8211
|
-
|
|
8212
|
-
: selectLabel || 'Select an option',
|
|
8213
|
-
React.createElement(FiChevronDown, null)),
|
|
8213
|
+
React.createElement("span", { className: "label" }, displayText),
|
|
8214
|
+
React.createElement(FiChevronDown, { className: "arrow" })),
|
|
8214
8215
|
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)))))),
|
|
8215
8216
|
label && floatingLabel && (React.createElement("label", { htmlFor: name },
|
|
8216
8217
|
label,
|
|
@@ -8614,16 +8615,17 @@ const SelectWithSearch = forwardRef(({ name, label, selectLabel, size = 'md', fl
|
|
|
8614
8615
|
useEffect(() => {
|
|
8615
8616
|
setSelectedValue(value);
|
|
8616
8617
|
}, [value]);
|
|
8618
|
+
const displayText = selectedValue
|
|
8619
|
+
? options.find((option) => option.value === selectedValue)?.label
|
|
8620
|
+
: selectLabel || 'Select an option';
|
|
8617
8621
|
return (React.createElement(React.Fragment, null,
|
|
8618
8622
|
label && !floatingLabel && (React.createElement("label", { htmlFor: name },
|
|
8619
8623
|
label,
|
|
8620
8624
|
required && React.createElement("span", { className: "text-danger" }, "*"))),
|
|
8621
8625
|
React.createElement("div", { className: `dropdown-select-container ${size}`, ref: dropdownRef },
|
|
8622
8626
|
React.createElement("div", { className: `dropdown-header ${isOpen ? 'open' : ''} ${disabled ? 'disabled' : ''}`, onClick: () => !disabled && setIsOpen(!isOpen), ref: ref, "aria-haspopup": "listbox", "aria-expanded": isOpen },
|
|
8623
|
-
|
|
8624
|
-
|
|
8625
|
-
: selectLabel || 'Select an option',
|
|
8626
|
-
React.createElement(FiChevronDown, null)),
|
|
8627
|
+
React.createElement("span", { className: "label" }, displayText),
|
|
8628
|
+
React.createElement(FiChevronDown, { className: "arrow" })),
|
|
8627
8629
|
isOpen && (React.createElement("div", { className: `dropdown-options scrollbar ${disabled ? 'disabled' : ''}`, ref: dropdownOptionsRef, role: "listbox" },
|
|
8628
8630
|
React.createElement("div", { className: "search-input" },
|
|
8629
8631
|
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) => {
|