npm - @mond-design-system/react - Versions diffs - 4.12.0 → 5.0.0 - Mend

@mond-design-system/react 4.12.0 → 5.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (10) hide show

package/README.md CHANGED Viewed

@@ -51,7 +51,7 @@ Dark mode is `data-theme="dark"` on `<html>`. Nothing else changes.
 **Actions** — `Button`, `CountButton`
 **Forms** — `Field`, `Input`, `PasswordInput`, `Textarea`, `Select`, `Checkbox`,
-`Radio`, `Switch`, `SegmentedControl`, `SearchField`, `DateTimePicker`,
+`Radio`, `Switch`, `SegmentedControl`, `DateTimePicker`,
 `FileDrop`
 **Content** — `Card`, `Avatar`, `AvatarGroup`, `Badge`, `Tag`, `Chip`,

package/dist/index.cjs CHANGED Viewed

@@ -1094,20 +1094,47 @@ function ProgressBar({
   );
 }
+// src/internal/forkRef.ts
+function forkRef(own, given) {
+  return (node) => {
+    own.current = node;
+    if (typeof given === "function") given(node);
+    else if (given != null) given.current = node;
+  };
+}
 // mds-cssmod:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/Input/Input.module.css?mds-scoped
-var Input_module_default = { "input": "mds-Input__input", "size-sm": "mds-Input__size-sm", "size-md": "mds-Input__size-md", "size-lg": "mds-Input__size-lg", "iconWrap": "mds-Input__iconWrap", "icon": "mds-Input__icon", "iconLeft": "mds-Input__iconLeft", "iconRight": "mds-Input__iconRight", "with-icon-left": "mds-Input__with-icon-left", "with-icon-right": "mds-Input__with-icon-right" };
+var Input_module_default = { "input": "mds-Input__input", "own-clear": "mds-Input__own-clear", "size-sm": "mds-Input__size-sm", "size-md": "mds-Input__size-md", "size-lg": "mds-Input__size-lg", "iconWrap": "mds-Input__iconWrap", "icon": "mds-Input__icon", "slot-sm": "mds-Input__slot-sm", "slot-md": "mds-Input__slot-md", "slot-lg": "mds-Input__slot-lg", "iconLeft": "mds-Input__iconLeft", "iconRight": "mds-Input__iconRight", "with-icon-left": "mds-Input__with-icon-left", "with-icon-right": "mds-Input__with-icon-right", "clear": "mds-Input__clear mds-hit-area__hitArea", "clearGlyph": "mds-Input__clearGlyph" };
 function Input({
   size = "md",
   invalid,
   iconLeft,
   iconRight,
+  onClear,
+  clearLabel,
   className,
+  ref,
   ...rest
 }) {
   const field = useFieldContext();
+  const own = react.useRef(null);
+  const [typedInto, setTypedInto] = react.useState(() => String(rest.defaultValue ?? "") !== "");
+  const hasText = rest.value !== void 0 ? String(rest.value) !== "" : typedInto;
+  const showClear = onClear != null && hasText;
+  const handleChange = (event) => {
+    if (onClear != null) setTypedInto(event.target.value !== "");
+    rest.onChange?.(event);
+  };
+  const clear = () => {
+    if (rest.value === void 0 && own.current != null) own.current.value = "";
+    setTypedInto(false);
+    own.current?.focus();
+    onClear?.();
+  };
   const input = /* @__PURE__ */ jsxRuntime.jsx(
     "input",
     {
+      ref: forkRef(own, ref),
       id: rest.id ?? field?.id,
       "aria-describedby": rest["aria-describedby"] ?? field?.describedBy,
       "aria-invalid": rest["aria-invalid"] ?? ((invalid ?? field?.invalid) || void 0),
@@ -1115,17 +1142,20 @@ function Input({
         Input_module_default.input,
         Input_module_default[`size-${size}`],
         iconLeft != null && Input_module_default["with-icon-left"],
-        iconRight != null && Input_module_default["with-icon-right"],
+        (iconRight != null || showClear) && Input_module_default["with-icon-right"],
+        onClear != null && Input_module_default["own-clear"],
         className
       ),
-      ...rest
+      ...rest,
+      onChange: handleChange
     }
   );
-  if (iconLeft == null && iconRight == null) return input;
-  return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: Input_module_default.iconWrap, children: [
+  if (iconLeft == null && iconRight == null && onClear == null) return input;
+  return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: cx(Input_module_default.iconWrap, Input_module_default[`slot-${size}`]), children: [
     input,
     iconLeft != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: cx(Input_module_default.icon, Input_module_default.iconLeft), "aria-hidden": "true", children: iconLeft }),
-    iconRight != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: cx(Input_module_default.icon, Input_module_default.iconRight), "aria-hidden": "true", children: iconRight })
+    iconRight != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: cx(Input_module_default.icon, Input_module_default.iconRight), "aria-hidden": "true", children: iconRight }),
+    showClear && /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", "aria-label": clearLabel, className: Input_module_default.clear, onClick: clear, children: /* @__PURE__ */ jsxRuntime.jsx(CloseGlyph, { className: Input_module_default.clearGlyph }) })
   ] });
 }
@@ -1197,15 +1227,6 @@ function Textarea({ rows = 3, showCount = false, className, ...rest }) {
   ] });
 }
-// src/internal/forkRef.ts
-function forkRef(own, given) {
-  return (node) => {
-    own.current = node;
-    if (typeof given === "function") given(node);
-    else if (given != null) given.current = node;
-  };
-}
 // mds-cssmod:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/Checkbox/Checkbox.module.css?mds-scoped
 var Checkbox_module_default = { "root": "mds-Checkbox__root", "box": "mds-Checkbox__box mds-hit-area__hitArea", "bare": "mds-Checkbox__bare", "label": "mds-Checkbox__label" };
 function Checkbox({
@@ -1318,51 +1339,6 @@ function SegmentedControl({
   );
 }
-// mds-cssmod:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/SearchField/SearchField.module.css?mds-scoped
-var SearchField_module_default = { "wrap": "mds-SearchField__wrap", "glass": "mds-SearchField__glass", "input": "mds-SearchField__input", "clear": "mds-SearchField__clear mds-hit-area__hitArea", "clearGlyph": "mds-SearchField__clearGlyph" };
-function SearchField({
-  label,
-  clearLabel,
-  value,
-  onChange,
-  className,
-  ...rest
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: cx(SearchField_module_default.wrap, className), children: [
-    /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 16 16", "aria-hidden": "true", className: SearchField_module_default.glass, children: /* @__PURE__ */ jsxRuntime.jsx(
-      "path",
-      {
-        d: "M7 12a5 5 0 1 1 0-10 5 5 0 0 1 0 10Zm7 2-3.5-3.5",
-        fill: "none",
-        stroke: "currentColor",
-        strokeWidth: "1.5",
-        strokeLinecap: "round"
-      }
-    ) }),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "input",
-      {
-        type: "search",
-        "aria-label": label,
-        value,
-        onChange: (event) => onChange(event.target.value),
-        className: SearchField_module_default.input,
-        ...rest
-      }
-    ),
-    value !== "" && /* @__PURE__ */ jsxRuntime.jsx(
-      "button",
-      {
-        type: "button",
-        "aria-label": clearLabel,
-        className: SearchField_module_default.clear,
-        onClick: () => onChange(""),
-        children: /* @__PURE__ */ jsxRuntime.jsx(CloseGlyph, { className: SearchField_module_default.clearGlyph })
-      }
-    )
-  ] });
-}
 // mds-cssmod:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/Scroller/Scroller.module.css?mds-scoped
 var Scroller_module_default = { "scroller": "mds-Scroller__scroller", "header": "mds-Scroller__header", "trailing": "mds-Scroller__trailing", "track": "mds-Scroller__track", "arrows": "mds-Scroller__arrows" };
 var STEP = 0.8;
@@ -2877,7 +2853,6 @@ exports.Radio = Radio;
 exports.Screen = Screen;
 exports.ScreenContent = ScreenContent;
 exports.Scroller = Scroller;
-exports.SearchField = SearchField;
 exports.SegmentedControl = SegmentedControl;
 exports.Select = Select;
 exports.Sheet = Sheet;