@midas-ds/components 16.4.0 → 16.4.1

package/CHANGELOG.md

@@ -1,3 +1,13 @@
+## 16.4.1 (2026-01-16)
+
+### 🧪 Tests updated
+
+- **textfield:** rename file ([8287e354be](https://github.com/migrationsverket/midas/commit/8287e354be))
+- replace jest with vitest ([6d8ca7deb3](https://github.com/migrationsverket/midas/commit/6d8ca7deb3))
+- move new tests into component folder ([306aaaa4f5](https://github.com/migrationsverket/midas/commit/306aaaa4f5))
+- **Table:** skip a11y tests for slow virtualized table ([a6055b5c91](https://github.com/migrationsverket/midas/commit/a6055b5c91))
+- move tests and stories to component folders ([967763f723](https://github.com/migrationsverket/midas/commit/967763f723))
+
 ## 16.4.0 (2026-01-15)
 
 ### 🚀 Features

package/accordion/Accordion.stories.d.ts

@@ -0,0 +1,24 @@
+import { default as React } from 'react';
+import { StoryObj } from '@storybook/react-vite';
+import { Accordion } from '.';
+type Story = StoryObj<typeof Accordion>;
+declare const _default: {
+    component: React.FC<import('./Accordion').MidasAccordion>;
+    subcomponents: {
+        AccordionItem: React.ComponentType<unknown>;
+    };
+    title: string;
+    tags: string[];
+    args: {
+        size: "large";
+    };
+};
+export default _default;
+export declare const Default: Story;
+export declare const Contained: Story;
+export declare const AllowsMultipleExpanded: Story;
+export declare const DefaultExpandedKeys: Story;
+export declare const CustomTriggerElements: Story;
+export declare const DynamicContent: Story;
+export declare const DS1060: Story;
+export declare const AccordionHasBackground: Story;

package/badge/Badge.stories.d.ts

@@ -0,0 +1,17 @@
+import { StoryObj } from '@storybook/react-vite';
+import { Badge } from './Badge';
+type Story = StoryObj<typeof Badge>;
+declare const _default: {
+    component: import('react').FC<import('react').HTMLAttributes<HTMLSpanElement>>;
+    title: string;
+    tags: string[];
+    parameters: {
+        layout: string;
+    };
+    args: {};
+    render: (args: import('react').HTMLAttributes<HTMLSpanElement>) => import("react/jsx-runtime").JSX.Element;
+};
+export default _default;
+export declare const NoLabel: Story;
+export declare const WithLabel: Story;
+export declare const LongLabel: Story;

package/breadcrumbs/Breadcrumbs.stories.d.ts

@@ -0,0 +1,16 @@
+import { StoryObj } from '@storybook/react-vite';
+import { Breadcrumbs } from './Breadcrumbs';
+type Story = StoryObj<typeof Breadcrumbs>;
+declare const _default: {
+    component: <T extends import('./Breadcrumbs').BreadcrumbItem>({ items, className, ...rest }: import('./Breadcrumbs').BreadcrumbsProps<T>) => import("react/jsx-runtime").JSX.Element;
+    title: string;
+    tags: string[];
+    args: {
+        items: {
+            title: string;
+            href: string;
+        }[];
+    };
+};
+export default _default;
+export declare const Primary: Story;

package/button/Button.stories.d.ts

@@ -0,0 +1,25 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { Button } from './Button';
+declare const meta: Meta<typeof Button>;
+export default meta;
+type Story = StoryObj<typeof Button>;
+export declare const Primary: Story;
+export declare const Secondary: Story;
+export declare const TertiaryWithIcon: Story;
+export declare const PrimaryDisabled: Story;
+export declare const SecondaryDisabled: Story;
+export declare const PrimaryFullwidth: {
+    args: {
+        children: string;
+        fullwidth: boolean;
+    };
+};
+export declare const Icon: {
+    args: {
+        children: undefined;
+        icon: import('react').ForwardRefExoticComponent<Omit<import('lucide-react').LucideProps, "ref"> & import('react').RefAttributes<SVGSVGElement>>;
+        variant: string;
+        'aria-label': string;
+    };
+};
+export declare const Danger: Story;

package/button/ButtonGroup.stories.d.ts

@@ -0,0 +1,15 @@
+import { StoryObj } from '@storybook/react-vite';
+import { ButtonGroup } from './ButtonGroup';
+type Story = StoryObj<typeof ButtonGroup>;
+declare const _default: {
+    component: import('react').FC<import('react').HTMLAttributes<HTMLDivElement>>;
+    title: string;
+    tags: string[];
+    parameters: {
+        layout: string;
+    };
+    args: {};
+    argTypes: {};
+};
+export default _default;
+export declare const Primary: Story;

package/calendar/Calendar.stories.d.ts

@@ -0,0 +1,15 @@
+import { StoryObj } from '@storybook/react-vite';
+import { Calendar } from './Calendar';
+type Story = StoryObj<typeof Calendar>;
+declare const _default: {
+    component: import('react').FC<import('./Calendar').CalendarProps>;
+    render: (args: import('./Calendar').CalendarProps) => import("react/jsx-runtime").JSX.Element;
+    title: string;
+    tags: string[];
+};
+export default _default;
+export declare const Primary: Story;
+export declare const Disabled: Story;
+export declare const ReadOnly: Story;
+export declare const Invalid: Story;
+export declare const UnavailableWeekends: Story;

package/calendar/RangeCalendar.stories.d.ts

@@ -0,0 +1,13 @@
+import { StoryObj } from '@storybook/react-vite';
+import { RangeCalendar } from './RangeCalendar';
+type Story = StoryObj<typeof RangeCalendar>;
+declare const _default: {
+    component: import('react').FC<import('./RangeCalendar').RangeCalendarProps>;
+    title: string;
+    tags: string[];
+};
+export default _default;
+export declare const Primary: Story;
+export declare const SelectedDates: Story;
+export declare const Disabled: Story;
+export declare const ReadOnly: Story;

package/card/Card.stories.d.ts

@@ -0,0 +1,12 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { Card } from './Card';
+declare const meta: Meta<typeof Card>;
+export default meta;
+type Story = StoryObj<typeof Card>;
+export declare const Example: Story;
+export declare const Horizontal: Story;
+export declare const WithActions: Story;
+export declare const WithPrimaryAction: Story;
+export declare const WithLink: Story;
+export declare const WithImage: Story;
+export declare const WithContainedImage: Story;

package/checkbox/Checkbox.stories.d.ts

@@ -0,0 +1,30 @@
+import { StoryObj } from '@storybook/react-vite';
+import { Checkbox } from './Checkbox';
+type Story = StoryObj<typeof Checkbox>;
+declare const _default: {
+    component: import('react').ForwardRefExoticComponent<import('react-aria').AriaCheckboxProps & import('react-aria-components').SlotProps & {
+        className?: string;
+    } & import('react').RefAttributes<HTMLLabelElement>>;
+    title: string;
+    tags: string[];
+    parameters: {
+        layout: string;
+    };
+    args: {
+        isDisabled: false;
+        isIndeterminate: false;
+        isInvalid: false;
+        isReadOnly: false;
+        isRequired: false;
+        value: string;
+        children: string;
+    };
+};
+export default _default;
+export declare const Primary: Story;
+export declare const Disabled: Story;
+export declare const ReadOnly: Story;
+export declare const Invalid: Story;
+export declare const Indeterminate: Story;
+export declare const Selected: Story;
+export declare const Required: Story;

package/checkbox/CheckboxGroup.stories.d.ts

@@ -0,0 +1,29 @@
+import { StoryObj } from '@storybook/react-vite';
+import { CheckboxGroup } from './CheckboxGroup';
+type Story = StoryObj<typeof CheckboxGroup>;
+declare const _default: {
+    title: string;
+    component: typeof CheckboxGroup;
+    parameters: {
+        layout: string;
+    };
+    args: {
+        isInvalid: false;
+        isDisabled: false;
+        isRequired: false;
+        isReadOnly: false;
+        label: string;
+        description: string;
+        errorMessage: string;
+        errorPosition: "top";
+        children: import("react/jsx-runtime").JSX.Element[];
+    };
+    tags: string[];
+};
+export default _default;
+export declare const Primary: Story;
+export declare const ShowSelectAll: Story;
+export declare const SelectAllInteraction: Story;
+export declare const Disabled: Story;
+export declare const ReadOnly: Story;
+export declare const Invalid: Story;

package/color-scheme-switch/ColorSchemeSwitch.stories.d.ts

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

package/combobox/ComboBox.stories.d.ts

@@ -0,0 +1,44 @@
+import { StoryObj } from '@storybook/react-vite';
+import { optionsWithSections } from '../utils/tests';
+import { ComboBox } from './ComboBox';
+type Item = (typeof options)[0];
+type Section = (typeof optionsWithSections)[0];
+type Story<T extends object = Item> = StoryObj<typeof ComboBox<T>>;
+declare const options: {
+    id: number;
+    name: string;
+}[];
+declare const _default: {
+    component: typeof ComboBox;
+    title: string;
+    tags: string[];
+    args: {
+        label: string;
+        placeholder: string;
+        description: string;
+        errorMessage: string;
+        errorPosition: "top";
+        size: "large";
+    };
+    argTypes: {
+        placeholder: {
+            control: "text";
+        };
+    };
+    render: (args: import('./ComboBox').ComboBoxProps<{
+        id: number;
+        name: string;
+    }>) => import("react/jsx-runtime").JSX.Element;
+};
+export default _default;
+export declare const Primary: Story;
+export declare const Invalid: Story;
+export declare const DS1253: Story;
+export declare const MediumSizeInvalid: Story;
+export declare const Disabled: Story;
+export declare const ReadOnly: Story;
+export declare const Required: Story;
+export declare const Sectioned: Story<Section>;
+export declare const PerformanceTest: Story;
+export declare const AsynchronousLoadingWithEmptyMessage: Story;
+export declare const InfiniteScroll: Story;

package/date-field/DateField.stories.d.ts

@@ -0,0 +1,13 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { DateField } from './DateField';
+type Story = StoryObj<typeof DateField>;
+declare const _default: Meta<typeof DateField>;
+export default _default;
+/** Don't put format in description, it changes with browser language settings! */
+export declare const Primary: Story;
+export declare const Invalid: Story;
+export declare const Disabled: Story;
+export declare const ReadOnly: Story;
+/** When using uncontrolled value */
+export declare const WithDefaultValue: Story;
+export declare const WithClearButton: Story;

package/date-picker/DatePicker.stories.d.ts

@@ -0,0 +1,14 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { DatePicker } from './DatePicker';
+declare const meta: Meta<typeof DatePicker>;
+export default meta;
+type Story = StoryObj<typeof DatePicker>;
+export declare const Primary: Story;
+export declare const WithTime: Story;
+export declare const Disabled: Story;
+export declare const ReadOnly: Story;
+export declare const Invalid: Story;
+export declare const Required: Story;
+export declare const CustomValiation: Story;
+export declare const ControlledState: Story;
+export declare const WithClearButton: Story;

package/date-picker/DateRangePicker.stories.d.ts

@@ -0,0 +1,38 @@
+import { StoryObj } from '@storybook/react-vite';
+import { DateRangePicker } from './DateRangePicker';
+type Story = StoryObj<typeof DateRangePicker>;
+declare const _default: {
+    component: import('react').FC<import('./DateRangePicker').DateRangePickerProps>;
+    title: string;
+    tags: string[];
+    parameters: {
+        a11y: {
+            config: {
+                rules: {
+                    id: string;
+                    selector: string;
+                    enabled: boolean;
+                }[];
+            };
+            options: {
+                rules: {
+                    'color-contrast': {
+                        enabled: boolean;
+                    };
+                };
+            };
+        };
+    };
+    args: {
+        label: string;
+        description: string;
+        errorMessage: string;
+        errorPosition: "top";
+    };
+};
+export default _default;
+export declare const Primary: Story;
+export declare const Disabled: Story;
+export declare const ReadOnly: Story;
+export declare const Invalid: Story;
+export declare const WithClearButton: Story;

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

@@ -0,0 +1,6 @@
+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.stories.d.ts

@@ -0,0 +1,11 @@
+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/grid/Grid.stories.d.ts

@@ -0,0 +1,30 @@
+declare const _default: {
+    component: import('react').FC<import('./Grid').GridProps>;
+    subcomponents: {
+        GridItem: import('react').FC<import('./GridItem').GridItemProps>;
+    };
+    title: string;
+    tags: string[];
+    parameters: {
+        layout: string;
+    };
+    argTypes: {
+        isContained: {
+            control: {
+                type: "boolean";
+            };
+        };
+        removeMargins: {
+            control: {
+                type: "boolean";
+            };
+        };
+    };
+};
+export default _default;
+export declare const Primary: {
+    args: {};
+    render: ({ ...args }: {
+        [x: string]: any;
+    }) => import("react/jsx-runtime").JSX.Element;
+};

package/heading/Heading.stories.d.ts

@@ -0,0 +1,30 @@
+import { StoryObj } from '@storybook/react-vite';
+import { Heading } from './Heading';
+type Story = StoryObj<typeof Heading>;
+declare const _default: {
+    component: import('react').FC<import('./Heading').HeadingProps>;
+    title: string;
+    tags: string[];
+    args: {
+        isExpressive: false;
+        enableMargins: false;
+    };
+    argTypes: {
+        level: {
+            control: {
+                max: number;
+                min: number;
+            };
+        };
+    };
+};
+export default _default;
+export declare const Heading1: Story;
+export declare const ExpressiveHeading1: Story;
+export declare const Heading2: Story;
+export declare const ExpressiveHeading2: Story;
+export declare const Heading3: Story;
+export declare const ExpressiveHeading3: Story;
+export declare const ExpressiveHeading4: Story;
+export declare const ExpressiveHeading5: Story;
+export declare const ChangeSemanticElement: Story;

package/info-banner/InfoBanner.stories.d.ts

@@ -0,0 +1,16 @@
+import { StoryObj } from '@storybook/react-vite';
+import { default as React } from 'react';
+import { InfoBanner } from './InfoBanner';
+type Story = StoryObj<typeof InfoBanner>;
+declare const _default: {
+    component: React.FC<import('./InfoBanner').InfoBannerProps>;
+    title: string;
+    tags: string[];
+};
+export default _default;
+export declare const Success: Story;
+export declare const Warning: Story;
+export declare const Info: Story;
+export declare const Important: Story;
+export declare const Dismissable: Story;
+export declare const Controlled: Story;

package/label/Label.stories.d.ts

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

package/layout/Layout.stories.d.ts

@@ -0,0 +1,9 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { Layout } from './Layout';
+declare const meta: Meta<typeof Layout>;
+export default meta;
+type Story = StoryObj<typeof Layout>;
+export declare const Primary: Story;
+export declare const External: Story;
+export declare const OnlyHeader: Story;
+export declare const Navbar: Story;

package/legacy-select/LegacySelect.stories.d.ts

@@ -0,0 +1,27 @@
+import { StoryObj } from '@storybook/react-vite';
+import { LegacySelect } from '.';
+type Story = StoryObj<typeof LegacySelect>;
+declare const _default: {
+    component: import('react').ForwardRefExoticComponent<Omit<import('./types').SelectProps, "children" | "items"> & {
+        options: import('..').ListBoxOption[];
+    } & import('react').RefAttributes<HTMLButtonElement>>;
+    title: string;
+    tags: string[];
+    args: {
+        description: string;
+        isDisabled: false;
+        isSelectableAll: false;
+        label: string;
+        options: {
+            name: string;
+            id: string;
+        }[];
+        placeholder: string;
+        selectionMode: "single";
+        showTags: false;
+        errorPosition: "top";
+        size: "large";
+    };
+};
+export default _default;
+export declare const Primary: Story;

package/link/Link.stories.d.ts

@@ -0,0 +1,14 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { Link } from './Link';
+declare const meta: Meta<typeof Link>;
+export default meta;
+type Story = StoryObj<typeof Link>;
+export declare const Primary: Story;
+export declare const PrimaryDisabled: Story;
+export declare const ExternalLink: Story;
+export declare const DownloadLink: Story;
+export declare const Standalone: Story;
+export declare const StandaloneDisabled: Story;
+export declare const ExternalLinkStandalone: Story;
+export declare const DownloadLinkStandalone: Story;
+export declare const CustomIcon: Story;

package/link-button/LinkButton.stories.d.ts

@@ -0,0 +1,12 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { LinkButton } from './LinkButton';
+declare const meta: Meta<typeof LinkButton>;
+export default meta;
+type Story = StoryObj<typeof LinkButton>;
+export declare const Primary: Story;
+export declare const Secondary: Story;
+export declare const Tertiary: Story;
+export declare const Previous: Story;
+export declare const Disabled: Story;
+export declare const AppLink: Story;
+export declare const Danger: Story;

package/logo/Logo.stories.d.ts

@@ -0,0 +1,7 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { Logo } from './Logo';
+declare const meta: Meta<typeof Logo>;
+export default meta;
+type Story = StoryObj<typeof Logo>;
+export declare const Primary: Story;
+export declare const Monochrome: Story;

package/menu/Menu.stories.d.ts

@@ -0,0 +1,34 @@
+import { StoryObj } from '@storybook/react-vite';
+import { Menu } from './Menu';
+interface Item {
+    id: string | number;
+    name: string;
+    children?: Item[];
+    [prop: string]: unknown;
+}
+type Story = StoryObj<typeof Menu<Item>>;
+declare const _default: {
+    title: string;
+    component: <T extends import('./Menu').MenuItemObject>({ className, size, ...rest }: import('./Menu').MenuProps<T>) => import("react/jsx-runtime").JSX.Element;
+    subcomponents: {
+        MenuItem: <T extends import('./Menu').MenuItemObject>(props: import('./MenuItem').MenuItemProps<T>) => import("react/jsx-runtime").JSX.Element;
+    };
+    render: (args: import('./Menu').MenuProps<import('./Menu').MenuItemObject>) => import("react/jsx-runtime").JSX.Element;
+    args: {
+        children: (item: import('./Menu').MenuItemObject) => import("react/jsx-runtime").JSX.Element;
+        items: {
+            id: number;
+            name: string;
+        }[];
+    };
+};
+export default _default;
+export declare const Primary: Story;
+export declare const ControlledSingleSelection: Story;
+export declare const ControlledMultipleSelection: Story;
+export declare const Sections: Story;
+export declare const Separators: Story;
+export declare const TextSlots: Story;
+export declare const MultiSelectWithDescriptions: Story;
+export declare const DisabledItems: Story;
+export declare const SubMenus: Story;

package/modal/Dialog.stories.d.ts

@@ -0,0 +1,15 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { Modal } from './Dialog';
+type Story = StoryObj<typeof Modal>;
+declare const _default: Meta<typeof Modal>;
+export default _default;
+export declare const Default: Story;
+export declare const NotDismissable: Story;
+/**
+ * For special cases when modal should not be closable without taking further action
+ */
+export declare const HiddenCloseButton: Story;
+export declare const EmptyTitle: Story;
+export declare const Scrollable: Story;
+export declare const DS1282: Story;
+export declare const LongTitle: Story;

package/package.json

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

package/popover/Popover.stories.d.ts

@@ -0,0 +1,18 @@
+import { StoryObj } from '@storybook/react-vite';
+import { Popover } from './Popover';
+import { DialogTrigger } from 'react-aria-components';
+type Story = StoryObj<typeof Popover>;
+declare const _default: {
+    component: typeof Popover;
+    subcomponents: {
+        DialogTrigger: typeof DialogTrigger;
+    };
+    title: string;
+    tags: string[];
+    parameters: {
+        layout: string;
+    };
+};
+export default _default;
+export declare const Primary: Story;
+export declare const Placement: Story;

package/progress-bar/ProgressBar.stories.d.ts

@@ -0,0 +1,15 @@
+import { StoryObj } from '@storybook/react-vite';
+import { ProgressBar } from './ProgressBar';
+type Story = StoryObj<typeof ProgressBar>;
+declare const _default: {
+    component: import('react').FC<import('./ProgressBar').ProgressBarProps>;
+    title: string;
+    tags: string[];
+    args: {
+        isIndeterminate: false;
+    };
+};
+export default _default;
+export declare const Primary: Story;
+export declare const WithoutLabels: Story;
+export declare const IsIndeterminate: Story;