@mond-design-system/react 4.11.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
  1. package/README.md +1 -1
  2. package/dist/index.cjs +47 -64
  3. package/dist/index.cjs.map +1 -1
  4. package/dist/index.css +65 -69
  5. package/dist/index.css.map +1 -1
  6. package/dist/index.d.cts +64 -27
  7. package/dist/index.d.ts +64 -27
  8. package/dist/index.js +48 -64
  9. package/dist/index.js.map +1 -1
  10. package/package.json +2 -2
package/README.md CHANGED
@@ -51,7 +51,7 @@ Dark mode is `data-theme="dark"` on `<html>`. Nothing else changes.
51
51
  **Actions** — `Button`, `CountButton`
52
52
 
53
53
  **Forms** — `Field`, `Input`, `PasswordInput`, `Textarea`, `Select`, `Checkbox`,
54
- `Radio`, `Switch`, `SegmentedControl`, `SearchField`, `DateTimePicker`,
54
+ `Radio`, `Switch`, `SegmentedControl`, `DateTimePicker`,
55
55
  `FileDrop`
56
56
 
57
57
  **Content** — `Card`, `Avatar`, `AvatarGroup`, `Badge`, `Tag`, `Chip`,
package/dist/index.cjs CHANGED
@@ -1094,20 +1094,47 @@ function ProgressBar({
1094
1094
  );
1095
1095
  }
1096
1096
 
1097
+ // src/internal/forkRef.ts
1098
+ function forkRef(own, given) {
1099
+ return (node) => {
1100
+ own.current = node;
1101
+ if (typeof given === "function") given(node);
1102
+ else if (given != null) given.current = node;
1103
+ };
1104
+ }
1105
+
1097
1106
  // mds-cssmod:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/Input/Input.module.css?mds-scoped
1098
- 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" };
1107
+ 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" };
1099
1108
  function Input({
1100
1109
  size = "md",
1101
1110
  invalid,
1102
1111
  iconLeft,
1103
1112
  iconRight,
1113
+ onClear,
1114
+ clearLabel,
1104
1115
  className,
1116
+ ref,
1105
1117
  ...rest
1106
1118
  }) {
1107
1119
  const field = useFieldContext();
1120
+ const own = react.useRef(null);
1121
+ const [typedInto, setTypedInto] = react.useState(() => String(rest.defaultValue ?? "") !== "");
1122
+ const hasText = rest.value !== void 0 ? String(rest.value) !== "" : typedInto;
1123
+ const showClear = onClear != null && hasText;
1124
+ const handleChange = (event) => {
1125
+ if (onClear != null) setTypedInto(event.target.value !== "");
1126
+ rest.onChange?.(event);
1127
+ };
1128
+ const clear = () => {
1129
+ if (rest.value === void 0 && own.current != null) own.current.value = "";
1130
+ setTypedInto(false);
1131
+ own.current?.focus();
1132
+ onClear?.();
1133
+ };
1108
1134
  const input = /* @__PURE__ */ jsxRuntime.jsx(
1109
1135
  "input",
1110
1136
  {
1137
+ ref: forkRef(own, ref),
1111
1138
  id: rest.id ?? field?.id,
1112
1139
  "aria-describedby": rest["aria-describedby"] ?? field?.describedBy,
1113
1140
  "aria-invalid": rest["aria-invalid"] ?? ((invalid ?? field?.invalid) || void 0),
@@ -1115,17 +1142,20 @@ function Input({
1115
1142
  Input_module_default.input,
1116
1143
  Input_module_default[`size-${size}`],
1117
1144
  iconLeft != null && Input_module_default["with-icon-left"],
1118
- iconRight != null && Input_module_default["with-icon-right"],
1145
+ (iconRight != null || showClear) && Input_module_default["with-icon-right"],
1146
+ onClear != null && Input_module_default["own-clear"],
1119
1147
  className
1120
1148
  ),
1121
- ...rest
1149
+ ...rest,
1150
+ onChange: handleChange
1122
1151
  }
1123
1152
  );
1124
- if (iconLeft == null && iconRight == null) return input;
1125
- return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: Input_module_default.iconWrap, children: [
1153
+ if (iconLeft == null && iconRight == null && onClear == null) return input;
1154
+ return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: cx(Input_module_default.iconWrap, Input_module_default[`slot-${size}`]), children: [
1126
1155
  input,
1127
1156
  iconLeft != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: cx(Input_module_default.icon, Input_module_default.iconLeft), "aria-hidden": "true", children: iconLeft }),
1128
- iconRight != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: cx(Input_module_default.icon, Input_module_default.iconRight), "aria-hidden": "true", children: iconRight })
1157
+ iconRight != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: cx(Input_module_default.icon, Input_module_default.iconRight), "aria-hidden": "true", children: iconRight }),
1158
+ 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 }) })
1129
1159
  ] });
1130
1160
  }
1131
1161
 
@@ -1197,15 +1227,6 @@ function Textarea({ rows = 3, showCount = false, className, ...rest }) {
1197
1227
  ] });
1198
1228
  }
1199
1229
 
1200
- // src/internal/forkRef.ts
1201
- function forkRef(own, given) {
1202
- return (node) => {
1203
- own.current = node;
1204
- if (typeof given === "function") given(node);
1205
- else if (given != null) given.current = node;
1206
- };
1207
- }
1208
-
1209
1230
  // mds-cssmod:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/Checkbox/Checkbox.module.css?mds-scoped
1210
1231
  var Checkbox_module_default = { "root": "mds-Checkbox__root", "box": "mds-Checkbox__box mds-hit-area__hitArea", "bare": "mds-Checkbox__bare", "label": "mds-Checkbox__label" };
1211
1232
  function Checkbox({
@@ -1318,51 +1339,6 @@ function SegmentedControl({
1318
1339
  );
1319
1340
  }
1320
1341
 
1321
- // mds-cssmod:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/SearchField/SearchField.module.css?mds-scoped
1322
- 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" };
1323
- function SearchField({
1324
- label,
1325
- clearLabel,
1326
- value,
1327
- onChange,
1328
- className,
1329
- ...rest
1330
- }) {
1331
- return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: cx(SearchField_module_default.wrap, className), children: [
1332
- /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 16 16", "aria-hidden": "true", className: SearchField_module_default.glass, children: /* @__PURE__ */ jsxRuntime.jsx(
1333
- "path",
1334
- {
1335
- d: "M7 12a5 5 0 1 1 0-10 5 5 0 0 1 0 10Zm7 2-3.5-3.5",
1336
- fill: "none",
1337
- stroke: "currentColor",
1338
- strokeWidth: "1.5",
1339
- strokeLinecap: "round"
1340
- }
1341
- ) }),
1342
- /* @__PURE__ */ jsxRuntime.jsx(
1343
- "input",
1344
- {
1345
- type: "search",
1346
- "aria-label": label,
1347
- value,
1348
- onChange: (event) => onChange(event.target.value),
1349
- className: SearchField_module_default.input,
1350
- ...rest
1351
- }
1352
- ),
1353
- value !== "" && /* @__PURE__ */ jsxRuntime.jsx(
1354
- "button",
1355
- {
1356
- type: "button",
1357
- "aria-label": clearLabel,
1358
- className: SearchField_module_default.clear,
1359
- onClick: () => onChange(""),
1360
- children: /* @__PURE__ */ jsxRuntime.jsx(CloseGlyph, { className: SearchField_module_default.clearGlyph })
1361
- }
1362
- )
1363
- ] });
1364
- }
1365
-
1366
1342
  // mds-cssmod:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/Scroller/Scroller.module.css?mds-scoped
1367
1343
  var Scroller_module_default = { "scroller": "mds-Scroller__scroller", "header": "mds-Scroller__header", "trailing": "mds-Scroller__trailing", "track": "mds-Scroller__track", "arrows": "mds-Scroller__arrows" };
1368
1344
  var STEP = 0.8;
@@ -1842,7 +1818,7 @@ function Container(props) {
1842
1818
  }
1843
1819
 
1844
1820
  // mds-cssmod:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/Card/Card.module.css?mds-scoped
1845
- var Card_module_default = { "card": "mds-Card__card", "variant-raised": "mds-Card__variant-raised", "variant-sunken": "mds-Card__variant-sunken", "emphasis": "mds-Card__emphasis", "interactive": "mds-Card__interactive", "header": "mds-Card__header", "body": "mds-Card__body", "footer": "mds-Card__footer" };
1821
+ var Card_module_default = { "card": "mds-Card__card", "variant-raised": "mds-Card__variant-raised", "variant-sunken": "mds-Card__variant-sunken", "emphasis": "mds-Card__emphasis", "interactive": "mds-Card__interactive", "header": "mds-Card__header", "body": "mds-Card__body", "footer": "mds-Card__footer", "clipped": "mds-Card__clipped" };
1846
1822
  function Card({ children, variant = "card", emphasis = false, onClick, href, as, className, ref, ...rest }) {
1847
1823
  const cardClass = cx(Card_module_default.card, Card_module_default[`variant-${variant}`], emphasis && Card_module_default.emphasis, className);
1848
1824
  if (href !== void 0) {
@@ -1868,8 +1844,16 @@ function Card({ children, variant = "card", emphasis = false, onClick, href, as,
1868
1844
  function CardHeader({ className, ...rest }) {
1869
1845
  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cx(Card_module_default.header, className), ...rest });
1870
1846
  }
1871
- function CardBody({ className, ...rest }) {
1872
- return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cx(Card_module_default.body, className), ...rest });
1847
+ function CardBody({ lines, className, style, ...rest }) {
1848
+ const vars = lines === void 0 ? void 0 : { "--card-lines": lines };
1849
+ return /* @__PURE__ */ jsxRuntime.jsx(
1850
+ "div",
1851
+ {
1852
+ className: cx(Card_module_default.body, lines !== void 0 && Card_module_default.clipped, className),
1853
+ style: { ...vars, ...style },
1854
+ ...rest
1855
+ }
1856
+ );
1873
1857
  }
1874
1858
  function CardFooter({ className, ...rest }) {
1875
1859
  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cx(Card_module_default.footer, className), ...rest });
@@ -2869,7 +2853,6 @@ exports.Radio = Radio;
2869
2853
  exports.Screen = Screen;
2870
2854
  exports.ScreenContent = ScreenContent;
2871
2855
  exports.Scroller = Scroller;
2872
- exports.SearchField = SearchField;
2873
2856
  exports.SegmentedControl = SegmentedControl;
2874
2857
  exports.Select = Select;
2875
2858
  exports.Sheet = Sheet;