@midas-ds/components 16.4.1 โ 16.4.3
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/CHANGELOG.md +20 -0
- package/accordion/Accordion.d.ts +6 -2
- package/accordion/Accordion.stories.d.ts +1 -1
- package/accordion/AccordionItem.d.ts +2 -3
- package/accordion/AccordionItem.stories.d.ts +22 -0
- package/accordion/index.d.ts +1 -1
- package/accordion/index.js +1 -1
- package/assets/AccordionItem.css +1 -1
- package/chunks/{AccordionItem-D6vWtoJN.js โ AccordionItem-DnWNOVQg.js} +39 -39
- package/combobox/ComboBox.stories.d.ts +2 -6
- package/index.js +1 -1
- package/legacy-select/LegacySelect.stories.d.ts +1 -1
- package/package.json +1 -1
- package/select/Select.stories.d.ts +4 -3
- package/combobox/utils.d.ts +0 -12
- package/legacy-select/utils.d.ts +0 -11
- package/utils/tests.d.ts +0 -17
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,23 @@
|
|
|
1
|
+
## 16.4.3 (2026-01-20)
|
|
2
|
+
|
|
3
|
+
### ๐ Features
|
|
4
|
+
|
|
5
|
+
- **test-utils:** add tool for common test utils ([eb2df9b414](https://github.com/migrationsverket/midas/commit/eb2df9b414))
|
|
6
|
+
|
|
7
|
+
### ๐ฉน Fixes
|
|
8
|
+
|
|
9
|
+
- **components, accordion:** rename types ([2f9f64de2f](https://github.com/migrationsverket/midas/commit/2f9f64de2f))
|
|
10
|
+
|
|
11
|
+
### ๐งช Tests updated
|
|
12
|
+
|
|
13
|
+
- **components:** update failing tests after data change ([ec21833a37](https://github.com/migrationsverket/midas/commit/ec21833a37))
|
|
14
|
+
|
|
15
|
+
## 16.4.2 (2026-01-19)
|
|
16
|
+
|
|
17
|
+
### ๐ฉน Fixes
|
|
18
|
+
|
|
19
|
+
- **components, accordion:** adjust padding of uncontained content container ([0134e1a054](https://github.com/migrationsverket/midas/commit/0134e1a054))
|
|
20
|
+
|
|
1
21
|
## 16.4.1 (2026-01-16)
|
|
2
22
|
|
|
3
23
|
### ๐งช Tests updated
|
package/accordion/Accordion.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { DisclosureGroupProps } from 'react-aria-components';
|
|
2
2
|
import { Size } from '../common/types';
|
|
3
3
|
import * as React from 'react';
|
|
4
|
-
export interface
|
|
4
|
+
export interface AccordionProps extends DisclosureGroupProps {
|
|
5
5
|
children?: React.ReactNode;
|
|
6
6
|
isDisabled?: boolean;
|
|
7
7
|
isContained?: boolean;
|
|
@@ -10,7 +10,11 @@ export interface MidasAccordion extends DisclosureGroupProps {
|
|
|
10
10
|
**/
|
|
11
11
|
size?: Size;
|
|
12
12
|
}
|
|
13
|
+
/**
|
|
14
|
+
* @deprecated since v 16.4.1 please use AccordionProps instead
|
|
15
|
+
*/
|
|
16
|
+
export type MidasAccordion = AccordionProps;
|
|
13
17
|
/**
|
|
14
18
|
* Accordions help reduce visual clutter on a page by organizing content into collapsible sections.
|
|
15
19
|
*/
|
|
16
|
-
export declare const Accordion: React.FC<
|
|
20
|
+
export declare const Accordion: React.FC<AccordionProps>;
|
|
@@ -3,7 +3,7 @@ import { StoryObj } from '@storybook/react-vite';
|
|
|
3
3
|
import { Accordion } from '.';
|
|
4
4
|
type Story = StoryObj<typeof Accordion>;
|
|
5
5
|
declare const _default: {
|
|
6
|
-
component: React.FC<import('./Accordion').
|
|
6
|
+
component: React.FC<import('./Accordion').AccordionProps>;
|
|
7
7
|
subcomponents: {
|
|
8
8
|
AccordionItem: React.ComponentType<unknown>;
|
|
9
9
|
};
|
|
@@ -3,7 +3,7 @@ import { HeadingProps } from '../heading';
|
|
|
3
3
|
import { FeedbackStatus, Size } from '../common/types';
|
|
4
4
|
import { FeedbackStatusIconProps } from '../common/FeedbackStatusIcon';
|
|
5
5
|
import * as React from 'react';
|
|
6
|
-
interface
|
|
6
|
+
export interface AccordionItemProps extends Omit<DisclosureProps, 'children'> {
|
|
7
7
|
/** The text displayed in the collapsed state. If a ReactNode is provided, a heading will not be automatically added, and you must provide one yourself. */
|
|
8
8
|
title?: string | React.ReactNode;
|
|
9
9
|
children?: React.ReactNode;
|
|
@@ -26,5 +26,4 @@ interface MidasAccordionItem extends Omit<DisclosureProps, 'children'> {
|
|
|
26
26
|
*/
|
|
27
27
|
iconAriaLabel?: FeedbackStatusIconProps['aria-label'];
|
|
28
28
|
}
|
|
29
|
-
export declare const AccordionItem: React.FC<
|
|
30
|
-
export {};
|
|
29
|
+
export declare const AccordionItem: React.FC<AccordionItemProps>;
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import { StoryObj } from '@storybook/react-vite';
|
|
2
|
+
import { AccordionItem } from './AccordionItem';
|
|
3
|
+
type Story = StoryObj<typeof AccordionItem>;
|
|
4
|
+
declare const _default: {
|
|
5
|
+
component: import('react').FC<import('./AccordionItem').AccordionItemProps>;
|
|
6
|
+
title: string;
|
|
7
|
+
tags: string[];
|
|
8
|
+
args: {
|
|
9
|
+
title: string;
|
|
10
|
+
children: string;
|
|
11
|
+
size: "large";
|
|
12
|
+
};
|
|
13
|
+
};
|
|
14
|
+
export default _default;
|
|
15
|
+
export declare const Default: Story;
|
|
16
|
+
export declare const Contained: Story;
|
|
17
|
+
export declare const Success: Story;
|
|
18
|
+
export declare const Info: Story;
|
|
19
|
+
export declare const Warning: Story;
|
|
20
|
+
export declare const Important: Story;
|
|
21
|
+
export declare const Disabled: Story;
|
|
22
|
+
export declare const StatusDisabled: Story;
|
package/accordion/index.d.ts
CHANGED
package/accordion/index.js
CHANGED
package/assets/AccordionItem.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
._root_17bdp_1{--gap: .75rem;--heading-color: var(--midas-text-primary);font-family:var(--midas-typography-font-family);color:var(--midas-text-primary);width:100%;display:flex;flex-direction:column;gap:var(--gap)}._root_17bdp_1._contained_17bdp_5{--gap: .25rem}._root_17bdp_1[data-disabled]{--heading-color: var(--midas-text-disabled)}._root_17bdp_1[data-disabled] ._triggerButton_17bdp_12{background:transparent}.
|
|
1
|
+
._root_17bdp_1{--gap: .75rem;--heading-color: var(--midas-text-primary);font-family:var(--midas-typography-font-family);color:var(--midas-text-primary);width:100%;display:flex;flex-direction:column;gap:var(--gap)}._root_17bdp_1._contained_17bdp_5{--gap: .25rem}._root_17bdp_1[data-disabled]{--heading-color: var(--midas-text-disabled)}._root_17bdp_1[data-disabled] ._triggerButton_17bdp_12{background:transparent}._item_hpbxd_1{--item-padding: 0;--content-padding: var(--midas-spacing-30) var(--midas-spacing-50) var(--midas-spacing-50) 1.85rem;--border: none;--accordion-background: transparent;--accordion-background-hover: transparent;--text-color: var(--midas-text-primary);--icon-color: var(--midas-icon-primary);font-family:var(--midas-typography-font-family);color:var(--text-color);background-color:var(--accordion-background);border:var(--border);border-color:var(--border-color)}._contained_hpbxd_18{--gap: var(--midas-spacing-20);--item-padding: calc(var(--midas-spacing-40) - 2px) var(--midas-spacing-40);--content-padding: var(--midas-spacing-40) var(--midas-spacing-50) var(--midas-spacing-50) var(--midas-spacing-50);--border-color: var(--midas-border-color-secondary);--border: 1px solid;--accordion-background: var(--midas-layer-01-base);--accordion-background-hover: var(--midas-layer-01-hover)}._contained_hpbxd_18._medium_hpbxd_28{--item-padding: calc(var(--midas-spacing-30) - 2px) var(--midas-spacing-40)}._success_hpbxd_33{--accordion-background: var(--midas-support-background-success);--accordion-background-hover: var(--midas-support-background-success-hover);--border-color: var(--midas-support-border-success)}._warning_hpbxd_39{--accordion-background: var(--midas-support-background-warning);--accordion-background-hover: var(--midas-support-background-warning-hover);--border-color: var(--midas-support-border-warning)}._info_hpbxd_45{--accordion-background: var(--midas-support-background-info);--accordion-background-hover: var(--midas-support-background-info-hover);--border-color: var(--midas-support-border-info)}._important_hpbxd_51{--accordion-background: var(--midas-support-background-important);--accordion-background-hover: var(--midas-support-background-important-hover);--border-color: var(--midas-support-border-important)}._item_hpbxd_1[data-disabled]{--border-color: var(--midas-border-color-disabled);--icon-color: var(--midas-text-disabled);--text-color: var(--midas-text-disabled)}._item_hpbxd_1[data-disabled] ._triggerButton_hpbxd_62{background:transparent}._item_hpbxd_1[data-disabled] ._triggerText_hpbxd_66{color:var(--midas-text-disabled)}._trigger_hpbxd_62{border:0;cursor:pointer;margin:0}._triggerMainContent_hpbxd_77{flex:1 0 0;text-align:left}._triggerText_hpbxd_66{margin:0;padding:0}:not(#_\ _hpbxd_1) ._triggerButton_hpbxd_62{width:100%;padding:var(--item-padding);align-items:flex-start;min-height:unset}._chevronIcon_hpbxd_94{transform:rotate(0);transition:transform var(--midas-transition-duration-normal) ease;padding:var(--midas-spacing-10) 0}._statusIcon_hpbxd_100{color:var(--icon-color);padding:var(--midas-spacing-10) 0}@media(forced-colors:active){._statusIcon_hpbxd_100{color:currentColor}}._triggerButton_hpbxd_62[aria-expanded=true] ._chevronIcon_hpbxd_94{transform:rotate(-180deg);transition:transform var(--midas-transition-duration-normal) ease}._triggerButton_hpbxd_62[data-hovered]{background-color:var(--accordion-background-hover)}._triggerButton_hpbxd_62[data-focus-visible]{box-shadow:var(--midas-state-focus-inset)}._panel_hpbxd_122{height:var(--disclosure-panel-height);transition:height var(--midas-transition-panel-collapse);overflow:clip}._content_hpbxd_130{height:auto;padding:var(--content-padding)}._hasBackground_hpbxd_135{background-color:var(--midas-background-base)}._header_hpbxd_139{margin:0}@media(prefers-reduced-motion){._chevronIcon_hpbxd_94,._triggerButton_hpbxd_62[aria-expanded=true] ._chevronIcon_hpbxd_94,._panel_hpbxd_122{transition:none}}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import { c as
|
|
3
|
-
import { DisclosureGroup as
|
|
1
|
+
import { jsx as n, jsxs as m } from "react/jsx-runtime";
|
|
2
|
+
import { c as d } from "./clsx-AexbMWKp.js";
|
|
3
|
+
import { DisclosureGroup as f, Disclosure as v, DisclosurePanel as C } from "react-aria-components";
|
|
4
4
|
import { createContext as I, useContext as N, useEffect as B } from "react";
|
|
5
5
|
import { B as k } from "./Button-BYrLbzir.js";
|
|
6
6
|
import { H as w } from "./Heading-D8tNNJkt.js";
|
|
@@ -9,16 +9,16 @@ import { C as T } from "./chevron-down-DgT-uSF9.js";
|
|
|
9
9
|
import '../assets/AccordionItem.css';const D = "_root_17bdp_1", M = "_contained_17bdp_5", a = {
|
|
10
10
|
root: D,
|
|
11
11
|
contained: M
|
|
12
|
-
},
|
|
12
|
+
}, g = I(void 0), et = ({
|
|
13
13
|
children: o,
|
|
14
14
|
className: c,
|
|
15
15
|
isContained: s,
|
|
16
16
|
size: r = "large",
|
|
17
17
|
...e
|
|
18
|
-
}) => /* @__PURE__ */
|
|
19
|
-
|
|
18
|
+
}) => /* @__PURE__ */ n(g.Provider, { value: { isContained: s, size: r }, children: /* @__PURE__ */ n(
|
|
19
|
+
f,
|
|
20
20
|
{
|
|
21
|
-
className:
|
|
21
|
+
className: d(
|
|
22
22
|
a.root,
|
|
23
23
|
s ? a.contained : a.uncontained,
|
|
24
24
|
c
|
|
@@ -26,7 +26,7 @@ import '../assets/AccordionItem.css';const D = "_root_17bdp_1", M = "_contained_
|
|
|
26
26
|
...e,
|
|
27
27
|
children: o
|
|
28
28
|
}
|
|
29
|
-
) }), j = "
|
|
29
|
+
) }), j = "_item_hpbxd_1", z = "_contained_hpbxd_18", F = "_medium_hpbxd_28", H = "_success_hpbxd_33", P = "_warning_hpbxd_39", S = "_info_hpbxd_45", y = "_important_hpbxd_51", E = "_triggerButton_hpbxd_62", G = "_triggerText_hpbxd_66", R = "_trigger_hpbxd_62", W = "_triggerMainContent_hpbxd_77", $ = "_chevronIcon_hpbxd_94", q = "_statusIcon_hpbxd_100", J = "_panel_hpbxd_122", K = "_content_hpbxd_130", L = "_hasBackground_hpbxd_135", O = "_header_hpbxd_139", t = {
|
|
30
30
|
item: j,
|
|
31
31
|
contained: z,
|
|
32
32
|
medium: F,
|
|
@@ -38,82 +38,82 @@ import '../assets/AccordionItem.css';const D = "_root_17bdp_1", M = "_contained_
|
|
|
38
38
|
triggerText: G,
|
|
39
39
|
trigger: R,
|
|
40
40
|
triggerMainContent: W,
|
|
41
|
-
" ": "_
|
|
41
|
+
" ": "_ _hpbxd_1",
|
|
42
42
|
chevronIcon: $,
|
|
43
43
|
statusIcon: q,
|
|
44
44
|
panel: J,
|
|
45
45
|
content: K,
|
|
46
46
|
hasBackground: L,
|
|
47
47
|
header: O
|
|
48
|
-
},
|
|
48
|
+
}, ot = ({
|
|
49
49
|
title: o,
|
|
50
50
|
children: c,
|
|
51
51
|
className: s,
|
|
52
52
|
headingLevel: r = "h2",
|
|
53
53
|
type: e,
|
|
54
|
-
hasBackground:
|
|
55
|
-
size:
|
|
56
|
-
isContained:
|
|
57
|
-
iconAriaLabel:
|
|
58
|
-
...
|
|
54
|
+
hasBackground: l = !0,
|
|
55
|
+
size: h = "large",
|
|
56
|
+
isContained: u,
|
|
57
|
+
iconAriaLabel: p,
|
|
58
|
+
...x
|
|
59
59
|
}) => {
|
|
60
|
-
const
|
|
60
|
+
const _ = N(g), i = u ?? _?.isContained ?? !1, b = typeof o == "object";
|
|
61
61
|
return B(() => {
|
|
62
62
|
e && !i && console.warn(
|
|
63
63
|
"AccordionItem: When 'type' is set, it is recommended to also set 'isContained' to true for visual consistency."
|
|
64
64
|
);
|
|
65
|
-
}, [e, i]), /* @__PURE__ */
|
|
66
|
-
|
|
65
|
+
}, [e, i]), /* @__PURE__ */ m(
|
|
66
|
+
v,
|
|
67
67
|
{
|
|
68
|
-
...
|
|
69
|
-
className:
|
|
70
|
-
|
|
71
|
-
e &&
|
|
72
|
-
(
|
|
73
|
-
i &&
|
|
68
|
+
...x,
|
|
69
|
+
className: d(
|
|
70
|
+
t.item,
|
|
71
|
+
e && t[e],
|
|
72
|
+
(h === "medium" || _?.size === "medium") && t.medium,
|
|
73
|
+
i && t.contained,
|
|
74
74
|
s
|
|
75
75
|
),
|
|
76
76
|
children: [
|
|
77
|
-
/* @__PURE__ */
|
|
77
|
+
/* @__PURE__ */ n("div", { className: t.trigger, children: /* @__PURE__ */ m(
|
|
78
78
|
k,
|
|
79
79
|
{
|
|
80
|
-
className:
|
|
80
|
+
className: t.triggerButton,
|
|
81
81
|
slot: "trigger",
|
|
82
82
|
variant: "icon",
|
|
83
83
|
children: [
|
|
84
|
-
/* @__PURE__ */
|
|
84
|
+
/* @__PURE__ */ n(
|
|
85
85
|
T,
|
|
86
86
|
{
|
|
87
87
|
size: 20,
|
|
88
|
-
className:
|
|
88
|
+
className: t.chevronIcon
|
|
89
89
|
}
|
|
90
90
|
),
|
|
91
|
-
/* @__PURE__ */
|
|
91
|
+
/* @__PURE__ */ n("div", { className: t.triggerMainContent, children: b ? o : /* @__PURE__ */ n(
|
|
92
92
|
w,
|
|
93
93
|
{
|
|
94
94
|
level: 3,
|
|
95
95
|
elementType: r,
|
|
96
|
-
className:
|
|
96
|
+
className: t.triggerText,
|
|
97
97
|
children: o
|
|
98
98
|
}
|
|
99
99
|
) }),
|
|
100
|
-
e && /* @__PURE__ */
|
|
100
|
+
e && /* @__PURE__ */ n(
|
|
101
101
|
A,
|
|
102
102
|
{
|
|
103
|
-
"aria-label":
|
|
104
|
-
className:
|
|
103
|
+
"aria-label": p,
|
|
104
|
+
className: t.statusIcon,
|
|
105
105
|
status: e
|
|
106
106
|
}
|
|
107
107
|
)
|
|
108
108
|
]
|
|
109
109
|
}
|
|
110
110
|
) }),
|
|
111
|
-
/* @__PURE__ */
|
|
111
|
+
/* @__PURE__ */ n(C, { className: t.panel, children: /* @__PURE__ */ n(
|
|
112
112
|
"div",
|
|
113
113
|
{
|
|
114
|
-
className:
|
|
115
|
-
|
|
116
|
-
|
|
114
|
+
className: d(
|
|
115
|
+
t.content,
|
|
116
|
+
l && t.hasBackground
|
|
117
117
|
),
|
|
118
118
|
children: c
|
|
119
119
|
}
|
|
@@ -123,6 +123,6 @@ import '../assets/AccordionItem.css';const D = "_root_17bdp_1", M = "_contained_
|
|
|
123
123
|
);
|
|
124
124
|
};
|
|
125
125
|
export {
|
|
126
|
-
|
|
127
|
-
|
|
126
|
+
et as A,
|
|
127
|
+
ot as a
|
|
128
128
|
};
|
|
@@ -1,13 +1,9 @@
|
|
|
1
1
|
import { StoryObj } from '@storybook/react-vite';
|
|
2
|
-
import { optionsWithSections } from '
|
|
2
|
+
import { options, optionsWithSections } from '../../../../tools/test-utils/src/index.ts';
|
|
3
3
|
import { ComboBox } from './ComboBox';
|
|
4
4
|
type Item = (typeof options)[0];
|
|
5
5
|
type Section = (typeof optionsWithSections)[0];
|
|
6
6
|
type Story<T extends object = Item> = StoryObj<typeof ComboBox<T>>;
|
|
7
|
-
declare const options: {
|
|
8
|
-
id: number;
|
|
9
|
-
name: string;
|
|
10
|
-
}[];
|
|
11
7
|
declare const _default: {
|
|
12
8
|
component: typeof ComboBox;
|
|
13
9
|
title: string;
|
|
@@ -26,7 +22,7 @@ declare const _default: {
|
|
|
26
22
|
};
|
|
27
23
|
};
|
|
28
24
|
render: (args: import('./ComboBox').ComboBoxProps<{
|
|
29
|
-
id:
|
|
25
|
+
id: import('react-aria').Key;
|
|
30
26
|
name: string;
|
|
31
27
|
}>) => import("react/jsx-runtime").JSX.Element;
|
|
32
28
|
};
|
package/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { A as r, a as e } from "./chunks/AccordionItem-DnWNOVQg.js";
|
|
2
2
|
import { B as s, a as p } from "./chunks/BadgeContainer-CKVsfTlF.js";
|
|
3
3
|
import { B as m } from "./chunks/Breadcrumbs-By2bMbQd.js";
|
|
4
4
|
import { B as f } from "./chunks/Button-BYrLbzir.js";
|
package/package.json
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { StoryObj } from '@storybook/react-vite';
|
|
2
|
-
import { options, optionsWithSections } from '
|
|
2
|
+
import { options, optionsWithSections } from '../../../../tools/test-utils/src/index.ts';
|
|
3
|
+
import { Key } from 'react-aria-components';
|
|
3
4
|
import { Select, SelectionMode } from './Select';
|
|
4
5
|
type Story<T extends object = Item, M extends SelectionMode = 'single'> = StoryObj<typeof Select<T, M>>;
|
|
5
6
|
type Item = (typeof options)[0];
|
|
@@ -10,16 +11,16 @@ declare const _default: {
|
|
|
10
11
|
tags: string[];
|
|
11
12
|
args: {
|
|
12
13
|
children: (item: {
|
|
14
|
+
id: Key;
|
|
13
15
|
name: string;
|
|
14
|
-
id: string;
|
|
15
16
|
}) => import("react/jsx-runtime").JSX.Element;
|
|
16
17
|
description: string;
|
|
17
18
|
isDisabled: false;
|
|
18
19
|
isSelectableAll: false;
|
|
19
20
|
label: string;
|
|
20
21
|
items: {
|
|
22
|
+
id: Key;
|
|
21
23
|
name: string;
|
|
22
|
-
id: string;
|
|
23
24
|
}[];
|
|
24
25
|
placeholder: string;
|
|
25
26
|
selectionMode: "single";
|
package/combobox/utils.d.ts
DELETED
package/legacy-select/utils.d.ts
DELETED
package/utils/tests.d.ts
DELETED
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
export declare const options: {
|
|
2
|
-
name: string;
|
|
3
|
-
id: string;
|
|
4
|
-
}[];
|
|
5
|
-
export declare const mockedNow: import('@internationalized/date').CalendarDate;
|
|
6
|
-
export declare function generateMockOptions(count: number): {
|
|
7
|
-
id: number;
|
|
8
|
-
name: string;
|
|
9
|
-
}[];
|
|
10
|
-
export declare const optionsWithSections: {
|
|
11
|
-
name: string;
|
|
12
|
-
id: number;
|
|
13
|
-
children: {
|
|
14
|
-
name: string;
|
|
15
|
-
id: number;
|
|
16
|
-
}[];
|
|
17
|
-
}[];
|