@linzjs/lui 17.5.9 → 17.5.12

package/CHANGELOG.md

@@ -1,3 +1,24 @@
+## [17.5.12](https://github.com/linz/lui/compare/v17.5.11...v17.5.12) (2022-07-28)
+
+
+### Bug Fixes
+
+* **LogoutLink:** SEARCH-3373 Add a callback to LogoutLink, so app can do something before logout. ([#709](https://github.com/linz/lui/issues/709)) ([67c7030](https://github.com/linz/lui/commit/67c703059ad8903b090bc36a487ed034938d23f2))
+
+## [17.5.11](https://github.com/linz/lui/compare/v17.5.10...v17.5.11) (2022-07-25)
+
+
+### Bug Fixes
+
+* fixed btn icon colour on hover ([#708](https://github.com/linz/lui/issues/708)) ([90a1d7e](https://github.com/linz/lui/commit/90a1d7eb2c74b0e499f6b6ea8768e0f56bfdf773))
+
+## [17.5.10](https://github.com/linz/lui/compare/v17.5.9...v17.5.10) (2022-07-11)
+
+
+### Bug Fixes
+
+* **LuiSearchBox:** search 3306 search box auto focus. ([#704](https://github.com/linz/lui/issues/704)) ([c9b9938](https://github.com/linz/lui/commit/c9b9938714cdb5949525ece17314eb15668f8ea3))
+
 ## [17.5.9](https://github.com/linz/lui/compare/v17.5.8...v17.5.9) (2022-07-10)
 
 ## [17.5.8](https://github.com/linz/lui/compare/v17.5.7...v17.5.8) (2022-07-05)

package/dist/components/LuiSearchBox/LuiSearchBox.d.ts

@@ -17,11 +17,12 @@ export interface ILuiSearchBoxProps {
     searchBoxOptions: ISearchMenuOption[];
     initOptionValue?: string;
     onMenuSelect?: (e: Event) => void;
+    autoFocus?: boolean;
 }
 /**
  *  LuiSearchBox is a search input with select menu.
  *  The options of the menu and input can be passed in as an array.
  *  See examples in SearchBox in storybook.
  */
-export declare const LuiSearchBox: ({ searchBoxOptions, initOptionValue, onMenuSelect, }: ILuiSearchBoxProps) => JSX.Element;
+export declare const LuiSearchBox: ({ searchBoxOptions, initOptionValue, onMenuSelect, autoFocus, }: ILuiSearchBoxProps) => JSX.Element;
 export declare const LuiSearchBoxButton: React.ForwardRefExoticComponent<Pick<React.PropsWithChildren<LuiButtonProps>, "href" | "openInNewTab" | "level" | "type" | "size" | "disabled" | "style" | "onClick" | "name" | "title" | "data-testid" | "className" | "buttonProps" | "children"> & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/LuiSearchInput/LuiSearchInput.d.ts

@@ -20,6 +20,7 @@ export interface ISearchInputProps {
     initialValue?: string;
     inputTransformer?: (input: string) => string;
     name?: string;
+    focusUpdate?: boolean;
 }
 export declare function isGroupedResult(result: ISearchResult[] | ISearchGroupedResult[]): result is ISearchGroupedResult[];
 export declare const LuiSearchInput: React.FC<ISearchInputProps>;

package/dist/components/lol/LOLLogoutLink.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 export interface Props {
     redirectPath: () => string;
+    callBackBeforeLogout?: () => Promise<void>;
 }
 export declare const LOLLogoutLink: (props: Props) => JSX.Element | null;

package/dist/index.js

@@ -55927,6 +55927,12 @@ var LuiSearchInput = function (props) {
     var _e = React.useState(false), isLoading = _e[0], setIsLoading = _e[1];
     var inputRef = React.useRef(null);
     var selectedRef = React.useRef(null);
+    //set focus to inut box
+    React.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
     React.useEffect(function () {
         setResults([]);
@@ -56086,16 +56092,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 = React.useState(initOption ? initOption : searchBoxOptions[0]), selectedMenuOption = _b[0], setSelectedMenuOption = _b[1];
+    //auto focus every time select a menu item
+    var _c = React.useState(false), focusUpdate = _c[0], setFocusUpdate = _c[1];
+    //don't focus when first time display
+    var _d = React.useState(false), isFocus = _d[0], setIsFocus = _d[1];
+    React.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) {
@@ -56111,7 +56131,7 @@ var LuiSearchBox = function (_a) {
                     ? selectedMenuOption.renderItem
                     : function (item) {
                         return React__default["default"].createElement("span", { style: resultStyle$1 }, item.description);
-                    }, disclaimer: selectedMenuOption.disclaimer }))));
+                    }, disclaimer: selectedMenuOption.disclaimer, focusUpdate: autoFocus && isFocus ? focusUpdate : undefined }))));
 };
 var LuiSearchBoxButton = React__default["default"].forwardRef(function (props, ref) {
     return (React__default["default"].createElement(LuiButton, __assign({ level: "tertiary" }, props, { ref: ref, className: "LuiSearchBox-button" }),
@@ -56581,8 +56601,14 @@ var LOLLogoutLink = function (props) {
         var res;
         return __generator(this, function (_a) {
             switch (_a.label) {
-                case 0: return [4 /*yield*/, fetch('/auth/api/logout')];
+                case 0:
+                    if (!props.callBackBeforeLogout) return [3 /*break*/, 2];
+                    return [4 /*yield*/, props.callBackBeforeLogout()];
                 case 1:
+                    _a.sent();
+                    _a.label = 2;
+                case 2: return [4 /*yield*/, fetch('/auth/api/logout')];
+                case 3:
                     res = _a.sent();
                     if (res.status === 200) {
                         window.location.assign("/auth/login?redirectPath=" + redirectPathString);