@linzjs/lui 21.40.5 → 21.42.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [21.42.0](https://github.com/linz/lui/compare/v21.41.0...v21.42.0) (2024-07-25)
+
+
+### Features
+
+* Updates search box to support searching using external inputs ([#1147](https://github.com/linz/lui/issues/1147)) ([d944764](https://github.com/linz/lui/commit/d9447649200edcef3e3bc16f049465cec75303e1))
+
+# [21.41.0](https://github.com/linz/lui/compare/v21.40.5...v21.41.0) (2024-07-23)
+
+
+### Features
+
+* TI-2146 Adding disabled prop to LuiSideMenuItem ([#1146](https://github.com/linz/lui/issues/1146)) ([9a03383](https://github.com/linz/lui/commit/9a033836f778bb579ddaf8f18d1a8e37e6a37101))
+
 ## [21.40.5](https://github.com/linz/lui/compare/v21.40.4...v21.40.5) (2024-07-18)
 
 

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

@@ -20,11 +20,15 @@ export interface ILuiSearchBoxProps {
     initOptionValue?: string;
     onMenuSelect?: (e: Event) => void;
     autoFocus?: boolean;
+    externalSearch?: boolean;
+    searchString?: string;
+    onClickInput?: () => void;
+    onClearInput?: () => void;
 }
 /**
  *  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, autoFocus, }: ILuiSearchBoxProps) => JSX.Element;
+export declare const LuiSearchBox: ({ searchBoxOptions, initOptionValue, onMenuSelect, autoFocus, externalSearch, searchString, onClickInput, onClearInput, }: ILuiSearchBoxProps) => JSX.Element;
 export declare const LuiSearchBoxButton: React.ForwardRefExoticComponent<Pick<React.PropsWithChildren<LuiButtonProps>, "type" | "href" | "openInNewTab" | "level" | "size" | "disabled" | "style" | "onClick" | "name" | "title" | "data-testid" | "className" | "buttonProps" | "children"> & React.RefAttributes<HTMLButtonElement>>;

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

@@ -13,5 +13,7 @@ export interface ISearchInputProps<SearchResult extends ISearchResult = ISearchR
     name?: string;
     focusUpdate?: boolean;
     onClearCallback?: () => void;
+    onClickInput?: () => void;
+    externalSearch?: boolean;
 }
 export declare const LuiSearchInput: <SearchResult extends ISearchResult = ISearchResult>(props: React.PropsWithChildren<ISearchInputProps<SearchResult>>) => JSX.Element;

package/dist/components/LuiSideMenu/LuiSideMenuItem.d.ts

@@ -6,5 +6,6 @@ export interface ILuiSideMenuItemProps {
     label: string;
     onClick?: LuiMenuItemClickHandler;
     isActive?: boolean;
+    disabled?: boolean;
 }
-export declare function LuiSideMenuItem({ to, label, icon, isActive, onClick, }: ILuiSideMenuItemProps): JSX.Element;
+export declare function LuiSideMenuItem({ to, label, icon, isActive, onClick, disabled, }: ILuiSideMenuItemProps): JSX.Element;

package/dist/index.js

@@ -42469,7 +42469,7 @@ 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
+    // set focus to input box
     React.useEffect(function () {
         var _a;
         if (props.focusUpdate !== undefined)
@@ -42479,6 +42479,11 @@ var LuiSearchInput = function (props) {
     React.useEffect(function () {
         setResults([]);
     }, [props.getOptions]);
+    React.useEffect(function () {
+        if (props.externalSearch) {
+            setTypedValue(props.initialValue ? props.initialValue : '');
+        }
+    }, [props.initialValue, props.externalSearch]);
     function setInputValue(value) {
         setTypedValue(props.inputTransformer ? props.inputTransformer(value) : value);
     }
@@ -42584,7 +42589,7 @@ var LuiSearchInput = function (props) {
                 setResults([]);
             }
         } })) : null;
-    var searchIcon = (React__default["default"].createElement(LuiIcon, { className: 'LuiSearchInput-startIconPosition', name: "ic_search", size: "md", alt: "search", spanProps: { onClick: function () { var _a; return (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus(); } } }));
+    var searchIcon = props.externalSearch ? (React__default["default"].createElement(LuiIcon, { className: "LuiSearchInput-startIconPosition ".concat(typedValue ? 'LuiSearchInput-startIconPosition-enabled' : ''), name: "ic_create", size: "md", alt: "edit", spanProps: { onClick: function () { var _a; return (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus(); } } })) : (React__default["default"].createElement(LuiIcon, { className: 'LuiSearchInput-startIconPosition', name: "ic_search", size: "md", alt: "search", spanProps: { onClick: function () { var _a; return (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus(); } } }));
     var typeMore = 'You need to type a few more characters';
     function enoughChars(input) {
         if (typeof props.minCharactersForSearch === 'number')
@@ -42604,16 +42609,16 @@ var LuiSearchInput = function (props) {
         else
             return null;
     }
-    return (React__default["default"].createElement("div", { className: "LuiSearchInput" },
+    return (React__default["default"].createElement("div", { className: "LuiSearchInput", onClick: props.onClickInput },
         React__default["default"].createElement("span", { className: "LuiSearchInput-inputWrapper" },
             searchIcon,
             React__default["default"].createElement("input", { type: "text", className: clsx('LuiSearchInput-input'), ref: inputRef, value: typedValue, placeholder: props.placeholderText, "aria-label": "Search", onChange: function (e) { return setInputValue(e.target.value); }, onKeyDown: handleKeyDown, onFocus: function (e) {
                     e.target.select();
                     retrieveResults(typedValue);
                     setHaveFocus(true);
-                }, 
+                }, style: { pointerEvents: props.externalSearch ? 'none' : 'auto' }, 
                 // This timeout could be a little brittle but allows the menu to stay open long enough to click it
-                onBlur: function () { return setTimeout(function () { return setHaveFocus(false); }, 200); } }),
+                onBlur: function () { return setTimeout(function () { return setHaveFocus(false); }, 200); }, disabled: props.externalSearch }),
             cancelIcon),
         (isLoading || results.length > 0) && haveFocus && (React__default["default"].createElement("div", null,
             React__default["default"].createElement(ResultsDisplay, { results: results, selectedId: selectedId, setSelectedId: setSelectedId, selectedRef: selectedRef, onClick: selectItem, isLoading: isLoading, renderItem: props.renderItem }))),
@@ -42638,7 +42643,7 @@ var resultStyle = { verticalAlign: 'middle' };
 var LuiSearchBox = function (_a) {
     var _b;
     var _c;
-    var searchBoxOptions = _a.searchBoxOptions, initOptionValue = _a.initOptionValue, onMenuSelect = _a.onMenuSelect, autoFocus = _a.autoFocus;
+    var searchBoxOptions = _a.searchBoxOptions, initOptionValue = _a.initOptionValue, onMenuSelect = _a.onMenuSelect, autoFocus = _a.autoFocus, externalSearch = _a.externalSearch, searchString = _a.searchString, onClickInput = _a.onClickInput, onClearInput = _a.onClearInput;
     var initOption = searchBoxOptions.find(function (_a) {
         var value = _a.value;
         return value === initOptionValue;
@@ -42707,7 +42712,7 @@ var LuiSearchBox = function (_a) {
                     ? selectedMenuOption.renderItem
                     : function (item) {
                         return React__default["default"].createElement("span", { style: resultStyle }, item.description);
-                    }, disclaimer: selectedMenuOption.disclaimer, focusUpdate: autoFocus && isFocus ? focusUpdate : undefined }))));
+                    }, disclaimer: selectedMenuOption.disclaimer, focusUpdate: autoFocus && isFocus ? focusUpdate : undefined, externalSearch: externalSearch, initialValue: !!externalSearch ? searchString : undefined, onClickInput: onClickInput, onClearCallback: onClearInput }))));
 };
 var LuiSearchBoxButton = React__default["default"].forwardRef(function (props, ref) {
     var button = React.useMemo(function () {
@@ -58290,11 +58295,13 @@ function LuiSideMenu(_a) {
 }
 
 function LuiSideMenuItem(_a) {
-    var to = _a.to, label = _a.label, icon = _a.icon, _b = _a.isActive, isActive = _b === void 0 ? false : _b, onClick = _a.onClick;
-    return (React__default["default"].createElement("li", { className: "LuiSideMenu-listItem", "aria-label": label },
-        React__default["default"].createElement("a", { title: label, className: clsx('LuiSideMenu-link', isActive && 'LuiSideMenu-link--active'), href: to, onClick: onClick, "aria-current": isActive || undefined },
-            React__default["default"].createElement(LuiIcon, { size: "md", name: icon, alt: label, status: "interactive" }),
-            React__default["default"].createElement("span", { className: "navText" }, label))));
+    var to = _a.to, label = _a.label, icon = _a.icon, _b = _a.isActive, isActive = _b === void 0 ? false : _b, onClick = _a.onClick, _c = _a.disabled, disabled = _c === void 0 ? false : _c;
+    var className = clsx('LuiSideMenu-link', isActive && 'LuiSideMenu-link--active', disabled && 'LuiSideMenu-link--disabled');
+    return (React__default["default"].createElement("li", { className: "LuiSideMenu-listItem", "aria-label": label }, disabled ? (React__default["default"].createElement("span", { title: label, className: className },
+        React__default["default"].createElement(LuiIcon, { size: "md", name: icon, alt: label, status: "disabled" }),
+        React__default["default"].createElement("span", { className: "navText" }, label))) : (React__default["default"].createElement("a", { title: label, className: className, href: to, onClick: onClick, "aria-current": isActive || undefined },
+        React__default["default"].createElement(LuiIcon, { size: "md", name: icon, alt: label, status: "interactive" }),
+        React__default["default"].createElement("span", { className: "navText" }, label)))));
 }
 
 var css_248z$b = "/**\n  @deprecated\n */\n/**\n  @deprecated\n */\n/**\n  @deprecated\n */\n@keyframes animate-stripes {\n  100% {\n    background-position: 100px 0;\n  }\n}\n.ProgressBar, .ProgressBar-PROC, .ProgressBar-COMP, .ProgressBar-FAIL {\n  height: 5px;\n  width: 100%;\n  background-color: #eaeaea;\n  border-radius: 3px;\n}\n.ProgressBar-FAIL {\n  background-color: #cc0000;\n}\n.ProgressBar-COMP {\n  background-color: #0aa245;\n}\n.ProgressBar-PROC {\n  background-color: #0096cc;\n  transition: width 0.3s ease-in-out;\n}\n.ProgressBar-PROC.indeterminate {\n  background-image: linear-gradient(-45deg, transparent 25%, rgba(255, 255, 255, 0.75) 25%, rgba(255, 255, 255, 0.75) 75%, transparent 75%);\n  background-size: 50px 100%;\n  animation: animate-stripes 5s linear infinite;\n}";