@linzjs/lui 17.5.9 → 17.5.10
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/CHANGELOG.md +7 -0
- package/dist/components/LuiSearchBox/LuiSearchBox.d.ts +2 -1
- package/dist/components/LuiSearchInput/LuiSearchInput.d.ts +1 -0
- package/dist/index.js +22 -2
- package/dist/index.js.map +1 -1
- package/dist/lui.esm.js +22 -2
- package/dist/lui.esm.js.map +1 -1
- package/package.json +1 -1
package/dist/lui.esm.js
CHANGED
|
@@ -55899,6 +55899,12 @@ var LuiSearchInput = function (props) {
|
|
|
55899
55899
|
var _e = useState(false), isLoading = _e[0], setIsLoading = _e[1];
|
|
55900
55900
|
var inputRef = useRef(null);
|
|
55901
55901
|
var selectedRef = useRef(null);
|
|
55902
|
+
//set focus to inut box
|
|
55903
|
+
useEffect(function () {
|
|
55904
|
+
var _a;
|
|
55905
|
+
if (props.focusUpdate !== undefined)
|
|
55906
|
+
(_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
|
|
55907
|
+
}, [props.focusUpdate]);
|
|
55902
55908
|
//clear result after search types changed
|
|
55903
55909
|
useEffect(function () {
|
|
55904
55910
|
setResults([]);
|
|
@@ -56058,16 +56064,30 @@ var resultStyle$1 = { verticalAlign: 'middle' };
|
|
|
56058
56064
|
* See examples in SearchBox in storybook.
|
|
56059
56065
|
*/
|
|
56060
56066
|
var LuiSearchBox = function (_a) {
|
|
56061
|
-
var searchBoxOptions = _a.searchBoxOptions, initOptionValue = _a.initOptionValue, onMenuSelect = _a.onMenuSelect;
|
|
56067
|
+
var searchBoxOptions = _a.searchBoxOptions, initOptionValue = _a.initOptionValue, onMenuSelect = _a.onMenuSelect, autoFocus = _a.autoFocus;
|
|
56062
56068
|
var initOption = searchBoxOptions.find(function (_a) {
|
|
56063
56069
|
var value = _a.value;
|
|
56064
56070
|
return value === initOptionValue;
|
|
56065
56071
|
});
|
|
56066
56072
|
var _b = useState(initOption ? initOption : searchBoxOptions[0]), selectedMenuOption = _b[0], setSelectedMenuOption = _b[1];
|
|
56073
|
+
//auto focus every time select a menu item
|
|
56074
|
+
var _c = useState(false), focusUpdate = _c[0], setFocusUpdate = _c[1];
|
|
56075
|
+
//don't focus when first time display
|
|
56076
|
+
var _d = useState(false), isFocus = _d[0], setIsFocus = _d[1];
|
|
56077
|
+
useEffect(function () {
|
|
56078
|
+
var updatedOption = searchBoxOptions.find(function (_a) {
|
|
56079
|
+
var value = _a.value;
|
|
56080
|
+
return value === initOptionValue;
|
|
56081
|
+
});
|
|
56082
|
+
if (updatedOption)
|
|
56083
|
+
setSelectedMenuOption(updatedOption);
|
|
56084
|
+
}, [initOptionValue]);
|
|
56067
56085
|
var handleMenuSelected = function (e) {
|
|
56068
56086
|
setSelectedMenuOption(findSelectedOption(e.value));
|
|
56069
56087
|
if (onMenuSelect !== undefined)
|
|
56070
56088
|
onMenuSelect(e);
|
|
56089
|
+
setIsFocus(true);
|
|
56090
|
+
setFocusUpdate(!focusUpdate);
|
|
56071
56091
|
};
|
|
56072
56092
|
var findSelectedOption = function (v) {
|
|
56073
56093
|
var selectedOption = searchBoxOptions.find(function (_a) {
|
|
@@ -56083,7 +56103,7 @@ var LuiSearchBox = function (_a) {
|
|
|
56083
56103
|
? selectedMenuOption.renderItem
|
|
56084
56104
|
: function (item) {
|
|
56085
56105
|
return React__default.createElement("span", { style: resultStyle$1 }, item.description);
|
|
56086
|
-
}, disclaimer: selectedMenuOption.disclaimer }))));
|
|
56106
|
+
}, disclaimer: selectedMenuOption.disclaimer, focusUpdate: autoFocus && isFocus ? focusUpdate : undefined }))));
|
|
56087
56107
|
};
|
|
56088
56108
|
var LuiSearchBoxButton = React__default.forwardRef(function (props, ref) {
|
|
56089
56109
|
return (React__default.createElement(LuiButton, __assign({ level: "tertiary" }, props, { ref: ref, className: "LuiSearchBox-button" }),
|