@mattilsynet/design 3.1.3 → 3.1.5
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/mtds/atlas/atlas-element.js +1 -1
- package/mtds/fileupload/fileupload.stories.d.ts +1 -0
- package/mtds/index.iife.js +11 -11
- package/mtds/input/input.js +24 -30
- package/mtds/input/input.js.map +1 -1
- package/mtds/package.json.js +1 -1
- package/mtds/pagination/pagination.d.ts +7 -1
- package/mtds/pagination/pagination.js.map +1 -1
- package/mtds/pagination/pagination.stories.d.ts +4 -0
- package/mtds/styles.css +1 -1
- package/mtds/styles.json +23 -23
- package/mtds/styles.module.css.js +16 -16
- package/mtds/tailwind.css +1 -0
- package/mtds/tooltip/tooltip-element.js +7 -3
- package/mtds/tooltip/tooltip-element.js.map +1 -1
- package/mtds/validation/validation-observer.js +3 -2
- package/mtds/validation/validation-observer.js.map +1 -1
- package/package.json +12 -10
package/mtds/input/input.js
CHANGED
|
@@ -1,52 +1,46 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import
|
|
3
|
-
import { forwardRef as
|
|
1
|
+
import { jsx as n } from "react/jsx-runtime";
|
|
2
|
+
import s from "clsx";
|
|
3
|
+
import { forwardRef as a } from "react";
|
|
4
4
|
import o from "../styles.module.css.js";
|
|
5
|
-
const
|
|
6
|
-
|
|
7
|
-
return l(r, () => u.current), f(() => {
|
|
8
|
-
u.current?.dispatchEvent(new CustomEvent("ds-field-update")), t.value;
|
|
9
|
-
}, [t.value]), /* @__PURE__ */ s(
|
|
5
|
+
const l = a(function({ className: t, type: r = "text", ...e }, i) {
|
|
6
|
+
return /* @__PURE__ */ n(
|
|
10
7
|
"input",
|
|
11
8
|
{
|
|
12
|
-
className:
|
|
9
|
+
className: s(o.input, t),
|
|
13
10
|
suppressHydrationWarning: !0,
|
|
14
|
-
type:
|
|
15
|
-
ref:
|
|
16
|
-
...
|
|
11
|
+
type: r,
|
|
12
|
+
ref: i,
|
|
13
|
+
...e
|
|
17
14
|
}
|
|
18
15
|
);
|
|
19
|
-
}),
|
|
20
|
-
function({ className:
|
|
21
|
-
return /* @__PURE__ */
|
|
16
|
+
}), x = a(
|
|
17
|
+
function({ className: t, ...r }, e) {
|
|
18
|
+
return /* @__PURE__ */ n(
|
|
22
19
|
"select",
|
|
23
20
|
{
|
|
24
|
-
className:
|
|
21
|
+
className: s(o.input, t),
|
|
25
22
|
suppressHydrationWarning: !0,
|
|
26
|
-
ref:
|
|
27
|
-
...
|
|
23
|
+
ref: e,
|
|
24
|
+
...r
|
|
28
25
|
}
|
|
29
26
|
);
|
|
30
27
|
}
|
|
31
|
-
),
|
|
32
|
-
function({ className:
|
|
33
|
-
|
|
34
|
-
return l(t, () => r.current), f(() => {
|
|
35
|
-
r.current?.dispatchEvent(new CustomEvent("ds-field-update")), e.value;
|
|
36
|
-
}, [e.value]), /* @__PURE__ */ s(
|
|
28
|
+
), d = a(
|
|
29
|
+
function({ className: t, ...r }, e) {
|
|
30
|
+
return /* @__PURE__ */ n(
|
|
37
31
|
"textarea",
|
|
38
32
|
{
|
|
39
|
-
className:
|
|
40
|
-
ref:
|
|
33
|
+
className: s(o.input, t),
|
|
34
|
+
ref: e,
|
|
41
35
|
suppressHydrationWarning: !0,
|
|
42
|
-
...
|
|
36
|
+
...r
|
|
43
37
|
}
|
|
44
38
|
);
|
|
45
39
|
}
|
|
46
40
|
);
|
|
47
41
|
export {
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
42
|
+
l as Input,
|
|
43
|
+
x as Select,
|
|
44
|
+
d as Textarea
|
|
51
45
|
};
|
|
52
46
|
//# sourceMappingURL=input.js.map
|
package/mtds/input/input.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"input.js","sources":["../../designsystem/input/input.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { forwardRef
|
|
1
|
+
{"version":3,"file":"input.js","sources":["../../designsystem/input/input.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { forwardRef } from \"react\";\nimport styles from \"../styles.module.css\";\n\nexport type InputProps = React.ComponentPropsWithoutRef<\"input\">;\nexport const Input = forwardRef<HTMLInputElement, InputProps>(function Input(\n\t{ className, type = \"text\", ...rest },\n\tref,\n) {\n\treturn (\n\t\t<input\n\t\t\tclassName={clsx(styles.input, className)}\n\t\t\tsuppressHydrationWarning // Prevent hydration mismatch for SSR caused by field-observer.ts\n\t\t\ttype={type}\n\t\t\tref={ref}\n\t\t\t{...rest}\n\t\t/>\n\t);\n});\n\nexport type SelectProps = React.ComponentPropsWithoutRef<\"select\">;\nexport const Select = forwardRef<HTMLSelectElement, SelectProps>(\n\tfunction Select({ className, ...rest }, ref) {\n\t\treturn (\n\t\t\t<select\n\t\t\t\tclassName={clsx(styles.input, className)}\n\t\t\t\tsuppressHydrationWarning // Prevent hydration mismatch for SSR caused by field-observer.ts\n\t\t\t\tref={ref}\n\t\t\t\t{...rest}\n\t\t\t/>\n\t\t);\n\t},\n);\n\nexport type TextareaProps = React.ComponentPropsWithoutRef<\"textarea\">;\nexport const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(\n\tfunction Textarea({ className, ...rest }, ref) {\n\t\treturn (\n\t\t\t<textarea\n\t\t\t\tclassName={clsx(styles.input, className)}\n\t\t\t\tref={ref}\n\t\t\t\tsuppressHydrationWarning // Prevent hydration mismatch for SSR caused by field-observer.ts\n\t\t\t\t{...rest}\n\t\t\t/>\n\t\t);\n\t},\n);\n"],"names":["Input","forwardRef","className","type","rest","ref","jsx","clsx","styles","Select","Textarea"],"mappings":";;;;AAKO,MAAMA,IAAQC,EAAyC,SAC7D,EAAE,WAAAC,GAAW,MAAAC,IAAO,QAAQ,GAAGC,EAAA,GAC/BC,GACC;AACD,SACC,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACA,WAAWC,EAAKC,EAAO,OAAON,CAAS;AAAA,MACvC,0BAAwB;AAAA,MACxB,MAAAC;AAAA,MACA,KAAAE;AAAA,MACC,GAAGD;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC,GAGYK,IAASR;AAAA,EACrB,SAAgB,EAAE,WAAAC,GAAW,GAAGE,EAAA,GAAQC,GAAK;AAC5C,WACC,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QACA,WAAWC,EAAKC,EAAO,OAAON,CAAS;AAAA,QACvC,0BAAwB;AAAA,QACxB,KAAAG;AAAA,QACC,GAAGD;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACD,GAGaM,IAAWT;AAAA,EACvB,SAAkB,EAAE,WAAAC,GAAW,GAAGE,EAAA,GAAQC,GAAK;AAC9C,WACC,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QACA,WAAWC,EAAKC,EAAO,OAAON,CAAS;AAAA,QACvC,KAAAG;AAAA,QACA,0BAAwB;AAAA,QACvB,GAAGD;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACD;"}
|
package/mtds/package.json.js
CHANGED
|
@@ -1,7 +1,9 @@
|
|
|
1
1
|
import { DSPaginationElement } from '@digdir/designsystemet-web';
|
|
2
2
|
import { Button } from '../button/button';
|
|
3
3
|
import { CustomReactElementProps } from '../react-types';
|
|
4
|
-
export type PaginationProps = Omit<CustomReactElementProps<DSPaginationElement>, "children"> &
|
|
4
|
+
export type PaginationProps = Omit<CustomReactElementProps<DSPaginationElement>, "children"> & {
|
|
5
|
+
"data-variant"?: "primary" | "secondary";
|
|
6
|
+
} & ({
|
|
5
7
|
children?: never;
|
|
6
8
|
current: number;
|
|
7
9
|
show?: number;
|
|
@@ -18,6 +20,8 @@ export type PaginationProps = Omit<CustomReactElementProps<DSPaginationElement>,
|
|
|
18
20
|
props?: never;
|
|
19
21
|
});
|
|
20
22
|
export declare const Pagination: import('react').ForwardRefExoticComponent<(Omit<Omit<CustomReactElementProps<DSPaginationElement>, "children"> & {
|
|
23
|
+
"data-variant"?: "primary" | "secondary";
|
|
24
|
+
} & {
|
|
21
25
|
children?: never;
|
|
22
26
|
current: number;
|
|
23
27
|
show?: number;
|
|
@@ -27,6 +31,8 @@ export declare const Pagination: import('react').ForwardRefExoticComponent<(Omit
|
|
|
27
31
|
type: "prev" | "next" | "page";
|
|
28
32
|
}) => Parameters<typeof Button>[0];
|
|
29
33
|
}, "ref"> | Omit<Omit<CustomReactElementProps<DSPaginationElement>, "children"> & {
|
|
34
|
+
"data-variant"?: "primary" | "secondary";
|
|
35
|
+
} & {
|
|
30
36
|
children: React.ReactNode;
|
|
31
37
|
current?: never;
|
|
32
38
|
show?: never;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"pagination.js","sources":["../../designsystem/pagination/pagination.tsx"],"sourcesContent":["import type { DSPaginationElement } from \"@digdir/designsystemet-web\";\nimport { pagination } from \"@digdir/designsystemet-web\";\nimport { forwardRef } from \"react\";\nimport { Button } from \"../button/button\";\nimport type { CustomReactElementProps } from \"../react-types\";\nimport styles from \"../styles.module.css\";\nimport { toCustomElementProps } from \"../utils\";\n\nexport type PaginationProps = Omit<\n\tCustomReactElementProps<DSPaginationElement>,\n\t\"children\"\n>
|
|
1
|
+
{"version":3,"file":"pagination.js","sources":["../../designsystem/pagination/pagination.tsx"],"sourcesContent":["import type { DSPaginationElement } from \"@digdir/designsystemet-web\";\nimport { pagination } from \"@digdir/designsystemet-web\";\nimport { forwardRef } from \"react\";\nimport { Button } from \"../button/button\";\nimport type { CustomReactElementProps } from \"../react-types\";\nimport styles from \"../styles.module.css\";\nimport { toCustomElementProps } from \"../utils\";\n\nexport type PaginationProps = Omit<\n\tCustomReactElementProps<DSPaginationElement>,\n\t\"children\"\n> & {\n\t\"data-variant\"?: \"primary\" | \"secondary\";\n} & (\n\t\t| {\n\t\t\t\tchildren?: never;\n\t\t\t\tcurrent: number;\n\t\t\t\tshow?: number;\n\t\t\t\ttotal: number;\n\t\t\t\tprops: (props: {\n\t\t\t\t\tpage: number;\n\t\t\t\t\ttype: \"prev\" | \"next\" | \"page\";\n\t\t\t\t}) => Parameters<typeof Button>[0];\n\t\t }\n\t\t| {\n\t\t\t\tchildren: React.ReactNode;\n\t\t\t\tcurrent?: never;\n\t\t\t\tshow?: never;\n\t\t\t\ttotal?: never;\n\t\t\t\tprops?: never;\n\t\t }\n\t);\n\nexport const Pagination = forwardRef<DSPaginationElement, PaginationProps>(\n\tfunction Pagination(\n\t\t{ children, current, total, show = 7, props, ...rest },\n\t\tref,\n\t) {\n\t\tconst { pages, next, prev } = pagination({ current, total, show });\n\n\t\treturn (\n\t\t\t<ds-pagination\n\t\t\t\tref={ref}\n\t\t\t\t{...toCustomElementProps(rest, styles.pagination)}\n\t\t\t>\n\t\t\t\t{children || (\n\t\t\t\t\t<ul>\n\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\taria-disabled={!prev}\n\t\t\t\t\t\t\t\t{...props?.({ page: prev, type: \"prev\" })}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</li>\n\t\t\t\t\t\t{pages.map(({ key, page, current }) => (\n\t\t\t\t\t\t\t<li key={key}>\n\t\t\t\t\t\t\t\t{!!page && (\n\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\taria-current={current}\n\t\t\t\t\t\t\t\t\t\t{...{ children: page }}\n\t\t\t\t\t\t\t\t\t\t{...props?.({ page, type: \"page\" })}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t))}\n\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\taria-disabled={!next}\n\t\t\t\t\t\t\t\t{...props?.({ page: next, type: \"next\" })}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</li>\n\t\t\t\t\t</ul>\n\t\t\t\t)}\n\t\t\t</ds-pagination>\n\t\t);\n\t},\n);\n"],"names":["Pagination","forwardRef","children","current","total","show","props","rest","ref","pages","next","prev","pagination","jsx","toCustomElementProps","styles","Button","key","page"],"mappings":";;;;;;AAiCO,MAAMA,IAAaC;AAAA,EACzB,SACC,EAAE,UAAAC,GAAU,SAAAC,GAAS,OAAAC,GAAO,MAAAC,IAAO,GAAG,OAAAC,GAAO,GAAGC,EAAA,GAChDC,GACC;AACD,UAAM,EAAE,OAAAC,GAAO,MAAAC,GAAM,MAAAC,EAAA,IAASC,EAAW,EAAE,SAAAT,GAAS,OAAAC,GAAO,MAAAC,GAAM;AAEjE,WACC,gBAAAQ;AAAA,MAAC;AAAA,MAAA;AAAA,QACA,KAAAL;AAAA,QACC,GAAGM,EAAqBP,GAAMQ,EAAO,UAAU;AAAA,QAE/C,UAAAb,uBACC,MAAA,EACA,UAAA;AAAA,UAAA,gBAAAW,EAAC,MAAA,EACA,UAAA,gBAAAA;AAAA,YAACG;AAAA,YAAA;AAAA,cACA,iBAAe,CAACL;AAAA,cACf,GAAGL,IAAQ,EAAE,MAAMK,GAAM,MAAM,QAAQ;AAAA,YAAA;AAAA,UAAA,GAE1C;AAAA,UACCF,EAAM,IAAI,CAAC,EAAE,KAAAQ,GAAK,MAAAC,GAAM,SAAAf,QACxB,gBAAAU,EAAC,MAAA,EACC,UAAA,CAAC,CAACK,KACF,gBAAAL;AAAA,YAACG;AAAA,YAAA;AAAA,cACA,gBAAcb;AAAAA,cACR,UAAUe;AAAA,cACf,GAAGZ,IAAQ,EAAE,MAAAY,GAAM,MAAM,QAAQ;AAAA,YAAA;AAAA,UAAA,EACnC,GANOD,CAQT,CACA;AAAA,4BACA,MAAA,EACA,UAAA,gBAAAJ;AAAA,YAACG;AAAA,YAAA;AAAA,cACA,iBAAe,CAACN;AAAA,cACf,GAAGJ,IAAQ,EAAE,MAAMI,GAAM,MAAM,QAAQ;AAAA,YAAA;AAAA,UAAA,EACzC,CACD;AAAA,QAAA,EAAA,CACD;AAAA,MAAA;AAAA,IAAA;AAAA,EAIJ;AACD;"}
|
|
@@ -39,6 +39,9 @@ declare const meta: {
|
|
|
39
39
|
};
|
|
40
40
|
};
|
|
41
41
|
};
|
|
42
|
+
decorators: ((Story: import('storybook/internal/csf').PartialStoryFn<import('@storybook/react').ReactRenderer, {
|
|
43
|
+
[x: string]: any;
|
|
44
|
+
}>) => import("react/jsx-runtime").JSX.Element)[];
|
|
42
45
|
};
|
|
43
46
|
export default meta;
|
|
44
47
|
type Story = StoryObj<typeof meta>;
|
|
@@ -46,4 +49,5 @@ export declare const WithLinks: Story;
|
|
|
46
49
|
export declare const React: Story;
|
|
47
50
|
export declare const WithButtons: Story;
|
|
48
51
|
export declare const Sizes: Story;
|
|
52
|
+
export declare const Variants: Story;
|
|
49
53
|
export declare const WithHelper: Story;
|