@mortenbrudvik/waveui 0.10.0 → 0.11.0

package/dist/components/navigation/NavDrawer.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavDrawer.cjs","names":["React","NavDrawerLayoutContext","useModalOpenState","useDrawerOpen","useNavRootState","useId","useScrollState","isDev","hasWarned","DrawerPanel","inertModalTrigger","cn","drawerClassNames","navDrawerClassNames","NavContext","NavDrawerContext","navDrawerHeaderClassNames","scrollSeparatorClasses","useRovingTabIndex","TOOLBAR_ITEM_SELECTOR","useMergedRefs","composeEventHandlers","navDrawerBodyClassNames","NavRovingContext","navDrawerFooterClassNames","require_runtime","require_cn","require_dev","require_composeEventHandlers","require_classNames","require_useId","require_useRovingTabIndex","require_useMergedRefs","require_Toolbar_navigation","require_Nav_context","require_Nav_root","require_Dialog_shared","require_Drawer_panel","require_Drawer_scroll","require_NavDrawer_context","react","react_jsx_runtime","UNREACHABLE_WARNING_KEY","UNREACHABLE_WARNING","LOOSE_ITEMS_WARNING_KEY","LOOSE_ITEMS_WARNING","hasLooseListItem","item","nav","parent","INERT_LAYOUT","useNavDrawerLayout","componentName","NavDrawerRoot","openProp","modalTypeProp","ariaLabel","ariaLabelledBy","ariaDescribedBy","rest","openState","requestOpen","defaultOpen","onOpenChange","open","type","navState","defaultValue","onItemSelect","modalType","generatedId","panelId","id","body","setBody","registerBody","previous","element","scrollState","layout","drawer","unreachable","navRef","nameProps","panelNameProps","panel","NavDrawerHeader","className","NavDrawerBody","arrow","focusMode","currentCategory","setCurrentCategory","reportCurrentCategory","holdsCurrent","category","roving","selected","activeValue","attachBody","mergedRef","ref","containerProps","listRef","onKeyDown","onFocus","NavDrawerFooter","NavDrawer"],"sources":["../../../src/components/navigation/NavDrawer.tsx"],"sourcesContent":["import * as React from 'react';\nimport { cn } from '../../lib/cn';\nimport {\n  drawerClassNames,\n  navDrawerBodyClassNames,\n  navDrawerClassNames,\n  navDrawerFooterClassNames,\n  navDrawerHeaderClassNames,\n} from '../../lib/classNames';\nimport { composeEventHandlers } from '../../lib/composeEventHandlers';\nimport { hasWarned, isDev, reportMissingContext, warnOnce } from '../../lib/dev';\nimport type { Slot, SlotObject } from '../../lib/slot';\nimport type { BackdropAppearance, FocusMode, ModalType } from '../../lib/types';\nimport { useId } from '../../hooks/useId';\nimport { useMergedRefs } from '../../hooks/useMergedRefs';\nimport { useRovingTabIndex } from '../../hooks/useRovingTabIndex';\nimport { TOOLBAR_ITEM_SELECTOR } from '../button/Toolbar.navigation';\nimport {\n  inertModalTrigger,\n  useModalOpenState,\n  useModalTriggerSession,\n} from '../overlays/Dialog.shared';\nimport type {\n  DrawerOpenChangeDetails,\n  DrawerPosition,\n  DrawerSize,\n  DrawerType,\n} from '../overlays/Drawer.context';\nimport { DrawerPanel, useDrawerOpen } from '../overlays/Drawer.panel';\nimport { scrollSeparatorClasses, useScrollState } from '../overlays/Drawer.scroll';\nimport {\n  NavContext,\n  NavRovingContext,\n  useNavListChildCheck,\n  type NavRovingContextValue,\n} from './Nav.context';\nimport { useNavRootState, type NavProps } from './Nav.root';\nimport {\n  NavDrawerContext,\n  NavDrawerLayoutContext,\n  type NavDrawerContextValue,\n  type NavDrawerLayoutContextValue,\n} from './NavDrawer.context';\n\n/*\n * NavDrawer: Nav's state (`useNavRootState`) and a navigation landmark in the drawer panel shell\n * (`DrawerPanel`), with its Header, Body and Footer parts. Imports the Nav root and context modules\n * (never `Nav.tsx`) and the shell's modules (never Drawer's root or compound); Nav never imports\n * it, and `Hamburger.tsx` reads only `NavDrawer.context.ts`.\n */\n\n// ---------------------------------------------------------------------------\n// Types\n// ---------------------------------------------------------------------------\n\n/** Properties for the NavDrawer component. */\nexport interface NavDrawerProps\n  extends\n    Omit<React.HTMLAttributes<HTMLDivElement>, 'defaultValue'>,\n    Pick<\n      NavProps,\n      | 'value'\n      | 'defaultValue'\n      | 'onValueChange'\n      | 'openCategories'\n      | 'defaultOpenCategories'\n      | 'onOpenCategoriesChange'\n      | 'currentCategory'\n    > {\n  /**\n   * How the drawer sits on the page (Fluent's `type`).\n   * - `overlay`: a panel over the page, rendered in a portal while open (in the browser only: an\n   *   open overlay is closed in the server HTML and opens once hydrated). Modal by default: focus\n   *   moves in and stays there, the rest of the page is `inert` and does not scroll, and Escape\n   *   and a backdrop press close it. It is a dialog with the navigation's name.\n   * - `inline`: a panel in the page layout, rendered where the NavDrawer is (also in the server\n   *   HTML). The page stays usable around it; Escape and presses outside do nothing; opening it\n   *   moves no focus, and closing it while focus is inside returns focus to `finalFocusRef`, else\n   *   to the element that opened it.\n   *\n   * Changing `type` remounts the panel; the selection and the open categories are kept. Rendered\n   * as `data-type`.\n   * @default 'overlay'\n   */\n  type?: DrawerType;\n  /** Controlled open state. */\n  open?: boolean;\n  /**\n   * Open state for uncontrolled usage. Keep the drawer controlled instead: a closed uncontrolled\n   * NavDrawer cannot be opened again (a Hamburger inside it is not shown while it is closed).\n   * @default false\n   */\n  defaultOpen?: boolean;\n  /**\n   * Called with the new open state when it changes, with `details.reason`: `trigger` (a Hamburger\n   * inside the drawer), `escape` and `outside-press` (the backdrop; overlay only). `details` is\n   * typed optional until 1.0. A controlled drawer stays as it is until you update `open`.\n   */\n  onOpenChange?: (open: boolean, details?: DrawerOpenChangeDetails) => void;\n  /**\n   * Called with an item's value every time an item is activated, also when the current page is\n   * activated again (a disabled item, a link opened in another tab or window, and a button item\n   * whose `onClick` calls `preventDefault()` are not activations). Close an overlay drawer here:\n   * `onValueChange` fires only when the value changes. Fluent's `onNavItemSelect`.\n   */\n  onItemSelect?: (value: string) => void;\n  /**\n   * The edge the panel is attached to: an overlay's screen edge; an inline panel's inner edge is\n   * the opposite one. `start`/`end` follow the text direction; `left`/`right` are physical sides;\n   * `bottom` runs along the bottom edge. Unlike Drawer's (`'end'`), the default is the start edge,\n   * where navigation sits (Fluent's). Rendered as `data-position`.\n   * @default 'start'\n   */\n  position?: DrawerPosition;\n  /**\n   * The panel's width at a side (its height at the bottom), on Drawer's scale: `small` 320px,\n   * `medium` 592px, `large` 940px, `full` the viewport (inline: the container). A width class in\n   * `className` replaces it (Fluent's navigation pane is 260px wide: the width class of 65\n   * spacing steps). Rendered as `data-size`. Drawer's default too.\n   * @default 'small'\n   */\n  size?: DrawerSize;\n  /**\n   * Inline drawers: draws a line on the panel's inner edge (`data-separator`), as Nav does\n   * (Drawer's `separator` defaults to `false`). An overlay always draws that edge; forced colours\n   * always draw it.\n   * @default true\n   */\n  separator?: boolean;\n  /**\n   * Overlay drawers: `modal` (backdrop, focus trapped, page inert and not scrolling) or\n   * `non-modal` (no backdrop, no trap, nothing inert; Escape closes it while focus is inside, and\n   * its Tab place follows the element that opened it). A non-modal overlay covers the page under\n   * it while the page keeps its Tab order: keep the page's controls clear of it (reserve its width,\n   * or its height at the bottom, in your layout while it is open) or use `type=\"inline\"`; with\n   * `size=\"full\"` it hides the whole page and warns. Ignored by inline drawers. Rendered as\n   * `data-modal-type` on an overlay's panel. Fluent's `modalType` (without `alert`: a navigation\n   * pane is never an alert, so an `'alert'` is treated as `'modal'`). Drawer's default too.\n   * @default 'modal'\n   */\n  modalType?: Extract<ModalType, 'modal' | 'non-modal'>;\n  /**\n   * Removes the panel when the drawer closes. `false` keeps it mounted while closed, out of view\n   * and `inert`, so the state of what is inside survives, and a Hamburger outside can point\n   * `aria-controls` at it at all times: always for an inline drawer, and once the page has\n   * hydrated for an overlay (whose panel is not in the server HTML). Fluent's `unmountOnClose`.\n   * Drawer's default too.\n   * @default true\n   */\n  unmountOnClose?: boolean;\n  /**\n   * Where focus goes when the drawer closes with focus inside it (a modal overlay: whenever it\n   * closes). Pass your page's Hamburger, so a Hamburger inside the drawer that closes it hands\n   * focus to the one that opens it again.\n   */\n  finalFocusRef?: React.RefObject<HTMLElement | null>;\n  /**\n   * The backdrop of a modal overlay (Drawer's `backdrop` slot: `null` renders none, a slot\n   * object's `appearance` picks the fill). Ignored, with a development warning, by a non-modal or\n   * inline drawer.\n   */\n  backdrop?: Slot<'div'> | (SlotObject<'div'> & { appearance?: BackdropAppearance });\n  /**\n   * Name of the navigation landmark (and of an overlay's dialog). Localize it; rename it when the\n   * page has another navigation landmark (two with one name are ambiguous). An `aria-labelledby`\n   * replaces the default.\n   * @default 'Navigation'\n   */\n  'aria-label'?: string;\n  /** `NavDrawer.Header`, `NavDrawer.Body` and `NavDrawer.Footer`, rendered in the order written. */\n  children?: React.ReactNode;\n  /** Ref to the panel: the `role=\"dialog\"` element of an overlay drawer, the panel element of an inline one. */\n  ref?: React.Ref<HTMLDivElement>;\n}\n\n/** Properties for the NavDrawerHeader sub-component. */\nexport interface NavDrawerHeaderProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** A Hamburger, the app's name, …: any content (Nav items go in the body or the footer). */\n  children?: React.ReactNode;\n  /** Ref to the header element. */\n  ref?: React.Ref<HTMLDivElement>;\n}\n\n/** Properties for the NavDrawerBody sub-component. */\nexport interface NavDrawerBodyProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * How the keyboard reaches the items. `'tab'`: every item is a Tab stop and the arrow keys do\n   * nothing (Nav's model). `'arrow'`: the body is one Tab stop, the last focused element (at first\n   * the current page, or the closed category that holds it, else the first item); Down and Right\n   * move to the next element and Up and Left to the previous one (Left and Right swap in a\n   * right-to-left layout), wrapping, and Home and End go to the ends. Every focusable element in\n   * the body joins the order, item actions included. Screen readers do not announce arrow keys in\n   * a navigation landmark: prefer `'tab'` unless your users expect an app pane. Rendered as\n   * `data-focus-mode`. Fluent's NavDrawer uses arrow keys by default (its `tabbable` adds Tab\n   * stops).\n   * @default 'tab'\n   */\n  focusMode?: FocusMode;\n  /** Nav parts: `Nav.Item`, `Nav.Category`, `Nav.SectionHeader`, … (each renders its own list item). */\n  children?: React.ReactNode;\n  /** Ref to the scrolling body element. */\n  ref?: React.Ref<HTMLDivElement>;\n}\n\n/** Properties for the NavDrawerFooter sub-component. */\nexport interface NavDrawerFooterProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Nav parts pinned below the body (Settings, Help); wrap other content in an `<li>`. */\n  children?: React.ReactNode;\n  /** Ref to the footer element. */\n  ref?: React.Ref<HTMLDivElement>;\n}\n\n// ---------------------------------------------------------------------------\n// Development checks\n// ---------------------------------------------------------------------------\n\nconst UNREACHABLE_WARNING_KEY = 'NavDrawer:unreachable';\nconst UNREACHABLE_WARNING =\n  'NavDrawer is closed and nothing can open it: it is uncontrolled (no `open` prop), and a Hamburger inside it cannot be reached while it is closed. Control it with `open` and `onOpenChange`, and open it from a Hamburger (or any button) outside it.';\n\nconst LOOSE_ITEMS_WARNING_KEY = 'NavDrawer:loose-items';\nconst LOOSE_ITEMS_WARNING =\n  'NavDrawer: a list item sits outside NavDrawer.Body and NavDrawer.Footer, the parts that render a list. Move Nav.Item, Nav.Category and the other Nav parts into NavDrawer.Body or NavDrawer.Footer.';\n\n/** Whether `nav` holds an `<li>` whose parent is not a `<ul>` or `<ol>`. */\nfunction hasLooseListItem(nav: HTMLElement): boolean {\n  for (const item of Array.from(nav.querySelectorAll('li'))) {\n    const parent = item.parentElement?.localName;\n    if (parent !== 'ul' && parent !== 'ol') return true;\n  }\n  return false;\n}\n\n// ---------------------------------------------------------------------------\n// Root\n// ---------------------------------------------------------------------------\n\n/** The scroll state and body registry the parts read outside a NavDrawer in production. */\nconst INERT_LAYOUT: NavDrawerLayoutContextValue = {\n  scrollState: 'none',\n  registerBody: () => () => {},\n};\n\n/** C-CONTEXT: the enclosing NavDrawer's layout for the part `componentName`. */\nfunction useNavDrawerLayout(componentName: string): NavDrawerLayoutContextValue {\n  const context = React.useContext(NavDrawerLayoutContext);\n  if (context) return context;\n  reportMissingContext(componentName, 'NavDrawer');\n  return INERT_LAYOUT;\n}\n\n// The root of `NavDrawer` (documented on the export below).\nconst NavDrawerRoot = ({\n  type = 'overlay',\n  open: openProp,\n  defaultOpen,\n  onOpenChange,\n  onItemSelect,\n  position = 'start',\n  size = 'small',\n  separator = true,\n  modalType: modalTypeProp = 'modal',\n  unmountOnClose = true,\n  finalFocusRef,\n  backdrop,\n  value,\n  defaultValue,\n  onValueChange,\n  openCategories,\n  defaultOpenCategories,\n  onOpenCategoriesChange,\n  currentCategory,\n  'aria-label': ariaLabel,\n  'aria-labelledby': ariaLabelledBy,\n  'aria-describedby': ariaDescribedBy,\n  id,\n  children,\n  ref,\n  ...rest\n}: NavDrawerProps) => {\n  const [openState, requestOpen] = useModalOpenState(openProp, defaultOpen, onOpenChange);\n  // An overlay reports itself closed until the page has hydrated (its portal renders only in the\n  // browser), so a Hamburger's aria-controls never names a panel that is not there.\n  const open = useDrawerOpen(type, openState);\n  const navState = useNavRootState({\n    componentName: 'NavDrawer',\n    value,\n    defaultValue: defaultValue ?? '',\n    onValueChange,\n    onActivate: onItemSelect,\n    openCategories,\n    defaultOpenCategories,\n    onOpenCategoriesChange,\n    currentCategory,\n    children,\n  });\n  // A navigation pane is never an alert: an 'alert' passed at run time is a modal one.\n  const modalType: ModalType = modalTypeProp === 'non-modal' ? 'non-modal' : 'modal';\n  const generatedId = useId('wave-nav-drawer');\n  const panelId = id ?? generatedId;\n\n  // The first mounted body, measured for the scroll-state separators of the parts.\n  const [body, setBody] = React.useState<HTMLElement | null>(null);\n  const registerBody = React.useCallback((element: HTMLElement) => {\n    setBody((previous) => previous ?? element);\n    return () => setBody((previous) => (previous === element ? null : previous));\n  }, []);\n  const scrollState = useScrollState(body);\n  const layout = React.useMemo<NavDrawerLayoutContextValue>(\n    () => ({ scrollState, registerBody }),\n    [scrollState, registerBody],\n  );\n  const drawer = React.useMemo<NavDrawerContextValue>(\n    () => ({ open, requestOpen, panelId, type }),\n    [open, requestOpen, panelId, type],\n  );\n\n  // An uncontrolled drawer that is closed has no way back: its Hamburgers are inside it.\n  const unreachable = openProp === undefined && !openState;\n  React.useEffect(() => {\n    if (unreachable) warnOnce(UNREACHABLE_WARNING_KEY, UNREACHABLE_WARNING);\n  }, [unreachable]);\n\n  // Development only: after every commit, a list item outside the Body's and Footer's lists.\n  const navRef = React.useRef<HTMLElement>(null);\n  React.useEffect(() => {\n    if (!isDev || hasWarned(LOOSE_ITEMS_WARNING_KEY)) return;\n    const nav = navRef.current;\n    if (nav && hasLooseListItem(nav)) warnOnce(LOOSE_ITEMS_WARNING_KEY, LOOSE_ITEMS_WARNING);\n  });\n\n  // The name goes to the <nav> in both types and, in an overlay, also to its dialog panel. An\n  // aria-labelledby without aria-label drops the default.\n  const nameProps = {\n    'aria-label': ariaLabel ?? (ariaLabelledBy === undefined ? 'Navigation' : undefined),\n    'aria-labelledby': ariaLabelledBy,\n    'aria-describedby': ariaDescribedBy,\n  };\n  const panelNameProps = type === 'overlay' ? nameProps : undefined;\n\n  const panel = (\n    <DrawerPanel\n      componentName=\"NavDrawer\"\n      type={type}\n      open={open}\n      requestOpen={requestOpen}\n      position={position}\n      size={size}\n      separator={separator}\n      modalType={modalType}\n      unmountOnClose={unmountOnClose}\n      inlineAs=\"div\"\n      trigger={inertModalTrigger}\n      finalFocusRef={finalFocusRef}\n      rootClassName={cn(drawerClassNames.root, navDrawerClassNames.root)}\n      backdropClassName={cn(drawerClassNames.backdrop, navDrawerClassNames.backdrop)}\n      backdrop={backdrop}\n      id={panelId}\n      {...panelNameProps}\n      {...rest}\n      ref={ref as React.Ref<HTMLElement> | undefined}\n    >\n      <nav\n        ref={navRef}\n        {...nameProps}\n        className={cn(navDrawerClassNames.nav, 'flex min-h-0 flex-1 flex-col')}\n      >\n        {children}\n      </nav>\n    </DrawerPanel>\n  );\n  // After the shell's effects (focus restore), as the shell's contract asks.\n  useModalTriggerSession(inertModalTrigger, open);\n\n  return (\n    <NavContext.Provider value={navState}>\n      <NavDrawerContext.Provider value={drawer}>\n        <NavDrawerLayoutContext.Provider value={layout}>{panel}</NavDrawerLayoutContext.Provider>\n      </NavDrawerContext.Provider>\n    </NavContext.Provider>\n  );\n};\nNavDrawerRoot.displayName = 'NavDrawer';\n\n// ---------------------------------------------------------------------------\n// Parts\n// ---------------------------------------------------------------------------\n\n/**\n * The header row of a NavDrawer: a Hamburger, the app's name, … (no list: Nav items go in the\n * body or the footer). Its line underneath shows while the body is scrolled away from its top.\n */\nexport const NavDrawerHeader = ({ className, children, ref, ...rest }: NavDrawerHeaderProps) => {\n  const { scrollState } = useNavDrawerLayout('NavDrawer.Header');\n  return (\n    <div\n      data-scroll-state={scrollState}\n      {...rest}\n      ref={ref}\n      className={cn(\n        navDrawerHeaderClassNames.root,\n        'flex shrink-0 items-center gap-2 ps-2.5 pe-2 py-2',\n        scrollSeparatorClasses.header,\n        className,\n      )}\n    >\n      {children}\n    </div>\n  );\n};\nNavDrawerHeader.displayName = 'NavDrawerHeader';\n\n/**\n * The scrolling list of a NavDrawer: the Nav parts (`Nav.Item`, `Nav.Category`, …) as the items of\n * its list. With `focusMode=\"arrow\"` it is one Tab stop and the arrow keys move through it.\n */\nexport const NavDrawerBody = ({\n  focusMode = 'tab',\n  className,\n  onKeyDown,\n  onFocus,\n  children,\n  ref,\n  ...rest\n}: NavDrawerBodyProps) => {\n  const { scrollState, registerBody } = useNavDrawerLayout('NavDrawer.Body');\n  const nav = React.useContext(NavContext);\n  const arrow = focusMode === 'arrow';\n\n  // The closed category that holds the current page, reported by the categories of an arrow body\n  // from their layout effects: it holds the first Tab stop while the current page is hidden.\n  const [currentCategory, setCurrentCategory] = React.useState<string | null>(null);\n  const reportCurrentCategory = React.useCallback((category: string, holdsCurrent: boolean) => {\n    setCurrentCategory((previous) =>\n      holdsCurrent ? category : previous === category ? null : previous,\n    );\n  }, []);\n  const roving = React.useMemo<NavRovingContextValue>(\n    () => ({ reportCurrentCategory }),\n    [reportCurrentCategory],\n  );\n  const selected = nav?.value ?? '';\n  const activeValue =\n    currentCategory !== null ? `wave-nav-category:${currentCategory}` : selected || null;\n  // Always called (C-HOOKS); the container attaches only in the arrow mode, and detaching it hands\n  // every element its own tabindex back.\n  const { containerProps } = useRovingTabIndex({\n    itemSelector: TOOLBAR_ITEM_SELECTOR,\n    manageTabIndex: true,\n    tabStop: 'last-focused',\n    orientation: 'both',\n    loop: true,\n    homeEndKeys: true,\n    typeahead: false,\n    activeValue,\n  });\n\n  const attachBody = React.useCallback(\n    (element: HTMLDivElement | null) => (element ? registerBody(element) : undefined),\n    [registerBody],\n  );\n  const mergedRef = useMergedRefs<HTMLDivElement>(\n    ref,\n    attachBody,\n    arrow ? containerProps.ref : null,\n  );\n  // Development only: every child of the list is an <li> (`NavDrawer.Body:list-child`).\n  const listRef = React.useRef<HTMLUListElement>(null);\n  useNavListChildCheck(listRef, 'NavDrawer.Body', 'items');\n\n  return (\n    <div\n      data-focus-mode={focusMode}\n      data-scroll-state={scrollState}\n      {...rest}\n      ref={mergedRef}\n      data-roving-container={arrow ? '' : undefined}\n      onKeyDown={composeEventHandlers(onKeyDown, arrow ? containerProps.onKeyDown : undefined)}\n      onFocus={composeEventHandlers(onFocus, arrow ? containerProps.onFocus : undefined, {\n        checkDefaultPrevented: false,\n      })}\n      className={cn(navDrawerBodyClassNames.root, 'min-h-0 flex-1 overflow-y-auto py-2', className)}\n    >\n      <NavRovingContext.Provider value={arrow ? roving : null}>\n        <ul ref={listRef} className={cn(navDrawerBodyClassNames.list, 'm-0 list-none p-0')}>\n          {children}\n        </ul>\n      </NavRovingContext.Provider>\n    </div>\n  );\n};\nNavDrawerBody.displayName = 'NavDrawerBody';\n\n/**\n * The list pinned below a NavDrawer's body (Settings, Help): Nav parts as the items of its list,\n * each a Tab stop. Its line above shows while more of the body is below.\n */\nexport const NavDrawerFooter = ({ className, children, ref, ...rest }: NavDrawerFooterProps) => {\n  const { scrollState } = useNavDrawerLayout('NavDrawer.Footer');\n  // Development only: every child of the list is an <li> (`NavDrawer.Footer:list-child`).\n  const listRef = React.useRef<HTMLUListElement>(null);\n  useNavListChildCheck(listRef, 'NavDrawer.Footer', 'items');\n  return (\n    <div\n      data-scroll-state={scrollState}\n      {...rest}\n      ref={ref}\n      className={cn(\n        navDrawerFooterClassNames.root,\n        'shrink-0 py-2',\n        scrollSeparatorClasses.footer,\n        className,\n      )}\n    >\n      <ul ref={listRef} className={cn(navDrawerFooterClassNames.list, 'm-0 list-none p-0')}>\n        {children}\n      </ul>\n    </div>\n  );\n};\nNavDrawerFooter.displayName = 'NavDrawerFooter';\n\n// ---------------------------------------------------------------------------\n// Compound\n// ---------------------------------------------------------------------------\n\n/**\n * A navigation pane in a drawer: Nav's items, categories and selection in a `<nav>` landmark that\n * sits over the page (`type=\"overlay\"`) or in the page layout (`type=\"inline\"`). Fluent's\n * `NavDrawer`.\n *\n * - **Composition:** `NavDrawer.Header` (a row: a `Hamburger`, the app's name), `NavDrawer.Body`\n *   (the scrolling list) and `NavDrawer.Footer` (a list pinned below it), rendered in the order\n *   written. Nav parts (`Nav.Item`, `Nav.Category`, `Nav.SectionHeader`, `Nav.Divider`,\n *   `Nav.AppItem`, …) go in the Body and the Footer, which render the lists; wrap anything else\n *   there in an `<li>`.\n * - **Types:** `overlay` (default) is a panel over the page, in a portal, opened in the browser\n *   only; `inline` is a panel in the page layout, also in the server HTML. Changing `type`\n *   remounts the panel; the selection and the open categories are kept.\n * - **Opening and closing:** keep it controlled (`open`, `onOpenChange`): an uncontrolled drawer\n *   that is closed cannot open again. A `Hamburger` inside it toggles it (reason `trigger`);\n *   Escape and a backdrop press close an overlay (`escape`, `outside-press`). Closing an overlay\n *   when an item is chosen is yours, in `onItemSelect`, which also fires when the current page is\n *   activated again. A non-modal overlay (`modalType=\"non-modal\"`) covers the page, which keeps\n *   its Tab order: keep the page's controls clear of it, or use `type=\"inline\"`.\n * - **Focus:** pass your page's Hamburger as `finalFocusRef`, so focus returns to it when a\n *   Hamburger inside the drawer closes it. An overlay moves focus in when it opens; an inline\n *   drawer does not.\n * - **Keyboard:** every item is a Tab stop; `NavDrawer.Body focusMode=\"arrow\"` makes the body one\n *   Tab stop with arrow keys, Home and End.\n * - **Landmark:** one `<nav>`, named \"Navigation\" by default (`aria-label`, `aria-labelledby`);\n *   an overlay is also a dialog with that name. Rename it when the page has another navigation\n *   landmark.\n * - **Selection:** Nav's `value`/`onValueChange` (only on a change), `openCategories` and\n *   `currentCategory`, and `onItemSelect` on every activation (Fluent's `selectedValue` and\n *   `onNavItemSelect`).\n * - **Server Components:** the parts are also exported as `NavDrawerHeader`, `NavDrawerBody` and\n *   `NavDrawerFooter`.\n *\n * @example\n * const [open, setOpen] = useState(false);\n * const hamburgerRef = useRef<HTMLButtonElement>(null);\n * <Hamburger\n *   ref={hamburgerRef}\n *   aria-expanded={open}\n *   aria-controls={open ? 'main-nav' : undefined}\n *   aria-haspopup=\"dialog\"\n *   onClick={() => setOpen(!open)}\n * />\n * <NavDrawer\n *   id=\"main-nav\"\n *   open={open}\n *   onOpenChange={setOpen}\n *   onItemSelect={() => setOpen(false)}\n *   finalFocusRef={hamburgerRef}\n *   defaultValue=\"home\"\n * >\n *   <NavDrawer.Header>\n *     <Hamburger />\n *     Contoso HR\n *   </NavDrawer.Header>\n *   <NavDrawer.Body>\n *     <Nav.Item value=\"home\" href=\"/\">Home</Nav.Item>\n *   </NavDrawer.Body>\n * </NavDrawer>\n */\nexport const NavDrawer = /* @__PURE__ */ Object.assign(NavDrawerRoot, {\n  Header: NavDrawerHeader,\n  Body: NavDrawerBody,\n  Footer: NavDrawerFooter,\n});\n"],"mappings":"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"}

package/dist/components/navigation/NavDrawer.context.cjs

@@ -0,0 +1,2 @@
+"use client";const e=require("../../_virtual/_rolldown/runtime.cjs");let t=require("react");t=e.__toESM(t,1);var n=t.createContext(null);n.displayName=`NavDrawerContext`;var r=t.createContext(null);r.displayName=`NavDrawerLayoutContext`,exports.NavDrawerContext=n,exports.NavDrawerLayoutContext=r;
+//# sourceMappingURL=NavDrawer.context.cjs.map

package/dist/components/navigation/NavDrawer.context.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavDrawer.context.cjs","names":["React","require_runtime","react","NavDrawerContext","NavDrawerLayoutContext"],"sources":["../../../src/components/navigation/NavDrawer.context.ts"],"sourcesContent":["import * as React from 'react';\nimport type { ModalRequestOpen } from '../overlays/Dialog.shared';\nimport type { DrawerType } from '../overlays/Drawer.context';\nimport type { DrawerScrollState } from '../overlays/Drawer.scroll';\n\n/*\n * The contexts of a NavDrawer: its open state for the Hamburgers inside it, and the scroll state of\n * its body for its parts. Internal; imports no runtime module but React (types only), so an import\n * of only `Hamburger` pulls in no drawer machinery.\n */\n\n/** What a NavDrawer gives a Hamburger inside it (its header, or anywhere in its tree). */\nexport interface NavDrawerContextValue {\n  /** The reported open state (an overlay's `false` until the page has hydrated). */\n  open: boolean;\n  /** Asks the NavDrawer to open or close, with the reason and event for `onOpenChange`. */\n  requestOpen: ModalRequestOpen;\n  /** The panel's id (the Hamburger's `aria-controls`). */\n  panelId: string;\n  /** How the drawer sits on the page. */\n  type: DrawerType;\n}\n\n/**\n * The NavDrawer around a Hamburger (`null` outside one: the Hamburger is then a plain button the\n * app wires, so there is no missing-context error).\n */\nexport const NavDrawerContext = React.createContext<NavDrawerContextValue | null>(null);\nNavDrawerContext.displayName = 'NavDrawerContext';\n\n/** What a NavDrawer gives its Header, Body and Footer. */\nexport interface NavDrawerLayoutContextValue {\n  /** The scroll state of the first mounted body (`'none'` on the server and without a body). */\n  scrollState: DrawerScrollState;\n  /**\n   * Registers a body element (from its callback ref); the first one mounted is measured. Returns\n   * the cleanup that forgets it.\n   */\n  registerBody: (element: HTMLElement) => () => void;\n}\n\n/**\n * The layout of the NavDrawer around a part (`null` outside one). Separate from the Nav state, so\n * a change of the scroll state re-renders the three parts and not the Nav items.\n */\nexport const NavDrawerLayoutContext = React.createContext<NavDrawerLayoutContextValue | null>(null);\nNavDrawerLayoutContext.displayName = 'NavDrawerLayoutContext';\n"],"mappings":"6GA2BA,IAAaG,EAAmBH,EAAM,cAA4C,IAAI,EACtF,EAAiB,YAAc,mBAiB/B,IAAaI,EAAyBJ,EAAM,cAAkD,IAAI,EAClG,EAAuB,YAAc"}

package/dist/components/navigation/NavDrawer.context.mjs

@@ -0,0 +1,11 @@
+"use client";
+import * as e from "react";
+//#region src/components/navigation/NavDrawer.context.ts
+var t = e.createContext(null);
+t.displayName = "NavDrawerContext";
+var n = e.createContext(null);
+n.displayName = "NavDrawerLayoutContext";
+//#endregion
+export { t as NavDrawerContext, n as NavDrawerLayoutContext };
+
+//# sourceMappingURL=NavDrawer.context.mjs.map

package/dist/components/navigation/NavDrawer.context.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavDrawer.context.mjs","names":["React","NavDrawerContext","NavDrawerLayoutContext"],"sources":["../../../src/components/navigation/NavDrawer.context.ts"],"sourcesContent":["import * as React from 'react';\nimport type { ModalRequestOpen } from '../overlays/Dialog.shared';\nimport type { DrawerType } from '../overlays/Drawer.context';\nimport type { DrawerScrollState } from '../overlays/Drawer.scroll';\n\n/*\n * The contexts of a NavDrawer: its open state for the Hamburgers inside it, and the scroll state of\n * its body for its parts. Internal; imports no runtime module but React (types only), so an import\n * of only `Hamburger` pulls in no drawer machinery.\n */\n\n/** What a NavDrawer gives a Hamburger inside it (its header, or anywhere in its tree). */\nexport interface NavDrawerContextValue {\n  /** The reported open state (an overlay's `false` until the page has hydrated). */\n  open: boolean;\n  /** Asks the NavDrawer to open or close, with the reason and event for `onOpenChange`. */\n  requestOpen: ModalRequestOpen;\n  /** The panel's id (the Hamburger's `aria-controls`). */\n  panelId: string;\n  /** How the drawer sits on the page. */\n  type: DrawerType;\n}\n\n/**\n * The NavDrawer around a Hamburger (`null` outside one: the Hamburger is then a plain button the\n * app wires, so there is no missing-context error).\n */\nexport const NavDrawerContext = React.createContext<NavDrawerContextValue | null>(null);\nNavDrawerContext.displayName = 'NavDrawerContext';\n\n/** What a NavDrawer gives its Header, Body and Footer. */\nexport interface NavDrawerLayoutContextValue {\n  /** The scroll state of the first mounted body (`'none'` on the server and without a body). */\n  scrollState: DrawerScrollState;\n  /**\n   * Registers a body element (from its callback ref); the first one mounted is measured. Returns\n   * the cleanup that forgets it.\n   */\n  registerBody: (element: HTMLElement) => () => void;\n}\n\n/**\n * The layout of the NavDrawer around a part (`null` outside one). Separate from the Nav state, so\n * a change of the scroll state re-renders the three parts and not the Nav items.\n */\nexport const NavDrawerLayoutContext = React.createContext<NavDrawerLayoutContextValue | null>(null);\nNavDrawerLayoutContext.displayName = 'NavDrawerLayoutContext';\n"],"mappings":";;;AA2BA,IAAaC,IAAmBD,EAAM,cAA4C,IAAI;AACtF,EAAiB,cAAc;AAiB/B,IAAaE,IAAyBF,EAAM,cAAkD,IAAI;AAClG,EAAuB,cAAc"}

package/dist/components/navigation/NavDrawer.mjs

@@ -0,0 +1,179 @@
+"use client";
+import { cn as e } from "../../lib/cn.mjs";
+import { hasWarned as t, isDev as n, reportMissingContext as r, warnOnce as i } from "../../lib/dev.mjs";
+import { composeEventHandlers as a } from "../../lib/composeEventHandlers.mjs";
+import { drawerClassNames as o, navDrawerBodyClassNames as s, navDrawerClassNames as c, navDrawerFooterClassNames as l, navDrawerHeaderClassNames as u } from "../../lib/classNames.mjs";
+import { useId as d } from "../../hooks/useId.mjs";
+import { useRovingTabIndex as f } from "../../hooks/useRovingTabIndex.mjs";
+import { useMergedRefs as p } from "../../hooks/useMergedRefs.mjs";
+import { TOOLBAR_ITEM_SELECTOR as m } from "../button/Toolbar.navigation.mjs";
+import { NavContext as h, NavRovingContext as g, useNavListChildCheck as _ } from "./Nav.context.mjs";
+import { useNavRootState as v } from "./Nav.root.mjs";
+import { inertModalTrigger as y, useModalOpenState as b, useModalTriggerSession as x } from "../overlays/Dialog.shared.mjs";
+import { DrawerPanel as S, useDrawerOpen as C } from "../overlays/Drawer.panel.mjs";
+import { scrollSeparatorClasses as w, useScrollState as T } from "../overlays/Drawer.scroll.mjs";
+import { NavDrawerContext as E, NavDrawerLayoutContext as D } from "./NavDrawer.context.mjs";
+import * as O from "react";
+import { jsx as k } from "react/jsx-runtime";
+//#region src/components/navigation/NavDrawer.tsx
+var A = "NavDrawer:unreachable", j = "NavDrawer is closed and nothing can open it: it is uncontrolled (no `open` prop), and a Hamburger inside it cannot be reached while it is closed. Control it with `open` and `onOpenChange`, and open it from a Hamburger (or any button) outside it.", M = "NavDrawer:loose-items", ee = "NavDrawer: a list item sits outside NavDrawer.Body and NavDrawer.Footer, the parts that render a list. Move Nav.Item, Nav.Category and the other Nav parts into NavDrawer.Body or NavDrawer.Footer.";
+function N(e) {
+	for (let t of Array.from(e.querySelectorAll("li"))) {
+		let e = t.parentElement?.localName;
+		if (e !== "ul" && e !== "ol") return !0;
+	}
+	return !1;
+}
+var P = {
+	scrollState: "none",
+	registerBody: () => () => {}
+};
+function F(e) {
+	return O.useContext(D) || (r(e, "NavDrawer"), P);
+}
+var I = ({ type: r = "overlay", open: a, defaultOpen: s, onOpenChange: l, onItemSelect: u, position: f = "start", size: p = "small", separator: m = !0, modalType: g = "modal", unmountOnClose: _ = !0, finalFocusRef: w, backdrop: P, value: F, defaultValue: I, onValueChange: L, openCategories: R, defaultOpenCategories: z, onOpenCategoriesChange: B, currentCategory: te, "aria-label": ne, "aria-labelledby": V, "aria-describedby": re, id: ie, children: H, ref: ae, ...oe }) => {
+	let [U, W] = b(a, s, l), G = C(r, U), K = v({
+		componentName: "NavDrawer",
+		value: F,
+		defaultValue: I ?? "",
+		onValueChange: L,
+		onActivate: u,
+		openCategories: R,
+		defaultOpenCategories: z,
+		onOpenCategoriesChange: B,
+		currentCategory: te,
+		children: H
+	}), se = g === "non-modal" ? "non-modal" : "modal", ce = d("wave-nav-drawer"), q = ie ?? ce, [le, J] = O.useState(null), Y = O.useCallback((e) => (J((t) => t ?? e), () => J((t) => t === e ? null : t)), []), X = T(le), ue = O.useMemo(() => ({
+		scrollState: X,
+		registerBody: Y
+	}), [X, Y]), de = O.useMemo(() => ({
+		open: G,
+		requestOpen: W,
+		panelId: q,
+		type: r
+	}), [
+		G,
+		W,
+		q,
+		r
+	]), Z = a === void 0 && !U;
+	O.useEffect(() => {
+		Z && i(A, j);
+	}, [Z]);
+	let Q = O.useRef(null);
+	O.useEffect(() => {
+		if (!n || t(M)) return;
+		let e = Q.current;
+		e && N(e) && i(M, ee);
+	});
+	let $ = {
+		"aria-label": ne ?? (V === void 0 ? "Navigation" : void 0),
+		"aria-labelledby": V,
+		"aria-describedby": re
+	}, fe = r === "overlay" ? $ : void 0, pe = /* @__PURE__ */ k(S, {
+		componentName: "NavDrawer",
+		type: r,
+		open: G,
+		requestOpen: W,
+		position: f,
+		size: p,
+		separator: m,
+		modalType: se,
+		unmountOnClose: _,
+		inlineAs: "div",
+		trigger: y,
+		finalFocusRef: w,
+		rootClassName: e(o.root, c.root),
+		backdropClassName: e(o.backdrop, c.backdrop),
+		backdrop: P,
+		id: q,
+		...fe,
+		...oe,
+		ref: ae,
+		children: /* @__PURE__ */ k("nav", {
+			ref: Q,
+			...$,
+			className: e(c.nav, "flex min-h-0 flex-1 flex-col"),
+			children: H
+		})
+	});
+	return x(y, G), /* @__PURE__ */ k(h.Provider, {
+		value: K,
+		children: /* @__PURE__ */ k(E.Provider, {
+			value: de,
+			children: /* @__PURE__ */ k(D.Provider, {
+				value: ue,
+				children: pe
+			})
+		})
+	});
+};
+I.displayName = "NavDrawer";
+var L = ({ className: t, children: n, ref: r, ...i }) => {
+	let { scrollState: a } = F("NavDrawer.Header");
+	return /* @__PURE__ */ k("div", {
+		"data-scroll-state": a,
+		...i,
+		ref: r,
+		className: e(u.root, "flex shrink-0 items-center gap-2 ps-2.5 pe-2 py-2", w.header, t),
+		children: n
+	});
+};
+L.displayName = "NavDrawerHeader";
+var R = ({ focusMode: t = "tab", className: n, onKeyDown: r, onFocus: i, children: o, ref: c, ...l }) => {
+	let { scrollState: u, registerBody: d } = F("NavDrawer.Body"), v = O.useContext(h), y = t === "arrow", [b, x] = O.useState(null), S = O.useCallback((e, t) => {
+		x((n) => t ? e : n === e ? null : n);
+	}, []), C = O.useMemo(() => ({ reportCurrentCategory: S }), [S]), w = v?.value ?? "", T = b === null ? w || null : `wave-nav-category:${b}`, { containerProps: E } = f({
+		itemSelector: m,
+		manageTabIndex: !0,
+		tabStop: "last-focused",
+		orientation: "both",
+		loop: !0,
+		homeEndKeys: !0,
+		typeahead: !1,
+		activeValue: T
+	}), D = O.useCallback((e) => e ? d(e) : void 0, [d]), A = p(c, D, y ? E.ref : null), j = O.useRef(null);
+	return _(j, "NavDrawer.Body", "items"), /* @__PURE__ */ k("div", {
+		"data-focus-mode": t,
+		"data-scroll-state": u,
+		...l,
+		ref: A,
+		"data-roving-container": y ? "" : void 0,
+		onKeyDown: a(r, y ? E.onKeyDown : void 0),
+		onFocus: a(i, y ? E.onFocus : void 0, { checkDefaultPrevented: !1 }),
+		className: e(s.root, "min-h-0 flex-1 overflow-y-auto py-2", n),
+		children: /* @__PURE__ */ k(g.Provider, {
+			value: y ? C : null,
+			children: /* @__PURE__ */ k("ul", {
+				ref: j,
+				className: e(s.list, "m-0 list-none p-0"),
+				children: o
+			})
+		})
+	});
+};
+R.displayName = "NavDrawerBody";
+var z = ({ className: t, children: n, ref: r, ...i }) => {
+	let { scrollState: a } = F("NavDrawer.Footer"), o = O.useRef(null);
+	return _(o, "NavDrawer.Footer", "items"), /* @__PURE__ */ k("div", {
+		"data-scroll-state": a,
+		...i,
+		ref: r,
+		className: e(l.root, "shrink-0 py-2", w.footer, t),
+		children: /* @__PURE__ */ k("ul", {
+			ref: o,
+			className: e(l.list, "m-0 list-none p-0"),
+			children: n
+		})
+	});
+};
+z.displayName = "NavDrawerFooter";
+var B = /* @__PURE__ */ Object.assign(I, {
+	Header: L,
+	Body: R,
+	Footer: z
+});
+//#endregion
+export { B as NavDrawer, R as NavDrawerBody, z as NavDrawerFooter, L as NavDrawerHeader };
+
+//# sourceMappingURL=NavDrawer.mjs.map

package/dist/components/navigation/NavDrawer.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavDrawer.mjs","names":["useId","useId$1","React","UNREACHABLE_WARNING_KEY","UNREACHABLE_WARNING","LOOSE_ITEMS_WARNING_KEY","LOOSE_ITEMS_WARNING","hasLooseListItem","item","nav","parent","INERT_LAYOUT","useNavDrawerLayout","NavDrawerLayoutContext","reportMissingContext","componentName","NavDrawerRoot","openProp","modalTypeProp","ariaLabel","ariaLabelledBy","ariaDescribedBy","rest","openState","requestOpen","useModalOpenState","defaultOpen","onOpenChange","open","useDrawerOpen","type","navState","useNavRootState","defaultValue","onItemSelect","modalType","generatedId","panelId","id","body","setBody","registerBody","previous","element","scrollState","useScrollState","layout","drawer","unreachable","warnOnce","navRef","isDev","hasWarned","nameProps","panelNameProps","panel","DrawerPanel","inertModalTrigger","cn","drawerClassNames","navDrawerClassNames","useModalTriggerSession","NavContext","NavDrawerContext","NavDrawerHeader","navDrawerHeaderClassNames","scrollSeparatorClasses","className","NavDrawerBody","arrow","focusMode","currentCategory","setCurrentCategory","reportCurrentCategory","holdsCurrent","category","roving","selected","activeValue","useRovingTabIndex","TOOLBAR_ITEM_SELECTOR","attachBody","mergedRef","useMergedRefs","ref","containerProps","listRef","useNavListChildCheck","composeEventHandlers","onKeyDown","onFocus","navDrawerBodyClassNames","NavRovingContext","NavDrawerFooter","navDrawerFooterClassNames","NavDrawer"],"sources":["../../../src/components/navigation/NavDrawer.tsx"],"sourcesContent":["import * as React from 'react';\nimport { cn } from '../../lib/cn';\nimport {\n  drawerClassNames,\n  navDrawerBodyClassNames,\n  navDrawerClassNames,\n  navDrawerFooterClassNames,\n  navDrawerHeaderClassNames,\n} from '../../lib/classNames';\nimport { composeEventHandlers } from '../../lib/composeEventHandlers';\nimport { hasWarned, isDev, reportMissingContext, warnOnce } from '../../lib/dev';\nimport type { Slot, SlotObject } from '../../lib/slot';\nimport type { BackdropAppearance, FocusMode, ModalType } from '../../lib/types';\nimport { useId } from '../../hooks/useId';\nimport { useMergedRefs } from '../../hooks/useMergedRefs';\nimport { useRovingTabIndex } from '../../hooks/useRovingTabIndex';\nimport { TOOLBAR_ITEM_SELECTOR } from '../button/Toolbar.navigation';\nimport {\n  inertModalTrigger,\n  useModalOpenState,\n  useModalTriggerSession,\n} from '../overlays/Dialog.shared';\nimport type {\n  DrawerOpenChangeDetails,\n  DrawerPosition,\n  DrawerSize,\n  DrawerType,\n} from '../overlays/Drawer.context';\nimport { DrawerPanel, useDrawerOpen } from '../overlays/Drawer.panel';\nimport { scrollSeparatorClasses, useScrollState } from '../overlays/Drawer.scroll';\nimport {\n  NavContext,\n  NavRovingContext,\n  useNavListChildCheck,\n  type NavRovingContextValue,\n} from './Nav.context';\nimport { useNavRootState, type NavProps } from './Nav.root';\nimport {\n  NavDrawerContext,\n  NavDrawerLayoutContext,\n  type NavDrawerContextValue,\n  type NavDrawerLayoutContextValue,\n} from './NavDrawer.context';\n\n/*\n * NavDrawer: Nav's state (`useNavRootState`) and a navigation landmark in the drawer panel shell\n * (`DrawerPanel`), with its Header, Body and Footer parts. Imports the Nav root and context modules\n * (never `Nav.tsx`) and the shell's modules (never Drawer's root or compound); Nav never imports\n * it, and `Hamburger.tsx` reads only `NavDrawer.context.ts`.\n */\n\n// ---------------------------------------------------------------------------\n// Types\n// ---------------------------------------------------------------------------\n\n/** Properties for the NavDrawer component. */\nexport interface NavDrawerProps\n  extends\n    Omit<React.HTMLAttributes<HTMLDivElement>, 'defaultValue'>,\n    Pick<\n      NavProps,\n      | 'value'\n      | 'defaultValue'\n      | 'onValueChange'\n      | 'openCategories'\n      | 'defaultOpenCategories'\n      | 'onOpenCategoriesChange'\n      | 'currentCategory'\n    > {\n  /**\n   * How the drawer sits on the page (Fluent's `type`).\n   * - `overlay`: a panel over the page, rendered in a portal while open (in the browser only: an\n   *   open overlay is closed in the server HTML and opens once hydrated). Modal by default: focus\n   *   moves in and stays there, the rest of the page is `inert` and does not scroll, and Escape\n   *   and a backdrop press close it. It is a dialog with the navigation's name.\n   * - `inline`: a panel in the page layout, rendered where the NavDrawer is (also in the server\n   *   HTML). The page stays usable around it; Escape and presses outside do nothing; opening it\n   *   moves no focus, and closing it while focus is inside returns focus to `finalFocusRef`, else\n   *   to the element that opened it.\n   *\n   * Changing `type` remounts the panel; the selection and the open categories are kept. Rendered\n   * as `data-type`.\n   * @default 'overlay'\n   */\n  type?: DrawerType;\n  /** Controlled open state. */\n  open?: boolean;\n  /**\n   * Open state for uncontrolled usage. Keep the drawer controlled instead: a closed uncontrolled\n   * NavDrawer cannot be opened again (a Hamburger inside it is not shown while it is closed).\n   * @default false\n   */\n  defaultOpen?: boolean;\n  /**\n   * Called with the new open state when it changes, with `details.reason`: `trigger` (a Hamburger\n   * inside the drawer), `escape` and `outside-press` (the backdrop; overlay only). `details` is\n   * typed optional until 1.0. A controlled drawer stays as it is until you update `open`.\n   */\n  onOpenChange?: (open: boolean, details?: DrawerOpenChangeDetails) => void;\n  /**\n   * Called with an item's value every time an item is activated, also when the current page is\n   * activated again (a disabled item, a link opened in another tab or window, and a button item\n   * whose `onClick` calls `preventDefault()` are not activations). Close an overlay drawer here:\n   * `onValueChange` fires only when the value changes. Fluent's `onNavItemSelect`.\n   */\n  onItemSelect?: (value: string) => void;\n  /**\n   * The edge the panel is attached to: an overlay's screen edge; an inline panel's inner edge is\n   * the opposite one. `start`/`end` follow the text direction; `left`/`right` are physical sides;\n   * `bottom` runs along the bottom edge. Unlike Drawer's (`'end'`), the default is the start edge,\n   * where navigation sits (Fluent's). Rendered as `data-position`.\n   * @default 'start'\n   */\n  position?: DrawerPosition;\n  /**\n   * The panel's width at a side (its height at the bottom), on Drawer's scale: `small` 320px,\n   * `medium` 592px, `large` 940px, `full` the viewport (inline: the container). A width class in\n   * `className` replaces it (Fluent's navigation pane is 260px wide: the width class of 65\n   * spacing steps). Rendered as `data-size`. Drawer's default too.\n   * @default 'small'\n   */\n  size?: DrawerSize;\n  /**\n   * Inline drawers: draws a line on the panel's inner edge (`data-separator`), as Nav does\n   * (Drawer's `separator` defaults to `false`). An overlay always draws that edge; forced colours\n   * always draw it.\n   * @default true\n   */\n  separator?: boolean;\n  /**\n   * Overlay drawers: `modal` (backdrop, focus trapped, page inert and not scrolling) or\n   * `non-modal` (no backdrop, no trap, nothing inert; Escape closes it while focus is inside, and\n   * its Tab place follows the element that opened it). A non-modal overlay covers the page under\n   * it while the page keeps its Tab order: keep the page's controls clear of it (reserve its width,\n   * or its height at the bottom, in your layout while it is open) or use `type=\"inline\"`; with\n   * `size=\"full\"` it hides the whole page and warns. Ignored by inline drawers. Rendered as\n   * `data-modal-type` on an overlay's panel. Fluent's `modalType` (without `alert`: a navigation\n   * pane is never an alert, so an `'alert'` is treated as `'modal'`). Drawer's default too.\n   * @default 'modal'\n   */\n  modalType?: Extract<ModalType, 'modal' | 'non-modal'>;\n  /**\n   * Removes the panel when the drawer closes. `false` keeps it mounted while closed, out of view\n   * and `inert`, so the state of what is inside survives, and a Hamburger outside can point\n   * `aria-controls` at it at all times: always for an inline drawer, and once the page has\n   * hydrated for an overlay (whose panel is not in the server HTML). Fluent's `unmountOnClose`.\n   * Drawer's default too.\n   * @default true\n   */\n  unmountOnClose?: boolean;\n  /**\n   * Where focus goes when the drawer closes with focus inside it (a modal overlay: whenever it\n   * closes). Pass your page's Hamburger, so a Hamburger inside the drawer that closes it hands\n   * focus to the one that opens it again.\n   */\n  finalFocusRef?: React.RefObject<HTMLElement | null>;\n  /**\n   * The backdrop of a modal overlay (Drawer's `backdrop` slot: `null` renders none, a slot\n   * object's `appearance` picks the fill). Ignored, with a development warning, by a non-modal or\n   * inline drawer.\n   */\n  backdrop?: Slot<'div'> | (SlotObject<'div'> & { appearance?: BackdropAppearance });\n  /**\n   * Name of the navigation landmark (and of an overlay's dialog). Localize it; rename it when the\n   * page has another navigation landmark (two with one name are ambiguous). An `aria-labelledby`\n   * replaces the default.\n   * @default 'Navigation'\n   */\n  'aria-label'?: string;\n  /** `NavDrawer.Header`, `NavDrawer.Body` and `NavDrawer.Footer`, rendered in the order written. */\n  children?: React.ReactNode;\n  /** Ref to the panel: the `role=\"dialog\"` element of an overlay drawer, the panel element of an inline one. */\n  ref?: React.Ref<HTMLDivElement>;\n}\n\n/** Properties for the NavDrawerHeader sub-component. */\nexport interface NavDrawerHeaderProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** A Hamburger, the app's name, …: any content (Nav items go in the body or the footer). */\n  children?: React.ReactNode;\n  /** Ref to the header element. */\n  ref?: React.Ref<HTMLDivElement>;\n}\n\n/** Properties for the NavDrawerBody sub-component. */\nexport interface NavDrawerBodyProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * How the keyboard reaches the items. `'tab'`: every item is a Tab stop and the arrow keys do\n   * nothing (Nav's model). `'arrow'`: the body is one Tab stop, the last focused element (at first\n   * the current page, or the closed category that holds it, else the first item); Down and Right\n   * move to the next element and Up and Left to the previous one (Left and Right swap in a\n   * right-to-left layout), wrapping, and Home and End go to the ends. Every focusable element in\n   * the body joins the order, item actions included. Screen readers do not announce arrow keys in\n   * a navigation landmark: prefer `'tab'` unless your users expect an app pane. Rendered as\n   * `data-focus-mode`. Fluent's NavDrawer uses arrow keys by default (its `tabbable` adds Tab\n   * stops).\n   * @default 'tab'\n   */\n  focusMode?: FocusMode;\n  /** Nav parts: `Nav.Item`, `Nav.Category`, `Nav.SectionHeader`, … (each renders its own list item). */\n  children?: React.ReactNode;\n  /** Ref to the scrolling body element. */\n  ref?: React.Ref<HTMLDivElement>;\n}\n\n/** Properties for the NavDrawerFooter sub-component. */\nexport interface NavDrawerFooterProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Nav parts pinned below the body (Settings, Help); wrap other content in an `<li>`. */\n  children?: React.ReactNode;\n  /** Ref to the footer element. */\n  ref?: React.Ref<HTMLDivElement>;\n}\n\n// ---------------------------------------------------------------------------\n// Development checks\n// ---------------------------------------------------------------------------\n\nconst UNREACHABLE_WARNING_KEY = 'NavDrawer:unreachable';\nconst UNREACHABLE_WARNING =\n  'NavDrawer is closed and nothing can open it: it is uncontrolled (no `open` prop), and a Hamburger inside it cannot be reached while it is closed. Control it with `open` and `onOpenChange`, and open it from a Hamburger (or any button) outside it.';\n\nconst LOOSE_ITEMS_WARNING_KEY = 'NavDrawer:loose-items';\nconst LOOSE_ITEMS_WARNING =\n  'NavDrawer: a list item sits outside NavDrawer.Body and NavDrawer.Footer, the parts that render a list. Move Nav.Item, Nav.Category and the other Nav parts into NavDrawer.Body or NavDrawer.Footer.';\n\n/** Whether `nav` holds an `<li>` whose parent is not a `<ul>` or `<ol>`. */\nfunction hasLooseListItem(nav: HTMLElement): boolean {\n  for (const item of Array.from(nav.querySelectorAll('li'))) {\n    const parent = item.parentElement?.localName;\n    if (parent !== 'ul' && parent !== 'ol') return true;\n  }\n  return false;\n}\n\n// ---------------------------------------------------------------------------\n// Root\n// ---------------------------------------------------------------------------\n\n/** The scroll state and body registry the parts read outside a NavDrawer in production. */\nconst INERT_LAYOUT: NavDrawerLayoutContextValue = {\n  scrollState: 'none',\n  registerBody: () => () => {},\n};\n\n/** C-CONTEXT: the enclosing NavDrawer's layout for the part `componentName`. */\nfunction useNavDrawerLayout(componentName: string): NavDrawerLayoutContextValue {\n  const context = React.useContext(NavDrawerLayoutContext);\n  if (context) return context;\n  reportMissingContext(componentName, 'NavDrawer');\n  return INERT_LAYOUT;\n}\n\n// The root of `NavDrawer` (documented on the export below).\nconst NavDrawerRoot = ({\n  type = 'overlay',\n  open: openProp,\n  defaultOpen,\n  onOpenChange,\n  onItemSelect,\n  position = 'start',\n  size = 'small',\n  separator = true,\n  modalType: modalTypeProp = 'modal',\n  unmountOnClose = true,\n  finalFocusRef,\n  backdrop,\n  value,\n  defaultValue,\n  onValueChange,\n  openCategories,\n  defaultOpenCategories,\n  onOpenCategoriesChange,\n  currentCategory,\n  'aria-label': ariaLabel,\n  'aria-labelledby': ariaLabelledBy,\n  'aria-describedby': ariaDescribedBy,\n  id,\n  children,\n  ref,\n  ...rest\n}: NavDrawerProps) => {\n  const [openState, requestOpen] = useModalOpenState(openProp, defaultOpen, onOpenChange);\n  // An overlay reports itself closed until the page has hydrated (its portal renders only in the\n  // browser), so a Hamburger's aria-controls never names a panel that is not there.\n  const open = useDrawerOpen(type, openState);\n  const navState = useNavRootState({\n    componentName: 'NavDrawer',\n    value,\n    defaultValue: defaultValue ?? '',\n    onValueChange,\n    onActivate: onItemSelect,\n    openCategories,\n    defaultOpenCategories,\n    onOpenCategoriesChange,\n    currentCategory,\n    children,\n  });\n  // A navigation pane is never an alert: an 'alert' passed at run time is a modal one.\n  const modalType: ModalType = modalTypeProp === 'non-modal' ? 'non-modal' : 'modal';\n  const generatedId = useId('wave-nav-drawer');\n  const panelId = id ?? generatedId;\n\n  // The first mounted body, measured for the scroll-state separators of the parts.\n  const [body, setBody] = React.useState<HTMLElement | null>(null);\n  const registerBody = React.useCallback((element: HTMLElement) => {\n    setBody((previous) => previous ?? element);\n    return () => setBody((previous) => (previous === element ? null : previous));\n  }, []);\n  const scrollState = useScrollState(body);\n  const layout = React.useMemo<NavDrawerLayoutContextValue>(\n    () => ({ scrollState, registerBody }),\n    [scrollState, registerBody],\n  );\n  const drawer = React.useMemo<NavDrawerContextValue>(\n    () => ({ open, requestOpen, panelId, type }),\n    [open, requestOpen, panelId, type],\n  );\n\n  // An uncontrolled drawer that is closed has no way back: its Hamburgers are inside it.\n  const unreachable = openProp === undefined && !openState;\n  React.useEffect(() => {\n    if (unreachable) warnOnce(UNREACHABLE_WARNING_KEY, UNREACHABLE_WARNING);\n  }, [unreachable]);\n\n  // Development only: after every commit, a list item outside the Body's and Footer's lists.\n  const navRef = React.useRef<HTMLElement>(null);\n  React.useEffect(() => {\n    if (!isDev || hasWarned(LOOSE_ITEMS_WARNING_KEY)) return;\n    const nav = navRef.current;\n    if (nav && hasLooseListItem(nav)) warnOnce(LOOSE_ITEMS_WARNING_KEY, LOOSE_ITEMS_WARNING);\n  });\n\n  // The name goes to the <nav> in both types and, in an overlay, also to its dialog panel. An\n  // aria-labelledby without aria-label drops the default.\n  const nameProps = {\n    'aria-label': ariaLabel ?? (ariaLabelledBy === undefined ? 'Navigation' : undefined),\n    'aria-labelledby': ariaLabelledBy,\n    'aria-describedby': ariaDescribedBy,\n  };\n  const panelNameProps = type === 'overlay' ? nameProps : undefined;\n\n  const panel = (\n    <DrawerPanel\n      componentName=\"NavDrawer\"\n      type={type}\n      open={open}\n      requestOpen={requestOpen}\n      position={position}\n      size={size}\n      separator={separator}\n      modalType={modalType}\n      unmountOnClose={unmountOnClose}\n      inlineAs=\"div\"\n      trigger={inertModalTrigger}\n      finalFocusRef={finalFocusRef}\n      rootClassName={cn(drawerClassNames.root, navDrawerClassNames.root)}\n      backdropClassName={cn(drawerClassNames.backdrop, navDrawerClassNames.backdrop)}\n      backdrop={backdrop}\n      id={panelId}\n      {...panelNameProps}\n      {...rest}\n      ref={ref as React.Ref<HTMLElement> | undefined}\n    >\n      <nav\n        ref={navRef}\n        {...nameProps}\n        className={cn(navDrawerClassNames.nav, 'flex min-h-0 flex-1 flex-col')}\n      >\n        {children}\n      </nav>\n    </DrawerPanel>\n  );\n  // After the shell's effects (focus restore), as the shell's contract asks.\n  useModalTriggerSession(inertModalTrigger, open);\n\n  return (\n    <NavContext.Provider value={navState}>\n      <NavDrawerContext.Provider value={drawer}>\n        <NavDrawerLayoutContext.Provider value={layout}>{panel}</NavDrawerLayoutContext.Provider>\n      </NavDrawerContext.Provider>\n    </NavContext.Provider>\n  );\n};\nNavDrawerRoot.displayName = 'NavDrawer';\n\n// ---------------------------------------------------------------------------\n// Parts\n// ---------------------------------------------------------------------------\n\n/**\n * The header row of a NavDrawer: a Hamburger, the app's name, … (no list: Nav items go in the\n * body or the footer). Its line underneath shows while the body is scrolled away from its top.\n */\nexport const NavDrawerHeader = ({ className, children, ref, ...rest }: NavDrawerHeaderProps) => {\n  const { scrollState } = useNavDrawerLayout('NavDrawer.Header');\n  return (\n    <div\n      data-scroll-state={scrollState}\n      {...rest}\n      ref={ref}\n      className={cn(\n        navDrawerHeaderClassNames.root,\n        'flex shrink-0 items-center gap-2 ps-2.5 pe-2 py-2',\n        scrollSeparatorClasses.header,\n        className,\n      )}\n    >\n      {children}\n    </div>\n  );\n};\nNavDrawerHeader.displayName = 'NavDrawerHeader';\n\n/**\n * The scrolling list of a NavDrawer: the Nav parts (`Nav.Item`, `Nav.Category`, …) as the items of\n * its list. With `focusMode=\"arrow\"` it is one Tab stop and the arrow keys move through it.\n */\nexport const NavDrawerBody = ({\n  focusMode = 'tab',\n  className,\n  onKeyDown,\n  onFocus,\n  children,\n  ref,\n  ...rest\n}: NavDrawerBodyProps) => {\n  const { scrollState, registerBody } = useNavDrawerLayout('NavDrawer.Body');\n  const nav = React.useContext(NavContext);\n  const arrow = focusMode === 'arrow';\n\n  // The closed category that holds the current page, reported by the categories of an arrow body\n  // from their layout effects: it holds the first Tab stop while the current page is hidden.\n  const [currentCategory, setCurrentCategory] = React.useState<string | null>(null);\n  const reportCurrentCategory = React.useCallback((category: string, holdsCurrent: boolean) => {\n    setCurrentCategory((previous) =>\n      holdsCurrent ? category : previous === category ? null : previous,\n    );\n  }, []);\n  const roving = React.useMemo<NavRovingContextValue>(\n    () => ({ reportCurrentCategory }),\n    [reportCurrentCategory],\n  );\n  const selected = nav?.value ?? '';\n  const activeValue =\n    currentCategory !== null ? `wave-nav-category:${currentCategory}` : selected || null;\n  // Always called (C-HOOKS); the container attaches only in the arrow mode, and detaching it hands\n  // every element its own tabindex back.\n  const { containerProps } = useRovingTabIndex({\n    itemSelector: TOOLBAR_ITEM_SELECTOR,\n    manageTabIndex: true,\n    tabStop: 'last-focused',\n    orientation: 'both',\n    loop: true,\n    homeEndKeys: true,\n    typeahead: false,\n    activeValue,\n  });\n\n  const attachBody = React.useCallback(\n    (element: HTMLDivElement | null) => (element ? registerBody(element) : undefined),\n    [registerBody],\n  );\n  const mergedRef = useMergedRefs<HTMLDivElement>(\n    ref,\n    attachBody,\n    arrow ? containerProps.ref : null,\n  );\n  // Development only: every child of the list is an <li> (`NavDrawer.Body:list-child`).\n  const listRef = React.useRef<HTMLUListElement>(null);\n  useNavListChildCheck(listRef, 'NavDrawer.Body', 'items');\n\n  return (\n    <div\n      data-focus-mode={focusMode}\n      data-scroll-state={scrollState}\n      {...rest}\n      ref={mergedRef}\n      data-roving-container={arrow ? '' : undefined}\n      onKeyDown={composeEventHandlers(onKeyDown, arrow ? containerProps.onKeyDown : undefined)}\n      onFocus={composeEventHandlers(onFocus, arrow ? containerProps.onFocus : undefined, {\n        checkDefaultPrevented: false,\n      })}\n      className={cn(navDrawerBodyClassNames.root, 'min-h-0 flex-1 overflow-y-auto py-2', className)}\n    >\n      <NavRovingContext.Provider value={arrow ? roving : null}>\n        <ul ref={listRef} className={cn(navDrawerBodyClassNames.list, 'm-0 list-none p-0')}>\n          {children}\n        </ul>\n      </NavRovingContext.Provider>\n    </div>\n  );\n};\nNavDrawerBody.displayName = 'NavDrawerBody';\n\n/**\n * The list pinned below a NavDrawer's body (Settings, Help): Nav parts as the items of its list,\n * each a Tab stop. Its line above shows while more of the body is below.\n */\nexport const NavDrawerFooter = ({ className, children, ref, ...rest }: NavDrawerFooterProps) => {\n  const { scrollState } = useNavDrawerLayout('NavDrawer.Footer');\n  // Development only: every child of the list is an <li> (`NavDrawer.Footer:list-child`).\n  const listRef = React.useRef<HTMLUListElement>(null);\n  useNavListChildCheck(listRef, 'NavDrawer.Footer', 'items');\n  return (\n    <div\n      data-scroll-state={scrollState}\n      {...rest}\n      ref={ref}\n      className={cn(\n        navDrawerFooterClassNames.root,\n        'shrink-0 py-2',\n        scrollSeparatorClasses.footer,\n        className,\n      )}\n    >\n      <ul ref={listRef} className={cn(navDrawerFooterClassNames.list, 'm-0 list-none p-0')}>\n        {children}\n      </ul>\n    </div>\n  );\n};\nNavDrawerFooter.displayName = 'NavDrawerFooter';\n\n// ---------------------------------------------------------------------------\n// Compound\n// ---------------------------------------------------------------------------\n\n/**\n * A navigation pane in a drawer: Nav's items, categories and selection in a `<nav>` landmark that\n * sits over the page (`type=\"overlay\"`) or in the page layout (`type=\"inline\"`). Fluent's\n * `NavDrawer`.\n *\n * - **Composition:** `NavDrawer.Header` (a row: a `Hamburger`, the app's name), `NavDrawer.Body`\n *   (the scrolling list) and `NavDrawer.Footer` (a list pinned below it), rendered in the order\n *   written. Nav parts (`Nav.Item`, `Nav.Category`, `Nav.SectionHeader`, `Nav.Divider`,\n *   `Nav.AppItem`, …) go in the Body and the Footer, which render the lists; wrap anything else\n *   there in an `<li>`.\n * - **Types:** `overlay` (default) is a panel over the page, in a portal, opened in the browser\n *   only; `inline` is a panel in the page layout, also in the server HTML. Changing `type`\n *   remounts the panel; the selection and the open categories are kept.\n * - **Opening and closing:** keep it controlled (`open`, `onOpenChange`): an uncontrolled drawer\n *   that is closed cannot open again. A `Hamburger` inside it toggles it (reason `trigger`);\n *   Escape and a backdrop press close an overlay (`escape`, `outside-press`). Closing an overlay\n *   when an item is chosen is yours, in `onItemSelect`, which also fires when the current page is\n *   activated again. A non-modal overlay (`modalType=\"non-modal\"`) covers the page, which keeps\n *   its Tab order: keep the page's controls clear of it, or use `type=\"inline\"`.\n * - **Focus:** pass your page's Hamburger as `finalFocusRef`, so focus returns to it when a\n *   Hamburger inside the drawer closes it. An overlay moves focus in when it opens; an inline\n *   drawer does not.\n * - **Keyboard:** every item is a Tab stop; `NavDrawer.Body focusMode=\"arrow\"` makes the body one\n *   Tab stop with arrow keys, Home and End.\n * - **Landmark:** one `<nav>`, named \"Navigation\" by default (`aria-label`, `aria-labelledby`);\n *   an overlay is also a dialog with that name. Rename it when the page has another navigation\n *   landmark.\n * - **Selection:** Nav's `value`/`onValueChange` (only on a change), `openCategories` and\n *   `currentCategory`, and `onItemSelect` on every activation (Fluent's `selectedValue` and\n *   `onNavItemSelect`).\n * - **Server Components:** the parts are also exported as `NavDrawerHeader`, `NavDrawerBody` and\n *   `NavDrawerFooter`.\n *\n * @example\n * const [open, setOpen] = useState(false);\n * const hamburgerRef = useRef<HTMLButtonElement>(null);\n * <Hamburger\n *   ref={hamburgerRef}\n *   aria-expanded={open}\n *   aria-controls={open ? 'main-nav' : undefined}\n *   aria-haspopup=\"dialog\"\n *   onClick={() => setOpen(!open)}\n * />\n * <NavDrawer\n *   id=\"main-nav\"\n *   open={open}\n *   onOpenChange={setOpen}\n *   onItemSelect={() => setOpen(false)}\n *   finalFocusRef={hamburgerRef}\n *   defaultValue=\"home\"\n * >\n *   <NavDrawer.Header>\n *     <Hamburger />\n *     Contoso HR\n *   </NavDrawer.Header>\n *   <NavDrawer.Body>\n *     <Nav.Item value=\"home\" href=\"/\">Home</Nav.Item>\n *   </NavDrawer.Body>\n * </NavDrawer>\n */\nexport const NavDrawer = /* @__PURE__ */ Object.assign(NavDrawerRoot, {\n  Header: NavDrawerHeader,\n  Body: NavDrawerBody,\n  Footer: NavDrawerFooter,\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;AAwNA,IAAMG,IAA0B,yBAC1BC,IACJ,yPAEIC,IAA0B,yBAC1BC,KACJ;AAGF,SAASC,EAAiB,GAA2B;CACnD,KAAK,IAAMC,KAAQ,MAAM,KAAKC,EAAI,iBAAiB,IAAI,CAAC,GAAG;EACzD,IAAMC,IAASF,EAAK,eAAe;EACnC,IAAIE,MAAW,QAAQA,MAAW,MAAM,OAAO;CACjD;CACA,OAAO;AACT;AAOA,IAAMC,IAA4C;CAChD,aAAa;CACb,0BAA0B,CAAC;AAC7B;AAGA,SAASC,EAAmB,GAAoD;CAI9E,OAHgBV,EAAM,WAAWW,CAC7B,MACJC,EAAqBC,GAAe,WAAW,GACxCJ;AACT;AAGA,IAAMK,KAAiB,EACrB,UAAO,WACP,MAAMC,GACN,gBACA,iBACA,iBACA,cAAW,SACX,UAAO,SACP,eAAY,IACZ,WAAWC,IAAgB,SAC3B,oBAAiB,IACjB,kBACA,aACA,UACA,iBACA,kBACA,mBACA,0BACA,2BACA,qBACA,cAAcC,IACd,mBAAmBC,GACnB,oBAAoBC,IACpB,QACA,aACA,SACA,GAAGC,SACiB;CACpB,IAAM,CAACC,GAAWC,KAAeC,EAAkBR,GAAUS,GAAaC,CAAY,GAGhFC,IAAOC,EAAcC,GAAMP,CAAS,GACpCQ,IAAWC,EAAgB;EAC/B,eAAe;EACf;EACA,cAAcC,KAAgB;EAC9B;EACA,YAAYC;EACZ;EACA;EACA;EACA;EACA;CACF,CAAC,GAEKC,KAAuBjB,MAAkB,cAAc,cAAc,SACrEkB,KAAcpC,EAAM,iBAAiB,GACrCqC,IAAUC,MAAMF,IAGhB,CAACG,IAAMC,KAAWtC,EAAM,SAA6B,IAAI,GACzDuC,IAAevC,EAAM,aAAa,OACtCsC,GAAS,MAAaE,KAAYC,CAAO,SAC5BH,GAAS,MAAcE,MAAaC,IAAU,OAAOD,CAAS,IAC1E,CAAC,CAAC,GACCE,IAAcC,EAAeN,EAAI,GACjCO,KAAS5C,EAAM,eACZ;EAAE;EAAa;CAAa,IACnC,CAAC0C,GAAaH,CAAY,CAC5B,GACMM,KAAS7C,EAAM,eACZ;EAAE;EAAM;EAAa;EAAS;CAAK,IAC1C;EAAC0B;EAAMJ;EAAaa;EAASP;CAAI,CACnC,GAGMkB,IAAc/B,MAAa,KAAA,KAAa,CAACM;CAC/C,EAAM,gBAAgB;EACpB,AAAIyB,KAAaC,EAAS9C,GAAyBC,CAAmB;CACxE,GAAG,CAAC4C,CAAW,CAAC;CAGhB,IAAME,IAAShD,EAAM,OAAoB,IAAI;CAC7C,EAAM,gBAAgB;EACpB,IAAI,CAACiD,KAASC,EAAU/C,CAAuB,GAAG;EAClD,IAAMI,IAAMyC,EAAO;EACnB,AAAIzC,KAAOF,EAAiBE,CAAG,KAAGwC,EAAS5C,GAAyBC,EAAmB;CACzF,CAAC;CAID,IAAM+C,IAAY;EAChB,cAAclC,OAAcC,MAAmB,KAAA,IAAY,eAAe,KAAA;EAC1E,mBAAmBA;EACnB,oBAAoBC;CACtB,GACMiC,KAAiBxB,MAAS,YAAYuB,IAAY,KAAA,GAElDE,KACJ,kBAACC,GAAD;EACE,eAAc;EACR;EACA;EACO;EACH;EACJ;EACK;EACA;EACK;EAChB,UAAS;EACT,SAASC;EACM;EACf,eAAeC,EAAGC,EAAiB,MAAMC,EAAoB,IAAI;EACjE,mBAAmBF,EAAGC,EAAiB,UAAUC,EAAoB,QAAQ;EACnE;EACV,IAAIvB;EACJ,GAAIiB;EACJ,GAAIhC;EACC;EAEL,UAAA,kBAAC,OAAD;GACE,KAAK4B;GACL,GAAIG;GACJ,WAAWK,EAAGE,EAAoB,KAAK,8BAA8B;GAEpE;EACE,CAAA;CACM,CAAA;CAKf,OAFAC,EAAuBJ,GAAmB7B,CAAI,GAG5C,kBAACkC,EAAW,UAAZ;EAAqB,OAAO/B;EAC1B,UAAA,kBAACgC,EAAiB,UAAlB;GAA2B,OAAOhB;GAChC,UAAA,kBAAClC,EAAuB,UAAxB;IAAiC,OAAOiC;IAAS,UAAAS;GAAuC,CAAA;EAC/D,CAAA;CACR,CAAA;AAEzB;AACA,EAAc,cAAc;AAU5B,IAAaS,KAAmB,EAAE,cAAW,aAAU,QAAK,GAAG1C,QAAiC;CAC9F,IAAM,EAAE,mBAAgBV,EAAmB,kBAAkB;CAC7D,OACE,kBAAC,OAAD;EACE,qBAAmBgC;EACnB,GAAItB;EACC;EACL,WAAWoC,EACTO,EAA0B,MAC1B,qDACAC,EAAuB,QACvBC,CACF;EAEC;CACE,CAAA;AAET;AACA,EAAgB,cAAc;AAM9B,IAAaC,KAAiB,EAC5B,eAAY,OACZ,cACA,cACA,YACA,aACA,QACA,GAAG9C,QACqB;CACxB,IAAM,EAAE,gBAAa,oBAAiBV,EAAmB,gBAAgB,GACnEH,IAAMP,EAAM,WAAW4D,CAAU,GACjCO,IAAQC,MAAc,SAItB,CAACC,GAAiBC,KAAsBtE,EAAM,SAAwB,IAAI,GAC1EuE,IAAwBvE,EAAM,aAAa,GAAkB,MAA0B;EAC3F,GAAoB,MAClBwE,IAAeC,IAAWjC,MAAaiC,IAAW,OAAOjC,CAC3D;CACF,GAAG,CAAC,CAAC,GACCkC,IAAS1E,EAAM,eACZ,EAAE,yBAAsB,IAC/B,CAACuE,CAAqB,CACxB,GACMI,IAAWpE,GAAK,SAAS,IACzBqE,IACJP,MAAoB,OAAgDM,KAAY,OAArD,qBAAqBN,KAG5C,EAAE,sBAAmBQ,EAAkB;EAC3C,cAAcC;EACd,gBAAgB;EAChB,SAAS;EACT,aAAa;EACb,MAAM;EACN,aAAa;EACb,WAAW;EACX;CACF,CAAC,GAEKC,IAAa/E,EAAM,aACtB,MAAoCyC,IAAUF,EAAaE,CAAO,IAAI,KAAA,GACvE,CAACF,CAAY,CACf,GACMyC,IAAYC,EAChBC,GACAH,GACAZ,IAAQgB,EAAe,MAAM,IAC/B,GAEMC,IAAUpF,EAAM,OAAyB,IAAI;CAGnD,OAFAqF,EAAqBD,GAAS,kBAAkB,OAAO,GAGrD,kBAAC,OAAD;EACE,mBAAiBhB;EACjB,qBAAmB1B;EACnB,GAAItB;EACJ,KAAK4D;EACL,yBAAuBb,IAAQ,KAAK,KAAA;EACpC,WAAWmB,EAAqBC,GAAWpB,IAAQgB,EAAe,YAAY,KAAA,CAAS;EACvF,SAASG,EAAqBE,GAASrB,IAAQgB,EAAe,UAAU,KAAA,GAAW,EACjF,uBAAuB,GACzB,CAAC;EACD,WAAW3B,EAAGiC,EAAwB,MAAM,uCAAuCxB,CAAS;EAE5F,UAAA,kBAACyB,EAAiB,UAAlB;GAA2B,OAAOvB,IAAQO,IAAS;GACjD,UAAA,kBAAC,MAAD;IAAI,KAAKU;IAAS,WAAW5B,EAAGiC,EAAwB,MAAM,mBAAmB;IAC9E;GACC,CAAA;EACqB,CAAA;CACxB,CAAA;AAET;AACA,EAAc,cAAc;AAM5B,IAAaE,KAAmB,EAAE,cAAW,aAAU,QAAK,GAAGvE,QAAiC;CAC9F,IAAM,EAAE,mBAAgBV,EAAmB,kBAAkB,GAEvD0E,IAAUpF,EAAM,OAAyB,IAAI;CAEnD,OADAqF,EAAqBD,GAAS,oBAAoB,OAAO,GAEvD,kBAAC,OAAD;EACE,qBAAmB1C;EACnB,GAAItB;EACC;EACL,WAAWoC,EACToC,EAA0B,MAC1B,iBACA5B,EAAuB,QACvBC,CACF;EAEA,UAAA,kBAAC,MAAD;GAAI,KAAKmB;GAAS,WAAW5B,EAAGoC,EAA0B,MAAM,mBAAmB;GAChF;EACC,CAAA;CACD,CAAA;AAET;AACA,EAAgB,cAAc;AAkE9B,IAAaC,IAA4B,uBAAO,OAAO/E,GAAe;CACpE,QAAQgD;CACR,MAAMI;CACN,QAAQyB;AACV,CAAC"}

package/dist/components/overlays/Dialog.cjs

@@ -1,2 +1,2 @@
-"use client";const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/cn.cjs"),n=require("../../lib/dev.cjs"),r=require("../../lib/slot.cjs"),i=require("../../lib/classNames.cjs"),a=require("../../hooks/useId.cjs"),o=require("../../hooks/useMergedRefs.cjs"),s=require("../../hooks/useIsClient.cjs"),c=require("../portal/Portal.cjs"),l=require("../button/Button.cjs"),u=require("../../lib/icons.cjs"),d=require("../../hooks/useModalLayer.cjs"),f=require("./Dialog.shared.cjs");let p=require("react");p=e.__toESM(p,1);let m=require("react/jsx-runtime");var h=p.createContext(null);h.displayName=`DialogContext`;var g={open:!1,requestOpen:()=>{},modalType:`modal`,trigger:f.inertModalTrigger,finalFocusRef:void 0,contentId:void 0,registerContentId:()=>()=>{}};function _(e){return f.useRequiredContext(h,e,`Dialog`,()=>g)}var v=({open:e,defaultOpen:t,onOpenChange:n,modalType:r=`modal`,finalFocusRef:i,children:a})=>{let[o,c]=f.useModalOpenState(e,t,n),l=s.useIsClient(),u=o&&l,d=f.useModalTrigger();f.useModalTriggerSession(d,u);let[g,_]=p.useState(void 0),v=p.useCallback(e=>(_(e),()=>_(t=>t===e?void 0:t)),[]),y=p.useMemo(()=>({open:u,requestOpen:c,modalType:r,trigger:d,finalFocusRef:i,contentId:g,registerContentId:v}),[u,c,r,d,i,g,v]);return(0,m.jsx)(h.Provider,{value:y,children:a})};v.displayName=`Dialog`;var y=e=>{let{open:t,requestOpen:n,trigger:r,contentId:i}=_(`Dialog.Trigger`);return f.useModalTriggerPart({open:t,requestOpen:n,trigger:r,controlsId:i},e,`Dialog.Trigger`)};y.displayName=`DialogTrigger`;var b=e=>{let{requestOpen:t}=_(`Dialog.Close`);return f.useModalClosePart(t,e,`Dialog.Close`)};b.displayName=`DialogClose`;var x={small:`max-w-[400px]`,medium:`max-w-[600px]`},S=({title:e,size:n=`medium`,closeLabel:s=`Close`,children:h,className:g,id:v,ref:y,...b})=>{let{open:S,requestOpen:C,modalType:w,trigger:T,finalFocusRef:E,registerContentId:D}=_(`Dialog.Content`),O=a.useId(`wave-dialog`),k=v??O,A=a.useId(`wave-dialog-title`),j=f.useTitleRegistry(),[M,N]=p.useState(null),P=p.useRef(null),F=p.useCallback(e=>{P.current=e,N(e)},[]),I=p.useCallback(e=>e?D(k):void 0,[D,k]),L=o.useMergedRefs(y,F,I),R=w!==`alert`,z=f.useBackdropPress(P,R),B=f.useModalDismiss(C,`Dialog`,z.afterOutsidePress),V=d.useModalLayer({open:S,onDismiss:B,refs:[P],outsidePress:R,container:M,triggerRef:T.focusRef,finalFocusRef:E});f.useUnnamedModalWarning(S?M:null,j.hasTitle,`Dialog.Content`,`Dialog.Title`);let[H,U]=p.useState(null),W=p.useMemo(()=>({...j.context,setFooterHeight:U}),[j.context]);if(!S)return null;let G=r.slotRendersContent(e);return(0,m.jsx)(c.Portal,{layerId:V.layerId,children:(0,m.jsx)(`div`,{className:t.cn(i.dialogContentClassNames.backdrop,`fixed inset-0 flex items-center justify-center bg-backdrop`),onMouseDown:z.onMouseDown,children:(0,m.jsx)(`div`,{ref:L,role:w===`alert`?`alertdialog`:`dialog`,id:k,"aria-labelledby":G?A:j.titleId,tabIndex:-1,"data-modal-type":w,...b,className:t.cn(i.dialogContentClassNames.root,`relative m-4 flex min-w-0 max-h-[calc(100dvh-2rem)] w-full flex-col rounded-lg border border-border bg-background p-6 text-foreground shadow-64`,x[n],g),children:(0,m.jsxs)(f.ModalSurfaceContext.Provider,{value:W,children:[G&&(0,m.jsx)(`h2`,{id:A,className:t.cn(i.dialogTitleClassNames.root,`pe-8 text-subtitle-1 font-semibold`),children:e}),(0,m.jsx)(l.Button,{appearance:`subtle`,size:`small`,icon:(0,m.jsx)(u.DismissIcon,{}),"aria-label":s,onClick:e=>C(!1,{reason:`close-button`,event:e.nativeEvent}),className:t.cn(i.dialogContentClassNames.closeButton,`absolute end-4 top-4 text-muted-foreground`)}),(0,m.jsx)(`div`,{className:t.cn(i.dialogContentClassNames.body,`-mx-1 mt-1 min-h-0 flex-1 overflow-y-auto scroll-pb-(--wave-dialog-footer-height) p-1 text-body-1`),style:H===null?void 0:{"--wave-dialog-footer-height":`${H}px`},children:h})]})})})})};S.displayName=`DialogContent`;var C=({id:e,className:n,children:r,ref:a,...o})=>{let{id:s,ref:c}=f.useModalTitle(`Dialog.Title`,`Dialog.Content`,e,a);return(0,m.jsx)(`h2`,{...o,id:s,ref:c,className:t.cn(i.dialogTitleClassNames.root,`pe-8 text-subtitle-1 font-semibold text-foreground`,n),children:r})};C.displayName=`DialogTitle`;var w=`sticky -bottom-1 z-10 -mx-1 -mb-1 mt-6 flex justify-end gap-2 bg-background px-1 pb-2 pt-3`,T=`mt-6 flex justify-end gap-2`,E=({children:e,className:r,ref:a,...s})=>{let c=p.useContext(f.ModalSurfaceContext),l=c===null,u=c?.setFooterHeight,[d,h]=p.useState(null),g=o.useMergedRefs(a,h);return p.useEffect(()=>{l&&n.warnOnce(`Dialog.Footer:outside-content`,`Dialog.Footer must be rendered inside Dialog.Content. Outside it, the footer stays on the page while the dialog is closed.`)},[l]),p.useLayoutEffect(()=>{if(!d||!u||typeof ResizeObserver>`u`)return;let e=new ResizeObserver(e=>{let t=e[e.length-1];t&&u(t.borderBoxSize?.[0]?.blockSize??d.offsetHeight)});return e.observe(d,{box:`border-box`}),()=>{e.disconnect(),u(null)}},[d,u]),(0,m.jsx)(`div`,{ref:g,...s,className:t.cn(i.dialogFooterClassNames.root,u?w:T,r),children:e})};E.displayName=`DialogFooter`;var D=Object.assign(v,{Trigger:y,Content:S,Footer:E,Title:C,Close:b});exports.Dialog=D,exports.DialogClose=b,exports.DialogContent=S,exports.DialogFooter=E,exports.DialogTitle=C,exports.DialogTrigger=y;
+"use client";const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/cn.cjs"),n=require("../../lib/dev.cjs"),r=require("../../lib/slot.cjs"),i=require("../../lib/composeEventHandlers.cjs"),a=require("../../lib/classNames.cjs"),o=require("../../hooks/useId.cjs"),s=require("../../hooks/useMergedRefs.cjs"),c=require("../../hooks/useIsClient.cjs"),l=require("../../hooks/usePresence.cjs"),u=require("../portal/Portal.cjs"),d=require("./Popover.shared.cjs"),f=require("./Dialog.shared.cjs"),p=require("../../hooks/useModalLayer.cjs"),m=require("./Dialog.slots.cjs");let h=require("react");h=e.__toESM(h,1);let g=require("react/jsx-runtime"),_=require("react-dom");var v=h.createContext(null);v.displayName=`DialogContext`;var y={open:!1,requestOpen:()=>{},modalType:`modal`,trigger:f.inertModalTrigger,finalFocusRef:void 0,unmountOnClose:!0,contentId:void 0,registerContentId:()=>()=>{}};function b(e){return f.useRequiredContext(v,e,`Dialog`,()=>y)}var x=({open:e,defaultOpen:t,onOpenChange:n,modalType:r=`modal`,finalFocusRef:i,unmountOnClose:a=!0,children:o})=>{let[s,l]=f.useModalOpenState(e,t,n),u=c.useIsClient(),d=s&&u,p=f.useModalTrigger();f.useModalTriggerSession(p,d);let[m,_]=h.useState(void 0),y=h.useCallback(e=>(_(e),()=>_(t=>t===e?void 0:t)),[]),b=h.useMemo(()=>({open:d,requestOpen:l,modalType:r,trigger:p,finalFocusRef:i,unmountOnClose:a,contentId:m,registerContentId:y}),[d,l,r,p,i,a,m,y]);return(0,g.jsx)(v.Provider,{value:b,children:o})};x.displayName=`Dialog`;var S=e=>{let{open:t,requestOpen:n,trigger:r,contentId:i}=b(`Dialog.Trigger`);return f.useModalTriggerPart({open:t,requestOpen:n,trigger:r,controlsId:i},e,`Dialog.Trigger`)};S.displayName=`DialogTrigger`;var C=e=>{let{requestOpen:t}=b(`Dialog.Close`);return f.useModalClosePart(t,e,`Dialog.Close`)};C.displayName=`DialogClose`;var ee={small:`max-w-[400px]`,medium:`max-w-[600px]`,large:`max-w-[940px]`,full:`m-0 h-dvh max-h-none max-w-none rounded-none border-0 pt-[max(1.5rem,env(safe-area-inset-top))] pb-[max(1.5rem,env(safe-area-inset-bottom))] pl-[max(1.5rem,env(safe-area-inset-left))] pr-[max(1.5rem,env(safe-area-inset-right))]`},te=`top-[max(1rem,env(safe-area-inset-top))] end-[max(1rem,env(safe-area-inset-right))] wave-rtl:end-[max(1rem,env(safe-area-inset-left))]`,ne=8,re=`Dialog.Content:backdrop-ignored`,w='Dialog.Content: `backdrop` is ignored with `modalType="non-modal"`: a non-modal dialog has no backdrop, so the page behind it stays usable.',ie=`Dialog.Content:non-modal-full`,ae='Dialog.Content: `size="full"` with `modalType="non-modal"` covers the whole page while leaving it usable, so Tab reaches controls hidden behind the dialog. Use `modalType="modal"`, or a smaller size with the page\'s controls kept clear of it.';function oe(e){let[t,n]=h.useState(null);return h.useLayoutEffect(()=>{if(!e||typeof ResizeObserver>`u`)return;let t=new ResizeObserver(t=>{let r=t[t.length-1];r&&n(r.borderBoxSize?.[0]?.inlineSize??e.offsetWidth)});return t.observe(e,{box:`border-box`}),()=>{t.disconnect(),n(null)}},[e]),t}var T=({title:e,size:c=`medium`,backdrop:_,closeButton:v,titleAction:y,closeLabel:x=`Close`,children:S,className:C,style:T,id:E,onKeyDown:D,ref:O,...k})=>{let{open:A,requestOpen:j,modalType:M,trigger:N,finalFocusRef:se,unmountOnClose:P,registerContentId:F}=b(`Dialog.Content`),{isMounted:ce,ref:le,presenceProps:I}=l.usePresence(A,{unmountOnExit:P}),L=!P,ue=o.useId(`wave-dialog`),R=E??ue,z=o.useId(`wave-dialog-title`),B=f.useTitleRegistry(),[V,de]=h.useState(null),H=h.useRef(null),fe=h.useCallback(e=>{H.current=e,de(e)},[]),pe=h.useCallback(e=>e?F(R):void 0,[F,R]),me=s.useMergedRefs(O,fe,pe,le),U=h.useRef(null);f.useRaiseOnOpen(A,L,U);let W=f.useBackdropPress(H,M!==`alert`),he=f.useModalDismiss(j,`Dialog`,W.afterOutsidePress),G=p.useModalLayer({open:A,modalType:M,onDismiss:he,refs:[H],container:V,triggerRef:N.focusRef,finalFocusRef:se}),K=M===`non-modal`,ge=f.useModalOpener(A,N,V),_e=d.usePopoverTabOrder({enabled:A&&K,surface:V,anchorRef:ge,getPreviousStop:d.getTabbableThrough});f.useUnnamedModalWarning(A?V:null,B.hasTitle,`Dialog.Content`,`Dialog.Title`),f.useOpenInsideWarning(A,L,G.layerId,`Dialog`);let q=K&&_!=null&&typeof _!=`boolean`;h.useEffect(()=>{q&&n.warnOnce(re,w)},[q]);let J=A&&K&&c===`full`;h.useEffect(()=>{J&&n.warnOnce(ie,ae)},[J]);let[ve,ye]=h.useState(null),[Y,be]=h.useState(null),X=oe(A?ve:null),[Z,xe]=h.useState(null),Se=h.useMemo(()=>({...B.context,setFooterHeight:xe,titleActionsOutlet:Y}),[B.context,Y]);if(!ce)return null;let Q=r.slotRendersContent(e),$=X===null?void 0:X>0?`${X+ne}px`:`0px`,Ce=$===void 0?T:{"--wave-dialog-title-end-padding":$,...T};return(0,g.jsxs)(u.Portal,{ref:U,layerId:G.layerId,children:[!K&&(0,g.jsx)(m.ModalBackdrop,{backdrop:_,className:a.dialogContentClassNames.backdrop,layerId:G.layerId,open:A,onMouseDown:W.onMouseDown,presenceProps:I}),(0,g.jsx)(`div`,{...I,className:t.cn(a.dialogContentClassNames.positioner,`pointer-events-none fixed inset-0 flex items-center justify-center`),children:(0,g.jsx)(`div`,{ref:me,role:M===`alert`?`alertdialog`:`dialog`,id:R,"aria-labelledby":Q?z:B.titleId,tabIndex:-1,"data-modal-type":M,"data-size":c,...k,"data-presence":I[`data-presence`],style:Ce,onKeyDown:i.composeEventHandlers(D,_e),className:t.cn(a.dialogContentClassNames.root,`pointer-events-auto relative m-4 flex min-w-0 max-h-[calc(100dvh-2rem)] w-full flex-col rounded-lg border border-border bg-background p-6 text-foreground shadow-64`,ee[c],C),children:(0,g.jsxs)(f.ModalSurfaceContext.Provider,{value:Se,children:[Q&&(0,g.jsx)(`h2`,{id:z,className:t.cn(a.dialogTitleClassNames.root,`pe-[var(--wave-dialog-title-end-padding,2rem)] text-subtitle-1 font-semibold`),children:e}),(0,g.jsxs)(`div`,{ref:ye,className:t.cn(a.dialogContentClassNames.titleActions,`absolute end-4 top-4 flex items-start gap-1`,c===`full`&&te),children:[r.slotRendersContent(y)?r.renderSlot(y,`span`,t.cn(a.dialogContentClassNames.titleAction,`inline-flex items-center gap-1`)):null,(0,g.jsx)(`span`,{ref:be,className:`contents`}),(0,g.jsx)(m.ModalCloseButton,{componentName:`Dialog.Content`,closeButton:v,closeLabel:x,onClose:e=>j(!1,{reason:`close-button`,event:e}),className:t.cn(a.dialogContentClassNames.closeButton,`text-muted-foreground`)})]}),(0,g.jsx)(`div`,{className:t.cn(a.dialogContentClassNames.body,`-mx-1 mt-1 min-h-0 flex-1 overflow-y-auto scroll-pb-(--wave-dialog-footer-height) p-1 text-body-1`),style:Z===null?void 0:{"--wave-dialog-footer-height":`${Z}px`},children:S})]})})})]})};T.displayName=`DialogContent`;var E=({id:e,action:n,className:i,children:o,ref:s,...c})=>{let{id:l,ref:u}=f.useModalTitle(`Dialog.Title`,`Dialog.Content`,e,s),d=h.useContext(f.ModalSurfaceContext)?.titleActionsOutlet,p=(0,g.jsx)(`h2`,{...c,id:l,ref:u,className:t.cn(a.dialogTitleClassNames.root,`pe-[var(--wave-dialog-title-end-padding,2rem)] text-subtitle-1 font-semibold text-foreground`,i),children:o});if(!r.slotRendersContent(n))return p;let m=r.renderSlot(n,`span`,t.cn(a.dialogTitleClassNames.action,`inline-flex items-center gap-1`));return(0,g.jsxs)(g.Fragment,{children:[p,d===void 0?m:d&&(0,_.createPortal)(m,d)]})};E.displayName=`DialogTitle`;var D=`sticky -bottom-1 z-10 -mx-1 -mb-1 mt-6 flex justify-end gap-2 bg-background px-1 pb-2 pt-3`,O=`mt-6 flex justify-end gap-2`,k=({children:e,className:r,ref:i,...o})=>{let c=h.useContext(f.ModalSurfaceContext),l=c===null,u=c?.setFooterHeight,[d,p]=h.useState(null),m=s.useMergedRefs(i,p);return h.useEffect(()=>{l&&n.warnOnce(`Dialog.Footer:outside-content`,`Dialog.Footer must be rendered inside Dialog.Content. Outside it, the footer stays on the page while the dialog is closed.`)},[l]),h.useLayoutEffect(()=>{if(!d||!u||typeof ResizeObserver>`u`)return;let e=new ResizeObserver(e=>{let t=e[e.length-1];t&&u(t.borderBoxSize?.[0]?.blockSize??d.offsetHeight)});return e.observe(d,{box:`border-box`}),()=>{e.disconnect(),u(null)}},[d,u]),(0,g.jsx)(`div`,{ref:m,...o,className:t.cn(a.dialogFooterClassNames.root,u?D:O,r),children:e})};k.displayName=`DialogFooter`;var A=Object.assign(x,{Trigger:S,Content:T,Footer:k,Title:E,Close:C});exports.Dialog=A,exports.DialogClose=C,exports.DialogContent=T,exports.DialogFooter=k,exports.DialogTitle=E,exports.DialogTrigger=S;
 //# sourceMappingURL=Dialog.cjs.map