@linzjs/lui 21.26.3 → 21.28.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [21.28.0](https://github.com/linz/lui/compare/v21.27.0...v21.28.0) (2024-05-02)
+
+
+### Features
+
+* Make change to trigger deploy to npm of LuiModal shouldCloseOnEsc key-up ([#1115](https://github.com/linz/lui/issues/1115)) ([f7a1215](https://github.com/linz/lui/commit/f7a1215d7ee8ec6a63180498f1a127f5cebd0fc7))
+
+# [21.27.0](https://github.com/linz/lui/compare/v21.26.3...v21.27.0) (2024-04-24)
+
+
+### Features
+
+* adds optional dataTestId to LuiLoadingSpinner ([#1113](https://github.com/linz/lui/issues/1113)) ([dbad239](https://github.com/linz/lui/commit/dbad239e66b27300220c08b9cd8d094564724ed1))
+
 ## [21.26.3](https://github.com/linz/lui/compare/v21.26.2...v21.26.3) (2024-04-22)
 
 

package/dist/components/LuiLoadingSpinner/LuiLoadingSpinner.d.ts

@@ -8,6 +8,8 @@ interface LuiMiniSpinnerProps {
     divProps?: any;
 }
 export declare const LuiMiniSpinner: (props: LuiMiniSpinnerProps) => JSX.Element;
-export declare const LuiLoadingSpinner: () => JSX.Element;
+export declare const LuiLoadingSpinner: (props: {
+    dataTestId?: string;
+}) => JSX.Element;
 export declare function isChromatic(): boolean;
 export {};

package/dist/components/LuiModal/LuiModal.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 interface ILuiModal {
     key?: string;
     shouldCloseOnOverlayClick?: boolean;
-    shouldCloseOnEsc?: boolean;
+    shouldCloseOnEsc?: boolean | 'use-keyup';
     onClose?: () => void;
     className?: string;
     maxWidth?: boolean;

package/dist/index.js

@@ -31491,7 +31491,11 @@ var renderSettings = {
     preserveAspectRatio: 'xMidYMid slice'
 };
 var LuiLoadingSpinnerBase = function (props) {
-    return (React__default["default"].createElement("div", { className: "LuiLoadingSpinnerBase", "data-testid": "loading-spinner" },
+    var testId = 'loading-spinner';
+    if (props.dataTestId) {
+        testId += "-".concat(props.dataTestId);
+    }
+    return (React__default["default"].createElement("div", { className: "LuiLoadingSpinnerBase", "data-testid": testId },
         React__default["default"].createElement(LuiLottieLight, { animationData: props.animationData, loop: true, autoplay: autoplay, rendererSettings: renderSettings, style: style })));
 };
 /**
@@ -31509,8 +31513,8 @@ var LuiMiniSpinner = function (props) {
                 preserveAspectRatio: 'xMidYMid slice'
             }, style: { height: props.size, width: props.size } })));
 };
-var LuiLoadingSpinner = function () {
-    return React__default["default"].createElement(LuiLoadingSpinnerBase, { animationData: loaderData });
+var LuiLoadingSpinner = function (props) {
+    return (React__default["default"].createElement(LuiLoadingSpinnerBase, { animationData: loaderData, dataTestId: props.dataTestId }));
 };
 // this function was extracted from chromatic/isChromatic. It was causing TS issues for the consumer
 function isChromatic() {
@@ -42178,7 +42182,7 @@ var FeatureIFrame = function (_a) {
 };
 
 var LuiModal = function (props) {
-    var _a, _b;
+    var _a;
     var node = React.useRef(null);
     var handleClickOutside = React.useCallback(function (e) {
         // current DOES have a contains!
@@ -42205,7 +42209,20 @@ var LuiModal = function (props) {
             Modal.setAppElement('#root');
         }
     }
-    return (React__default["default"].createElement(Modal, __assign({ key: props.key, isOpen: true, shouldCloseOnOverlayClick: props.shouldCloseOnOverlayClick, shouldCloseOnEsc: (_b = props.shouldCloseOnEsc) !== null && _b !== void 0 ? _b : true, onRequestClose: props.onClose, overlayClassName: "modal", className: props.lowContrast ? 'lui-scrim-low-contrast' : 'lui-scrim', ariaHideApp: !isTest }, (props.appendToElement && {
+    React.useEffect(function () {
+        var handleKeyUp = function (e) {
+            var _a;
+            if (props.shouldCloseOnEsc === 'use-keyup' && e.key === 'Escape') {
+                e.stopPropagation();
+                (_a = props.onClose) === null || _a === void 0 ? void 0 : _a.call(props);
+            }
+        };
+        document.addEventListener('keyup', handleKeyUp);
+        return function () {
+            document.removeEventListener('keyup', handleKeyUp);
+        };
+    }, [props.shouldCloseOnEsc, props.onClose]);
+    return (React__default["default"].createElement(Modal, __assign({ key: props.key, isOpen: true, shouldCloseOnOverlayClick: props.shouldCloseOnOverlayClick, shouldCloseOnEsc: props.shouldCloseOnEsc === true || props.shouldCloseOnEsc === undefined, onRequestClose: props.onClose, overlayClassName: "modal", className: props.lowContrast ? 'lui-scrim-low-contrast' : 'lui-scrim', ariaHideApp: !isTest }, (props.appendToElement && {
         parentSelector: props.appendToElement
     })),
         React__default["default"].createElement("div", { ref: node, className: clsx('lui-modal lui-box-shadow', props.maxWidth && 'lui-max-width', props.headingText && 'lui-modal-no-padding', props.className) },