@exponential_app/eui-react 0.7.1 → 0.9.0

package/dist/index.js

@@ -18,6 +18,8 @@ import {
   themeOrDefault,
   mediaMatches,
   parseMediaCondition,
+  readOnlyTemplates,
+  readOnlyTree,
   resolveMode,
   stringTable,
   templateBudget,
@@ -119,7 +121,7 @@ function extensionComponent(extensions, component) {
 }
 
 // packages/exponential-ui-react/src/node-view.tsx
-import { Component, Fragment as Fragment8, memo as memo2, useCallback as useCallback10, useContext as useContext6, useEffect as useEffect21, useMemo as useMemo18, useRef as useRef25 } from "react";
+import { Component, Fragment as Fragment9, memo as memo2, useCallback as useCallback10, useContext as useContext6, useEffect as useEffect21, useMemo as useMemo18, useRef as useRef25 } from "react";
 import { UNKNOWN_COMPONENT, instanceSegment, isResponsiveValue, nativeRecipeProps as nativeRecipeProps5, responsiveAt, templateItemKeys, templateSiteKey, withOwnWrites } from "@exponential_app/eui";
 import { dynamicStyleEntries, nodeClass, queryToken, styleDirection } from "@exponential_app/eui/web";
 
@@ -4734,7 +4736,7 @@ function AccordionNative({ node, props, rootProps, emit, scope }) {
 var asArray = (v) => Array.isArray(v) ? v : v ? v.split(`,`) : [];
 
 // packages/exponential-ui-react/src/natives/overlays.tsx
-import { forwardRef as forwardRef2, useCallback as useCallback8, useEffect as useEffect16, useRef as useRef21, useState as useState17 } from "react";
+import { Fragment as Fragment6, forwardRef as forwardRef2, useCallback as useCallback8, useEffect as useEffect16, useRef as useRef21, useState as useState17 } from "react";
 import { createPortal } from "react-dom";
 import { ContextMenu as ContextPrimitive, Dialog as DialogPrimitive, DropdownMenu as MenuPrimitive, Popover as PopoverPrimitive2, Tooltip as TooltipPrimitive } from "radix-ui";
 import { OVERLAY_OFFSET as OVERLAY_OFFSET2, OVERLAY_PADDING as OVERLAY_PADDING2 } from "@exponential_app/eui";
@@ -4947,7 +4949,18 @@ function SearchListNative({ node, props, rootProps, emit, scope }) {
 }
 
 // packages/exponential-ui-react/src/natives/overlays.tsx
-import { jsx as jsx19, jsxs as jsxs15, Fragment as Fragment6 } from "react/jsx-runtime";
+import { jsx as jsx19, jsxs as jsxs15, Fragment as Fragment7 } from "react/jsx-runtime";
+function OverlayPortal({ as: Portal, children }) {
+  const ctx = useSurfaceContext();
+  if (ctx.inlineOverlays)
+    return /* @__PURE__ */ jsx19(Fragment6, {
+      children
+    });
+  return /* @__PURE__ */ jsx19(Portal, {
+    container: ctx.portal ?? undefined,
+    children
+  });
+}
 function useOpenState(node, scope, external, emit) {
   const [open, setOpen] = useBoundState(node, scope, `open`, external);
   const change = useCallback8((next) => {
@@ -5052,8 +5065,8 @@ function ModalNative({ node, props, rootProps, emit, children, slots, scope, kin
           })
         }) : null
       }),
-      /* @__PURE__ */ jsxs15(DialogPrimitive.Portal, {
-        container: ctx.portal ?? undefined,
+      /* @__PURE__ */ jsxs15(OverlayPortal, {
+        as: DialogPrimitive.Portal,
         children: [
           /* @__PURE__ */ jsx19(DialogPrimitive.Overlay, {
             ...part(`overlay`, open && `open`),
@@ -5174,8 +5187,8 @@ function PopoverNative({ node, props, rootProps, emit, children, slots, scope })
           })
         })
       }),
-      /* @__PURE__ */ jsx19(PopoverPrimitive2.Portal, {
-        container: ctx.portal ?? undefined,
+      /* @__PURE__ */ jsx19(OverlayPortal, {
+        as: PopoverPrimitive2.Portal,
         children: /* @__PURE__ */ jsx19(PopoverPrimitive2.Content, {
           ref: contentRef,
           ...part(`content`, open && `open`),
@@ -5206,6 +5219,7 @@ function TooltipNative({ node, props, rootProps, children }) {
   return /* @__PURE__ */ jsx19(TooltipPrimitive.Provider, {
     delayDuration: 300,
     children: /* @__PURE__ */ jsxs15(TooltipPrimitive.Root, {
+      open: ctx.inlineOverlays || undefined,
       children: [
         /* @__PURE__ */ jsx19("div", {
           ...rootProps,
@@ -5219,8 +5233,8 @@ function TooltipNative({ node, props, rootProps, children }) {
             })
           })
         }),
-        /* @__PURE__ */ jsx19(TooltipPrimitive.Portal, {
-          container: ctx.portal ?? undefined,
+        /* @__PURE__ */ jsx19(OverlayPortal, {
+          as: TooltipPrimitive.Portal,
           children: /* @__PURE__ */ jsx19(TooltipPrimitive.Content, {
             ...part(`content`),
             side,
@@ -5269,7 +5283,7 @@ function MenuSearch({ item, i, part, emit, close }) {
         close();
       },
       rowPart: (_, __, active) => part(`item`, active && `selected`),
-      renderRow: (row) => /* @__PURE__ */ jsxs15(Fragment6, {
+      renderRow: (row) => /* @__PURE__ */ jsxs15(Fragment7, {
         children: [
           row.icon ? /* @__PURE__ */ jsx19(IconGlyph, {
             icons: ctx.host.icons,
@@ -5288,7 +5302,7 @@ function MenuItems({ ns, items, rawItems, part, overlay, emit, scope, path, clos
   const ctx = useSurfaceContext();
   const raws = objects(rawItems);
   const N = ns;
-  return /* @__PURE__ */ jsx19(Fragment6, {
+  return /* @__PURE__ */ jsx19(Fragment7, {
     children: items.map((item, i) => {
       const kind = item.separator ? `separator` : item.kind ?? `item`;
       const key = `${path}${i}`;
@@ -5329,8 +5343,8 @@ function MenuItems({ ns, items, rawItems, part, overlay, emit, scope, path, clos
                 })
               ]
             }),
-            /* @__PURE__ */ jsx19(N.Portal, {
-              container: ctx.portal ?? undefined,
+            /* @__PURE__ */ jsx19(OverlayPortal, {
+              as: N.Portal,
               children: /* @__PURE__ */ jsx19(N.SubContent, {
                 ...part(`content`),
                 sideOffset: 2,
@@ -5419,7 +5433,7 @@ function PressMenuOpening({ node, props, rootProps, emit, children, scope }) {
   const items = objects(props.items);
   const label = str(props.label);
   const icon = str(props.icon);
-  const [open, setOpen] = useState17(false);
+  const [open, setOpen] = useState17(ctx.inlineOverlays);
   const child = node.children[0] ?? null;
   return /* @__PURE__ */ jsxs15(MenuPrimitive.Root, {
     open,
@@ -5451,8 +5465,8 @@ function PressMenuOpening({ node, props, rootProps, emit, children, scope }) {
           })
         })
       }),
-      /* @__PURE__ */ jsx19(MenuPrimitive.Portal, {
-        container: ctx.portal ?? undefined,
+      /* @__PURE__ */ jsx19(OverlayPortal, {
+        as: MenuPrimitive.Portal,
         children: /* @__PURE__ */ jsx19(MenuPrimitive.Content, {
           ...part(`content`, open && `open`),
           align: "start",
@@ -5503,8 +5517,8 @@ function ContextMenuOpening({ node, props, rootProps, emit, children, scope }) {
           children
         })
       }),
-      /* @__PURE__ */ jsx19(ContextPrimitive.Portal, {
-        container: ctx.portal ?? undefined,
+      /* @__PURE__ */ jsx19(OverlayPortal, {
+        as: ContextPrimitive.Portal,
         children: /* @__PURE__ */ jsx19(ContextPrimitive.Content, {
           ...part(`content`, open && `open`),
           collisionPadding: OVERLAY_PADDING2,
@@ -5560,7 +5574,7 @@ function ToastNative({ node, props, rootProps, emit, scope }) {
     return () => clearTimeout(t);
   }, [open]);
   useEffect16(() => {
-    if (!open || duration === 0 || paused)
+    if (!open || duration === 0 || paused || ctx.inlineOverlays)
       return;
     startedAt.current = Date.now();
     const t = setTimeout(close, remaining.current);
@@ -5569,13 +5583,13 @@ function ToastNative({ node, props, rootProps, emit, scope }) {
       remaining.current = Math.max(0, remaining.current - (Date.now() - startedAt.current));
     };
   }, [open, duration, paused, close]);
-  if (!shown || !ctx.toastLayer)
+  if (!shown || !(ctx.toastLayer || ctx.inlineOverlays))
     return null;
   const title = str(props.title);
   const description = str(props.description);
   const actionLabel = str(props.actionLabel);
   const assertive = type === `error`;
-  return createPortal(/* @__PURE__ */ jsxs15("div", {
+  const toast = /* @__PURE__ */ jsxs15("div", {
     ...rootProps,
     role: assertive ? `alert` : `status`,
     "aria-live": assertive ? `assertive` : `polite`,
@@ -5628,7 +5642,8 @@ function ToastNative({ node, props, rootProps, emit, scope }) {
         })
       }) : null
     ]
-  }), ctx.toastLayer);
+  });
+  return ctx.inlineOverlays ? toast : createPortal(toast, ctx.toastLayer);
 }
 
 // packages/exponential-ui-react/src/natives/qr.tsx
@@ -6528,7 +6543,7 @@ function RowScope({ rowsPath, row, rowKey, index, tableId, node, onLiteralEdit }
 import { displayString as displayString3 } from "@exponential_app/eui";
 
 // packages/exponential-ui-react/src/markdown.tsx
-import { Fragment as Fragment7, createElement, useMemo as useMemo16 } from "react";
+import { Fragment as Fragment8, createElement, useMemo as useMemo16 } from "react";
 import { linkHref as linkHref3, mediaRequestOf, parseMarkdown } from "@exponential_app/eui/web";
 import { MAX_LINK_NESTING, MAX_LINK_DEST, MAX_BLOCK_NESTING, linkAt, wholeImage, parseList } from "@exponential_app/eui/web";
 import { jsx as jsx23, jsxs as jsxs19 } from "react/jsx-runtime";
@@ -6616,7 +6631,7 @@ function renderList(list, host, key) {
       }),
       item.task === undefined ? null : ` `,
       inline(item.content, host),
-      item.children.map((c, ci) => /* @__PURE__ */ jsx23(Fragment7, {
+      item.children.map((c, ci) => /* @__PURE__ */ jsx23(Fragment8, {
         children: renderList(c, host, ci)
       }, `c${ci}`))
     ]
@@ -6684,7 +6699,7 @@ function block(b, host, key) {
   }
 }
 function blocks(tree, host) {
-  return tree.map((b, k) => /* @__PURE__ */ jsx23(Fragment7, {
+  return tree.map((b, k) => /* @__PURE__ */ jsx23(Fragment8, {
     children: block(b, host, k)
   }, k));
 }
@@ -7001,7 +7016,7 @@ var NATIVE_NAMES = Object.keys(NATIVES);
 
 // packages/exponential-ui-react/src/node-view.tsx
 import { cssValue, isMacroComponent, partClass as partClass4, propAttribute as propAttribute2 } from "@exponential_app/eui/web";
-import { jsx as jsx26, jsxs as jsxs21, Fragment as Fragment9 } from "react/jsx-runtime";
+import { jsx as jsx26, jsxs as jsxs21, Fragment as Fragment10 } from "react/jsx-runtime";
 var CONTAINERS = new Set([`Box`, `List`]);
 function styleIdOf(node) {
   return node.styleId ?? node.id;
@@ -7186,7 +7201,7 @@ var BoundNode = memo2(function BoundNode({ node, scope, live }) {
       });
     }
   }
-  const children = /* @__PURE__ */ jsxs21(Fragment9, {
+  const children = /* @__PURE__ */ jsxs21(Fragment10, {
     children: [
       node.children.map((child) => /* @__PURE__ */ jsx26(NodeView, {
         node: child
@@ -7325,7 +7340,7 @@ function TemplateChildren({ node, scope }) {
   }, generation);
 }
 function TemplateBlock({ items, tpl }) {
-  return /* @__PURE__ */ jsx26(Fragment9, {
+  return /* @__PURE__ */ jsx26(Fragment10, {
     children: items.map((item) => /* @__PURE__ */ jsx26(TemplateItemView, {
       tpl,
       item
@@ -7515,10 +7530,12 @@ function ExponentialSurface({
   locale = DEFAULT_LOCALE,
   timeZone,
   strings: stringOverrides,
+  readOnly = false,
   host,
   extensions: extensionsProp = EMPTY2,
   states = EMPTY2,
   measure,
+  inlineOverlays = false,
   direction: directionProp,
   width,
   viewportHeight,
@@ -7569,9 +7586,9 @@ function ExponentialSurface({
   }, []);
   const lastTree = useRef26({ root: null, templates: NO_TEMPLATES });
   const rawRoot = surface ? surface.root : rootProp ?? null;
-  const root = useMemo19(() => lastTree.current.root = share(lastTree.current.root, rawRoot), [rawRoot]);
+  const root = useMemo19(() => lastTree.current.root = share(lastTree.current.root, readOnly && rawRoot ? readOnlyTree(rawRoot) : rawRoot), [rawRoot, readOnly]);
   const rawTemplates = (surface ? surface.templates : templatesProp) ?? NO_TEMPLATES;
-  const templates = useMemo19(() => lastTree.current.templates = share(lastTree.current.templates, rawTemplates), [rawTemplates]);
+  const templates = useMemo19(() => lastTree.current.templates = share(lastTree.current.templates, readOnly ? readOnlyTemplates(rawTemplates) : rawTemplates), [rawTemplates, readOnly]);
   const templateNode = useCallback11((componentId) => templates[componentId], [templates]);
   const templateRoots = useMemo19(() => Object.values(templates), [templates]);
   const lastBudget = useRef26(undefined);
@@ -7678,6 +7695,7 @@ function ExponentialSurface({
     measure,
     portal,
     toastLayer,
+    inlineOverlays,
     direction,
     functions,
     openUrl,
@@ -7692,7 +7710,7 @@ function ExponentialSurface({
     hover,
     announce,
     subscribe
-  }, live), [surfaceId, compiled, theme, hostValue, extensions, extensionDefs, setData, templateNode, budget, states, measure, portal, toastLayer, direction, functions, openUrl, locale, formatter, now, registerScroller, paintFailures, strings, t, reducedMotion, hover, announce, subscribe]);
+  }, live), [surfaceId, compiled, theme, hostValue, extensions, extensionDefs, setData, templateNode, budget, states, measure, portal, toastLayer, inlineOverlays, direction, functions, openUrl, locale, formatter, now, registerScroller, paintFailures, strings, t, reducedMotion, hover, announce, subscribe]);
   const nodeEl = useCallback11((id) => rootEl?.querySelector(`[data-xui-id="${typeof CSS !== `undefined` && CSS.escape ? CSS.escape(id) : id.replace(/"/g, `\\"`)}"]`) ?? null, [rootEl]);
   useImperativeHandle2(handleRef, () => {
     const focus = (id) => {
@@ -7759,6 +7777,7 @@ ${compiled.css}` }), [compiled.css]);
     "data-xui-theme": theme.id,
     "data-xui-density": density === `default` ? undefined : density,
     "data-xui-motion": reducedMotion ? `reduce` : undefined,
+    "data-xui-overlays": inlineOverlays ? `inline` : undefined,
     "data-xq": xq || undefined,
     dir: direction,
     style: width === undefined ? style : { width, ...style },
@@ -7896,7 +7915,7 @@ import { getPointer as getPointer4, setPointer as setPointer5, absolutePath as a
 
 // packages/exponential-ui-react/src/host-surface.tsx
 import { useCallback as useCallback13, useMemo as useMemo21, useSyncExternalStore as useSyncExternalStore4 } from "react";
-import { jsx as jsx28, Fragment as Fragment10 } from "react/jsx-runtime";
+import { jsx as jsx28, Fragment as Fragment11 } from "react/jsx-runtime";
 function hostPlugin(host, base = {}) {
   return {
     ...base,
@@ -7969,7 +7988,7 @@ function HostSurface({ host, surfaceId, plugin, fallback = null, ...rest }) {
   const surface = useHostSurface(host, surfaceId);
   const p = useMemo21(() => hostPlugin(host, plugin), [host, plugin]);
   if (!surface)
-    return /* @__PURE__ */ jsx28(Fragment10, {
+    return /* @__PURE__ */ jsx28(Fragment11, {
       children: fallback
     });
   return /* @__PURE__ */ jsx28(ExponentialSurface, {
@@ -8080,5 +8099,5 @@ export {
   walkNodes
 };
 
-//# debugId=BC5D9945895E03F164756E2164756E21
+//# debugId=EF808DB07BCA693364756E2164756E21
 //# sourceMappingURL=index.js.map