@linzjs/lui 22.8.0 → 22.9.1

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## [22.9.1](https://github.com/linz/lui/compare/v22.9.0...v22.9.1) (2025-03-19)
+
+
+### Bug Fixes
+
+* **SearchInput:** SEARCH-7090 additional control prop for LuiSearchInput disclaimer ([#1200](https://github.com/linz/lui/issues/1200)) ([8438af1](https://github.com/linz/lui/commit/8438af1e81ae084452a383925074efd16b80307c))
+
+# [22.9.0](https://github.com/linz/lui/compare/v22.8.0...v22.9.0) (2025-02-26)
+
+
+### Features
+
+* Adding an accessible name to the modal via headingText making it easier to write tests for modals ([#1198](https://github.com/linz/lui/issues/1198)) ([d0a0441](https://github.com/linz/lui/commit/d0a04418f1915274cfddd7a3657d479c3b046bd5))
+
 # [22.8.0](https://github.com/linz/lui/compare/v22.7.0...v22.8.0) (2025-02-25)
 
 

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

@@ -21,5 +21,6 @@ export interface ISearchInputProps<SearchResult extends ISearchResult = ISearchR
     externalSearch?: boolean;
     onSearch?: (searchString: string) => void;
     validateInput?: (input: string) => InputValidationResult | undefined;
+    hideDisclaimerOnFail?: boolean;
 }
 export declare const LuiSearchInput: <SearchResult extends ISearchResult = ISearchResult>(props: React.PropsWithChildren<ISearchInputProps<SearchResult>>) => JSX.Element;

package/dist/components/common/Hooks.d.ts

@@ -14,3 +14,7 @@ export declare const useEscapeFunction: (onEscape: (e: KeyboardEvent) => void |
  * @return a react ref which can be bound to an html element
  */
 export declare const usePageClickFunction: <H extends Element>(onClickInsideArg: (event: MouseEvent) => void, onClickOutsideArg: (event: MouseEvent) => void) => import("react").RefObject<H>;
+/**
+ * Provides a stable ID across renders, can be replaced in react 18+ by native implementation
+ */
+export declare function useId(): string;

package/dist/index.js

@@ -39925,7 +39925,17 @@ var usePageClickFunction = function (onClickInsideArg, onClickOutsideArg) {
         };
     }, [elementRef, onClickInside, onClickOutside]);
     return elementRef;
-};
+};
+/**
+ * Provides a stable ID across renders, can be replaced in react 18+ by native implementation
+ */
+function useId() {
+    var idRef = React.useRef('');
+    if (idRef.current === '') {
+        idRef.current = v4();
+    }
+    return idRef.current;
+}
 
 var sizes = ['xs', 'sm', 'md', 'lg', 'xl'];
 var buildHideClassDict = function (_a) {
@@ -42299,6 +42309,8 @@ var _a;
 var LuiModalV2 = function (props) {
     var _a;
     var modalRef = React.useRef(null);
+    var rootId = useId();
+    var headingTextId = "".concat(rootId, "_headingText");
     var handleClickOutside = React.useCallback(function () { var _a; return props.shouldCloseOnOverlayClick && ((_a = props.onClose) === null || _a === void 0 ? void 0 : _a.call(props)); }, [props.shouldCloseOnEsc, props.onClose]);
     useClickedOutsideElement(modalRef, handleClickOutside);
     var handleEsc = React.useCallback(function (e) {
@@ -42325,7 +42337,7 @@ var LuiModalV2 = function (props) {
         // disble the `shouldClose` props as we handle them ourselves
         shouldCloseOnOverlayClick: false, shouldCloseOnEsc: false, overlayClassName: "modal", className: props.lowContrast ? 'lui-scrim-low-contrast' : 'lui-scrim', appElement: document.getElementById('root'), 
         // required to prevent warnings that are not applicable in real usage
-        ariaHideApp: !isTest, parentSelector: props.appendToElement },
+        ariaHideApp: !isTest, parentSelector: props.appendToElement, aria: { labelledby: props.headingText ? headingTextId : undefined } },
         React__default["default"].createElement("div", { ref: function (el) {
                 modalRef.current = el;
                 handleAutoFocus(el);
@@ -42334,7 +42346,7 @@ var LuiModalV2 = function (props) {
                 props.isLoading && (React__default["default"].createElement(LuiMiniSpinner, { size: 20, divProps: { className: 'lui-modal-v2-header-spinner' } })),
                 showHeadingIcon && (React__default["default"].createElement("div", { className: "lui-modal-v2-header-icon" },
                     React__default["default"].createElement(LuiIcon, __assign({ size: "md", name: "", alt: "Help" }, props.headingIcon, { className: clsx('', (_a = props.headingIcon) === null || _a === void 0 ? void 0 : _a.className) })))),
-                props.headingText && (React__default["default"].createElement("h2", { className: "lui-modal-v2-header-title" }, props.headingText)),
+                props.headingText && (React__default["default"].createElement("h2", { id: headingTextId, className: "lui-modal-v2-header-title" }, props.headingText)),
                 showButtons && (React__default["default"].createElement("div", { className: "lui-modal-v2-header-buttons" },
                     showHelpButton && React__default["default"].createElement(HelpButton, { helpLink: props.helpLink }),
                     showCloseButton && React__default["default"].createElement(CloseButton, { onClose: props.onClose })))),
@@ -42752,6 +42764,16 @@ var LuiSearchInput = function (props) {
         }
         return 'No results available. Please refine your search and try again.';
     }
+    function determineDisclaimer() {
+        if (props.hideDisclaimerOnFail && noOptionsMessage(typedValue))
+            return null;
+        if (props.disclaimer && haveFocus) {
+            return (React__default["default"].createElement(React__default["default"].Fragment, null,
+                React__default["default"].createElement("hr", { className: "LuiSearchInput-resultSeparator" }),
+                React__default["default"].createElement("div", { "data-testid": "disclaimer", className: "LuiSearchInput-disclaimer" }, props.disclaimer)));
+        }
+        return null;
+    }
     return props.onSearch ? (React__default["default"].createElement(ControlledPassiveSearchInputComponent, __assign({ typedValue: typedValue, setTypedValue: setTypedValue }, props, { minCharactersForSearch: props.minCharactersForSearch, placeholderText: props.placeholderText, onSearch: props.onSearch, disclaimer: props.disclaimer, initialValue: props.initialValue, inputTransformer: props.inputTransformer, focusUpdate: props.focusUpdate, onClearCallback: props.onClearCallback, onClickInput: props.onClickInput, validateInput: props.validateInput }))) : (React__default["default"].createElement("div", { className: "LuiSearchInput", onClick: props.onClickInput },
         React__default["default"].createElement("span", { className: "LuiSearchInput-inputWrapper" },
             searchIcon,
@@ -42771,9 +42793,7 @@ var LuiSearchInput = function (props) {
             noOptionsMessage(typedValue) && (React__default["default"].createElement(React__default["default"].Fragment, null,
             React__default["default"].createElement("hr", { className: "LuiSearchInput-resultSeparator" }),
             React__default["default"].createElement("div", { "data-testid": "no-result-msg", className: "LuiSearchInput-disclaimer" }, noOptionsMessage(typedValue)))),
-        props.disclaimer && haveFocus && (React__default["default"].createElement(React__default["default"].Fragment, null,
-            React__default["default"].createElement("hr", { className: "LuiSearchInput-resultSeparator" }),
-            React__default["default"].createElement("div", { "data-testid": "disclaimer", className: "LuiSearchInput-disclaimer" }, props.disclaimer)))));
+        determineDisclaimer()));
 };
 
 var resultStyle = { verticalAlign: 'middle' };