@vectara/vectara-ui 15.6.2 → 15.6.5

package/lib/components/modal/Modal.js

@@ -45,10 +45,10 @@ export const VuiModal = (_a) => {
         }, 0);
     };
     const classes = classNames("vuiModal", `vuiModal--${color}`, `vuiModal--${size}`, className);
-    return (_jsx(VuiPortal, { children: isOpen && (_jsx(VuiScreenBlock, { children: _jsx(FocusOn, Object.assign({ onEscapeKey: onCloseDelayed, onClickOutside: canClickOutsideToClose ? onCloseDelayed : undefined, 
+    return (_jsx(VuiPortal, { children: isOpen && (_jsx(VuiScreenBlock, Object.assign({ type: "modal" }, { children: _jsx(FocusOn, Object.assign({ onEscapeKey: onCloseDelayed, onClickOutside: canClickOutsideToClose ? onCloseDelayed : undefined, 
                 // Enable manual focus return to work.
                 returnFocus: false, 
                 // Enable focus on contents when it's open,
                 // but enable manual focus return to work when it's closed.
-                autoFocus: isOpen }, { children: _jsx("div", Object.assign({ className: "vuiModalContainer" }, getOverlayProps("modalTitle"), { children: _jsxs("div", Object.assign({ className: classes }, rest, { children: [_jsx("div", Object.assign({ className: "vuiModalHeader" }, { children: _jsxs(VuiFlexContainer, Object.assign({ justifyContent: "spaceBetween", alignItems: "center" }, { children: [_jsx(VuiFlexItem, Object.assign({ grow: false }, { children: _jsxs(VuiFlexContainer, Object.assign({ alignItems: "center", spacing: "xs" }, { children: [icon && (_jsx(VuiFlexItem, Object.assign({ grow: false, shrink: false }, { children: _jsx(VuiIcon, Object.assign({ size: "l" }, { children: icon })) }))), _jsx(VuiFlexItem, Object.assign({ grow: false }, { children: _jsx("div", Object.assign({ className: "vuiModalHeader__title" }, { children: _jsx(DrawerTitle, Object.assign({ id: "modalTitle" }, { children: title })) })) }))] })) })), onClose && (_jsx(VuiFlexItem, { children: _jsx(VuiIconButton, { "aria-label": "Close", "data-testid": "modalCloseButton", onClick: onCloseDelayed, color: "neutral", icon: _jsx(VuiIcon, Object.assign({ size: "m", color: "neutral" }, { children: _jsx(BiX, {}) })) }) }))] })) })), _jsx("div", Object.assign({ className: "vuiModalContent" }, { children: _jsx("div", Object.assign({ className: "vuiModalContent__inner" }, { children: children })) }))] })) })) })) }, key)) }));
+                autoFocus: isOpen }, { children: _jsx("div", Object.assign({ className: "vuiModalContainer" }, getOverlayProps("modalTitle"), { children: _jsxs("div", Object.assign({ className: classes }, rest, { children: [_jsx("div", Object.assign({ className: "vuiModalHeader" }, { children: _jsxs(VuiFlexContainer, Object.assign({ justifyContent: "spaceBetween", alignItems: "center" }, { children: [_jsx(VuiFlexItem, Object.assign({ grow: false }, { children: _jsxs(VuiFlexContainer, Object.assign({ alignItems: "center", spacing: "xs" }, { children: [icon && (_jsx(VuiFlexItem, Object.assign({ grow: false, shrink: false }, { children: _jsx(VuiIcon, Object.assign({ size: "l" }, { children: icon })) }))), _jsx(VuiFlexItem, Object.assign({ grow: false }, { children: _jsx("div", Object.assign({ className: "vuiModalHeader__title" }, { children: _jsx(DrawerTitle, Object.assign({ id: "modalTitle" }, { children: title })) })) }))] })) })), onClose && (_jsx(VuiFlexItem, { children: _jsx(VuiIconButton, { "aria-label": "Close", "data-testid": "modalCloseButton", onClick: onCloseDelayed, color: "neutral", icon: _jsx(VuiIcon, Object.assign({ size: "m", color: "neutral" }, { children: _jsx(BiX, {}) })) }) }))] })) })), _jsx("div", Object.assign({ className: "vuiModalContent" }, { children: _jsx("div", Object.assign({ className: "vuiModalContent__inner" }, { children: children })) }))] })) })) })) }), key)) }));
 };

package/lib/components/screenBlock/ScreenBlock.d.ts

@@ -2,6 +2,7 @@ type Props = {
     onClick?: () => void;
     children: React.ReactNode;
     color?: "neutral" | "primary" | "danger" | "success";
+    type?: "default" | "modal";
 };
-export declare const VuiScreenBlock: ({ onClick, children, color }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const VuiScreenBlock: ({ onClick, children, color, type }: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

package/lib/components/screenBlock/ScreenBlock.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import classNames from "classnames";
-export const VuiScreenBlock = ({ onClick, children, color = "neutral" }) => {
-    const classes = classNames("vuiScreenBlock", `vuiScreenBlock--${color}`);
+export const VuiScreenBlock = ({ onClick, children, color = "neutral", type = "default" }) => {
+    const classes = classNames("vuiScreenBlock", `vuiScreenBlock--${color}`, `vuiScreenBlock--${type}`);
     return (_jsxs("div", Object.assign({ className: classes }, { children: [children, _jsx("div", { className: "vuiScreenBlock__mask", onClick: onClick })] })));
 };

package/lib/components/screenBlock/_index.scss

@@ -4,12 +4,19 @@
   left: 0;
   right: 0;
   bottom: 0;
-  z-index: $screenBlockZIndex;
   display: flex;
   align-items: center;
   justify-content: center;
 }
 
+.vuiScreenBlock--default {
+  z-index: $screenBlockZIndex;
+}
+
+.vuiScreenBlock--modal {
+  z-index: $modalZIndex;
+}
+
 .vuiScreenBlock__mask {
   width: 100%;
   height: 100%;

package/lib/styles/index.css

@@ -4493,12 +4493,19 @@ h2.react-datepicker__current-month {
   left: 0;
   right: 0;
   bottom: 0;
-  z-index: 10;
   display: flex;
   align-items: center;
   justify-content: center;
 }
 
+.vuiScreenBlock--default {
+  z-index: 10;
+}
+
+.vuiScreenBlock--modal {
+  z-index: 12;
+}
+
 .vuiScreenBlock__mask {
   width: 100%;
   height: 100%;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vectara/vectara-ui",
-  "version": "15.6.2",
+  "version": "15.6.5",
   "homepage": "./",
   "description": "Vectara's design system, codified as a React and Sass component library",
   "author": "Vectara",