@midas-ds/components 17.25.2 → 17.26.0

package/CHANGELOG.md

@@ -1,3 +1,22 @@
+## 17.26.0 (2026-09-23)
+
+### 🚀 Features
+
+- **components,dropzone:** add Dropzone as its own component with error/focus/drop-target states ([3b92846fd0c](https://github.com/migrationsverket/midas/commit/3b92846fd0c))
+
+### 🩹 Fixes
+
+- **components,drop-zone:** fix padding token, remove hardcoded height, and disabled border regression ([0bb4fb196ff](https://github.com/migrationsverket/midas/commit/0bb4fb196ff))
+
+### 🔧 Maintenance
+
+- **components,drop-zone:** rename dropzone folder and class, type WithFileTrigger story ([396d9c77381](https://github.com/migrationsverket/midas/commit/396d9c77381))
+- **components,file-trigger:** rename file-upload folder, drop React.FC typing ([4e1d4638f93](https://github.com/migrationsverket/midas/commit/4e1d4638f93))
+
+### 🧪 Tests updated
+
+- **components,layout,table-styles,test-utils:** add translation coverage checks ([270662927ee](https://github.com/migrationsverket/midas/commit/270662927ee))
+
 ## 17.25.2 (2026-09-18)
 
 ### 🧱 Updated Dependencies

package/assets/drop-zone.css

@@ -0,0 +1 @@
+._dropZone_1g3sx_1{--dropzone-border-color:var(--midas-border-color-primary);--dropzone-border-width:1px;--dropzone-border-style:dashed;--dropzone-background-color:var(--midas-background-base);font-family:var(--midas-typography-font-family);color:var(--midas-text-primary);background-color:var(--dropzone-background-color);box-sizing:border-box;border:var(--dropzone-border-width) var(--dropzone-border-style) var(--dropzone-border-color);padding:calc(var(--midas-space-medium) - var(--dropzone-border-width));align-items:center;gap:var(--midas-space-medium);text-align:center;flex-direction:column;display:flex}._dropZone_1g3sx_1 [slot=label]{flex-direction:column;justify-content:center;align-items:center;width:100%;display:flex}._dropZone_1g3sx_1 [slot=errorMessage]:before{margin:0}._dropZone_1g3sx_1[data-drop-target]{--dropzone-border-width:2px;--dropzone-border-color:var(--midas-border-color-tertiary);--dropzone-background-color:var(--midas-support-background-info)}._dropZone_1g3sx_1[data-focus-visible]{box-shadow:var(--midas-state-focus);outline:none}@media (forced-colors:active){._dropZone_1g3sx_1[data-focus-visible]{outline-offset:2px;outline:3px solid highlight}}._dropZone_1g3sx_1[data-invalid]{--dropzone-border-width:2px;--dropzone-border-style:solid;--dropzone-border-color:var(--midas-support-border-warning)}._dropZone_1g3sx_1[data-disabled]{color:var(--midas-text-disabled);--dropzone-border-color:var(--midas-border-color-disabled);cursor:not-allowed}._dropZone_1g3sx_1[data-disabled] [slot=label]{color:var(--midas-text-disabled)}

package/chunks/drop-zone-DvQLpgq6.js

@@ -0,0 +1,25 @@
+'use client';
+import { t as e } from "./clsx-B1NYyfch.js";
+import { forwardRef as t } from "react";
+import { DropZone as n, FieldErrorContext as r, composeRenderProps as i } from "react-aria-components";
+import { jsx as a } from "react/jsx-runtime";
+import '../assets/drop-zone.css';var o = { dropZone: "_dropZone_1g3sx_1" }, s = t(({ className: t, isInvalid: s, children: c, ...l }, u) => {
+	let d = s ? {
+		isInvalid: !0,
+		validationErrors: [],
+		validationDetails: {}
+	} : null;
+	return /* @__PURE__ */ a(n, {
+		...l,
+		ref: u,
+		"data-invalid": s || void 0,
+		className: e(o.dropZone, t),
+		children: i(c, (e) => /* @__PURE__ */ a(r.Provider, {
+			value: d,
+			children: e
+		}))
+	});
+});
+s.displayName = "DropZone";
+//#endregion
+export { s as t };

package/chunks/file-trigger-Dp5nH8oS.js

@@ -0,0 +1,7 @@
+'use client';
+import { FileTrigger as e } from "react-aria-components";
+import { jsx as t } from "react/jsx-runtime";
+//#region src/file-trigger/FileTrigger.tsx
+var n = (n) => /* @__PURE__ */ t(e, { ...n });
+//#endregion
+export { n as t };

package/drop-zone/DropZone.d.ts

@@ -0,0 +1,21 @@
+import { DropZoneProps as AriaDropZoneProps } from 'react-aria-components';
+export interface DropZoneProps extends AriaDropZoneProps {
+    /**
+     * Marks the dropzone as invalid, e.g. after a failed validation. Pair with
+     * `FieldError` to render the error message, either inside or below the
+     * dropzone depending on where it's composed.
+     *
+     * @default false
+     */
+    isInvalid?: boolean;
+}
+/**
+ * A drop zone is an area into which one or multiple objects can be dragged
+ * and dropped. Content is fully composable — pair it with `FileTrigger` for
+ * file uploads, or use it for any other drag-and-drop interaction.
+ *
+ * @interface DropZoneProps
+ *
+ * @see {@link https://react-spectrum.adobe.com/react-aria/DropZone.html|React Aria DropZone}
+ */
+export declare const DropZone: import('react').ForwardRefExoticComponent<DropZoneProps & import('react').RefAttributes<HTMLDivElement>>;

package/drop-zone/DropZone.stories.d.ts

@@ -0,0 +1,16 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { DropZone } from './DropZone';
+declare const meta: Meta<typeof DropZone>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const WithUploadButton: Story;
+export declare const WithFieldLabel: Story;
+export declare const Invalid: Story;
+export declare const RejectsWrongFileType: Story;
+export declare const RejectsTypeBeforeDrop: Story;
+export declare const Disabled: Story;
+interface DropZoneTestContainerProps {
+    onSelect: (files: File[]) => void;
+}
+export declare const WithFileTrigger: StoryObj<DropZoneTestContainerProps>;

package/drop-zone/index.d.ts

@@ -0,0 +1 @@
+export * from './DropZone';

package/drop-zone/index.js

@@ -0,0 +1,2 @@
+import { t as e } from "../chunks/drop-zone-DvQLpgq6.js";
+export { e as DropZone };

package/file-trigger/FileTrigger.d.ts

@@ -0,0 +1,2 @@
+import { FileTriggerProps } from 'react-aria-components';
+export declare const FileTrigger: (props: FileTriggerProps) => import("react/jsx-runtime").JSX.Element;

package/file-trigger/index.d.ts

@@ -0,0 +1 @@
+export { FileTrigger } from './FileTrigger';

package/file-trigger/index.js

@@ -0,0 +1,2 @@
+import { t as e } from "../chunks/file-trigger-Dp5nH8oS.js";
+export { e as FileTrigger };

package/index.d.ts

@@ -11,9 +11,10 @@ export * from './combobox';
 export * from './common/types';
 export * from './date-field';
 export * from './date-picker';
+export * from './drop-zone';
 export * from './field-error';
 export * from './file-list';
-export * from './file-upload';
+export * from './file-trigger';
 export * from './grid';
 export * from './heading';
 export * from './info-banner';

package/index.js

@@ -31,7 +31,8 @@ import { a as ae, i as oe, n as se, o as ce, r as le, t as ue } from "./chunks/m
 import { t as de } from "./chunks/combobox-DDO4fEtI.js";
 import { a as fe, c as pe, i as me, n as he, o as ge, r as _e, s as ve, t as ye } from "./chunks/list-box-VdBVTwZK.js";
 import { i as be, n as xe, r as Se, t as Ce } from "./chunks/date-field-DG5TYsTF.js";
-import { n as we, t as Te } from "./chunks/file-upload-DInuSFCB.js";
+import { t as we } from "./chunks/drop-zone-DvQLpgq6.js";
+import { t as Te } from "./chunks/file-trigger-Dp5nH8oS.js";
 import { n as Ee, t as De } from "./chunks/grid-DZB3GGDg.js";
 import { t as Oe } from "./chunks/info-banner-DnFNZ1_o.js";
 import { n as ke, t as Ae } from "./chunks/tooltip-D7LYQwj0.js";
@@ -59,7 +60,7 @@ var it = {
 	description: "Midas Components",
 	homepage: "https://designsystem.migrationsverket.se/",
 	license: "CC0-1.0",
-	version: "17.25.2",
+	version: "17.26.0",
 	module: "./index.js",
 	type: "module",
 	main: "./index.js",
@@ -91,4 +92,4 @@ var it = {
 	}
 }.version;
 //#endregion
-export { e as Accordion, t as AccordionItem, F as Badge, I as BadgeContainer, R as Breadcrumb, L as Breadcrumbs, M as Button, N as ButtonGroup, b as Calendar, q as Card, U as CardActionArea, V as CardActions, G as CardBody, K as CardContent, Y as CardHeader, J as CardImage, H as CardLink, W as CardTitle, g as Cell, X as CharacterCounter, C as Checkbox, w as CheckboxButton, S as CheckboxField, T as CheckboxGroup, E as ColorSchemeSwitch, D as ColorSchemeSwitchMenu, p as Column, de as ComboBox, ne as ContrastFilled, be as DateField, xe as DateInput, Ce as DateInputDivider, v as DatePicker, y as DateRangePicker, Se as DateSegment, te as DialogTrigger, Te as DropZone, B as FieldError, k as FileList, A as FileListItem, we as FileTrigger, rt as GlobalToastRegion, Ee as Grid, De as GridItem, s as Header, P as Heading, Oe as InfoBanner, Ye as Input, Z as Label, c as Layout, u as Link, _ as LinkButton, pe as ListBox, ve as ListBoxButton, ye as ListBoxEmptyState, he as ListBoxHeader, ge as ListBoxItem, _e as ListBoxLoadMoreItem, fe as ListBoxPopover, me as ListBoxSection, Me as Logo, je as LogoContext, ae as Menu, oe as MenuItem, le as MenuPopover, se as MenuSection, ce as MenuTrigger, $ as Modal, ee as ModalOverlay, o as Navbar, Q as Popover, Ne as ProgressBar, Fe as Radio, Ie as RadioButton, Pe as RadioField, Le as RadioGroup, x as RangeCalendar, l as RouterProvider, h as Row, O as SearchField, Re as Select, ue as Separator, a as Sidebar, i as SidebarLink, He as Skeleton, r as Spinner, Ge as Tab, Ke as TabList, We as TabPanel, f as Table, d as TableBody, m as TableHeader, Ue as Tabs, Be as Tag, Ve as TagGroup, ze as TagList, z as Text, Xe as TextArea, Je as TextField, qe as TextFieldBase, Ze as TimeField, et as Toast, nt as ToastProvider, $e as ToastRegion, re as ToggleButton, ie as ToggleButtonGroup, Ae as Tooltip, ke as TooltipTrigger, it as VERSION, n as clsx, Qe as toastQueue, j as useLocalizedStringFormatter, tt as useToastState };
+export { e as Accordion, t as AccordionItem, F as Badge, I as BadgeContainer, R as Breadcrumb, L as Breadcrumbs, M as Button, N as ButtonGroup, b as Calendar, q as Card, U as CardActionArea, V as CardActions, G as CardBody, K as CardContent, Y as CardHeader, J as CardImage, H as CardLink, W as CardTitle, g as Cell, X as CharacterCounter, C as Checkbox, w as CheckboxButton, S as CheckboxField, T as CheckboxGroup, E as ColorSchemeSwitch, D as ColorSchemeSwitchMenu, p as Column, de as ComboBox, ne as ContrastFilled, be as DateField, xe as DateInput, Ce as DateInputDivider, v as DatePicker, y as DateRangePicker, Se as DateSegment, te as DialogTrigger, we as DropZone, B as FieldError, k as FileList, A as FileListItem, Te as FileTrigger, rt as GlobalToastRegion, Ee as Grid, De as GridItem, s as Header, P as Heading, Oe as InfoBanner, Ye as Input, Z as Label, c as Layout, u as Link, _ as LinkButton, pe as ListBox, ve as ListBoxButton, ye as ListBoxEmptyState, he as ListBoxHeader, ge as ListBoxItem, _e as ListBoxLoadMoreItem, fe as ListBoxPopover, me as ListBoxSection, Me as Logo, je as LogoContext, ae as Menu, oe as MenuItem, le as MenuPopover, se as MenuSection, ce as MenuTrigger, $ as Modal, ee as ModalOverlay, o as Navbar, Q as Popover, Ne as ProgressBar, Fe as Radio, Ie as RadioButton, Pe as RadioField, Le as RadioGroup, x as RangeCalendar, l as RouterProvider, h as Row, O as SearchField, Re as Select, ue as Separator, a as Sidebar, i as SidebarLink, He as Skeleton, r as Spinner, Ge as Tab, Ke as TabList, We as TabPanel, f as Table, d as TableBody, m as TableHeader, Ue as Tabs, Be as Tag, Ve as TagGroup, ze as TagList, z as Text, Xe as TextArea, Je as TextField, qe as TextFieldBase, Ze as TimeField, et as Toast, nt as ToastProvider, $e as ToastRegion, re as ToggleButton, ie as ToggleButtonGroup, Ae as Tooltip, ke as TooltipTrigger, it as VERSION, n as clsx, Qe as toastQueue, j as useLocalizedStringFormatter, tt as useToastState };

package/package.json

@@ -14,7 +14,7 @@
   "description": "Midas Components",
   "homepage": "https://designsystem.migrationsverket.se/",
   "license": "CC0-1.0",
-  "version": "17.25.2",
+  "version": "17.26.0",
   "module": "./index.js",
   "type": "module",
   "main": "./index.js",

package/assets/file-upload.css

@@ -1 +0,0 @@
-._dropzone_pm0xi_1{font-family:var(--midas-typography-font-family);color:var(--midas-text-primary);border:1px dashed var(--midas-border-color-subtle);text-align:center;background-color:var(--midas-background-base);padding:1.5rem}._dropzone_pm0xi_1 [slot=label]{margin-top:1rem;display:block}._dropzone_pm0xi_1[data-drop-target]{background:var(--midas-background-hover);border:1px solid var(--midas-border-color-primary)}

package/chunks/file-upload-DInuSFCB.js

@@ -1,11 +0,0 @@
-'use client';
-import { t as e } from "./clsx-B1NYyfch.js";
-import "react";
-import { DropZone as t, FileTrigger as n } from "react-aria-components";
-import { jsx as r } from "react/jsx-runtime";
-import '../assets/file-upload.css';var i = { dropzone: "_dropzone_pm0xi_1" }, a = ({ className: n, ...a }) => /* @__PURE__ */ r(t, {
-	...a,
-	className: e(i.dropzone, n)
-}), o = (e) => /* @__PURE__ */ r(n, { ...e });
-//#endregion
-export { o as n, a as t };

package/file-upload/DropZone.stories.d.ts

@@ -1,6 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react-vite';
-import { DropZone } from './FileUpload';
-declare const meta: Meta<typeof DropZone>;
-export default meta;
-type Story = StoryObj<typeof meta>;
-export declare const Default: Story;

package/file-upload/FileUpload.d.ts

@@ -1,4 +0,0 @@
-import { DropZoneProps, FileTriggerProps } from 'react-aria-components';
-import * as React from 'react';
-export declare const DropZone: React.FC<DropZoneProps>;
-export declare const FileTrigger: React.FC<FileTriggerProps>;

package/file-upload/FileUpload.stories.d.ts

@@ -1,11 +0,0 @@
-import { StoryObj } from '@storybook/react-vite';
-import { DropZone } from './FileUpload';
-type Story = StoryObj<typeof DropZone>;
-declare const _default: {
-    component: import('react').FC<import('react-aria-components').DropZoneProps>;
-    title: string;
-    tags: string[];
-    args: {};
-};
-export default _default;
-export declare const DropIt: Story;

package/file-upload/index.d.ts

@@ -1 +0,0 @@
-export { FileTrigger, DropZone } from './FileUpload';

package/file-upload/index.js

@@ -1,2 +0,0 @@
-import { n as e, t } from "../chunks/file-upload-DInuSFCB.js";
-export { t as DropZone, e as FileTrigger };