@linzjs/lui 12.1.4 → 12.2.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [12.2.0](https://github.com/linz/lui/compare/v12.1.4...v12.2.0) (2022-01-20)
+
+
+### Features
+
+* **LuiModal:** Added prop appendToElement to LuiModal to be used as parentSelector in react-modal ([#529](https://github.com/linz/lui/issues/529)) ([5a81791](https://github.com/linz/lui/commit/5a81791a68592fcb526636056a93750b6c28ceea))
+
 ## [12.1.4](https://github.com/linz/lui/compare/v12.1.3...v12.1.4) (2022-01-20)
 
 

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

@@ -7,6 +7,7 @@ interface ILuiModal {
     maxWidth?: boolean;
     headingText?: string;
     lowContrast?: boolean;
+    appendToElement?: () => HTMLElement;
 }
 export declare const LuiModal: React.FC<ILuiModal>;
 export declare const LuiAlertModal: React.FC<{

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

@@ -10,3 +10,4 @@ export declare const ModalMaxWidth: () => JSX.Element;
 export declare const ModalLowContrast: () => JSX.Element;
 export declare const ModalWithHeader: () => JSX.Element;
 export declare const WarningAlertWithButtons: () => JSX.Element;
+export declare const WarningAlertWithButtonsAttachedToElement: () => JSX.Element;

package/dist/lui.cjs.development.js

@@ -18719,7 +18719,7 @@ var LuiModal = function LuiModal(props) {
     }
   }
 
-  return React__default.createElement(Modal, {
+  return React__default.createElement(Modal, Object.assign({
     key: props.key,
     isOpen: true,
     shouldCloseOnOverlayClick: props.shouldCloseOnOverlayClick,
@@ -18727,7 +18727,9 @@ var LuiModal = function LuiModal(props) {
     overlayClassName: "modal",
     className: props.lowContrast ? 'lui-scrim-low-contrast' : 'lui-scrim',
     ariaHideApp: !isTest
-  }, React__default.createElement("div", {
+  }, props.appendToElement && {
+    parentSelector: props.appendToElement
+  }), React__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)
   }, props.headingText && React__default.createElement(LuiModalHeader, {
@@ -18743,7 +18745,8 @@ var LuiAlertModal = function LuiAlertModal(props) {
     key: props.key,
     shouldCloseOnOverlayClick: props.shouldCloseOnOverlayClick,
     onClose: props.onClose,
-    className: clsx("lui-modal-" + props.level, props.className)
+    className: clsx("lui-modal-" + props.level, props.className),
+    appendToElement: props.appendToElement
   }, React__default.createElement("i", {
     className: "lui-msg-status-icon material-icons-round"
   }, materialIcon), props.children);