@linzjs/lui 21.34.1-3 → 21.34.1-5

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

@@ -1,4 +1,4 @@
-import { FC, PropsWithChildren, ReactNode } from 'react';
+import React, { PropsWithChildren } from 'react';
 import { LuiIconProps } from '../LuiIcon/LuiIcon';
 export declare type LuiModalV2Props = {
     key?: string;
@@ -11,7 +11,7 @@ export declare type LuiModalV2Props = {
     className?: string;
     /** If set to true, the modal will take the full screen width. Default `false` */
     maxWidth?: boolean;
-    headingText?: ReactNode;
+    headingText?: string;
     headingIcon?: LuiIconProps;
     helpLink?: string | (() => void | Promise<void>);
     isLoading?: boolean;
@@ -22,14 +22,12 @@ export declare type LuiModalV2Props = {
     /** By default, the modal portal will be appended to the document's body, but we might need to append it to another element. This is passed the React Modal `parentSelector` prop. */
     appendToElement?: () => HTMLElement;
 };
-export declare const LuiModalV2: FC<PropsWithChildren<LuiModalV2Props>>;
-declare type LuiModalV2ButtonsProps = {
-    className?: string;
-};
-export declare const LuiModalV2Buttons: FC<PropsWithChildren<LuiModalV2ButtonsProps>>;
-declare type LuiModalV2HeadingTextProps = {
-    className?: string;
+export declare const LuiModalV2: {
+    (props: PropsWithChildren<LuiModalV2Props>): JSX.Element;
+    Buttons: React.FC<React.PropsWithChildren<{
+        className?: string | undefined;
+    }>>;
+    HeaderTitle: React.FC<React.PropsWithChildren<{
+        className?: string | undefined;
+    }>>;
 };
-/** Allows injecting the modal header text */
-export declare const LuiModalV2HeadingText: FC<PropsWithChildren<LuiModalV2HeadingTextProps>>;
-export {};

package/dist/index.d.ts

@@ -37,7 +37,7 @@ export * from './components/LuiHeaderMenu/LuiHeaderMenus';
 export * from './components/LuiHeaderMenuV2/LuiHeaderMenusV2';
 export { LuiUpdatesSplashModal } from './components/LuiUpdateSplashModal/LuiUpdatesSplashModal';
 export { LuiModal, LuiAlertModal, LuiAlertModalButtons, } from './components/LuiModal/LuiModal';
-export { LuiModalV2, LuiModalV2Buttons, LuiModalV2HeadingText, type LuiModalV2Props, } from './components/LuiModal/LuiModalV2';
+export { LuiModalV2, type LuiModalV2Props, } from './components/LuiModal/LuiModalV2';
 export { LuiAlertModalV2, type LuiAlertModalLevel, type LuiAlertModalV2Props, } from './components/LuiModal/LuiAlertModalV2';
 export { type ISearchInputProps, LuiSearchInput, } from './components/LuiSearchInput/LuiSearchInput';
 export { type ISearchGroupedResult, type ISearchResult, } from './components/LuiSearchInput/ResultsDisplay';

package/dist/index.js

@@ -42358,7 +42358,7 @@ var LuiModalV2 = function (props) {
                 modalRef.current = el;
                 handleAutoFocus(el);
             }, className: clsx('lui-modal-v2 lui-box-shadow', props.maxWidth && 'lui-max-width', props.className) },
-            React__default["default"].createElement("div", { className: "lui-modal-v2-header", id: "lui-modal-v2-header" },
+            React__default["default"].createElement("div", { className: "lui-modal-v2-header" },
                 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) })))),
@@ -42368,24 +42368,27 @@ var LuiModalV2 = function (props) {
                     showCloseButton && React__default["default"].createElement(CloseButton, { onClose: props.onClose })))),
             React__default["default"].createElement("div", { className: "lui-modal-v2-contents" }, props.children))));
 };
-var LuiModalV2Buttons = function (props) { return (React__default["default"].createElement("div", { className: clsx('lui-modal-v2-btn-row', props.className) }, props.children)); };
+var ButtonRow = function (props) { return (React__default["default"].createElement("div", { className: clsx('lui-modal-v2-btn-row', props.className) }, props.children)); };
+LuiModalV2.Buttons = ButtonRow;
 var HelpButton = function (props) { return (React__default["default"].createElement("button", { "aria-label": "Modal Help", title: "Help", className: "lui-modal-v2-header-help-btn", onClick: typeof props.helpLink === 'string'
         ? function () { return window.open(props.helpLink, '_blank'); }
         : props.helpLink },
     React__default["default"].createElement(LuiIcon, { name: "ic_help_outline", alt: "Help", size: "md" }))); };
 var CloseButton = function (props) { return (React__default["default"].createElement("button", { "aria-label": "Modal Close", title: "Close", className: "lui-modal-v2-header-close-btn", onClick: props.onClose },
     React__default["default"].createElement(LuiIcon, { name: "ic_clear", alt: "Help", size: "md" }))); };
-/** Allows injecting the modal header text */
-var LuiModalV2HeadingText = function (props) {
+/** Allows injecting the modal header text. Useful when you can't use the `headingText` prop directly, or when you need to render styled content. */
+var HeaderTitle = function (props) {
     var _a = React.useState(), target = _a[0], setTarget = _a[1];
-    React.useEffect(function () {
-        var modalHeader = document.querySelector('#lui-modal-v2-header');
-        modalHeader && setTarget(modalHeader);
-    }, []);
+    // on mount, find the parent modal and set it as the target
     if (!target)
-        return null;
+        return (React__default["default"].createElement("div", { style: { display: 'none' }, ref: function (el) {
+                var modal = el === null || el === void 0 ? void 0 : el.closest(".lui-modal-v2");
+                var modalHeader = modal === null || modal === void 0 ? void 0 : modal.querySelector(':scope > .lui-modal-v2-header');
+                modalHeader && setTarget(modalHeader);
+            } }));
     return require$$1.createPortal(React__default["default"].createElement("h2", { className: clsx('lui-modal-v2-header-title lui-modal-v2-header-title-portal', props.className) }, props.children), target);
-};
+};
+LuiModalV2.HeaderTitle = HeaderTitle;
 
 var LuiAlertModalV2 = function (props) {
     var level = props.level, className = props.className, children = props.children, rest = __rest(props, ["level", "className", "children"]);
@@ -42393,7 +42396,7 @@ var LuiAlertModalV2 = function (props) {
     var status = Object.keys(ICON_STATUS).includes(level)
         ? level
         : 'interactive';
-    return (React__default["default"].createElement(LuiModalV2, __assign({}, rest, { className: clsx("lui-modal-v2-".concat(level), className), headingIcon: {
+    return (React__default["default"].createElement(LuiModalV2, __assign({}, rest, { className: clsx("lui-modal-v2-alert lui-modal-v2-".concat(level), className), headingIcon: {
             name: "ic_".concat(materialIcon),
             alt: "".concat(level, " status icon"),
             size: 'md',
@@ -59466,8 +59469,6 @@ exports.LuiMessagingContextProvider = LuiMessagingContextProvider;
 exports.LuiMiniSpinner = LuiMiniSpinner;
 exports.LuiModal = LuiModal;
 exports.LuiModalV2 = LuiModalV2;
-exports.LuiModalV2Buttons = LuiModalV2Buttons;
-exports.LuiModalV2HeadingText = LuiModalV2HeadingText;
 exports.LuiMoneyInput = LuiMoneyInput;
 exports.LuiMultiSwitch = LuiMultiSwitch;
 exports.LuiMultiSwitchYesNo = LuiMultiSwitchYesNo;