@ioca/react 1.4.76 → 1.4.77

package/lib/types/components/checkbox/checkbox.js

@@ -0,0 +1,64 @@
+import { formatOption } from "../../js/utils.js";
+import CheckboxItem from "./item.js";
+import classNames from "classnames";
+import { useEffect, useMemo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import "../../css/input.css";
+import "./index.css";
+//#region packages/components/checkbox/checkbox.tsx
+function Checkbox(props) {
+	const { label, name, options = [], value = "", type = "default", optionInline = true, labelInline, disabled, status = "normal", message, required, className, renderItem, onChange, ...restProps } = props;
+	const [selectedValues, setSelectedValues] = useState(value);
+	const formattedOptions = useMemo(() => formatOption(options), [options]);
+	const handleChange = (checked, opt, e) => {
+		const group = [...selectedValues];
+		const i = group.findIndex((item) => item === opt.value);
+		if (checked && i < 0) group.push(opt.value);
+		else if (!checked && i > -1) group.splice(i, 1);
+		setSelectedValues(group);
+		onChange?.(group, opt, e);
+	};
+	useEffect(() => {
+		setSelectedValues(value);
+	}, [value]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: classNames("i-checkbox i-input-label", {
+			[`i-checkbox-${status}`]: status !== "normal",
+			"i-input-inline": labelInline
+		}, className),
+		...restProps,
+		children: [label && /* @__PURE__ */ jsxs("span", {
+			className: "i-input-label-text",
+			children: [
+				required && /* @__PURE__ */ jsx("span", {
+					className: "error",
+					children: "*"
+				}),
+				label,
+				message && /* @__PURE__ */ jsx("p", {
+					className: "i-checkbox-message",
+					children: message
+				})
+			]
+		}), /* @__PURE__ */ jsx("div", {
+			className: classNames("i-checkbox-options", {
+				"i-options-block": !optionInline,
+				"i-checkbox-options-button": type === "button"
+			}),
+			children: formattedOptions.map((option) => {
+				return /* @__PURE__ */ jsx(CheckboxItem, {
+					name,
+					value: selectedValues.includes(option.value),
+					optionValue: option.value,
+					type,
+					disabled: disabled || option.disabled,
+					onChange: (checked, e) => handleChange(checked, option, e),
+					children: renderItem ?? option.label
+				}, option.value);
+			})
+		})]
+	});
+}
+Checkbox.Item = CheckboxItem;
+//#endregion
+export { Checkbox as default };

package/lib/types/components/checkbox/index.d.ts

@@ -1,5 +1,2 @@
-import Checkbox from './checkbox.js';
-
-
-
-export { Checkbox as default };
+import { default as Checkbox } from './checkbox';
+export default Checkbox;

package/lib/types/components/checkbox/index.js

@@ -0,0 +1,5 @@
+import Checkbox from "./checkbox.js";
+//#region packages/components/checkbox/index.tsx
+var checkbox_default = Checkbox;
+//#endregion
+export { checkbox_default as default };

package/lib/types/components/checkbox/item.d.ts

@@ -1,6 +1,2 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { ICheckboxItem } from './type.js';
-
-declare function CheckboxItem(props: ICheckboxItem): react_jsx_runtime.JSX.Element;
-
-export { CheckboxItem as default };
+import { ICheckboxItem } from './type';
+export default function CheckboxItem(props: ICheckboxItem): import("react/jsx-runtime").JSX.Element;

package/lib/types/components/checkbox/item.js

@@ -0,0 +1,55 @@
+import classNames from "classnames";
+import { useEffect, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region packages/components/checkbox/item.tsx
+function CheckboxItem(props) {
+	const { type = "default", label, name, value = false, className, status = "normal", message, disabled, partof, optionValue, children, onChange, ...restProps } = props;
+	const [checked, setChecked] = useState(value);
+	const [itemStatus, setItemStatus] = useState(status);
+	const [itemMessage, setItemMessage] = useState(message);
+	const isChildrenFn = typeof children === "function";
+	const handleChange = (e) => {
+		const next = e.target.checked;
+		setChecked(next);
+		setItemStatus(status);
+		setItemMessage(message);
+		onChange?.(next, e);
+	};
+	useEffect(() => {
+		setChecked(value);
+	}, [value]);
+	useEffect(() => {
+		setItemStatus(status);
+		setItemMessage(message);
+	}, [status, message]);
+	return /* @__PURE__ */ jsxs("label", {
+		className: classNames("i-checkbox-item", {
+			[`i-checkbox-${itemStatus}`]: itemStatus !== "normal",
+			disabled
+		}, className),
+		...restProps,
+		children: [
+			/* @__PURE__ */ jsx("input", {
+				type: "checkbox",
+				name,
+				className: classNames("i-checkbox-input", {
+					[`i-checkbox-${type}`]: !partof,
+					"i-checkbox-partof": partof
+				}),
+				checked,
+				disabled,
+				onChange: handleChange
+			}),
+			isChildrenFn ? children(checked, optionValue) : /* @__PURE__ */ jsx("span", {
+				className: "i-checkbox-text",
+				children: children || label
+			}),
+			itemMessage && /* @__PURE__ */ jsxs("span", {
+				className: "i-checkbox-message",
+				children: ["*", itemMessage]
+			})
+		]
+	});
+}
+//#endregion
+export { CheckboxItem as default };

package/lib/types/components/checkbox/type.d.ts

@@ -1,8 +1,7 @@
-import { InputHTMLAttributes, ReactNode, ChangeEvent } from 'react';
-import { TValidate, TOption } from '../../type/index.js';
-
+import { ChangeEvent, InputHTMLAttributes, ReactNode } from 'react';
+import { TOption, TValidate } from '../../type';
 type TRenderCheckboxItem = (checked: boolean, value: any) => ReactNode;
-interface ICheckbox extends Omit<InputHTMLAttributes<HTMLInputElement>, "onChange">, TValidate {
+export interface ICheckbox extends Omit<InputHTMLAttributes<HTMLInputElement>, "onChange">, TValidate {
     label?: ReactNode;
     options: TOption[] | (string | number)[];
     type?: "default" | "switch" | "button";
@@ -11,7 +10,7 @@ interface ICheckbox extends Omit<InputHTMLAttributes<HTMLInputElement>, "onChang
     renderItem?: TRenderCheckboxItem;
     onChange?: (value: any[], option: TOption, e: ChangeEvent<HTMLInputElement>) => void;
 }
-interface ICheckboxItem extends Omit<InputHTMLAttributes<HTMLElement>, "value" | "children" | "onChange">, TValidate {
+export interface ICheckboxItem extends Omit<InputHTMLAttributes<HTMLElement>, "value" | "children" | "onChange">, TValidate {
     type?: "default" | "switch" | "button";
     label?: ReactNode;
     value?: boolean;
@@ -20,5 +19,4 @@ interface ICheckboxItem extends Omit<InputHTMLAttributes<HTMLElement>, "value" |
     children?: ReactNode | TRenderCheckboxItem;
     onChange?: (value: boolean, e: ChangeEvent<HTMLInputElement>) => void;
 }
-
-export type { ICheckbox, ICheckboxItem };
+export {};

package/lib/types/components/collapse/collapse.d.ts

@@ -1,10 +1,7 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import Item from './item.js';
-import { ICollapse } from './type.js';
-
+import { default as Item } from './item';
+import { ICollapse } from './type';
 declare const Collapse: {
-    (props: ICollapse): react_jsx_runtime.JSX.Element;
+    (props: ICollapse): import("react/jsx-runtime").JSX.Element;
     Item: typeof Item;
 };
-
-export { Collapse as default };
+export default Collapse;

package/lib/types/components/collapse/collapse.js

@@ -0,0 +1,81 @@
+import helpericon_default from "../utils/helpericon/index.js";
+import Item from "./item.js";
+import classNames from "classnames";
+import { Children, useMemo, useState } from "react";
+import { MinusRound, PlusRound } from "/Users/iann/codes/ioca-react/node_modules/.pnpm/@ricons+material@0.12.0/node_modules/@ricons/material/es/index.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import "./index.css";
+//#region packages/components/collapse/collapse.tsx
+const Collapse = (props) => {
+	const { active, items, multiple, border, headerClickable, className, children, renderToggle = (active) => active ? /* @__PURE__ */ jsx(MinusRound, {}) : /* @__PURE__ */ jsx(PlusRound, {}), onCollapse, ...restProps } = props;
+	const [activeKey, setActiveKey] = useState(active);
+	const collapses = useMemo(() => {
+		if (!items) {
+			if (!children) return [];
+			return Children.map(children, (node, i) => {
+				const { key, props: nodeProps } = node;
+				const { title, children, content, disabled, ...restProps } = nodeProps;
+				return {
+					...restProps,
+					key: key || i,
+					title,
+					content: children || content,
+					disabled
+				};
+			}) || [];
+		}
+		return items;
+	}, [children]);
+	const handleHeaderClick = (item) => {
+		if (!headerClickable) return;
+		handleToggle(item);
+	};
+	const handleToggle = (item, e) => {
+		const { key, disabled } = item;
+		e?.stopPropagation();
+		if (disabled) return;
+		if (!multiple) {
+			const nextActive = activeKey === key ? void 0 : key;
+			setActiveKey(nextActive);
+			onCollapse?.(key, nextActive !== void 0);
+			return;
+		}
+		const group = Array.isArray(activeKey) ? [...activeKey] : [];
+		const i = group.findIndex((k) => k === key);
+		if (i > -1) group.splice(i, 1);
+		else key !== void 0 && group.push(key);
+		setActiveKey(group);
+		onCollapse?.(key, i < 0);
+	};
+	return /* @__PURE__ */ jsx("div", {
+		className: classNames("i-collapse", { "i-collapse-bordered": border }, className),
+		...restProps,
+		children: collapses.map((item) => {
+			const { key, title, content, disabled, className, ...restProps } = item;
+			const isActive = multiple ? (activeKey || []).includes(key) : activeKey === key;
+			return /* @__PURE__ */ jsxs("div", {
+				className: classNames("i-collapse-item", className, {
+					"i-collapse-active": isActive,
+					"i-collapse-disabled": disabled
+				}),
+				...restProps,
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "i-collapse-header",
+					onClick: () => handleHeaderClick(item),
+					children: [title, /* @__PURE__ */ jsx(helpericon_default, {
+						active: true,
+						className: "i-collapse-toggle",
+						icon: renderToggle(isActive),
+						onClick: (e) => handleToggle(item, e)
+					})]
+				}), /* @__PURE__ */ jsx("div", {
+					className: "i-collapse-content",
+					children: content
+				})]
+			}, key);
+		})
+	});
+};
+Collapse.Item = Item;
+//#endregion
+export { Collapse as default };

package/lib/types/components/collapse/index.d.ts

@@ -1,5 +1,2 @@
-import Collapse from './collapse.js';
-
-
-
-export { Collapse as default };
+import { default as Collapse } from './collapse';
+export default Collapse;

package/lib/types/components/collapse/index.js

@@ -0,0 +1,5 @@
+import Collapse from "./collapse.js";
+//#region packages/components/collapse/index.tsx
+var collapse_default = Collapse;
+//#endregion
+export { collapse_default as default };

package/lib/types/components/collapse/item.d.ts

@@ -1,6 +1,2 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { ICollapseItem } from './type.js';
-
-declare function Item(props: ICollapseItem): react_jsx_runtime.JSX.Element;
-
-export { Item as default };
+import { ICollapseItem } from './type';
+export default function Item(props: ICollapseItem): import("react/jsx-runtime").JSX.Element;

package/lib/types/components/collapse/item.js

@@ -0,0 +1,7 @@
+import { Fragment, jsx } from "react/jsx-runtime";
+//#region packages/components/collapse/item.tsx
+function Item(props) {
+	return /* @__PURE__ */ jsx(Fragment, {});
+}
+//#endregion
+export { Item as default };

package/lib/types/components/collapse/type.d.ts

@@ -1,7 +1,6 @@
-import { HTMLAttributes, ReactNode, CSSProperties } from 'react';
-
-type TKey = string | number;
-interface ICollapse extends HTMLAttributes<HTMLDivElement> {
+import { CSSProperties, HTMLAttributes, ReactNode } from 'react';
+export type TKey = string | number;
+export interface ICollapse extends HTMLAttributes<HTMLDivElement> {
     active?: TKey | TKey[];
     items?: ICollapseItem[];
     multiple?: boolean;
@@ -10,7 +9,7 @@ interface ICollapse extends HTMLAttributes<HTMLDivElement> {
     renderToggle?: (active: boolean) => ReactNode;
     onCollapse?: (key: TKey, active: boolean) => void;
 }
-interface ICollapseItem {
+export interface ICollapseItem {
     key?: TKey;
     title?: ReactNode;
     content?: ReactNode;
@@ -19,5 +18,3 @@ interface ICollapseItem {
     className?: string;
     style?: CSSProperties;
 }
-
-export type { ICollapse, ICollapseItem, TKey };

package/lib/types/components/datagrid/cell.d.ts

@@ -0,0 +1,13 @@
+import { ICell, IColumn } from './type';
+export declare function getCellStyle({ justify, col, row, colSpan, rowSpan, }: Pick<IColumn, "justify" | "fixed"> & {
+    col: number;
+    row: number;
+    colSpan?: number;
+    rowSpan?: number;
+    isHeader?: boolean;
+}): {
+    "--datagrid-justify": string;
+    gridArea: string;
+    insetInline: string;
+};
+export declare function Cell(props: ICell): import("react/jsx-runtime").JSX.Element;

package/lib/types/components/datagrid/cell.js

@@ -0,0 +1,34 @@
+import classNames from "classnames";
+import { jsx } from "react/jsx-runtime";
+//#region packages/components/datagrid/cell.tsx
+function getCellStyle({ justify, col, row, colSpan = 1, rowSpan = 1 }) {
+	return {
+		"--datagrid-justify": justify,
+		gridArea: `${row + 1} / ${col + 1} / ${row + 1 + rowSpan} / ${col + 1 + colSpan}`,
+		insetInline: `var(--datagrid-cell-inset-${col})`
+	};
+}
+function Cell(props) {
+	const { column, row, col, data, cellEllipsis, onCellClick, onCellDoubleClick } = props;
+	const { id, fixed, justify, rowSpan, render } = column;
+	const style = getCellStyle({
+		justify,
+		fixed,
+		col,
+		row,
+		rowSpan
+	});
+	return /* @__PURE__ */ jsx("div", {
+		className: classNames("i-datagrid-cell", { [`i-datagrid-cell-fixed-${fixed}`]: fixed }),
+		"data-col": id,
+		style,
+		onClick: (e) => onCellClick?.(data, column, row, col, e),
+		onDoubleClick: (e) => onCellDoubleClick?.(data, column, row, col, e),
+		children: render?.(data[id], data, row, col) ?? /* @__PURE__ */ jsx("div", {
+			className: classNames("i-datagrid-cell-content", { "i-datagrid-cell-content-ellipsis": cellEllipsis }),
+			children: data[id]
+		})
+	});
+}
+//#endregion
+export { Cell, getCellStyle };

package/lib/types/components/datagrid/datagrid.d.ts

@@ -1,6 +1,3 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { IDatagrid } from './type.js';
-
-declare const Datagrid: (props: IDatagrid) => react_jsx_runtime.JSX.Element;
-
-export { Datagrid as default };
+import { IDatagrid } from './type';
+declare const Datagrid: (props: IDatagrid) => import("react/jsx-runtime").JSX.Element;
+export default Datagrid;

package/lib/types/components/datagrid/datagrid.js

@@ -0,0 +1,137 @@
+import loading_default from "../loading/index.js";
+import { useReactive } from "../../js/hooks.js";
+import { getNextSorter } from "../../js/utils.js";
+import Empty from "../utils/empty/index.js";
+import Row, { Header } from "./row.js";
+import classNames from "classnames";
+import { useEffect, useMemo, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import "./index.css";
+//#region packages/components/datagrid/datagrid.tsx
+const Datagrid = (props) => {
+	const { data = [], columns = [], border, striped, header = true, resizable, cellPadding = ".5em", cellEllipsis, empty = /* @__PURE__ */ jsx(Empty, {}), loading, height = "unset", style, className, renderLoading = () => /* @__PURE__ */ jsx(loading_default, {
+		size: "1.5em",
+		className: "color-3",
+		absolute: true
+	}), onCellClick, onRowClick, onCellDoubleClick, onHeaderClick, onSort, onScroll, onResize } = props;
+	const container = useRef(null);
+	const state = useReactive({
+		rows: data,
+		widths: columns.map((col) => col.width ?? "min-content"),
+		sortBy: "",
+		sortType: ""
+	});
+	const styles = useMemo(() => {
+		const { widths } = state;
+		const o = {
+			...style,
+			"--grid-template-columns": widths.map((w) => {
+				return typeof w === "number" ? `${w}px` : w;
+			}).join(" ")
+		};
+		if (!resizable) return o;
+		const fws = columns.map((col, i) => {
+			const { fixed } = col;
+			if (!fixed) return 0;
+			return widths[i];
+		});
+		columns.map((col, i) => {
+			const { fixed } = col;
+			if (!fixed) return;
+			if (i === 0) o[`--datagrid-cell-inset-0`] = 0;
+			else if (i === fws.length - 1) o[`--datagrid-cell-inset-${fws.length - 1}`] = "auto 0";
+			else {
+				const isLeft = fixed === "left";
+				const sum = (isLeft ? fws.slice(0, i) : fws.slice(i + 1)).reduce((pre, cur) => pre + cur) + "px";
+				const result = isLeft ? `${sum} auto` : `auto ${sum}`;
+				o[`--datagrid-cell-inset-${i}`] = result;
+			}
+		});
+		return o;
+	}, [state.widths, resizable]);
+	const handleWidthChange = (i, w) => {
+		if (!resizable) return;
+		const [ ...ws] = state.widths;
+		ws[i] = w;
+		state.widths = ws;
+		onResize?.(columns[i], w);
+	};
+	const handleHeaderClick = (column, e) => {
+		if (column?.sorter) {
+			const [sortBy, sortType] = getNextSorter(state.sortBy, state.sortType, column.id);
+			Object.assign(state, {
+				sortBy,
+				sortType
+			});
+			onSort?.(sortBy, sortType);
+		}
+		onHeaderClick?.(column, e);
+	};
+	const rows = useMemo(() => {
+		const { sortBy, sortType } = state;
+		if (sortBy && !onSort) {
+			const sorter = columns.find((col) => col.id === sortBy)?.sorter;
+			const sortFn = typeof sorter === "function" ? sorter : (a, b) => b[sortBy] - a[sortBy];
+			const sorted = [...data].sort(sortFn);
+			return sortType === "desc" ? sorted : sorted.reverse();
+		}
+		return data;
+	}, [
+		data,
+		columns,
+		state.sortBy,
+		state.sortType
+	]);
+	useEffect(() => {
+		if (!container.current) return;
+		const { current: div } = container;
+		const tds = div.querySelector(".i-datagrid-row")?.children;
+		if (!tds?.length) return;
+		state.widths = Array.from(tds).map((node) => node.offsetWidth);
+	}, [columns, resizable]);
+	useEffect(() => {
+		loading && container.current?.scrollTo({
+			top: 0,
+			left: 0
+		});
+	}, [loading]);
+	return /* @__PURE__ */ jsxs("div", {
+		style: {
+			maxHeight: height,
+			"--cell-padding": cellPadding,
+			...styles
+		},
+		className: classNames("i-datagrid-container", className, {
+			"i-datagrid-bordered": border,
+			"i-datagrid-striped": striped
+		}),
+		children: [/* @__PURE__ */ jsxs("div", {
+			ref: container,
+			className: classNames("i-datagrid", { "i-datagrid-loading": loading }),
+			onWheel: onScroll,
+			children: [
+				header && /* @__PURE__ */ jsx(Header, {
+					columns,
+					resizable,
+					sortType: state.sortType,
+					sortBy: state.sortBy,
+					cellEllipsis,
+					onWidthChange: handleWidthChange,
+					onHeaderClick: handleHeaderClick
+				}),
+				rows.map((row, i) => /* @__PURE__ */ jsx(Row, {
+					row: i + (header ? 1 : 0),
+					data: row,
+					cellEllipsis,
+					columns,
+					onCellClick,
+					onRowClick,
+					onCellDoubleClick
+				}, i)),
+				rows.length < 1 && empty
+			]
+		}), loading && renderLoading()]
+	});
+};
+//#endregion
+export { Datagrid as default };

package/lib/types/components/datagrid/index.d.ts

@@ -1,5 +1,2 @@
-import Datagrid from './datagrid.js';
-
-
-
-export { Datagrid as default };
+import { default as Datagrid } from './datagrid';
+export default Datagrid;

package/lib/types/components/datagrid/index.js

@@ -0,0 +1,5 @@
+import Datagrid from "./datagrid.js";
+//#region packages/components/datagrid/index.tsx
+var datagrid_default = Datagrid;
+//#endregion
+export { datagrid_default as default };

package/lib/types/components/datagrid/resize.d.ts

@@ -0,0 +1 @@
+export default function Resize(props: any): import("react/jsx-runtime").JSX.Element;

package/lib/types/components/datagrid/resize.js

@@ -0,0 +1,39 @@
+import { useMouseMove, useMouseUp, useReactive } from "../../js/hooks.js";
+import { jsx } from "react/jsx-runtime";
+//#region packages/components/datagrid/resize.tsx
+function Resize(props) {
+	const { index, onWidthChange } = props;
+	const state = useReactive({
+		resizing: false,
+		x: 0,
+		width: 0
+	});
+	const handleMouseDown = (e) => {
+		const width = e.target.offsetParent.offsetWidth;
+		Object.assign(state, {
+			x: e.pageX,
+			resizing: true,
+			width
+		});
+	};
+	const handleMouseMove = (e) => {
+		if (!state.resizing) return;
+		e.preventDefault();
+		const after = state.width + e.pageX - state.x;
+		if (after <= 24) return;
+		onWidthChange(index, after);
+	};
+	const handleMouseUp = () => {
+		if (!state.resizing) return;
+		state.resizing = false;
+	};
+	useMouseMove(handleMouseMove);
+	useMouseUp(handleMouseUp);
+	return /* @__PURE__ */ jsx("i", {
+		className: "i-datagrid-resizor",
+		onMouseDown: handleMouseDown,
+		onClick: (e) => e.stopPropagation()
+	});
+}
+//#endregion
+export { Resize as default };

package/lib/types/components/datagrid/row.d.ts

@@ -0,0 +1,3 @@
+import { IHeader, IRow } from './type';
+export default function Row(props: IRow): import("react/jsx-runtime").JSX.Element;
+export declare function Header(props: IHeader): import("react/jsx-runtime").JSX.Element;

package/lib/types/components/datagrid/row.js

@@ -0,0 +1,63 @@
+import { Cell, getCellStyle } from "./cell.js";
+import Resize from "./resize.js";
+import Sorter from "./sorter.js";
+import classNames from "classnames";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region packages/components/datagrid/row.tsx
+function Row(props) {
+	const { row, data, columns, cellEllipsis, onRowClick, onCellClick, onCellDoubleClick } = props;
+	return /* @__PURE__ */ jsx("div", {
+		className: "i-datagrid-row",
+		onClick: () => onRowClick?.(data, row),
+		children: columns.map((col, i) => /* @__PURE__ */ jsx(Cell, {
+			column: col,
+			col: i,
+			row,
+			data,
+			cellEllipsis,
+			onCellClick,
+			onCellDoubleClick
+		}, i))
+	});
+}
+function Header(props) {
+	const { columns, resizable, cellEllipsis, sortBy, sortType, onWidthChange, onHeaderClick } = props;
+	return /* @__PURE__ */ jsx("div", {
+		className: "i-datagrid-header i-datagrid-row",
+		children: columns.map((column, col) => {
+			const { id, title, fixed, colSpan, sorter, justify, renderHeader } = column;
+			const style = getCellStyle({
+				justify,
+				row: 0,
+				col,
+				colSpan
+			});
+			const order = sortBy === id ? sortType : "";
+			return /* @__PURE__ */ jsxs("div", {
+				"data-col": id,
+				className: classNames("i-datagrid-cell", {
+					"i-datagrid-has-sorter": sorter,
+					"i-datagrid-cell-fixed": fixed
+				}),
+				style: {
+					...style,
+					insetBlockStart: 0
+				},
+				onClick: (e) => onHeaderClick?.(column, e),
+				children: [
+					renderHeader?.(column, col) ?? /* @__PURE__ */ jsx("div", {
+						className: classNames("i-datagrid-cell-content", { "i-datagrid-cell-content-ellipsis": cellEllipsis }),
+						children: title || id
+					}),
+					sorter && /* @__PURE__ */ jsx(Sorter, { type: order }),
+					resizable && /* @__PURE__ */ jsx(Resize, {
+						index: col,
+						onWidthChange
+					})
+				]
+			}, col);
+		})
+	});
+}
+//#endregion
+export { Header, Row as default };

package/lib/types/components/datagrid/sorter.d.ts

@@ -0,0 +1 @@
+export default function Sorter(props: any): import("react/jsx-runtime").JSX.Element;