@mond-design-system/react 4.8.0 → 4.10.1
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.
- package/README.md +2 -1
- package/dist/index.cjs +168 -5
- package/dist/index.cjs.map +1 -1
- package/dist/index.css +87 -0
- package/dist/index.css.map +1 -1
- package/dist/index.d.cts +70 -3
- package/dist/index.d.ts +70 -3
- package/dist/index.js +167 -6
- package/dist/index.js.map +1 -1
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -51,7 +51,8 @@ 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`, `SearchField`, `DateTimePicker`,
|
|
55
|
+
`FileDrop`
|
|
55
56
|
|
|
56
57
|
**Content** — `Card`, `Avatar`, `AvatarGroup`, `Badge`, `Tag`, `Chip`,
|
|
57
58
|
`ChipGroup`, `ChipBar`, `Divider`, `ListGroup`, `ListItem`, `EmptyState`
|
package/dist/index.cjs
CHANGED
|
@@ -503,7 +503,15 @@ function Field({ label, children, hint, error, required = false, className }) {
|
|
|
503
503
|
children
|
|
504
504
|
}
|
|
505
505
|
),
|
|
506
|
-
message && /* @__PURE__ */ jsxRuntime.jsx(
|
|
506
|
+
message && /* @__PURE__ */ jsxRuntime.jsx(
|
|
507
|
+
"span",
|
|
508
|
+
{
|
|
509
|
+
id: messageId,
|
|
510
|
+
role: error !== void 0 ? "alert" : void 0,
|
|
511
|
+
className: cx(Field_module_default.message, error !== void 0 && Field_module_default.error),
|
|
512
|
+
children: message
|
|
513
|
+
}
|
|
514
|
+
)
|
|
507
515
|
] });
|
|
508
516
|
}
|
|
509
517
|
|
|
@@ -1353,6 +1361,85 @@ function SearchField({
|
|
|
1353
1361
|
] });
|
|
1354
1362
|
}
|
|
1355
1363
|
|
|
1364
|
+
// mds-cssmod:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/Scroller/Scroller.module.css?mds-scoped
|
|
1365
|
+
var Scroller_module_default = { "scroller": "mds-Scroller__scroller", "header": "mds-Scroller__header", "trailing": "mds-Scroller__trailing", "track": "mds-Scroller__track", "arrows": "mds-Scroller__arrows" };
|
|
1366
|
+
var STEP = 0.8;
|
|
1367
|
+
function Scroller({
|
|
1368
|
+
title,
|
|
1369
|
+
labels,
|
|
1370
|
+
level = 2,
|
|
1371
|
+
action,
|
|
1372
|
+
children,
|
|
1373
|
+
className,
|
|
1374
|
+
...rest
|
|
1375
|
+
}) {
|
|
1376
|
+
const track = react.useRef(null);
|
|
1377
|
+
const titleId = react.useId();
|
|
1378
|
+
const [atStart, setAtStart] = react.useState(true);
|
|
1379
|
+
const [atEnd, setAtEnd] = react.useState(true);
|
|
1380
|
+
const measure = react.useCallback(() => {
|
|
1381
|
+
const row = track.current;
|
|
1382
|
+
if (row === null) return;
|
|
1383
|
+
setAtStart(row.scrollLeft <= 0);
|
|
1384
|
+
setAtEnd(row.scrollLeft + row.clientWidth >= row.scrollWidth - 1);
|
|
1385
|
+
}, []);
|
|
1386
|
+
react.useEffect(measure);
|
|
1387
|
+
react.useEffect(() => {
|
|
1388
|
+
window.addEventListener("resize", measure);
|
|
1389
|
+
return () => window.removeEventListener("resize", measure);
|
|
1390
|
+
}, [measure]);
|
|
1391
|
+
const step = (direction) => {
|
|
1392
|
+
const row = track.current;
|
|
1393
|
+
if (row === null) return;
|
|
1394
|
+
row.scrollBy({ left: direction * Math.round(row.clientWidth * STEP) });
|
|
1395
|
+
};
|
|
1396
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("section", { className: cx(Scroller_module_default.scroller, className), ...rest, children: [
|
|
1397
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: Scroller_module_default.header, children: [
|
|
1398
|
+
/* @__PURE__ */ jsxRuntime.jsx(Heading, { level, variant: "label", id: titleId, children: title }),
|
|
1399
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: Scroller_module_default.trailing, children: [
|
|
1400
|
+
action,
|
|
1401
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: Scroller_module_default.arrows, children: [
|
|
1402
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1403
|
+
Button,
|
|
1404
|
+
{
|
|
1405
|
+
variant: "ghost",
|
|
1406
|
+
size: "sm",
|
|
1407
|
+
iconOnly: true,
|
|
1408
|
+
"aria-label": labels.previous,
|
|
1409
|
+
disabled: atStart,
|
|
1410
|
+
onClick: () => step(-1),
|
|
1411
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(ChevronLeftGlyph, {})
|
|
1412
|
+
}
|
|
1413
|
+
),
|
|
1414
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1415
|
+
Button,
|
|
1416
|
+
{
|
|
1417
|
+
variant: "ghost",
|
|
1418
|
+
size: "sm",
|
|
1419
|
+
iconOnly: true,
|
|
1420
|
+
"aria-label": labels.next,
|
|
1421
|
+
disabled: atEnd,
|
|
1422
|
+
onClick: () => step(1),
|
|
1423
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(ChevronRightGlyph, {})
|
|
1424
|
+
}
|
|
1425
|
+
)
|
|
1426
|
+
] })
|
|
1427
|
+
] })
|
|
1428
|
+
] }),
|
|
1429
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1430
|
+
"div",
|
|
1431
|
+
{
|
|
1432
|
+
className: Scroller_module_default.track,
|
|
1433
|
+
ref: track,
|
|
1434
|
+
role: "group",
|
|
1435
|
+
"aria-labelledby": titleId,
|
|
1436
|
+
onScroll: measure,
|
|
1437
|
+
children
|
|
1438
|
+
}
|
|
1439
|
+
)
|
|
1440
|
+
] });
|
|
1441
|
+
}
|
|
1442
|
+
|
|
1356
1443
|
// mds-cssmod:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/List/List.module.css?mds-scoped
|
|
1357
1444
|
var List_module_default = { "group": "mds-List__group", "labelledGroup": "mds-List__labelledGroup", "label": "mds-List__label", "item": "mds-List__item", "surface-card": "mds-List__surface-card", "surface-sunken": "mds-List__surface-sunken", "surface-accent": "mds-List__surface-accent", "surface-plain": "mds-List__surface-plain", "row": "mds-List__row", "interactive": "mds-List__interactive", "withActions": "mds-List__withActions", "actions": "mds-List__actions", "leading": "mds-List__leading", "trailing": "mds-List__trailing", "text": "mds-List__text", "title": "mds-List__title", "description": "mds-List__description" };
|
|
1358
1445
|
var ListGroupContext = react.createContext(false);
|
|
@@ -1411,7 +1498,7 @@ function ListItem({
|
|
|
1411
1498
|
ref,
|
|
1412
1499
|
...rest,
|
|
1413
1500
|
children: [
|
|
1414
|
-
href !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx(LinkElement, { className: cx(List_module_default.row, List_module_default.interactive), href, children: content }) : onClick !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
1501
|
+
href !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx(LinkElement, { className: cx(List_module_default.row, List_module_default.interactive), href, onClick, children: content }) : onClick !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
1415
1502
|
"button",
|
|
1416
1503
|
{
|
|
1417
1504
|
type: "button",
|
|
@@ -2271,11 +2358,85 @@ function UploadProgress({
|
|
|
2271
2358
|
] });
|
|
2272
2359
|
}
|
|
2273
2360
|
|
|
2361
|
+
// mds-cssmod:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/FileDrop/FileDrop.module.css?mds-scoped
|
|
2362
|
+
var FileDrop_module_default = { "drop": "mds-FileDrop__drop", "target": "mds-FileDrop__target", "over": "mds-FileDrop__over", "icon": "mds-FileDrop__icon", "picker": "mds-FileDrop__picker" };
|
|
2363
|
+
function FileDrop({
|
|
2364
|
+
label,
|
|
2365
|
+
hint,
|
|
2366
|
+
icon,
|
|
2367
|
+
accept,
|
|
2368
|
+
multiple = false,
|
|
2369
|
+
disabled = false,
|
|
2370
|
+
onFiles,
|
|
2371
|
+
className,
|
|
2372
|
+
ref,
|
|
2373
|
+
...rest
|
|
2374
|
+
}) {
|
|
2375
|
+
const picker = react.useRef(null);
|
|
2376
|
+
const [over, setOver] = react.useState(false);
|
|
2377
|
+
const take = (list) => {
|
|
2378
|
+
if (disabled || list === null || list.length === 0) return;
|
|
2379
|
+
const files = [...list];
|
|
2380
|
+
onFiles(multiple ? files : files.slice(0, 1));
|
|
2381
|
+
};
|
|
2382
|
+
const dropped = (event) => {
|
|
2383
|
+
event.preventDefault();
|
|
2384
|
+
setOver(false);
|
|
2385
|
+
take(event.dataTransfer.files);
|
|
2386
|
+
};
|
|
2387
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
2388
|
+
"div",
|
|
2389
|
+
{
|
|
2390
|
+
className: cx(FileDrop_module_default.drop, over && FileDrop_module_default.over, className),
|
|
2391
|
+
ref,
|
|
2392
|
+
onDragOver: (event) => {
|
|
2393
|
+
event.preventDefault();
|
|
2394
|
+
setOver(!disabled);
|
|
2395
|
+
},
|
|
2396
|
+
onDragLeave: () => setOver(false),
|
|
2397
|
+
onDrop: dropped,
|
|
2398
|
+
...rest,
|
|
2399
|
+
children: [
|
|
2400
|
+
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
2401
|
+
"button",
|
|
2402
|
+
{
|
|
2403
|
+
type: "button",
|
|
2404
|
+
className: FileDrop_module_default.target,
|
|
2405
|
+
disabled,
|
|
2406
|
+
onClick: () => picker.current?.click(),
|
|
2407
|
+
children: [
|
|
2408
|
+
icon !== void 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: FileDrop_module_default.icon, children: icon }),
|
|
2409
|
+
/* @__PURE__ */ jsxRuntime.jsx(Text, { variant: "label", children: label }),
|
|
2410
|
+
hint !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(Text, { variant: "meta", children: hint })
|
|
2411
|
+
]
|
|
2412
|
+
}
|
|
2413
|
+
),
|
|
2414
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
2415
|
+
"input",
|
|
2416
|
+
{
|
|
2417
|
+
type: "file",
|
|
2418
|
+
className: FileDrop_module_default.picker,
|
|
2419
|
+
ref: picker,
|
|
2420
|
+
tabIndex: -1,
|
|
2421
|
+
"aria-hidden": "true",
|
|
2422
|
+
multiple,
|
|
2423
|
+
...accept === void 0 ? {} : { accept },
|
|
2424
|
+
onChange: (event) => {
|
|
2425
|
+
take(event.target.files);
|
|
2426
|
+
event.target.value = "";
|
|
2427
|
+
}
|
|
2428
|
+
}
|
|
2429
|
+
)
|
|
2430
|
+
]
|
|
2431
|
+
}
|
|
2432
|
+
);
|
|
2433
|
+
}
|
|
2434
|
+
|
|
2274
2435
|
// mds-cssmod:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/Lightbox/Lightbox.module.css?mds-scoped
|
|
2275
2436
|
var Lightbox_module_default = { "panel": "mds-Lightbox__panel", "bar": "mds-Lightbox__bar", "surface": "mds-Lightbox__surface", "image": "mds-Lightbox__image", "caption": "mds-Lightbox__caption" };
|
|
2276
2437
|
var MIN_SCALE = 1;
|
|
2277
2438
|
var MAX_SCALE = 4;
|
|
2278
|
-
var
|
|
2439
|
+
var STEP2 = 1;
|
|
2279
2440
|
var DOUBLE = 2.5;
|
|
2280
2441
|
var WHEEL = 0.01;
|
|
2281
2442
|
var ORIGIN = { x: 0, y: 0 };
|
|
@@ -2388,7 +2549,7 @@ function Lightbox({ open, onClose, src, alt = "", caption, labels }) {
|
|
|
2388
2549
|
variant: "ghost",
|
|
2389
2550
|
onMedia: true,
|
|
2390
2551
|
disabled: scale <= MIN_SCALE,
|
|
2391
|
-
onClick: () => zoom(scale -
|
|
2552
|
+
onClick: () => zoom(scale - STEP2),
|
|
2392
2553
|
children: /* @__PURE__ */ jsxRuntime.jsx(ZoomOutGlyph, {})
|
|
2393
2554
|
}
|
|
2394
2555
|
),
|
|
@@ -2400,7 +2561,7 @@ function Lightbox({ open, onClose, src, alt = "", caption, labels }) {
|
|
|
2400
2561
|
variant: "ghost",
|
|
2401
2562
|
onMedia: true,
|
|
2402
2563
|
disabled: scale >= MAX_SCALE,
|
|
2403
|
-
onClick: () => zoom(scale +
|
|
2564
|
+
onClick: () => zoom(scale + STEP2),
|
|
2404
2565
|
children: /* @__PURE__ */ jsxRuntime.jsx(ZoomInGlyph, {})
|
|
2405
2566
|
}
|
|
2406
2567
|
),
|
|
@@ -2685,6 +2846,7 @@ exports.DateTimePicker = DateTimePicker;
|
|
|
2685
2846
|
exports.Divider = Divider;
|
|
2686
2847
|
exports.EmptyState = EmptyState;
|
|
2687
2848
|
exports.Field = Field;
|
|
2849
|
+
exports.FileDrop = FileDrop;
|
|
2688
2850
|
exports.Heading = Heading;
|
|
2689
2851
|
exports.Icon = Icon;
|
|
2690
2852
|
exports.IconProvider = IconProvider;
|
|
@@ -2706,6 +2868,7 @@ exports.ProgressBar = ProgressBar;
|
|
|
2706
2868
|
exports.Radio = Radio;
|
|
2707
2869
|
exports.Screen = Screen;
|
|
2708
2870
|
exports.ScreenContent = ScreenContent;
|
|
2871
|
+
exports.Scroller = Scroller;
|
|
2709
2872
|
exports.SearchField = SearchField;
|
|
2710
2873
|
exports.SegmentedControl = SegmentedControl;
|
|
2711
2874
|
exports.Select = Select;
|