@marigold/components 16.1.0 → 17.0.0

package/dist/legacy.cjs

@@ -0,0 +1,334 @@
+const require_Checkbox = require('./Checkbox-DIbAWlSt.cjs');
+const require_index = require('./index.cjs');
+let __marigold_system = require("@marigold/system");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let __react_aria_utils = require("@react-aria/utils");
+let __react_aria_interactions = require("@react-aria/interactions");
+let __react_aria_focus = require("@react-aria/focus");
+let __react_aria_table = require("@react-aria/table");
+let __react_stately_table = require("@react-stately/table");
+
+//#region src/legacy/Table/Context.tsx
+const TableContext = (0, react.createContext)({});
+const useTableContext = () => (0, react.useContext)(TableContext);
+
+//#endregion
+//#region src/legacy/Table/TableBody.tsx
+const TableBody = ({ children = void 0, className, emptyState }) => {
+	const { rowGroupProps } = (0, __react_aria_table.useTableRowGroup)();
+	const { state, classNames } = useTableContext();
+	if (state.collection.size === 0 && emptyState) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("tbody", {
+		className,
+		"data-rac": true,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("tr", {
+			className: classNames?.row,
+			role: "row",
+			"data-rac": true,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
+				className: classNames?.cell,
+				colSpan: state.collection.columnCount,
+				role: "rowheader",
+				"data-rac": true,
+				children: emptyState()
+			})
+		})
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("tbody", {
+		...rowGroupProps,
+		className,
+		"data-rac": true,
+		children
+	});
+};
+
+//#endregion
+//#region src/legacy/Table/TableCell.tsx
+const TableCell = ({ cell, align = "left", alignY = "middle" }) => {
+	const ref = (0, react.useRef)(null);
+	const { interactive, state, classNames } = useTableContext();
+	const disabled = state.disabledKeys.has(cell.parentKey);
+	const { gridCellProps } = (0, __react_aria_table.useTableCell)({ node: cell }, state, ref);
+	const cellProps = interactive ? gridCellProps : {
+		...gridCellProps,
+		onMouseDown: (e) => e.stopPropagation(),
+		onPointerDown: (e) => e.stopPropagation()
+	};
+	const { focusProps, isFocusVisible } = (0, __react_aria_focus.useFocusRing)();
+	const stateProps = (0, __marigold_system.useStateProps)({
+		disabled,
+		focusVisible: isFocusVisible
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
+		ref,
+		className: classNames?.cell,
+		...(0, __react_aria_utils.mergeProps)(cellProps, focusProps),
+		...stateProps,
+		align,
+		valign: alignY,
+		"data-rac": true,
+		children: cell.rendered
+	});
+};
+
+//#endregion
+//#region src/legacy/Table/utils.ts
+/**
+* Map `react-aria` props to ours (no "is"-prefix)
+*/
+const mapCheckboxProps = ({ checkboxProps: { isIndeterminate, isSelected, isDisabled, defaultSelected, ...rest } }) => {
+	return { checkboxProps: {
+		disabled: isDisabled,
+		checked: isSelected,
+		defaultChecked: defaultSelected,
+		indeterminate: isIndeterminate,
+		...rest
+	} };
+};
+
+//#endregion
+//#region src/legacy/Table/TableCheckboxCell.tsx
+const TableCheckboxCell = ({ cell, alignY = "middle" }) => {
+	const ref = (0, react.useRef)(null);
+	const { state, classNames } = useTableContext();
+	const disabled = state.disabledKeys.has(cell.parentKey);
+	const { gridCellProps } = (0, __react_aria_table.useTableCell)({ node: cell }, state, ref);
+	const { checkboxProps } = mapCheckboxProps((0, __react_aria_table.useTableSelectionCheckbox)({ key: cell.parentKey }, state));
+	const { focusProps, isFocusVisible } = (0, __react_aria_focus.useFocusRing)();
+	const stateProps = (0, __marigold_system.useStateProps)({
+		disabled,
+		focusVisible: isFocusVisible
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
+		ref,
+		className: (0, __marigold_system.cn)("leading-none", classNames?.cell),
+		...(0, __react_aria_utils.mergeProps)(gridCellProps, focusProps),
+		...stateProps,
+		valign: alignY,
+		"data-rac": true,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Checkbox._Checkbox, { ...checkboxProps })
+	});
+};
+
+//#endregion
+//#region src/icons/SortDown.tsx
+const SortDown = ({ size = 24, className, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__marigold_system.SVG, {
+	width: size,
+	height: size,
+	viewBox: "0 0 24 24",
+	className: (0, __marigold_system.cn)("flex-none shrink-0 fill-current", className),
+	...props,
+	children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M17.3962 10.0496L12.5042 14.9416C12.3731 15.0727 12.1984 15.1492 12.0128 15.1492C11.8272 15.1492 11.6524 15.0727 11.5214 14.9416L6.62934 10.0496C6.49827 9.91854 6.42188 9.7439 6.42188 9.55816C6.42188 9.17606 6.73856 8.85938 7.12078 8.85938H16.9048C17.287 8.85938 17.6037 9.17606 17.6037 9.55816C17.6037 9.7439 17.5273 9.91854 17.3962 10.0496Z" })
+});
+
+//#endregion
+//#region src/icons/SortUp.tsx
+const SortUp = ({ size = 24, className, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__marigold_system.SVG, {
+	width: size,
+	height: size,
+	viewBox: "0 0 24 24",
+	className: (0, __marigold_system.cn)("flex-none shrink-0 fill-current", className),
+	...props,
+	children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M16.9048 15.1491H7.12078C6.73856 15.1491 6.42188 14.8324 6.42188 14.4503C6.42188 14.2645 6.49827 14.0899 6.62934 13.9588L11.5214 9.06684C11.6524 8.93577 11.8272 8.85938 12.0128 8.85938C12.1984 8.85938 12.3731 8.93577 12.5042 9.06684L17.3962 13.9588C17.5273 14.0899 17.6037 14.2645 17.6037 14.4503C17.6037 14.8324 17.287 15.1491 16.9048 15.1491Z" })
+});
+
+//#endregion
+//#region src/legacy/Table/TableColumnHeader.tsx
+const TableColumnHeader = ({ column, width = "auto", align = "left" }) => {
+	const ref = (0, react.useRef)(null);
+	const { state, classNames } = useTableContext();
+	const { columnHeaderProps } = (0, __react_aria_table.useTableColumnHeader)({ node: column }, state, ref);
+	const { hoverProps, isHovered } = (0, __react_aria_interactions.useHover)({});
+	const { focusProps, isFocusVisible } = (0, __react_aria_focus.useFocusRing)();
+	const stateProps = (0, __marigold_system.useStateProps)({
+		hover: isHovered,
+		focusVisible: isFocusVisible
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("th", {
+		colSpan: column.colspan,
+		ref,
+		className: (0, __marigold_system.cn)("whitespace-nowrap data-[react-aria-pressable=\"true\"]:cursor-pointer", __marigold_system.width[width], classNames?.header),
+		...(0, __react_aria_utils.mergeProps)(columnHeaderProps, hoverProps, focusProps),
+		...stateProps,
+		align,
+		"data-rac": true,
+		children: [column.rendered, column.props.allowsSorting && (state.sortDescriptor?.column === column.key ? state.sortDescriptor?.direction === "ascending" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SortUp, { className: "inline-block" }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SortDown, { className: "inline-block" }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: "hidden",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SortDown, { className: "inline-block" })
+		}))]
+	});
+};
+
+//#endregion
+//#region src/legacy/Table/TableHeader.tsx
+const TableHeader = ({ stickyHeader, children }) => {
+	const { rowGroupProps } = (0, __react_aria_table.useTableRowGroup)();
+	const { classNames } = useTableContext();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("thead", {
+		...rowGroupProps,
+		className: (0, __marigold_system.cn)(classNames?.thead, stickyHeader ? "sticky [&_th]:sticky [&_th]:top-0" : ""),
+		"data-rac": true,
+		children
+	});
+};
+
+//#endregion
+//#region src/legacy/Table/TableHeaderRow.tsx
+const TableHeaderRow = ({ item, className, children }) => {
+	const { state } = useTableContext();
+	const ref = (0, react.useRef)(null);
+	const { rowProps } = (0, __react_aria_table.useTableHeaderRow)({ node: item }, state, ref);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("tr", {
+		...rowProps,
+		className,
+		ref,
+		"data-rac": true,
+		children
+	});
+};
+
+//#endregion
+//#region src/legacy/Table/TableRow.tsx
+const TableRow = ({ children, row }) => {
+	const ref = (0, react.useRef)(null);
+	const { interactive, state, ...ctx } = useTableContext();
+	const { variant, size } = row.props;
+	const classNames = (0, __marigold_system.useClassNames)({
+		component: "LegacyTable",
+		variant: variant || ctx.variant,
+		size: size || ctx.size
+	});
+	const { rowProps, isPressed } = (0, __react_aria_table.useTableRow)({ node: row }, state, ref);
+	const disabled = state.disabledKeys.has(row.key);
+	const selected = state.selectionManager.isSelected(row.key);
+	const { focusProps, isFocusVisible } = (0, __react_aria_focus.useFocusRing)();
+	const { hoverProps, isHovered } = (0, __react_aria_interactions.useHover)({ isDisabled: disabled || !interactive });
+	const stateProps = (0, __marigold_system.useStateProps)({
+		disabled,
+		selected,
+		hover: isHovered,
+		focusVisible: isFocusVisible,
+		active: isPressed
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("tr", {
+		ref,
+		className: (0, __marigold_system.cn)([!interactive ? "cursor-text" : disabled ? "cursor-default" : "cursor-pointer"], classNames?.row),
+		...(0, __react_aria_utils.mergeProps)(rowProps, focusProps, hoverProps),
+		...stateProps,
+		"data-rac": true,
+		children
+	});
+};
+
+//#endregion
+//#region src/legacy/Table/TableSelectAllCell.tsx
+const TableSelectAllCell = ({ column, width = "auto", align = "left" }) => {
+	const ref = (0, react.useRef)(null);
+	const { state, classNames } = useTableContext();
+	const { columnHeaderProps } = (0, __react_aria_table.useTableColumnHeader)({ node: column }, state, ref);
+	const { checkboxProps } = mapCheckboxProps((0, __react_aria_table.useTableSelectAllCheckbox)(state));
+	const { hoverProps, isHovered } = (0, __react_aria_interactions.useHover)({});
+	const { focusProps, isFocusVisible } = (0, __react_aria_focus.useFocusRing)();
+	const stateProps = (0, __marigold_system.useStateProps)({
+		hover: isHovered,
+		focusVisible: isFocusVisible
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", {
+		ref,
+		className: (0, __marigold_system.cn)(__marigold_system.width[width], ["leading-none"], classNames?.header),
+		...(0, __react_aria_utils.mergeProps)(columnHeaderProps, hoverProps, focusProps),
+		...stateProps,
+		align,
+		"data-rac": true,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Checkbox._Checkbox, { ...checkboxProps })
+	});
+};
+
+//#endregion
+//#region src/legacy/Table/Table.tsx
+const Table = ({ variant, size, stretch = false, selectionMode = "none", disableKeyboardNavigation = false, stickyHeader, emptyState, alignY = "middle", ...props }) => {
+	const interactive = selectionMode !== "none";
+	const tableRef = (0, react.useRef)(null);
+	const state = (0, __react_stately_table.useTableState)({
+		...props,
+		selectionMode,
+		showSelectionCheckboxes: selectionMode === "multiple" && props.selectionBehavior !== "replace"
+	});
+	/**
+	* Behavior is a bit flacky with the table when using a keyboard
+	* so we test here for undefined here to be save.
+	*/
+	if (disableKeyboardNavigation !== void 0) state.isKeyboardNavigationDisabled = disableKeyboardNavigation;
+	const { gridProps } = (0, __react_aria_table.useTable)(props, state, tableRef);
+	const classNames = (0, __marigold_system.useClassNames)({
+		component: "LegacyTable",
+		variant,
+		size
+	});
+	const { collection } = state;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TableContext.Provider, {
+		value: {
+			state,
+			interactive,
+			classNames,
+			variant,
+			size
+		},
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("table", {
+			ref: tableRef,
+			"data-rac": true,
+			className: (0, __marigold_system.cn)(
+				"group/table border-collapse",
+				/**
+				* Prevents wide tables from causing overlays to become scrollable on
+				* small screens, ensuring overlays remain fixed as intended.
+				*/
+				"max-[600px]:in-aria-hidden:overflow-hidden",
+				stretch ? "table w-full" : "block",
+				classNames.table
+			),
+			...gridProps,
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TableHeader, {
+				stickyHeader,
+				children: collection.headerRows.map((headerRow) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TableHeaderRow, {
+					item: headerRow,
+					className: classNames.headerRow,
+					children: [...collection.getChildren(headerRow.key)].map((column) => column.props?.isSelectionCell ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TableSelectAllCell, {
+						width: column.props?.width,
+						column,
+						align: column.props?.align
+					}, column.key) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TableColumnHeader, {
+						width: column.props?.width,
+						column,
+						align: column.props?.align
+					}, column.key))
+				}, headerRow.key))
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TableBody, {
+				className: classNames.body,
+				emptyState,
+				children: [...collection.rows.map((row) => row.type === "item" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TableRow, {
+					row,
+					children: [...collection.getChildren(row.key)].map((cell, index) => {
+						const currentColumn = collection.columns[index];
+						return cell.props?.isSelectionCell ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TableCheckboxCell, {
+							cell,
+							alignY
+						}, cell.key) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TableCell, {
+							align: currentColumn.props?.align,
+							alignY,
+							cell
+						}, cell.key);
+					})
+				}, row.key))]
+			})]
+		})
+	});
+};
+Table.Body = __react_stately_table.TableBody;
+Table.Cell = __react_stately_table.Cell;
+Table.Column = __react_stately_table.Column;
+Table.Header = __react_stately_table.TableHeader;
+Table.Row = __react_stately_table.Row;
+
+//#endregion
+exports.Table = Table;

package/dist/legacy.d.cts

@@ -0,0 +1,60 @@
+import { WidthProp } from "@marigold/system";
+import { JSX, ReactNode } from "react";
+import { AriaTableProps } from "@react-aria/table";
+import { Cell, ColumnProps as ColumnProps$1, RowProps as RowProps$1, TableBody, TableHeader, TableStateProps } from "@react-stately/table";
+
+//#region src/legacy/Table/Table.d.ts
+interface TableProps extends Pick<AriaTableProps, 'focusMode' | 'onRowAction' | 'onCellAction'>, Omit<TableStateProps<object>, 'showSelectionCheckboxes' | 'showDragButtons' | 'allowDuplicateSelectionEvents'> {
+  variant?: 'grid' | 'default' | 'muted' | (string & {});
+  size?: string;
+  /**
+   * Stretch the table to fill the container.
+   * @default false
+   */
+  stretch?: boolean;
+  /**
+   * Make the column sticky to the top of the table.
+   * @default true
+   */
+  stickyHeader?: boolean;
+  /**
+   * Disable keyboard navigation. Use if you have input fields in your table. Be aware that this is bad for accessibility.
+   * @default false
+   */
+  disableKeyboardNavigation?: boolean;
+  /**
+   * Content to display when there are no rows in the table.
+   */
+  emptyState?: () => ReactNode;
+  /**
+   * Control the vertical alignment of table content.
+   * @default middle
+   */
+  alignY?: Exclude<JSX.IntrinsicElements['td']['valign'], 'baseline' | 'sub' | 'super' | 'bottom'>;
+}
+declare const Table: Table;
+interface RowProps extends RowProps$1<any> {
+  variant?: 'default' | 'grid' | 'admin' | 'master' | (string & {});
+  size?: string;
+}
+interface ColumnProps extends Omit<ColumnProps$1<any>, 'width'>, WidthProp {
+  /**
+   * Control the alignment of Column.
+   * @default left
+   */
+  align?: Exclude<JSX.IntrinsicElements['td']['align'], 'char'>;
+}
+/**
+ * Necessary since TypeScript can not infer the
+ * types of the @react-stately components.
+ */
+interface Table {
+  (props: TableProps): JSX.Element;
+  Body: typeof TableBody;
+  Cell: typeof Cell;
+  Header: typeof TableHeader;
+  Column: (props: ColumnProps) => JSX.Element;
+  Row: (props: RowProps) => JSX.Element;
+}
+//#endregion
+export { type ColumnProps, type RowProps, Table, type TableProps };

package/dist/legacy.d.mts

@@ -0,0 +1,60 @@
+import { WidthProp } from "@marigold/system";
+import { JSX, ReactNode } from "react";
+import { AriaTableProps } from "@react-aria/table";
+import { Cell, ColumnProps as ColumnProps$1, RowProps as RowProps$1, TableBody, TableHeader, TableStateProps } from "@react-stately/table";
+
+//#region src/legacy/Table/Table.d.ts
+interface TableProps extends Pick<AriaTableProps, 'focusMode' | 'onRowAction' | 'onCellAction'>, Omit<TableStateProps<object>, 'showSelectionCheckboxes' | 'showDragButtons' | 'allowDuplicateSelectionEvents'> {
+  variant?: 'grid' | 'default' | 'muted' | (string & {});
+  size?: string;
+  /**
+   * Stretch the table to fill the container.
+   * @default false
+   */
+  stretch?: boolean;
+  /**
+   * Make the column sticky to the top of the table.
+   * @default true
+   */
+  stickyHeader?: boolean;
+  /**
+   * Disable keyboard navigation. Use if you have input fields in your table. Be aware that this is bad for accessibility.
+   * @default false
+   */
+  disableKeyboardNavigation?: boolean;
+  /**
+   * Content to display when there are no rows in the table.
+   */
+  emptyState?: () => ReactNode;
+  /**
+   * Control the vertical alignment of table content.
+   * @default middle
+   */
+  alignY?: Exclude<JSX.IntrinsicElements['td']['valign'], 'baseline' | 'sub' | 'super' | 'bottom'>;
+}
+declare const Table: Table;
+interface RowProps extends RowProps$1<any> {
+  variant?: 'default' | 'grid' | 'admin' | 'master' | (string & {});
+  size?: string;
+}
+interface ColumnProps extends Omit<ColumnProps$1<any>, 'width'>, WidthProp {
+  /**
+   * Control the alignment of Column.
+   * @default left
+   */
+  align?: Exclude<JSX.IntrinsicElements['td']['align'], 'char'>;
+}
+/**
+ * Necessary since TypeScript can not infer the
+ * types of the @react-stately components.
+ */
+interface Table {
+  (props: TableProps): JSX.Element;
+  Body: typeof TableBody;
+  Cell: typeof Cell;
+  Header: typeof TableHeader;
+  Column: (props: ColumnProps) => JSX.Element;
+  Row: (props: RowProps) => JSX.Element;
+}
+//#endregion
+export { type ColumnProps, type RowProps, Table, type TableProps };