@linzjs/lui 17.5.7 → 17.5.10

package/dist/lui.esm.js

@@ -150,7 +150,7 @@ iconMap['ic_add_circle_outline'] = (React__default.createElement("svg", { viewBo
 iconMap['ic_add_irregular_image'] = (React__default.createElement("svg", { viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" },
     React__default.createElement("path", { d: "M19 5v14H5V5h14Zm0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2Zm-4.86 8.86-3 3.87L9 13.14 6 17h12l-3.86-5.14Z" })));
 iconMap['ic_add_multiple'] = (React__default.createElement("svg", { viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" },
-    React__default.createElement("path", { d: "M4 6H2v14c0 1.1.9 2 2 2h14v-2H4V6Zm16-4H8c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2Zm0 14H8V4h12v12Zm-7-2h2v-3h3V9h-3V6h-2v3h-3v2h3v3Z" })));
+    React__default.createElement("path", { d: "M20 6h2v14c0 1.1-.9 2-2 2H6v-2h14V6ZM4 2h12c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2Zm0 14h12V4H4v12Zm7-2H9v-3H6V9h3V6h2v3h3v2h-3v3Z" })));
 iconMap['ic_add_to_list'] = (React__default.createElement("svg", { viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" },
     React__default.createElement("path", { d: "M13 10H3c-.55 0-1 .45-1 1s.45 1 1 1h10c.55 0 1-.45 1-1s-.45-1-1-1Zm0-4H3c-.55 0-1 .45-1 1s.45 1 1 1h10c.55 0 1-.45 1-1s-.45-1-1-1Zm5 8v-3c0-.55-.45-1-1-1s-1 .45-1 1v3h-3c-.55 0-1 .45-1 1s.45 1 1 1h3v3c0 .55.45 1 1 1s1-.45 1-1v-3h3c.55 0 1-.45 1-1s-.45-1-1-1h-3ZM3 16h6c.55 0 1-.45 1-1s-.45-1-1-1H3c-.55 0-1 .45-1 1s.45 1 1 1Z" })));
 iconMap['ic_annotations'] = (React__default.createElement("svg", { viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" },
@@ -55899,6 +55899,12 @@ var LuiSearchInput = function (props) {
     var _e = useState(false), isLoading = _e[0], setIsLoading = _e[1];
     var inputRef = useRef(null);
     var selectedRef = useRef(null);
+    //set focus to inut box
+    useEffect(function () {
+        var _a;
+        if (props.focusUpdate !== undefined)
+            (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }, [props.focusUpdate]);
     //clear result after search types changed
     useEffect(function () {
         setResults([]);
@@ -56058,16 +56064,30 @@ var resultStyle$1 = { verticalAlign: 'middle' };
  *  See examples in SearchBox in storybook.
  */
 var LuiSearchBox = function (_a) {
-    var searchBoxOptions = _a.searchBoxOptions, initOptionValue = _a.initOptionValue, onMenuSelect = _a.onMenuSelect;
+    var searchBoxOptions = _a.searchBoxOptions, initOptionValue = _a.initOptionValue, onMenuSelect = _a.onMenuSelect, autoFocus = _a.autoFocus;
     var initOption = searchBoxOptions.find(function (_a) {
         var value = _a.value;
         return value === initOptionValue;
     });
     var _b = useState(initOption ? initOption : searchBoxOptions[0]), selectedMenuOption = _b[0], setSelectedMenuOption = _b[1];
+    //auto focus every time select a menu item
+    var _c = useState(false), focusUpdate = _c[0], setFocusUpdate = _c[1];
+    //don't focus when first time display
+    var _d = useState(false), isFocus = _d[0], setIsFocus = _d[1];
+    useEffect(function () {
+        var updatedOption = searchBoxOptions.find(function (_a) {
+            var value = _a.value;
+            return value === initOptionValue;
+        });
+        if (updatedOption)
+            setSelectedMenuOption(updatedOption);
+    }, [initOptionValue]);
     var handleMenuSelected = function (e) {
         setSelectedMenuOption(findSelectedOption(e.value));
         if (onMenuSelect !== undefined)
             onMenuSelect(e);
+        setIsFocus(true);
+        setFocusUpdate(!focusUpdate);
     };
     var findSelectedOption = function (v) {
         var selectedOption = searchBoxOptions.find(function (_a) {
@@ -56083,7 +56103,7 @@ var LuiSearchBox = function (_a) {
                     ? selectedMenuOption.renderItem
                     : function (item) {
                         return React__default.createElement("span", { style: resultStyle$1 }, item.description);
-                    }, disclaimer: selectedMenuOption.disclaimer }))));
+                    }, disclaimer: selectedMenuOption.disclaimer, focusUpdate: autoFocus && isFocus ? focusUpdate : undefined }))));
 };
 var LuiSearchBoxButton = React__default.forwardRef(function (props, ref) {
     return (React__default.createElement(LuiButton, __assign({ level: "tertiary" }, props, { ref: ref, className: "LuiSearchBox-button" }),
@@ -60381,7 +60401,6 @@ var LuiSidePanelContainer = function (props) {
             transition: 'width 0.2s ease',
             boxShadow: '-0.1em 0 0.4em rgba(0, 0, 0, 0.2)',
             padding: 0,
-            whiteSpace: 'nowrap',
             zIndex: 3,
         } },
         children && (React__default.createElement("button", { type: "button", "data-testid": "close", onClick: onClose, style: {