@nizivo/react 0.1.0 → 0.2.0

package/dist/dialog/dialog.client.js

@@ -1,35 +1,21 @@
 "use client";
 import { cx } from "../_internal/cx.js";
 import { renderElement, toRenderFn } from "../contracts/render.js";
+import { useLabels } from "../config/config.client.js";
 import { CloseGlyph } from "../_internal/glyphs.js";
+import { ModalNestingScope, initialFocus, useModalNesting } from "../_internal/modal.client.js";
 import { Close, Description, Popup, Root, Title, Trigger } from "../_engines/react-aria/dialog.client.js";
-import { createContext, use, useLayoutEffect, useMemo, useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { createContext, use } from "react";
+import { jsx } from "react/jsx-runtime";
 //#region src/dialog/dialog.client.tsx
-const NestingContext = createContext(null);
 /** `Dialog.Root`'s `returnFocus`, for its Popup. */
 const ReturnFocusContext = createContext(true);
 const renderDiv = toRenderFn(void 0, "div");
 const renderP = toRenderFn(void 0, "p");
-const TABBABLE = "a[href], button, input, select, textarea, summary, [tabindex], [contenteditable]:not([contenteditable=\"false\"])";
-/**
-* Focus on open (§12.2): an element the consumer marked `autoFocus` keeps it (the engine sees focus
-* inside and leaves it); an alertdialog focuses its least destructive action, the first
-* `Dialog.Close`; a dialog focuses the first tabbable element in its `Dialog.Body`; otherwise the
-* engine focuses the popup itself, so a long text starts at its top.
-*/
-function initialFocus(role) {
-	return (content) => {
-		if (role === "alertdialog") return content.querySelector("[data-slot=\"dialog-footer\"] [data-slot=\"dialog-close\"]:not(:disabled)") ?? content.querySelector("[data-slot=\"dialog-close\"]:not(:disabled)");
-		const body = content.querySelector("[data-slot=\"dialog-body\"]");
-		if (body === null) return null;
-		for (const element of body.querySelectorAll(TABBABLE)) if (element.tabIndex >= 0 && !element.matches(":disabled") && element.getClientRects().length > 0) return element;
-		return null;
-	};
-}
+/** Focus on open (§12.2), from the Dialog's own slots. */
 const INITIAL_FOCUS = {
-	dialog: initialFocus("dialog"),
-	alertdialog: initialFocus("alertdialog")
+	dialog: initialFocus("dialog", "dialog"),
+	alertdialog: initialFocus("dialog", "alertdialog")
 };
 function DialogRoot({ returnFocus = true, ...props }) {
 	return /* @__PURE__ */ jsx(ReturnFocusContext, {
@@ -51,10 +37,8 @@ function DialogTrigger({ className, render, ...rest }) {
 	});
 }
 function DialogPopup({ role = "dialog", size = "md", backdrop, container, className, children, ...rest }) {
-	const parent = use(NestingContext);
+	const { parent, nesting, childOpen } = useModalNesting();
 	const returnFocus = use(ReturnFocusContext);
-	const [openChildren, setOpenChildren] = useState(0);
-	const nesting = useMemo(() => ({ childOpened: (delta) => setOpenChildren((n) => n + delta) }), []);
 	return /* @__PURE__ */ jsx(Popup, {
 		...rest,
 		role,
@@ -77,22 +61,15 @@ function DialogPopup({ role = "dialog", size = "md", backdrop, container, classN
 		className: cx("nz-dialog-popup", className),
 		"data-slot": "dialog-popup",
 		"data-size": size,
-		"data-nested-open": openChildren > 0 ? "" : void 0,
+		"data-nested-open": childOpen ? "" : void 0,
 		render: renderDiv,
-		children: /* @__PURE__ */ jsxs(NestingContext, {
-			value: nesting,
-			children: [parent !== null && /* @__PURE__ */ jsx(OpenSignal, { parent }), children]
+		children: /* @__PURE__ */ jsx(ModalNestingScope, {
+			parent,
+			nesting,
+			children
 		})
 	});
 }
-/** Mounted only while this popup's content is mounted, i.e. while it is open. */
-function OpenSignal({ parent }) {
-	useLayoutEffect(() => {
-		parent.childOpened(1);
-		return () => parent.childOpened(-1);
-	}, [parent]);
-	return null;
-}
 const HEADINGS = {
 	2: toRenderFn(void 0, "h2"),
 	3: toRenderFn(void 0, "h3"),
@@ -139,7 +116,8 @@ function DialogFooter({ className, render, ...rest }) {
 * builder cost the Dialog entry about 280 B gzip against its 31 KiB cap. An overlay-lane case
 * compares the two.
 */
-function DialogClose({ className, render, children, labels, ...rest }) {
+function DialogClose({ className, render, children, labels: labelsProp, ...rest }) {
+	const labels = useLabels("dialog", labelsProp);
 	return /* @__PURE__ */ jsx(Close, {
 		...rest,
 		className: cx("nz-dialog-close", className),

package/dist/drawer/drawer.client.d.ts

@@ -0,0 +1,25 @@
+import { DrawerBodyProps, DrawerCloseProps, DrawerDescriptionProps, DrawerFooterProps, DrawerHeaderProps, DrawerPopupProps, DrawerRootProps, DrawerTitleProps, DrawerTriggerProps } from "./drawer.contract.js";
+import { JSX } from "react";
+//#region src/drawer/drawer.client.d.ts
+export declare function DrawerRoot({ returnFocus, ...props }: DrawerRootProps): JSX.Element;
+/**
+ * Without `render`, its own `<button>` with `nz-hit-target` and, from drawer.css, a 24 x 24 px
+ * minimum (WCAG 2.2 2.5.8, as the Dialog's, M27). A composed Button or IconButton keeps its own size.
+ */
+export declare function DrawerTrigger({ className, render, ...rest }: DrawerTriggerProps): JSX.Element;
+export declare function DrawerPopup({ side, backdrop, container, className, children, ...rest }: DrawerPopupProps): JSX.Element;
+/** Figma's Header frame: the title, an optional description and badges, above a 1 px rule. */
+export declare function DrawerHeader({ className, render, ...rest }: DrawerHeaderProps): JSX.Element;
+export declare function DrawerTitle({ level, className, render, ...rest }: DrawerTitleProps): JSX.Element;
+export declare function DrawerDescription({ className, render, ...rest }: DrawerDescriptionProps): JSX.Element;
+/** The only scroller inside the drawer; it fills the height between the header and the footer. */
+export declare function DrawerBody({ className, render, ...rest }: DrawerBodyProps): JSX.Element;
+/** Figma's Footer frame: actions that share its width, above a 1 px rule. */
+export declare function DrawerFooter({ className, render, ...rest }: DrawerFooterProps): JSX.Element;
+/**
+ * With `render` or `children`, the consumer's button. With neither, an IconButton (tertiary, `md`)
+ * showing the core close glyph, named by `labels.close`: the IconButton element's markup written out,
+ * as `Dialog.Close` does, so the Drawer entry does not pull in IconButton's tooltip chain.
+ */
+export declare function DrawerClose({ className, render, children, labels: labelsProp, ...rest }: DrawerCloseProps): JSX.Element;
+//#endregion

package/dist/drawer/drawer.client.js

@@ -0,0 +1,154 @@
+"use client";
+import { cx } from "../_internal/cx.js";
+import { renderElement, toRenderFn } from "../contracts/render.js";
+import { useLabels } from "../config/config.client.js";
+import { CloseGlyph } from "../_internal/glyphs.js";
+import { ModalNestingScope, initialFocus, useModalNesting } from "../_internal/modal.client.js";
+import { Close, Description, Popup, Root, Title, Trigger } from "../_engines/react-aria/dialog.client.js";
+import { useDirection } from "../_engines/react-aria/drawer.client.js";
+import { createContext, use } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/drawer/drawer.client.tsx
+/** `Drawer.Root`'s `returnFocus`, for its Popup. */
+const ReturnFocusContext = createContext(true);
+const renderDiv = toRenderFn(void 0, "div");
+const renderP = toRenderFn(void 0, "p");
+/** A drawer is always a dialog (an alertdialog is the Dialog's job). */
+const ROLE = "dialog";
+/** Focus on open (§12.2): the first tabbable element in `Drawer.Body`, else the drawer itself. */
+const INITIAL_FOCUS = initialFocus("drawer", ROLE);
+function DrawerRoot({ returnFocus = true, ...props }) {
+	return /* @__PURE__ */ jsx(ReturnFocusContext, {
+		value: returnFocus,
+		children: /* @__PURE__ */ jsx(Root, { ...props })
+	});
+}
+/**
+* Without `render`, its own `<button>` with `nz-hit-target` and, from drawer.css, a 24 x 24 px
+* minimum (WCAG 2.2 2.5.8, as the Dialog's, M27). A composed Button or IconButton keeps its own size.
+*/
+function DrawerTrigger({ className, render, ...rest }) {
+	return /* @__PURE__ */ jsx(Trigger, {
+		...rest,
+		className: cx("nz-drawer-trigger", render === void 0 && "nz-hit-target", className),
+		"data-slot": "drawer-trigger",
+		render: toRenderFn(render, "button")
+	});
+}
+function DrawerPopup({ side = "end", backdrop, container, className, children, ...rest }) {
+	const { parent, nesting, childOpen } = useModalNesting();
+	const returnFocus = use(ReturnFocusContext);
+	const ltr = useDirection() === "ltr";
+	const physical = side === "bottom" ? side : side === "end" === ltr ? "right" : "left";
+	return /* @__PURE__ */ jsx(Popup, {
+		...rest,
+		role: ROLE,
+		container,
+		backdrop: backdrop ?? parent === null,
+		positioner: {
+			className: "nz-drawer-positioner",
+			"data-slot": "drawer-positioner",
+			"data-side": physical
+		},
+		backdropProps: {
+			className: "nz-drawer-backdrop",
+			"data-slot": "drawer-backdrop"
+		},
+		contentProps: {
+			className: "nz-drawer-content",
+			"data-slot": "drawer-content"
+		},
+		initialFocus: INITIAL_FOCUS,
+		returnFocus,
+		className: cx("nz-drawer-popup", className),
+		"data-slot": "drawer-popup",
+		"data-side": physical,
+		"data-nested-open": childOpen ? "" : void 0,
+		render: renderDiv,
+		children: /* @__PURE__ */ jsx(ModalNestingScope, {
+			parent,
+			nesting,
+			children
+		})
+	});
+}
+/** Figma's Header frame: the title, an optional description and badges, above a 1 px rule. */
+function DrawerHeader({ className, render, ...rest }) {
+	return renderElement("div", render, {}, {
+		...rest,
+		className: cx("nz-drawer-header", className),
+		"data-slot": "drawer-header"
+	});
+}
+const HEADINGS = {
+	2: toRenderFn(void 0, "h2"),
+	3: toRenderFn(void 0, "h3"),
+	4: toRenderFn(void 0, "h4"),
+	5: toRenderFn(void 0, "h5"),
+	6: toRenderFn(void 0, "h6")
+};
+function DrawerTitle({ level = 2, className, render, ...rest }) {
+	return /* @__PURE__ */ jsx(Title, {
+		...rest,
+		level,
+		className: cx("nz-drawer-title", className),
+		"data-slot": "drawer-title",
+		render: render === void 0 ? HEADINGS[level] : toRenderFn(render, `h${level}`)
+	});
+}
+function DrawerDescription({ className, render, ...rest }) {
+	return /* @__PURE__ */ jsx(Description, {
+		...rest,
+		className: cx("nz-drawer-description", className),
+		"data-slot": "drawer-description",
+		render: render === void 0 ? renderP : toRenderFn(render, "p")
+	});
+}
+/** The only scroller inside the drawer; it fills the height between the header and the footer. */
+function DrawerBody({ className, render, ...rest }) {
+	return renderElement("div", render, {}, {
+		...rest,
+		className: cx("nz-drawer-body", className),
+		"data-slot": "drawer-body"
+	});
+}
+/** Figma's Footer frame: actions that share its width, above a 1 px rule. */
+function DrawerFooter({ className, render, ...rest }) {
+	return renderElement("div", render, {}, {
+		...rest,
+		className: cx("nz-drawer-footer", className),
+		"data-slot": "drawer-footer"
+	});
+}
+/**
+* With `render` or `children`, the consumer's button. With neither, an IconButton (tertiary, `md`)
+* showing the core close glyph, named by `labels.close`: the IconButton element's markup written out,
+* as `Dialog.Close` does, so the Drawer entry does not pull in IconButton's tooltip chain.
+*/
+function DrawerClose({ className, render, children, labels: labelsProp, ...rest }) {
+	const labels = useLabels("drawer", labelsProp);
+	return /* @__PURE__ */ jsx(Close, {
+		...rest,
+		className: cx("nz-drawer-close", className),
+		"data-slot": "drawer-close",
+		render: toRenderFn(render ?? (children === void 0 ? closeIcon(rest["aria-label"] ?? labels?.close ?? "Close") : void 0), "button"),
+		children
+	});
+}
+function closeIcon(label) {
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		className: "nz-icon-button nz-hit-target",
+		"data-variant": "tertiary",
+		"data-size": "md",
+		"aria-label": label,
+		children: /* @__PURE__ */ jsx("span", {
+			className: "nz-icon-button-icon",
+			"data-slot": "icon-button-icon",
+			"aria-hidden": "true",
+			children: /* @__PURE__ */ jsx(CloseGlyph, {})
+		})
+	});
+}
+//#endregion
+export { DrawerBody, DrawerClose, DrawerDescription, DrawerFooter, DrawerHeader, DrawerPopup, DrawerRoot, DrawerTitle, DrawerTrigger };

package/dist/drawer/drawer.contract.d.ts

@@ -0,0 +1,98 @@
+import { RenderProp } from "../contracts/render.js";
+import { ChangeDetails, OpenReason } from "../contracts/details.js";
+import { ReturnFocusTarget } from "../_internal/overlay.js";
+import "../dialog/dialog.contract.js";
+import { ComponentPropsWithRef, ReactNode } from "react";
+//#region src/drawer/drawer.contract.d.ts
+/**
+ * The edge the drawer slides in from, in logical terms: `start` and `end` follow the writing direction
+ * (`end` is the right edge in a left-to-right page, as Figma draws the Drawer); `bottom` is the sheet,
+ * as AppShell's "More" sheet below 640 px.
+ */
+export type DrawerSide = "start" | "end" | "bottom";
+export type DrawerTitleLevel = 2 | 3 | 4 | 5 | 6;
+/**
+ * Strings the Drawer renders (§9.3 rule 7, §16.4). `close` is the accessible name of the default
+ * `Drawer.Close` (an IconButton showing the close glyph), set through that part's `labels`.
+ * Engine-owned with React Aria (not overridable): `dismiss`, the visually hidden "Dismiss" button
+ * rendered inside the drawer.
+ */
+export interface DrawerLabels {
+  /** @default 'Close' */
+  close: string;
+  dismiss: string;
+}
+export interface DrawerRootProps {
+  open?: boolean;
+  defaultOpen?: boolean;
+  /** `details.reason` is `'unknown'` with React Aria, which reports no cause. */
+  onOpenChange?: (open: boolean, details: ChangeDetails<OpenReason>) => void;
+  /**
+   * Where focus goes when the drawer closes (§12.2 Focus return), as `Dialog.Root`'s: the trigger,
+   * else the trigger of the overlay it was opened from, else `<body>` with a development warning; an
+   * element ref or a function returning one goes first; `false` leaves focus alone.
+   * @default true
+   */
+  returnFocus?: ReturnFocusTarget;
+  children: ReactNode;
+}
+export interface DrawerTriggerState {
+  open: boolean;
+  pressed: boolean;
+  focusVisible: boolean;
+  disabled: boolean;
+}
+export interface DrawerPopupState {
+  entering: boolean;
+  exiting: boolean;
+}
+export interface DrawerCloseState {
+  pressed: boolean;
+  focusVisible: boolean;
+  disabled: boolean;
+}
+export interface DrawerTriggerProps extends Omit<ComponentPropsWithRef<"button">, "children"> {
+  /** Must render a `<button>`, for example `render={<Button>View order</Button>}`. */
+  render?: RenderProp<DrawerTriggerState>;
+  children?: ReactNode;
+}
+export interface DrawerPopupProps extends Omit<ComponentPropsWithRef<"div">, "children" | "role"> {
+  /** The edge it slides in from. @default 'end' */
+  side?: DrawerSide;
+  /** The scrim element. Defaults to on for the root modal and off when opened from another modal. */
+  backdrop?: boolean;
+  /** Portal container. Defaults to the parent overlay, else `document.body` (§12.1 L2). */
+  container?: Element | null;
+  children: ReactNode;
+}
+export interface DrawerHeaderProps extends ComponentPropsWithRef<"div"> {
+  render?: RenderProp<Record<string, never>>;
+}
+export interface DrawerTitleProps extends Omit<ComponentPropsWithRef<"h2">, "id"> {
+  /** @default 2 */
+  level?: DrawerTitleLevel;
+  render?: RenderProp<Record<string, never>>;
+}
+export interface DrawerDescriptionProps extends Omit<ComponentPropsWithRef<"p">, "id"> {
+  render?: RenderProp<Record<string, never>>;
+}
+export interface DrawerBodyProps extends ComponentPropsWithRef<"div"> {
+  render?: RenderProp<Record<string, never>>;
+}
+export interface DrawerFooterProps extends ComponentPropsWithRef<"div"> {
+  render?: RenderProp<Record<string, never>>;
+}
+export interface DrawerCloseProps extends Omit<ComponentPropsWithRef<"button">, "children"> {
+  /**
+   * Must render a `<button>`, for example `render={<Button>Cancel</Button>}`. With neither `render`
+   * nor `children`, the part is an IconButton showing the close glyph, named by `labels.close`, which
+   * sits in the header's end corner when it is a direct child of `Drawer.Popup`.
+   */
+  render?: RenderProp<DrawerCloseState>;
+  /** Text content, rendered in a plain `<button>`; leave it out for the default IconButton. */
+  children?: ReactNode;
+  /** The default IconButton's accessible name; an `aria-label` you pass wins. */
+  labels?: Partial<Pick<DrawerLabels, "close">>;
+}
+//#endregion
+export type { OpenReason };

package/dist/drawer/drawer.parts.d.ts

@@ -0,0 +1,6 @@
+import { DrawerBody, DrawerClose, DrawerDescription, DrawerFooter, DrawerHeader, DrawerPopup, DrawerRoot, DrawerTitle, DrawerTrigger } from "./drawer.client.js";
+declare namespace drawer_parts_d_exports {
+  export { DrawerBody as Body, DrawerClose as Close, DrawerDescription as Description, DrawerFooter as Footer, DrawerHeader as Header, DrawerPopup as Popup, DrawerRoot as Root, DrawerTitle as Title, DrawerTrigger as Trigger };
+}
+//#endregion
+export { DrawerBody as Body, DrawerClose as Close, DrawerDescription as Description, DrawerFooter as Footer, DrawerHeader as Header, DrawerPopup as Popup, DrawerRoot as Root, DrawerTitle as Title, DrawerTrigger as Trigger, drawer_parts_d_exports };

package/dist/drawer/drawer.parts.js

@@ -0,0 +1,16 @@
+import { __exportAll } from "../_virtual/_rolldown/runtime.js";
+import { DrawerBody, DrawerClose, DrawerDescription, DrawerFooter, DrawerHeader, DrawerPopup, DrawerRoot, DrawerTitle, DrawerTrigger } from "./drawer.client.js";
+//#region src/drawer/drawer.parts.ts
+var drawer_parts_exports = /* @__PURE__ */ __exportAll({
+	Body: () => DrawerBody,
+	Close: () => DrawerClose,
+	Description: () => DrawerDescription,
+	Footer: () => DrawerFooter,
+	Header: () => DrawerHeader,
+	Popup: () => DrawerPopup,
+	Root: () => DrawerRoot,
+	Title: () => DrawerTitle,
+	Trigger: () => DrawerTrigger
+});
+//#endregion
+export { DrawerBody as Body, DrawerClose as Close, DrawerDescription as Description, DrawerFooter as Footer, DrawerHeader as Header, DrawerPopup as Popup, DrawerRoot as Root, DrawerTitle as Title, DrawerTrigger as Trigger, drawer_parts_exports };

package/dist/drawer/index.d.ts

@@ -0,0 +1,5 @@
+import { OpenReason } from "../contracts/details.js";
+import { DrawerBodyProps, DrawerCloseProps, DrawerCloseState, DrawerDescriptionProps, DrawerFooterProps, DrawerHeaderProps, DrawerLabels, DrawerPopupProps, DrawerPopupState, DrawerRootProps, DrawerSide, DrawerTitleLevel, DrawerTitleProps, DrawerTriggerProps, DrawerTriggerState } from "./drawer.contract.js";
+import { DrawerBody, DrawerClose, DrawerDescription, DrawerFooter, DrawerHeader, DrawerPopup, DrawerRoot, DrawerTitle, DrawerTrigger } from "./drawer.client.js";
+import { drawer_parts_d_exports } from "./drawer.parts.js";
+export { drawer_parts_d_exports as Drawer, DrawerBody, type DrawerBodyProps, DrawerClose, type DrawerCloseProps, type DrawerCloseState, DrawerDescription, type DrawerDescriptionProps, DrawerFooter, type DrawerFooterProps, DrawerHeader, type DrawerHeaderProps, type DrawerLabels, DrawerPopup, type DrawerPopupProps, type DrawerPopupState, DrawerRoot, type DrawerRootProps, type DrawerSide, DrawerTitle, type DrawerTitleLevel, type DrawerTitleProps, DrawerTrigger, type DrawerTriggerProps, type DrawerTriggerState, type OpenReason };

package/dist/drawer/index.js

@@ -0,0 +1,3 @@
+import { DrawerBody, DrawerClose, DrawerDescription, DrawerFooter, DrawerHeader, DrawerPopup, DrawerRoot, DrawerTitle, DrawerTrigger } from "./drawer.client.js";
+import { drawer_parts_exports } from "./drawer.parts.js";
+export { drawer_parts_exports as Drawer, DrawerBody, DrawerClose, DrawerDescription, DrawerFooter, DrawerHeader, DrawerPopup, DrawerRoot, DrawerTitle, DrawerTrigger };

package/dist/field/field-scope.client.js

@@ -6,12 +6,19 @@ import { createContext, use, useEffect, useLayoutEffect, useMemo, useRef, useSta
 import { jsx } from "react/jsx-runtime";
 //#region src/field/field-scope.client.tsx
 const FieldContext = createContext(null);
+/**
+* Internal: what `Form` (form/form.client.tsx) provides, its presented errors by Field `name` (one
+* message each). It lives here, not in the form folder, so the Field's module graph gains no client
+* module; the form leaf imports it.
+*/
+const FormScope = createContext(null);
 /** Internal: rendered only by `Field`. Every prop is serialisable. */
 function FieldScope({ anatomy, name, messages, children }) {
 	const [native, setNative] = useState(null);
 	const [toFocus, setToFocus] = useState(null);
 	const { ids, label, description, required, disabled, readOnly, validateOn } = anatomy;
-	const error = presented(anatomy.error) ? anatomy.error : native;
+	const formError = name === void 0 ? void 0 : use(FormScope)?.get(name);
+	const error = presented(anatomy.error) ? anatomy.error : formError ?? native;
 	const invalid = presented(error);
 	const region = useRef(null);
 	const [said, say] = useState("");
@@ -202,4 +209,4 @@ function isValidatable(element) {
 	return "validity" in element && "willValidate" in element;
 }
 //#endregion
-export { FieldScope, useFieldControl };
+export { FieldScope, FormScope, useFieldControl };

package/dist/file-upload/file-upload.client.d.ts

@@ -0,0 +1,9 @@
+import { FileUploadProps } from "./file-upload.contract.js";
+import { JSX } from "react";
+//#region src/file-upload/file-upload.client.d.ts
+/**
+ * `className` and `style` go on the root; every other input prop, `ref` included, goes on the
+ * native `<input type="file">`.
+ */
+export declare function FileUpload({ id, name, accept, multiple, maxSize, disabled, required, invalid, hint, icon, items, onFilesChange, onReject, onRemove, onRetry, onCancel, labels: labelsProp, locale, className, style, "aria-invalid": ariaInvalid, "aria-describedby": describedByProp, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...rest }: FileUploadProps): JSX.Element;
+//#endregion