@selectwin/kit 0.1.203 → 0.1.204

package/dist/SelectActionList.d.ts

@@ -1,10 +1,21 @@
-import { ReactNode, ComponentPropsWithoutRef } from 'react';
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
 export interface SelectAction {
     content: string;
     onAction?: () => void;
     icon?: ReactNode;
     destructive?: boolean;
     disabled?: boolean;
+    /** 0.1.204: um endereço do app: o item é o `<Link>` do roteador (react-router-dom). */
+    to?: string;
+    /** 0.1.204: um endereço fora do app ou um arquivo: o item é um `<a>`. */
+    href?: string;
+    /**
+     * 0.1.204: abre em outra aba, com a seta de "abre fora". Por padrão, sim para o `href` absoluto (`https:`, `mailto:`,
+     * `tel:`), como no SelectMenuLink.
+     */
+    external?: boolean;
+    /** 0.1.204: baixa o arquivo em vez de abrir: o nome dele, ou `true` para o nome que o servidor der. */
+    download?: boolean | string;
 }
 export interface SelectActionSection {
     title?: string;
@@ -15,8 +26,13 @@ type SelectActionListOwnProps = {
     sections?: SelectActionSection[];
     /** Fired after any item's action (e.g. to close the surrounding popover). */
     onAction?: () => void;
+    /**
+     * 0.1.204: o menu fecha sem uma ação: o Tab sai dele. O popover em volta devolve o foco ao botão que o abriu, e o Tab
+     * segue dali, como pede o padrão do menu.
+     */
+    onClose?: () => void;
     autoFocus?: boolean;
 };
 export type SelectActionListProps = SelectActionListOwnProps & Omit<ComponentPropsWithoutRef<'div'>, keyof SelectActionListOwnProps>;
-export declare function SelectActionList({ items, sections, onAction, autoFocus, className, ...rest }: SelectActionListProps): import("react").JSX.Element;
+export declare function SelectActionList({ items, sections, onAction, onClose, autoFocus, className, onKeyDown: onKeyDownProp, ...rest }: SelectActionListProps): import("react").JSX.Element;
 export {};

package/dist/SelectActionList.js

@@ -1,55 +1,94 @@
-import { useEffect as e, useRef as t } from "react";
-import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { safeHref as e } from "./internal/safeHref.js";
+import { ExternalLinkIcon as t } from "./icons.js";
+import { useEffect as n, useRef as r } from "react";
+import { Fragment as i, jsx as a, jsxs as o } from "react/jsx-runtime";
+import { Link as s } from "react-router-dom";
 //#region src/SelectActionList.tsx
-function i({ items: i, sections: a, onAction: o, autoFocus: s = !0, className: c, ...l }) {
-	let u = t(null), d = a ?? (i ? [{ items: i }] : []);
-	e(() => {
+var c = "[role=\"menuitem\"]:not(:disabled)";
+function l({ action: n, onDone: r }) {
+	let c = `select-menu__item${n.destructive ? " select-menu__item--critical" : ""}`, l = () => {
 		var e;
-		s && ((e = u.current) == null || (e = e.querySelector("[role=\"menuitem\"]:not(:disabled)")) == null || e.focus({ preventScroll: !0 }));
-	}, [s]);
-	let f = (e) => {
-		let t = u.current;
+		(e = n.onAction) == null || e.call(n), r == null || r();
+	}, u = /* @__PURE__ */ o(i, { children: [n.icon && /* @__PURE__ */ a("span", {
+		className: "select-menu__icon",
+		children: n.icon
+	}), /* @__PURE__ */ a("span", {
+		className: "select-menu__label",
+		children: n.content
+	})] }), d = n.to ?? n.href, f = e(d);
+	if (d !== void 0 && f !== void 0 && !n.disabled) {
+		let e = n.external ?? (n.to === void 0 && /^(https?:|mailto:|tel:)/i.test(f)), r = {
+			role: "menuitem",
+			tabIndex: -1,
+			className: c,
+			onClick: l,
+			target: e ? "_blank" : void 0,
+			rel: e ? "noreferrer" : void 0,
+			download: n.download === !0 ? "" : n.download || void 0
+		}, i = e ? /* @__PURE__ */ a("span", {
+			className: "select-menu__trailing",
+			children: /* @__PURE__ */ a(t, {})
+		}) : null;
+		return n.to === void 0 ? /* @__PURE__ */ o("a", {
+			href: f,
+			...r,
+			children: [u, i]
+		}) : /* @__PURE__ */ o(s, {
+			to: f,
+			...r,
+			children: [u, i]
+		});
+	}
+	return /* @__PURE__ */ a("button", {
+		type: "button",
+		role: "menuitem",
+		tabIndex: -1,
+		disabled: n.disabled || d !== void 0,
+		className: c,
+		onClick: l,
+		children: u
+	});
+}
+function u({ items: e, sections: t, onAction: i, onClose: s, autoFocus: u = !0, className: d, onKeyDown: f, ...p }) {
+	let m = r(null), h = t ?? (e ? [{ items: e }] : []);
+	n(() => {
+		var e;
+		u && ((e = m.current) == null || (e = e.querySelector(c)) == null || e.focus({ preventScroll: !0 }));
+	}, [u]);
+	let g = (e) => {
+		if (f == null || f(e), e.defaultPrevented) return;
+		let t = m.current;
 		if (!t) return;
-		let n = Array.from(t.querySelectorAll("[role=\"menuitem\"]:not(:disabled)"));
+		if (e.key === "Tab") {
+			s == null || s();
+			return;
+		}
+		let n = Array.from(t.querySelectorAll(c));
 		if (n.length === 0) return;
-		let r = n.indexOf(document.activeElement);
-		e.key === "ArrowDown" ? (e.preventDefault(), (n[(r + 1) % n.length] ?? n[0]).focus()) : e.key === "ArrowUp" ? (e.preventDefault(), (n[(r - 1 + n.length) % n.length] ?? n[0]).focus()) : e.key === "Home" ? (e.preventDefault(), n[0].focus()) : e.key === "End" && (e.preventDefault(), n[n.length - 1].focus());
+		let r = document.activeElement, i = r ? n.indexOf(r) : -1;
+		e.key === " " && r instanceof HTMLAnchorElement && i !== -1 ? (e.preventDefault(), r.click()) : e.key === "ArrowDown" ? (e.preventDefault(), (n[(i + 1) % n.length] ?? n[0]).focus()) : e.key === "ArrowUp" ? (e.preventDefault(), (n[(i - 1 + n.length) % n.length] ?? n[0]).focus()) : e.key === "Home" ? (e.preventDefault(), n[0].focus()) : e.key === "End" && (e.preventDefault(), n[n.length - 1].focus());
 	};
-	return /* @__PURE__ */ n("div", {
-		...l,
-		className: `select-actionlist${c ? " " + c : ""}`,
+	return /* @__PURE__ */ a("div", {
+		...p,
+		className: `select-actionlist${d ? " " + d : ""}`,
 		role: "menu",
-		ref: u,
-		onKeyDown: f,
-		children: d.map((e, t) => /* @__PURE__ */ r("div", {
+		ref: m,
+		onKeyDown: g,
+		children: h.map((e, t) => /* @__PURE__ */ o("div", {
 			className: "select-actionlist__section",
 			role: "group",
 			"aria-label": e.title,
-			children: [e.title && /* @__PURE__ */ n("div", {
+			children: [e.title && /* @__PURE__ */ a("div", {
 				className: "select-actionlist__title",
 				children: e.title
-			}), e.items.map((e, t) => /* @__PURE__ */ r("button", {
-				type: "button",
-				role: "menuitem",
-				tabIndex: -1,
-				disabled: e.disabled,
-				className: `select-menu__item${e.destructive ? " select-menu__item--critical" : ""}`,
-				onClick: () => {
-					var t;
-					(t = e.onAction) == null || t.call(e), o == null || o();
-				},
-				children: [e.icon && /* @__PURE__ */ n("span", {
-					className: "select-menu__icon",
-					children: e.icon
-				}), /* @__PURE__ */ n("span", {
-					className: "select-menu__label",
-					children: e.content
-				})]
+			}), e.items.map((e, t) => /* @__PURE__ */ a(l, {
+				action: e,
+				onDone: i
 			}, t))]
 		}, t))
 	});
 }
 //#endregion
-export { i as SelectActionList };
+export { u as SelectActionList };
 
 //# sourceMappingURL=SelectActionList.js.map

package/dist/SelectActionMenu.d.ts

@@ -1,6 +1,8 @@
-import { SelectAction } from './SelectActionList';
-export declare function SelectActionMenu({ items, label: labelProp, disabled, }: {
-    items: SelectAction[];
+import { SelectAction, SelectActionSection } from './SelectActionList';
+export declare function SelectActionMenu({ items, sections, label: labelProp, disabled, }: {
+    items?: SelectAction[];
+    /** 0.1.204: os grupos, separados por um traço (no lugar de `items`). */
+    sections?: SelectActionSection[];
     label?: string;
     disabled?: boolean;
 }): import("react").JSX.Element;

package/dist/SelectActionMenu.js

@@ -3,31 +3,38 @@ import { ChevronDownIcon as t } from "./icons.js";
 import { useSelectMessages as n } from "./SelectLocale.js";
 import { SelectPopover as r } from "./SelectPopover.js";
 import { SelectActionList as i } from "./SelectActionList.js";
-import { useState as a } from "react";
-import { jsx as o } from "react/jsx-runtime";
+import { useId as a, useState as o } from "react";
+import { jsx as s } from "react/jsx-runtime";
 //#region src/SelectActionMenu.tsx
-function s({ items: s, label: c, disabled: l }) {
-	let u = n().common.actions, d = c ?? u, [f, p] = a(!1);
-	return /* @__PURE__ */ o(r, {
-		active: f,
-		onClose: () => p(!1),
+function c({ items: c, sections: l, label: u, disabled: d }) {
+	let f = n().common.actions, p = u ?? f, [m, h] = o(!1), g = a(), _ = () => h(!1);
+	return /* @__PURE__ */ s(r, {
+		active: m,
+		onClose: _,
 		placement: "bottom-end",
-		activator: /* @__PURE__ */ o(e, {
+		activator: /* @__PURE__ */ s(e, {
 			variant: "secondary",
 			size: "sm",
 			inline: !0,
-			trailingIcon: /* @__PURE__ */ o(t, {}),
-			disabled: l,
-			onClick: () => p((e) => !e),
-			children: d
+			trailingIcon: /* @__PURE__ */ s(t, {}),
+			disabled: d,
+			"aria-haspopup": "menu",
+			"aria-expanded": m,
+			"aria-controls": m ? g : void 0,
+			onClick: () => h((e) => !e),
+			children: p
 		}),
-		children: /* @__PURE__ */ o(i, {
-			items: s,
-			onAction: () => p(!1)
+		children: /* @__PURE__ */ s(i, {
+			id: g,
+			"aria-label": p,
+			items: c,
+			sections: l,
+			onAction: _,
+			onClose: _
 		})
 	});
 }
 //#endregion
-export { s as SelectActionMenu };
+export { c as SelectActionMenu };
 
 //# sourceMappingURL=SelectActionMenu.js.map

package/dist/SelectPopover.js

@@ -7,95 +7,98 @@ import { useCallback as s, useEffect as c, useLayoutEffect as l, useRef as u, us
 import { Fragment as f, jsx as p, jsxs as m } from "react/jsx-runtime";
 import { createPortal as h } from "react-dom";
 //#region src/SelectPopover.tsx
-var g = [];
-function _({ active: _, onClose: v, activator: y, children: b, placement: x = "bottom-start", gap: S = 6, role: C, trapFocus: w = !1, matchWidth: T = !1, theme: E }) {
-	let D = u(null), O = u(null), k = u(null), [A, j] = d(null), [M, N] = d("light"), [P] = d(() => ({})), F = a(), I = s(() => {
+var g = [], _ = "button:not(:disabled), [href], input:not(:disabled), select:not(:disabled), textarea:not(:disabled), [tabindex]:not([tabindex=\"-1\"])";
+function v({ active: v, onClose: y, activator: b, children: x, placement: S = "bottom-start", gap: C = 6, role: w, trapFocus: T = !1, matchWidth: E = !1, theme: D }) {
+	let O = u(null), k = u(null), A = u(null), [j, M] = d(null), [N, P] = d("light"), [F] = d(() => ({})), I = a(), L = s(() => {
 		var t;
-		let n = ((t = D.current) == null ? void 0 : t.firstElementChild) ?? D.current, r = O.current;
+		let n = ((t = O.current) == null ? void 0 : t.firstElementChild) ?? O.current, r = k.current;
 		if (!n || !r) return;
 		let i = n.getBoundingClientRect(), a = e(i, {
 			width: r.offsetWidth,
 			height: r.offsetHeight
-		}, x, S);
-		j({
+		}, S, C);
+		M({
 			top: a.top,
 			left: a.left,
-			minWidth: T ? i.width : void 0
+			minWidth: E ? i.width : void 0
 		});
 	}, [
-		x,
 		S,
-		T
+		C,
+		E
 	]);
 	return l(() => {
-		if (!_) {
-			j(null);
+		if (!v) {
+			M(null);
 			return;
 		}
-		N(o(D.current)), I();
-	}, [_, I]), c(() => {
-		if (_) return k.current = document.activeElement, () => {
+		P(o(O.current)), L();
+	}, [v, L]), l(() => {
+		var e, t;
+		if (!v) return;
+		let n = document.activeElement, r = !n || n === document.body || !!((e = k.current) != null && e.contains(n));
+		return A.current = r ? ((t = O.current) == null ? void 0 : t.querySelector(_)) ?? n : n, () => {
 			var e, t;
-			return (e = k.current) == null || (t = e.focus) == null ? void 0 : t.call(e, { preventScroll: !0 });
+			return (e = A.current) == null || (t = e.focus) == null ? void 0 : t.call(e, { preventScroll: !0 });
 		};
-	}, [_]), c(() => {
-		if (!_) return;
-		let e = O.current;
+	}, [v]), c(() => {
+		if (!v) return;
+		let e = k.current;
 		if (e) return g.push(e), () => {
 			let t = g.lastIndexOf(e);
 			t !== -1 && g.splice(t, 1);
 		};
-	}, [_]), c(() => {
-		if (!_) return;
-		let e = () => I();
+	}, [v]), c(() => {
+		if (!v) return;
+		let e = () => L();
 		return window.addEventListener("scroll", e, !0), window.addEventListener("resize", e), () => {
 			window.removeEventListener("scroll", e, !0), window.removeEventListener("resize", e);
 		};
-	}, [_, I]), c(() => {
-		if (!_) return;
-		let e = i(P, F), t = (e) => {
+	}, [v, L]), c(() => {
+		if (!v) return;
+		let e = i(F, I), t = (e) => {
 			var t, n;
 			let r = e.target;
-			(t = O.current) != null && t.contains(r) || (n = D.current) != null && n.contains(r) || g.length && g[g.length - 1] !== O.current || v();
+			(t = k.current) != null && t.contains(r) || (n = O.current) != null && n.contains(r) || g.length && g[g.length - 1] !== k.current || y();
 		}, n = (e) => {
-			e.key === "Escape" && r(P) && (e.stopPropagation(), v());
+			e.key === "Escape" && r(F) && (e.stopPropagation(), y());
 		};
 		return document.addEventListener("mousedown", t, !0), document.addEventListener("keydown", n), () => {
 			e(), document.removeEventListener("mousedown", t, !0), document.removeEventListener("keydown", n);
 		};
 	}, [
-		_,
 		v,
-		P,
-		F
-	]), t(_ && w, O), /* @__PURE__ */ m(f, { children: [/* @__PURE__ */ p("span", {
+		y,
+		F,
+		I
+	]), t(v && T, k), /* @__PURE__ */ m(f, { children: [/* @__PURE__ */ p("span", {
 		className: "select-pop__trigger",
-		ref: D,
-		children: y
-	}), _ && h(/* @__PURE__ */ p("div", {
 		ref: O,
+		children: b
+	}), v && h(/* @__PURE__ */ p("div", {
+		ref: k,
 		className: "select select-pop__panel",
-		"data-theme": E ?? M,
-		role: C,
+		"data-theme": D ?? N,
+		role: w,
 		tabIndex: -1,
-		style: A ? {
+		style: j ? {
 			position: "fixed",
-			top: A.top,
-			left: A.left,
-			minWidth: A.minWidth
+			top: j.top,
+			left: j.left,
+			minWidth: j.minWidth
 		} : {
 			position: "fixed",
 			top: 0,
 			left: 0,
-			visibility: "hidden"
+			opacity: 0
 		},
 		children: /* @__PURE__ */ p(n, {
-			value: P,
-			children: b
+			value: F,
+			children: x
 		})
 	}), document.body)] });
 }
 //#endregion
-export { _ as SelectPopover };
+export { v as SelectPopover };
 
 //# sourceMappingURL=SelectPopover.js.map

package/dist/SelectRowActions.d.ts

@@ -1,12 +1,9 @@
-import { ReactNode } from 'react';
-export interface SelectRowAction {
-    content: string;
-    onAction?: () => void;
-    icon?: ReactNode;
-    destructive?: boolean;
-    disabled?: boolean;
-}
-export declare function SelectRowActions({ actions, label: labelProp }: {
-    actions: SelectRowAction[];
+import { SelectAction, SelectActionSection } from './SelectActionList';
+/** O item do menu da linha: o mesmo do SelectActionList (0.1.204: também o link). */
+export type SelectRowAction = SelectAction;
+export declare function SelectRowActions({ actions, sections, label: labelProp, }: {
+    actions?: SelectRowAction[];
+    /** 0.1.204: os grupos, separados por um traço (no lugar de `actions`). */
+    sections?: SelectActionSection[];
     label?: string;
 }): import("react").JSX.Element;

package/dist/SelectRowActions.js

@@ -3,30 +3,37 @@ import { useSelectMessages as t } from "./SelectLocale.js";
 import { SelectPopover as n } from "./SelectPopover.js";
 import { SelectActionList as r } from "./SelectActionList.js";
 import { SelectIconButton as i } from "./SelectIconButton.js";
-import { useState as a } from "react";
-import { jsx as o } from "react/jsx-runtime";
+import { useId as a, useState as o } from "react";
+import { jsx as s } from "react/jsx-runtime";
 //#region src/SelectRowActions.tsx
-function s({ actions: s, label: c }) {
-	let l = t().common.actions, u = c ?? l, [d, f] = a(!1);
-	return /* @__PURE__ */ o(n, {
-		active: d,
-		onClose: () => f(!1),
+function c({ actions: c, sections: l, label: u }) {
+	let d = t().common.actions, f = u ?? d, [p, m] = o(!1), h = a(), g = () => m(!1);
+	return /* @__PURE__ */ s(n, {
+		active: p,
+		onClose: g,
 		placement: "bottom-end",
-		activator: /* @__PURE__ */ o(i, {
-			icon: /* @__PURE__ */ o(e, {}),
-			label: u,
+		activator: /* @__PURE__ */ s(i, {
+			icon: /* @__PURE__ */ s(e, {}),
+			label: f,
 			size: "sm",
 			variant: "outline",
-			active: d,
-			onClick: () => f((e) => !e)
+			className: p ? "is-active" : void 0,
+			"aria-haspopup": "menu",
+			"aria-expanded": p,
+			"aria-controls": p ? h : void 0,
+			onClick: () => m((e) => !e)
 		}),
-		children: /* @__PURE__ */ o(r, {
-			items: s,
-			onAction: () => f(!1)
+		children: /* @__PURE__ */ s(r, {
+			id: h,
+			"aria-label": f,
+			items: c,
+			sections: l,
+			onAction: g,
+			onClose: g
 		})
 	});
 }
 //#endregion
-export { s as SelectRowActions };
+export { c as SelectRowActions };
 
 //# sourceMappingURL=SelectRowActions.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@selectwin/kit",
-  "version": "0.1.203",
+  "version": "0.1.204",
   "description": "Selectwin design-system kit — primitivos React, charts SVG e tokens (theme-aware, sem dependência de biblioteca de chart).",
   "type": "module",
   "repository": {