@lablup/ui-common 0.1.0-alpha.8 → 0.2.0-alpha.15

package/dist/components/Modal/Modal2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Modal2.js","names":[],"sources":["../../../src/components/Modal/Modal.tsx"],"sourcesContent":["/**\n * Modal\n *\n * ui-common's dialog. It replaces Astryx `Dialog`, which ui-common does not\n * re-export (exports.exclude.json), and takes every `Dialog` prop, so a\n * `Dialog` call site moves over by renaming the import.\n *\n * What it changes about `Dialog`:\n *\n * - **Portalled, not top layer.** The surface renders into a `document.body`\n *   portal instead of a native `<dialog>` promoted with `showModal()`. While\n *   it is open the page behind it is inert and the topmost surface is\n *   `aria-modal`, as `showModal()` would make them, but an element marked\n *   `MODAL_LIVE_ATTRIBUTE` (`NotificationStack` is) stays reachable, so\n *   notices stay visible and clickable over an open modal. Covered modal\n *   roots are inert too; see modalStack.ts. Inside a modal `<dialog>` (a\n *   scrimmed `Drawer`) it renders into that dialog and enters the top layer\n *   as a manual popover instead, since the rest of the page is inert there.\n * - **Nesting.** A modal opened from inside another paints above it, and\n *   only the topmost one traps focus and answers Escape.\n * - **Content lifecycle.** Children mount on first open and stay mounted\n *   while closed, as a native `<dialog>`'s do. `unmountOnClose` drops them,\n *   and their state, on close. `afterOpenChange` reports each open and close.\n * - **Structure, when asked for.** With `title`, `onAction` or `footer`, the\n *   modal lays out a header (`ModalHeader`), the body, and a footer with a\n *   primary action and a Cancel button. Without them it renders `children`\n *   as they are, exactly like `Dialog`.\n *\n * @example\n * <Modal\n *   isOpen={isOpen}\n *   onOpenChange={setIsOpen}\n *   title=\"Rename folder\"\n *   actionLabel=\"Rename\"\n *   onAction={async () => {\n *     await rename();\n *     setIsOpen(false);\n *   }}\n * >\n *   <TextInput label=\"Name\" value={name} onChange={setName} />\n * </Modal>\n */\nimport {\n  useContext,\n  useEffect,\n  useEffectEvent,\n  useId,\n  useInsertionEffect,\n  useLayoutEffect,\n  useRef,\n  useState,\n  type CSSProperties,\n  type HTMLAttributes,\n  type MouseEvent,\n  type ReactNode,\n  type Ref,\n} from \"react\";\nimport { createPortal } from \"react-dom\";\nimport {\n  Button,\n  type ButtonProps,\n  type ButtonVariant,\n} from \"@astryxdesign/core/Button\";\nimport { Dialog, DialogHeader, type DialogProps } from \"@astryxdesign/core/Dialog\";\nimport type { DialogPosition } from \"@astryxdesign/core/Dialog\";\nimport { useFocusTrap, useScrollLock } from \"@astryxdesign/core/hooks\";\nimport { useLayerDismissal } from \"@astryxdesign/core/Layer\";\nimport { Layout, LayoutContent, LayoutFooter } from \"@astryxdesign/core/Layout\";\nimport { dataAttr } from \"@astryxdesign/core/naming\";\nimport { HStack } from \"@astryxdesign/core/Stack\";\nimport { useThemeName } from \"@astryxdesign/core/theme\";\nimport { devWarn, isFocusDetached, mergeRefs } from \"@astryxdesign/core/utils\";\n\nimport { useUicTranslator } from \"../../i18n/useUicTranslator\";\nimport { SkeletonText } from \"../Skeleton/SkeletonText\";\nimport { MODAL_OPEN_ATTRIBUTE, ModalPortalContext, useModalLevel } from \"./modalStack\";\nimport \"./Modal.css\";\n\nconst HEADING_SELECTOR = '[role=\"heading\"], h1, h2, h3, h4, h5, h6';\nconst DIALOG_SELECTOR = 'dialog, [role=\"dialog\"], [role=\"alertdialog\"]';\n\n/** Props for the primary action button, beyond what `Modal` sets itself. */\nexport type ModalActionButtonProps = Partial<\n  Omit<ButtonProps, \"label\" | \"variant\" | \"clickAction\" | \"onClick\" | \"ref\">\n>;\n\nexport interface ModalProps extends Omit<DialogProps, \"ref\" | \"children\"> {\n  /** Ref to the element carrying `role=\"dialog\"`: a `div`, not a `<dialog>`. */\n  ref?: Ref<HTMLDivElement>;\n  /** The body. Without `title`, `onAction` or `footer`, the whole surface. */\n  children?: ReactNode;\n  /**\n   * Asks for a z-index inside the modal band. The stack still places a modal\n   * opened later above this one, and a value outside the band is ignored.\n   */\n  zIndex?: number;\n  /**\n   * Called with the new visibility right after `isOpen` changes, never on\n   * mount. There is no exit animation, so a close edge is the end of the\n   * close.\n   */\n  afterOpenChange?: (isOpen: boolean) => void;\n  /** Unmount the content, and drop its state, when the modal closes. */\n  unmountOnClose?: boolean;\n\n  /** Header title. Names the dialog. A node is rendered as given. */\n  title?: ReactNode;\n  /** Secondary line under the title. */\n  subtitle?: string;\n  /** Content before the title, e.g. a back button. */\n  headerStartContent?: ReactNode;\n  /** Content after the title, before the close button. */\n  headerEndContent?: ReactNode;\n  /** Whether the header shows a close button. Default: true */\n  hasCloseButton?: boolean;\n  /** Class name on the generated header, for a product's own header geometry. */\n  headerClassName?: string;\n\n  /**\n   * Replaces the generated footer. `null` removes the footer. Left\n   * `undefined`, a footer is generated when `onAction` is set.\n   */\n  footer?: ReactNode | null;\n  /** Primary action. Returning a promise shows the button pending until it settles. It does not close the modal. */\n  onAction?: () => unknown;\n  /** Primary action label. Default: the catalog's `uic.common.ok` (\"OK\") */\n  actionLabel?: string;\n  /** Primary action variant. Default: \"primary\" */\n  actionVariant?: ButtonVariant;\n  /** Shows the primary action as pending, for work the modal does not await. */\n  isActionLoading?: boolean;\n  /** Disables the primary action. */\n  isActionDisabled?: boolean;\n  /** More props for the primary action button (`type`, `form`, `icon`, ...). */\n  actionButtonProps?: ModalActionButtonProps;\n  /** Cancel label. Default: the catalog's `uic.common.cancel` (\"Cancel\") */\n  cancelLabel?: string;\n  /** Whether the generated footer has a Cancel button. Default: true */\n  hasCancelButton?: boolean;\n  /** Class name on the generated footer. */\n  footerClassName?: string;\n  /** Shows a text skeleton in place of the body. */\n  isLoading?: boolean;\n}\n\n/** Restores focus to the opener if focus was lost with the dialog. */\nfunction restoreTriggerFocus(trigger: HTMLElement | null, root: HTMLElement | null) {\n  const focusWasLost =\n    isFocusDetached() || root?.contains(document.activeElement) === true;\n  if (focusWasLost && trigger?.isConnected) trigger.focus();\n}\n\n/** The dialog's own title, never a heading of a dialog nested inside it. */\nfunction findDialogTitle(node: HTMLElement): HTMLElement | null {\n  for (const heading of node.querySelectorAll<HTMLElement>(HEADING_SELECTOR)) {\n    if (heading.closest(DIALOG_SELECTOR) === node) return heading;\n  }\n  return null;\n}\n\n/**\n * Trigger → viewport-centre direction, for the entry motion.\n * SYNC: mirrors `getDialogDirection` in `@astryxdesign/core/Dialog/Dialog`,\n * which is not exported; diff it on an Astryx bump.\n */\nfunction getDialogDirection(triggerEl: HTMLElement, distance = 16) {\n  const rect = triggerEl.getBoundingClientRect();\n  const dx = rect.left + rect.width / 2 - window.innerWidth / 2;\n  const dy = rect.top + rect.height / 2 - window.innerHeight / 2;\n  const dist = Math.sqrt(dx * dx + dy * dy) || 1;\n  return {\n    x: Math.round((dx / dist) * distance),\n    y: Math.round((dy / dist) * distance),\n  };\n}\n\nfunction toCssLength(value: number | string): string {\n  return typeof value === \"number\" ? `${value}px` : value;\n}\n\n/**\n * Logical `start`/`end` become `inset-inline-*`; unset offsets are `auto`.\n * SYNC: mirrors `resolveDialogPositionOffsets` in `@astryxdesign/core/Dialog`.\n */\nfunction resolvePosition(position: Readonly<DialogPosition>): CSSProperties {\n  const { top, bottom, start, end } = position;\n  return {\n    top: top !== undefined ? toCssLength(top) : \"auto\",\n    bottom: bottom !== undefined ? toCssLength(bottom) : \"auto\",\n    insetInlineStart: start !== undefined ? toCssLength(start) : \"auto\",\n    insetInlineEnd: end !== undefined ? toCssLength(end) : \"auto\",\n  };\n}\n\n/** One key per portal host, so a Modal remounts when its host changes. */\nconst hostKeys = new WeakMap<HTMLElement, string>();\nlet hostCount = 0;\nfunction hostKey(host: HTMLElement | null): string {\n  if (!host) return \"body\";\n  let key = hostKeys.get(host);\n  if (!key) {\n    hostCount += 1;\n    key = `dialog-${hostCount}`;\n    hostKeys.set(host, key);\n  }\n  return key;\n}\n\nexport function Modal(props: ModalProps) {\n  // Inside a modal <dialog> (a scrimmed Drawer) the page outside it is inert,\n  // so the surface renders into that dialog and enters the top layer. A new\n  // host remounts the surface: its level claim, inert background and popover\n  // all belong to one root element.\n  const dialogHost = useContext(ModalPortalContext);\n  return <ModalSurface key={hostKey(dialogHost)} {...props} dialogHost={dialogHost} />;\n}\n\nfunction ModalSurface({\n  dialogHost,\n  isOpen,\n  onOpenChange,\n  isInline = false,\n  width = 400,\n  maxHeight,\n  position,\n  variant = \"standard\",\n  purpose = \"info\",\n  padding,\n  zIndex,\n  afterOpenChange,\n  unmountOnClose = false,\n  title,\n  subtitle,\n  headerStartContent,\n  headerEndContent,\n  hasCloseButton = true,\n  headerClassName,\n  footer,\n  onAction,\n  actionLabel,\n  actionVariant = \"primary\",\n  isActionLoading,\n  isActionDisabled,\n  actionButtonProps,\n  cancelLabel,\n  hasCancelButton = true,\n  footerClassName,\n  isLoading = false,\n  role,\n  children,\n  xstyle,\n  className,\n  style,\n  ref,\n  ...rest\n}: ModalProps & { dialogHost: HTMLElement | null }) {\n  const t = useUicTranslator();\n\n  // Content mounts on the first open and then follows `unmountOnClose`.\n  const [hasOpened, setHasOpened] = useState(isOpen);\n  if (isOpen && !hasOpened) setHasOpened(true);\n  const isMounted = isOpen || (hasOpened && !unmountOnClose);\n\n  const wasOpenRef = useRef(isOpen);\n  const notifyOpenChange = useEffectEvent((open: boolean) => afterOpenChange?.(open));\n  useEffect(() => {\n    if (wasOpenRef.current === isOpen) return;\n    wasOpenRef.current = isOpen;\n    notifyOpenChange(isOpen);\n    // An effect event is not a dependency; this plugin version predates it.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [isOpen]);\n\n  // Theme CSS is scoped to `[data-astryx-theme]`, and the portal leaves the\n  // themed subtree, so the root re-emits the nearest theme's name.\n  const themeName = useThemeName();\n\n  const allowEscape = purpose !== \"required\";\n  const allowBackdropClick = purpose === \"info\";\n  const hasConsumerName = rest[\"aria-label\"] != null || rest[\"aria-labelledby\"] != null;\n  const titleId = useId();\n\n  const close = () => onOpenChange(false);\n\n  const rootRef = useRef<HTMLDivElement>(null);\n  // An insertion effect runs before any layout effect of this commit: before\n  // content mounting with the open autofocuses (a layout-phase focus), and\n  // before the level stack inerts the covering root, which blurs its focus.\n  const triggerRef = useRef<HTMLElement | null>(null);\n  useInsertionEffect(() => {\n    if (!isOpen || isInline) return;\n    const active = document.activeElement;\n    triggerRef.current =\n      active instanceof HTMLElement && !rootRef.current?.contains(active)\n        ? active\n        : null;\n  }, [isOpen, isInline]);\n\n  const isActive = isOpen && !isInline;\n  const isTopmost = useModalLevel(rootRef, isActive, zIndex);\n\n  // Inside a modal <dialog>, the top layer is the only way above it.\n  useLayoutEffect(() => {\n    const root = rootRef.current;\n    if (!isActive || !dialogHost || typeof root?.showPopover !== \"function\") return;\n    root.showPopover();\n    return () => {\n      if (root.matches(\":popover-open\")) root.hidePopover();\n    };\n  }, [isActive, dialogHost]);\n\n  const { containerRef, focusFirst } = useFocusTrap<HTMLDivElement>({\n    isActive: isActive && isTopmost,\n  });\n\n  // Escape goes through Astryx's shared layer stack, which routes one press\n  // to the top-most layer: a popover inside the modal closes alone.\n  useLayerDismissal({\n    isActive,\n    escapeBehavior: allowEscape ? \"close\" : \"block\",\n    onDismiss: close,\n    getContainer: () => containerRef.current,\n  });\n\n  // Passive, not layout: React restores the selection it captured before the\n  // commit at the end of the mutation phase, undoing an earlier focus move.\n  useEffect(() => {\n    if (!isActive) return;\n    const root = rootRef.current;\n    // triggerRef is not cleared: StrictMode replays this cleanup on mount, and\n    // the insertion effect that captured it does not run again.\n    return () => restoreTriggerFocus(triggerRef.current, root);\n  }, [isActive]);\n\n  useScrollLock(isActive);\n\n  // `Dialog isInline` provides the context `ModalHeader` renders its title id\n  // from, but nothing points the surface at it. This does.\n  useEffect(() => {\n    const node = containerRef.current;\n    if (!isActive || !node || hasConsumerName) return;\n    const heading = findDialogTitle(node);\n    if (!heading) {\n      node.removeAttribute(\"aria-labelledby\");\n      return;\n    }\n    if (!heading.id) heading.id = titleId;\n    node.setAttribute(\"aria-labelledby\", heading.id);\n  });\n\n  // Entry motion from the trigger's direction, set before first paint.\n  useLayoutEffect(() => {\n    const node = containerRef.current;\n    if (!isActive || !node) return;\n    const trigger = triggerRef.current;\n    const reduced =\n      typeof window.matchMedia === \"function\" &&\n      window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches;\n    if (!reduced && trigger instanceof HTMLElement && trigger !== document.body) {\n      const { x, y } = getDialogDirection(trigger);\n      node.style.setProperty(\"--modal-dir-x\", `${x}px`);\n      node.style.setProperty(\"--modal-dir-y\", `${y}px`);\n    }\n    return () => {\n      node.style.removeProperty(\"--modal-dir-x\");\n      node.style.removeProperty(\"--modal-dir-y\");\n    };\n  }, [isActive, containerRef]);\n\n  // `[data-autofocus]` wins, then the title, then the first focusable.\n  useEffect(() => {\n    const node = containerRef.current;\n    if (!isActive || !node) return;\n    const target =\n      node.querySelector<HTMLElement>(\"[data-autofocus]\") ?? findDialogTitle(node);\n    target?.focus();\n    if (document.activeElement !== target) focusFirst();\n  }, [isActive, containerRef, focusFirst]);\n\n  const hasWarnedRef = useRef(false);\n  useEffect(() => {\n    const node = containerRef.current;\n    if (!isActive || hasConsumerName || hasWarnedRef.current || !node) return;\n    if (findDialogTitle(node) != null) return;\n    hasWarnedRef.current = true;\n    devWarn(\n      \"Modal\",\n      \"open modal has no accessible name. Pass `title`, render a ModalHeader, \" +\n        \"or pass `aria-label`/`aria-labelledby`.\",\n    );\n  }, [isActive, hasConsumerName, containerRef]);\n\n  const maskRef = useRef<HTMLDivElement>(null);\n  const pointerDownOnMaskRef = useRef(false);\n  const handleMouseDown = (event: MouseEvent<HTMLDivElement>) => {\n    pointerDownOnMaskRef.current = event.target === maskRef.current;\n  };\n  const handleClick = (event: MouseEvent<HTMLDivElement>) => {\n    // A drag that started inside the surface must not dismiss it.\n    const isBackdropClick =\n      pointerDownOnMaskRef.current && event.target === maskRef.current;\n    pointerDownOnMaskRef.current = false;\n    if (isBackdropClick && allowBackdropClick) close();\n  };\n\n  // ------------------------------------------------------------------ body\n  const isStructured =\n    title !== undefined || onAction !== undefined || footer !== undefined;\n\n  const generatedFooter =\n    onAction !== undefined ? (\n      <HStack justify=\"end\" align=\"center\" gap={2}>\n        {hasCancelButton && (\n          <Button\n            variant=\"secondary\"\n            label={cancelLabel ?? t(\"uic.common.cancel\")}\n            onClick={close}\n          />\n        )}\n        <Button\n          {...actionButtonProps}\n          variant={actionVariant}\n          label={actionLabel ?? t(\"uic.common.ok\")}\n          isLoading={isActionLoading ?? actionButtonProps?.isLoading}\n          isDisabled={isActionDisabled ?? actionButtonProps?.isDisabled}\n          clickAction={async () => {\n            await onAction();\n          }}\n        />\n      </HStack>\n    ) : null;\n  const resolvedFooter = footer === undefined ? generatedFooter : footer;\n\n  const body = isLoading ? <SkeletonText lines={4} /> : children;\n\n  const content = isStructured ? (\n    <Layout\n      header={\n        title !== undefined || headerStartContent || headerEndContent ? (\n          <DialogHeader\n            hasDivider\n            // `title` is typed string but renders through `Heading`, whose\n            // children are a node; the cast keeps DialogHeader's a11y wiring.\n            title={(title ?? \"\") as unknown as string}\n            subtitle={subtitle}\n            startContent={headerStartContent}\n            endContent={headerEndContent}\n            onOpenChange={hasCloseButton ? (next) => !next && close() : undefined}\n            className={headerClassName}\n          />\n        ) : undefined\n      }\n      content={<LayoutContent>{body}</LayoutContent>}\n      footer={\n        resolvedFooter ? (\n          <LayoutFooter hasDivider className={footerClassName}>\n            {resolvedFooter}\n          </LayoutFooter>\n        ) : undefined\n      }\n    />\n  ) : (\n    body\n  );\n\n  if (isInline) {\n    return (\n      <Dialog\n        {...rest}\n        isInline\n        isOpen={isOpen}\n        onOpenChange={onOpenChange}\n        width={width}\n        maxHeight={maxHeight}\n        variant={variant}\n        purpose={purpose}\n        padding={padding}\n        xstyle={xstyle}\n        className={className}\n        style={style}\n      >\n        {content}\n      </Dialog>\n    );\n  }\n\n  if (!isMounted || typeof document === \"undefined\") return null;\n\n  const isFullscreen = variant === \"fullscreen\";\n  const hasPosition = position != null && !isFullscreen;\n\n  return createPortal(\n    <div\n      ref={rootRef}\n      popover={dialogHost ? \"manual\" : undefined}\n      className={[\"uic-modal\", !isOpen && \"uic-modal--closed\"]\n        .filter(Boolean)\n        .join(\" \")}\n      onMouseDown={handleMouseDown}\n      onClick={handleClick}\n      {...{\n        [MODAL_OPEN_ATTRIBUTE]: isOpen ? \"\" : undefined,\n        [dataAttr(\"theme\")]: themeName ?? undefined,\n      }}\n    >\n      <div ref={maskRef} className=\"uic-modal__mask\" />\n      <div\n        {...(rest as HTMLAttributes<HTMLDivElement>)}\n        ref={mergeRefs<HTMLDivElement>(ref, containerRef)}\n        className={[\"uic-modal__wrap\", hasPosition && \"uic-modal__wrap--positioned\"]\n          .filter(Boolean)\n          .join(\" \")}\n        // `width` sizes the wrap so a percentage resolves against the\n        // viewport, not the surface. `maxHeight` stays on the surface, which\n        // also feeds it to its scroll container.\n        style={{\n          ...(hasPosition ? resolvePosition(position) : null),\n          width: isFullscreen ? undefined : toCssLength(width),\n        }}\n        role={\n          isOpen\n            ? (role ?? (purpose === \"required\" ? \"alertdialog\" : \"dialog\"))\n            : undefined\n        }\n        // True: modalStack makes everything outside inert, except what is\n        // marked MODAL_LIVE_ATTRIBUTE (a notification stack).\n        aria-modal={isOpen && isTopmost ? true : undefined}\n      >\n        <Dialog\n          isInline\n          isOpen\n          onOpenChange={onOpenChange}\n          width=\"100%\"\n          maxHeight={maxHeight}\n          variant={variant}\n          padding={padding}\n          xstyle={xstyle}\n          className={className}\n          style={style}\n        >\n          {content}\n        </Dialog>\n      </div>\n    </div>,\n    dialogHost ?? document.body,\n  );\n}\n\nModal.displayName = \"Modal\";\n"],"mappings":"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"}

package/dist/components/Modal/index.d.ts

@@ -0,0 +1,15 @@
+/**
+ * `@lablup/ui-common/Modal`: ui-common's dialog, in place of Astryx `Dialog`.
+ *
+ * `ModalHeader`, `ModalPosition`, `ModalPurpose` and `ModalVariant` are
+ * Astryx's `DialogHeader`, `DialogPosition`, `DialogPurpose` and
+ * `DialogVariant` under Modal names. The Dialog names are re-exported too,
+ * unchanged, so moving a `@astryxdesign/core/Dialog` import here takes only
+ * `Dialog` → `Modal` and `DialogProps` → `ModalProps`.
+ */
+export { Modal } from './Modal';
+export type { ModalActionButtonProps, ModalProps } from './Modal';
+export { DialogHeader, DialogHeader as ModalHeader } from '@astryxdesign/core/Dialog';
+export type { DialogHeaderProps, DialogHeaderProps as ModalHeaderProps, DialogPosition, DialogPosition as ModalPosition, DialogPurpose, DialogPurpose as ModalPurpose, DialogVariant, DialogVariant as ModalVariant, } from '@astryxdesign/core/Dialog';
+export { MAX_MODAL_LEVEL, MODAL_LIVE_ATTRIBUTE, MODAL_OPEN_ATTRIBUTE, configureModalZIndex, refreshModalBackground, useModalLevel, } from './modalStack';
+export type { ModalZIndexBand } from './modalStack';

package/dist/components/Modal/index.js

@@ -0,0 +1,4 @@
+import { MAX_MODAL_LEVEL as e, MODAL_LIVE_ATTRIBUTE as t, MODAL_OPEN_ATTRIBUTE as n, configureModalZIndex as r, refreshModalBackground as i, useModalLevel as a } from "./modalStack.js";
+import { Modal as o } from "./Modal2.js";
+import { DialogHeader as s, DialogHeader as c } from "@astryxdesign/core/Dialog";
+export { s as DialogHeader, e as MAX_MODAL_LEVEL, t as MODAL_LIVE_ATTRIBUTE, n as MODAL_OPEN_ATTRIBUTE, o as Modal, c as ModalHeader, r as configureModalZIndex, i as refreshModalBackground, a as useModalLevel };

package/dist/components/Modal/modalStack.d.ts

@@ -0,0 +1,64 @@
+import { RefObject } from 'react';
+/**
+ * Marks an open modal root. Scope document queries to it through this
+ * constant rather than retyping the string.
+ */
+export declare const MODAL_OPEN_ATTRIBUTE = "data-uic-modal-open";
+/**
+ * The open modal `<dialog>` a surface inside it renders into, instead of
+ * `document.body`. `showModal()` makes everything outside the dialog inert,
+ * so a `Modal` portalled to the body from inside a scrimmed drawer would sit
+ * behind the drawer, unreachable. `Drawer` (src/forks/Drawer) provides its
+ * dialog while it is modal; `Modal` renders there and enters the top layer
+ * itself, as a manual popover, so it paints above the drawer and escapes the
+ * panel's clipping and transform. Internal: not exported from the package.
+ */
+export declare const ModalPortalContext: import('react').Context<HTMLElement | null>;
+/** Nesting depth ceiling. Two surfaces past it share a level. */
+export declare const MAX_MODAL_LEVEL = 80;
+/**
+ * The z-index band modal roots paint in. `base` is the first level, each
+ * nested level adds `step`, and nothing paints above `max`, so whatever the
+ * app layers above the band (a notification stack) stays above every modal.
+ */
+export interface ModalZIndexBand {
+    base: number;
+    step: number;
+    max: number;
+}
+/**
+ * Sets the z-index band for every modal opened after the call. Call it once,
+ * at startup, to fit the app's own layer ladder. The default is
+ * `{ base: 1100, step: 10, max: 10999 }`. Pass nothing to restore it.
+ */
+export declare function configureModalZIndex(next?: Partial<ModalZIndexBand>): void;
+/** A claim on the stack. Released by reference, never by level. */
+export interface ModalLevelEntry {
+    level: number;
+    zIndex: number;
+    isTopmost: boolean;
+    root: HTMLElement | null;
+    setIsTopmost: (isTopmost: boolean) => void;
+}
+/**
+ * Marks an element that stays reachable while a modal is open: it, and the
+ * ancestors it needs, are never made inert. `NotificationStack` sets it on
+ * its root, so a notice raised over a modal can still be read and dismissed.
+ * The mark is read when a modal opens or closes and on
+ * `refreshModalBackground()`; call that after mounting a marked element while
+ * a modal is open.
+ */
+export declare const MODAL_LIVE_ATTRIBUTE = "data-uic-modal-live";
+/**
+ * Re-reads which elements are marked `MODAL_LIVE_ATTRIBUTE` (and which modal
+ * roots are in the document) while a modal is open. A no-op otherwise.
+ */
+export declare function refreshModalBackground(): void;
+export declare function claimModalLevel(root: HTMLElement | null, setIsTopmost: (isTopmost: boolean) => void, requestedZIndex?: number): ModalLevelEntry;
+export declare function releaseModalLevel(entry: ModalLevelEntry): void;
+/**
+ * Claims a level for `rootRef` while `isOpen`, and writes the level and the
+ * resolved z-index onto the root as `--modal-level` and `--modal-z`.
+ * Returns whether this surface is the topmost one; gate a focus trap on it.
+ */
+export declare function useModalLevel(rootRef: RefObject<HTMLElement | null>, isOpen: boolean, zIndex?: number): boolean;

package/dist/components/Modal/modalStack.js

@@ -0,0 +1,81 @@
+import { registerInstance as e } from "../../instance.js";
+import { createContext as t, useEffectEvent as n, useLayoutEffect as r, useState as i } from "react";
+import { devWarn as a } from "@astryxdesign/core/utils";
+//#region src/components/Modal/modalStack.ts
+var o = "data-uic-modal-open", s = t(null), c = 80, l = {
+	base: 1100,
+	step: 10,
+	max: 10999
+}, u = l;
+function d(e) {
+	u = {
+		...l,
+		...e
+	};
+}
+var f = "--modal-level", p = "--modal-z", m = [];
+function h(e, t) {
+	let n = t;
+	n != null && (n < u.base || n > u.max) && (a("Modal", `zIndex ${n} is outside the modal band (${u.base}..${u.max}); ignoring it. Change the band with configureModalZIndex instead.`), n = void 0);
+	let r = e?.zIndex ?? u.base - u.step;
+	return Math.min(Math.max(r + u.step, n ?? 0), u.max);
+}
+var g = "data-uic-modal-live", _ = /* @__PURE__ */ new Set(), v = /* @__PURE__ */ new Set([
+	"SCRIPT",
+	"STYLE",
+	"LINK",
+	"TEMPLATE",
+	"NOSCRIPT"
+]);
+function y(e) {
+	let t = new Set(e), n = /* @__PURE__ */ new Set();
+	for (let t of e) for (let e = t.parentElement; e && e !== document.body;) n.add(e), e = e.parentElement;
+	let r = [], i = (e) => {
+		for (let a of Array.from(e.children)) t.has(a) || v.has(a.tagName) || (n.has(a) ? i(a) : r.push(a));
+	};
+	return i(document.body), r;
+}
+function b() {
+	if (typeof document > "u" || !document.body) return;
+	let e = m.map((e) => e.root).filter((e) => e != null && e.isConnected), t = new Set(m.length === 0 ? [] : y([...e, ...Array.from(document.querySelectorAll(`[${g}]`))]));
+	for (let e of _) t.has(e) || (e.removeAttribute("inert"), _.delete(e));
+	for (let e of t) _.has(e) || e.hasAttribute("inert") || (e.setAttribute("inert", ""), _.add(e));
+}
+function x() {
+	(m.length > 0 || _.size > 0) && b();
+}
+function S() {
+	b(), m.forEach((e, t) => {
+		let n = t === m.length - 1;
+		e.root?.toggleAttribute("inert", !n), e.isTopmost !== n && (e.isTopmost = n, e.setIsTopmost(n));
+	});
+}
+function C(t, n, r) {
+	e();
+	let i = m.at(-1), a = {
+		level: Math.min((i?.level ?? -1) + 1, 80),
+		zIndex: h(i, r),
+		isTopmost: !0,
+		root: t,
+		setIsTopmost: n
+	};
+	return m.push(a), S(), a;
+}
+function w(e) {
+	let t = m.indexOf(e);
+	t !== -1 && (e.root?.removeAttribute("inert"), m.splice(t, 1), S());
+}
+function T(e, t, a) {
+	let [o, s] = i(!0), c = n(() => a);
+	return r(() => {
+		if (!t) return;
+		let n = e.current, r = C(n, s, c());
+		return n?.style.setProperty(f, String(r.level)), n?.style.setProperty(p, String(r.zIndex)), () => {
+			w(r), n?.style.removeProperty(f), n?.style.removeProperty(p);
+		};
+	}, [t, e]), o;
+}
+//#endregion
+export { c as MAX_MODAL_LEVEL, g as MODAL_LIVE_ATTRIBUTE, o as MODAL_OPEN_ATTRIBUTE, s as ModalPortalContext, C as claimModalLevel, d as configureModalZIndex, x as refreshModalBackground, w as releaseModalLevel, T as useModalLevel };
+
+//# sourceMappingURL=modalStack.js.map

package/dist/components/Modal/modalStack.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"modalStack.js","names":[],"sources":["../../../src/components/Modal/modalStack.ts"],"sourcesContent":["/**\n * The one level stack every portalled modal surface shares.\n *\n * `Modal` renders into a `document.body` portal instead of the browser's top\n * layer (see Modal.tsx for why). Without the top layer, stacking and\n * inertness are this module's job: a surface opened from inside another\n * paints above it, only the topmost one is interactive, and while any is\n * open the page behind them is inert, except what is marked\n * `MODAL_LIVE_ATTRIBUTE`.\n *\n * Other portalled modal surfaces (a scrimmed drawer, say) claim a level with\n * `useModalLevel` so they stack on the same order as `Modal`.\n */\nimport {\n  createContext,\n  useEffectEvent,\n  useLayoutEffect,\n  useState,\n  type RefObject,\n} from \"react\";\nimport { devWarn } from \"@astryxdesign/core/utils\";\n\nimport { registerInstance } from \"../../instance\";\n\n/**\n * Marks an open modal root. Scope document queries to it through this\n * constant rather than retyping the string.\n */\nexport const MODAL_OPEN_ATTRIBUTE = \"data-uic-modal-open\";\n\n/**\n * The open modal `<dialog>` a surface inside it renders into, instead of\n * `document.body`. `showModal()` makes everything outside the dialog inert,\n * so a `Modal` portalled to the body from inside a scrimmed drawer would sit\n * behind the drawer, unreachable. `Drawer` (src/forks/Drawer) provides its\n * dialog while it is modal; `Modal` renders there and enters the top layer\n * itself, as a manual popover, so it paints above the drawer and escapes the\n * panel's clipping and transform. Internal: not exported from the package.\n */\nexport const ModalPortalContext = createContext<HTMLElement | null>(null);\n\n/** Nesting depth ceiling. Two surfaces past it share a level. */\nexport const MAX_MODAL_LEVEL = 80;\n\n/**\n * The z-index band modal roots paint in. `base` is the first level, each\n * nested level adds `step`, and nothing paints above `max`, so whatever the\n * app layers above the band (a notification stack) stays above every modal.\n */\nexport interface ModalZIndexBand {\n  base: number;\n  step: number;\n  max: number;\n}\n\nconst DEFAULT_BAND: ModalZIndexBand = { base: 1100, step: 10, max: 10999 };\nlet band: ModalZIndexBand = DEFAULT_BAND;\n\n/**\n * Sets the z-index band for every modal opened after the call. Call it once,\n * at startup, to fit the app's own layer ladder. The default is\n * `{ base: 1100, step: 10, max: 10999 }`. Pass nothing to restore it.\n */\nexport function configureModalZIndex(next?: Partial<ModalZIndexBand>): void {\n  band = { ...DEFAULT_BAND, ...next };\n}\n\nconst LEVEL_CSS_VAR = \"--modal-level\";\nconst Z_INDEX_CSS_VAR = \"--modal-z\";\n\n/** A claim on the stack. Released by reference, never by level. */\nexport interface ModalLevelEntry {\n  level: number;\n  zIndex: number;\n  isTopmost: boolean;\n  root: HTMLElement | null;\n  setIsTopmost: (isTopmost: boolean) => void;\n}\n\nconst openModals: ModalLevelEntry[] = [];\n\n/**\n * One step above the topmost surface (or the band's base), raised by an\n * accepted override. Stacking and inertness therefore run on one order: a\n * surface opened later paints above an earlier one, whatever that one asked.\n */\nfunction resolveZIndex(\n  topmost: ModalLevelEntry | undefined,\n  requested?: number,\n): number {\n  let override = requested;\n  if (override != null && (override < band.base || override > band.max)) {\n    devWarn(\n      \"Modal\",\n      `zIndex ${override} is outside the modal band (${band.base}..${band.max}); ` +\n        \"ignoring it. Change the band with configureModalZIndex instead.\",\n    );\n    override = undefined;\n  }\n  const floor = topmost?.zIndex ?? band.base - band.step;\n  return Math.min(Math.max(floor + band.step, override ?? 0), band.max);\n}\n\n/**\n * Marks an element that stays reachable while a modal is open: it, and the\n * ancestors it needs, are never made inert. `NotificationStack` sets it on\n * its root, so a notice raised over a modal can still be read and dismissed.\n * The mark is read when a modal opens or closes and on\n * `refreshModalBackground()`; call that after mounting a marked element while\n * a modal is open.\n */\nexport const MODAL_LIVE_ATTRIBUTE = \"data-uic-modal-live\";\n\n/** The background elements this module made inert, and only those. */\nconst inertedBackground = new Set<Element>();\n\nconst NEVER_INERT = new Set([\"SCRIPT\", \"STYLE\", \"LINK\", \"TEMPLATE\", \"NOSCRIPT\"]);\n\n/**\n * The elements to inert while `keep` stays reachable: every child of\n * `document.body` that holds none of them, and, inside a body child that\n * does, every sibling on the way down to them.\n */\nfunction backgroundOf(keep: Element[]): Element[] {\n  const kept = new Set(keep);\n  const onPath = new Set<Element>();\n  for (const el of keep) {\n    for (let node = el.parentElement; node && node !== document.body;) {\n      onPath.add(node);\n      node = node.parentElement;\n    }\n  }\n  const out: Element[] = [];\n  const visit = (parent: Element) => {\n    for (const child of Array.from(parent.children)) {\n      if (kept.has(child) || NEVER_INERT.has(child.tagName)) continue;\n      if (onPath.has(child)) visit(child);\n      else out.push(child);\n    }\n  };\n  visit(document.body);\n  return out;\n}\n\n/**\n * While any modal is open the rest of the page is `inert`, which is what\n * `aria-modal` promises. Modal roots (a drawer's too, when it claims a level\n * through `useModalLevel`) and elements marked `MODAL_LIVE_ATTRIBUTE` are\n * spared. An `inert` the page set itself is left alone, before and after.\n */\nfunction syncBackground(): void {\n  if (typeof document === \"undefined\" || !document.body) return;\n  const roots = openModals\n    .map((entry) => entry.root)\n    .filter((root): root is HTMLElement => root != null && root.isConnected);\n  const target = new Set(\n    openModals.length === 0\n      ? []\n      : backgroundOf([\n          ...roots,\n          ...Array.from(document.querySelectorAll(`[${MODAL_LIVE_ATTRIBUTE}]`)),\n        ]),\n  );\n  for (const el of inertedBackground) {\n    if (target.has(el)) continue;\n    el.removeAttribute(\"inert\");\n    inertedBackground.delete(el);\n  }\n  for (const el of target) {\n    if (inertedBackground.has(el) || el.hasAttribute(\"inert\")) continue;\n    el.setAttribute(\"inert\", \"\");\n    inertedBackground.add(el);\n  }\n}\n\n/**\n * Re-reads which elements are marked `MODAL_LIVE_ATTRIBUTE` (and which modal\n * roots are in the document) while a modal is open. A no-op otherwise.\n */\nexport function refreshModalBackground(): void {\n  if (openModals.length > 0 || inertedBackground.size > 0) syncBackground();\n}\n\n/**\n * Only the topmost surface stays interactive. A covered one drops its focus\n * trap and goes `inert`: the trap alone lets Tab escape to the parent, and\n * `inert` alone leaves the covered trap swallowing Tab with nothing to focus.\n */\nfunction syncCovered(): void {\n  syncBackground();\n  openModals.forEach((entry, index) => {\n    const isTopmost = index === openModals.length - 1;\n    entry.root?.toggleAttribute(\"inert\", !isTopmost);\n    if (entry.isTopmost !== isTopmost) {\n      entry.isTopmost = isTopmost;\n      entry.setIsTopmost(isTopmost);\n    }\n  });\n}\n\nexport function claimModalLevel(\n  root: HTMLElement | null,\n  setIsTopmost: (isTopmost: boolean) => void,\n  requestedZIndex?: number,\n): ModalLevelEntry {\n  registerInstance();\n  const topmost = openModals.at(-1);\n  const entry: ModalLevelEntry = {\n    level: Math.min((topmost?.level ?? -1) + 1, MAX_MODAL_LEVEL),\n    zIndex: resolveZIndex(topmost, requestedZIndex),\n    isTopmost: true,\n    root,\n    setIsTopmost,\n  };\n  openModals.push(entry);\n  syncCovered();\n  return entry;\n}\n\nexport function releaseModalLevel(entry: ModalLevelEntry): void {\n  const index = openModals.indexOf(entry);\n  if (index === -1) return;\n  entry.root?.removeAttribute(\"inert\");\n  openModals.splice(index, 1);\n  syncCovered();\n}\n\n/**\n * Claims a level for `rootRef` while `isOpen`, and writes the level and the\n * resolved z-index onto the root as `--modal-level` and `--modal-z`.\n * Returns whether this surface is the topmost one; gate a focus trap on it.\n */\nexport function useModalLevel(\n  rootRef: RefObject<HTMLElement | null>,\n  isOpen: boolean,\n  zIndex?: number,\n): boolean {\n  const [isTopmost, setIsTopmost] = useState(true);\n  // Read at claim time only: re-claiming would move an open surface to the\n  // top of the stack and inert whatever legitimately covered it.\n  const readZIndex = useEffectEvent(() => zIndex);\n\n  useLayoutEffect(() => {\n    if (!isOpen) return;\n    const root = rootRef.current;\n    const entry = claimModalLevel(root, setIsTopmost, readZIndex());\n    root?.style.setProperty(LEVEL_CSS_VAR, String(entry.level));\n    root?.style.setProperty(Z_INDEX_CSS_VAR, String(entry.zIndex));\n    return () => {\n      releaseModalLevel(entry);\n      root?.style.removeProperty(LEVEL_CSS_VAR);\n      root?.style.removeProperty(Z_INDEX_CSS_VAR);\n    };\n    // An effect event is not a dependency; this plugin version predates it.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [isOpen, rootRef]);\n\n  return isTopmost;\n}\n"],"mappings":"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"}

package/dist/components/NotificationItem/NotificationItem.d.ts

@@ -0,0 +1,14 @@
+import { ReactNode } from 'react';
+export interface NotificationItemProps {
+    title?: ReactNode;
+    description?: ReactNode;
+    /** Actions, at the end of their own row. */
+    action?: ReactNode;
+    /** A quiet note at the end, such as when the notice arrived. */
+    footer?: ReactNode;
+    className?: string;
+}
+export declare function NotificationItem({ title, description, action, footer, className, }: NotificationItemProps): import("react").JSX.Element;
+export declare namespace NotificationItem {
+    var displayName: string;
+}

package/dist/components/NotificationItem/NotificationItem2.js

@@ -0,0 +1,40 @@
+/* empty css                 */
+import { HStack as e, VStack as t } from "@astryxdesign/core/Stack";
+import { Text as n } from "@astryxdesign/core/Text";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/components/NotificationItem/NotificationItem.tsx
+var a = (e) => typeof e == "string" || typeof e == "number" || typeof e == "bigint" ? /* @__PURE__ */ r(n, { children: e }) : e;
+function o({ title: n, description: o, action: s, footer: c, className: l }) {
+	return /* @__PURE__ */ r("div", {
+		className: ["uic-notification-item", l].filter(Boolean).join(" "),
+		children: /* @__PURE__ */ i(t, {
+			gap: 1,
+			align: "stretch",
+			className: "uic-notification-item__stack",
+			children: [
+				n && /* @__PURE__ */ r("div", {
+					className: "uic-notification-item__title",
+					children: a(n)
+				}),
+				o && /* @__PURE__ */ r("div", { children: a(o) }),
+				s && /* @__PURE__ */ r(e, {
+					gap: 1,
+					align: "end",
+					justify: "end",
+					className: "uic-notification-item__action",
+					children: s
+				}),
+				c && /* @__PURE__ */ r("div", {
+					className: "uic-notification-item__footer",
+					children: a(c)
+				})
+			]
+		})
+	});
+}
+o.displayName = "NotificationItem";
+//#endregion
+export { o as NotificationItem };
+
+//# sourceMappingURL=NotificationItem2.js.map
+import "../../assets/components/NotificationItem/NotificationItem.css";

package/dist/components/NotificationItem/NotificationItem2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NotificationItem2.js","names":[],"sources":["../../../src/components/NotificationItem/NotificationItem.tsx"],"sourcesContent":["/**\n * NotificationItem\n *\n * The body of one notice: a title, a description, actions and a footer (a\n * timestamp, say), stacked, with the actions and the footer at the end. A\n * string or number in a slot renders as body `Text`; a node renders as is.\n * The title leaves room at the end for the notice's close button.\n *\n * @example\n * <NotificationItem\n *   title=\"Upload finished\"\n *   description=\"report.csv\"\n *   action={<Button label=\"Open\" />}\n *   footer=\"2 minutes ago\"\n * />\n */\nimport type { ReactNode } from \"react\";\nimport { HStack, VStack } from \"@astryxdesign/core/Stack\";\nimport { Text } from \"@astryxdesign/core/Text\";\n\nimport \"./NotificationItem.css\";\n\nexport interface NotificationItemProps {\n  title?: ReactNode;\n  description?: ReactNode;\n  /** Actions, at the end of their own row. */\n  action?: ReactNode;\n  /** A quiet note at the end, such as when the notice arrived. */\n  footer?: ReactNode;\n  className?: string;\n}\n\nconst asText = (content: ReactNode) =>\n  typeof content === \"string\" ||\n  typeof content === \"number\" ||\n  typeof content === \"bigint\" ? (\n    <Text>{content}</Text>\n  ) : (\n    content\n  );\n\nexport function NotificationItem({\n  title,\n  description,\n  action,\n  footer,\n  className,\n}: NotificationItemProps) {\n  return (\n    <div className={[\"uic-notification-item\", className].filter(Boolean).join(\" \")}>\n      <VStack gap={1} align=\"stretch\" className=\"uic-notification-item__stack\">\n        {title && <div className=\"uic-notification-item__title\">{asText(title)}</div>}\n        {description && <div>{asText(description)}</div>}\n        {action && (\n          <HStack\n            gap={1}\n            align=\"end\"\n            justify=\"end\"\n            className=\"uic-notification-item__action\"\n          >\n            {action}\n          </HStack>\n        )}\n        {footer && (\n          <div className=\"uic-notification-item__footer\">{asText(footer)}</div>\n        )}\n      </VStack>\n    </div>\n  );\n}\n\nNotificationItem.displayName = \"NotificationItem\";\n"],"mappings":";;;;;AAgCA,IAAM,KAAU,MACd,OAAO,KAAY,YACnB,OAAO,KAAY,YACnB,OAAO,KAAY,WACjB,kBAAC,GAAD,EAAA,UAAO,EAAc,CAAA,IAErB;AAGJ,SAAgB,EAAiB,EAC/B,UACA,gBACA,WACA,WACA,gBACwB;CACxB,OACE,kBAAC,OAAD;EAAK,WAAW,CAAC,yBAAyB,CAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;EAC3E,UAAA,kBAAC,GAAD;GAAQ,KAAK;GAAG,OAAM;GAAU,WAAU;GAA1C,UAAA;IACG,KAAS,kBAAC,OAAD;KAAK,WAAU;KAAgC,UAAA,EAAO,CAAK;IAAO,CAAA;IAC3E,KAAe,kBAAC,OAAD,EAAA,UAAM,EAAO,CAAW,EAAO,CAAA;IAC9C,KACC,kBAAC,GAAD;KACE,KAAK;KACL,OAAM;KACN,SAAQ;KACR,WAAU;KAET,UAAA;IACK,CAAA;IAET,KACC,kBAAC,OAAD;KAAK,WAAU;KAAiC,UAAA,EAAO,CAAM;IAAO,CAAA;GAEhE;;CACL,CAAA;AAET;AAEA,EAAiB,cAAc"}

package/dist/components/NotificationItem/index.d.ts

@@ -0,0 +1,2 @@
+export { NotificationItem } from './NotificationItem';
+export type { NotificationItemProps } from './NotificationItem';

package/dist/components/NotificationItem/index.js

@@ -0,0 +1,2 @@
+import { NotificationItem as e } from "./NotificationItem2.js";
+export { e as NotificationItem };

package/dist/components/NotificationStack/NotificationStack.d.ts

@@ -0,0 +1,56 @@
+import { Key, ReactNode } from 'react';
+import { BannerStatus } from '@astryxdesign/core/Banner';
+export interface NotificationStackItem {
+    key: Key;
+    /** Headline. */
+    title: ReactNode;
+    description?: ReactNode;
+    /** Drives the Banner's icon and colour. @default 'info' */
+    status?: BannerStatus;
+    /** Background-task progress, 0-100. Omit for a notice with no task. */
+    percent?: number;
+    /** A task that is running with no measurable progress yet. */
+    isProgressIndeterminate?: boolean;
+    /**
+     * Accessible name of the progress bar.
+     * @default the title when it is a string, else the catalog's uic.NotificationStack.progress
+     */
+    progressLabel?: string;
+    /** Label of the navigation action ("View folder"). Shown with `onAction`. */
+    actionText?: string;
+    onAction?: () => void;
+    /** @default the catalog's uic.common.retry ("Retry") */
+    retryText?: string;
+    onRetry?: () => void;
+    /** @default the catalog's uic.common.cancel ("Cancel") */
+    cancelText?: string;
+    onCancel?: () => void;
+    /**
+     * Seconds until the notice closes itself; `null` or `0` keeps it open until
+     * dismissed. The countdown pauses while the notice is hovered or focused.
+     */
+    duration?: number | null;
+    /** @default true */
+    isClosable?: boolean;
+    /** Overrides the status icon. */
+    icon?: ReactNode;
+    /** A complete notice body that replaces the title, description and progress. */
+    content?: ReactNode;
+    /** Collapsible detail below the header. */
+    children?: ReactNode;
+}
+export interface NotificationStackProps {
+    /** Oldest first; the last entry renders nearest the corner. */
+    notifications: Array<NotificationStackItem>;
+    /** Fired by the close button and by the auto-close timer. */
+    onClose?: (key: Key) => void;
+    /** Cap on simultaneously visible notices; the newest win. Unlimited when unset. */
+    maxVisible?: number;
+    /** Extra class names on the stack. */
+    className?: string;
+    "data-testid"?: string;
+}
+export declare function NotificationStack({ notifications, onClose, maxVisible, className, "data-testid": testId, }: NotificationStackProps): import("react").JSX.Element | null;
+export declare namespace NotificationStack {
+    var displayName: string;
+}

package/dist/components/NotificationStack/NotificationStack.messages.d.ts

@@ -0,0 +1,6 @@
+export declare const notificationStackMessages: {
+    readonly "uic.NotificationStack.progress": {
+        readonly defaultMessage: "Task progress";
+        readonly description: "Accessible name of a notice's progress bar when the notice title is not plain text";
+    };
+};

package/dist/components/NotificationStack/NotificationStack.messages.js

@@ -0,0 +1,10 @@
+import { defineMessages as e } from "../../i18n/catalog.js";
+//#region src/components/NotificationStack/NotificationStack.messages.ts
+var t = e({ "uic.NotificationStack.progress": {
+	defaultMessage: "Task progress",
+	description: "Accessible name of a notice's progress bar when the notice title is not plain text"
+} });
+//#endregion
+export { t as notificationStackMessages };
+
+//# sourceMappingURL=NotificationStack.messages.js.map

package/dist/components/NotificationStack/NotificationStack.messages.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NotificationStack.messages.js","names":[],"sources":["../../../src/components/NotificationStack/NotificationStack.messages.ts"],"sourcesContent":["import { defineMessages } from \"../../i18n/catalog\";\n\nexport const notificationStackMessages = defineMessages({\n  \"uic.NotificationStack.progress\": {\n    defaultMessage: \"Task progress\",\n    description:\n      \"Accessible name of a notice's progress bar when the notice title is not plain text\",\n  },\n});\n"],"mappings":";;AAEA,IAAa,IAA4B,EAAe,EACtD,kCAAkC;CAChC,gBAAgB;CAChB,aACE;AACJ,EACF,CAAC"}

package/dist/components/NotificationStack/NotificationStack2.js

@@ -0,0 +1,154 @@
+import { useUicTranslator as e } from "../../i18n/useUicTranslator.js";
+import { MODAL_LIVE_ATTRIBUTE as t, refreshModalBackground as n } from "../Modal/modalStack.js";
+/* empty css                  */
+import { useEffect as r, useEffectEvent as i, useLayoutEffect as a, useMemo as o, useRef as s, useState as c } from "react";
+import { Button as l } from "@astryxdesign/core/Button";
+import { HStack as u, VStack as d } from "@astryxdesign/core/Stack";
+import { Text as f } from "@astryxdesign/core/Text";
+import { jsx as p, jsxs as m } from "react/jsx-runtime";
+import { Banner as h } from "@astryxdesign/core/Banner";
+import { ProgressBar as g } from "@astryxdesign/core/ProgressBar";
+//#region src/components/NotificationStack/NotificationStack.tsx
+var _ = 200;
+function v({ item: t, isExiting: n, onClose: a }) {
+	let o = e(), { key: _, duration: v } = t, y = i(() => a?.(_)), [b, x] = c(!1), [S, C] = c(!1), w = b || S, T = (t.status ?? "info") === "error", [E, D] = c(null), O = E ?? T, k = typeof v == "number" && v > 0 ? v * 1e3 : null, A = s(k);
+	r(() => {
+		A.current = k;
+	}, [k]), r(() => {
+		if (k === null || n || w) return;
+		let e = A.current ?? k, t = Date.now(), r = window.setTimeout(() => y(), e);
+		return () => {
+			window.clearTimeout(r), A.current = Math.max(0, e - (Date.now() - t));
+		};
+	}, [
+		k,
+		n,
+		w
+	]);
+	let j = t.percent !== void 0 || t.isProgressIndeterminate === !0, M = !!(t.onCancel || t.onRetry || t.onAction), N = t.content != null, P = /* @__PURE__ */ m(u, {
+		gap: 2,
+		align: "center",
+		justify: "end",
+		wrap: "wrap",
+		children: [
+			t.onCancel ? /* @__PURE__ */ p(l, {
+				size: "sm",
+				variant: "ghost",
+				label: t.cancelText ?? o("uic.common.cancel"),
+				onClick: t.onCancel
+			}) : null,
+			t.onRetry ? /* @__PURE__ */ p(l, {
+				size: "sm",
+				variant: "secondary",
+				label: t.retryText ?? o("uic.common.retry"),
+				onClick: t.onRetry
+			}) : null,
+			t.onAction && t.actionText ? /* @__PURE__ */ p(l, {
+				size: "sm",
+				variant: "ghost",
+				label: t.actionText,
+				onClick: t.onAction
+			}) : null
+		]
+	});
+	return /* @__PURE__ */ p("div", {
+		className: "uic-notification-stack__item",
+		"data-exiting": n ? "true" : "false",
+		"data-notification-key": String(_),
+		"data-status": t.status ?? "info",
+		"data-paused": w ? "true" : "false",
+		onMouseEnter: () => x(!0),
+		onMouseLeave: () => x(!1),
+		onFocus: () => C(!0),
+		onBlur: () => C(!1),
+		children: /* @__PURE__ */ p(h, {
+			status: t.status ?? "info",
+			title: N ? t.content : /* @__PURE__ */ p("span", {
+				"data-testid": "notification-title",
+				children: t.title
+			}),
+			icon: t.icon,
+			elevation: "high",
+			isDismissable: t.isClosable ?? !0,
+			onDismiss: () => a?.(_),
+			endContent: M ? P : void 0,
+			collapsible: {
+				isOpen: O,
+				onOpenChange: D
+			},
+			description: N ? void 0 : t.description || j ? /* @__PURE__ */ m(d, {
+				gap: 2,
+				align: "stretch",
+				children: [t.description ? /* @__PURE__ */ p("div", {
+					className: "uic-notification-stack__body",
+					children: typeof t.description == "string" ? /* @__PURE__ */ p(f, {
+						type: "supporting",
+						children: /* @__PURE__ */ p("span", {
+							"data-testid": "notification-description",
+							children: t.description
+						})
+					}) : t.description
+				}) : null, j ? /* @__PURE__ */ p(g, {
+					value: t.percent ?? 0,
+					max: 100,
+					label: t.progressLabel ?? (typeof t.title == "string" ? t.title : o("uic.NotificationStack.progress")),
+					isLabelHidden: !0,
+					hasValueLabel: !t.isProgressIndeterminate,
+					isIndeterminate: t.isProgressIndeterminate
+				}) : null]
+			}) : void 0,
+			children: t.children ? /* @__PURE__ */ p("div", {
+				className: "uic-notification-stack__body",
+				children: typeof t.children == "string" ? /* @__PURE__ */ p(f, {
+					type: "supporting",
+					children: t.children
+				}) : t.children
+			}) : null
+		})
+	});
+}
+function y({ notifications: e, onClose: i, maxVisible: l, className: u, "data-testid": d }) {
+	let [f, h] = c([]), g = s([]), y = s(/* @__PURE__ */ new Map()), b = s(null), x = o(() => l ? e.slice(-l) : e, [e, l]), S = e.at(-1)?.key;
+	r(() => {
+		let e = b.current;
+		e && (e.scrollTop = e.scrollHeight);
+	}, [S]), r(() => {
+		let t = new Set(e.map((e) => e.key)), n = g.current.filter((e) => !t.has(e.key));
+		if (g.current = x, n.length === 0) return;
+		let r = new Set(n.map((e) => e.key));
+		h((e) => [...e.filter((e) => !r.has(e.key)), ...n]);
+		let i = y.current;
+		for (let { key: e } of n) window.clearTimeout(i.get(e)), i.set(e, window.setTimeout(() => {
+			i.delete(e), h((t) => t.filter((t) => t.key !== e));
+		}, _));
+	}, [e, x]), r(() => {
+		let e = y.current;
+		return () => {
+			for (let t of e.values()) window.clearTimeout(t);
+			e.clear();
+		};
+	}, []);
+	let C = new Set(x.map((e) => e.key)), w = f.filter((e) => !C.has(e.key)), T = x.length > 0 || w.length > 0;
+	return a(() => (n(), () => queueMicrotask(n)), [T]), T ? /* @__PURE__ */ m("div", {
+		ref: b,
+		className: ["uic-notification-stack", u].filter(Boolean).join(" "),
+		"data-testid": d,
+		[t]: "",
+		role: "presentation",
+		children: [w.map((e) => /* @__PURE__ */ p(v, {
+			item: e,
+			isExiting: !0,
+			onClose: i
+		}, e.key)), x.map((e) => /* @__PURE__ */ p(v, {
+			item: e,
+			isExiting: !1,
+			onClose: i
+		}, e.key))]
+	}) : null;
+}
+y.displayName = "NotificationStack";
+//#endregion
+export { y as NotificationStack };
+
+//# sourceMappingURL=NotificationStack2.js.map
+import "../../assets/components/NotificationStack/NotificationStack.css";

package/dist/components/NotificationStack/NotificationStack2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NotificationStack2.js","names":[],"sources":["../../../src/components/NotificationStack/NotificationStack.tsx"],"sourcesContent":["/**\n * NotificationStack\n *\n * Floating notices stacked in the bottom-end corner, newest nearest the\n * corner. Each notice is an Astryx `Banner` that can carry what a toast\n * cannot: background-task progress (determinate or not), Cancel / Retry and a\n * navigation action, a collapsible detail, and a body of the caller's own.\n *\n * It is presentational. The caller owns the list: it adds notices, removes\n * them in `onClose`, and updates a notice in place under the same `key`.\n *\n * - `duration` closes a notice after that many seconds; the countdown pauses\n *   while the notice is hovered or holds focus. `null` or `0` keeps it open.\n * - An error notice opens its detail (`children`) up front; the reader's own\n *   toggle wins after that.\n * - `maxVisible` caps how many render; the newest win, and the rest render as\n *   room frees up.\n * - Removed notices slide out before they unmount, unless the reader asked\n *   for reduced motion.\n * - A long description scrolls inside its notice, so the dismiss button stays\n *   on screen; the stack scrolls once it reaches the top inset.\n *\n * Layout hooks, set on the stack or an ancestor:\n * `--notification-stack-z` (stacking order, default 11000, one above\n * `Modal`'s default band), `--notification-stack-inset-top` (space kept\n * free above the stack, such as an app header, default 0) and\n * `--notification-stack-body-max-height` (one notice's scroll cap, default 30vh).\n *\n * e2e hooks: each notice carries `data-notification-key`, `data-status` and\n * `data-paused`; its title and description carry `data-testid`\n * `notification-title` and `notification-description`.\n *\n * @example\n * <NotificationStack\n *   notifications={[{ key: \"upload\", title: \"Uploading\", percent: 40 }]}\n *   onClose={(key) => remove(key)}\n * />\n */\nimport {\n  useEffect,\n  useEffectEvent,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useState,\n  type Key,\n  type ReactNode,\n} from \"react\";\nimport { Banner, type BannerStatus } from \"@astryxdesign/core/Banner\";\nimport { Button } from \"@astryxdesign/core/Button\";\nimport { ProgressBar } from \"@astryxdesign/core/ProgressBar\";\nimport { HStack, VStack } from \"@astryxdesign/core/Stack\";\nimport { Text } from \"@astryxdesign/core/Text\";\n\nimport { useUicTranslator } from \"../../i18n/useUicTranslator\";\nimport { MODAL_LIVE_ATTRIBUTE, refreshModalBackground } from \"../Modal/modalStack\";\nimport \"./NotificationStack.css\";\n\n/** Matches the exit animation's budget in NotificationStack.css. */\nconst EXIT_ANIMATION_MS = 200;\n\nexport interface NotificationStackItem {\n  key: Key;\n  /** Headline. */\n  title: ReactNode;\n  description?: ReactNode;\n  /** Drives the Banner's icon and colour. @default 'info' */\n  status?: BannerStatus;\n  /** Background-task progress, 0-100. Omit for a notice with no task. */\n  percent?: number;\n  /** A task that is running with no measurable progress yet. */\n  isProgressIndeterminate?: boolean;\n  /**\n   * Accessible name of the progress bar.\n   * @default the title when it is a string, else the catalog's uic.NotificationStack.progress\n   */\n  progressLabel?: string;\n  /** Label of the navigation action (\"View folder\"). Shown with `onAction`. */\n  actionText?: string;\n  onAction?: () => void;\n  /** @default the catalog's uic.common.retry (\"Retry\") */\n  retryText?: string;\n  onRetry?: () => void;\n  /** @default the catalog's uic.common.cancel (\"Cancel\") */\n  cancelText?: string;\n  onCancel?: () => void;\n  /**\n   * Seconds until the notice closes itself; `null` or `0` keeps it open until\n   * dismissed. The countdown pauses while the notice is hovered or focused.\n   */\n  duration?: number | null;\n  /** @default true */\n  isClosable?: boolean;\n  /** Overrides the status icon. */\n  icon?: ReactNode;\n  /** A complete notice body that replaces the title, description and progress. */\n  content?: ReactNode;\n  /** Collapsible detail below the header. */\n  children?: ReactNode;\n}\n\nexport interface NotificationStackProps {\n  /** Oldest first; the last entry renders nearest the corner. */\n  notifications: Array<NotificationStackItem>;\n  /** Fired by the close button and by the auto-close timer. */\n  onClose?: (key: Key) => void;\n  /** Cap on simultaneously visible notices; the newest win. Unlimited when unset. */\n  maxVisible?: number;\n  /** Extra class names on the stack. */\n  className?: string;\n  \"data-testid\"?: string;\n}\n\nfunction NotificationStackItemView({\n  item,\n  isExiting,\n  onClose,\n}: {\n  item: NotificationStackItem;\n  isExiting: boolean;\n  onClose?: (key: Key) => void;\n}) {\n  const t = useUicTranslator();\n  const { key, duration } = item;\n\n  // The timer must not restart when the parent re-creates `onClose`, but\n  // firing must still see the latest one.\n  const fireClose = useEffectEvent(() => onClose?.(key));\n\n  // A notice that closes under the pointer the reader moved there to read it\n  // is lost; focus counts too, so keyboard users get the same reprieve.\n  // Each holds the countdown on its own: leaving one must not resume it while\n  // the other still holds.\n  const [isHovered, setIsHovered] = useState(false);\n  const [isFocused, setIsFocused] = useState(false);\n  const isPaused = isHovered || isFocused;\n\n  // Derived, not a default: a task is updated in place under the same key\n  // (pending, then failed), so the item never remounts. `null` means the\n  // reader has not touched the disclosure, so it follows the status.\n  const isError = (item.status ?? \"info\") === \"error\";\n  const [detailOpenByUser, setDetailOpenByUser] = useState<boolean | null>(null);\n  const isDetailOpen = detailOpenByUser ?? isError;\n\n  // `0` means \"stay open\", not \"close immediately\".\n  const autoCloseMs =\n    typeof duration === \"number\" && duration > 0 ? duration * 1000 : null;\n  // What is left of the countdown, banked by the timer effect's cleanup so a\n  // pause and resume continues rather than restarts.\n  const remainingMsRef = useRef<number | null>(autoCloseMs);\n\n  // A new duration is a new budget. Cleanups run before effects, so this\n  // lands after the timer's cleanup banked the old value and before the timer\n  // below reads it.\n  useEffect(() => {\n    remainingMsRef.current = autoCloseMs;\n  }, [autoCloseMs]);\n\n  useEffect(() => {\n    if (autoCloseMs === null || isExiting || isPaused) return;\n    const budget = remainingMsRef.current ?? autoCloseMs;\n    const startedAt = Date.now();\n    const timer = window.setTimeout(() => fireClose(), budget);\n    return () => {\n      window.clearTimeout(timer);\n      remainingMsRef.current = Math.max(0, budget - (Date.now() - startedAt));\n    };\n    // An effect event is not a dependency; this plugin version predates it.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [autoCloseMs, isExiting, isPaused]);\n\n  const hasProgress =\n    item.percent !== undefined || item.isProgressIndeterminate === true;\n  const hasActions = !!(item.onCancel || item.onRetry || item.onAction);\n  const hasOwnContent = item.content != null;\n\n  // `wrap` lets the buttons stack inside the end area of a narrow notice\n  // instead of pushing the header wider.\n  const actions = (\n    <HStack gap={2} align=\"center\" justify=\"end\" wrap=\"wrap\">\n      {item.onCancel ? (\n        <Button\n          size=\"sm\"\n          variant=\"ghost\"\n          label={item.cancelText ?? t(\"uic.common.cancel\")}\n          onClick={item.onCancel}\n        />\n      ) : null}\n      {item.onRetry ? (\n        <Button\n          size=\"sm\"\n          variant=\"secondary\"\n          label={item.retryText ?? t(\"uic.common.retry\")}\n          onClick={item.onRetry}\n        />\n      ) : null}\n      {item.onAction && item.actionText ? (\n        <Button\n          size=\"sm\"\n          variant=\"ghost\"\n          label={item.actionText}\n          onClick={item.onAction}\n        />\n      ) : null}\n    </HStack>\n  );\n\n  return (\n    <div\n      className=\"uic-notification-stack__item\"\n      data-exiting={isExiting ? \"true\" : \"false\"}\n      data-notification-key={String(key)}\n      data-status={item.status ?? \"info\"}\n      data-paused={isPaused ? \"true\" : \"false\"}\n      onMouseEnter={() => setIsHovered(true)}\n      onMouseLeave={() => setIsHovered(false)}\n      // React's onFocus/onBlur are the delegated focusin/focusout pair, so\n      // focus anywhere inside the notice counts.\n      onFocus={() => setIsFocused(true)}\n      onBlur={() => setIsFocused(false)}\n    >\n      <Banner\n        status={item.status ?? \"info\"}\n        title={\n          hasOwnContent ? (\n            item.content\n          ) : (\n            <span data-testid=\"notification-title\">{item.title}</span>\n          )\n        }\n        icon={item.icon}\n        // Banner is normally in flow; a floating notice needs a shadow.\n        elevation=\"high\"\n        isDismissable={item.isClosable ?? true}\n        onDismiss={() => onClose?.(key)}\n        endContent={hasActions ? actions : undefined}\n        collapsible={{\n          isOpen: isDetailOpen,\n          onOpenChange: setDetailOpenByUser,\n        }}\n        description={\n          hasOwnContent ? undefined : item.description || hasProgress ? (\n            <VStack gap={2} align=\"stretch\">\n              {/* The text scrolls; a progress bar outside it stays pinned. */}\n              {item.description ? (\n                <div className=\"uic-notification-stack__body\">\n                  {typeof item.description === \"string\" ? (\n                    <Text type=\"supporting\">\n                      <span data-testid=\"notification-description\">\n                        {item.description}\n                      </span>\n                    </Text>\n                  ) : (\n                    item.description\n                  )}\n                </div>\n              ) : null}\n              {hasProgress ? (\n                <ProgressBar\n                  value={item.percent ?? 0}\n                  max={100}\n                  // Hidden: the Banner title already names the task on screen.\n                  label={\n                    item.progressLabel ??\n                    (typeof item.title === \"string\"\n                      ? item.title\n                      : t(\"uic.NotificationStack.progress\"))\n                  }\n                  isLabelHidden\n                  hasValueLabel={!item.isProgressIndeterminate}\n                  isIndeterminate={item.isProgressIndeterminate}\n                />\n              ) : null}\n            </VStack>\n          ) : undefined\n        }\n      >\n        {/* A bare string would take Banner's base size and tower over the\n            description, so it gets the description's treatment. */}\n        {item.children ? (\n          <div className=\"uic-notification-stack__body\">\n            {typeof item.children === \"string\" ? (\n              <Text type=\"supporting\">{item.children}</Text>\n            ) : (\n              item.children\n            )}\n          </div>\n        ) : null}\n      </Banner>\n    </div>\n  );\n}\n\nexport function NotificationStack({\n  notifications,\n  onClose,\n  maxVisible,\n  className,\n  \"data-testid\": testId,\n}: NotificationStackProps) {\n  // Notices that left `notifications` but are still playing their exit.\n  const [exiting, setExiting] = useState<Array<NotificationStackItem>>([]);\n  const previousVisibleRef = useRef<Array<NotificationStackItem>>([]);\n  // One prune timer per exiting key. They outlive the effect that starts\n  // them: any re-render (a new array, the exit itself) re-runs that effect,\n  // and cancelling there would leave the notice mounted for good.\n  const exitTimersRef = useRef(new Map<Key, number>());\n  const stackRef = useRef<HTMLDivElement>(null);\n\n  const visible = useMemo(\n    () => (maxVisible ? notifications.slice(-maxVisible) : notifications),\n    [notifications, maxVisible],\n  );\n  const newestKey = notifications.at(-1)?.key;\n\n  // Once the stack is capped it scrolls, and the newest notice is at the\n  // scrolled end. Keyed on the newest notice, not the array: a running task\n  // rebuilds the array constantly and would yank a reader back down.\n  useEffect(() => {\n    const el = stackRef.current;\n    if (el) el.scrollTop = el.scrollHeight;\n  }, [newestKey]);\n\n  useEffect(() => {\n    const currentKeys = new Set(notifications.map((n) => n.key));\n    // Only a notice that was on screen animates out; one closed while hidden\n    // behind `maxVisible` would otherwise flash into the corner.\n    const removed = previousVisibleRef.current.filter((n) => !currentKeys.has(n.key));\n    previousVisibleRef.current = visible;\n    if (removed.length === 0) return;\n    const removedKeys = new Set(removed.map((n) => n.key));\n    setExiting((prev) => [...prev.filter((n) => !removedKeys.has(n.key)), ...removed]);\n    const timers = exitTimersRef.current;\n    for (const { key } of removed) {\n      window.clearTimeout(timers.get(key));\n      timers.set(\n        key,\n        window.setTimeout(() => {\n          timers.delete(key);\n          setExiting((prev) => prev.filter((n) => n.key !== key));\n        }, EXIT_ANIMATION_MS),\n      );\n    }\n  }, [notifications, visible]);\n\n  useEffect(() => {\n    const timers = exitTimersRef.current;\n    return () => {\n      for (const timer of timers.values()) window.clearTimeout(timer);\n      timers.clear();\n    };\n  }, []);\n\n  const visibleKeys = new Set(visible.map((n) => n.key));\n  const stillExiting = exiting.filter((n) => !visibleKeys.has(n.key));\n\n  const isRendered = visible.length > 0 || stillExiting.length > 0;\n  // The stack is marked to stay reachable over an open Modal; the modal stack\n  // re-reads the mark whenever the stack appears or goes.\n  useLayoutEffect(() => {\n    refreshModalBackground();\n    return () => queueMicrotask(refreshModalBackground);\n  }, [isRendered]);\n\n  if (!isRendered) return null;\n\n  return (\n    <div\n      ref={stackRef}\n      className={[\"uic-notification-stack\", className].filter(Boolean).join(\" \")}\n      data-testid={testId}\n      {...{ [MODAL_LIVE_ATTRIBUTE]: \"\" }}\n      // Each Banner announces itself; the container stays out of the tree.\n      role=\"presentation\"\n    >\n      {stillExiting.map((item) => (\n        <NotificationStackItemView\n          key={item.key}\n          item={item}\n          isExiting\n          onClose={onClose}\n        />\n      ))}\n      {visible.map((item) => (\n        <NotificationStackItemView\n          key={item.key}\n          item={item}\n          isExiting={false}\n          onClose={onClose}\n        />\n      ))}\n    </div>\n  );\n}\n\nNotificationStack.displayName = \"NotificationStack\";\n"],"mappings":"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"}

package/dist/components/NotificationStack/index.d.ts

@@ -0,0 +1,2 @@
+export { NotificationStack } from './NotificationStack';
+export type { NotificationStackItem, NotificationStackProps, } from './NotificationStack';

package/dist/components/NotificationStack/index.js

@@ -0,0 +1,2 @@
+import { NotificationStack as e } from "./NotificationStack2.js";
+export { e as NotificationStack };