@lucasbernardosn/react-table 0.0.0-stage → 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Lucas Bernardo
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/_virtual/_rolldown/runtime.js

@@ -0,0 +1,13 @@
+//#region \0rolldown/runtime.js
+var __defProp = Object.defineProperty;
+var __exportAll = (all, no_symbols) => {
+	let target = {};
+	for (var name in all) __defProp(target, name, {
+		get: all[name],
+		enumerable: true
+	});
+	if (!no_symbols) __defProp(target, Symbol.toStringTag, { value: "Module" });
+	return target;
+};
+//#endregion
+export { __exportAll };

package/dist/components/column-menu/column-menu-check.d.ts

@@ -0,0 +1,8 @@
+//#region src/components/column-menu/column-menu-check.d.ts
+/**
+ * O check do estado atual num item do menu da coluna, encostado à direita. Decorativo, como todo
+ * `Icon`: o `Menu` do `ui` ainda não tem item de rádio, que anunciaria o marcado.
+ */
+export declare const ColumnMenuCheck: () => import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=column-menu-check.d.ts.map

package/dist/components/column-menu/column-menu-check.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"column-menu-check.d.ts","names":[],"sources":["../../../src/components/column-menu/column-menu-check.tsx"],"mappings":";;;;;qBAOa,uCAAe,IAAA"}

package/dist/components/column-menu/column-menu-check.js

@@ -0,0 +1,17 @@
+import { Icon } from "@lucasbernardosn/react-ui/display/icon";
+import { CheckIcon } from "@phosphor-icons/react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/column-menu/column-menu-check.tsx
+/**
+* O check do estado atual num item do menu da coluna, encostado à direita. Decorativo, como todo
+* `Icon`: o `Menu` do `ui` ainda não tem item de rádio, que anunciaria o marcado.
+*/
+const ColumnMenuCheck = () => /* @__PURE__ */ jsx(Icon, {
+	"data-component": "ColumnMenu.Check",
+	render: /* @__PURE__ */ jsx(CheckIcon, {}),
+	className: "ms-auto"
+});
+//#endregion
+export { ColumnMenuCheck };
+
+//# sourceMappingURL=column-menu-check.js.map

package/dist/components/column-menu/column-menu-check.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"column-menu-check.js","names":[],"sources":["../../../src/components/column-menu/column-menu-check.tsx"],"sourcesContent":["import { Icon } from '@lucasbernardosn/react-ui/display/icon';\nimport { CheckIcon } from '@phosphor-icons/react';\n\n/**\n * O check do estado atual num item do menu da coluna, encostado à direita. Decorativo, como todo\n * `Icon`: o `Menu` do `ui` ainda não tem item de rádio, que anunciaria o marcado.\n */\nexport const ColumnMenuCheck = () => (\n  <Icon\n    data-component=\"ColumnMenu.Check\"\n    render={<CheckIcon />}\n    className=\"ms-auto\"\n  />\n);\n"],"mappings":";;;;;;;;AAOA,MAAa,wBACX,oBAAC,MAAD;CACE,kBAAe;CACf,QAAQ,oBAAC,WAAD,CAAY,CAAA;CACpB,WAAU;AACX,CAAA"}

package/dist/components/column-menu/column-menu-hide-item.d.ts

@@ -0,0 +1,23 @@
+import { HeaderWith } from "../../types/table-with.js";
+import "../../types/index.js";
+import { ColumnMenuLabels } from "./column-menu-labels.js";
+import { RowData, TableFeatures } from "@tanstack/react-table";
+import { Menu } from "@lucasbernardosn/react-ui/overlays/menu";
+import { MergeOverride } from "@lucasbernardosn/utils";
+//#region src/components/column-menu/column-menu-hide-item.d.ts
+export type ColumnMenuHideItemProps<TFeatures extends TableFeatures, TData extends RowData> = MergeOverride<Menu.ItemProps, {
+  /** O header da coluna. Exige `columnVisibilityFeature`. */
+  header: HeaderWith<TFeatures, TData, 'columnVisibilityFeature'>;
+  /** O texto do item, em `hide`; os outros textos não se aplicam aqui. */
+  labels?: Partial<ColumnMenuLabels>;
+}>;
+/**
+ * O item que esconde a coluna. Ela volta pelo `ColumnsPanel`, ou pelo estado de visibilidade no
+ * app. Numa coluna com `enableHiding: false`, não renderiza.
+ */
+export declare const ColumnMenuHideItem: {
+  <TFeatures extends TableFeatures, TData extends RowData>(props: ColumnMenuHideItemProps<TFeatures, TData>): import("react").JSX.Element | null;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=column-menu-hide-item.d.ts.map

package/dist/components/column-menu/column-menu-hide-item.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"column-menu-hide-item.d.ts","names":[],"sources":["../../../src/components/column-menu/column-menu-hide-item.tsx"],"mappings":";;;;;;;YAYY,wBACV,kBAAkB,eAClB,cAAc,WACZ,cACF,KAAK;;EAGH,QAAQ,WAAW,WAAW;;EAE9B,SAAS,QAAQ;;;;;;qBAQR;GACX,kBAAkB,eAClB,cAAc,SAAO,OAEd,wBAAwB,WAAW,yBAAM,IAAA"}

package/dist/components/column-menu/column-menu-hide-item.js

@@ -0,0 +1,28 @@
+import { COLUMN_MENU_DEFAULT_LABELS } from "./column-menu-labels.js";
+import { Icon } from "@lucasbernardosn/react-ui/display/icon";
+import { EyeSlashIcon } from "@phosphor-icons/react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { mergeProps } from "@base-ui/react";
+import { Menu } from "@lucasbernardosn/react-ui/overlays/menu";
+//#region src/components/column-menu/column-menu-hide-item.tsx
+/**
+* O item que esconde a coluna. Ela volta pelo `ColumnsPanel`, ou pelo estado de visibilidade no
+* app. Numa coluna com `enableHiding: false`, não renderiza.
+*/
+const ColumnMenuHideItem = (props) => {
+	const { header, labels, children, ...rest } = props;
+	const { column } = header;
+	if (!column.getCanHide()) return null;
+	return /* @__PURE__ */ jsx(Menu.Item, {
+		...mergeProps({
+			"data-component": "ColumnMenu.HideItem",
+			onClick: () => column.toggleVisibility(false)
+		}, rest),
+		children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Icon, { render: /* @__PURE__ */ jsx(EyeSlashIcon, {}) }), labels?.hide ?? COLUMN_MENU_DEFAULT_LABELS.hide] })
+	});
+};
+ColumnMenuHideItem.displayName = "ColumnMenu.HideItem";
+//#endregion
+export { ColumnMenuHideItem };
+
+//# sourceMappingURL=column-menu-hide-item.js.map

package/dist/components/column-menu/column-menu-hide-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"column-menu-hide-item.js","names":[],"sources":["../../../src/components/column-menu/column-menu-hide-item.tsx"],"sourcesContent":["import { mergeProps } from '@base-ui/react';\nimport { Icon } from '@lucasbernardosn/react-ui/display/icon';\nimport { Menu } from '@lucasbernardosn/react-ui/overlays/menu';\nimport type { MergeOverride } from '@lucasbernardosn/utils';\nimport { EyeSlashIcon } from '@phosphor-icons/react';\nimport type { RowData, TableFeatures } from '@tanstack/react-table';\nimport type { HeaderWith } from '../../types';\nimport {\n  COLUMN_MENU_DEFAULT_LABELS,\n  type ColumnMenuLabels,\n} from './column-menu-labels';\n\nexport type ColumnMenuHideItemProps<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n> = MergeOverride<\n  Menu.ItemProps,\n  {\n    /** O header da coluna. Exige `columnVisibilityFeature`. */\n    header: HeaderWith<TFeatures, TData, 'columnVisibilityFeature'>;\n    /** O texto do item, em `hide`; os outros textos não se aplicam aqui. */\n    labels?: Partial<ColumnMenuLabels>;\n  }\n>;\n\n/**\n * O item que esconde a coluna. Ela volta pelo `ColumnsPanel`, ou pelo estado de visibilidade no\n * app. Numa coluna com `enableHiding: false`, não renderiza.\n */\nexport const ColumnMenuHideItem = <\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n>(\n  props: ColumnMenuHideItemProps<TFeatures, TData>,\n) => {\n  const { header, labels, children, ...rest } = props;\n\n  const { column } = header;\n\n  if (!column.getCanHide()) {\n    return null;\n  }\n\n  return (\n    <Menu.Item\n      {...mergeProps(\n        {\n          'data-component': 'ColumnMenu.HideItem',\n          onClick: () => column.toggleVisibility(false),\n        },\n        rest,\n      )}\n    >\n      {children ?? (\n        <>\n          <Icon render={<EyeSlashIcon />} />\n          {labels?.hide ?? COLUMN_MENU_DEFAULT_LABELS.hide}\n        </>\n      )}\n    </Menu.Item>\n  );\n};\n\nColumnMenuHideItem.displayName = 'ColumnMenu.HideItem';\n"],"mappings":";;;;;;;;;;;AA6BA,MAAa,sBAIX,UACG;CACH,MAAM,EAAE,QAAQ,QAAQ,UAAU,GAAG,SAAS;CAE9C,MAAM,EAAE,WAAW;CAEnB,IAAI,CAAC,OAAO,WAAW,GACrB,OAAO;CAGT,OACE,oBAAC,KAAK,MAAN;EACE,GAAI,WACF;GACE,kBAAkB;GAClB,eAAe,OAAO,iBAAiB,KAAK;EAC9C,GACA,IACF;EAEC,UAAA,YACC,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,MAAD,EAAM,QAAQ,oBAAC,cAAD,CAAe,CAAA,EAAI,CAAA,GAChC,QAAQ,QAAQ,2BAA2B,IAC5C,EAAA,CAAA;CAEK,CAAA;AAEf;AAEA,mBAAmB,cAAc"}

package/dist/components/column-menu/column-menu-labels.d.ts

@@ -0,0 +1,21 @@
+//#region src/components/column-menu/column-menu-labels.d.ts
+/** O texto de cada item do menu da coluna. */
+export type ColumnMenuLabels = {
+  /** Ordena a coluna em ordem crescente. */
+  sortAsc: string;
+  /** Ordena a coluna em ordem decrescente. */
+  sortDesc: string;
+  /** Tira a coluna da ordenação. */
+  clearSorting: string;
+  /** Fixa a coluna no início. */
+  pinStart: string;
+  /** Fixa a coluna no fim. */
+  pinEnd: string;
+  /** Solta a coluna fixada. */
+  unpin: string;
+  /** Esconde a coluna. */
+  hide: string;
+};
+export declare const COLUMN_MENU_DEFAULT_LABELS: ColumnMenuLabels;
+//#endregion
+//# sourceMappingURL=column-menu-labels.d.ts.map

package/dist/components/column-menu/column-menu-labels.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"column-menu-labels.d.ts","names":[],"sources":["../../../src/components/column-menu/column-menu-labels.ts"],"mappings":";;YACY;;EAEV;;EAEA;;EAEA;;EAEA;;EAEA;;EAEA;;EAEA;;qBAGW,4BAA4B"}

package/dist/components/column-menu/column-menu-labels.js

@@ -0,0 +1,14 @@
+//#region src/components/column-menu/column-menu-labels.ts
+const COLUMN_MENU_DEFAULT_LABELS = {
+	sortAsc: "Crescente",
+	sortDesc: "Decrescente",
+	clearSorting: "Remover ordenação",
+	pinStart: "Fixar no início",
+	pinEnd: "Fixar no fim",
+	unpin: "Desafixar",
+	hide: "Ocultar coluna"
+};
+//#endregion
+export { COLUMN_MENU_DEFAULT_LABELS };
+
+//# sourceMappingURL=column-menu-labels.js.map

package/dist/components/column-menu/column-menu-labels.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"column-menu-labels.js","names":[],"sources":["../../../src/components/column-menu/column-menu-labels.ts"],"sourcesContent":["/** O texto de cada item do menu da coluna. */\nexport type ColumnMenuLabels = {\n  /** Ordena a coluna em ordem crescente. */\n  sortAsc: string;\n  /** Ordena a coluna em ordem decrescente. */\n  sortDesc: string;\n  /** Tira a coluna da ordenação. */\n  clearSorting: string;\n  /** Fixa a coluna no início. */\n  pinStart: string;\n  /** Fixa a coluna no fim. */\n  pinEnd: string;\n  /** Solta a coluna fixada. */\n  unpin: string;\n  /** Esconde a coluna. */\n  hide: string;\n};\n\nexport const COLUMN_MENU_DEFAULT_LABELS: ColumnMenuLabels = {\n  sortAsc: 'Crescente',\n  sortDesc: 'Decrescente',\n  clearSorting: 'Remover ordenação',\n  pinStart: 'Fixar no início',\n  pinEnd: 'Fixar no fim',\n  unpin: 'Desafixar',\n  hide: 'Ocultar coluna',\n};\n"],"mappings":";AAkBA,MAAa,6BAA+C;CAC1D,SAAS;CACT,UAAU;CACV,cAAc;CACd,UAAU;CACV,QAAQ;CACR,OAAO;CACP,MAAM;AACR"}

package/dist/components/column-menu/column-menu-pin-items.d.ts

@@ -0,0 +1,25 @@
+import { HeaderWith } from "../../types/table-with.js";
+import "../../types/index.js";
+import { ColumnMenuLabels } from "./column-menu-labels.js";
+import { RowData, TableFeatures } from "@tanstack/react-table";
+import { Menu } from "@lucasbernardosn/react-ui/overlays/menu";
+import { MergeOverride } from "@lucasbernardosn/utils";
+//#region src/components/column-menu/column-menu-pin-items.d.ts
+export type ColumnMenuPinItemsProps<TFeatures extends TableFeatures, TData extends RowData> = MergeOverride<Menu.GroupProps, {
+  /** O header da coluna. Exige `columnPinningFeature`. */
+  header: HeaderWith<TFeatures, TData, 'columnPinningFeature'>;
+  /** O texto dos itens; os que faltam ficam com o padrão. */
+  labels?: Partial<ColumnMenuLabels>;
+}>;
+/**
+ * Os itens da fixação: no início e no fim, com um check no lado atual, e "Desafixar" com a coluna
+ * fixada. Nos dois lados, a coluna entra junto do centro, depois das que já estavam fixadas: as
+ * das pontas, como a seleção e as ações, continuam nas pontas. Num header de grupo, fixa as
+ * colunas do grupo. Numa coluna com `enablePinning: false`, não renderiza.
+ */
+export declare const ColumnMenuPinItems: {
+  <TFeatures extends TableFeatures, TData extends RowData>(props: ColumnMenuPinItemsProps<TFeatures, TData>): import("react").JSX.Element | null;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=column-menu-pin-items.d.ts.map

package/dist/components/column-menu/column-menu-pin-items.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"column-menu-pin-items.d.ts","names":[],"sources":["../../../src/components/column-menu/column-menu-pin-items.tsx"],"mappings":";;;;;;;YAaY,wBACV,kBAAkB,eAClB,cAAc,WACZ,cACF,KAAK;;EAGH,QAAQ,WAAW,WAAW;;EAE9B,SAAS,QAAQ;;;;;;;;qBAUR;GACX,kBAAkB,eAClB,cAAc,SAAO,OAEd,wBAAwB,WAAW,yBAAM,IAAA"}

package/dist/components/column-menu/column-menu-pin-items.js

@@ -0,0 +1,65 @@
+import { ColumnMenuCheck } from "./column-menu-check.js";
+import { COLUMN_MENU_DEFAULT_LABELS } from "./column-menu-labels.js";
+import { Icon } from "@lucasbernardosn/react-ui/display/icon";
+import { PushPinIcon, PushPinSlashIcon } from "@phosphor-icons/react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Menu } from "@lucasbernardosn/react-ui/overlays/menu";
+import { useSelector } from "@tanstack/react-store";
+//#region src/components/column-menu/column-menu-pin-items.tsx
+/**
+* Os itens da fixação: no início e no fim, com um check no lado atual, e "Desafixar" com a coluna
+* fixada. Nos dois lados, a coluna entra junto do centro, depois das que já estavam fixadas: as
+* das pontas, como a seleção e as ações, continuam nas pontas. Num header de grupo, fixa as
+* colunas do grupo. Numa coluna com `enablePinning: false`, não renderiza.
+*/
+const ColumnMenuPinItems = (props) => {
+	const { header, labels, ...rest } = props;
+	const { column } = header;
+	/** Re-renderiza quando esta coluna é fixada ou solta. */
+	const pinned = useSelector(column.table.atoms.columnPinning, () => column.getIsPinned());
+	if (!column.getCanPin()) return null;
+	const getLabel = (key) => labels?.[key] ?? COLUMN_MENU_DEFAULT_LABELS[key];
+	/**
+	* Fixa no começo da lista do fim, a mais perto do centro. O `column.pin('end')` acrescenta no
+	* fim da lista, que é a borda da tabela: a coluna passaria das que já estavam fixadas, como a de
+	* ações, enquanto no início ela fica junto do centro. Usa as colunas-folha, como o `pin`.
+	*/
+	const pinToEnd = () => {
+		const columnIds = column.getLeafColumns().map((leaf) => leaf.id);
+		column.table.setColumnPinning((old) => ({
+			start: old.start.filter((id) => !columnIds.includes(id)),
+			end: [...columnIds, ...old.end.filter((id) => !columnIds.includes(id))]
+		}));
+	};
+	return /* @__PURE__ */ jsxs(Menu.Group, {
+		"data-component": "ColumnMenu.PinItems",
+		...rest,
+		children: [
+			/* @__PURE__ */ jsxs(Menu.Item, {
+				onClick: () => column.pin("start"),
+				children: [
+					/* @__PURE__ */ jsx(Icon, { render: /* @__PURE__ */ jsx(PushPinIcon, {}) }),
+					getLabel("pinStart"),
+					pinned === "start" && /* @__PURE__ */ jsx(ColumnMenuCheck, {})
+				]
+			}),
+			/* @__PURE__ */ jsxs(Menu.Item, {
+				onClick: pinToEnd,
+				children: [
+					/* @__PURE__ */ jsx(Icon, { render: /* @__PURE__ */ jsx(PushPinIcon, {}) }),
+					getLabel("pinEnd"),
+					pinned === "end" && /* @__PURE__ */ jsx(ColumnMenuCheck, {})
+				]
+			}),
+			pinned && /* @__PURE__ */ jsxs(Menu.Item, {
+				onClick: () => column.pin(false),
+				children: [/* @__PURE__ */ jsx(Icon, { render: /* @__PURE__ */ jsx(PushPinSlashIcon, {}) }), getLabel("unpin")]
+			})
+		]
+	});
+};
+ColumnMenuPinItems.displayName = "ColumnMenu.PinItems";
+//#endregion
+export { ColumnMenuPinItems };
+
+//# sourceMappingURL=column-menu-pin-items.js.map

package/dist/components/column-menu/column-menu-pin-items.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"column-menu-pin-items.js","names":[],"sources":["../../../src/components/column-menu/column-menu-pin-items.tsx"],"sourcesContent":["import { Icon } from '@lucasbernardosn/react-ui/display/icon';\nimport { Menu } from '@lucasbernardosn/react-ui/overlays/menu';\nimport type { MergeOverride } from '@lucasbernardosn/utils';\nimport { PushPinIcon, PushPinSlashIcon } from '@phosphor-icons/react';\nimport { useSelector } from '@tanstack/react-store';\nimport type { RowData, TableFeatures } from '@tanstack/react-table';\nimport type { HeaderWith } from '../../types';\nimport { ColumnMenuCheck } from './column-menu-check';\nimport {\n  COLUMN_MENU_DEFAULT_LABELS,\n  type ColumnMenuLabels,\n} from './column-menu-labels';\n\nexport type ColumnMenuPinItemsProps<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n> = MergeOverride<\n  Menu.GroupProps,\n  {\n    /** O header da coluna. Exige `columnPinningFeature`. */\n    header: HeaderWith<TFeatures, TData, 'columnPinningFeature'>;\n    /** O texto dos itens; os que faltam ficam com o padrão. */\n    labels?: Partial<ColumnMenuLabels>;\n  }\n>;\n\n/**\n * Os itens da fixação: no início e no fim, com um check no lado atual, e \"Desafixar\" com a coluna\n * fixada. Nos dois lados, a coluna entra junto do centro, depois das que já estavam fixadas: as\n * das pontas, como a seleção e as ações, continuam nas pontas. Num header de grupo, fixa as\n * colunas do grupo. Numa coluna com `enablePinning: false`, não renderiza.\n */\nexport const ColumnMenuPinItems = <\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n>(\n  props: ColumnMenuPinItemsProps<TFeatures, TData>,\n) => {\n  const { header, labels, ...rest } = props;\n\n  const { column } = header;\n\n  /** Re-renderiza quando esta coluna é fixada ou solta. */\n  const pinned = useSelector(column.table.atoms.columnPinning, () =>\n    column.getIsPinned(),\n  );\n\n  if (!column.getCanPin()) {\n    return null;\n  }\n\n  const getLabel = (key: keyof ColumnMenuLabels) =>\n    labels?.[key] ?? COLUMN_MENU_DEFAULT_LABELS[key];\n\n  /**\n   * Fixa no começo da lista do fim, a mais perto do centro. O `column.pin('end')` acrescenta no\n   * fim da lista, que é a borda da tabela: a coluna passaria das que já estavam fixadas, como a de\n   * ações, enquanto no início ela fica junto do centro. Usa as colunas-folha, como o `pin`.\n   */\n  const pinToEnd = () => {\n    const columnIds = column.getLeafColumns().map((leaf) => leaf.id);\n\n    column.table.setColumnPinning((old) => ({\n      start: old.start.filter((id) => !columnIds.includes(id)),\n      end: [...columnIds, ...old.end.filter((id) => !columnIds.includes(id))],\n    }));\n  };\n\n  return (\n    <Menu.Group\n      data-component=\"ColumnMenu.PinItems\"\n      {...rest}\n    >\n      <Menu.Item onClick={() => column.pin('start')}>\n        <Icon render={<PushPinIcon />} />\n        {getLabel('pinStart')}\n        {pinned === 'start' && <ColumnMenuCheck />}\n      </Menu.Item>\n\n      <Menu.Item onClick={pinToEnd}>\n        <Icon render={<PushPinIcon />} />\n        {getLabel('pinEnd')}\n        {pinned === 'end' && <ColumnMenuCheck />}\n      </Menu.Item>\n\n      {pinned && (\n        <Menu.Item onClick={() => column.pin(false)}>\n          <Icon render={<PushPinSlashIcon />} />\n          {getLabel('unpin')}\n        </Menu.Item>\n      )}\n    </Menu.Group>\n  );\n};\n\nColumnMenuPinItems.displayName = 'ColumnMenu.PinItems';\n"],"mappings":";;;;;;;;;;;;;;AAgCA,MAAa,sBAIX,UACG;CACH,MAAM,EAAE,QAAQ,QAAQ,GAAG,SAAS;CAEpC,MAAM,EAAE,WAAW;;CAGnB,MAAM,SAAS,YAAY,OAAO,MAAM,MAAM,qBAC5C,OAAO,YAAY,CACrB;CAEA,IAAI,CAAC,OAAO,UAAU,GACpB,OAAO;CAGT,MAAM,YAAY,QAChB,SAAS,QAAQ,2BAA2B;;;;;;CAO9C,MAAM,iBAAiB;EACrB,MAAM,YAAY,OAAO,eAAe,CAAC,CAAC,KAAK,SAAS,KAAK,EAAE;EAE/D,OAAO,MAAM,kBAAkB,SAAS;GACtC,OAAO,IAAI,MAAM,QAAQ,OAAO,CAAC,UAAU,SAAS,EAAE,CAAC;GACvD,KAAK,CAAC,GAAG,WAAW,GAAG,IAAI,IAAI,QAAQ,OAAO,CAAC,UAAU,SAAS,EAAE,CAAC,CAAC;EACxE,EAAE;CACJ;CAEA,OACE,qBAAC,KAAK,OAAN;EACE,kBAAe;EACf,GAAI;EAFN,UAAA;GAIE,qBAAC,KAAK,MAAN;IAAW,eAAe,OAAO,IAAI,OAAO;IAA5C,UAAA;KACE,oBAAC,MAAD,EAAM,QAAQ,oBAAC,aAAD,CAAc,CAAA,EAAI,CAAA;KAC/B,SAAS,UAAU;KACnB,WAAW,WAAW,oBAAC,iBAAD,CAAkB,CAAA;IAChC;;GAEX,qBAAC,KAAK,MAAN;IAAW,SAAS;IAApB,UAAA;KACE,oBAAC,MAAD,EAAM,QAAQ,oBAAC,aAAD,CAAc,CAAA,EAAI,CAAA;KAC/B,SAAS,QAAQ;KACjB,WAAW,SAAS,oBAAC,iBAAD,CAAkB,CAAA;IAC9B;;GAEV,UACC,qBAAC,KAAK,MAAN;IAAW,eAAe,OAAO,IAAI,KAAK;IAA1C,UAAA,CACE,oBAAC,MAAD,EAAM,QAAQ,oBAAC,kBAAD,CAAmB,CAAA,EAAI,CAAA,GACpC,SAAS,OAAO,CACR;;EAEH;;AAEhB;AAEA,mBAAmB,cAAc"}

package/dist/components/column-menu/column-menu-popup.d.ts

@@ -0,0 +1,39 @@
+import { ColumnMenuLabels } from "./column-menu-labels.js";
+import { Header, RowData, TableFeatures } from "@tanstack/react-table";
+import { Menu } from "@lucasbernardosn/react-ui/overlays/menu";
+import { MergeOverride } from "@lucasbernardosn/utils";
+//#region src/components/column-menu/column-menu-popup.d.ts
+export type ColumnMenuPopupProps<TFeatures extends TableFeatures, TData extends RowData> = MergeOverride<Menu.PopupProps, {
+  /** O header da coluna. */
+  header: Header<TFeatures, TData>;
+  /** O texto dos itens padrão; os que faltam ficam com o padrão. Sem efeito com `children`. */
+  labels?: Partial<ColumnMenuLabels>;
+  /** As props do `Menu.Positioner`, como `side` e `align`. */
+  positionerProps?: Menu.PositionerProps;
+}>;
+/**
+ * A caixa do menu da coluna, já com o `Menu.Portal` e o `Menu.Positioner`. As props passam para o
+ * `Menu.Popup`. Abre encostada no header, e a largura mínima cabe o item mais longo: sem ela, o
+ * menu cresceria quando o "Remover ordenação" aparece.
+ *
+ * Sem `children`, mostra os grupos padrão separados por linhas: ordenação
+ * (`ColumnMenu.SortItems`), fixação (`ColumnMenu.PinItems`) e visibilidade
+ * (`ColumnMenu.HideItem`). Cada grupo só aparece com a feature registrada na tabela e permitida na
+ * coluna. Com `children`, eles substituem os grupos, para escolher, reordenar ou somar itens
+ * próprios com o `Menu.Item`.
+ *
+ * @example
+ * ```tsx
+ * <ColumnMenu.Popup header={header}>
+ *   <ColumnMenu.SortItems header={header} />
+ *   <Menu.Separator />
+ *   <Menu.Item onClick={openFilter}>Filtrar</Menu.Item>
+ * </ColumnMenu.Popup>
+ * ```
+ */
+export declare const ColumnMenuPopup: {
+  <TFeatures extends TableFeatures, TData extends RowData>(props: ColumnMenuPopupProps<TFeatures, TData>): import("react").JSX.Element;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=column-menu-popup.d.ts.map

package/dist/components/column-menu/column-menu-popup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"column-menu-popup.d.ts","names":[],"sources":["../../../src/components/column-menu/column-menu-popup.tsx"],"mappings":";;;;;YAWY,qBACV,kBAAkB,eAClB,cAAc,WACZ,cACF,KAAK;;EAGH,QAAQ,OAAO,WAAW;;EAE1B,SAAS,QAAQ;;EAEjB,kBAAkB,KAAK;;;;;;;;;;;;;;;;;;;;;;qBAwBd;GACX,kBAAkB,eAClB,cAAc,SAAO,OAEd,qBAAqB,WAAW,yBAAM,IAAA"}

package/dist/components/column-menu/column-menu-popup.js

@@ -0,0 +1,66 @@
+import { hasHeaderFeature } from "../../utils/has-feature.js";
+import { ColumnMenuHideItem } from "./column-menu-hide-item.js";
+import { ColumnMenuPinItems } from "./column-menu-pin-items.js";
+import { ColumnMenuSortItems } from "./column-menu-sort-items.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Menu } from "@lucasbernardosn/react-ui/overlays/menu";
+import { mergeStateClassNames } from "@lucasbernardosn/react-ui/utils";
+import { Fragment as Fragment$1 } from "react";
+//#region src/components/column-menu/column-menu-popup.tsx
+/**
+* A caixa do menu da coluna, já com o `Menu.Portal` e o `Menu.Positioner`. As props passam para o
+* `Menu.Popup`. Abre encostada no header, e a largura mínima cabe o item mais longo: sem ela, o
+* menu cresceria quando o "Remover ordenação" aparece.
+*
+* Sem `children`, mostra os grupos padrão separados por linhas: ordenação
+* (`ColumnMenu.SortItems`), fixação (`ColumnMenu.PinItems`) e visibilidade
+* (`ColumnMenu.HideItem`). Cada grupo só aparece com a feature registrada na tabela e permitida na
+* coluna. Com `children`, eles substituem os grupos, para escolher, reordenar ou somar itens
+* próprios com o `Menu.Item`.
+*
+* @example
+* ```tsx
+* <ColumnMenu.Popup header={header}>
+*   <ColumnMenu.SortItems header={header} />
+*   <Menu.Separator />
+*   <Menu.Item onClick={openFilter}>Filtrar</Menu.Item>
+* </ColumnMenu.Popup>
+* ```
+*/
+const ColumnMenuPopup = (props) => {
+	const { header, labels, positionerProps, className, children, ...rest } = props;
+	/**
+	* Os grupos padrão que a coluna aceita. A conta é feita aqui, e não pelo `null` de cada grupo,
+	* para a linha separar só os grupos que aparecem.
+	*/
+	const groups = [
+		hasHeaderFeature(header, "rowSortingFeature") && header.column.getCanSort() && /* @__PURE__ */ jsx(ColumnMenuSortItems, {
+			header,
+			labels
+		}, "sort"),
+		hasHeaderFeature(header, "columnPinningFeature") && header.column.getCanPin() && /* @__PURE__ */ jsx(ColumnMenuPinItems, {
+			header,
+			labels
+		}, "pin"),
+		hasHeaderFeature(header, "columnVisibilityFeature") && header.column.getCanHide() && /* @__PURE__ */ jsx(ColumnMenuHideItem, {
+			header,
+			labels
+		}, "hide")
+	].filter((group) => group !== false);
+	return /* @__PURE__ */ jsx(Menu.Portal, { children: /* @__PURE__ */ jsx(Menu.Positioner, {
+		sideOffset: 0,
+		disableAnchorTracking: true,
+		...positionerProps,
+		children: /* @__PURE__ */ jsx(Menu.Popup, {
+			"data-component": "ColumnMenu.Popup",
+			className: mergeStateClassNames(["min-w-48"], className),
+			...rest,
+			children: children ?? groups.map((group, index) => /* @__PURE__ */ jsxs(Fragment$1, { children: [index > 0 && /* @__PURE__ */ jsx(Menu.Separator, {}), group] }, group.key))
+		})
+	}) });
+};
+ColumnMenuPopup.displayName = "ColumnMenu.Popup";
+//#endregion
+export { ColumnMenuPopup };
+
+//# sourceMappingURL=column-menu-popup.js.map

package/dist/components/column-menu/column-menu-popup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"column-menu-popup.js","names":["Fragment"],"sources":["../../../src/components/column-menu/column-menu-popup.tsx"],"sourcesContent":["import { Menu } from '@lucasbernardosn/react-ui/overlays/menu';\nimport { mergeStateClassNames } from '@lucasbernardosn/react-ui/utils';\nimport type { MergeOverride } from '@lucasbernardosn/utils';\nimport type { Header, RowData, TableFeatures } from '@tanstack/react-table';\nimport { Fragment } from 'react';\nimport { hasHeaderFeature } from '../../utils';\nimport { ColumnMenuHideItem } from './column-menu-hide-item';\nimport type { ColumnMenuLabels } from './column-menu-labels';\nimport { ColumnMenuPinItems } from './column-menu-pin-items';\nimport { ColumnMenuSortItems } from './column-menu-sort-items';\n\nexport type ColumnMenuPopupProps<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n> = MergeOverride<\n  Menu.PopupProps,\n  {\n    /** O header da coluna. */\n    header: Header<TFeatures, TData>;\n    /** O texto dos itens padrão; os que faltam ficam com o padrão. Sem efeito com `children`. */\n    labels?: Partial<ColumnMenuLabels>;\n    /** As props do `Menu.Positioner`, como `side` e `align`. */\n    positionerProps?: Menu.PositionerProps;\n  }\n>;\n\n/**\n * A caixa do menu da coluna, já com o `Menu.Portal` e o `Menu.Positioner`. As props passam para o\n * `Menu.Popup`. Abre encostada no header, e a largura mínima cabe o item mais longo: sem ela, o\n * menu cresceria quando o \"Remover ordenação\" aparece.\n *\n * Sem `children`, mostra os grupos padrão separados por linhas: ordenação\n * (`ColumnMenu.SortItems`), fixação (`ColumnMenu.PinItems`) e visibilidade\n * (`ColumnMenu.HideItem`). Cada grupo só aparece com a feature registrada na tabela e permitida na\n * coluna. Com `children`, eles substituem os grupos, para escolher, reordenar ou somar itens\n * próprios com o `Menu.Item`.\n *\n * @example\n * ```tsx\n * <ColumnMenu.Popup header={header}>\n *   <ColumnMenu.SortItems header={header} />\n *   <Menu.Separator />\n *   <Menu.Item onClick={openFilter}>Filtrar</Menu.Item>\n * </ColumnMenu.Popup>\n * ```\n */\nexport const ColumnMenuPopup = <\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n>(\n  props: ColumnMenuPopupProps<TFeatures, TData>,\n) => {\n  const { header, labels, positionerProps, className, children, ...rest } =\n    props;\n\n  /**\n   * Os grupos padrão que a coluna aceita. A conta é feita aqui, e não pelo `null` de cada grupo,\n   * para a linha separar só os grupos que aparecem.\n   */\n  const groups = [\n    hasHeaderFeature(header, 'rowSortingFeature') &&\n      header.column.getCanSort() && (\n        <ColumnMenuSortItems\n          key=\"sort\"\n          header={header}\n          labels={labels}\n        />\n      ),\n    hasHeaderFeature(header, 'columnPinningFeature') &&\n      header.column.getCanPin() && (\n        <ColumnMenuPinItems\n          key=\"pin\"\n          header={header}\n          labels={labels}\n        />\n      ),\n    hasHeaderFeature(header, 'columnVisibilityFeature') &&\n      header.column.getCanHide() && (\n        <ColumnMenuHideItem\n          key=\"hide\"\n          header={header}\n          labels={labels}\n        />\n      ),\n  ].filter((group) => group !== false);\n\n  return (\n    <Menu.Portal>\n      <Menu.Positioner\n        sideOffset={0}\n        // Fixar ou mover a coluna leva o header para outro lugar enquanto o menu fecha: seguindo o\n        // trigger, o menu deslizaria até lá na animação de saída. A rolagem continua acompanhada.\n        disableAnchorTracking={true}\n        {...positionerProps}\n      >\n        <Menu.Popup\n          data-component=\"ColumnMenu.Popup\"\n          className={mergeStateClassNames(['min-w-48'], className)}\n          {...rest}\n        >\n          {children ??\n            groups.map((group, index) => (\n              <Fragment key={group.key}>\n                {index > 0 && <Menu.Separator />}\n                {group}\n              </Fragment>\n            ))}\n        </Menu.Popup>\n      </Menu.Positioner>\n    </Menu.Portal>\n  );\n};\n\nColumnMenuPopup.displayName = 'ColumnMenu.Popup';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8CA,MAAa,mBAIX,UACG;CACH,MAAM,EAAE,QAAQ,QAAQ,iBAAiB,WAAW,UAAU,GAAG,SAC/D;;;;;CAMF,MAAM,SAAS;EACb,iBAAiB,QAAQ,mBAAmB,KAC1C,OAAO,OAAO,WAAW,KACvB,oBAAC,qBAAD;GAEU;GACA;EACT,GAHK,MAGL;EAEL,iBAAiB,QAAQ,sBAAsB,KAC7C,OAAO,OAAO,UAAU,KACtB,oBAAC,oBAAD;GAEU;GACA;EACT,GAHK,KAGL;EAEL,iBAAiB,QAAQ,yBAAyB,KAChD,OAAO,OAAO,WAAW,KACvB,oBAAC,oBAAD;GAEU;GACA;EACT,GAHK,MAGL;CAEP,CAAC,CAAC,QAAQ,UAAU,UAAU,KAAK;CAEnC,OACE,oBAAC,KAAK,QAAN,EAAA,UACE,oBAAC,KAAK,YAAN;EACE,YAAY;EAGZ,uBAAuB;EACvB,GAAI;EAEJ,UAAA,oBAAC,KAAK,OAAN;GACE,kBAAe;GACf,WAAW,qBAAqB,CAAC,UAAU,GAAG,SAAS;GACvD,GAAI;GAEH,UAAA,YACC,OAAO,KAAK,OAAO,UACjB,qBAACA,YAAD,EAAA,UAAA,CACG,QAAQ,KAAK,oBAAC,KAAK,WAAN,CAAiB,CAAA,GAC9B,KACO,EAAA,GAHK,MAAM,GAGX,CACX;EACO,CAAA;CACG,CAAA,EACN,CAAA;AAEjB;AAEA,gBAAgB,cAAc"}

package/dist/components/column-menu/column-menu-root.d.ts

@@ -0,0 +1,34 @@
+import { Menu } from "@lucasbernardosn/react-ui/overlays/menu";
+//#region src/components/column-menu/column-menu-root.d.ts
+export type ColumnMenuRootProps<Payload = unknown> = Menu.RootProps<Payload>;
+/**
+ * O estado do menu da coluna: o `Menu.Root` do `ui`, para o menu inteiro sair do mesmo namespace.
+ * Não renderiza elemento.
+ *
+ * Vai dentro da `DataTable.HeaderCell`, no lugar do `DataTable.SortTrigger`: numa coluna com
+ * menu, o clique no header abre o menu, e a ordenação passa para os itens dele.
+ *
+ * @example
+ * ```tsx
+ * <DataTable.Header table={table}>
+ *   {(header) => (
+ *     <DataTable.HeaderCell header={header}>
+ *       <ColumnMenu.Root>
+ *         <ColumnMenu.Trigger header={header}>
+ *           <DataTable.HeaderContent header={header} />
+ *           <DataTable.SortIndicator header={header} />
+ *         </ColumnMenu.Trigger>
+ *         <ColumnMenu.Popup header={header} />
+ *       </ColumnMenu.Root>
+ *       <DataTable.ResizeHandle header={header} />
+ *     </DataTable.HeaderCell>
+ *   )}
+ * </DataTable.Header>
+ * ```
+ */
+export declare const ColumnMenuRoot: {
+  <Payload extends unknown = unknown>(props: ColumnMenuRootProps<Payload>): import("react").JSX.Element;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=column-menu-root.d.ts.map

package/dist/components/column-menu/column-menu-root.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"column-menu-root.d.ts","names":[],"sources":["../../../src/components/column-menu/column-menu-root.tsx"],"mappings":";;YAGY,oBAAoB,qBAAqB,KAAK,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;qBA2BvD;GAAkB,mCAAO,OAC7B,oBAAoB,2BAAQ,IAAA"}

package/dist/components/column-menu/column-menu-root.js

@@ -0,0 +1,36 @@
+import { jsx } from "react/jsx-runtime";
+import { Menu } from "@lucasbernardosn/react-ui/overlays/menu";
+//#region src/components/column-menu/column-menu-root.tsx
+/**
+* O estado do menu da coluna: o `Menu.Root` do `ui`, para o menu inteiro sair do mesmo namespace.
+* Não renderiza elemento.
+*
+* Vai dentro da `DataTable.HeaderCell`, no lugar do `DataTable.SortTrigger`: numa coluna com
+* menu, o clique no header abre o menu, e a ordenação passa para os itens dele.
+*
+* @example
+* ```tsx
+* <DataTable.Header table={table}>
+*   {(header) => (
+*     <DataTable.HeaderCell header={header}>
+*       <ColumnMenu.Root>
+*         <ColumnMenu.Trigger header={header}>
+*           <DataTable.HeaderContent header={header} />
+*           <DataTable.SortIndicator header={header} />
+*         </ColumnMenu.Trigger>
+*         <ColumnMenu.Popup header={header} />
+*       </ColumnMenu.Root>
+*       <DataTable.ResizeHandle header={header} />
+*     </DataTable.HeaderCell>
+*   )}
+* </DataTable.Header>
+* ```
+*/
+const ColumnMenuRoot = (props) => {
+	return /* @__PURE__ */ jsx(Menu.Root, { ...props });
+};
+ColumnMenuRoot.displayName = "ColumnMenu.Root";
+//#endregion
+export { ColumnMenuRoot };
+
+//# sourceMappingURL=column-menu-root.js.map

package/dist/components/column-menu/column-menu-root.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"column-menu-root.js","names":[],"sources":["../../../src/components/column-menu/column-menu-root.tsx"],"sourcesContent":["import { Menu } from '@lucasbernardosn/react-ui/overlays/menu';\nimport type { AnyType } from '@lucasbernardosn/utils';\n\nexport type ColumnMenuRootProps<Payload = unknown> = Menu.RootProps<Payload>;\n\n/**\n * O estado do menu da coluna: o `Menu.Root` do `ui`, para o menu inteiro sair do mesmo namespace.\n * Não renderiza elemento.\n *\n * Vai dentro da `DataTable.HeaderCell`, no lugar do `DataTable.SortTrigger`: numa coluna com\n * menu, o clique no header abre o menu, e a ordenação passa para os itens dele.\n *\n * @example\n * ```tsx\n * <DataTable.Header table={table}>\n *   {(header) => (\n *     <DataTable.HeaderCell header={header}>\n *       <ColumnMenu.Root>\n *         <ColumnMenu.Trigger header={header}>\n *           <DataTable.HeaderContent header={header} />\n *           <DataTable.SortIndicator header={header} />\n *         </ColumnMenu.Trigger>\n *         <ColumnMenu.Popup header={header} />\n *       </ColumnMenu.Root>\n *       <DataTable.ResizeHandle header={header} />\n *     </DataTable.HeaderCell>\n *   )}\n * </DataTable.Header>\n * ```\n */\nexport const ColumnMenuRoot = <Payload extends AnyType = unknown>(\n  props: ColumnMenuRootProps<Payload>,\n) => {\n  return <Menu.Root<Payload> {...props} />;\n};\n\nColumnMenuRoot.displayName = 'ColumnMenu.Root';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8BA,MAAa,kBACX,UACG;CACH,OAAO,oBAAC,KAAK,MAAN,EAAoB,GAAI,MAAQ,CAAA;AACzC;AAEA,eAAe,cAAc"}

package/dist/components/column-menu/column-menu-sort-items.d.ts

@@ -0,0 +1,29 @@
+import { HeaderWith } from "../../types/table-with.js";
+import "../../types/index.js";
+import { ColumnMenuLabels } from "./column-menu-labels.js";
+import { RowData, TableFeatures } from "@tanstack/react-table";
+import { Menu } from "@lucasbernardosn/react-ui/overlays/menu";
+import React from "react";
+import { MergeOverride } from "@lucasbernardosn/utils";
+//#region src/components/column-menu/column-menu-sort-items.d.ts
+export type ColumnMenuSortItemsProps<TFeatures extends TableFeatures, TData extends RowData> = MergeOverride<Menu.GroupProps, {
+  /** O header da coluna. Exige `rowSortingFeature`. */
+  header: HeaderWith<TFeatures, TData, 'rowSortingFeature'>;
+  /** O texto dos itens; os que faltam ficam com o padrão. */
+  labels?: Partial<ColumnMenuLabels>;
+}>;
+/**
+ * Os itens da ordenação: crescente e decrescente, com um check na direção atual, e "Remover
+ * ordenação" com a coluna ordenada. O item troca a ordenação inteira por esta coluna; com Shift
+ * (ou o `isMultiSortEvent` da tabela), soma a coluna à ordenação múltipla, como o
+ * `DataTable.SortTrigger`.
+ *
+ * O check é só visual: a direção chega ao leitor de tela pelo `aria-sort` da
+ * `DataTable.HeaderCell`. Numa coluna que não ordena, não renderiza.
+ */
+export declare const ColumnMenuSortItems: {
+  <TFeatures extends TableFeatures, TData extends RowData>(props: ColumnMenuSortItemsProps<TFeatures, TData>): React.JSX.Element | null;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=column-menu-sort-items.d.ts.map

package/dist/components/column-menu/column-menu-sort-items.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"column-menu-sort-items.d.ts","names":[],"sources":["../../../src/components/column-menu/column-menu-sort-items.tsx"],"mappings":";;;;;;;;YAcY,yBACV,kBAAkB,eAClB,cAAc,WACZ,cACF,KAAK;;EAGH,QAAQ,WAAW,WAAW;;EAE9B,SAAS,QAAQ;;;;;;;;;;;qBAaR;GACX,kBAAkB,eAClB,cAAc,SAAO,OAEd,yBAAyB,WAAW,SAAM,MAAA,IAAA"}

package/dist/components/column-menu/column-menu-sort-items.js

@@ -0,0 +1,61 @@
+import { ColumnMenuCheck } from "./column-menu-check.js";
+import { COLUMN_MENU_DEFAULT_LABELS } from "./column-menu-labels.js";
+import { Icon } from "@lucasbernardosn/react-ui/display/icon";
+import { CaretDownIcon, CaretUpIcon, XIcon } from "@phosphor-icons/react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Menu } from "@lucasbernardosn/react-ui/overlays/menu";
+import { useSelector } from "@tanstack/react-store";
+//#region src/components/column-menu/column-menu-sort-items.tsx
+/**
+* Os itens da ordenação: crescente e decrescente, com um check na direção atual, e "Remover
+* ordenação" com a coluna ordenada. O item troca a ordenação inteira por esta coluna; com Shift
+* (ou o `isMultiSortEvent` da tabela), soma a coluna à ordenação múltipla, como o
+* `DataTable.SortTrigger`.
+*
+* O check é só visual: a direção chega ao leitor de tela pelo `aria-sort` da
+* `DataTable.HeaderCell`. Numa coluna que não ordena, não renderiza.
+*/
+const ColumnMenuSortItems = (props) => {
+	const { header, labels, ...rest } = props;
+	const { column } = header;
+	/** Re-renderiza quando a direção desta coluna muda. */
+	const sorted = useSelector(column.table.atoms.sorting, () => column.getIsSorted());
+	if (!column.getCanSort()) return null;
+	const getLabel = (key) => labels?.[key] ?? COLUMN_MENU_DEFAULT_LABELS[key];
+	/** O mesmo critério do clique no header para somar a coluna à ordenação múltipla. */
+	const toggleSorting = (isDesc, event) => {
+		const isMulti = column.getCanMultiSort() && (column.table.options.isMultiSortEvent?.(event) ?? false);
+		column.toggleSorting(isDesc, isMulti);
+	};
+	return /* @__PURE__ */ jsxs(Menu.Group, {
+		"data-component": "ColumnMenu.SortItems",
+		...rest,
+		children: [
+			/* @__PURE__ */ jsxs(Menu.Item, {
+				onClick: (event) => toggleSorting(false, event),
+				children: [
+					/* @__PURE__ */ jsx(Icon, { render: /* @__PURE__ */ jsx(CaretUpIcon, {}) }),
+					getLabel("sortAsc"),
+					sorted === "asc" && /* @__PURE__ */ jsx(ColumnMenuCheck, {})
+				]
+			}),
+			/* @__PURE__ */ jsxs(Menu.Item, {
+				onClick: (event) => toggleSorting(true, event),
+				children: [
+					/* @__PURE__ */ jsx(Icon, { render: /* @__PURE__ */ jsx(CaretDownIcon, {}) }),
+					getLabel("sortDesc"),
+					sorted === "desc" && /* @__PURE__ */ jsx(ColumnMenuCheck, {})
+				]
+			}),
+			sorted && /* @__PURE__ */ jsxs(Menu.Item, {
+				onClick: () => column.clearSorting(),
+				children: [/* @__PURE__ */ jsx(Icon, { render: /* @__PURE__ */ jsx(XIcon, {}) }), getLabel("clearSorting")]
+			})
+		]
+	});
+};
+ColumnMenuSortItems.displayName = "ColumnMenu.SortItems";
+//#endregion
+export { ColumnMenuSortItems };
+
+//# sourceMappingURL=column-menu-sort-items.js.map

package/dist/components/column-menu/column-menu-sort-items.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"column-menu-sort-items.js","names":[],"sources":["../../../src/components/column-menu/column-menu-sort-items.tsx"],"sourcesContent":["import { Icon } from '@lucasbernardosn/react-ui/display/icon';\nimport { Menu } from '@lucasbernardosn/react-ui/overlays/menu';\nimport type { MergeOverride } from '@lucasbernardosn/utils';\nimport { CaretDownIcon, CaretUpIcon, XIcon } from '@phosphor-icons/react';\nimport { useSelector } from '@tanstack/react-store';\nimport type { RowData, TableFeatures } from '@tanstack/react-table';\nimport type React from 'react';\nimport type { HeaderWith } from '../../types';\nimport { ColumnMenuCheck } from './column-menu-check';\nimport {\n  COLUMN_MENU_DEFAULT_LABELS,\n  type ColumnMenuLabels,\n} from './column-menu-labels';\n\nexport type ColumnMenuSortItemsProps<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n> = MergeOverride<\n  Menu.GroupProps,\n  {\n    /** O header da coluna. Exige `rowSortingFeature`. */\n    header: HeaderWith<TFeatures, TData, 'rowSortingFeature'>;\n    /** O texto dos itens; os que faltam ficam com o padrão. */\n    labels?: Partial<ColumnMenuLabels>;\n  }\n>;\n\n/**\n * Os itens da ordenação: crescente e decrescente, com um check na direção atual, e \"Remover\n * ordenação\" com a coluna ordenada. O item troca a ordenação inteira por esta coluna; com Shift\n * (ou o `isMultiSortEvent` da tabela), soma a coluna à ordenação múltipla, como o\n * `DataTable.SortTrigger`.\n *\n * O check é só visual: a direção chega ao leitor de tela pelo `aria-sort` da\n * `DataTable.HeaderCell`. Numa coluna que não ordena, não renderiza.\n */\nexport const ColumnMenuSortItems = <\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n>(\n  props: ColumnMenuSortItemsProps<TFeatures, TData>,\n) => {\n  const { header, labels, ...rest } = props;\n\n  const { column } = header;\n\n  /** Re-renderiza quando a direção desta coluna muda. */\n  const sorted = useSelector(column.table.atoms.sorting, () =>\n    column.getIsSorted(),\n  );\n\n  if (!column.getCanSort()) {\n    return null;\n  }\n\n  const getLabel = (key: keyof ColumnMenuLabels) =>\n    labels?.[key] ?? COLUMN_MENU_DEFAULT_LABELS[key];\n\n  /** O mesmo critério do clique no header para somar a coluna à ordenação múltipla. */\n  const toggleSorting = (isDesc: boolean, event: React.MouseEvent) => {\n    const isMulti =\n      column.getCanMultiSort() &&\n      (column.table.options.isMultiSortEvent?.(event) ?? false);\n\n    column.toggleSorting(isDesc, isMulti);\n  };\n\n  return (\n    <Menu.Group\n      data-component=\"ColumnMenu.SortItems\"\n      {...rest}\n    >\n      <Menu.Item onClick={(event) => toggleSorting(false, event)}>\n        <Icon render={<CaretUpIcon />} />\n        {getLabel('sortAsc')}\n        {sorted === 'asc' && <ColumnMenuCheck />}\n      </Menu.Item>\n\n      <Menu.Item onClick={(event) => toggleSorting(true, event)}>\n        <Icon render={<CaretDownIcon />} />\n        {getLabel('sortDesc')}\n        {sorted === 'desc' && <ColumnMenuCheck />}\n      </Menu.Item>\n\n      {sorted && (\n        <Menu.Item onClick={() => column.clearSorting()}>\n          <Icon render={<XIcon />} />\n          {getLabel('clearSorting')}\n        </Menu.Item>\n      )}\n    </Menu.Group>\n  );\n};\n\nColumnMenuSortItems.displayName = 'ColumnMenu.SortItems';\n"],"mappings":";;;;;;;;;;;;;;;;;AAoCA,MAAa,uBAIX,UACG;CACH,MAAM,EAAE,QAAQ,QAAQ,GAAG,SAAS;CAEpC,MAAM,EAAE,WAAW;;CAGnB,MAAM,SAAS,YAAY,OAAO,MAAM,MAAM,eAC5C,OAAO,YAAY,CACrB;CAEA,IAAI,CAAC,OAAO,WAAW,GACrB,OAAO;CAGT,MAAM,YAAY,QAChB,SAAS,QAAQ,2BAA2B;;CAG9C,MAAM,iBAAiB,QAAiB,UAA4B;EAClE,MAAM,UACJ,OAAO,gBAAgB,MACtB,OAAO,MAAM,QAAQ,mBAAmB,KAAK,KAAK;EAErD,OAAO,cAAc,QAAQ,OAAO;CACtC;CAEA,OACE,qBAAC,KAAK,OAAN;EACE,kBAAe;EACf,GAAI;EAFN,UAAA;GAIE,qBAAC,KAAK,MAAN;IAAW,UAAU,UAAU,cAAc,OAAO,KAAK;IAAzD,UAAA;KACE,oBAAC,MAAD,EAAM,QAAQ,oBAAC,aAAD,CAAc,CAAA,EAAI,CAAA;KAC/B,SAAS,SAAS;KAClB,WAAW,SAAS,oBAAC,iBAAD,CAAkB,CAAA;IAC9B;;GAEX,qBAAC,KAAK,MAAN;IAAW,UAAU,UAAU,cAAc,MAAM,KAAK;IAAxD,UAAA;KACE,oBAAC,MAAD,EAAM,QAAQ,oBAAC,eAAD,CAAgB,CAAA,EAAI,CAAA;KACjC,SAAS,UAAU;KACnB,WAAW,UAAU,oBAAC,iBAAD,CAAkB,CAAA;IAC/B;;GAEV,UACC,qBAAC,KAAK,MAAN;IAAW,eAAe,OAAO,aAAa;IAA9C,UAAA,CACE,oBAAC,MAAD,EAAM,QAAQ,oBAAC,OAAD,CAAQ,CAAA,EAAI,CAAA,GACzB,SAAS,cAAc,CACf;;EAEH;;AAEhB;AAEA,oBAAoB,cAAc"}