@mond-design-system/react 4.8.0 → 4.9.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.
- package/README.md +2 -1
- package/dist/index.cjs +75 -0
- package/dist/index.cjs.map +1 -1
- package/dist/index.css +44 -0
- package/dist/index.css.map +1 -1
- package/dist/index.d.cts +35 -1
- package/dist/index.d.ts +35 -1
- package/dist/index.js +75 -1
- 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
|
@@ -2271,6 +2271,80 @@ function UploadProgress({
|
|
|
2271
2271
|
] });
|
|
2272
2272
|
}
|
|
2273
2273
|
|
|
2274
|
+
// mds-cssmod:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/FileDrop/FileDrop.module.css?mds-scoped
|
|
2275
|
+
var FileDrop_module_default = { "drop": "mds-FileDrop__drop", "target": "mds-FileDrop__target", "over": "mds-FileDrop__over", "icon": "mds-FileDrop__icon", "picker": "mds-FileDrop__picker" };
|
|
2276
|
+
function FileDrop({
|
|
2277
|
+
label,
|
|
2278
|
+
hint,
|
|
2279
|
+
icon,
|
|
2280
|
+
accept,
|
|
2281
|
+
multiple = false,
|
|
2282
|
+
disabled = false,
|
|
2283
|
+
onFiles,
|
|
2284
|
+
className,
|
|
2285
|
+
ref,
|
|
2286
|
+
...rest
|
|
2287
|
+
}) {
|
|
2288
|
+
const picker = react.useRef(null);
|
|
2289
|
+
const [over, setOver] = react.useState(false);
|
|
2290
|
+
const take = (list) => {
|
|
2291
|
+
if (disabled || list === null || list.length === 0) return;
|
|
2292
|
+
const files = [...list];
|
|
2293
|
+
onFiles(multiple ? files : files.slice(0, 1));
|
|
2294
|
+
};
|
|
2295
|
+
const dropped = (event) => {
|
|
2296
|
+
event.preventDefault();
|
|
2297
|
+
setOver(false);
|
|
2298
|
+
take(event.dataTransfer.files);
|
|
2299
|
+
};
|
|
2300
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
2301
|
+
"div",
|
|
2302
|
+
{
|
|
2303
|
+
className: cx(FileDrop_module_default.drop, over && FileDrop_module_default.over, className),
|
|
2304
|
+
ref,
|
|
2305
|
+
onDragOver: (event) => {
|
|
2306
|
+
event.preventDefault();
|
|
2307
|
+
setOver(!disabled);
|
|
2308
|
+
},
|
|
2309
|
+
onDragLeave: () => setOver(false),
|
|
2310
|
+
onDrop: dropped,
|
|
2311
|
+
...rest,
|
|
2312
|
+
children: [
|
|
2313
|
+
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
2314
|
+
"button",
|
|
2315
|
+
{
|
|
2316
|
+
type: "button",
|
|
2317
|
+
className: FileDrop_module_default.target,
|
|
2318
|
+
disabled,
|
|
2319
|
+
onClick: () => picker.current?.click(),
|
|
2320
|
+
children: [
|
|
2321
|
+
icon !== void 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: FileDrop_module_default.icon, children: icon }),
|
|
2322
|
+
/* @__PURE__ */ jsxRuntime.jsx(Text, { variant: "label", children: label }),
|
|
2323
|
+
hint !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(Text, { variant: "meta", children: hint })
|
|
2324
|
+
]
|
|
2325
|
+
}
|
|
2326
|
+
),
|
|
2327
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
2328
|
+
"input",
|
|
2329
|
+
{
|
|
2330
|
+
type: "file",
|
|
2331
|
+
className: FileDrop_module_default.picker,
|
|
2332
|
+
ref: picker,
|
|
2333
|
+
tabIndex: -1,
|
|
2334
|
+
"aria-hidden": "true",
|
|
2335
|
+
multiple,
|
|
2336
|
+
...accept === void 0 ? {} : { accept },
|
|
2337
|
+
onChange: (event) => {
|
|
2338
|
+
take(event.target.files);
|
|
2339
|
+
event.target.value = "";
|
|
2340
|
+
}
|
|
2341
|
+
}
|
|
2342
|
+
)
|
|
2343
|
+
]
|
|
2344
|
+
}
|
|
2345
|
+
);
|
|
2346
|
+
}
|
|
2347
|
+
|
|
2274
2348
|
// mds-cssmod:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/Lightbox/Lightbox.module.css?mds-scoped
|
|
2275
2349
|
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
2350
|
var MIN_SCALE = 1;
|
|
@@ -2685,6 +2759,7 @@ exports.DateTimePicker = DateTimePicker;
|
|
|
2685
2759
|
exports.Divider = Divider;
|
|
2686
2760
|
exports.EmptyState = EmptyState;
|
|
2687
2761
|
exports.Field = Field;
|
|
2762
|
+
exports.FileDrop = FileDrop;
|
|
2688
2763
|
exports.Heading = Heading;
|
|
2689
2764
|
exports.Icon = Icon;
|
|
2690
2765
|
exports.IconProvider = IconProvider;
|