@vectara/vectara-ui 15.6.1 → 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/components/typography/_text.scss

@@ -39,6 +39,7 @@ $textRhythm: $sizeM;
     margin-bottom: $textRhythm;
   }
 
+  // Default block styles for code and pre.
   pre:not(:has(> code)),
   code {
     display: block;
@@ -59,22 +60,63 @@ $textRhythm: $sizeM;
   }
 
   pre > code {
+    display: block;
     word-wrap: break-word;
     word-break: break-word;
     white-space: pre-wrap;
     font-family: var(--vui-font-family-monospace);
     margin-bottom: 0;
+    padding: 0;
+    background-color: transparent;
   }
 
-  p pre,
-  p code {
-    display: inline;
-    padding: $sizeXxxs $sizeXxs;
-    border: none;
-    border-radius: $sizeXs;
-    overflow: auto;
-    background-color: var(--vui-color-light-shade);
-    font-family: var(--vui-font-family-monospace);
+  // Inline styles when nested in text-like elements.
+  strong,
+  b,
+  em,
+  i,
+  p,
+  li,
+  td,
+  th,
+  span,
+  label,
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    > pre,
+    > code {
+      display: inline;
+      padding: $sizeXxxs $sizeXxs;
+      border-radius: $sizeXs;
+      overflow: auto;
+      background-color: var(--vui-color-light-shade);
+      font-family: var(--vui-font-family-monospace);
+      margin-bottom: 0;
+    }
+  }
+
+  // Block styles when nested in block-like elements.
+  div,
+  blockquote,
+  section,
+  article,
+  aside,
+  main,
+  nav,
+  header,
+  footer {
+    > pre:not(:has(> code)),
+    > code {
+      display: block;
+    }
+
+    > pre:has(> code) {
+      display: block;
+    }
   }
 
   blockquote {

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%;
@@ -5716,21 +5723,85 @@ h2.react-datepicker__current-month {
   font-family: var(--vui-font-family-monospace);
 }
 .vuiText pre > code {
+  display: block;
   word-wrap: break-word;
   word-break: break-word;
   white-space: pre-wrap;
   font-family: var(--vui-font-family-monospace);
   margin-bottom: 0;
+  padding: 0;
+  background-color: transparent;
 }
-.vuiText p pre,
-.vuiText p code {
+.vuiText strong > pre,
+.vuiText strong > code,
+.vuiText b > pre,
+.vuiText b > code,
+.vuiText em > pre,
+.vuiText em > code,
+.vuiText i > pre,
+.vuiText i > code,
+.vuiText p > pre,
+.vuiText p > code,
+.vuiText li > pre,
+.vuiText li > code,
+.vuiText td > pre,
+.vuiText td > code,
+.vuiText th > pre,
+.vuiText th > code,
+.vuiText span > pre,
+.vuiText span > code,
+.vuiText label > pre,
+.vuiText label > code,
+.vuiText h1 > pre,
+.vuiText h1 > code,
+.vuiText h2 > pre,
+.vuiText h2 > code,
+.vuiText h3 > pre,
+.vuiText h3 > code,
+.vuiText h4 > pre,
+.vuiText h4 > code,
+.vuiText h5 > pre,
+.vuiText h5 > code,
+.vuiText h6 > pre,
+.vuiText h6 > code {
   display: inline;
   padding: 2px 4px;
-  border: none;
   border-radius: 8px;
   overflow: auto;
   background-color: var(--vui-color-light-shade);
   font-family: var(--vui-font-family-monospace);
+  margin-bottom: 0;
+}
+.vuiText div > pre:not(:has(> code)),
+.vuiText div > code,
+.vuiText blockquote > pre:not(:has(> code)),
+.vuiText blockquote > code,
+.vuiText section > pre:not(:has(> code)),
+.vuiText section > code,
+.vuiText article > pre:not(:has(> code)),
+.vuiText article > code,
+.vuiText aside > pre:not(:has(> code)),
+.vuiText aside > code,
+.vuiText main > pre:not(:has(> code)),
+.vuiText main > code,
+.vuiText nav > pre:not(:has(> code)),
+.vuiText nav > code,
+.vuiText header > pre:not(:has(> code)),
+.vuiText header > code,
+.vuiText footer > pre:not(:has(> code)),
+.vuiText footer > code {
+  display: block;
+}
+.vuiText div > pre:has(> code),
+.vuiText blockquote > pre:has(> code),
+.vuiText section > pre:has(> code),
+.vuiText article > pre:has(> code),
+.vuiText aside > pre:has(> code),
+.vuiText main > pre:has(> code),
+.vuiText nav > pre:has(> code),
+.vuiText header > pre:has(> code),
+.vuiText footer > pre:has(> code) {
+  display: block;
 }
 .vuiText blockquote {
   border-left: 4px solid var(--vui-color-light-shade);

package/package.json

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

package/src/docs/pages/text/Text.tsx

@@ -95,6 +95,20 @@ export const Text = () => (
 > In Markdown's ring.`}
             </code>
 
+            <ol>
+              <li>
+                Choose:
+                <ul>
+                  <li>
+                    <strong>Option A:</strong> <code>EXECUTE</code>
+                  </li>
+                  <li>
+                    <strong>Option B:</strong> <code>ABORT</code>
+                  </li>
+                </ul>
+              </li>
+            </ol>
+
             <table>
               <thead>
                 <tr>