@declarion/react 0.48.2 → 0.50.0

package/dist-lib/SortHeaderMenu-NgjkW8QZ.js

@@ -0,0 +1,106 @@
+import { s as e } from "./DynamicIcon-DW5krHuX.js";
+import { cr as t, er as n } from "./useCurrentScreen-D3XH5ptA.js";
+import { useRef as r, useState as i } from "react";
+import { Fragment as a, jsx as o, jsxs as s } from "react/jsx-runtime";
+//#region src/components/pages/list/SortHeaderMenu.tsx
+function c({ field: c, activeDir: l, activeNulls: u, inMultiSort: d, canAppend: f, onApply: p, onAppend: m, onClearColumn: h, onClearAll: g }) {
+	let _ = r(null), [v, y] = i(!1), b = [
+		{
+			label: "Sort ascending, empty last",
+			dir: "asc",
+			nulls: "last",
+			icon: e.arrowUp
+		},
+		{
+			label: "Sort ascending, empty first",
+			dir: "asc",
+			nulls: "first",
+			icon: e.arrowUp
+		},
+		{
+			label: "Sort descending, empty last",
+			dir: "desc",
+			nulls: "last",
+			icon: e.arrowDown
+		},
+		{
+			label: "Sort descending, empty first",
+			dir: "desc",
+			nulls: "first",
+			icon: e.arrowDown
+		}
+	], x = u ?? "last", S = !d && f;
+	return /* @__PURE__ */ s(a, { children: [/* @__PURE__ */ o("button", {
+		ref: _,
+		type: "button",
+		"aria-label": `Sort options for ${c}`,
+		title: "Sort options. Shift-click the header to add this column to multi-sort.",
+		onClick: (e) => {
+			e.stopPropagation(), y((e) => !e);
+		},
+		style: {
+			display: "inline-flex",
+			alignItems: "center",
+			justifyContent: "center",
+			width: 16,
+			height: 16,
+			padding: 0,
+			background: "transparent",
+			border: "none",
+			color: "var(--text-3)",
+			cursor: "pointer",
+			opacity: v ? 1 : .55
+		},
+		children: /* @__PURE__ */ o(e.cheveron, { size: 12 })
+	}), /* @__PURE__ */ s(t, {
+		open: v,
+		anchor: _.current,
+		onClose: () => y(!1),
+		align: "start",
+		width: 240,
+		children: [
+			b.map((t) => {
+				let r = l === t.dir && x === t.nulls, i = t.icon;
+				return /* @__PURE__ */ o(n, {
+					icon: /* @__PURE__ */ s("span", {
+						style: {
+							display: "inline-flex",
+							alignItems: "center",
+							gap: 2
+						},
+						children: [/* @__PURE__ */ o(i, { size: 11 }), r ? /* @__PURE__ */ o(e.check, { size: 11 }) : null]
+					}),
+					onClick: () => {
+						y(!1), p(t.dir, t.nulls);
+					},
+					children: t.label
+				}, `${t.dir}:${t.nulls}`);
+			}),
+			S ? /* @__PURE__ */ s(a, { children: [/* @__PURE__ */ o(n, { divider: !0 }), /* @__PURE__ */ o(n, {
+				icon: /* @__PURE__ */ o(e.plus, { size: 11 }),
+				onClick: () => {
+					y(!1), m("asc", u);
+				},
+				children: "Add to multi-sort (Shift-click shortcut)"
+			})] }) : null,
+			/* @__PURE__ */ o(n, { divider: !0 }),
+			/* @__PURE__ */ o(n, {
+				disabled: l === !1,
+				onClick: () => {
+					y(!1), l !== !1 && h();
+				},
+				children: "Clear sort on this column"
+			}),
+			/* @__PURE__ */ o(n, { divider: !0 }),
+			/* @__PURE__ */ o(n, {
+				disabled: l === !1,
+				onClick: () => {
+					y(!1), g();
+				},
+				children: "Clear all sorts"
+			})
+		]
+	})] });
+}
+//#endregion
+export { c as SortHeaderMenu };