@slotted/react 0.1.0-beta.1 → 0.1.0-beta.10

package/dist/collapsible-B_UjYE2f.js

@@ -0,0 +1,222 @@
+import { r as e } from "./accordion-n5D6mcmS.js";
+import { n as t, t as n } from "./icon-DjqSEQ-o.js";
+import { keyedProps as r } from "@slotted/core/selector-key";
+import { createControllable as i } from "@slotted/core/state";
+import { createContext as a, useContext as o, useEffect as s, useId as c, useRef as l, useState as u } from "react";
+import { Fragment as d, jsx as f, jsxs as p } from "react/jsx-runtime";
+//#region src/collapsible/collapsible-defaults.tsx
+var m = a({
+	indicator: "chevron",
+	level: "none",
+	mount: "eager",
+	size: "md",
+	togglePlacement: "end",
+	truncate: !1,
+	variant: "plain"
+});
+function h() {
+	return o(m);
+}
+function g({ children: e, ...t }) {
+	let n = h();
+	return /* @__PURE__ */ f(m.Provider, {
+		value: {
+			indicator: t.indicator ?? n.indicator,
+			level: t.level ?? n.level,
+			mount: t.mount ?? n.mount,
+			size: t.size ?? n.size,
+			togglePlacement: t.togglePlacement ?? n.togglePlacement,
+			truncate: t.truncate ?? n.truncate,
+			variant: t.variant ?? n.variant
+		},
+		children: e
+	});
+}
+//#endregion
+//#region src/collapsible/collapsible.tsx
+var _ = "[data-part=\"trigger\"]", v = a(void 0);
+function y() {
+	let e = o(v);
+	if (e === void 0) throw Error("CollapsibleHeader, CollapsibleTrigger, CollapsibleActions and CollapsiblePanel must be rendered inside Collapsible.");
+	return e;
+}
+function b({ children: t, className: n, defaultOpen: a, disabled: o, indicator: s, level: d, loading: p, mount: m, onOpenChange: g, open: _, region: y, ref: b, render: x, size: S, style: C, togglePlacement: w, truncate: T, value: E, variant: D, ...O }) {
+	let k = h(), A = e(), j = c(), M = `${j}item`, N = E ?? M, [P, F] = u(a ?? !1), I = A?.isOpen(N), L = _ ?? I ?? P, R = (o ?? A?.disabled) === !0, z = s ?? A?.indicator ?? k.indicator, B = d ?? A?.level ?? k.level, V = m ?? A?.mount ?? k.mount, H = S ?? A?.size ?? k.size, U = w ?? A?.togglePlacement ?? k.togglePlacement, W = (T ?? A?.truncate ?? k.truncate) === !0, G = D ?? A?.variant ?? k.variant, K = l(L);
+	L && (K.current = !0);
+	function q(e, t, n) {
+		if (e === L) return;
+		let r = !1, a = i({
+			controlled: _ ?? I,
+			initial: L,
+			onRequest: (e) => {
+				r = e.cancelled, g?.(e.value, e);
+			}
+		}).request(e, t, n);
+		if (!r) {
+			if (A !== void 0) {
+				A.toggle(N, t, n);
+				return;
+			}
+			a && F(e);
+		}
+	}
+	let J = {
+		disabled: R,
+		held: A?.isHeld(N) ?? !1,
+		ids: {
+			panelId: `${j}panel`,
+			triggerId: `${j}trigger`
+		},
+		indicator: z,
+		level: B,
+		loading: p === !0,
+		mount: V,
+		open: L,
+		region: y === !0,
+		seen: K.current,
+		toggle: q
+	}, Y = r({
+		...O,
+		children: t,
+		className: n,
+		...R ? { "data-disabled": "" } : {},
+		"data-indicator": z,
+		...p === !0 ? { "data-loading": "" } : {},
+		"data-mount": V,
+		...L ? { "data-open": "" } : {},
+		"data-part": "root",
+		"data-size": H,
+		"data-toggle-placement": U,
+		...W ? { "data-truncate": "" } : {},
+		"data-ui": "collapsible",
+		"data-value": N,
+		"data-variant": G,
+		style: C
+	});
+	return /* @__PURE__ */ f(v.Provider, {
+		value: J,
+		children: x === void 0 ? /* @__PURE__ */ f("div", {
+			...Y,
+			ref: b
+		}) : x(Y)
+	});
+}
+//#endregion
+//#region src/collapsible/collapsible-parts.tsx
+function x(e) {
+	return e.detail === 0 ? "keyboard" : "pointer";
+}
+function S({ children: e, className: t, ref: n, render: i, style: a, ...o }) {
+	let { level: s } = y(), c = r({
+		...o,
+		children: e,
+		className: t,
+		"data-part": "header",
+		style: a
+	});
+	if (i !== void 0) return i(c);
+	let l = s === "none" ? "div" : `h${s}`;
+	return /* @__PURE__ */ f(l, {
+		...c,
+		ref: n
+	});
+}
+function C({ children: e, className: i, description: a, disabled: o, onClick: s, ref: c, render: l, style: u, ...m }) {
+	let { disabled: h, held: g, ids: _, indicator: v, open: b, toggle: S } = y(), C = o ?? h, w = "chevron-down";
+	v === "plus-minus" && (w = b ? "minus" : "plus");
+	let T = r({
+		...m,
+		"aria-controls": _.panelId,
+		...g ? { "aria-disabled": "true" } : {},
+		"aria-expanded": b,
+		children: /* @__PURE__ */ p(d, { children: [
+			v === "none" ? null : /* @__PURE__ */ f("span", {
+				"aria-hidden": "true",
+				"data-part": "indicator",
+				"data-part-indicator": "",
+				children: /* @__PURE__ */ f(n, { children: /* @__PURE__ */ f(t, { name: w }) })
+			}),
+			/* @__PURE__ */ f("span", {
+				"data-part": "label",
+				"data-part-label": "",
+				children: e
+			}),
+			a === void 0 ? null : /* @__PURE__ */ f("span", {
+				"data-part": "description",
+				"data-part-description": "",
+				children: a
+			})
+		] }),
+		className: i,
+		"data-part": "trigger",
+		disabled: C,
+		id: _.triggerId,
+		onClick: (e) => {
+			s?.(e), !(e.defaultPrevented || g) && S(!b, x(e), e);
+		},
+		style: u,
+		type: "button"
+	});
+	return l === void 0 ? /* @__PURE__ */ f("button", {
+		...T,
+		ref: c
+	}) : l(T);
+}
+function w({ children: e, className: t, ref: n, render: i, style: a, ...o }) {
+	let s = r({
+		...o,
+		children: e,
+		className: t,
+		"data-part": "actions",
+		style: a
+	});
+	return i === void 0 ? /* @__PURE__ */ f("div", {
+		...s,
+		ref: n
+	}) : i(s);
+}
+function T({ children: e, className: t, ref: n, render: i, style: a, ...o }) {
+	let { ids: c, loading: u, mount: d, open: p, region: m, seen: h, toggle: g } = y(), _ = l(null), v = d === "until-found";
+	s(() => {
+		let e = _.current;
+		if (e !== null) {
+			if (p) {
+				e.removeAttribute("hidden"), e.removeAttribute("inert");
+				return;
+			}
+			if (v) {
+				e.removeAttribute("inert"), e.setAttribute("hidden", "until-found");
+				let t = () => g(!0, "programmatic", void 0);
+				return e.addEventListener("beforematch", t), () => e.removeEventListener("beforematch", t);
+			}
+			e.removeAttribute("hidden"), e.setAttribute("inert", "");
+		}
+	}, [
+		p,
+		g,
+		v
+	]);
+	let b = d !== "active" && d !== "lazy" || p || d === "lazy" && h, x = r({
+		...o,
+		"aria-labelledby": c.triggerId,
+		...u ? { "aria-busy": !0 } : {},
+		children: b ? /* @__PURE__ */ f("div", {
+			"data-part": "content",
+			"data-part-content": "",
+			children: e
+		}) : null,
+		className: t,
+		"data-part": "panel",
+		id: c.panelId,
+		...m ? { role: "region" } : {},
+		style: a
+	});
+	return i === void 0 ? /* @__PURE__ */ f("div", {
+		...x,
+		ref: (e) => {
+			_.current = e, typeof n == "function" ? n(e) : n != null && (n.current = e);
+		}
+	}) : i(x);
+}
+//#endregion
+export { _ as a, g as c, C as i, h as l, S as n, b as o, T as r, y as s, w as t };

package/dist/collapsible.js

@@ -1,2 +1,2 @@
-import { a as e, c as t, i as n, l as r, n as i, o as a, r as o, s, t as c } from "./collapsible-CGo49NNW.js";
+import { a as e, c as t, i as n, l as r, n as i, o as a, r as o, s, t as c } from "./collapsible-B_UjYE2f.js";
 export { e as COLLAPSIBLE_TRIGGER_SELECTOR, a as Collapsible, c as CollapsibleActions, t as CollapsibleDefaultsProvider, i as CollapsibleHeader, o as CollapsiblePanel, n as CollapsibleTrigger, s as useCollapsible, r as useCollapsibleDefaults };