@servicetitan/anvil2 2.6.1 → 2.7.1

package/dist/{Page-BpV1yHkm.js → Page-DtSjnBJL.js}

@@ -7,69 +7,72 @@ import { S as SvgKeyboardArrowDown } from './keyboard_arrow_down-C8WQ38p1.js';
 import { S as SvgKeyboardArrowUp } from './keyboard_arrow_up-CxzK6LAl.js';
 import { S as SvgChevronRight } from './chevron_right-BdpsxX7x.js';
 import { useTrackingId } from './useTrackingId.js';
-import { P as Popover } from './Popover-Br6qPgKe.js';
+import { P as Popover } from './Popover-Rha0q-Pv.js';
 import { B as Button } from './Button-CVsGhVJz.js';
 import { I as Icon } from './Icon-DuIlne4x.js';
 import { F as Flex } from './Flex-WyyZm1bf.js';
-import { T as Tooltip } from './Tooltip-Bupqao9B.js';
-import { L as Layout } from './Layout-VfhlilMG.js';
+import { T as Tooltip } from './Tooltip-BHwSTwsv.js';
+import { L as Layout } from './Layout-CISAxILX.js';
 import { S as SvgMoreVert } from './more_vert-C_lJSyxt.js';
 import { S as SvgEdit } from './edit-DQOiktcu.js';
 import { S as SvgCheck } from './check-Cf67OWrZ.js';
 import { S as SvgClose } from './close-DZj38AEh.js';
 import { B as ButtonLink } from './ButtonLink-BJKTJER8.js';
-import { B as Breadcrumbs } from './Breadcrumbs-3Y7jnj-F.js';
-import { T as TextField } from './TextField--co7QJ4r.js';
-import { M as Menu } from './Menu-BXsmCP20.js';
+import { M as Menu } from './Menu-CRoJYJ53.js';
+import { B as Breadcrumbs } from './Breadcrumbs-C_WK9Yul.js';
+import { T as TextField } from './TextField-CMv9CpBq.js';
 import { T as Text } from './Text-BJo4oMI2.js';
-import { C as Chip } from './Chip-DjTAR0va.js';
+import { C as Chip } from './Chip-CVyEctAz.js';
+import { createPortal } from 'react-dom';
 import { u as useMergeRefs } from './useMergeRefs-Dfmtq9cI.js';
-import { D as Dialog } from './Dialog-CMhypnCD.js';
+import { D as Dialog } from './Dialog-CloZWa1Q.js';
 import { d as drillDownStyles, D as DrillDownContext } from './DrillDown.module-C8VOhzaF.js';
 import { u as useDrillDownContextState } from './useInitialFocus-BRRbylek.js';
 import { u as useDrillDownContext } from './useDrillDownContext-BssSasVB.js';
 import { u as useLayoutPropsUtil } from './useLayoutPropsUtil-DMDdfIah.js';
 
-import './Page.css';const page = "_page_1s3vu_1";
-const container = "_container_1s3vu_23";
-const content = "_content_1s3vu_5";
-const sidebar = "_sidebar_1s3vu_68";
-const panel = "_panel_1s3vu_153";
-const header = "_header_1s3vu_182";
-const title = "_title_1s3vu_186";
-const chips = "_chips_1s3vu_196";
-const actions = "_actions_1s3vu_200";
-const description = "_description_1s3vu_213";
-const open = "_open_1s3vu_227";
-const small = "_small_1s3vu_227";
-const medium = "_medium_1s3vu_230";
-const large = "_large_1s3vu_233";
-const collapsed = "_collapsed_1s3vu_236";
-const noPadding = "_noPadding_1s3vu_350";
-const layout = "_layout_1s3vu_403";
+import './Page.css';const page = "_page_89lif_1";
+const container = "_container_89lif_26";
+const content = "_content_89lif_8";
+const sidebar = "_sidebar_89lif_80";
+const panel = "_panel_89lif_165";
+const header = "_header_89lif_194";
+const title = "_title_89lif_198";
+const chips = "_chips_89lif_208";
+const actions = "_actions_89lif_212";
+const description = "_description_89lif_225";
+const open = "_open_89lif_239";
+const small = "_small_89lif_239";
+const medium = "_medium_89lif_242";
+const large = "_large_89lif_245";
+const collapsed = "_collapsed_89lif_248";
+const noPadding = "_noPadding_89lif_365";
+const layout = "_layout_89lif_418";
 const styles = {
 	page: page,
-	"content-footer": "_content-footer_1s3vu_5",
+	"content-footer": "_content-footer_89lif_8",
 	container: container,
+	"content-wrapper": "_content-wrapper_89lif_44",
+	"footer-slot": "_footer-slot_89lif_50",
 	content: content,
-	"content-inner": "_content-inner_1s3vu_46",
-	"content-header-inner": "_content-header-inner_1s3vu_51",
+	"content-inner": "_content-inner_89lif_58",
+	"content-header-inner": "_content-header-inner_89lif_63",
 	sidebar: sidebar,
-	"sidebar-inner": "_sidebar-inner_1s3vu_79",
-	"toggle-button-wrapper": "_toggle-button-wrapper_1s3vu_106",
-	"toggle-button-tooltip": "_toggle-button-tooltip_1s3vu_114",
-	"toggle-button": "_toggle-button_1s3vu_106",
-	"sidebar-header": "_sidebar-header_1s3vu_132",
-	"sidebar-adaptive-trigger-container": "_sidebar-adaptive-trigger-container_1s3vu_138",
-	"sidebar-adaptive-container": "_sidebar-adaptive-container_1s3vu_147",
-	"sidebar-adaptive": "_sidebar-adaptive_1s3vu_138",
+	"sidebar-inner": "_sidebar-inner_89lif_91",
+	"toggle-button-wrapper": "_toggle-button-wrapper_89lif_118",
+	"toggle-button-tooltip": "_toggle-button-tooltip_89lif_126",
+	"toggle-button": "_toggle-button_89lif_118",
+	"sidebar-header": "_sidebar-header_89lif_144",
+	"sidebar-adaptive-trigger-container": "_sidebar-adaptive-trigger-container_89lif_150",
+	"sidebar-adaptive-container": "_sidebar-adaptive-container_89lif_159",
+	"sidebar-adaptive": "_sidebar-adaptive_89lif_150",
 	panel: panel,
-	"panel-inner": "_panel-inner_1s3vu_162",
-	"virtual-scroll-container": "_virtual-scroll-container_1s3vu_173",
+	"panel-inner": "_panel-inner_89lif_174",
+	"virtual-scroll-container": "_virtual-scroll-container_89lif_185",
 	header: header,
-	"title-wrapper": "_title-wrapper_1s3vu_186",
+	"title-wrapper": "_title-wrapper_89lif_198",
 	title: title,
-	"preference-action": "_preference-action_1s3vu_193",
+	"preference-action": "_preference-action_89lif_205",
 	chips: chips,
 	actions: actions,
 	description: description,
@@ -78,10 +81,10 @@ const styles = {
 	medium: medium,
 	large: large,
 	collapsed: collapsed,
-	"drilldown-open": "_drilldown-open_1s3vu_337",
+	"drilldown-open": "_drilldown-open_89lif_352",
 	noPadding: noPadding,
-	"sidebar-adaptive-trigger": "_sidebar-adaptive-trigger_1s3vu_138",
-	"sidebar-adaptive-trigger-icon": "_sidebar-adaptive-trigger-icon_1s3vu_376",
+	"sidebar-adaptive-trigger": "_sidebar-adaptive-trigger_89lif_150",
+	"sidebar-adaptive-trigger-icon": "_sidebar-adaptive-trigger-icon_89lif_391",
 	layout: layout
 };
 
@@ -430,15 +433,16 @@ const PageContent = forwardRef(
   (props, ref) => {
     const { children, className, ...rest } = props;
     const classNames = cx([styles["content"]], className);
-    const mainRef = useRef(null);
+    const sectionRef = useRef(null);
     const virtualScrollRef = useRef(null);
     const blocker = useRef(true);
     const [leftOffset, setLeftOffset] = useState(
-      (mainRef.current?.offsetLeft ?? 0) + (mainRef.current?.offsetWidth ?? 0) - 9
+      (sectionRef.current?.offsetLeft ?? 0) + (sectionRef.current?.offsetWidth ?? 0) - 9
     );
     const [contentHeight, setContentHeight] = useState(
-      mainRef.current?.offsetHeight
+      sectionRef.current?.offsetHeight
     );
+    const { contentWrapper } = useContext(PageContext);
     useEffect(() => {
       if (typeof window === "undefined") return;
       if (!blocker.current) return;
@@ -452,46 +456,71 @@ const PageContent = forwardRef(
       };
     }, []);
     useEffect(() => {
-      if (mainRef.current) {
+      if (sectionRef.current) {
+        const wrapperParent = sectionRef.current.parentElement;
+        const isWrapped = wrapperParent?.classList.contains(styles["content-wrapper"]) ?? false;
+        const heightTarget = isWrapped ? wrapperParent : sectionRef.current;
         const observer = new ResizeObserver(() => {
-          if (!mainRef.current) return;
+          if (!sectionRef.current) return;
           setLeftOffset(
-            mainRef.current.offsetLeft + mainRef.current.offsetWidth - 9
+            sectionRef.current.offsetLeft + sectionRef.current.offsetWidth - 9
           );
-          setContentHeight(mainRef.current.offsetHeight);
+          const offsetStr = getComputedStyle(sectionRef.current).getPropertyValue("--offset").trim();
+          const offset = parseFloat(offsetStr) || 0;
+          const rawHeight = document.documentElement.scrollHeight - offset;
+          const safeHeight = Number.isFinite(rawHeight) ? Math.max(0, rawHeight) : 0;
+          setContentHeight(safeHeight);
         });
-        observer.observe(mainRef.current);
+        observer.observe(sectionRef.current);
+        if (isWrapped) {
+          observer.observe(heightTarget);
+        }
         return () => {
           observer.disconnect();
         };
       }
-    }, []);
+    }, [contentWrapper]);
     function scrollBody(e) {
       if (typeof window === "undefined") return;
       if (blocker.current) return;
       window.scrollTo(0, e.target.scrollTop);
     }
-    return /* @__PURE__ */ jsxs("main", { className: classNames, ref: useMergeRefs([mainRef, ref]), ...rest, children: [
-      /* @__PURE__ */ jsx("div", { className: styles["content-inner"], children }),
-      /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: styles["virtual-scroll-container"],
-          ref: virtualScrollRef,
-          style: {
-            left: leftOffset
-          },
-          onScrollCapture: scrollBody,
-          onMouseEnter: () => {
-            blocker.current = false;
-          },
-          onMouseLeave: () => {
-            blocker.current = true;
-          },
-          children: /* @__PURE__ */ jsx("div", { style: { width: 1, height: contentHeight } })
-        }
-      )
-    ] });
+    const section = /* @__PURE__ */ jsxs(
+      "section",
+      {
+        className: classNames,
+        ref: useMergeRefs([sectionRef, ref]),
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsx("div", { className: styles["content-inner"], children }),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: styles["virtual-scroll-container"],
+              ref: virtualScrollRef,
+              style: {
+                left: leftOffset
+              },
+              onScrollCapture: scrollBody,
+              onMouseEnter: () => {
+                blocker.current = false;
+              },
+              onMouseLeave: () => {
+                blocker.current = true;
+              },
+              children: /* @__PURE__ */ jsx("div", { style: { width: 1, height: contentHeight } })
+            }
+          )
+        ]
+      }
+    );
+    if (contentWrapper) {
+      return createPortal(section, contentWrapper);
+    }
+    if (contentWrapper === void 0) {
+      return section;
+    }
+    return null;
   }
 );
 PageContent.displayName = "PageContent";
@@ -591,167 +620,191 @@ const PageFooter = forwardRef(
   (props, ref) => {
     const { layoutStyles, componentProps } = useLayoutPropsUtil(props);
     const { children, className, style, ...rest } = componentProps;
+    const { footerSlot } = useContext(PageContext);
     const classNames = cx([styles["content-footer"]], className);
     const styleCombined = {
       ...style,
       ...layoutStyles
     };
-    return /* @__PURE__ */ jsx("footer", { className: classNames, ref, style: styleCombined, ...rest, children });
+    const footer = /* @__PURE__ */ jsx("footer", { className: classNames, ref, style: styleCombined, ...rest, children });
+    if (footerSlot) {
+      return createPortal(footer, footerSlot);
+    }
+    if (footerSlot === void 0) {
+      return footer;
+    }
+    return null;
   }
 );
 PageFooter.displayName = "PageFooter";
 
-const PageElement = forwardRef((props, ref) => {
-  const { children, className, ...rest } = props;
-  const classNames = cx(styles["page"], className);
-  const elRef = useRef(null);
-  const combinedRef = useMergeRefs([elRef, ref]);
-  const [pageWidth, setPageWidth] = useState(0);
-  useLayoutEffect(() => {
-    const element = elRef.current;
-    const resizeObserver = new ResizeObserver((entries) => {
-      const entry = entries[0];
-      if (entry) {
-        setPageWidth(entry.contentRect.width);
-      }
-    });
-    if (element) {
-      resizeObserver.observe(element);
-    }
-    return () => {
+const Page = Object.assign(
+  forwardRef(function PageInner(props, ref) {
+    const { children, className, ...rest } = props;
+    const classNames = cx(styles["page"], className);
+    const elRef = useRef(null);
+    const combinedRef = useMergeRefs([elRef, ref]);
+    const [pageWidth, setPageWidth] = useState(0);
+    const [contentWrapper, setContentWrapper] = useState(
+      null
+    );
+    const [footerSlot, setFooterSlot] = useState(null);
+    useLayoutEffect(() => {
+      const element = elRef.current;
+      const resizeObserver = new ResizeObserver((entries) => {
+        const entry = entries[0];
+        if (entry) {
+          setPageWidth(entry.contentRect.width);
+        }
+      });
       if (element) {
-        resizeObserver.unobserve(element);
-        resizeObserver.disconnect();
+        resizeObserver.observe(element);
       }
-    };
-  }, [elRef]);
-  return /* @__PURE__ */ jsx(PageContext.Provider, { value: { pageWidth }, children: /* @__PURE__ */ jsx("div", { className: classNames, "data-anv": "Page", ref: combinedRef, ...rest, children: /* @__PURE__ */ jsx("div", { className: styles["container"], children }) }) });
-});
-PageElement.displayName = "Page";
-const Page = Object.assign(PageElement, {
-  /**
-   * PageSidebar component for creating collapsible navigation sidebars.
-   *
-   * Features:
-   * - Collapsible sidebar with localStorage persistence
-   * - Responsive design with adaptive popover on mobile
-   * - Automatic tracking ID generation for analytics
-   * - Keyboard navigation and accessibility support
-   * - Toggle button with tooltip
-   * - Context provider for sidebar state
-   * - Mobile-friendly popover navigation
-   *
-   * @example
-   * <Page.Sidebar currentPageTitle="Navigation">
-   *   <Page.SidebarHeader>
-   *     <Text variant="headline" el="h2">Sidebar Title</Text>
-   *   </Page.SidebarHeader>
-   *   <SideNav>
-   *     <SideNavLink pathname="/">Home</SideNavLink>
-   *   </SideNav>
-   * </Page.Sidebar>
-   */
-  Sidebar: PageSidebar,
-  /**
-   * PageSidebarHeader component for creating header sections within sidebars.
-   *
-   * Features:
-   * - Container for sidebar header content
-   * - Automatic visibility handling based on sidebar collapsed state
-   * - Supports all standard div props
-   * - Context-aware styling
-   *
-   * @example
-   * <Page.SidebarHeader>
-   *   <Text variant="headline" el="h2" size="medium">
-   *     Sidebar Title
-   *   </Text>
-   * </Page.SidebarHeader>
-   */
-  SidebarHeader: PageSidebarHeader,
-  /**
-   * PageHeader component for creating page headers with navigation and actions.
-   *
-   * Features:
-   * - Page title with semantic heading
-   * - Breadcrumb navigation support
-   * - Status chips display
-   * - Primary and secondary action buttons
-   * - Preference action button/link
-   * - Responsive layout with fluid grid
-   * - Accessibility support with proper ARIA labels
-   * - Flexible layout configuration
-   * - Description content support
-   *
-   * @example
-   * <Page.Header
-   *   title="Page Title"
-   *   breadcrumbs={[
-   *     { href: "/", children: "Home" },
-   *     { children: "Current Page" }
-   *   ]}
-   *   chips={[{ label: "Status" }]}
-   *   actions={{
-   *     primary: { label: "Save", onClick: handleSave },
-   *     secondary: [{ label: "Cancel", onClick: handleCancel }]
-   *   }}
-   * />
-   */
-  Header: PageHeader,
-  /**
-   * PageContent component for the main content area of a page.
-   *
-   * Features:
-   * - Semantic main element for page content
-   * - Virtual scrolling support for long content
-   * - Automatic scroll synchronization
-   * - Responsive design
-   * - Accessibility support with proper main landmark
-   * - Scroll position management
-   *
-   * @example
-   * <Page.Content>
-   *   <Text>Main page content goes here</Text>
-   *   <Button>Action Button</Button>
-   * </Page.Content>
-   */
-  Content: PageContent,
-  /**
-   * PagePanel component for creating slide-out panels or dialogs.
-   *
-   * Features:
-   * - Responsive design with dialog fallback on mobile
-   * - Multiple size variants (small, medium, large)
-   * - Optional padding control
-   * - Persistent or controlled open state
-   * - Automatic mobile dialog conversion
-   * - Keyboard navigation and accessibility support
-   * - Smooth animations and transitions
-   *
-   * @example
-   * <Page.Panel open={isOpen} size="medium">
-   *   <Text variant="headline" el="h3">Panel Content</Text>
-   *   <Button onClick={() => setIsOpen(false)}>Close</Button>
-   * </Page.Panel>
-   */
-  Panel: PagePanel,
-  /**
-   * PageFooter component for creating page footers with layout utilities.
-   *
-   * Features:
-   * - Semantic footer element
-   * - Layout utility props support
-   * - Responsive design
-   * - Accessibility support with proper footer landmark
-   * - Flexible content positioning
-   *
-   * @example
-   * <Page.Footer>
-   *   <Text>Footer content with layout utilities</Text>
-   * </Page.Footer>
-   */
-  Footer: PageFooter
-});
+      return () => {
+        if (element) {
+          resizeObserver.unobserve(element);
+          resizeObserver.disconnect();
+        }
+      };
+    }, [elRef]);
+    return /* @__PURE__ */ jsx(PageContext.Provider, { value: { pageWidth, contentWrapper, footerSlot }, children: /* @__PURE__ */ jsx("div", { className: classNames, "data-anv": "Page", ref: combinedRef, ...rest, children: /* @__PURE__ */ jsxs("div", { className: styles["container"], children: [
+      children,
+      /* @__PURE__ */ jsx(
+        "main",
+        {
+          className: styles["content-wrapper"],
+          ref: setContentWrapper
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { className: styles["footer-slot"], ref: setFooterSlot })
+    ] }) }) });
+  }),
+  {
+    /**
+     * PageSidebar component for creating collapsible navigation sidebars.
+     *
+     * Features:
+     * - Collapsible sidebar with localStorage persistence
+     * - Responsive design with adaptive popover on mobile
+     * - Automatic tracking ID generation for analytics
+     * - Keyboard navigation and accessibility support
+     * - Toggle button with tooltip
+     * - Context provider for sidebar state
+     * - Mobile-friendly popover navigation
+     *
+     * @example
+     * <Page.Sidebar currentPageTitle="Navigation">
+     *   <Page.SidebarHeader>
+     *     <Text variant="headline" el="h2">Sidebar Title</Text>
+     *   </Page.SidebarHeader>
+     *   <SideNav>
+     *     <SideNavLink pathname="/">Home</SideNavLink>
+     *   </SideNav>
+     * </Page.Sidebar>
+     */
+    Sidebar: PageSidebar,
+    /**
+     * PageSidebarHeader component for creating header sections within sidebars.
+     *
+     * Features:
+     * - Container for sidebar header content
+     * - Automatic visibility handling based on sidebar collapsed state
+     * - Supports all standard div props
+     * - Context-aware styling
+     *
+     * @example
+     * <Page.SidebarHeader>
+     *   <Text variant="headline" el="h2" size="medium">
+     *     Sidebar Title
+     *   </Text>
+     * </Page.SidebarHeader>
+     */
+    SidebarHeader: PageSidebarHeader,
+    /**
+     * PageHeader component for creating page headers with navigation and actions.
+     *
+     * Features:
+     * - Page title with semantic heading
+     * - Breadcrumb navigation support
+     * - Status chips display
+     * - Primary and secondary action buttons
+     * - Preference action button/link
+     * - Responsive layout with fluid grid
+     * - Accessibility support with proper ARIA labels
+     * - Flexible layout configuration
+     * - Description content support
+     *
+     * @example
+     * <Page.Header
+     *   title="Page Title"
+     *   breadcrumbs={[
+     *     { href: "/", children: "Home" },
+     *     { children: "Current Page" }
+     *   ]}
+     *   chips={[{ label: "Status" }]}
+     *   actions={{
+     *     primary: { label: "Save", onClick: handleSave },
+     *     secondary: [{ label: "Cancel", onClick: handleCancel }]
+     *   }}
+     * />
+     */
+    Header: PageHeader,
+    /**
+     * PageContent component for the main content area of a page.
+     *
+     * Features:
+     * - Semantic main element for page content
+     * - Virtual scrolling support for long content
+     * - Automatic scroll synchronization
+     * - Responsive design
+     * - Accessibility support with proper main landmark
+     * - Scroll position management
+     *
+     * @example
+     * <Page.Content>
+     *   <Text>Main page content goes here</Text>
+     *   <Button>Action Button</Button>
+     * </Page.Content>
+     */
+    Content: PageContent,
+    /**
+     * PagePanel component for creating slide-out panels or dialogs.
+     *
+     * Features:
+     * - Responsive design with dialog fallback on mobile
+     * - Multiple size variants (small, medium, large)
+     * - Optional padding control
+     * - Persistent or controlled open state
+     * - Automatic mobile dialog conversion
+     * - Keyboard navigation and accessibility support
+     * - Smooth animations and transitions
+     *
+     * @example
+     * <Page.Panel open={isOpen} size="medium">
+     *   <Text variant="headline" el="h3">Panel Content</Text>
+     *   <Button onClick={() => setIsOpen(false)}>Close</Button>
+     * </Page.Panel>
+     */
+    Panel: PagePanel,
+    /**
+     * PageFooter component for creating page footers with layout utilities.
+     *
+     * Features:
+     * - Semantic footer element
+     * - Layout utility props support
+     * - Responsive design
+     * - Accessibility support with proper footer landmark
+     * - Flexible content positioning
+     *
+     * @example
+     * <Page.Footer>
+     *   <Text>Footer content with layout utilities</Text>
+     * </Page.Footer>
+     */
+    Footer: PageFooter
+  }
+);
+Page.displayName = "Page";
 
 export { Page as P };
-//# sourceMappingURL=Page-BpV1yHkm.js.map
+//# sourceMappingURL=Page-DtSjnBJL.js.map