@plumile/ui 0.1.117 → 0.1.120

package/README.md

@@ -80,6 +80,8 @@ flat mental model.
 - badges, spinners, tags, skeletons
 - filter bars and drawers
 - backoffice data-table wrappers and list/detail visual helpers
+- `AdminSidebar` and `SidebarNavSection`, including optional sortable sections
+  for backoffice navigation groups
 
 For the complete export list, see [`src/index.ts`](./src/index.ts).
 

package/lib/esm/admin/organisms/admin_sidebar/AdminSidebar.js

@@ -49,7 +49,8 @@ var p = ({ header: p, search: m, footer: h, sections: g, isCollapsed: _, default
 						defaultCollapsed: e.defaultCollapsed,
 						isCollapsed: e.isCollapsed,
 						onCollapsedChange: e.onCollapsedChange,
-						collapsed: O
+						collapsed: O,
+						reorder: e.reorder
 					}, e.id))
 				}),
 				j

package/lib/esm/admin/organisms/admin_sidebar/AdminSidebar.js.map

@@ -1 +1 @@
-{"version":3,"file":"AdminSidebar.js","names":[],"sources":["../../../../../src/admin/organisms/admin_sidebar/AdminSidebar.tsx"],"sourcesContent":["import { useCallback, useState, type JSX, type ReactNode } from 'react';\nimport type { RecipeVariants } from '@vanilla-extract/recipes';\n\nimport { SidebarCollapseToggle } from '../../../backoffice/molecules/sidebar_collapse_toggle/SidebarCollapseToggle.js';\nimport {\n  SidebarNavSection,\n  type SidebarNavSectionItem,\n} from '../../../backoffice/molecules/sidebar_nav_section/SidebarNavSection.js';\n\nimport * as styles from './adminSidebar.css.js';\nimport { cx } from '../../../theme/tools.js';\n\nexport type AdminSidebarSection = {\n  id: string;\n  title?: ReactNode;\n  icon?: ReactNode;\n  items: readonly SidebarNavSectionItem[];\n  collapsible?: boolean;\n  defaultCollapsed?: boolean;\n  isCollapsed?: boolean;\n  onCollapsedChange?: (collapsed: boolean) => void;\n};\n\nexport type AdminSidebarProps = {\n  header?: ReactNode;\n  search?: ReactNode;\n  footer?: ReactNode;\n  sections: readonly AdminSidebarSection[];\n  isCollapsed?: boolean;\n  defaultCollapsed?: boolean;\n  onCollapsedChange?: (collapsed: boolean) => void;\n  collapseToggleLabel?: ReactNode;\n  expandToggleLabel?: ReactNode;\n  collapseShortcut?: readonly string[] | string;\n  navigationAriaLabel?: string;\n  hideCollapseToggle?: boolean;\n  className?: string;\n};\n\nexport const AdminSidebar = ({\n  header,\n  search,\n  footer,\n  sections,\n  isCollapsed,\n  defaultCollapsed = false,\n  onCollapsedChange,\n  collapseToggleLabel,\n  expandToggleLabel,\n  collapseShortcut,\n  navigationAriaLabel = 'Admin navigation',\n  hideCollapseToggle = false,\n  className,\n}: AdminSidebarProps): JSX.Element => {\n  const [uncontrolledCollapsed, setUncontrolledCollapsed] =\n    useState(defaultCollapsed);\n\n  const collapsed = isCollapsed ?? uncontrolledCollapsed;\n\n  const handleToggleCollapsed = useCallback(() => {\n    const next = !collapsed;\n    if (isCollapsed == null) {\n      setUncontrolledCollapsed(next);\n    }\n    onCollapsedChange?.(next);\n  }, [collapsed, isCollapsed, onCollapsedChange]);\n\n  let widthKey: NonNullable<\n    NonNullable<RecipeVariants<typeof styles.widthRecipe>>['state']\n  > = 'expanded';\n  if (collapsed) {\n    widthKey = 'collapsed';\n  }\n\n  let footerNode: JSX.Element | null = null;\n  if (footer != null) {\n    footerNode = <div className={styles.footer}>{footer}</div>;\n  }\n\n  return (\n    <aside\n      className={cx(\n        styles.container,\n        styles.widthRecipe({ state: widthKey }),\n        className,\n      )}\n    >\n      <div className={styles.inner}>\n        <div className={styles.header}>\n          {header}\n          {!hideCollapseToggle && (\n            <SidebarCollapseToggle\n              isCollapsed={collapsed}\n              onToggle={handleToggleCollapsed}\n              label={collapseToggleLabel}\n              expandLabel={expandToggleLabel}\n              shortcut={collapseShortcut}\n            />\n          )}\n        </div>\n\n        {search != null && <div className={styles.search}>{search}</div>}\n        <nav className={styles.sections} aria-label={navigationAriaLabel}>\n          {sections.map((section) => {\n            return (\n              <SidebarNavSection\n                key={section.id}\n                title={section.title}\n                icon={section.icon}\n                items={section.items}\n                collapsible={section.collapsible}\n                defaultCollapsed={section.defaultCollapsed}\n                isCollapsed={section.isCollapsed}\n                onCollapsedChange={section.onCollapsedChange}\n                collapsed={collapsed}\n              />\n            );\n          })}\n        </nav>\n\n        {footerNode}\n      </div>\n    </aside>\n  );\n};\n\nexport default AdminSidebar;\n"],"mappings":";;;;;;;AAuCA,IAAa,KAAgB,EAC3B,QAAA,GACA,QAAA,GACA,QAAA,GACA,UAAA,GACA,gBACA,sBAAmB,IACnB,sBACA,wBACA,sBACA,qBACA,yBAAsB,oBACtB,wBAAqB,IACrB,mBACoC;CACpC,IAAM,CAAC,GAAuB,KAC5B,EAAS,EAAiB,EAEtB,IAAY,KAAe,GAE3B,IAAwB,QAAkB;EAC9C,IAAM,IAAO,CAAC;EAId,AAHI,KACF,EAAyB,EAAK,EAEhC,IAAoB,EAAK;IACxB;EAAC;EAAW;EAAa;EAAkB,CAAC,EAE3C,IAEA;CACJ,AAAI,MACF,IAAW;CAGb,IAAI,IAAiC;CAKrC,OAJI,KAAU,SACZ,IAAa,kBAAC,OAAD;EAAK,WAAW;YAAgB;EAAa,CAAA,GAI1D,kBAAC,SAAD;EACE,WAAW,EACT,GACA,EAAmB,EAAE,OAAO,GAAU,CAAC,EACvC,EACD;YAED,kBAAC,OAAD;GAAK,WAAW;aAAhB;IACE,kBAAC,OAAD;KAAK,WAAW;eAAhB,CACG,GACA,CAAC,KACA,kBAAC,GAAD;MACE,aAAa;MACb,UAAU;MACV,OAAO;MACP,aAAa;MACb,UAAU;MACV,CAAA,CAEA;;IAEL,KAAU,QAAQ,kBAAC,OAAD;KAAK,WAAW;eAAgB;KAAa,CAAA;IAChE,kBAAC,OAAD;KAAK,WAAW;KAAiB,cAAY;eAC1C,EAAS,KAAK,MAEX,kBAAC,GAAD;MAEE,OAAO,EAAQ;MACf,MAAM,EAAQ;MACd,OAAO,EAAQ;MACf,aAAa,EAAQ;MACrB,kBAAkB,EAAQ;MAC1B,aAAa,EAAQ;MACrB,mBAAmB,EAAQ;MAChB;MACX,EATK,EAAQ,GASb,CAEJ;KACE,CAAA;IAEL;IACG;;EACA,CAAA"}
+{"version":3,"file":"AdminSidebar.js","names":[],"sources":["../../../../../src/admin/organisms/admin_sidebar/AdminSidebar.tsx"],"sourcesContent":["import { useCallback, useState, type JSX, type ReactNode } from 'react';\nimport type { RecipeVariants } from '@vanilla-extract/recipes';\n\nimport { SidebarCollapseToggle } from '../../../backoffice/molecules/sidebar_collapse_toggle/SidebarCollapseToggle.js';\nimport {\n  SidebarNavSection,\n  type SidebarNavSectionItem,\n  type SidebarNavSectionReorder,\n} from '../../../backoffice/molecules/sidebar_nav_section/SidebarNavSection.js';\n\nimport * as styles from './adminSidebar.css.js';\nimport { cx } from '../../../theme/tools.js';\n\nexport type AdminSidebarSection = {\n  id: string;\n  title?: ReactNode;\n  icon?: ReactNode;\n  items: readonly SidebarNavSectionItem[];\n  collapsible?: boolean;\n  defaultCollapsed?: boolean;\n  isCollapsed?: boolean;\n  onCollapsedChange?: (collapsed: boolean) => void;\n  reorder?: SidebarNavSectionReorder;\n};\n\nexport type AdminSidebarProps = {\n  header?: ReactNode;\n  search?: ReactNode;\n  footer?: ReactNode;\n  sections: readonly AdminSidebarSection[];\n  isCollapsed?: boolean;\n  defaultCollapsed?: boolean;\n  onCollapsedChange?: (collapsed: boolean) => void;\n  collapseToggleLabel?: ReactNode;\n  expandToggleLabel?: ReactNode;\n  collapseShortcut?: readonly string[] | string;\n  navigationAriaLabel?: string;\n  hideCollapseToggle?: boolean;\n  className?: string;\n};\n\nexport const AdminSidebar = ({\n  header,\n  search,\n  footer,\n  sections,\n  isCollapsed,\n  defaultCollapsed = false,\n  onCollapsedChange,\n  collapseToggleLabel,\n  expandToggleLabel,\n  collapseShortcut,\n  navigationAriaLabel = 'Admin navigation',\n  hideCollapseToggle = false,\n  className,\n}: AdminSidebarProps): JSX.Element => {\n  const [uncontrolledCollapsed, setUncontrolledCollapsed] =\n    useState(defaultCollapsed);\n\n  const collapsed = isCollapsed ?? uncontrolledCollapsed;\n\n  const handleToggleCollapsed = useCallback(() => {\n    const next = !collapsed;\n    if (isCollapsed == null) {\n      setUncontrolledCollapsed(next);\n    }\n    onCollapsedChange?.(next);\n  }, [collapsed, isCollapsed, onCollapsedChange]);\n\n  let widthKey: NonNullable<\n    NonNullable<RecipeVariants<typeof styles.widthRecipe>>['state']\n  > = 'expanded';\n  if (collapsed) {\n    widthKey = 'collapsed';\n  }\n\n  let footerNode: JSX.Element | null = null;\n  if (footer != null) {\n    footerNode = <div className={styles.footer}>{footer}</div>;\n  }\n\n  return (\n    <aside\n      className={cx(\n        styles.container,\n        styles.widthRecipe({ state: widthKey }),\n        className,\n      )}\n    >\n      <div className={styles.inner}>\n        <div className={styles.header}>\n          {header}\n          {!hideCollapseToggle && (\n            <SidebarCollapseToggle\n              isCollapsed={collapsed}\n              onToggle={handleToggleCollapsed}\n              label={collapseToggleLabel}\n              expandLabel={expandToggleLabel}\n              shortcut={collapseShortcut}\n            />\n          )}\n        </div>\n\n        {search != null && <div className={styles.search}>{search}</div>}\n        <nav className={styles.sections} aria-label={navigationAriaLabel}>\n          {sections.map((section) => {\n            return (\n              <SidebarNavSection\n                key={section.id}\n                title={section.title}\n                icon={section.icon}\n                items={section.items}\n                collapsible={section.collapsible}\n                defaultCollapsed={section.defaultCollapsed}\n                isCollapsed={section.isCollapsed}\n                onCollapsedChange={section.onCollapsedChange}\n                collapsed={collapsed}\n                reorder={section.reorder}\n              />\n            );\n          })}\n        </nav>\n\n        {footerNode}\n      </div>\n    </aside>\n  );\n};\n\nexport default AdminSidebar;\n"],"mappings":";;;;;;;AAyCA,IAAa,KAAgB,EAC3B,QAAA,GACA,QAAA,GACA,QAAA,GACA,UAAA,GACA,gBACA,sBAAmB,IACnB,sBACA,wBACA,sBACA,qBACA,yBAAsB,oBACtB,wBAAqB,IACrB,mBACoC;CACpC,IAAM,CAAC,GAAuB,KAC5B,EAAS,EAAiB,EAEtB,IAAY,KAAe,GAE3B,IAAwB,QAAkB;EAC9C,IAAM,IAAO,CAAC;EAId,AAHI,KACF,EAAyB,EAAK,EAEhC,IAAoB,EAAK;IACxB;EAAC;EAAW;EAAa;EAAkB,CAAC,EAE3C,IAEA;CACJ,AAAI,MACF,IAAW;CAGb,IAAI,IAAiC;CAKrC,OAJI,KAAU,SACZ,IAAa,kBAAC,OAAD;EAAK,WAAW;YAAgB;EAAa,CAAA,GAI1D,kBAAC,SAAD;EACE,WAAW,EACT,GACA,EAAmB,EAAE,OAAO,GAAU,CAAC,EACvC,EACD;YAED,kBAAC,OAAD;GAAK,WAAW;aAAhB;IACE,kBAAC,OAAD;KAAK,WAAW;eAAhB,CACG,GACA,CAAC,KACA,kBAAC,GAAD;MACE,aAAa;MACb,UAAU;MACV,OAAO;MACP,aAAa;MACb,UAAU;MACV,CAAA,CAEA;;IAEL,KAAU,QAAQ,kBAAC,OAAD;KAAK,WAAW;eAAgB;KAAa,CAAA;IAChE,kBAAC,OAAD;KAAK,WAAW;KAAiB,cAAY;eAC1C,EAAS,KAAK,MAEX,kBAAC,GAAD;MAEE,OAAO,EAAQ;MACf,MAAM,EAAQ;MACd,OAAO,EAAQ;MACf,aAAa,EAAQ;MACrB,kBAAkB,EAAQ;MAC1B,aAAa,EAAQ;MACrB,mBAAmB,EAAQ;MAChB;MACX,SAAS,EAAQ;MACjB,EAVK,EAAQ,GAUb,CAEJ;KACE,CAAA;IAEL;IACG;;EACA,CAAA"}

package/lib/esm/atomic/molecules/markdown/components/MarkdownDelete.css.js

@@ -1,5 +1,4 @@
 /* empty css                                         */
-/* empty css                             */
 /* empty css                              */
 //#region src/atomic/molecules/markdown/components/MarkdownDelete.css.ts
 var e = "_1gyncxq1 _1gyncxq0 txvbqb3c txvbqb3g";

package/lib/esm/atomic/molecules/markdown/components/MarkdownFootnoteReference.css.js

@@ -1,4 +1,5 @@
 /* empty css                                         */
+/* empty css                             */
 /* empty css                                         */
 //#region src/atomic/molecules/markdown/components/MarkdownFootnoteReference.css.ts
 var e = "_1p5id9v1 _1p5id9v0 txvbqb8p txvbqb9jg txvbqbamp txvbqb7s";

package/lib/esm/backoffice/molecules/sidebar_nav_item/SidebarNavItem.js

@@ -1,123 +1,119 @@
 import { cx as e } from "../../../theme/tools.js";
-import { actionSlot as t, actions as n, actionsVisible as ee, badge as r, badgeCollapsed as te, dragHandle as ne, icon as i, iconNested as re, item as ie, itemActive as ae, itemCollapsed as a, itemDisabled as o, itemNested as s, label as c, labelCollapsed as l, link as u } from "./sidebarNavItem.css.js";
-import { useCallback as d, useEffect as oe, useRef as f, useState as p } from "react";
-import { Fragment as se, jsx as m, jsxs as h } from "react/jsx-runtime";
-import g from "@plumile/router/routing/Link.js";
+import { actionSlot as t, actions as ee, actionsVisible as te, badge as ne, badgeCollapsed as n, dragHandle as r, icon as i, iconNested as a, item as o, itemActive as s, itemCollapsed as re, itemDisabled as ie, itemDragging as ae, itemNested as oe, label as se, labelCollapsed as ce, link as c } from "./sidebarNavItem.css.js";
+import { useCallback as le, useEffect as ue, useRef as l, useState as u } from "react";
+import { Fragment as d, jsx as f, jsxs as p } from "react/jsx-runtime";
+import m from "@plumile/router/routing/Link.js";
 //#region src/backoffice/molecules/sidebar_nav_item/SidebarNavItem.tsx
-var ce = g, _ = ({ label: g, href: _, icon: v, badge: y, isActive: b = !1, disabled: x = !1, onClick: S, onDragStart: le, onDragOver: ue, onDrop: de, onDragEnd: fe, collapsed: C = !1, nested: w = !1, ariaLabel: pe, className: T, actionSlot: E, dragHandleSlot: D, dragHandleLabel: O, draggable: k = !1 }) => {
-	let A = f(null), j = f(null), [M, N] = p(!1), [P, F] = p(!1), I = [ie];
-	C && I.push(a), w && !C && I.push(s), b && I.push(ae), x && I.push(o), T != null && I.push(T);
-	let L = e(...I), R = pe;
-	R == null && typeof g == "string" && (R = g);
-	let z, B;
-	C && (z = R, B = R);
-	let V;
-	b && (V = "page");
-	let H = null;
-	v != null && (H = /* @__PURE__ */ m("span", {
-		className: e(i, { [re]: w && !C }),
-		children: v
+var h = m, g = ({ label: m, href: g, icon: _, badge: v, isActive: y = !1, disabled: b = !1, onClick: de, collapsed: x = !1, nested: S = !1, ariaLabel: fe, className: C, actionSlot: w, dragHandleSlot: T, dragHandleLabel: E, dragHandleProps: D, isDragging: O = !1 }) => {
+	let k = l(null), A = l(null), [j, M] = u(!1), [N, P] = u(!1), F = [o];
+	x && F.push(re), S && !x && F.push(oe), y && F.push(s), b && F.push(ie), O && F.push(ae), C != null && F.push(C);
+	let I = e(...F), L = fe;
+	L == null && typeof m == "string" && (L = m);
+	let R, z;
+	x && (R = L, z = L);
+	let B;
+	y && (B = "page");
+	let V = null;
+	_ != null && (V = /* @__PURE__ */ f("span", {
+		className: e(i, { [a]: S && !x }),
+		children: _
 	}));
-	let U = null;
-	C && (U = l);
-	let me = e(c, U), W = null;
-	if (y != null) {
+	let H = null;
+	x && (H = ce);
+	let pe = e(se, H), U = null;
+	if (v != null) {
 		let t = null;
-		C && (t = te), W = /* @__PURE__ */ m("span", {
-			className: e(r, t),
-			children: y
+		x && (t = n), U = /* @__PURE__ */ f("span", {
+			className: e(ne, t),
+			children: v
 		});
 	}
-	let G = /* @__PURE__ */ h(se, { children: [
-		H,
-		/* @__PURE__ */ m("span", {
-			className: me,
-			children: g
+	let W = /* @__PURE__ */ p(d, { children: [
+		V,
+		/* @__PURE__ */ f("span", {
+			className: pe,
+			children: m
 		}),
-		W
-	] }), K = () => {
-		S?.();
-	}, q = !C && !x && (E != null || D != null), J = d(() => {
-		j.current != null && (clearTimeout(j.current), j.current = null);
+		U
+	] }), G = () => {
+		de?.();
+	}, K = !x && !b && !O && (w != null || T != null), q = le(() => {
+		A.current != null && (clearTimeout(A.current), A.current = null);
 	}, []);
-	oe(() => (q || (N(!1), F(!1), J()), () => {
-		J();
-	}), [J, q]);
-	let he = () => {
-		q && (J(), j.current = setTimeout(() => {
-			N(!0);
+	ue(() => (K || (M(!1), P(!1), q()), () => {
+		q();
+	}), [q, K]);
+	let me = () => {
+		K && (q(), A.current = setTimeout(() => {
+			M(!0);
 		}, 150));
+	}, he = () => {
+		q(), M(!1);
 	}, ge = () => {
-		J(), N(!1);
-	}, _e = () => {
-		q && F(!0);
-	}, ve = (e) => {
-		if (!q) {
-			F(!1);
+		K && P(!0);
+	}, _e = (e) => {
+		if (!K) {
+			P(!1);
 			return;
 		}
 		let t = e.relatedTarget;
-		t != null && A.current?.contains(t) || F(!1);
-	}, Y;
-	Y = x ? /* @__PURE__ */ m("span", {
-		className: u,
+		t != null && k.current?.contains(t) || P(!1);
+	}, J;
+	J = b ? /* @__PURE__ */ f("span", {
+		className: c,
 		"aria-disabled": "true",
-		"aria-label": z,
-		title: B,
-		children: G
-	}) : _ == null ? /* @__PURE__ */ m("button", {
+		"aria-label": R,
+		title: z,
+		children: W
+	}) : g == null ? /* @__PURE__ */ f("button", {
 		type: "button",
-		className: u,
-		onClick: K,
-		"aria-current": V,
-		"aria-label": z,
-		title: B,
-		children: G
-	}) : /* @__PURE__ */ m(ce, {
-		to: _,
-		className: u,
-		"aria-current": V,
-		"aria-label": z,
-		title: B,
-		onClick: K,
-		children: G
+		className: c,
+		onClick: G,
+		"aria-current": B,
+		"aria-label": R,
+		title: z,
+		children: W
+	}) : /* @__PURE__ */ f(h, {
+		to: g,
+		className: c,
+		"aria-current": B,
+		"aria-label": R,
+		title: z,
+		onClick: G,
+		children: W
 	});
-	let ye = q && (M || P), X;
-	ye && (X = ee);
-	let be = e(n, X), Z = null;
-	D != null && !C && (Z = /* @__PURE__ */ m("button", {
+	let Y = K && (j || N), X;
+	Y && (X = te);
+	let ve = e(ee, X), Z = null;
+	T != null && !x && (Z = /* @__PURE__ */ f("button", {
+		...D,
 		type: "button",
-		className: ne,
-		draggable: k,
-		onDragStart: le,
-		onDragEnd: fe,
-		"aria-label": O,
-		title: O,
-		children: D
+		className: e(r, D?.className),
+		"aria-label": E,
+		title: E,
+		children: T
 	}));
 	let Q = null;
-	E != null && !C && (Q = /* @__PURE__ */ m("span", {
+	w != null && !x && (Q = /* @__PURE__ */ f("span", {
 		className: t,
-		children: E
+		children: w
 	}));
 	let $ = null;
-	return q && ($ = /* @__PURE__ */ h("span", {
-		className: be,
+	return K && ($ = /* @__PURE__ */ p("span", {
+		className: ve,
 		children: [Z, Q]
-	})), /* @__PURE__ */ h("div", {
-		className: L,
-		onDragOver: ue,
-		onDrop: de,
-		onMouseEnter: he,
-		onMouseLeave: ge,
-		onFocusCapture: _e,
-		onBlurCapture: ve,
-		ref: A,
+	})), /* @__PURE__ */ p("div", {
+		className: I,
+		onMouseEnter: me,
+		onMouseLeave: he,
+		onFocusCapture: ge,
+		onBlurCapture: _e,
+		ref: k,
 		role: "listitem",
-		children: [Y, $]
+		children: [J, $]
 	});
 };
 //#endregion
-export { _ as SidebarNavItem, _ as default };
+export { g as SidebarNavItem, g as default };
 
 //# sourceMappingURL=SidebarNavItem.js.map

package/lib/esm/backoffice/molecules/sidebar_nav_item/SidebarNavItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"SidebarNavItem.js","names":[],"sources":["../../../../../src/backoffice/molecules/sidebar_nav_item/SidebarNavItem.tsx"],"sourcesContent":["import Link from '@plumile/router/routing/Link.js';\nimport {\n  type AnchorHTMLAttributes,\n  type ComponentPropsWithoutRef,\n  type DragEvent,\n  type FocusEvent,\n  type JSX,\n  type ReactNode,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\n\nimport * as styles from './sidebarNavItem.css.js';\nimport { cx } from '../../../theme/tools.js';\n\ntype RouterLinkProps = ComponentPropsWithoutRef<typeof Link> &\n  AnchorHTMLAttributes<HTMLAnchorElement>;\nconst RouterLink = Link as unknown as (props: RouterLinkProps) => JSX.Element;\n\nexport type SidebarNavItemProps = {\n  label: ReactNode;\n  href?: string;\n  icon?: ReactNode;\n  badge?: ReactNode;\n  isActive?: boolean;\n  disabled?: boolean;\n  onClick?: () => void;\n  onDragStart?: (event: DragEvent) => void;\n  onDragOver?: (event: DragEvent) => void;\n  onDrop?: (event: DragEvent) => void;\n  onDragEnd?: (event: DragEvent) => void;\n  collapsed?: boolean;\n  nested?: boolean;\n  ariaLabel?: string;\n  className?: string;\n  actionSlot?: ReactNode;\n  dragHandleSlot?: ReactNode;\n  dragHandleLabel?: string;\n  draggable?: boolean;\n};\n\nexport const SidebarNavItem = ({\n  label,\n  href,\n  icon,\n  badge,\n  isActive = false,\n  disabled = false,\n  onClick,\n  onDragStart,\n  onDragOver,\n  onDrop,\n  onDragEnd,\n  collapsed = false,\n  nested = false,\n  ariaLabel,\n  className,\n  actionSlot,\n  dragHandleSlot,\n  dragHandleLabel,\n  draggable = false,\n}: SidebarNavItemProps): JSX.Element => {\n  const itemRef = useRef<HTMLDivElement | null>(null);\n  const hoverTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n  const [isHoverIntent, setIsHoverIntent] = useState(false);\n  const [isFocusWithin, setIsFocusWithin] = useState(false);\n\n  const itemClassNames: (string | null | undefined)[] = [styles.item];\n  if (collapsed) {\n    itemClassNames.push(styles.itemCollapsed);\n  }\n  if (nested && !collapsed) {\n    itemClassNames.push(styles.itemNested);\n  }\n  if (isActive) {\n    itemClassNames.push(styles.itemActive);\n  }\n  if (disabled) {\n    itemClassNames.push(styles.itemDisabled);\n  }\n  if (className != null) {\n    itemClassNames.push(className);\n  }\n  const itemClassName = cx(...itemClassNames);\n\n  let resolvedAriaLabel: string | undefined = ariaLabel;\n  if (resolvedAriaLabel == null && typeof label === 'string') {\n    resolvedAriaLabel = label;\n  }\n\n  let collapsedAriaLabel: string | undefined;\n  let collapsedTitle: string | undefined;\n  if (collapsed) {\n    collapsedAriaLabel = resolvedAriaLabel;\n    collapsedTitle = resolvedAriaLabel;\n  }\n\n  let ariaCurrent: 'page' | undefined;\n  if (isActive) {\n    ariaCurrent = 'page';\n  }\n\n  let iconNode: JSX.Element | null = null;\n  if (icon != null) {\n    iconNode = (\n      <span\n        className={cx(styles.icon, {\n          [styles.iconNested]: nested && !collapsed,\n        })}\n      >\n        {icon}\n      </span>\n    );\n  }\n\n  let labelExtraClass: string | null = null;\n  if (collapsed) {\n    labelExtraClass = styles.labelCollapsed;\n  }\n  const labelClassName = cx(styles.label, labelExtraClass);\n\n  let badgeNode: JSX.Element | null = null;\n  if (badge != null) {\n    let badgeExtraClass: string | null = null;\n    if (collapsed) {\n      badgeExtraClass = styles.badgeCollapsed;\n    }\n    badgeNode = (\n      <span className={cx(styles.badge, badgeExtraClass)}>{badge}</span>\n    );\n  }\n\n  const content = (\n    <>\n      {iconNode}\n      <span className={labelClassName}>{label}</span>\n      {badgeNode}\n    </>\n  );\n\n  const handleClick = (): void => {\n    if (onClick != null) {\n      onClick();\n    }\n  };\n\n  const shouldRenderActions =\n    !collapsed && !disabled && (actionSlot != null || dragHandleSlot != null);\n\n  const clearHoverTimeout = useCallback((): void => {\n    if (hoverTimeoutRef.current != null) {\n      clearTimeout(hoverTimeoutRef.current);\n      hoverTimeoutRef.current = null;\n    }\n  }, []);\n\n  useEffect(() => {\n    if (!shouldRenderActions) {\n      setIsHoverIntent(false);\n      setIsFocusWithin(false);\n      clearHoverTimeout();\n    }\n\n    return () => {\n      clearHoverTimeout();\n    };\n  }, [clearHoverTimeout, shouldRenderActions]);\n\n  const handleMouseEnter = (): void => {\n    if (!shouldRenderActions) {\n      return;\n    }\n    clearHoverTimeout();\n    hoverTimeoutRef.current = setTimeout(() => {\n      setIsHoverIntent(true);\n    }, 150);\n  };\n\n  const handleMouseLeave = (): void => {\n    clearHoverTimeout();\n    setIsHoverIntent(false);\n  };\n\n  const handleFocusCapture = (): void => {\n    if (!shouldRenderActions) {\n      return;\n    }\n    setIsFocusWithin(true);\n  };\n\n  const handleBlurCapture = (event: FocusEvent<HTMLDivElement>): void => {\n    if (!shouldRenderActions) {\n      setIsFocusWithin(false);\n      return;\n    }\n    const nextTarget = event.relatedTarget as Node | null;\n    if (nextTarget != null && itemRef.current?.contains(nextTarget)) {\n      return;\n    }\n    setIsFocusWithin(false);\n  };\n\n  let mainNode: JSX.Element;\n  if (disabled) {\n    mainNode = (\n      <span\n        className={styles.link}\n        aria-disabled=\"true\"\n        aria-label={collapsedAriaLabel}\n        title={collapsedTitle}\n      >\n        {content}\n      </span>\n    );\n  } else if (href != null) {\n    mainNode = (\n      <RouterLink\n        to={href}\n        className={styles.link}\n        aria-current={ariaCurrent}\n        aria-label={collapsedAriaLabel}\n        title={collapsedTitle}\n        onClick={handleClick}\n      >\n        {content}\n      </RouterLink>\n    );\n  } else {\n    mainNode = (\n      <button\n        type=\"button\"\n        className={styles.link}\n        onClick={handleClick}\n        aria-current={ariaCurrent}\n        aria-label={collapsedAriaLabel}\n        title={collapsedTitle}\n      >\n        {content}\n      </button>\n    );\n  }\n\n  const isActionsVisible =\n    shouldRenderActions && (isHoverIntent || isFocusWithin);\n  let actionsVisibilityClass: string | undefined;\n  if (isActionsVisible) {\n    actionsVisibilityClass = styles.actionsVisible;\n  }\n  const actionsClassName = cx(styles.actions, actionsVisibilityClass);\n\n  let dragHandleNode: JSX.Element | null = null;\n  if (dragHandleSlot != null && !collapsed) {\n    dragHandleNode = (\n      <button\n        type=\"button\"\n        className={styles.dragHandle}\n        draggable={draggable}\n        onDragStart={onDragStart}\n        onDragEnd={onDragEnd}\n        aria-label={dragHandleLabel}\n        title={dragHandleLabel}\n      >\n        {dragHandleSlot}\n      </button>\n    );\n  }\n\n  let actionNode: JSX.Element | null = null;\n  if (actionSlot != null && !collapsed) {\n    actionNode = <span className={styles.actionSlot}>{actionSlot}</span>;\n  }\n\n  let actionsNode: JSX.Element | null = null;\n  if (shouldRenderActions) {\n    actionsNode = (\n      <span className={actionsClassName}>\n        {dragHandleNode}\n        {actionNode}\n      </span>\n    );\n  }\n\n  return (\n    <div\n      className={itemClassName}\n      onDragOver={onDragOver}\n      onDrop={onDrop}\n      onMouseEnter={handleMouseEnter}\n      onMouseLeave={handleMouseLeave}\n      onFocusCapture={handleFocusCapture}\n      onBlurCapture={handleBlurCapture}\n      ref={itemRef}\n      role=\"listitem\"\n    >\n      {mainNode}\n      {actionsNode}\n    </div>\n  );\n};\n\nexport default SidebarNavItem;\n"],"mappings":"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"}
+{"version":3,"file":"SidebarNavItem.js","names":[],"sources":["../../../../../src/backoffice/molecules/sidebar_nav_item/SidebarNavItem.tsx"],"sourcesContent":["import Link from '@plumile/router/routing/Link.js';\nimport {\n  type AnchorHTMLAttributes,\n  type ButtonHTMLAttributes,\n  type ComponentPropsWithoutRef,\n  type FocusEvent,\n  type JSX,\n  type ReactNode,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\n\nimport * as styles from './sidebarNavItem.css.js';\nimport { cx } from '../../../theme/tools.js';\n\ntype RouterLinkProps = ComponentPropsWithoutRef<typeof Link> &\n  AnchorHTMLAttributes<HTMLAnchorElement>;\nconst RouterLink = Link as unknown as (props: RouterLinkProps) => JSX.Element;\n\nexport type SidebarNavItemProps = {\n  label: ReactNode;\n  href?: string;\n  icon?: ReactNode;\n  badge?: ReactNode;\n  isActive?: boolean;\n  disabled?: boolean;\n  onClick?: () => void;\n  collapsed?: boolean;\n  nested?: boolean;\n  ariaLabel?: string;\n  className?: string;\n  actionSlot?: ReactNode;\n  dragHandleSlot?: ReactNode;\n  dragHandleLabel?: string;\n  dragHandleProps?: ButtonHTMLAttributes<HTMLButtonElement>;\n  isDragging?: boolean;\n};\n\nexport const SidebarNavItem = ({\n  label,\n  href,\n  icon,\n  badge,\n  isActive = false,\n  disabled = false,\n  onClick,\n  collapsed = false,\n  nested = false,\n  ariaLabel,\n  className,\n  actionSlot,\n  dragHandleSlot,\n  dragHandleLabel,\n  dragHandleProps,\n  isDragging = false,\n}: SidebarNavItemProps): JSX.Element => {\n  const itemRef = useRef<HTMLDivElement | null>(null);\n  const hoverTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n  const [isHoverIntent, setIsHoverIntent] = useState(false);\n  const [isFocusWithin, setIsFocusWithin] = useState(false);\n\n  const itemClassNames: (string | null | undefined)[] = [styles.item];\n  if (collapsed) {\n    itemClassNames.push(styles.itemCollapsed);\n  }\n  if (nested && !collapsed) {\n    itemClassNames.push(styles.itemNested);\n  }\n  if (isActive) {\n    itemClassNames.push(styles.itemActive);\n  }\n  if (disabled) {\n    itemClassNames.push(styles.itemDisabled);\n  }\n  if (isDragging) {\n    itemClassNames.push(styles.itemDragging);\n  }\n  if (className != null) {\n    itemClassNames.push(className);\n  }\n  const itemClassName = cx(...itemClassNames);\n\n  let resolvedAriaLabel: string | undefined = ariaLabel;\n  if (resolvedAriaLabel == null && typeof label === 'string') {\n    resolvedAriaLabel = label;\n  }\n\n  let collapsedAriaLabel: string | undefined;\n  let collapsedTitle: string | undefined;\n  if (collapsed) {\n    collapsedAriaLabel = resolvedAriaLabel;\n    collapsedTitle = resolvedAriaLabel;\n  }\n\n  let ariaCurrent: 'page' | undefined;\n  if (isActive) {\n    ariaCurrent = 'page';\n  }\n\n  let iconNode: JSX.Element | null = null;\n  if (icon != null) {\n    iconNode = (\n      <span\n        className={cx(styles.icon, {\n          [styles.iconNested]: nested && !collapsed,\n        })}\n      >\n        {icon}\n      </span>\n    );\n  }\n\n  let labelExtraClass: string | null = null;\n  if (collapsed) {\n    labelExtraClass = styles.labelCollapsed;\n  }\n  const labelClassName = cx(styles.label, labelExtraClass);\n\n  let badgeNode: JSX.Element | null = null;\n  if (badge != null) {\n    let badgeExtraClass: string | null = null;\n    if (collapsed) {\n      badgeExtraClass = styles.badgeCollapsed;\n    }\n    badgeNode = (\n      <span className={cx(styles.badge, badgeExtraClass)}>{badge}</span>\n    );\n  }\n\n  const content = (\n    <>\n      {iconNode}\n      <span className={labelClassName}>{label}</span>\n      {badgeNode}\n    </>\n  );\n\n  const handleClick = (): void => {\n    if (onClick != null) {\n      onClick();\n    }\n  };\n\n  const shouldRenderActions =\n    !collapsed &&\n    !disabled &&\n    !isDragging &&\n    (actionSlot != null || dragHandleSlot != null);\n\n  const clearHoverTimeout = useCallback((): void => {\n    if (hoverTimeoutRef.current != null) {\n      clearTimeout(hoverTimeoutRef.current);\n      hoverTimeoutRef.current = null;\n    }\n  }, []);\n\n  useEffect(() => {\n    if (!shouldRenderActions) {\n      setIsHoverIntent(false);\n      setIsFocusWithin(false);\n      clearHoverTimeout();\n    }\n\n    return () => {\n      clearHoverTimeout();\n    };\n  }, [clearHoverTimeout, shouldRenderActions]);\n\n  const handleMouseEnter = (): void => {\n    if (!shouldRenderActions) {\n      return;\n    }\n    clearHoverTimeout();\n    hoverTimeoutRef.current = setTimeout(() => {\n      setIsHoverIntent(true);\n    }, 150);\n  };\n\n  const handleMouseLeave = (): void => {\n    clearHoverTimeout();\n    setIsHoverIntent(false);\n  };\n\n  const handleFocusCapture = (): void => {\n    if (!shouldRenderActions) {\n      return;\n    }\n    setIsFocusWithin(true);\n  };\n\n  const handleBlurCapture = (event: FocusEvent<HTMLDivElement>): void => {\n    if (!shouldRenderActions) {\n      setIsFocusWithin(false);\n      return;\n    }\n    const nextTarget = event.relatedTarget as Node | null;\n    if (nextTarget != null && itemRef.current?.contains(nextTarget)) {\n      return;\n    }\n    setIsFocusWithin(false);\n  };\n\n  let mainNode: JSX.Element;\n  if (disabled) {\n    mainNode = (\n      <span\n        className={styles.link}\n        aria-disabled=\"true\"\n        aria-label={collapsedAriaLabel}\n        title={collapsedTitle}\n      >\n        {content}\n      </span>\n    );\n  } else if (href != null) {\n    mainNode = (\n      <RouterLink\n        to={href}\n        className={styles.link}\n        aria-current={ariaCurrent}\n        aria-label={collapsedAriaLabel}\n        title={collapsedTitle}\n        onClick={handleClick}\n      >\n        {content}\n      </RouterLink>\n    );\n  } else {\n    mainNode = (\n      <button\n        type=\"button\"\n        className={styles.link}\n        onClick={handleClick}\n        aria-current={ariaCurrent}\n        aria-label={collapsedAriaLabel}\n        title={collapsedTitle}\n      >\n        {content}\n      </button>\n    );\n  }\n\n  const isActionsVisible =\n    shouldRenderActions && (isHoverIntent || isFocusWithin);\n  let actionsVisibilityClass: string | undefined;\n  if (isActionsVisible) {\n    actionsVisibilityClass = styles.actionsVisible;\n  }\n  const actionsClassName = cx(styles.actions, actionsVisibilityClass);\n\n  let dragHandleNode: JSX.Element | null = null;\n  if (dragHandleSlot != null && !collapsed) {\n    dragHandleNode = (\n      <button\n        {...dragHandleProps}\n        type=\"button\"\n        className={cx(styles.dragHandle, dragHandleProps?.className)}\n        aria-label={dragHandleLabel}\n        title={dragHandleLabel}\n      >\n        {dragHandleSlot}\n      </button>\n    );\n  }\n\n  let actionNode: JSX.Element | null = null;\n  if (actionSlot != null && !collapsed) {\n    actionNode = <span className={styles.actionSlot}>{actionSlot}</span>;\n  }\n\n  let actionsNode: JSX.Element | null = null;\n  if (shouldRenderActions) {\n    actionsNode = (\n      <span className={actionsClassName}>\n        {dragHandleNode}\n        {actionNode}\n      </span>\n    );\n  }\n\n  return (\n    <div\n      className={itemClassName}\n      onMouseEnter={handleMouseEnter}\n      onMouseLeave={handleMouseLeave}\n      onFocusCapture={handleFocusCapture}\n      onBlurCapture={handleBlurCapture}\n      ref={itemRef}\n      role=\"listitem\"\n    >\n      {mainNode}\n      {actionsNode}\n    </div>\n  );\n};\n\nexport default SidebarNavItem;\n"],"mappings":"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"}

package/lib/esm/backoffice/molecules/sidebar_nav_item/sidebarNavItem.css.js

@@ -1,8 +1,8 @@
 /* empty css                                      */
 /* empty css                              */
 //#region src/backoffice/molecules/sidebar_nav_item/sidebarNavItem.css.ts
-var e = "_1nm2b9q0 txvbqb9jg txvbqbcp txvbqbany txvbqb7d txvbqb6x txvbqb7k txvbqbaj7 txvbqbvbl txvbqbtvp txvbqb2k", t = "_1nm2b9q1 txvbqbvcf txvbqbtvy txvbqb2l", n = "_1nm2b9q4 _1nm2b9q2 txvbqbnw7 txvbqbojg txvbqbpry txvbqbmjp txvbqb9ip txvbqbcp txvbqbao7 txvbqb1rp txvbqb8y txvbqb77 txvbqb6x txvbqb7k txvbqbv txvbqbva1 _1nm2b9q3 txvbqbw41 txvbqbwm4", r = "_1nm2b9q5 txvbqbnvy txvbqboj7 txvbqbdoy", i = "_1nm2b9q6 txvbqbnvy txvbqboj7 txvbqbpry txvbqbmjp txvbqb1rg", a = "_1nm2b9q7 txvbqbamp txvbqbv3t txvbqbv9z txvbqb8t7", o = "_1nm2b9q9 _1nm2b9q8 txvbqbva3 txvbqbr", s = "_1nm2b9qa txvbqb9ip txvbqbcp txvbqbao7 txvbqb9my txvbqbk5y txvbqb3b txvbqbv0t txvbqb12g txvbqb1py txvbqblag txvbqbt6p txvbqbv67 txvbqb1p", c = "_1nm2b9qb txvbqb9jg txvbqbcp", l = "_1nm2b9qe _1nm2b9qc txvbqb9jg txvbqbcp txvbqbdoy txvbqbtxp txvbqbc6p txvbqb1rg txvbqb12g txvbqb1py txvbqblag txvbqbv0t txvbqbva1 txvbqbi _1nm2b9qd txvbqbw41 txvbqbwm4", u = "_1nm2b9qf txvbqb9jg txvbqbcp txvbqbdoy txvbqbtxp txvbqbc6p txvbqbaj7 txvbqbv67", d = "_1nm2b9qg txvbqbtxg txvbqbc6g", f = "_1nm2b9qh txvbqb9my txvbqbk5y", p = "_1nm2b9qi txvbqb9hy", m = "_1nm2b9qj txvbqb9jg txvbqbcp txvbqbdoy txvbqbaj7", h = "_1nm2b9qk txvbqb9hy";
+var e = "_1nm2b9q0 txvbqb9jg txvbqbcp txvbqbany txvbqb7d txvbqb6x txvbqb7k txvbqbaj7 txvbqbvbl txvbqbtvp txvbqb2k", t = "_1nm2b9q1 txvbqbvcf txvbqbtvy txvbqb2l", n = "_1nm2b9q4 _1nm2b9q2 txvbqbnw7 txvbqbojg txvbqbpry txvbqbmjp txvbqb9ip txvbqbcp txvbqbao7 txvbqb1rp txvbqb8y txvbqb77 txvbqb6x txvbqb7k txvbqbv txvbqbva1 _1nm2b9q3 txvbqbw41 txvbqbwm4", r = "_1nm2b9q5 txvbqbnvy txvbqboj7 txvbqbdoy", i = "_1nm2b9q6 txvbqbnvy txvbqboj7 txvbqbpry txvbqbmjp txvbqb1rg", a = "_1nm2b9q7 txvbqbamp txvbqbv3t txvbqbv9z txvbqb8t7", o = "_1nm2b9q9 _1nm2b9q8 txvbqbva3 txvbqbr", s = "_1nm2b9qa txvbqbvc1 txvbqbj", c = "_1nm2b9qb txvbqb9ip txvbqbcp txvbqbao7 txvbqb9my txvbqbk5y txvbqb3b txvbqbv0t txvbqb12g txvbqb1py txvbqblag txvbqbt6p txvbqbv67 txvbqb1p", l = "_1nm2b9qc txvbqb9jg txvbqbcp", u = "_1nm2b9qf _1nm2b9qd txvbqb9jg txvbqbcp txvbqbdoy txvbqbtxp txvbqbc6p txvbqb1rg txvbqb12g txvbqb1py txvbqblag txvbqbv0t txvbqbva1 txvbqbi _1nm2b9qe txvbqbw41 txvbqbwm4", d = "_1nm2b9qg txvbqb9jg txvbqbcp txvbqbdoy txvbqbtxp txvbqbc6p txvbqbaj7 txvbqbv67", f = "_1nm2b9qh txvbqbtxg txvbqbc6g", p = "_1nm2b9qi txvbqb9my txvbqbk5y", m = "_1nm2b9qj txvbqb9hy", h = "_1nm2b9qk txvbqb9jg txvbqbcp txvbqbdoy txvbqbaj7", g = "_1nm2b9ql txvbqb9hy";
 //#endregion
-export { c as actionSlot, e as actions, t as actionsVisible, m as badge, h as badgeCollapsed, l as dragHandle, u as icon, d as iconNested, n as item, a as itemActive, r as itemCollapsed, o as itemDisabled, i as itemNested, f as label, p as labelCollapsed, s as link };
+export { l as actionSlot, e as actions, t as actionsVisible, h as badge, g as badgeCollapsed, u as dragHandle, d as icon, f as iconNested, n as item, a as itemActive, r as itemCollapsed, o as itemDisabled, s as itemDragging, i as itemNested, p as label, m as labelCollapsed, c as link };
 
 //# sourceMappingURL=sidebarNavItem.css.js.map

package/lib/esm/backoffice/molecules/sidebar_nav_item/sidebarNavItem.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"sidebarNavItem.css.js","names":[],"sources":["../../../../../src/backoffice/molecules/sidebar_nav_item/sidebarNavItem.css.ts"],"sourcesContent":["import { style } from '@vanilla-extract/css';\n\nimport { sprinkles, stateSprinkles } from '../../../theme/sprinkles.css.js';\nimport { vars } from '../../../theme/themeContract.js';\n\nconst inlineFlex = 'inline-flex';\n\nexport const actions = sprinkles({\n  display: inlineFlex,\n  alignItems: 'center',\n  gap: 1,\n  transitionProperty: 'opacity',\n  transitionDuration: 150,\n  transitionTimingFunction: 'ease',\n  flexShrink: 0,\n  opacity: 0,\n  visibility: 'hidden',\n  pointerEvents: 'none',\n});\n\nexport const actionsVisible = sprinkles({\n  opacity: 100,\n  visibility: 'visible',\n  pointerEvents: 'auto',\n});\n\nexport const item = style([\n  sprinkles({\n    display: 'flex',\n    alignItems: 'center',\n    gap: 2,\n    paddingY: 1.5,\n    paddingX: 3,\n    borderRadius: 'lg',\n    fontSize: 'sm',\n    transitionProperty: 'default',\n    transitionDuration: 150,\n    transitionTimingFunction: 'ease',\n    cursor: 'pointer',\n    color: 'textSecondary',\n  }),\n  stateSprinkles({\n    backgroundColor: {\n      hover: 'surfaceMuted',\n    },\n    color: {\n      hover: 'text',\n    },\n  }),\n  {\n    selectors: {\n      '&:has(:focus-visible)': {\n        outline: `2px solid ${vars.colors.primary}`,\n        outlineOffset: '2px',\n      },\n    },\n  },\n]);\n\nexport const itemCollapsed = sprinkles({\n  justifyContent: 'center',\n  paddingX: 2,\n});\n\nexport const itemNested = sprinkles({\n  paddingX: 2,\n  paddingY: 1.5,\n  borderRadius: 'md',\n});\n\nexport const itemActive = sprinkles({\n  fontWeight: 'semibold',\n  backgroundColor: 'primaryLight',\n  color: 'text',\n  boxShadow: 'primaryLightRing',\n});\n\nexport const itemDisabled = style([\n  sprinkles({\n    color: 'textMuted',\n    cursor: 'not-allowed',\n  }),\n  {\n    selectors: {\n      '&:hover': {\n        backgroundColor: 'transparent',\n      },\n    },\n  },\n]);\n\nexport const link = sprinkles({\n  display: 'flex',\n  alignItems: 'center',\n  gap: 2,\n  flex: 1,\n  minWidth: 0,\n  textDecoration: 'none',\n  backgroundColor: 'transparent',\n  borderWidth: 0,\n  borderStyle: 'none',\n  padding: 0,\n  textAlign: 'left',\n  color: 'inherit',\n  font: 'inherit',\n});\n\nexport const actionSlot = sprinkles({\n  display: inlineFlex,\n  alignItems: 'center',\n});\n\nexport const dragHandle = style([\n  sprinkles({\n    display: inlineFlex,\n    alignItems: 'center',\n    justifyContent: 'center',\n    width: 6,\n    height: 6,\n    borderRadius: 'md',\n    borderWidth: 0,\n    borderStyle: 'none',\n    padding: 0,\n    backgroundColor: 'transparent',\n    color: 'textSecondary',\n    cursor: 'grab',\n  }),\n  stateSprinkles({\n    backgroundColor: {\n      hover: 'surfaceMuted',\n    },\n    color: {\n      hover: 'text',\n    },\n  }),\n  {\n    selectors: {\n      '&:active': {\n        cursor: 'grabbing',\n      },\n      '&:focus-visible': {\n        outline: `2px solid ${vars.colors.primary}`,\n        outlineOffset: '2px',\n      },\n    },\n  },\n]);\n\nexport const icon = sprinkles({\n  display: inlineFlex,\n  alignItems: 'center',\n  justifyContent: 'center',\n  width: 6,\n  height: 6,\n  flexShrink: 0,\n  color: 'inherit',\n});\n\nexport const iconNested = sprinkles({\n  width: 5,\n  height: 5,\n});\n\nexport const label = sprinkles({\n  flex: 1,\n  minWidth: 0,\n});\n\nexport const labelCollapsed = sprinkles({\n  display: 'none',\n});\n\nexport const badge = sprinkles({\n  display: inlineFlex,\n  alignItems: 'center',\n  justifyContent: 'center',\n  flexShrink: 0,\n});\n\nexport const badgeCollapsed = sprinkles({\n  display: 'none',\n});\n"],"mappings":""}
+{"version":3,"file":"sidebarNavItem.css.js","names":[],"sources":["../../../../../src/backoffice/molecules/sidebar_nav_item/sidebarNavItem.css.ts"],"sourcesContent":["import { style } from '@vanilla-extract/css';\n\nimport { sprinkles, stateSprinkles } from '../../../theme/sprinkles.css.js';\nimport { vars } from '../../../theme/themeContract.js';\n\nconst inlineFlex = 'inline-flex';\n\nexport const actions = sprinkles({\n  display: inlineFlex,\n  alignItems: 'center',\n  gap: 1,\n  transitionProperty: 'opacity',\n  transitionDuration: 150,\n  transitionTimingFunction: 'ease',\n  flexShrink: 0,\n  opacity: 0,\n  visibility: 'hidden',\n  pointerEvents: 'none',\n});\n\nexport const actionsVisible = sprinkles({\n  opacity: 100,\n  visibility: 'visible',\n  pointerEvents: 'auto',\n});\n\nexport const item = style([\n  sprinkles({\n    display: 'flex',\n    alignItems: 'center',\n    gap: 2,\n    paddingY: 1.5,\n    paddingX: 3,\n    borderRadius: 'lg',\n    fontSize: 'sm',\n    transitionProperty: 'default',\n    transitionDuration: 150,\n    transitionTimingFunction: 'ease',\n    cursor: 'pointer',\n    color: 'textSecondary',\n  }),\n  stateSprinkles({\n    backgroundColor: {\n      hover: 'surfaceMuted',\n    },\n    color: {\n      hover: 'text',\n    },\n  }),\n  {\n    selectors: {\n      '&:has(:focus-visible)': {\n        outline: `2px solid ${vars.colors.primary}`,\n        outlineOffset: '2px',\n      },\n    },\n  },\n]);\n\nexport const itemCollapsed = sprinkles({\n  justifyContent: 'center',\n  paddingX: 2,\n});\n\nexport const itemNested = sprinkles({\n  paddingX: 2,\n  paddingY: 1.5,\n  borderRadius: 'md',\n});\n\nexport const itemActive = sprinkles({\n  fontWeight: 'semibold',\n  backgroundColor: 'primaryLight',\n  color: 'text',\n  boxShadow: 'primaryLightRing',\n});\n\nexport const itemDisabled = style([\n  sprinkles({\n    color: 'textMuted',\n    cursor: 'not-allowed',\n  }),\n  {\n    selectors: {\n      '&:hover': {\n        backgroundColor: 'transparent',\n      },\n    },\n  },\n]);\n\nexport const itemDragging = sprinkles({\n  opacity: 50,\n  cursor: 'grabbing',\n});\n\nexport const link = sprinkles({\n  display: 'flex',\n  alignItems: 'center',\n  gap: 2,\n  flex: 1,\n  minWidth: 0,\n  textDecoration: 'none',\n  backgroundColor: 'transparent',\n  borderWidth: 0,\n  borderStyle: 'none',\n  padding: 0,\n  textAlign: 'left',\n  color: 'inherit',\n  font: 'inherit',\n});\n\nexport const actionSlot = sprinkles({\n  display: inlineFlex,\n  alignItems: 'center',\n});\n\nexport const dragHandle = style([\n  sprinkles({\n    display: inlineFlex,\n    alignItems: 'center',\n    justifyContent: 'center',\n    width: 6,\n    height: 6,\n    borderRadius: 'md',\n    borderWidth: 0,\n    borderStyle: 'none',\n    padding: 0,\n    backgroundColor: 'transparent',\n    color: 'textSecondary',\n    cursor: 'grab',\n  }),\n  stateSprinkles({\n    backgroundColor: {\n      hover: 'surfaceMuted',\n    },\n    color: {\n      hover: 'text',\n    },\n  }),\n  {\n    selectors: {\n      '&:active': {\n        cursor: 'grabbing',\n      },\n      '&:focus-visible': {\n        outline: `2px solid ${vars.colors.primary}`,\n        outlineOffset: '2px',\n      },\n    },\n  },\n]);\n\nexport const icon = sprinkles({\n  display: inlineFlex,\n  alignItems: 'center',\n  justifyContent: 'center',\n  width: 6,\n  height: 6,\n  flexShrink: 0,\n  color: 'inherit',\n});\n\nexport const iconNested = sprinkles({\n  width: 5,\n  height: 5,\n});\n\nexport const label = sprinkles({\n  flex: 1,\n  minWidth: 0,\n});\n\nexport const labelCollapsed = sprinkles({\n  display: 'none',\n});\n\nexport const badge = sprinkles({\n  display: inlineFlex,\n  alignItems: 'center',\n  justifyContent: 'center',\n  flexShrink: 0,\n});\n\nexport const badgeCollapsed = sprinkles({\n  display: 'none',\n});\n"],"mappings":""}

package/lib/esm/backoffice/molecules/sidebar_nav_section/SidebarNavSection.js

@@ -1,91 +1,188 @@
 import { cx as e } from "../../../theme/tools.js";
 import { ChevronDownSvg as t } from "../../../icons/ChevronDownSvg.js";
 import { SidebarNavItem as n } from "../sidebar_nav_item/SidebarNavItem.js";
-import { header as r, headerButton as i, headerButtonSidebarCollapsed as a, headerSidebarCollapsed as o, items as s, itemsNested as c, section as l, title as u, titleContent as d, titleIcon as f, titleSidebarCollapsed as p, toggleIcon as m, toggleIconCollapsed as h } from "./sidebarNavSection.css.js";
-import { useCallback as g, useId as _, useState as v } from "react";
-import { jsx as y, jsxs as b } from "react/jsx-runtime";
+import { CSS as r } from "../../../node_modules/@dnd-kit/utilities/dist/utilities.esm.js";
+import { DndContext as i, DragOverlay as a, KeyboardSensor as o, PointerSensor as s, TouchSensor as c, closestCenter as ee, useSensor as l, useSensors as u } from "../../../node_modules/@dnd-kit/core/dist/core.esm.js";
+import { SortableContext as d, sortableKeyboardCoordinates as f, useSortable as p, verticalListSortingStrategy as m } from "../../../node_modules/@dnd-kit/sortable/dist/sortable.esm.js";
+import { header as h, headerButton as g, headerButtonSidebarCollapsed as _, headerSidebarCollapsed as te, items as v, itemsNested as y, section as ne, sortableItem as b, sortableItemDragging as x, title as re, titleContent as S, titleIcon as ie, titleSidebarCollapsed as ae, toggleIcon as oe, toggleIconCollapsed as se } from "./sidebarNavSection.css.js";
+import { useCallback as C, useId as w, useMemo as T, useState as E } from "react";
+import { jsx as D, jsxs as O } from "react/jsx-runtime";
+import { useTranslation as ce } from "react-i18next";
 //#region src/backoffice/molecules/sidebar_nav_section/SidebarNavSection.tsx
-var x = ({ title: x, icon: S, items: C, collapsible: w = !1, isCollapsed: T, defaultCollapsed: E = !1, onCollapsedChange: D, collapsed: O = !1, className: k }) => {
-	let [A, j] = v(E), M = _(), N = _(), P = T ?? A, F = w, I = g(() => {
-		if (!F) return;
-		let e = !P;
-		T ?? j(e), D?.(e);
+var le = ({ item: t, isNested: i, sidebarCollapsed: a, dragHandleLabel: o, insertionPlacement: s }) => {
+	let { id: c, data: ee, ...l } = t, { attributes: u, listeners: d, setNodeRef: f, transform: m, transition: h, isDragging: g } = p({
+		id: c,
+		disabled: a
+	});
+	return /* @__PURE__ */ O("div", {
+		ref: f,
+		style: {
+			transform: r.Transform.toString(m),
+			transition: h
+		},
+		className: e(b, { [x]: g }),
+		children: [
+			s === "before" && /* @__PURE__ */ D("span", {
+				className: "_1rp5mg6k _1rp5mg6j txvbqbijg txvbqbglp txvbqb9i7 txvbqb1t7 txvbqbv3r",
+				"aria-hidden": "true"
+			}),
+			/* @__PURE__ */ D(n, {
+				...l,
+				collapsed: a,
+				nested: i,
+				dragHandleLabel: l.dragHandleLabel ?? o,
+				dragHandleProps: {
+					...u,
+					...d
+				},
+				isDragging: g
+			}),
+			s === "after" && /* @__PURE__ */ D("span", {
+				className: "_1rp5mg6k _1rp5mg6j txvbqbijg txvbqbglp txvbqb9i7 txvbqb1t7 txvbqbv3r",
+				"aria-hidden": "true"
+			})
+		]
+	});
+}, k = ({ title: r, icon: p, items: b, collapsible: x = !1, isCollapsed: k, defaultCollapsed: ue = !1, onCollapsedChange: A, collapsed: j = !1, reorder: M, className: de }) => {
+	let [fe, pe] = E(ue), N = w(), P = w(), { t: F } = ce("ui", { useSuspense: !1 }), [I, L] = E(null), [R, z] = E(null), B = k ?? fe, V = x, me = C(() => {
+		if (!V) return;
+		let e = !B;
+		k ?? pe(e), A?.(e);
 	}, [
-		F,
-		P,
-		T,
-		D
-	]), L;
-	typeof x == "string" && (L = x);
-	let R = e(u, { [p]: O }), z = e(m, { [h]: P }), B;
-	O && (B = L);
-	let V = null;
-	S != null && (V = /* @__PURE__ */ y("span", {
-		className: f,
+		V,
+		B,
+		k,
+		A
+	]), H;
+	typeof r == "string" && (H = r);
+	let U = e(re, { [ae]: j }), he = e(oe, { [se]: B }), W;
+	j && (W = H);
+	let G = null;
+	p != null && (G = /* @__PURE__ */ D("span", {
+		className: ie,
 		"aria-hidden": "true",
-		children: S
+		children: p
 	}));
-	let H = null;
-	x != null && (H = F ? /* @__PURE__ */ b("button", {
-		id: N,
+	let ge = M?.enabled === !0 && b.length > 1, K = T(() => b.map((e) => e.id), [b]), _e = u(l(s, { activationConstraint: { distance: 4 } }), l(c, { activationConstraint: {
+		delay: 180,
+		tolerance: 5
+	} }), l(o, { coordinateGetter: f })), q = C(() => {
+		L(null), z(null);
+	}, []), ve = C((e) => {
+		L(e.active.id), z(e.active.id);
+	}, []), ye = C((e) => {
+		let t = b.find((t) => t.id === String(e.active.id)) ?? null, n = null;
+		e.over != null && (n = b.find((t) => t.id === String(e.over?.id)) ?? null);
+		let r = t?.data?.id ?? String(e.active.id), i = null;
+		n != null && (i = n.data?.id ?? String(e.over?.id)), q(), !(i == null || r === i) && M?.onReorder(r, i);
+	}, [
+		b,
+		M,
+		q
+	]), J = T(() => I == null ? null : b.find((e) => e.id === String(I)) ?? null, [I, b]), Y = null, X = "before";
+	if (I != null && R != null && I !== R) {
+		let e = K.indexOf(String(I)), t = K.indexOf(String(R));
+		e !== -1 && t !== -1 && (Y = String(R), e < t && (X = "after"));
+	}
+	let be = F("navigation.sidebar.reorder.handle"), xe = F("navigation.sidebar.reorder.instructions"), Z = null;
+	r != null && (Z = V ? /* @__PURE__ */ O("button", {
+		id: P,
 		type: "button",
-		className: e(i, { [a]: O }),
-		onClick: I,
-		"aria-expanded": !P,
-		"aria-controls": M,
-		"aria-label": B,
-		title: B,
-		children: [/* @__PURE__ */ b("span", {
-			className: d,
-			children: [V, /* @__PURE__ */ y("span", {
-				className: R,
-				children: x
+		className: e(g, { [_]: j }),
+		onClick: me,
+		"aria-expanded": !B,
+		"aria-controls": N,
+		"aria-label": W,
+		title: W,
+		children: [/* @__PURE__ */ O("span", {
+			className: S,
+			children: [G, /* @__PURE__ */ D("span", {
+				className: U,
+				children: r
 			})]
-		}), !O && /* @__PURE__ */ y("span", {
-			className: z,
+		}), !j && /* @__PURE__ */ D("span", {
+			className: he,
 			"aria-hidden": "true",
-			children: /* @__PURE__ */ y(t, {
+			children: /* @__PURE__ */ D(t, {
 				width: 18,
 				height: 18
 			})
 		})]
-	}) : /* @__PURE__ */ y("div", {
-		className: e(r, { [o]: O }),
-		title: B,
-		children: /* @__PURE__ */ b("div", {
-			className: d,
-			id: N,
-			children: [V, /* @__PURE__ */ y("span", {
-				className: R,
-				children: x
+	}) : /* @__PURE__ */ D("div", {
+		className: e(h, { [te]: j }),
+		title: W,
+		children: /* @__PURE__ */ O("div", {
+			className: S,
+			id: P,
+			children: [G, /* @__PURE__ */ D("span", {
+				className: U,
+				children: r
 			})]
 		})
 	}));
-	let U = null;
-	if (!P) {
-		let t = x != null && !O;
-		U = /* @__PURE__ */ y("div", {
-			className: e(s, { [c]: t }),
-			id: M,
+	let Q = null;
+	if (!B) {
+		let t = r != null && !j;
+		Q = /* @__PURE__ */ D("div", {
+			className: e(v, { [y]: t }),
+			id: N,
 			role: "list",
-			children: C.map((e) => {
+			children: b.map((e) => {
 				let { id: r, data: i, ...a } = e;
-				return /* @__PURE__ */ y(n, {
+				return /* @__PURE__ */ D(n, {
 					...a,
-					collapsed: O,
+					collapsed: j,
 					nested: t
 				}, r);
 			})
-		});
+		}), ge && !j && (Q = /* @__PURE__ */ O(i, {
+			accessibility: { screenReaderInstructions: { draggable: xe } },
+			collisionDetection: ee,
+			sensors: _e,
+			onDragStart: ve,
+			onDragOver: (e) => {
+				z(e.over?.id ?? null);
+			},
+			onDragCancel: q,
+			onDragEnd: ye,
+			children: [/* @__PURE__ */ D(d, {
+				items: K,
+				strategy: m,
+				children: /* @__PURE__ */ D("div", {
+					className: e(v, { [y]: t }),
+					id: N,
+					role: "list",
+					children: b.map((e) => {
+						let n;
+						return e.id === Y && (n = X), /* @__PURE__ */ D(le, {
+							item: e,
+							isNested: t,
+							sidebarCollapsed: j,
+							dragHandleLabel: be,
+							insertionPlacement: n
+						}, e.id);
+					})
+				})
+			}), /* @__PURE__ */ D(a, { children: J != null && /* @__PURE__ */ O("div", {
+				className: "_1rp5mg6m _1rp5mg6l txvbqbnw7 txvbqbojg txvbqbpry txvbqbmjp txvbqb9ip txvbqbcp txvbqbao7 txvbqb1rp txvbqb8y txvbqbamp txvbqbv41 txvbqbv9z txvbqb1cp txvbqbwg txvbqb8q7",
+				children: [J.icon != null && /* @__PURE__ */ D("span", {
+					className: "_1rp5mg6n txvbqb9jg txvbqbcp txvbqbdoy txvbqbtxp txvbqbc6p txvbqbaj7",
+					children: J.icon
+				}), /* @__PURE__ */ D("span", {
+					className: "_1rp5mg6p _1rp5mg6o txvbqbk5y",
+					children: J.label
+				})]
+			}) })]
+		}));
 	}
-	let W;
-	return x != null && (W = N), /* @__PURE__ */ b("section", {
-		className: e(l, k),
-		"aria-labelledby": W,
-		children: [H, U]
+	let $;
+	return r != null && ($ = P), /* @__PURE__ */ O("section", {
+		className: e(ne, de),
+		"aria-labelledby": $,
+		children: [Z, Q]
 	});
 };
 //#endregion
-export { x as SidebarNavSection, x as default };
+export { k as SidebarNavSection, k as default };
 
 //# sourceMappingURL=SidebarNavSection.js.map