@marigold/components 2.1.2 → 2.1.3

package/dist/index.js

@@ -994,13 +994,14 @@ var Link = (0, import_react28.forwardRef)(
       linkRef
     );
     const styles = (0, import_system18.useComponentStyles)("Link", { variant, size });
-    return /* @__PURE__ */ import_react28.default.createElement(import_system.Box, {
+    return /* @__PURE__ */ import_react28.default.createElement(import_react28.default.Fragment, null, " ", /* @__PURE__ */ import_react28.default.createElement(import_system.Box, {
       as,
+      role: "link",
       css: styles,
       ref: linkRef,
       ...props,
       ...linkProps
-    }, children);
+    }, children), " ");
   }
 );
 
@@ -2184,7 +2185,7 @@ var import_utils15 = require("@react-aria/utils");
 var import_system40 = require("@marigold/system");
 var TableCell = ({ cell }) => {
   const ref = (0, import_react57.useRef)(null);
-  const { state, styles } = useTableContext();
+  const { interactive, state, styles } = useTableContext();
   const disabled = state.disabledKeys.has(cell.parentKey);
   const { gridCellProps } = (0, import_table2.useTableCell)(
     {
@@ -2193,13 +2194,18 @@ var TableCell = ({ cell }) => {
     state,
     ref
   );
+  const cellProps = interactive ? gridCellProps : {
+    ...gridCellProps,
+    onMouseDown: (e) => e.stopPropagation(),
+    onPointerDown: (e) => e.stopPropagation()
+  };
   const { focusProps, isFocusVisible } = (0, import_focus11.useFocusRing)();
   const stateProps = (0, import_system40.useStateProps)({ disabled, focusVisible: isFocusVisible });
   return /* @__PURE__ */ import_react57.default.createElement(import_system40.Box, {
     as: "td",
     ref,
     css: styles.cell,
-    ...(0, import_utils15.mergeProps)(gridCellProps, focusProps),
+    ...(0, import_utils15.mergeProps)(cellProps, focusProps),
     ...stateProps
   }, cell.rendered);
 };
@@ -2305,6 +2311,7 @@ var TableColumnHeader = ({ column }) => {
     as: "th",
     colSpan: column.colspan,
     ref,
+    __baseCSS: { cursor: "default" },
     css: styles.header,
     ...(0, import_utils18.mergeProps)(columnHeaderProps, hoverProps, focusProps),
     ...stateProps
@@ -2346,7 +2353,7 @@ var import_utils19 = require("@react-aria/utils");
 var import_system43 = require("@marigold/system");
 var TableRow = ({ children, row }) => {
   const ref = (0, import_react62.useRef)(null);
-  const { state, styles } = useTableContext();
+  const { interactive, state, styles } = useTableContext();
   const { rowProps, isPressed } = (0, import_table7.useTableRow)(
     {
       node: row
@@ -2357,7 +2364,9 @@ var TableRow = ({ children, row }) => {
   const disabled = state.disabledKeys.has(row.key);
   const selected = state.selectionManager.isSelected(row.key);
   const { focusProps, isFocusVisible } = (0, import_focus14.useFocusRing)({ within: true });
-  const { hoverProps, isHovered } = (0, import_interactions9.useHover)({ isDisabled: disabled });
+  const { hoverProps, isHovered } = (0, import_interactions9.useHover)({
+    isDisabled: disabled || !interactive
+  });
   const stateProps = (0, import_system43.useStateProps)({
     disabled,
     selected,
@@ -2368,6 +2377,9 @@ var TableRow = ({ children, row }) => {
   return /* @__PURE__ */ import_react62.default.createElement(import_system43.Box, {
     as: "tr",
     ref,
+    __baseCSS: {
+      cursor: !interactive ? "text" : disabled ? "default" : "pointer"
+    },
     css: styles.row,
     ...(0, import_utils19.mergeProps)(rowProps, focusProps, hoverProps),
     ...stateProps
@@ -2419,12 +2431,15 @@ var Table = ({
   variant,
   size,
   stretch,
+  selectionMode = "none",
   ...props
 }) => {
+  const interactive = selectionMode !== "none";
   const tableRef = (0, import_react64.useRef)(null);
   const state = (0, import_table10.useTableState)({
     ...props,
-    showSelectionCheckboxes: props.selectionMode === "multiple" && props.selectionBehavior !== "replace"
+    selectionMode,
+    showSelectionCheckboxes: selectionMode === "multiple" && props.selectionBehavior !== "replace"
   });
   const { gridProps } = (0, import_table9.useTable)(props, state, tableRef);
   const styles = (0, import_system45.useComponentStyles)(
@@ -2434,13 +2449,19 @@ var Table = ({
   );
   const { collection } = state;
   return /* @__PURE__ */ import_react64.default.createElement(TableContext.Provider, {
-    value: { state, styles }
+    value: { state, interactive, styles }
+  }, /* @__PURE__ */ import_react64.default.createElement(import_system45.Box, {
+    __baseCSS: {
+      overflow: ["scroll", "unset"],
+      whiteSpace: ["nowrap", "unset"]
+    }
   }, /* @__PURE__ */ import_react64.default.createElement(import_system45.Box, {
     as: "table",
     ref: tableRef,
     __baseCSS: {
       borderCollapse: "collapse",
-      width: stretch ? "100%" : void 0
+      width: stretch ? "100%" : void 0,
+      overflow: ["scroll", "unset"]
     },
     css: styles.table,
     ...gridProps
@@ -2472,7 +2493,7 @@ var Table = ({
         cell
       });
     }
-  ))))));
+  )))))));
 };
 Table.Body = import_table10.TableBody;
 Table.Cell = import_table10.Cell;

package/dist/index.mjs

@@ -941,13 +941,14 @@ var Link = forwardRef6(
       linkRef
     );
     const styles = useComponentStyles16("Link", { variant, size });
-    return /* @__PURE__ */ React27.createElement(Box, {
+    return /* @__PURE__ */ React27.createElement(React27.Fragment, null, " ", /* @__PURE__ */ React27.createElement(Box, {
       as,
+      role: "link",
       css: styles,
       ref: linkRef,
       ...props,
       ...linkProps
-    }, children);
+    }, children), " ");
   }
 );
 
@@ -2181,7 +2182,7 @@ import { mergeProps as mergeProps9 } from "@react-aria/utils";
 import { Box as Box29, useStateProps as useStateProps11 } from "@marigold/system";
 var TableCell = ({ cell }) => {
   const ref = useRef10(null);
-  const { state, styles } = useTableContext();
+  const { interactive, state, styles } = useTableContext();
   const disabled = state.disabledKeys.has(cell.parentKey);
   const { gridCellProps } = useTableCell(
     {
@@ -2190,13 +2191,18 @@ var TableCell = ({ cell }) => {
     state,
     ref
   );
+  const cellProps = interactive ? gridCellProps : {
+    ...gridCellProps,
+    onMouseDown: (e) => e.stopPropagation(),
+    onPointerDown: (e) => e.stopPropagation()
+  };
   const { focusProps, isFocusVisible } = useFocusRing9();
   const stateProps = useStateProps11({ disabled, focusVisible: isFocusVisible });
   return /* @__PURE__ */ React51.createElement(Box29, {
     as: "td",
     ref,
     css: styles.cell,
-    ...mergeProps9(gridCellProps, focusProps),
+    ...mergeProps9(cellProps, focusProps),
     ...stateProps
   }, cell.rendered);
 };
@@ -2302,6 +2308,7 @@ var TableColumnHeader = ({ column }) => {
     as: "th",
     colSpan: column.colspan,
     ref,
+    __baseCSS: { cursor: "default" },
     css: styles.header,
     ...mergeProps11(columnHeaderProps, hoverProps, focusProps),
     ...stateProps
@@ -2343,7 +2350,7 @@ import { mergeProps as mergeProps12 } from "@react-aria/utils";
 import { Box as Box32, useStateProps as useStateProps14 } from "@marigold/system";
 var TableRow = ({ children, row }) => {
   const ref = useRef14(null);
-  const { state, styles } = useTableContext();
+  const { interactive, state, styles } = useTableContext();
   const { rowProps, isPressed } = useTableRow(
     {
       node: row
@@ -2354,7 +2361,9 @@ var TableRow = ({ children, row }) => {
   const disabled = state.disabledKeys.has(row.key);
   const selected = state.selectionManager.isSelected(row.key);
   const { focusProps, isFocusVisible } = useFocusRing12({ within: true });
-  const { hoverProps, isHovered } = useHover7({ isDisabled: disabled });
+  const { hoverProps, isHovered } = useHover7({
+    isDisabled: disabled || !interactive
+  });
   const stateProps = useStateProps14({
     disabled,
     selected,
@@ -2365,6 +2374,9 @@ var TableRow = ({ children, row }) => {
   return /* @__PURE__ */ React56.createElement(Box32, {
     as: "tr",
     ref,
+    __baseCSS: {
+      cursor: !interactive ? "text" : disabled ? "default" : "pointer"
+    },
     css: styles.row,
     ...mergeProps12(rowProps, focusProps, hoverProps),
     ...stateProps
@@ -2419,12 +2431,15 @@ var Table = ({
   variant,
   size,
   stretch,
+  selectionMode = "none",
   ...props
 }) => {
+  const interactive = selectionMode !== "none";
   const tableRef = useRef16(null);
   const state = useTableState({
     ...props,
-    showSelectionCheckboxes: props.selectionMode === "multiple" && props.selectionBehavior !== "replace"
+    selectionMode,
+    showSelectionCheckboxes: selectionMode === "multiple" && props.selectionBehavior !== "replace"
   });
   const { gridProps } = useTable(props, state, tableRef);
   const styles = useComponentStyles28(
@@ -2434,13 +2449,19 @@ var Table = ({
   );
   const { collection } = state;
   return /* @__PURE__ */ React58.createElement(TableContext.Provider, {
-    value: { state, styles }
+    value: { state, interactive, styles }
+  }, /* @__PURE__ */ React58.createElement(Box34, {
+    __baseCSS: {
+      overflow: ["scroll", "unset"],
+      whiteSpace: ["nowrap", "unset"]
+    }
   }, /* @__PURE__ */ React58.createElement(Box34, {
     as: "table",
     ref: tableRef,
     __baseCSS: {
       borderCollapse: "collapse",
-      width: stretch ? "100%" : void 0
+      width: stretch ? "100%" : void 0,
+      overflow: ["scroll", "unset"]
     },
     css: styles.table,
     ...gridProps
@@ -2472,7 +2493,7 @@ var Table = ({
         cell
       });
     }
-  ))))));
+  )))))));
 };
 Table.Body = Body;
 Table.Cell = Cell;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marigold/components",
-  "version": "2.1.2",
+  "version": "2.1.3",
   "description": "Components for the Marigold Design System",
   "license": "MIT",
   "keywords": [
@@ -23,8 +23,8 @@
     "directory": "packages/components"
   },
   "dependencies": {
-    "@marigold/icons": "1.0.3",
-    "@marigold/system": "2.1.2",
+    "@marigold/icons": "1.0.4",
+    "@marigold/system": "2.1.3",
     "@marigold/tokens": "3.1.0",
     "@marigold/types": "0.5.2",
     "@react-aria/button": "3.6.0",