@marigold/components 16.1.0 → 17.0.0

package/dist/legacy.mjs

@@ -0,0 +1,333 @@
+import { t as _Checkbox } from "./Checkbox-D6DudF_g.mjs";
+import { SVG, cn, useClassNames, useStateProps, width } from "@marigold/system";
+import { createContext, useContext, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { mergeProps } from "@react-aria/utils";
+import { useHover } from "@react-aria/interactions";
+import { useFocusRing } from "@react-aria/focus";
+import { useTable, useTableCell, useTableColumnHeader, useTableHeaderRow, useTableRow, useTableRowGroup, useTableSelectAllCheckbox, useTableSelectionCheckbox } from "@react-aria/table";
+import { Cell, Column, Row, TableBody, TableHeader, useTableState } from "@react-stately/table";
+
+//#region src/legacy/Table/Context.tsx
+const TableContext = createContext({});
+const useTableContext = () => useContext(TableContext);
+
+//#endregion
+//#region src/legacy/Table/TableBody.tsx
+const TableBody$1 = ({ children = void 0, className, emptyState }) => {
+	const { rowGroupProps } = useTableRowGroup();
+	const { state, classNames } = useTableContext();
+	if (state.collection.size === 0 && emptyState) return /* @__PURE__ */ jsx("tbody", {
+		className,
+		"data-rac": true,
+		children: /* @__PURE__ */ jsx("tr", {
+			className: classNames?.row,
+			role: "row",
+			"data-rac": true,
+			children: /* @__PURE__ */ jsx("td", {
+				className: classNames?.cell,
+				colSpan: state.collection.columnCount,
+				role: "rowheader",
+				"data-rac": true,
+				children: emptyState()
+			})
+		})
+	});
+	return /* @__PURE__ */ jsx("tbody", {
+		...rowGroupProps,
+		className,
+		"data-rac": true,
+		children
+	});
+};
+
+//#endregion
+//#region src/legacy/Table/TableCell.tsx
+const TableCell = ({ cell, align = "left", alignY = "middle" }) => {
+	const ref = useRef(null);
+	const { interactive, state, classNames } = useTableContext();
+	const disabled = state.disabledKeys.has(cell.parentKey);
+	const { gridCellProps } = useTableCell({ node: cell }, state, ref);
+	const cellProps = interactive ? gridCellProps : {
+		...gridCellProps,
+		onMouseDown: (e) => e.stopPropagation(),
+		onPointerDown: (e) => e.stopPropagation()
+	};
+	const { focusProps, isFocusVisible } = useFocusRing();
+	const stateProps = useStateProps({
+		disabled,
+		focusVisible: isFocusVisible
+	});
+	return /* @__PURE__ */ jsx("td", {
+		ref,
+		className: classNames?.cell,
+		...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 = useRef(null);
+	const { state, classNames } = useTableContext();
+	const disabled = state.disabledKeys.has(cell.parentKey);
+	const { gridCellProps } = useTableCell({ node: cell }, state, ref);
+	const { checkboxProps } = mapCheckboxProps(useTableSelectionCheckbox({ key: cell.parentKey }, state));
+	const { focusProps, isFocusVisible } = useFocusRing();
+	const stateProps = useStateProps({
+		disabled,
+		focusVisible: isFocusVisible
+	});
+	return /* @__PURE__ */ jsx("td", {
+		ref,
+		className: cn("leading-none", classNames?.cell),
+		...mergeProps(gridCellProps, focusProps),
+		...stateProps,
+		valign: alignY,
+		"data-rac": true,
+		children: /* @__PURE__ */ jsx(_Checkbox, { ...checkboxProps })
+	});
+};
+
+//#endregion
+//#region src/icons/SortDown.tsx
+const SortDown = ({ size = 24, className, ...props }) => /* @__PURE__ */ jsx(SVG, {
+	width: size,
+	height: size,
+	viewBox: "0 0 24 24",
+	className: cn("flex-none shrink-0 fill-current", className),
+	...props,
+	children: /* @__PURE__ */ 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__ */ jsx(SVG, {
+	width: size,
+	height: size,
+	viewBox: "0 0 24 24",
+	className: cn("flex-none shrink-0 fill-current", className),
+	...props,
+	children: /* @__PURE__ */ 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: width$1 = "auto", align = "left" }) => {
+	const ref = useRef(null);
+	const { state, classNames } = useTableContext();
+	const { columnHeaderProps } = useTableColumnHeader({ node: column }, state, ref);
+	const { hoverProps, isHovered } = useHover({});
+	const { focusProps, isFocusVisible } = useFocusRing();
+	const stateProps = useStateProps({
+		hover: isHovered,
+		focusVisible: isFocusVisible
+	});
+	return /* @__PURE__ */ jsxs("th", {
+		colSpan: column.colspan,
+		ref,
+		className: cn("whitespace-nowrap data-[react-aria-pressable=\"true\"]:cursor-pointer", width[width$1], classNames?.header),
+		...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__ */ jsx(SortUp, { className: "inline-block" }) : /* @__PURE__ */ jsx(SortDown, { className: "inline-block" }) : /* @__PURE__ */ jsx("span", {
+			className: "hidden",
+			children: /* @__PURE__ */ jsx(SortDown, { className: "inline-block" })
+		}))]
+	});
+};
+
+//#endregion
+//#region src/legacy/Table/TableHeader.tsx
+const TableHeader$1 = ({ stickyHeader, children }) => {
+	const { rowGroupProps } = useTableRowGroup();
+	const { classNames } = useTableContext();
+	return /* @__PURE__ */ jsx("thead", {
+		...rowGroupProps,
+		className: 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 = useRef(null);
+	const { rowProps } = useTableHeaderRow({ node: item }, state, ref);
+	return /* @__PURE__ */ jsx("tr", {
+		...rowProps,
+		className,
+		ref,
+		"data-rac": true,
+		children
+	});
+};
+
+//#endregion
+//#region src/legacy/Table/TableRow.tsx
+const TableRow = ({ children, row }) => {
+	const ref = useRef(null);
+	const { interactive, state, ...ctx } = useTableContext();
+	const { variant, size } = row.props;
+	const classNames = useClassNames({
+		component: "LegacyTable",
+		variant: variant || ctx.variant,
+		size: size || ctx.size
+	});
+	const { rowProps, isPressed } = useTableRow({ node: row }, state, ref);
+	const disabled = state.disabledKeys.has(row.key);
+	const selected = state.selectionManager.isSelected(row.key);
+	const { focusProps, isFocusVisible } = useFocusRing();
+	const { hoverProps, isHovered } = useHover({ isDisabled: disabled || !interactive });
+	const stateProps = useStateProps({
+		disabled,
+		selected,
+		hover: isHovered,
+		focusVisible: isFocusVisible,
+		active: isPressed
+	});
+	return /* @__PURE__ */ jsx("tr", {
+		ref,
+		className: cn([!interactive ? "cursor-text" : disabled ? "cursor-default" : "cursor-pointer"], classNames?.row),
+		...mergeProps(rowProps, focusProps, hoverProps),
+		...stateProps,
+		"data-rac": true,
+		children
+	});
+};
+
+//#endregion
+//#region src/legacy/Table/TableSelectAllCell.tsx
+const TableSelectAllCell = ({ column, width: width$1 = "auto", align = "left" }) => {
+	const ref = useRef(null);
+	const { state, classNames } = useTableContext();
+	const { columnHeaderProps } = useTableColumnHeader({ node: column }, state, ref);
+	const { checkboxProps } = mapCheckboxProps(useTableSelectAllCheckbox(state));
+	const { hoverProps, isHovered } = useHover({});
+	const { focusProps, isFocusVisible } = useFocusRing();
+	const stateProps = useStateProps({
+		hover: isHovered,
+		focusVisible: isFocusVisible
+	});
+	return /* @__PURE__ */ jsx("th", {
+		ref,
+		className: cn(width[width$1], ["leading-none"], classNames?.header),
+		...mergeProps(columnHeaderProps, hoverProps, focusProps),
+		...stateProps,
+		align,
+		"data-rac": true,
+		children: /* @__PURE__ */ jsx(_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 = useRef(null);
+	const state = 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 } = useTable(props, state, tableRef);
+	const classNames = useClassNames({
+		component: "LegacyTable",
+		variant,
+		size
+	});
+	const { collection } = state;
+	return /* @__PURE__ */ jsx(TableContext.Provider, {
+		value: {
+			state,
+			interactive,
+			classNames,
+			variant,
+			size
+		},
+		children: /* @__PURE__ */ jsxs("table", {
+			ref: tableRef,
+			"data-rac": true,
+			className: 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__ */ jsx(TableHeader$1, {
+				stickyHeader,
+				children: collection.headerRows.map((headerRow) => /* @__PURE__ */ jsx(TableHeaderRow, {
+					item: headerRow,
+					className: classNames.headerRow,
+					children: [...collection.getChildren(headerRow.key)].map((column) => column.props?.isSelectionCell ? /* @__PURE__ */ jsx(TableSelectAllCell, {
+						width: column.props?.width,
+						column,
+						align: column.props?.align
+					}, column.key) : /* @__PURE__ */ jsx(TableColumnHeader, {
+						width: column.props?.width,
+						column,
+						align: column.props?.align
+					}, column.key))
+				}, headerRow.key))
+			}), /* @__PURE__ */ jsx(TableBody$1, {
+				className: classNames.body,
+				emptyState,
+				children: [...collection.rows.map((row) => row.type === "item" && /* @__PURE__ */ jsx(TableRow, {
+					row,
+					children: [...collection.getChildren(row.key)].map((cell, index) => {
+						const currentColumn = collection.columns[index];
+						return cell.props?.isSelectionCell ? /* @__PURE__ */ jsx(TableCheckboxCell, {
+							cell,
+							alignY
+						}, cell.key) : /* @__PURE__ */ jsx(TableCell, {
+							align: currentColumn.props?.align,
+							alignY,
+							cell
+						}, cell.key);
+					})
+				}, row.key))]
+			})]
+		})
+	});
+};
+Table.Body = TableBody;
+Table.Cell = Cell;
+Table.Column = Column;
+Table.Header = TableHeader;
+Table.Row = Row;
+
+//#endregion
+export { Table };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marigold/components",
-  "version": "16.1.0",
+  "version": "17.0.0",
   "description": "Components for the Marigold Design System",
   "license": "MIT",
   "keywords": [
@@ -10,17 +10,29 @@
     "design system",
     "react"
   ],
-  "main": "./dist/index.js",
+  "main": "./dist/index.cjs",
   "module": "./dist/index.mjs",
-  "types": "./dist/index.d.ts",
+  "types": "./dist/index.d.mts",
   "exports": {
     ".": {
-      "require": "./dist/index.js",
-      "import": "./dist/index.mjs"
+      "import": {
+        "types": "./dist/index.d.mts",
+        "default": "./dist/index.mjs"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
     },
-    "./*": {
-      "require": "./dist/*.js",
-      "import": "./dist/*.mjs"
+    "./legacy": {
+      "import": {
+        "types": "./dist/legacy.d.mts",
+        "default": "./dist/legacy.mjs"
+      },
+      "require": {
+        "types": "./dist/legacy.d.cts",
+        "default": "./dist/legacy.cjs"
+      }
     }
   },
   "sideEffects": false,
@@ -33,29 +45,31 @@
     "directory": "packages/components"
   },
   "dependencies": {
-    "@internationalized/date": "^3.10.0",
-    "@react-aria/button": "^3.14.2",
-    "@react-aria/calendar": "^3.9.2",
-    "@react-aria/focus": "^3.21.2",
-    "@react-aria/i18n": "^3.12.13",
-    "@react-aria/interactions": "^3.25.6",
-    "@react-aria/label": "^3.7.22",
-    "@react-aria/landmark": "^3.0.7",
-    "@react-aria/overlays": "^3.30.0",
-    "@react-aria/selection": "^3.26.0",
+    "@internationalized/date": "^3.11.0",
+    "@react-aria/button": "^3.14.4",
+    "@react-aria/calendar": "^3.9.4",
+    "@react-aria/collections": "3.0.2",
+    "@react-aria/focus": "^3.21.4",
+    "@react-aria/i18n": "^3.12.15",
+    "@react-aria/interactions": "^3.27.0",
+    "@react-aria/label": "^3.7.24",
+    "@react-aria/landmark": "^3.0.9",
+    "@react-aria/overlays": "^3.31.1",
+    "@react-aria/selection": "^3.27.1",
     "@react-aria/ssr": "^3.9.10",
-    "@react-aria/table": "^3.17.8",
-    "@react-aria/utils": "^3.31.0",
-    "@react-aria/visually-hidden": "^3.8.28",
-    "@react-stately/collections": "^3.12.8",
-    "@react-stately/data": "^3.14.1",
-    "@react-stately/table": "^3.15.1",
-    "@react-stately/tree": "^3.9.3",
-    "@react-types/shared": "^3.32.1",
-    "@react-types/table": "^3.13.4",
-    "react-aria-components": "^1.13.0",
-    "react-stately": "^3.42.0",
-    "@marigold/system": "16.1.0",
+    "@react-aria/table": "^3.17.10",
+    "@react-aria/utils": "^3.33.0",
+    "@react-aria/visually-hidden": "^3.8.30",
+    "@react-stately/collections": "^3.12.9",
+    "@react-stately/data": "^3.15.1",
+    "@react-stately/table": "^3.15.3",
+    "@react-stately/tree": "^3.9.5",
+    "@react-types/shared": "^3.33.0",
+    "@react-types/table": "^3.13.5",
+    "motion": "12.23.26",
+    "react-aria-components": "^1.15.0",
+    "react-stately": "^3.44.0",
+    "@marigold/system": "17.0.0",
     "@marigold/types": "1.4.0"
   },
   "peerDependencies": {
@@ -63,17 +77,17 @@
     "react-dom": ">=17.0.0"
   },
   "devDependencies": {
-    "@types/react": "19.2.2",
+    "@types/react": "19.2.7",
     "lucide-react": "0.555.0",
-    "react": "19.2.0",
-    "react-dom": "19.2.0",
+    "react": "19.2.3",
+    "react-dom": "19.2.3",
     "tsdown": "0.16.8",
-    "@marigold/icons": "1.3.30",
+    "@marigold/icons": "1.3.31",
     "@marigold/tsconfig": "0.4.2"
   },
   "scripts": {
-    "build": "tsdown src/index.ts",
-    "watch": "tsdown src/index.ts --watch",
+    "build": "tsdown",
+    "watch": "tsdown --watch",
     "clean": "rm -rf node_modules && rm -rf dist"
   }
 }