@marigold/components 4.2.0 → 4.2.1

package/dist/index.js

@@ -1329,6 +1329,7 @@ var MenuItem = ({ item, state, onAction, css }) => {
   const stateProps = (0, import_system25.useStateProps)({
     focus: isFocusVisible
   });
+  const { onPointerUp, ...props } = menuItemProps;
   return /* @__PURE__ */ import_react38.default.createElement(import_system25.Box, {
     as: "li",
     ref,
@@ -1338,7 +1339,7 @@ var MenuItem = ({ item, state, onAction, css }) => {
       }
     },
     css,
-    ...(0, import_utils8.mergeProps)(menuItemProps, focusProps),
+    ...(0, import_utils8.mergeProps)(props, { onPointerDown: onPointerUp }, focusProps),
     ...stateProps
   }, item.rendered);
 };
@@ -1790,12 +1791,12 @@ var import_i18n2 = require("@react-aria/i18n");
 var import_select = require("@react-aria/select");
 var import_select2 = require("@react-stately/select");
 var import_collections2 = require("@react-stately/collections");
-var import_utils14 = require("@react-aria/utils");
+var import_utils15 = require("@react-aria/utils");
 var import_system37 = require("@marigold/system");
 
 // src/ListBox/ListBox.tsx
 var import_react50 = __toESM(require("react"));
-var import_utils13 = require("@react-aria/utils");
+var import_utils14 = require("@react-aria/utils");
 var import_system36 = require("@marigold/system");
 var import_listbox3 = require("@react-aria/listbox");
 
@@ -1812,6 +1813,7 @@ var import_system35 = require("@marigold/system");
 // src/ListBox/ListBoxOption.tsx
 var import_react48 = __toESM(require("react"));
 var import_listbox = require("@react-aria/listbox");
+var import_utils13 = require("@react-aria/utils");
 var import_system34 = require("@marigold/system");
 var ListBoxOption = ({ item, state }) => {
   const ref = (0, import_react48.useRef)(null);
@@ -1822,6 +1824,7 @@ var ListBoxOption = ({ item, state }) => {
     state,
     ref
   );
+  const { onPointerUp, ...props } = optionProps;
   const { styles } = useListBoxContext();
   const stateProps = (0, import_system34.useStateProps)({
     selected: isSelected,
@@ -1832,8 +1835,7 @@ var ListBoxOption = ({ item, state }) => {
     as: "li",
     ref,
     css: styles.option,
-    ...optionProps,
-    ...stateProps
+    ...(0, import_utils13.mergeProps)(props, { onPointerDown: onPointerUp }, { ...stateProps })
   }, item.rendered);
 };
 
@@ -1866,7 +1868,7 @@ var ListBoxSection = ({ section, state }) => {
 // src/ListBox/ListBox.tsx
 var ListBox = (0, import_react50.forwardRef)(
   ({ state, variant, size, ...props }, ref) => {
-    const innerRef = (0, import_utils13.useObjectRef)(ref);
+    const innerRef = (0, import_utils14.useObjectRef)(ref);
     const { listBoxProps } = (0, import_listbox3.useListBox)(props, state, innerRef);
     const styles = (0, import_system36.useComponentStyles)(
       "ListBox",
@@ -1932,7 +1934,7 @@ var Select = (0, import_react51.forwardRef)(
       ...rest
     };
     const state = (0, import_select2.useSelectState)(props);
-    const buttonRef = (0, import_utils14.useObjectRef)(ref);
+    const buttonRef = (0, import_utils15.useObjectRef)(ref);
     const listboxRef = (0, import_react51.useRef)(null);
     const isSmallScreen = (0, import_system37.useResponsiveValue)([true, false, false], 2);
     const {
@@ -1990,7 +1992,7 @@ var Select = (0, import_react51.forwardRef)(
       },
       css: styles.button,
       ref: buttonRef,
-      ...(0, import_utils14.mergeProps)(buttonProps, focusProps),
+      ...(0, import_utils15.mergeProps)(buttonProps, focusProps),
       ...stateProps
     }, /* @__PURE__ */ import_react51.default.createElement(import_system37.Box, {
       css: {
@@ -2029,13 +2031,13 @@ var import_react53 = __toESM(require("react"));
 var import_slider2 = require("@react-aria/slider");
 var import_slider3 = require("@react-stately/slider");
 var import_i18n3 = require("@react-aria/i18n");
-var import_utils16 = require("@react-aria/utils");
+var import_utils17 = require("@react-aria/utils");
 var import_system39 = require("@marigold/system");
 
 // src/Slider/Thumb.tsx
 var import_react52 = __toESM(require("react"));
 var import_slider = require("@react-aria/slider");
-var import_utils15 = require("@react-aria/utils");
+var import_utils16 = require("@react-aria/utils");
 var import_system38 = require("@marigold/system");
 
 // src/VisuallyHidden/VisuallyHidden.tsx
@@ -2073,7 +2075,7 @@ var Thumb = ({ state, trackRef, styles, ...props }) => {
     as: "input",
     type: "range",
     ref: inputRef,
-    ...(0, import_utils15.mergeProps)(inputProps, focusProps)
+    ...(0, import_utils16.mergeProps)(inputProps, focusProps)
   })));
 };
 
@@ -2081,7 +2083,7 @@ var Thumb = ({ state, trackRef, styles, ...props }) => {
 var Slider = (0, import_react53.forwardRef)(
   ({ variant, size, width = "100%", ...props }, ref) => {
     const { formatOptions } = props;
-    const trackRef = (0, import_utils16.useObjectRef)(ref);
+    const trackRef = (0, import_utils17.useObjectRef)(ref);
     const numberFormatter = (0, import_i18n3.useNumberFormatter)(formatOptions);
     const state = (0, import_slider3.useSliderState)({ ...props, numberFormatter });
     const { groupProps, trackProps, labelProps, outputProps } = (0, import_slider2.useSlider)(
@@ -2186,7 +2188,7 @@ var Stack = ({
 var import_react56 = __toESM(require("react"));
 var import_focus11 = require("@react-aria/focus");
 var import_switch = require("@react-aria/switch");
-var import_utils17 = require("@react-aria/utils");
+var import_utils18 = require("@react-aria/utils");
 var import_toggle2 = require("@react-stately/toggle");
 var import_system41 = require("@marigold/system");
 var Switch = (0, import_react56.forwardRef)(
@@ -2200,7 +2202,7 @@ var Switch = (0, import_react56.forwardRef)(
     defaultChecked,
     ...rest
   }, ref) => {
-    const inputRef = (0, import_utils17.useObjectRef)(ref);
+    const inputRef = (0, import_utils18.useObjectRef)(ref);
     const props = {
       isSelected: checked,
       isDisabled: disabled,
@@ -2309,7 +2311,7 @@ var TableBody = ({ children }) => {
 var import_react59 = __toESM(require("react"));
 var import_table2 = require("@react-aria/table");
 var import_focus12 = require("@react-aria/focus");
-var import_utils18 = require("@react-aria/utils");
+var import_utils19 = require("@react-aria/utils");
 var import_system42 = require("@marigold/system");
 var TableCell = ({ cell }) => {
   const ref = (0, import_react59.useRef)(null);
@@ -2333,7 +2335,7 @@ var TableCell = ({ cell }) => {
     as: "td",
     ref,
     css: styles.cell,
-    ...(0, import_utils18.mergeProps)(cellProps, focusProps),
+    ...(0, import_utils19.mergeProps)(cellProps, focusProps),
     ...stateProps
   }, cell.rendered);
 };
@@ -2342,7 +2344,7 @@ var TableCell = ({ cell }) => {
 var import_react60 = __toESM(require("react"));
 var import_table3 = require("@react-aria/table");
 var import_focus13 = require("@react-aria/focus");
-var import_utils19 = require("@react-aria/utils");
+var import_utils20 = require("@react-aria/utils");
 var import_system43 = require("@marigold/system");
 
 // src/Table/utils.ts
@@ -2391,7 +2393,7 @@ var TableCheckboxCell = ({ cell }) => {
       lineHeight: 1
     },
     css: styles.cell,
-    ...(0, import_utils19.mergeProps)(gridCellProps, focusProps),
+    ...(0, import_utils20.mergeProps)(gridCellProps, focusProps),
     ...stateProps
   }, /* @__PURE__ */ import_react60.default.createElement(Checkbox, {
     ...checkboxProps
@@ -2403,7 +2405,7 @@ var import_react61 = __toESM(require("react"));
 var import_focus14 = require("@react-aria/focus");
 var import_interactions8 = require("@react-aria/interactions");
 var import_table4 = require("@react-aria/table");
-var import_utils21 = require("@react-aria/utils");
+var import_utils22 = require("@react-aria/utils");
 var import_system44 = require("@marigold/system");
 var SortIndicator = ({
   direction = "ascending",
@@ -2441,7 +2443,7 @@ var TableColumnHeader = ({ column }) => {
     ref,
     __baseCSS: { cursor: "default" },
     css: styles.header,
-    ...(0, import_utils21.mergeProps)(columnHeaderProps, hoverProps, focusProps),
+    ...(0, import_utils22.mergeProps)(columnHeaderProps, hoverProps, focusProps),
     ...stateProps
   }, column.rendered, column.props.allowsSorting && /* @__PURE__ */ import_react61.default.createElement(SortIndicator, {
     direction: (_a = state.sortDescriptor) == null ? void 0 : _a.direction,
@@ -2477,7 +2479,7 @@ var import_react64 = __toESM(require("react"));
 var import_focus15 = require("@react-aria/focus");
 var import_interactions9 = require("@react-aria/interactions");
 var import_table7 = require("@react-aria/table");
-var import_utils22 = require("@react-aria/utils");
+var import_utils23 = require("@react-aria/utils");
 var import_system45 = require("@marigold/system");
 var TableRow = ({ children, row }) => {
   const ref = (0, import_react64.useRef)(null);
@@ -2515,7 +2517,7 @@ var TableRow = ({ children, row }) => {
       cursor: !interactive ? "text" : disabled ? "default" : "pointer"
     },
     css: styles,
-    ...(0, import_utils22.mergeProps)(rowProps, focusProps, hoverProps),
+    ...(0, import_utils23.mergeProps)(rowProps, focusProps, hoverProps),
     ...stateProps
   }, children);
 };
@@ -2525,7 +2527,7 @@ var import_react65 = __toESM(require("react"));
 var import_focus16 = require("@react-aria/focus");
 var import_interactions10 = require("@react-aria/interactions");
 var import_table8 = require("@react-aria/table");
-var import_utils23 = require("@react-aria/utils");
+var import_utils24 = require("@react-aria/utils");
 var import_system46 = require("@marigold/system");
 var TableSelectAllCell = ({ column }) => {
   const ref = (0, import_react65.useRef)(null);
@@ -2553,7 +2555,7 @@ var TableSelectAllCell = ({ column }) => {
       lineHeight: 1
     },
     css: styles.header,
-    ...(0, import_utils23.mergeProps)(columnHeaderProps, hoverProps, focusProps),
+    ...(0, import_utils24.mergeProps)(columnHeaderProps, hoverProps, focusProps),
     ...stateProps
   }, /* @__PURE__ */ import_react65.default.createElement(Checkbox, {
     ...checkboxProps
@@ -2667,7 +2669,7 @@ var import_react68 = __toESM(require("react"));
 var import_interactions11 = require("@react-aria/interactions");
 var import_focus17 = require("@react-aria/focus");
 var import_textfield = require("@react-aria/textfield");
-var import_utils25 = require("@react-aria/utils");
+var import_utils26 = require("@react-aria/utils");
 var import_system50 = require("@marigold/system");
 var TextArea = (0, import_react68.forwardRef)(
   ({
@@ -2682,7 +2684,7 @@ var TextArea = (0, import_react68.forwardRef)(
     ...props
   }, ref) => {
     const { label, description, errorMessage } = props;
-    const textAreaRef = (0, import_utils25.useObjectRef)(ref);
+    const textAreaRef = (0, import_utils26.useObjectRef)(ref);
     const { labelProps, inputProps, descriptionProps, errorMessageProps } = (0, import_textfield.useTextField)(
       {
         inputElementType: "textarea",
@@ -2735,12 +2737,12 @@ var import_react69 = __toESM(require("react"));
 var import_interactions12 = require("@react-aria/interactions");
 var import_focus18 = require("@react-aria/focus");
 var import_textfield2 = require("@react-aria/textfield");
-var import_utils26 = require("@react-aria/utils");
+var import_utils27 = require("@react-aria/utils");
 var import_system51 = require("@marigold/system");
 var TextField = (0, import_react69.forwardRef)(
   ({ variant, size, width, disabled, required, readOnly, error, ...props }, ref) => {
     const { label, description, errorMessage, autoFocus } = props;
-    const inputRef = (0, import_utils26.useObjectRef)(ref);
+    const inputRef = (0, import_utils27.useObjectRef)(ref);
     const { labelProps, inputProps, descriptionProps, errorMessageProps } = (0, import_textfield2.useTextField)(
       {
         isDisabled: disabled,

package/dist/index.mjs

@@ -1296,6 +1296,7 @@ var MenuItem = ({ item, state, onAction, css }) => {
   const stateProps = useStateProps4({
     focus: isFocusVisible
   });
+  const { onPointerUp, ...props } = menuItemProps;
   return /* @__PURE__ */ React34.createElement(Box19, {
     as: "li",
     ref,
@@ -1305,7 +1306,7 @@ var MenuItem = ({ item, state, onAction, css }) => {
       }
     },
     css,
-    ...mergeProps3(menuItemProps, focusProps),
+    ...mergeProps3(props, { onPointerDown: onPointerUp }, focusProps),
     ...stateProps
   }, item.rendered);
 };
@@ -1775,7 +1776,7 @@ import { useLocalizedStringFormatter } from "@react-aria/i18n";
 import { HiddenSelect, useSelect } from "@react-aria/select";
 import { useSelectState } from "@react-stately/select";
 import { Item as Item2, Section } from "@react-stately/collections";
-import { mergeProps as mergeProps7, useObjectRef as useObjectRef11 } from "@react-aria/utils";
+import { mergeProps as mergeProps8, useObjectRef as useObjectRef11 } from "@react-aria/utils";
 import {
   Box as Box28,
   useComponentStyles as useComponentStyles24,
@@ -1805,6 +1806,7 @@ import { Box as Box26 } from "@marigold/system";
 // src/ListBox/ListBoxOption.tsx
 import React42, { useRef as useRef8 } from "react";
 import { useOption } from "@react-aria/listbox";
+import { mergeProps as mergeProps7 } from "@react-aria/utils";
 import { Box as Box25, useStateProps as useStateProps9 } from "@marigold/system";
 var ListBoxOption = ({ item, state }) => {
   const ref = useRef8(null);
@@ -1815,6 +1817,7 @@ var ListBoxOption = ({ item, state }) => {
     state,
     ref
   );
+  const { onPointerUp, ...props } = optionProps;
   const { styles } = useListBoxContext();
   const stateProps = useStateProps9({
     selected: isSelected,
@@ -1825,8 +1828,7 @@ var ListBoxOption = ({ item, state }) => {
     as: "li",
     ref,
     css: styles.option,
-    ...optionProps,
-    ...stateProps
+    ...mergeProps7(props, { onPointerDown: onPointerUp }, { ...stateProps })
   }, item.rendered);
 };
 
@@ -1983,7 +1985,7 @@ var Select = forwardRef11(
       },
       css: styles.button,
       ref: buttonRef,
-      ...mergeProps7(buttonProps, focusProps),
+      ...mergeProps8(buttonProps, focusProps),
       ...stateProps
     }, /* @__PURE__ */ React45.createElement(Box28, {
       css: {
@@ -2028,7 +2030,7 @@ import { useComponentStyles as useComponentStyles25 } from "@marigold/system";
 // src/Slider/Thumb.tsx
 import React46, { useEffect } from "react";
 import { useSliderThumb } from "@react-aria/slider";
-import { mergeProps as mergeProps8 } from "@react-aria/utils";
+import { mergeProps as mergeProps9 } from "@react-aria/utils";
 import { useStateProps as useStateProps11 } from "@marigold/system";
 
 // src/VisuallyHidden/VisuallyHidden.tsx
@@ -2066,7 +2068,7 @@ var Thumb = ({ state, trackRef, styles, ...props }) => {
     as: "input",
     type: "range",
     ref: inputRef,
-    ...mergeProps8(inputProps, focusProps)
+    ...mergeProps9(inputProps, focusProps)
   })));
 };
 
@@ -2315,7 +2317,7 @@ var TableBody = ({ children }) => {
 import React52, { useRef as useRef10 } from "react";
 import { useTableCell } from "@react-aria/table";
 import { useFocusRing as useFocusRing9 } from "@react-aria/focus";
-import { mergeProps as mergeProps9 } from "@react-aria/utils";
+import { mergeProps as mergeProps10 } from "@react-aria/utils";
 import { Box as Box30, useStateProps as useStateProps13 } from "@marigold/system";
 var TableCell = ({ cell }) => {
   const ref = useRef10(null);
@@ -2339,7 +2341,7 @@ var TableCell = ({ cell }) => {
     as: "td",
     ref,
     css: styles.cell,
-    ...mergeProps9(cellProps, focusProps),
+    ...mergeProps10(cellProps, focusProps),
     ...stateProps
   }, cell.rendered);
 };
@@ -2348,7 +2350,7 @@ var TableCell = ({ cell }) => {
 import React53, { useRef as useRef11 } from "react";
 import { useTableCell as useTableCell2, useTableSelectionCheckbox } from "@react-aria/table";
 import { useFocusRing as useFocusRing10 } from "@react-aria/focus";
-import { mergeProps as mergeProps10 } from "@react-aria/utils";
+import { mergeProps as mergeProps11 } from "@react-aria/utils";
 import { Box as Box31, useStateProps as useStateProps14 } from "@marigold/system";
 
 // src/Table/utils.ts
@@ -2397,7 +2399,7 @@ var TableCheckboxCell = ({ cell }) => {
       lineHeight: 1
     },
     css: styles.cell,
-    ...mergeProps10(gridCellProps, focusProps),
+    ...mergeProps11(gridCellProps, focusProps),
     ...stateProps
   }, /* @__PURE__ */ React53.createElement(Checkbox, {
     ...checkboxProps
@@ -2409,7 +2411,7 @@ import React54, { useRef as useRef12 } from "react";
 import { useFocusRing as useFocusRing11 } from "@react-aria/focus";
 import { useHover as useHover6 } from "@react-aria/interactions";
 import { useTableColumnHeader } from "@react-aria/table";
-import { mergeProps as mergeProps11 } from "@react-aria/utils";
+import { mergeProps as mergeProps12 } from "@react-aria/utils";
 import { Box as Box32, useStateProps as useStateProps15 } from "@marigold/system";
 var SortIndicator = ({
   direction = "ascending",
@@ -2447,7 +2449,7 @@ var TableColumnHeader = ({ column }) => {
     ref,
     __baseCSS: { cursor: "default" },
     css: styles.header,
-    ...mergeProps11(columnHeaderProps, hoverProps, focusProps),
+    ...mergeProps12(columnHeaderProps, hoverProps, focusProps),
     ...stateProps
   }, column.rendered, column.props.allowsSorting && /* @__PURE__ */ React54.createElement(SortIndicator, {
     direction: (_a = state.sortDescriptor) == null ? void 0 : _a.direction,
@@ -2483,7 +2485,7 @@ import React57, { useRef as useRef14 } from "react";
 import { useFocusRing as useFocusRing12 } from "@react-aria/focus";
 import { useHover as useHover7 } from "@react-aria/interactions";
 import { useTableRow } from "@react-aria/table";
-import { mergeProps as mergeProps12 } from "@react-aria/utils";
+import { mergeProps as mergeProps13 } from "@react-aria/utils";
 import { Box as Box33, useComponentStyles as useComponentStyles27, useStateProps as useStateProps16 } from "@marigold/system";
 var TableRow = ({ children, row }) => {
   const ref = useRef14(null);
@@ -2521,7 +2523,7 @@ var TableRow = ({ children, row }) => {
       cursor: !interactive ? "text" : disabled ? "default" : "pointer"
     },
     css: styles,
-    ...mergeProps12(rowProps, focusProps, hoverProps),
+    ...mergeProps13(rowProps, focusProps, hoverProps),
     ...stateProps
   }, children);
 };
@@ -2534,7 +2536,7 @@ import {
   useTableColumnHeader as useTableColumnHeader2,
   useTableSelectAllCheckbox
 } from "@react-aria/table";
-import { mergeProps as mergeProps13 } from "@react-aria/utils";
+import { mergeProps as mergeProps14 } from "@react-aria/utils";
 import { Box as Box34, useStateProps as useStateProps17 } from "@marigold/system";
 var TableSelectAllCell = ({ column }) => {
   const ref = useRef15(null);
@@ -2562,7 +2564,7 @@ var TableSelectAllCell = ({ column }) => {
       lineHeight: 1
     },
     css: styles.header,
-    ...mergeProps13(columnHeaderProps, hoverProps, focusProps),
+    ...mergeProps14(columnHeaderProps, hoverProps, focusProps),
     ...stateProps
   }, /* @__PURE__ */ React58.createElement(Checkbox, {
     ...checkboxProps

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marigold/components",
-  "version": "4.2.0",
+  "version": "4.2.1",
   "description": "Components for the Marigold Design System",
   "license": "MIT",
   "keywords": [
@@ -23,8 +23,8 @@
     "directory": "packages/components"
   },
   "dependencies": {
-    "@marigold/icons": "1.1.14",
-    "@marigold/system": "4.2.0",
+    "@marigold/icons": "1.1.15",
+    "@marigold/system": "4.2.1",
     "@marigold/tokens": "3.1.0",
     "@marigold/types": "0.5.7",
     "@react-aria/button": "3.6.3",