@mantine/core - npm Package Compare versions

Comparing version 7.1.2 to 7.1.3

cjs/components/MultiSelect/MultiSelect.js

@@ -129,3 +129,4 @@ 'use client';
     clearButtonProps,
-    hiddenInputProps
+    hiddenInputProps,
+    placeholder
   } = _a, others = __objRest(_a, [
@@ -195,3 +196,4 @@ "classNames",
     "clearButtonProps",
-    "hiddenInputProps"
+    "hiddenInputProps",
+    "placeholder"
   ]);
@@ -258,2 +260,7 @@ const _id = hooks.useId(id);
   });
+  React.useEffect(() => {
+    if (selectFirstOptionOnChange) {
+      combobox.selectFirstOption();
+    }
+  }, [selectFirstOptionOnChange, _value]);
   const clearButton = clearable && _value.length > 0 && !disabled && !readOnly && /* @__PURE__ */ React__default.createElement(
@@ -270,2 +277,3 @@ Combobox.Combobox.ClearButton,
   );
+  const filteredData = filterPickedValues.filterPickedValues({ data: parsedData, value: _value });
   return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(
@@ -334,3 +342,5 @@ Combobox.Combobox,
           ref,
-          id: _id
+          id: _id,
+          placeholder,
+          type: !searchable && !placeholder ? "hidden" : "visible"
         }), getStyles("inputField")), {
@@ -353,2 +363,3 @@ unstyled,
             searchable && combobox.openDropdown();
+            selectFirstOptionOnChange && combobox.selectFirstOption();
           },
@@ -364,3 +375,3 @@ disabled,
       {
-        data: hidePickedOptions ? filterPickedValues.filterPickedValues({ data: parsedData, value: _value }) : parsedData,
+        data: hidePickedOptions ? filteredData : parsedData,
         hidden: readOnly || disabled,
@@ -370,3 +381,3 @@ filter,
         limit,
-        hiddenWhenEmpty: hidePickedOptions || !nothingFoundMessage || !searchable && _searchValue.trim().length !== 0,
+        hiddenWhenEmpty: !searchable || !nothingFoundMessage || hidePickedOptions && filteredData.length === 0 && _searchValue.trim().length === 0,
         withScrollArea,
@@ -373,0 +384,0 @@ maxDropdownHeight,

cjs/components/NumberInput/NumberInput.js

@@ -210,2 +210,3 @@ 'use client';
       mod: { direction: "up" },
+      onMouseDown: (event) => event.preventDefault(),
       onPointerDown: increment
@@ -221,2 +222,3 @@ }),
       mod: { direction: "down" },
+      onMouseDown: (event) => event.preventDefault(),
       onPointerDown: decrement
@@ -223,0 +225,0 @@ }),

cjs/components/Rating/Rating.js

@@ -95,2 +95,4 @@ 'use client';
     onMouseLeave,
+    onTouchStart,
+    onTouchEnd,
     size,
@@ -122,2 +124,4 @@ variant,
     "onMouseLeave",
+    "onTouchStart",
+    "onTouchEnd",
     "size",
@@ -160,2 +164,9 @@ "variant",
   const finalValue = hovered !== -1 ? hovered : stableValueRounded;
+  const getRatingFromCoordinates = (x) => {
+    const { left, right, width } = rootRef.current.getBoundingClientRect();
+    const symbolWidth = width / _count;
+    const hoverPosition = dir === "rtl" ? right - x : x - left;
+    const hoverValue = hoverPosition / symbolWidth;
+    return hooks.clamp(roundValueTo(hoverValue + decimalUnit / 2, decimalUnit), decimalUnit, _count);
+  };
   const handleMouseEnter = (event) => {
@@ -170,11 +181,3 @@ onMouseEnter == null ? void 0 : onMouseEnter(event);
     }
-    const { left, right, width } = rootRef.current.getBoundingClientRect();
-    const symbolWidth = width / _count;
-    const hoverPosition = dir === "rtl" ? right - event.clientX : event.clientX - left;
-    const hoverValue = hoverPosition / symbolWidth;
-    const rounded = hooks.clamp(
-      roundValueTo(hoverValue + decimalUnit / 2, decimalUnit),
-      decimalUnit,
-      _count
-    );
+    const rounded = getRatingFromCoordinates(event.clientX);
     setHovered(rounded);
@@ -192,3 +195,26 @@ rounded !== hovered && (onHover == null ? void 0 : onHover(rounded));
   };
+  const handleTouchStart = (event) => {
+    event.preventDefault();
+    const { touches } = event;
+    if (touches.length !== 1) {
+      return;
+    }
+    const touch = touches[0];
+    setValue(getRatingFromCoordinates(touch.clientX));
+    onTouchStart == null ? void 0 : onTouchStart(event);
+  };
+  const handleTouchEnd = (event) => {
+    event.preventDefault();
+    onTouchEnd == null ? void 0 : onTouchEnd(event);
+  };
   const handleItemBlur = () => isOutside && setHovered(-1);
+  const handleInputChange = (event) => {
+    if (!readOnly) {
+      if (typeof event === "number") {
+        setHovered(event);
+      } else {
+        setHovered(parseFloat(event.target.value));
+      }
+    }
+  };
   const handleChange = (event) => {
@@ -233,2 +259,3 @@ if (!readOnly) {
             onBlur: handleItemBlur,
+            onInputChange: handleInputChange,
             id: `${_id}-${index}-${fractionIndex}`
@@ -248,2 +275,4 @@ }
       onMouseLeave: handleMouseLeave,
+      onTouchStart: handleTouchStart,
+      onTouchEnd: handleTouchEnd,
       variant,
@@ -250,0 +279,0 @@ size,

cjs/components/Rating/RatingItem/RatingItem.js

@@ -60,3 +60,5 @@ 'use client';
     id,
+    onBlur,
     onChange,
+    onInputChange,
     style
@@ -75,3 +77,5 @@ } = _b, others = __objRest(_b, [
     "id",
+    "onBlur",
     "onChange",
+    "onInputChange",
     "style"
@@ -93,3 +97,4 @@ ]);
       value,
-      onChange
+      onBlur,
+      onChange: onInputChange
     }), others)
@@ -96,0 +101,0 @@ ), /* @__PURE__ */ React__default.createElement(

cjs/components/Select/Select.js

@@ -187,6 +187,6 @@ 'use client';
     }
-    if (typeof value === "string" && optionsLockup[value]) {
-      setSearch(optionsLockup[value].label);
+    if (typeof value === "string" && selectedOption) {
+      setSearch(selectedOption.label);
     }
-  }, [value, optionsLockup]);
+  }, [value, selectedOption]);
   const clearButton = clearable && !!_value && !disabled && !readOnly && /* @__PURE__ */ React__default.createElement(
@@ -193,0 +193,0 @@ Combobox.Combobox.ClearButton,

lib/components/Rating/RatingItem/RatingItem.d.ts

@@ -14,6 +14,7 @@ import React from 'react';
     onChange(event: React.ChangeEvent<HTMLInputElement> | number): void;
+    onInputChange(event: React.ChangeEvent<HTMLInputElement> | number): void;
 }
-export declare function RatingItem({ size, getSymbolLabel, emptyIcon, fullIcon, full, active, value, readOnly, fractionValue, color, id, onChange, style, ...others }: RatingItemProps): import("react/jsx-runtime").JSX.Element;
+export declare function RatingItem({ size, getSymbolLabel, emptyIcon, fullIcon, full, active, value, readOnly, fractionValue, color, id, onBlur, onChange, onInputChange, style, ...others }: RatingItemProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace RatingItem {
     var displayName: string;
 }

package.json

 {
   "name": "@mantine/core",
   "description": "React components library focused on usability, accessibility and developer experience",
-  "version": "7.1.2",
+  "version": "7.1.3",
   "main": "./cjs/index.js",
@@ -46,3 +46,3 @@ "types": "./lib/index.d.ts",
   "peerDependencies": {
-    "@mantine/hooks": "7.1.2",
+    "@mantine/hooks": "7.1.3",
     "react": "^18.2.0",
@@ -49,0 +49,0 @@ "react-dom": "^18.2.0"

No alert changes

Improved metrics

Total package byte prevSize

7615909

increased by0.13%

Lines of code

71491

increased by0.13%

No dependency changes