@midas-ds/components 15.2.3 โ 15.2.4
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 +12 -0
- package/Skeleton-BaNR9AFS.js +88 -0
- package/Skeleton-BvfFN3Q4.cjs +1 -0
- package/assets/Skeleton.css +1 -1
- package/index.cjs +1 -1
- package/index.js +1 -1
- package/package.json +1 -1
- package/skeleton/Skeleton.d.ts +12 -2
- package/skeleton/index.cjs +1 -1
- package/skeleton/index.js +1 -1
- package/Skeleton-8onymGEG.cjs +0 -1
- package/Skeleton-BjTEGRpe.js +0 -35
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,15 @@
|
|
|
1
|
+
## 15.2.4 (2025-11-11)
|
|
2
|
+
|
|
3
|
+
### ๐ Features
|
|
4
|
+
|
|
5
|
+
- **skeleton:** tweak size/space to match textfield cmp ([6e2fce81f4](https://github.com/migrationsverket/midas/commit/6e2fce81f4))
|
|
6
|
+
- **skeleton:** use type `Size` for form variant ([4d4bf6424e](https://github.com/migrationsverket/midas/commit/4d4bf6424e))
|
|
7
|
+
- **skeleton:** add form variant ([f77655c09e](https://github.com/migrationsverket/midas/commit/f77655c09e))
|
|
8
|
+
|
|
9
|
+
### ๐งช Tests updated
|
|
10
|
+
|
|
11
|
+
- **skeleton:** fix test syntax and location for skeleton form tests ([86573b9647](https://github.com/migrationsverket/midas/commit/86573b9647))
|
|
12
|
+
|
|
1
13
|
## 15.2.3 (2025-11-11)
|
|
2
14
|
|
|
3
15
|
### ๐ฉน Fixes
|
|
@@ -0,0 +1,88 @@
|
|
|
1
|
+
import { jsxs as f, jsx as c } from "react/jsx-runtime";
|
|
2
|
+
import { c as r } from "./clsx-jbLnTBqA.js";
|
|
3
|
+
import './assets/Skeleton.css';const w = "_skeleton_wia11_11", p = "_circle_wia11_25", u = "_wave_wia11_30", v = "_onLayer01_wia11_54", d = "_form_wia11_58", k = "_formLabel_wia11_64", L = "_formDescription_wia11_70", y = "_formInput_wia11_76", b = "_medium_wia11_81", o = {
|
|
4
|
+
skeleton: w,
|
|
5
|
+
circle: p,
|
|
6
|
+
wave: u,
|
|
7
|
+
onLayer01: v,
|
|
8
|
+
form: d,
|
|
9
|
+
formLabel: k,
|
|
10
|
+
formDescription: L,
|
|
11
|
+
formInput: y,
|
|
12
|
+
medium: b
|
|
13
|
+
}, I = ({
|
|
14
|
+
variant: s = "rectangle",
|
|
15
|
+
width: t,
|
|
16
|
+
height: a,
|
|
17
|
+
size: _ = "large",
|
|
18
|
+
isAnimated: n = !0,
|
|
19
|
+
className: l,
|
|
20
|
+
style: i,
|
|
21
|
+
isOnLayer01: e,
|
|
22
|
+
...m
|
|
23
|
+
}) => (s === "circle" && a !== void 0 && console.warn(
|
|
24
|
+
"Height is not allowed when using circle, control size with width"
|
|
25
|
+
), s === "form" ? /* @__PURE__ */ f(
|
|
26
|
+
"div",
|
|
27
|
+
{
|
|
28
|
+
className: r(
|
|
29
|
+
o.form,
|
|
30
|
+
o[_],
|
|
31
|
+
e && o.onLayer01,
|
|
32
|
+
l
|
|
33
|
+
),
|
|
34
|
+
style: { width: t, ...i },
|
|
35
|
+
...m,
|
|
36
|
+
children: [
|
|
37
|
+
/* @__PURE__ */ c(
|
|
38
|
+
"div",
|
|
39
|
+
{
|
|
40
|
+
className: r(
|
|
41
|
+
o.skeleton,
|
|
42
|
+
o.formLabel,
|
|
43
|
+
n && o.wave,
|
|
44
|
+
e && o.onLayer01
|
|
45
|
+
)
|
|
46
|
+
}
|
|
47
|
+
),
|
|
48
|
+
/* @__PURE__ */ c(
|
|
49
|
+
"div",
|
|
50
|
+
{
|
|
51
|
+
className: r(
|
|
52
|
+
o.skeleton,
|
|
53
|
+
o.formDescription,
|
|
54
|
+
n && o.wave,
|
|
55
|
+
e && o.onLayer01
|
|
56
|
+
)
|
|
57
|
+
}
|
|
58
|
+
),
|
|
59
|
+
/* @__PURE__ */ c(
|
|
60
|
+
"div",
|
|
61
|
+
{
|
|
62
|
+
className: r(
|
|
63
|
+
o.skeleton,
|
|
64
|
+
o.formInput,
|
|
65
|
+
n && o.wave,
|
|
66
|
+
e && o.onLayer01
|
|
67
|
+
)
|
|
68
|
+
}
|
|
69
|
+
)
|
|
70
|
+
]
|
|
71
|
+
}
|
|
72
|
+
) : /* @__PURE__ */ c(
|
|
73
|
+
"div",
|
|
74
|
+
{
|
|
75
|
+
className: r(
|
|
76
|
+
o.skeleton,
|
|
77
|
+
o[s],
|
|
78
|
+
n && o.wave,
|
|
79
|
+
e && o.onLayer01,
|
|
80
|
+
l
|
|
81
|
+
),
|
|
82
|
+
style: { width: t, height: a, ...i },
|
|
83
|
+
...m
|
|
84
|
+
}
|
|
85
|
+
));
|
|
86
|
+
export {
|
|
87
|
+
I as S
|
|
88
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";require('./assets/Skeleton.css');const s=require("react/jsx-runtime"),c=require("./clsx-DKOfLqne.cjs"),w="_skeleton_wia11_11",f="_circle_wia11_25",u="_wave_wia11_30",x="_onLayer01_wia11_54",v="_form_wia11_58",k="_formLabel_wia11_64",d="_formDescription_wia11_70",p="_formInput_wia11_76",L="_medium_wia11_81",e={skeleton:w,circle:f,wave:u,onLayer01:x,form:v,formLabel:k,formDescription:d,formInput:p,medium:L},j=({variant:n="rectangle",width:l,height:t,size:m="large",isAnimated:r=!0,className:i,style:a,isOnLayer01:o,..._})=>(n==="circle"&&t!==void 0&&console.warn("Height is not allowed when using circle, control size with width"),n==="form"?s.jsxs("div",{className:c.clsx(e.form,e[m],o&&e.onLayer01,i),style:{width:l,...a},..._,children:[s.jsx("div",{className:c.clsx(e.skeleton,e.formLabel,r&&e.wave,o&&e.onLayer01)}),s.jsx("div",{className:c.clsx(e.skeleton,e.formDescription,r&&e.wave,o&&e.onLayer01)}),s.jsx("div",{className:c.clsx(e.skeleton,e.formInput,r&&e.wave,o&&e.onLayer01)})]}):s.jsx("div",{className:c.clsx(e.skeleton,e[n],r&&e.wave,o&&e.onLayer01,i),style:{width:l,height:t,...a},..._}));exports.Skeleton=j;
|
package/assets/Skeleton.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@keyframes
|
|
1
|
+
@keyframes _wave_wia11_30{0%{transform:translate(-100%)}to{transform:translate(100%)}}._skeleton_wia11_11{background:var(--midas-skeleton-01);display:inline-block;position:relative;overflow:hidden;min-height:1rem;width:100%;height:100%}@media (forced-colors: active){._skeleton_wia11_11{background-color:graytext}}._skeleton_wia11_11._circle_wia11_25{border-radius:50%;aspect-ratio:1 / 1}._skeleton_wia11_11._wave_wia11_30:after{content:"";position:absolute;top:0;left:0;width:200%;height:100%;opacity:.1;background:linear-gradient(90deg,transparent,var(--midas-background-inverse),transparent);animation:_wave_wia11_30 2s infinite ease-in-out}@media (prefers-reduced-motion){._skeleton_wia11_11._wave_wia11_30:after{display:none;animation:none}}._onLayer01_wia11_54{background-color:var(--midas-skeleton-02)}._form_wia11_58{display:flex;flex-direction:column;width:100%}._formLabel_wia11_64{height:var(--midas-size-90);width:40%;margin-bottom:var(--midas-spacing-20)}._formDescription_wia11_70{height:1.125rem;width:60%;margin-bottom:var(--midas-spacing-30)}._formInput_wia11_76{height:var(--midas-size-150);width:100%}._form_wia11_58._medium_wia11_81 ._formInput_wia11_76{height:var(--midas-size-130)}
|
package/index.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const d=require("./AccordionItem-C-gkv3jn.cjs"),l=require("./BadgeContainer-BZl6mSeb.cjs"),m=require("./Breadcrumbs-G8PykxwF.cjs"),I=require("./Button-CaPoPCq8.cjs"),D=require("./ButtonGroup-BpvDDECt.cjs"),g=require("./RangeCalendar-BNrmWgzG.cjs"),e=require("./Card-Du2Tzg4R.cjs"),k=require("./CharacterCounter-C8PalBAH.cjs"),P=require("./Checkbox-LGIr8OfT.cjs"),G=require("./CheckboxGroup-BdcEnLWf.cjs"),h=require("./ColorSchemeSwitch-AM8Xon5u.cjs"),u=require("./ComboBox-_fqwvHy1.cjs"),R=require("./DateField-CuEzECWT.cjs"),s=require("./DateInputDivider-DJN5KyLX.cjs"),T=require("./DateRangePicker-BleP75yR.cjs"),B=require("./Dropdown-C-2k1le5.cjs"),v=require("./FieldError-DwYQXCwP.cjs"),b=require("./FileUpload-DsTi9F39.cjs"),F=require("./Grid-B6G4PWn5.cjs"),M=require("./GridItem-BZ8eOXMB.cjs"),A=require("./Heading-DWSQCI4U.cjs"),$=require("./InfoBanner-BY-ATC3B.cjs"),w=require("./Label-DkNtFYv5.cjs"),t=require("./Layout-B6EeXI6A.cjs"),f=require("./Link-BPg_SBiF.cjs"),H=require("./LinkButton-zk257klG.cjs"),y=require("./Logo-YY9hQ8G3.cjs"),E=require("./Dialog-DOXrOfUr.cjs"),N=require("./Popover-DatBJsbE.cjs"),Q=require("./ProgressBar-DkpC1juo.cjs"),C=require("./Radio-BxWwVigT.cjs"),Z=require("./SearchField-o3f8qUIH.cjs"),j=require("./Select-C_NA-Rmt.cjs"),O=require("./Select-CsKzomrZ.cjs"),U=require("./Skeleton-
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const d=require("./AccordionItem-C-gkv3jn.cjs"),l=require("./BadgeContainer-BZl6mSeb.cjs"),m=require("./Breadcrumbs-G8PykxwF.cjs"),I=require("./Button-CaPoPCq8.cjs"),D=require("./ButtonGroup-BpvDDECt.cjs"),g=require("./RangeCalendar-BNrmWgzG.cjs"),e=require("./Card-Du2Tzg4R.cjs"),k=require("./CharacterCounter-C8PalBAH.cjs"),P=require("./Checkbox-LGIr8OfT.cjs"),G=require("./CheckboxGroup-BdcEnLWf.cjs"),h=require("./ColorSchemeSwitch-AM8Xon5u.cjs"),u=require("./ComboBox-_fqwvHy1.cjs"),R=require("./DateField-CuEzECWT.cjs"),s=require("./DateInputDivider-DJN5KyLX.cjs"),T=require("./DateRangePicker-BleP75yR.cjs"),B=require("./Dropdown-C-2k1le5.cjs"),v=require("./FieldError-DwYQXCwP.cjs"),b=require("./FileUpload-DsTi9F39.cjs"),F=require("./Grid-B6G4PWn5.cjs"),M=require("./GridItem-BZ8eOXMB.cjs"),A=require("./Heading-DWSQCI4U.cjs"),$=require("./InfoBanner-BY-ATC3B.cjs"),w=require("./Label-DkNtFYv5.cjs"),t=require("./Layout-B6EeXI6A.cjs"),f=require("./Link-BPg_SBiF.cjs"),H=require("./LinkButton-zk257klG.cjs"),y=require("./Logo-YY9hQ8G3.cjs"),E=require("./Dialog-DOXrOfUr.cjs"),N=require("./Popover-DatBJsbE.cjs"),Q=require("./ProgressBar-DkpC1juo.cjs"),C=require("./Radio-BxWwVigT.cjs"),Z=require("./SearchField-o3f8qUIH.cjs"),j=require("./Select-C_NA-Rmt.cjs"),O=require("./Select-CsKzomrZ.cjs"),U=require("./Skeleton-BvfFN3Q4.cjs"),z=require("./Spinner-Diy-6pvn.cjs"),o=require("./Table-BUdVtD4F.cjs"),a=require("./TabList-DPmDWfKk.cjs"),p=require("./Tag-Bd8ql_zX.cjs"),J=require("./Text-D29KP4_q.cjs"),n=require("./TextArea-DgsD2sOF.cjs"),r=require("./Toast-Ds5Fo6h5.cjs"),q=require("./ToggleButtonGroup-DWqPFJWL.cjs"),x=require("./Tooltip-CPn8DVh8.cjs"),K=require("./ListBox-BDEzuwgf.cjs"),L=require("./ListBoxLoadMoreItem-Bpp_Sab2.cjs"),c=require("./ListBoxSection-DcajcZMK.cjs"),i=require("./Separator-CYPstw7z.cjs"),V=require("./usePress-BQdBua-S.cjs"),S=require("./Dialog-XOUP-FA_.cjs");exports.Accordion=d.Accordion;exports.AccordionItem=d.AccordionItem;exports.Badge=l.Badge;exports.BadgeContainer=l.BadgeContainer;exports.Breadcrumbs=m.Breadcrumbs;exports.Button=I.Button;exports.ButtonGroup=D.ButtonGroup;exports.Calendar=g.Calendar;exports.RangeCalendar=g.RangeCalendar;exports.Card=e.Card;exports.CardActionArea=e.CardActionArea;exports.CardActions=e.CardActions;exports.CardContent=e.CardContent;exports.CardImage=e.CardImage;exports.CardLink=e.CardLink;exports.CardTitle=e.CardTitle;exports.CharacterCounter=k.CharacterCounter;exports.Checkbox=P.Checkbox;exports.CheckboxGroup=G.CheckboxGroup;exports.ColorSchemeSwitch=h.ColorSchemeSwitch;exports.ComboBox=u.ComboBox;exports.ComboBoxItem=u.ComboBoxItem;exports.ComboBoxSection=u.ComboBoxSection;exports.DateField=R.DateField;exports.DateInput=s.DateInput;exports.DateInputDivider=s.DateInputDivider;exports.DateSegment=s.DateSegment;exports.DatePicker=T.DatePicker;exports.DateRangePicker=T.DateRangePicker;exports.Dropdown=B.Dropdown;exports.DropdownItem=B.DropdownItem;exports.FieldError=v.FieldError;exports.DropZone=b.DropZone;exports.FileTrigger=b.FileTrigger;exports.Grid=F.Grid;exports.GridItem=M.GridItem;exports.Heading=A.Heading;exports.InfoBanner=$.InfoBanner;exports.Label=w.Label;exports.Header=t.Header;exports.Layout=t.Layout;exports.Navbar=t.Navbar;exports.Sidebar=t.Sidebar;exports.SidebarLink=t.SidebarLink;exports.Link=f.Link;exports.LinkButton=H.LinkButton;exports.Logo=y.Logo;exports.Modal=E.Modal;exports.Popover=N.Popover;exports.ProgressBar=Q.ProgressBar;exports.Radio=C.Radio;exports.RadioGroup=C.RadioGroup;exports.SearchField=Z.SearchField;exports.Select=j.Select;exports.LegacySelect=O.Select;exports.Skeleton=U.Skeleton;exports.Spinner=z.Spinner;exports.Cell=o.Cell;exports.Column=o.Column;exports.Row=o.Row;exports.Table=o.Table;exports.TableBody=o.TableBody;exports.TableHeader=o.TableHeader;exports.Tab=a.Tab;exports.TabList=a.TabList;exports.TabPanel=a.TabPanel;exports.Tabs=a.Tabs;exports.Tag=p.Tag;exports.TagGroup=p.TagGroup;exports.Text=J.Text;exports.Input=n.Input;exports.TextArea=n.TextArea;exports.TextField=n.TextField;exports.TextFieldBase=n.TextFieldBase;exports.GlobalToastRegion=r.GlobalToastRegion;exports.Toast=r.Toast;exports.ToastProvider=r.ToastProvider;exports.ToastRegion=r.ToastRegion;exports.toastQueue=r.toastQueue;exports.useToastState=r.useToastState;exports.ToggleButton=q.ToggleButton;exports.ToggleButtonGroup=q.ToggleButtonGroup;exports.Tooltip=x.Tooltip;exports.TooltipTrigger=x.TooltipTrigger;exports.ListBox=K.ListBox;exports.ListBoxButton=L.ListBoxButton;exports.ListBoxLoadMoreItem=L.ListBoxLoadMoreItem;exports.ListBoxHeader=c.ListBoxHeader;exports.ListBoxItem=c.ListBoxItem;exports.ListBoxPopover=c.ListBoxPopover;exports.ListBoxSection=c.ListBoxSection;exports.Menu=i.Menu;exports.MenuItem=i.MenuItem;exports.MenuPopover=i.MenuPopover;exports.MenuSection=i.MenuSection;exports.Separator=i.Separator;exports.RouterProvider=V.$ea8dcbcb9ea1b556$export$323e4fc2fa4753fb;exports.DialogTrigger=S.$de32f1b87079253c$export$2e1e1122cf0cba88;exports.MenuTrigger=S.$3674c52c6b3c5bce$export$27d2ad3c5815583e;
|
package/index.js
CHANGED
|
@@ -32,7 +32,7 @@ import { R as Mo, a as Fo } from "./Radio-BPNKJKOP.js";
|
|
|
32
32
|
import { S as Ao } from "./SearchField-DPfxzKjv.js";
|
|
33
33
|
import { S as Ho } from "./Select-L_SkM5rY.js";
|
|
34
34
|
import { S as yo } from "./Select-CBDKZpHJ.js";
|
|
35
|
-
import { S as $o } from "./Skeleton-
|
|
35
|
+
import { S as $o } from "./Skeleton-BaNR9AFS.js";
|
|
36
36
|
import { S as Qo } from "./Spinner-BY-ql54i.js";
|
|
37
37
|
import { b as jo, C as qo, R as zo, T as Jo, c as Ko, a as Oo } from "./Table-CbogM0Ti.js";
|
|
38
38
|
import { a as Vo, c as Wo, b as Xo, T as Yo } from "./TabList-B3171e0b.js";
|
package/package.json
CHANGED
package/skeleton/Skeleton.d.ts
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { Size } from '../common/types';
|
|
1
2
|
import * as React from 'react';
|
|
2
3
|
export interface SkeletonProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
|
|
3
4
|
/**
|
|
@@ -9,9 +10,18 @@ export interface SkeletonProps extends React.DetailedHTMLProps<React.HTMLAttribu
|
|
|
9
10
|
*/
|
|
10
11
|
height?: React.CSSProperties['height'];
|
|
11
12
|
/**
|
|
12
|
-
* Circular
|
|
13
|
+
* Circular, rectangular, or form field Skeleton component.
|
|
14
|
+
* - When using `circle`, only `width` is allowed to control size.
|
|
15
|
+
* - When using `form`, displays label, description, and input field skeletons. The `size` prop controls the input field height.
|
|
13
16
|
*/
|
|
14
|
-
variant?: 'circle' | 'rectangle';
|
|
17
|
+
variant?: 'circle' | 'rectangle' | 'form';
|
|
18
|
+
/**
|
|
19
|
+
* Size of the form input field skeleton. Only applies when `variant='form'`.
|
|
20
|
+
* - `medium`: 40px height
|
|
21
|
+
* - `large`: 48px height
|
|
22
|
+
* @default 'large'
|
|
23
|
+
*/
|
|
24
|
+
size?: Size;
|
|
15
25
|
/**
|
|
16
26
|
* Displays the skeleton component with a wave animation
|
|
17
27
|
* @default true
|
package/skeleton/index.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../Skeleton-
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../Skeleton-BvfFN3Q4.cjs");exports.Skeleton=e.Skeleton;
|
package/skeleton/index.js
CHANGED
package/Skeleton-8onymGEG.cjs
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
"use strict";require('./assets/Skeleton.css');const _=require("react/jsx-runtime"),a=require("./clsx-DKOfLqne.cjs"),w="_skeleton_og9n9_11",u="_circle_og9n9_25",g="_wave_og9n9_30",k="_onLayer01_og9n9_54",e={skeleton:w,circle:u,wave:g,onLayer01:k},y=({variant:n="rectangle",width:s,height:o,isAnimated:c=!0,className:t,style:l,isOnLayer01:r,...i})=>(n==="circle"&&o!==void 0&&console.warn("Height is not allowed when using circle, control size with width"),_.jsx("div",{className:a.clsx(e.skeleton,e[n],c&&e.wave,r&&e.onLayer01,t),style:{width:s,height:o,...l},...i}));exports.Skeleton=y;
|
package/Skeleton-BjTEGRpe.js
DELETED
|
@@ -1,35 +0,0 @@
|
|
|
1
|
-
import { jsx as a } from "react/jsx-runtime";
|
|
2
|
-
import { c as _ } from "./clsx-jbLnTBqA.js";
|
|
3
|
-
import './assets/Skeleton.css';const w = "_skeleton_og9n9_11", g = "_circle_og9n9_25", y = "_wave_og9n9_30", k = "_onLayer01_og9n9_54", e = {
|
|
4
|
-
skeleton: w,
|
|
5
|
-
circle: g,
|
|
6
|
-
wave: y,
|
|
7
|
-
onLayer01: k
|
|
8
|
-
}, d = ({
|
|
9
|
-
variant: o = "rectangle",
|
|
10
|
-
width: s,
|
|
11
|
-
height: n,
|
|
12
|
-
isAnimated: c = !0,
|
|
13
|
-
className: t,
|
|
14
|
-
style: l,
|
|
15
|
-
isOnLayer01: r,
|
|
16
|
-
...i
|
|
17
|
-
}) => (o === "circle" && n !== void 0 && console.warn(
|
|
18
|
-
"Height is not allowed when using circle, control size with width"
|
|
19
|
-
), /* @__PURE__ */ a(
|
|
20
|
-
"div",
|
|
21
|
-
{
|
|
22
|
-
className: _(
|
|
23
|
-
e.skeleton,
|
|
24
|
-
e[o],
|
|
25
|
-
c && e.wave,
|
|
26
|
-
r && e.onLayer01,
|
|
27
|
-
t
|
|
28
|
-
),
|
|
29
|
-
style: { width: s, height: n, ...l },
|
|
30
|
-
...i
|
|
31
|
-
}
|
|
32
|
-
));
|
|
33
|
-
export {
|
|
34
|
-
d as S
|
|
35
|
-
};
|