@corndev/ui-overlays 0.0.0-reserved.0 → 1.0.0-beta.1

package/dist/lib/after-transition.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Runs `done` once `el`'s own transition ends — or after `fallbackMs`, whichever
+ * comes first — and returns a function that cancels it.
+ *
+ * A dialog's teardown used to wait on a one-time `transitionend` alone. With no
+ * transition to end (reduced motion, the stylesheet not loaded) or a `destroy()`
+ * that removed the element first, it never came: the backdrop stayed and the
+ * page stayed scroll-locked. And a dialog reopened during its fade-out kept the
+ * old listener, which then tore down the newly open one. The fallback covers
+ * the first; cancelling on reopen covers the second. Only the element's own
+ * event counts, not one bubbling up from a child's hover transition.
+ *
+ * @param {HTMLElement} el
+ * @param {() => void} done
+ * @param {number} [fallbackMs=500] Longer than any transition the theme defines.
+ * @returns {() => void} Cancel.
+ */
+export function afterTransition(el: HTMLElement, done: () => void, fallbackMs?: number): () => void;

package/dist/lib/described-by.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Space-separated ids from every argument, de-duplicated in order; undefined
+ * when there are none, so React omits the attribute.
+ *
+ * @param {...(string | null | undefined)} lists
+ * @returns {string | undefined}
+ */
+export function mergeIds(...lists: (string | null | undefined)[]): string | undefined;
+/**
+ * Add ids to an element's aria-describedby, keeping the ones already there.
+ *
+ * @param {Element} el
+ * @param {...string} ids
+ */
+export function addDescribedBy(el: Element, ...ids: string[]): void;
+/**
+ * Remove ids from an element's aria-describedby, and the attribute itself only
+ * when nothing is left.
+ *
+ * @param {Element} el
+ * @param {...string} ids
+ */
+export function removeDescribedBy(el: Element, ...ids: string[]): void;

package/dist/lib/dialog-focus.d.ts

@@ -0,0 +1,48 @@
+/**
+ * Focusable elements inside `root`, in document order — skipping anything in a
+ * `hidden` or `inert` subtree, such as a closed accordion panel, which the
+ * browser would refuse to focus anyway.
+ *
+ * @param {Element} root
+ * @returns {HTMLElement[]}
+ */
+export function focusableIn(root: Element): HTMLElement[];
+/**
+ * The element a dialog should focus when it opens, in order of who asked:
+ *
+ * 1. `[data-autofocus]` — the author named it. Mantine's convention too, so a
+ *    migrating app needs no change. On a wrapper it means the first control
+ *    inside.
+ * 2. Whatever React's `autoFocus` already focused. React does not render an
+ *    `autofocus` attribute; it calls `focus()` during commit, before any effect
+ *    runs, so the only trace it leaves is `document.activeElement`.
+ * 3. `[autofocus]` — the same request, written in plain HTML.
+ * 4. The first focusable element that is not the close control.
+ * 5. The close control, and failing that the dialog itself — which is why the
+ *    dialog carries `tabindex="-1"`.
+ *
+ * @param {HTMLElement} root The element with `role="dialog"`.
+ * @returns {HTMLElement}
+ */
+export function chooseInitialFocus(root: HTMLElement): HTMLElement;
+/**
+ * Whether `el` is only a last resort — the close control or the dialog itself —
+ * meaning nothing in the content asked for focus. A lazily loaded body can still
+ * arrive and ask, so this is when it is worth looking again.
+ *
+ * @param {HTMLElement} root
+ * @param {Element | null} el
+ * @returns {boolean}
+ */
+export function isFallbackFocus(root: HTMLElement, el: Element | null): boolean;
+/**
+ * Keeps Tab inside `root`: wraps from the last control to the first and back,
+ * and pulls focus in if it has somehow ended up outside.
+ *
+ * @param {KeyboardEvent} event
+ * @param {HTMLElement} root
+ * @returns {void}
+ */
+export function wrapTab(event: KeyboardEvent, root: HTMLElement): void;
+/** Marks a dialog's own close control, so it is the last resort rather than the default. */
+export const CLOSE_ATTR: "data-dialog-close";

package/dist/lib/inert.d.ts

@@ -0,0 +1,56 @@
+/**
+ * Re-applies `inert` around the topmost open layer.
+ *
+ * Called after any layer opens or closes: it clears what it set last time, finds
+ * the layer that is now on top, and inerts that layer's siblings — which is how
+ * a lower dialog becomes inert while a higher one is open, since both are
+ * children of the same portal root.
+ *
+ * @param {Document} [doc=document] Document to update.
+ * @returns {void}
+ */
+export function refreshInert(doc?: Document): void;
+/**
+ * Opens a dialog layer: everything beside it, including any dialog already open,
+ * becomes inert.
+ *
+ * @param {HTMLElement} el The dialog's outermost element (the backdrop).
+ * @returns {void}
+ */
+export function openLayer(el: HTMLElement): void;
+/**
+ * Closes a dialog layer and hands the page back — to the dialog below it if
+ * there is one, otherwise to the page.
+ *
+ * Safe to call on an element that was never opened, and on one already detached
+ * from the document, which is what unmounting a React portal leaves behind.
+ *
+ * @param {HTMLElement} el The element passed to {@link openLayer}.
+ * @returns {void}
+ */
+export function closeLayer(el: HTMLElement): void;
+/**
+ * Whether `el` is the topmost open dialog layer.
+ *
+ * Keyboard shortcuts belong to the dialog on top and to nothing beneath it.
+ * Every open dialog listens for keys on the document, because focus can sit on
+ * the backdrop or on `<body>` after a click, so without this check one Escape
+ * reached every listener and closed a whole stack at once — the confirm *and* the
+ * form it was confirming, with the form's unsaved work.
+ *
+ * Read from the DOM for the same reason as the rest of this module: each
+ * component's copy of this helper sees the same layers.
+ *
+ * @param {HTMLElement} el The element passed to {@link openLayer}.
+ * @returns {boolean}
+ */
+export function isTopLayer(el: HTMLElement): boolean;
+/**
+ * Whether any open layer matches `selector` — so a dialog closing on top of
+ * another of its kind leaves the page's scroll lock in place for the one below.
+ *
+ * @param {Document} doc
+ * @param {string} selector A selector the layer element must also match.
+ * @returns {boolean}
+ */
+export function hasOpenLayer(doc: Document, selector: string): boolean;

package/dist/lib/styles-check.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Warns, once per package, if the package's stylesheet is not on the page.
+ *
+ * The record of what has been checked lives on `globalThis`, not in this module:
+ * the React build inlines helpers like this into each component's module, so a
+ * module-level set would warn once per component instead of once per package.
+ *
+ * @param {keyof PACKAGES} pkg The package the component ships in.
+ * @param {string} component Its name, for the message.
+ * @returns {void}
+ */
+export function checkStylesLoaded(pkg: "@corndev/ui-overlays" | "@corndev/ui-notifications" | "@corndev/ui-markdown" | "@corndev/ui-icons", component: string): void;

package/dist/overlays.d.ts

@@ -0,0 +1,7 @@
+export { createModal } from "./components/modal/modal.js";
+export { createDrawer } from "./components/drawer/drawer.js";
+export { createAccordion } from "./components/accordion/accordion.js";
+export { createTooltip } from "./components/tooltip/tooltip.js";
+export { createPopover } from "./components/popover/popover.js";
+export { createMenu } from "./components/menu/menu.js";
+export const version: "1.0.0-beta.1";

package/package.json

@@ -1,12 +1,52 @@
 {
   "name": "@corndev/ui-overlays",
-  "version": "0.0.0-reserved.0",
-  "description": "Reserved for Corn UI. Install @corndev/ui-overlays@latest for the real package.",
+  "version": "1.0.0-beta.1",
+  "description": "Corn UI — Overlay components: Modal, Drawer, Accordion, Tooltip, Popover",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/overlays.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/overlays.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./styles": "./dist/index.css"
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "node ../../scripts/build-ui-overlays.js",
+    "prepack": "node ../../scripts/copy-license.js",
+    "clean": "rm -rf dist"
+  },
+  "keywords": [
+    "corn-ui",
+    "corndog",
+    "ui",
+    "modal",
+    "drawer",
+    "accordion",
+    "tooltip",
+    "popover",
+    "overlay"
+  ],
+  "author": "Corndog Development LLC",
   "license": "MIT",
   "repository": {
     "type": "git",
     "url": "git+https://gitlab.com/corn-dev/corn-ui.git",
     "directory": "packages/ui-overlays"
   },
-  "homepage": "https://cornui.com"
+  "homepage": "https://cornui.com",
+  "bugs": {
+    "url": "https://gitlab.com/corn-dev/corn-ui/-/issues"
+  },
+  "dependencies": {
+    "@corndev/ui": "1.0.0-beta.1"
+  },
+  "sideEffects": [
+    "**/*.css"
+  ]
 }