@linzjs/lui 12.1.1 → 12.2.0

package/CHANGELOG.md

@@ -1,3 +1,31 @@
+# [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)
+
+
+### Bug Fixes
+
+* **LuiTextAreaInput:** Fixed Error Styling for when the component ([#528](https://github.com/linz/lui/issues/528)) ([b790b7e](https://github.com/linz/lui/commit/b790b7e60d9bde93de6000476e84f82c7a4d2e08))
+
+## [12.1.3](https://github.com/linz/lui/compare/v12.1.2...v12.1.3) (2022-01-18)
+
+
+### Bug Fixes
+
+* LuiTextInput mandatory star style ([#526](https://github.com/linz/lui/issues/526)) ([7cabbd0](https://github.com/linz/lui/commit/7cabbd0537b194d2a8884ea601da8918a10d7111))
+
+## [12.1.2](https://github.com/linz/lui/compare/v12.1.1...v12.1.2) (2022-01-17)
+
+
+### Bug Fixes
+
+* FileInputBox not updating on error ([#498](https://github.com/linz/lui/issues/498)) ([7efa723](https://github.com/linz/lui/commit/7efa723f42cc15ceacb5f432d3d048f4447553f2))
+
 ## [12.1.1](https://github.com/linz/lui/compare/v12.1.0...v12.1.1) (2022-01-17)
 
 

package/dist/components/LuiFormElements/LuiFileInputBox/LuiFileInputBox.d.ts

@@ -1,4 +1,4 @@
-export interface Props {
+export interface LuiFileInputBoxProps {
     fileDescription: string;
     acceptedExtensions: string[];
     fileFormatText?: string;
@@ -8,7 +8,7 @@ export interface Props {
     width?: number;
     height?: number;
 }
-export declare const LuiFileInputBox: (props: Props) => JSX.Element;
+export declare const LuiFileInputBox: (props: LuiFileInputBoxProps) => JSX.Element;
 export interface FileUploadInfoProps {
     fileName: string | undefined;
     fileDescription: string;
@@ -18,8 +18,8 @@ export declare const FileUploadInfo: (props: FileUploadInfoProps) => JSX.Element
 /**
  * Get the extension from a filename in upper-case.
  *
- * @param fileName File-name to get extension from.
- * @return fileName extension in upper-case if found else empty string.
+ * @param fileName File-name to get extension from
+ * @return fileName extension in upper-case if found else empty string
  */
 export declare const getFileNameExtension: (fileName: string) => string;
 /**

package/dist/components/LuiFormElements/LuiFileInputBox/LuiFileInputBox.stories.d.ts

@@ -1,6 +1,6 @@
 import { ComponentStory } from '@storybook/react';
 import { FileUploadInfo, LuiFileInputBox } from './LuiFileInputBox';
-declare const _default: import("@storybook/react").Meta<import("./LuiFileInputBox").Props>;
+declare const _default: import("@storybook/react").Meta<import("./LuiFileInputBox").LuiFileInputBoxProps>;
 export default _default;
 export declare const LuiFileInputWithExtensionFilterDefaultSize: ComponentStory<typeof LuiFileInputBox>;
 export declare const LuiFileInputWithExtensionFilterLargeWithExistingError: ComponentStory<typeof LuiFileInputBox>;

package/dist/components/LuiFormElements/LuiTextAreaInput/LuiTextAreaInput.stories.d.ts

@@ -28,3 +28,7 @@ export declare const Mandatory: {
     (): JSX.Element;
     storyName: string;
 };
+export declare const ErrorWithNonTransparentBackground: {
+    (): JSX.Element;
+    storyName: string;
+};

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/components/LuiTooltip/LuiTooltip.stories.d.ts

@@ -8,4 +8,3 @@ declare const _default: {
 };
 export default _default;
 export declare const TooltipTopBottom: Story<{}>;
-export declare const TooltipLeftRight: Story<{}>;

package/dist/lui.cjs.development.js

@@ -1066,20 +1066,6 @@ var LuiFileInputBox = function LuiFileInputBox(props) {
     }
   };
 
-  var FileFormatErrorDetails = function FileFormatErrorDetails() {
-    return React__default.createElement("div", {
-      className: "LuiFileInputBox-upload-container"
-    }, React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
-      className: 'LuiFileInputBox-upload-icon-error'
-    }, React__default.createElement(LuiIcon, {
-      name: "ic_error_outline",
-      size: 'ns',
-      alt: "Error"
-    })), props.customFileErrorMessage ? React__default.createElement("p", null, props.customFileErrorMessage) : React__default.createElement("p", {
-      className: "LuiFileInputBox-upload-text"
-    }, "You must select a file with extension of", ' ', extensionsAsHumanReadableList(props.acceptedExtensions), ".")));
-  };
-
   var hasError = hasFileFormatError || props.showMustSelectFileError === true;
   return React__default.createElement("div", {
     className: clsx('LuiFileInputBox-upload', hasError && 'LuiFileInputBox-upload-error'),
@@ -1096,7 +1082,17 @@ var LuiFileInputBox = function LuiFileInputBox(props) {
       return "." + extension;
     }).join(','),
     onChange: onChange
-  }), React__default.createElement(React__default.Fragment, null, hasError ? React__default.createElement(FileFormatErrorDetails, null) : React__default.createElement(FileUploadInfo, {
+  }), React__default.createElement(React__default.Fragment, null, hasError ? React__default.createElement("div", {
+    className: "LuiFileInputBox-upload-container"
+  }, React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
+    className: 'LuiFileInputBox-upload-icon-error'
+  }, React__default.createElement(LuiIcon, {
+    name: "ic_error_outline",
+    size: 'ns',
+    alt: "Error"
+  })), props.customFileErrorMessage ? React__default.createElement("p", null, props.customFileErrorMessage) : React__default.createElement("p", {
+    className: "LuiFileInputBox-upload-text"
+  }, "You must select a file with extension of", ' ', extensionsAsHumanReadableList(props.acceptedExtensions), "."))) : React__default.createElement(FileUploadInfo, {
     fileName: file == null ? void 0 : file.name,
     fileFormatText: props.fileFormatText,
     fileDescription: props.fileDescription
@@ -1141,8 +1137,8 @@ var FileUploadInfo = function FileUploadInfo(props) {
 /**
  * Get the extension from a filename in upper-case.
  *
- * @param fileName File-name to get extension from.
- * @return fileName extension in upper-case if found else empty string.
+ * @param fileName File-name to get extension from
+ * @return fileName extension in upper-case if found else empty string
  */
 
 var getFileNameExtension = function getFileNameExtension(fileName) {
@@ -18723,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,
@@ -18731,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, {
@@ -18747,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);