@mittwald/flow-react-components 1.3.5 → 1.3.6
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/dist/assets/component-index.json +1 -1
- package/dist/assets/doc-properties.json +1 -1
- package/dist/css/all-layered.css +1 -1
- package/dist/css/all.css +1 -1
- package/dist/js/packages/components/src/components/Heading/Heading.mjs +12 -3
- package/dist/js/packages/components/src/components/Heading/Heading.mjs.map +1 -1
- package/dist/js/packages/components/src/components/Heading/Heading.module.mjs +5 -1
- package/dist/js/packages/components/src/components/Heading/Heading.module.mjs.map +1 -1
- package/dist/js/packages/components/src/components/Label/Label.mjs +33 -25
- package/dist/js/packages/components/src/components/Label/Label.mjs.map +1 -1
- package/dist/js/packages/components/src/components/Label/Label.module.mjs +4 -2
- package/dist/js/packages/components/src/components/Label/Label.module.mjs.map +1 -1
- package/dist/js/packages/components/src/components/List/components/ListItemView/ListItemView.module.mjs.map +1 -1
- package/dist/js/packages/components/src/components/Modal/Modal.module.mjs.map +1 -1
- package/package.json +9 -9
|
@@ -6,6 +6,7 @@ import { UiComponentTunnelExit } from "../UiComponentTunnel/UiComponentTunnelExi
|
|
|
6
6
|
import { styleClassname } from "../../lib/scss/selectors.mjs";
|
|
7
7
|
import Heading_module_default from "./Heading.module.mjs";
|
|
8
8
|
import clsx from "clsx";
|
|
9
|
+
import { Children } from "react";
|
|
9
10
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
10
11
|
import * as Aria from "react-aria-components";
|
|
11
12
|
//#region src/components/Heading/Heading.tsx
|
|
@@ -69,14 +70,22 @@ var Heading = flowComponent("Heading", (props) => {
|
|
|
69
70
|
...rest,
|
|
70
71
|
ref,
|
|
71
72
|
level,
|
|
72
|
-
children: [/* @__PURE__ */
|
|
73
|
+
children: [/* @__PURE__ */ jsxs("span", {
|
|
73
74
|
className: Heading_module_default.headingText,
|
|
74
|
-
children
|
|
75
|
+
children: [children, /* @__PURE__ */ jsx(UiComponentTunnelExit, {
|
|
76
|
+
id: "headingContent",
|
|
77
|
+
component: "Heading",
|
|
78
|
+
children: (items) => Children.count(items) > 0 && /* @__PURE__ */ jsx("span", { className: Heading_module_default.headingTextSpacer })
|
|
79
|
+
})]
|
|
75
80
|
}), /* @__PURE__ */ jsx("span", {
|
|
76
81
|
className: Heading_module_default.headingContent,
|
|
77
82
|
children: /* @__PURE__ */ jsx(UiComponentTunnelExit, {
|
|
78
83
|
id: "headingContent",
|
|
79
|
-
component: "Heading"
|
|
84
|
+
component: "Heading",
|
|
85
|
+
children: (items) => Children.map(items, (item) => /* @__PURE__ */ jsx("span", {
|
|
86
|
+
className: Heading_module_default.headingContentItem,
|
|
87
|
+
children: item
|
|
88
|
+
}))
|
|
80
89
|
})
|
|
81
90
|
})]
|
|
82
91
|
})
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Heading.mjs","names":[],"sources":["../../../../../../../src/components/Heading/Heading.tsx"],"sourcesContent":["import type { AlphaColor, PropsWithElementType } from \"@/lib/types/props\";\nimport styles from \"./Heading.module.scss\";\nimport { styleClassname } from \"@/lib/scss/selectors\";\nimport clsx from \"clsx\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport * as Aria from \"react-aria-components\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\n\nexport interface HeadingProps\n extends\n Aria.HeadingProps,\n FlowComponentProps,\n PropsWithElementType<\"span\" | \"p\"> {\n /** The font size of the heading. */\n size?: \"xs\" | \"s\" | \"m\" | \"l\" | \"xl\" | \"xxl\";\n /** The color of the heading. @default \"default\" */\n color?: \"default\" | \"danger\" | \"unavailable\" | AlphaColor;\n /** The text-wrap property of the text. @default undefined */\n wrap?: \"wrap\" | \"balance\";\n}\n\n/**\n * The font size each heading level renders at — the TypeScript half of the\n * level-based `--font-size` rules in Heading.module.scss. Levels 4 to 6 fall\n * through to the `xs` default.\n */\nconst sizeByLevel: Record<number, NonNullable<HeadingProps[\"size\"]>> = {\n 1: \"xl\",\n 2: \"m\",\n 3: \"s\",\n};\n\n/** @flr-generate all */\nexport const Heading = flowComponent(\"Heading\", (props) => {\n const {\n children,\n className,\n level = 2,\n color = \"default\",\n wrap,\n size,\n ref,\n elementType,\n ...rest\n } = props;\n\n const rootClassName = clsx(\n styles.heading,\n size && styles[`size-${size}`],\n color !== \"default\" && styles[color],\n wrap && styles[`wrap-${wrap}`],\n // The level class carries the font size. Emitted for every heading — not\n // just the `elementType` ones — so the stylesheet can select on the class\n // instead of the h1–h6 element react-aria renders without one.\n styleClassname(styles, `h${level}`),\n className,\n );\n\n const Element = elementType ?? Aria.Heading;\n\n const effectiveSize = size ?? sizeByLevel[level] ?? \"xs\";\n const buttonSize =\n effectiveSize === \"xl\" || effectiveSize === \"xxl\" ? \"m\" : \"s\";\n\n const propsContext: PropsContext = {\n Icon: {\n \"aria-hidden\": true,\n className: styles.icon,\n },\n AlertBadge: {\n tunnel: {\n id: \"headingContent\",\n component: \"Heading\",\n },\n },\n Badge: {\n tunnel: {\n id: \"headingContent\",\n component: \"Heading\",\n },\n },\n Button: {\n tunnel: {\n id: \"headingContent\",\n component: \"Heading\",\n },\n size: buttonSize,\n },\n CopyButton: {\n tunnel: {\n id: \"headingContent\",\n component: \"Heading\",\n },\n size: buttonSize,\n },\n ContextualHelpTrigger: {\n tunnel: {\n id: \"headingContent\",\n component: \"Heading\",\n },\n Button: {\n tunnel: null,\n },\n },\n AlertText: {\n Icon: {\n className: styles.icon,\n },\n },\n };\n\n return (\n <PropsContextProvider props={propsContext}>\n <Element className={rootClassName} {...rest} ref={ref} level={level}>\n <span className={styles.headingText}
|
|
1
|
+
{"version":3,"file":"Heading.mjs","names":[],"sources":["../../../../../../../src/components/Heading/Heading.tsx"],"sourcesContent":["import type { AlphaColor, PropsWithElementType } from \"@/lib/types/props\";\nimport styles from \"./Heading.module.scss\";\nimport { styleClassname } from \"@/lib/scss/selectors\";\nimport clsx from \"clsx\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport * as Aria from \"react-aria-components\";\nimport { Children } from \"react\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\n\nexport interface HeadingProps\n extends\n Aria.HeadingProps,\n FlowComponentProps,\n PropsWithElementType<\"span\" | \"p\"> {\n /** The font size of the heading. */\n size?: \"xs\" | \"s\" | \"m\" | \"l\" | \"xl\" | \"xxl\";\n /** The color of the heading. @default \"default\" */\n color?: \"default\" | \"danger\" | \"unavailable\" | AlphaColor;\n /** The text-wrap property of the text. @default undefined */\n wrap?: \"wrap\" | \"balance\";\n}\n\n/**\n * The font size each heading level renders at — the TypeScript half of the\n * level-based `--font-size` rules in Heading.module.scss. Levels 4 to 6 fall\n * through to the `xs` default.\n */\nconst sizeByLevel: Record<number, NonNullable<HeadingProps[\"size\"]>> = {\n 1: \"xl\",\n 2: \"m\",\n 3: \"s\",\n};\n\n/** @flr-generate all */\nexport const Heading = flowComponent(\"Heading\", (props) => {\n const {\n children,\n className,\n level = 2,\n color = \"default\",\n wrap,\n size,\n ref,\n elementType,\n ...rest\n } = props;\n\n const rootClassName = clsx(\n styles.heading,\n size && styles[`size-${size}`],\n color !== \"default\" && styles[color],\n wrap && styles[`wrap-${wrap}`],\n // The level class carries the font size. Emitted for every heading — not\n // just the `elementType` ones — so the stylesheet can select on the class\n // instead of the h1–h6 element react-aria renders without one.\n styleClassname(styles, `h${level}`),\n className,\n );\n\n const Element = elementType ?? Aria.Heading;\n\n const effectiveSize = size ?? sizeByLevel[level] ?? \"xs\";\n const buttonSize =\n effectiveSize === \"xl\" || effectiveSize === \"xxl\" ? \"m\" : \"s\";\n\n const propsContext: PropsContext = {\n Icon: {\n \"aria-hidden\": true,\n className: styles.icon,\n },\n AlertBadge: {\n tunnel: {\n id: \"headingContent\",\n component: \"Heading\",\n },\n },\n Badge: {\n tunnel: {\n id: \"headingContent\",\n component: \"Heading\",\n },\n },\n Button: {\n tunnel: {\n id: \"headingContent\",\n component: \"Heading\",\n },\n size: buttonSize,\n },\n CopyButton: {\n tunnel: {\n id: \"headingContent\",\n component: \"Heading\",\n },\n size: buttonSize,\n },\n ContextualHelpTrigger: {\n tunnel: {\n id: \"headingContent\",\n component: \"Heading\",\n },\n Button: {\n tunnel: null,\n },\n },\n AlertText: {\n Icon: {\n className: styles.icon,\n },\n },\n };\n\n return (\n <PropsContextProvider props={propsContext}>\n <Element className={rootClassName} {...rest} ref={ref} level={level}>\n <span className={styles.headingText}>\n {children}\n <UiComponentTunnelExit id=\"headingContent\" component=\"Heading\">\n {(items) =>\n Children.count(items) > 0 && (\n <span className={styles.headingTextSpacer} />\n )\n }\n </UiComponentTunnelExit>\n </span>\n <span className={styles.headingContent}>\n <UiComponentTunnelExit id=\"headingContent\" component=\"Heading\">\n {(items) =>\n Children.map(items, (item) => (\n <span className={styles.headingContentItem}>{item}</span>\n ))\n }\n </UiComponentTunnelExit>\n </span>\n </Element>\n </PropsContextProvider>\n );\n});\n\nexport default Heading;\n"],"mappings":";;;;;;;;;;;;;;;;;AA8BA,IAAM,cAAiE;CACrE,GAAG;CACH,GAAG;CACH,GAAG;AACL;;AAGA,IAAa,UAAU,cAAc,YAAY,UAAU;CACzD,MAAM,EACJ,UACA,WACA,QAAQ,GACR,QAAQ,WACR,MACA,MACA,KACA,aACA,GAAG,SACD;CAEJ,MAAM,gBAAgB,KACpB,uBAAO,SACP,QAAQ,uBAAO,QAAQ,SACvB,UAAU,aAAa,uBAAO,QAC9B,QAAQ,uBAAO,QAAQ,SAIvB,eAAe,wBAAQ,IAAI,OAAO,GAClC,SACF;CAEA,MAAM,UAAU,eAAe,KAAK;CAEpC,MAAM,gBAAgB,QAAQ,YAAY,UAAU;CACpD,MAAM,aACJ,kBAAkB,QAAQ,kBAAkB,QAAQ,MAAM;CAE5D,MAAM,eAA6B;EACjC,MAAM;GACJ,eAAe;GACf,WAAW,uBAAO;EACpB;EACA,YAAY,EACV,QAAQ;GACN,IAAI;GACJ,WAAW;EACb,EACF;EACA,OAAO,EACL,QAAQ;GACN,IAAI;GACJ,WAAW;EACb,EACF;EACA,QAAQ;GACN,QAAQ;IACN,IAAI;IACJ,WAAW;GACb;GACA,MAAM;EACR;EACA,YAAY;GACV,QAAQ;IACN,IAAI;IACJ,WAAW;GACb;GACA,MAAM;EACR;EACA,uBAAuB;GACrB,QAAQ;IACN,IAAI;IACJ,WAAW;GACb;GACA,QAAQ,EACN,QAAQ,KACV;EACF;EACA,WAAW,EACT,MAAM,EACJ,WAAW,uBAAO,KACpB,EACF;CACF;CAEA,OACE,oBAAC,sBAAD;EAAsB,OAAO;EAC3B,UAAA,qBAAC,SAAD;GAAS,WAAW;GAAe,GAAI;GAAW;GAAY;GAA9D,UAAA,CACE,qBAAC,QAAD;IAAM,WAAW,uBAAO;IAAxB,UAAA,CACG,UACD,oBAAC,uBAAD;KAAuB,IAAG;KAAiB,WAAU;KACjD,WAAA,UACA,SAAS,MAAM,KAAK,IAAI,KACtB,oBAAC,QAAD,EAAM,WAAW,uBAAO,kBAAoB,CAAA;IAG3B,CAAA,CACnB;GACN,CAAA,GAAA,oBAAC,QAAD;IAAM,WAAW,uBAAO;IACtB,UAAA,oBAAC,uBAAD;KAAuB,IAAG;KAAiB,WAAU;KACjD,WAAA,UACA,SAAS,IAAI,QAAQ,SACnB,oBAAC,QAAD;MAAM,WAAW,uBAAO;MAAqB,UAAA;KAAW,CAAA,CACzD;IAEkB,CAAA;GACnB,CAAA,CACC;;CACW,CAAA;AAE1B,CAAC"}
|
|
@@ -9,6 +9,8 @@ var light = "flow--heading--light";
|
|
|
9
9
|
var headingText = "flow--heading--heading-text";
|
|
10
10
|
var icon = "flow--heading--icon";
|
|
11
11
|
var headingContent = "flow--heading--heading-content";
|
|
12
|
+
var headingTextSpacer = "flow--heading--heading-text-spacer";
|
|
13
|
+
var headingContentItem = "flow--heading--heading-content-item";
|
|
12
14
|
var h1 = "flow--heading--h1";
|
|
13
15
|
var h2 = "flow--heading--h2";
|
|
14
16
|
var h3 = "flow--heading--h3";
|
|
@@ -26,6 +28,8 @@ var Heading_module_default = {
|
|
|
26
28
|
headingText,
|
|
27
29
|
icon,
|
|
28
30
|
headingContent,
|
|
31
|
+
headingTextSpacer,
|
|
32
|
+
headingContentItem,
|
|
29
33
|
h1,
|
|
30
34
|
h2,
|
|
31
35
|
h3,
|
|
@@ -42,6 +46,6 @@ var Heading_module_default = {
|
|
|
42
46
|
"wrap-balance": "flow--heading--wrap-balance"
|
|
43
47
|
};
|
|
44
48
|
//#endregion
|
|
45
|
-
export { danger, dark, Heading_module_default as default, h1, h2, h3, h4, h5, h6, heading, headingContent, headingText, icon, light, unavailable };
|
|
49
|
+
export { danger, dark, Heading_module_default as default, h1, h2, h3, h4, h5, h6, heading, headingContent, headingContentItem, headingText, headingTextSpacer, icon, light, unavailable };
|
|
46
50
|
|
|
47
51
|
//# sourceMappingURL=Heading.module.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Heading.module.mjs","names":[],"sources":["../../../../../../../src/components/Heading/Heading.module.scss"],"sourcesContent":[".heading {\n color: var(--heading--color);\n font-size: var(--font-size);\n font-weight: var(--heading--font-weight);\n text-wrap-style: pretty;\n\n --heading-line-height: calc(var(--font-size) * var(--line-height));\n\n @mixin color($color) {\n &.#{$color} {\n color: var(--heading--color-#{$color});\n }\n }\n\n @include color(\"danger\");\n @include color(\"unavailable\");\n @include color(\"dark\");\n @include color(\"light\");\n @include color(\"dark-static\");\n @include color(\"light-static\");\n\n .headingText {\n .icon {\n height: var(--heading-line-height);\n width: var(--heading-line-height);\n vertical-align: bottom;\n display: inline-block;\n margin-inline-end: var(--heading--icon-to-text-spacing);\n }\n }\n\n .headingContent {\n
|
|
1
|
+
{"version":3,"file":"Heading.module.mjs","names":[],"sources":["../../../../../../../src/components/Heading/Heading.module.scss"],"sourcesContent":[".heading {\n color: var(--heading--color);\n font-size: var(--font-size);\n font-weight: var(--heading--font-weight);\n text-wrap-style: pretty;\n\n --heading-line-height: calc(var(--font-size) * var(--line-height));\n\n @mixin color($color) {\n &.#{$color} {\n color: var(--heading--color-#{$color});\n }\n }\n\n @include color(\"danger\");\n @include color(\"unavailable\");\n @include color(\"dark\");\n @include color(\"light\");\n @include color(\"dark-static\");\n @include color(\"light-static\");\n\n .headingText {\n .icon {\n height: var(--heading-line-height);\n width: var(--heading-line-height);\n vertical-align: bottom;\n display: inline-block;\n margin-inline-end: var(--heading--icon-to-text-spacing);\n }\n }\n\n .headingContent {\n &:empty {\n display: none;\n }\n }\n\n .headingTextSpacer {\n margin-inline-end: var(--heading--icon-to-text-spacing);\n }\n\n .headingContentItem {\n vertical-align: bottom;\n display: inline-flex;\n max-width: 100%;\n min-height: var(--heading-line-height);\n align-items: center;\n\n &:not(:last-child) {\n margin-inline-end: var(--heading--icon-to-text-spacing);\n }\n }\n\n &:where(.h1) {\n --font-size: var(--font-size-heading--xl);\n }\n\n &:where(.h2) {\n --font-size: var(--font-size-heading--m);\n }\n\n &:where(.h3) {\n --font-size: var(--font-size-heading--s);\n }\n\n &:where(.h4),\n &:where(.h5),\n &:where(.h6) {\n --font-size: var(--font-size-heading--xs);\n }\n\n @mixin size($size) {\n &.size-#{$size} {\n --font-size: var(--font-size-heading--#{$size});\n }\n }\n\n @include size(\"xs\");\n @include size(\"s\");\n @include size(\"m\");\n @include size(\"l\");\n @include size(\"xl\");\n @include size(\"xxl\");\n\n &:where(.wrap-wrap) {\n text-wrap: wrap;\n }\n\n &:where(.wrap-balance) {\n text-wrap: balance;\n }\n}\n\n@media (max-width: 768px) {\n .heading {\n &:where(.h1),\n &.size-xl {\n --font-size: var(--font-size-heading--l);\n }\n\n &.size-l {\n --font-size: var(--font-size-heading--m);\n }\n\n &:where(.h2),\n &.size-m {\n --font-size: var(--font-size-heading--s);\n }\n\n &:where(.h3),\n &.size-s {\n --font-size: var(--font-size-heading--xs);\n }\n }\n}\n"],"mappings":""}
|
|
@@ -15,6 +15,8 @@ import * as Aria from "react-aria-components";
|
|
|
15
15
|
/** @flr-generate all */
|
|
16
16
|
var Label = flowComponent("Label", (props) => {
|
|
17
17
|
const { children, className, optional, isDisabled, ref, unstyled = false, ...rest } = props;
|
|
18
|
+
const [labelProps, labelRef] = Aria.useContextProps(rest, ref, Aria.LabelContext);
|
|
19
|
+
const { id, ...rootProps } = labelProps;
|
|
18
20
|
const stringFormatter = useLocalizedStringFormatter(__locale_default, "Label");
|
|
19
21
|
const rootClassName = unstyled ? className : clsx(Label_module_default.label, isDisabled && Label_module_default.disabled, className);
|
|
20
22
|
const optionalMarker = /* @__PURE__ */ jsx("span", {
|
|
@@ -42,31 +44,37 @@ var Label = flowComponent("Label", (props) => {
|
|
|
42
44
|
};
|
|
43
45
|
return /* @__PURE__ */ jsx(PropsContextProvider, {
|
|
44
46
|
props: propsContext,
|
|
45
|
-
children: /* @__PURE__ */
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
47
|
+
children: /* @__PURE__ */ jsx(Aria.LabelContext.Provider, {
|
|
48
|
+
value: null,
|
|
49
|
+
children: /* @__PURE__ */ jsxs(Aria.Label, {
|
|
50
|
+
...rootProps,
|
|
51
|
+
className: rootClassName,
|
|
52
|
+
ref: labelRef,
|
|
53
|
+
children: [
|
|
54
|
+
/* @__PURE__ */ jsxs("span", {
|
|
55
|
+
id,
|
|
56
|
+
className: Label_module_default.text,
|
|
57
|
+
children: [children, optional && optionalMarker]
|
|
58
|
+
}),
|
|
59
|
+
/* @__PURE__ */ jsx(UiComponentTunnelExit, {
|
|
60
|
+
id: "contextualHelp",
|
|
61
|
+
component: "Label",
|
|
62
|
+
children: (children) => {
|
|
63
|
+
if (React.Children.count(children) >= 1) return children;
|
|
64
|
+
}
|
|
65
|
+
}),
|
|
66
|
+
/* @__PURE__ */ jsx(UiComponentTunnelExit, {
|
|
67
|
+
id: "right",
|
|
68
|
+
component: "Label",
|
|
69
|
+
children: (children) => {
|
|
70
|
+
if (React.Children.count(children) >= 1) return /* @__PURE__ */ jsx("div", {
|
|
71
|
+
className: Label_module_default.right,
|
|
72
|
+
children
|
|
73
|
+
});
|
|
74
|
+
}
|
|
75
|
+
})
|
|
76
|
+
]
|
|
77
|
+
})
|
|
70
78
|
})
|
|
71
79
|
});
|
|
72
80
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Label.mjs","names":[],"sources":["../../../../../../../src/components/Label/Label.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport React from \"react\";\nimport styles from \"./Label.module.scss\";\nimport * as Aria from \"react-aria-components\";\nimport clsx from \"clsx\";\nimport {\n overlayTriggersTunneledTo,\n type PropsContext,\n PropsContextProvider,\n} from \"@/lib/propsContext\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\nimport locales from \"./locales/*.locale.json\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\n\nexport interface LabelProps\n extends\n PropsWithChildren<Omit<Aria.LabelProps, \"children\">>,\n FlowComponentProps<HTMLLabelElement> {\n /** Whether the label should show an \"optional\" indicator. */\n optional?: boolean;\n /** Whether the label should be displayed as disabled. */\n isDisabled?: boolean;\n /** @internal */\n unstyled?: boolean;\n}\n\n/** @flr-generate all */\nexport const Label = flowComponent(\"Label\", (props) => {\n const {\n children,\n className,\n optional,\n isDisabled,\n ref,\n unstyled = false,\n ...rest\n } = props;\n\n const stringFormatter = useLocalizedStringFormatter(locales, \"Label\");\n\n const rootClassName = unstyled\n ? className\n : clsx(styles.label, isDisabled && styles.disabled, className);\n\n const optionalMarker = (\n <span className={styles.optional}>\n {stringFormatter.format(\"optional\")}\n </span>\n );\n\n const rightTunnel = {\n id: \"right\",\n component: \"Label\",\n } as const;\n\n const propsContext: PropsContext = {\n ...overlayTriggersTunneledTo(rightTunnel),\n // The contextual help sits next to the label text, not with the actions.\n ContextualHelpTrigger: {\n tunnel: {\n id: \"contextualHelp\",\n component: \"Label\",\n },\n },\n Button: {\n tunnel: rightTunnel,\n size: \"s\",\n },\n Action: {\n tunnel: rightTunnel,\n Button: {\n tunnel: null,\n },\n },\n };\n\n return (\n <PropsContextProvider props={propsContext}>\n <Aria.Label {...
|
|
1
|
+
{"version":3,"file":"Label.mjs","names":[],"sources":["../../../../../../../src/components/Label/Label.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport React from \"react\";\nimport styles from \"./Label.module.scss\";\nimport * as Aria from \"react-aria-components\";\nimport clsx from \"clsx\";\nimport {\n overlayTriggersTunneledTo,\n type PropsContext,\n PropsContextProvider,\n} from \"@/lib/propsContext\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\nimport locales from \"./locales/*.locale.json\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\n\nexport interface LabelProps\n extends\n PropsWithChildren<Omit<Aria.LabelProps, \"children\">>,\n FlowComponentProps<HTMLLabelElement> {\n /** Whether the label should show an \"optional\" indicator. */\n optional?: boolean;\n /** Whether the label should be displayed as disabled. */\n isDisabled?: boolean;\n /** @internal */\n unstyled?: boolean;\n}\n\n/** @flr-generate all */\nexport const Label = flowComponent(\"Label\", (props) => {\n const {\n children,\n className,\n optional,\n isDisabled,\n ref,\n unstyled = false,\n ...rest\n } = props;\n\n const [labelProps, labelRef] = Aria.useContextProps(\n rest,\n ref,\n Aria.LabelContext,\n );\n const { id, ...rootProps } = labelProps;\n\n const stringFormatter = useLocalizedStringFormatter(locales, \"Label\");\n\n const rootClassName = unstyled\n ? className\n : clsx(styles.label, isDisabled && styles.disabled, className);\n\n const optionalMarker = (\n <span className={styles.optional}>\n {stringFormatter.format(\"optional\")}\n </span>\n );\n\n const rightTunnel = {\n id: \"right\",\n component: \"Label\",\n } as const;\n\n const propsContext: PropsContext = {\n ...overlayTriggersTunneledTo(rightTunnel),\n // The contextual help sits next to the label text, not with the actions.\n ContextualHelpTrigger: {\n tunnel: {\n id: \"contextualHelp\",\n component: \"Label\",\n },\n },\n Button: {\n tunnel: rightTunnel,\n size: \"s\",\n },\n Action: {\n tunnel: rightTunnel,\n Button: {\n tunnel: null,\n },\n },\n };\n\n return (\n <PropsContextProvider props={propsContext}>\n {/* The context is already merged into `labelProps` above. */}\n <Aria.LabelContext.Provider value={null}>\n <Aria.Label {...rootProps} className={rootClassName} ref={labelRef}>\n {/*\n * Fields point `aria-labelledby` at the label's id, and the name\n * computation takes every descendant's name, buttons included. The\n * id sits on this span so the tunnelled buttons stay out of it.\n */}\n <span id={id} className={styles.text}>\n {children}\n {optional && optionalMarker}\n </span>\n <UiComponentTunnelExit id=\"contextualHelp\" component=\"Label\">\n {(children) => {\n if (React.Children.count(children) >= 1) {\n return children;\n }\n\n return undefined;\n }}\n </UiComponentTunnelExit>\n <UiComponentTunnelExit id=\"right\" component=\"Label\">\n {(children) => {\n if (React.Children.count(children) >= 1) {\n return <div className={styles.right}>{children}</div>;\n }\n\n return undefined;\n }}\n </UiComponentTunnelExit>\n </Aria.Label>\n </Aria.LabelContext.Provider>\n </PropsContextProvider>\n );\n});\n\nexport default Label;\n"],"mappings":";;;;;;;;;;;;;;;AA6BA,IAAa,QAAQ,cAAc,UAAU,UAAU;CACrD,MAAM,EACJ,UACA,WACA,UACA,YACA,KACA,WAAW,OACX,GAAG,SACD;CAEJ,MAAM,CAAC,YAAY,YAAY,KAAK,gBAClC,MACA,KACA,KAAK,YACP;CACA,MAAM,EAAE,IAAI,GAAG,cAAc;CAE7B,MAAM,kBAAkB,4BAA4B,kBAAS,OAAO;CAEpE,MAAM,gBAAgB,WAClB,YACA,KAAK,qBAAO,OAAO,cAAc,qBAAO,UAAU,SAAS;CAE/D,MAAM,iBACJ,oBAAC,QAAD;EAAM,WAAW,qBAAO;EACrB,UAAA,gBAAgB,OAAO,UAAU;CAC9B,CAAA;CAGR,MAAM,cAAc;EAClB,IAAI;EACJ,WAAW;CACb;CAEA,MAAM,eAA6B;EACjC,GAAG,0BAA0B,WAAW;EAExC,uBAAuB,EACrB,QAAQ;GACN,IAAI;GACJ,WAAW;EACb,EACF;EACA,QAAQ;GACN,QAAQ;GACR,MAAM;EACR;EACA,QAAQ;GACN,QAAQ;GACR,QAAQ,EACN,QAAQ,KACV;EACF;CACF;CAEA,OACE,oBAAC,sBAAD;EAAsB,OAAO;EAE3B,UAAA,oBAAC,KAAK,aAAa,UAAnB;GAA4B,OAAO;GACjC,UAAA,qBAAC,KAAK,OAAN;IAAY,GAAI;IAAW,WAAW;IAAe,KAAK;IAA1D,UAAA;KAME,qBAAC,QAAD;MAAU;MAAI,WAAW,qBAAO;MAAhC,UAAA,CACG,UACA,YAAY,cACT;;KACN,oBAAC,uBAAD;MAAuB,IAAG;MAAiB,WAAU;MACjD,WAAA,aAAa;OACb,IAAI,MAAM,SAAS,MAAM,QAAQ,KAAK,GACpC,OAAO;MAIX;KACqB,CAAA;KACvB,oBAAC,uBAAD;MAAuB,IAAG;MAAQ,WAAU;MACxC,WAAA,aAAa;OACb,IAAI,MAAM,SAAS,MAAM,QAAQ,KAAK,GACpC,OAAO,oBAAC,OAAD;QAAK,WAAW,qBAAO;QAAQ;OAAc,CAAA;MAIxD;KACqB,CAAA;IACb;;EACc,CAAA;CACR,CAAA;AAE1B,CAAC"}
|
|
@@ -5,13 +5,15 @@ var label = "flow--label";
|
|
|
5
5
|
var disabled = "flow--label--disabled";
|
|
6
6
|
var optional = "flow--label--optional";
|
|
7
7
|
var right = "flow--label--right";
|
|
8
|
+
var text = "flow--label--text";
|
|
8
9
|
var Label_module_default = {
|
|
9
10
|
label,
|
|
10
11
|
disabled,
|
|
11
12
|
optional,
|
|
12
|
-
right
|
|
13
|
+
right,
|
|
14
|
+
text
|
|
13
15
|
};
|
|
14
16
|
//#endregion
|
|
15
|
-
export { Label_module_default as default, disabled, label, optional, right };
|
|
17
|
+
export { Label_module_default as default, disabled, label, optional, right, text };
|
|
16
18
|
|
|
17
19
|
//# sourceMappingURL=Label.module.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Label.module.mjs","names":[],"sources":["../../../../../../../src/components/Label/Label.module.scss"],"sourcesContent":[".label {\n color: var(--label--color--default);\n font-size: var(--label--font-size);\n font-weight: var(--label--font-weight);\n display: flex;\n align-items: center;\n column-gap: var(--label--spacing);\n flex-wrap: wrap;\n\n &.disabled {\n color: var(--label--color--disabled);\n }\n\n & .optional {\n order: 0;\n }\n\n & .right {\n margin-inline-start: auto;\n }\n}\n"],"mappings":""}
|
|
1
|
+
{"version":3,"file":"Label.module.mjs","names":[],"sources":["../../../../../../../src/components/Label/Label.module.scss"],"sourcesContent":[".label {\n color: var(--label--color--default);\n font-size: var(--label--font-size);\n font-weight: var(--label--font-weight);\n display: flex;\n align-items: center;\n column-gap: var(--label--spacing);\n flex-wrap: wrap;\n\n &.disabled {\n color: var(--label--color--disabled);\n }\n\n & .optional {\n order: 0;\n }\n\n & .right {\n margin-inline-start: auto;\n }\n}\n\n// Carries the id only; its content stays laid out by the label.\n.text {\n display: contents;\n}\n"],"mappings":""}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ListItemView.module.mjs","names":[],"sources":["../../../../../../../../../src/components/List/components/ListItemView/ListItemView.module.scss"],"sourcesContent":[".view {\n display: flex;\n flex-direction: column;\n\n .checkboxContainer {\n display: flex;\n align-items: center;\n flex-shrink: 0;\n\n &:empty {\n display: none;\n }\n }\n\n .content {\n min-width: 0;\n display: flex;\n gap: var(--list-item--spacing);\n flex-grow: 1;\n flex-wrap: wrap;\n }\n\n .topContent {\n overflow-wrap: anywhere;\n display: flex;\n }\n\n .bottomContent {\n width: 100%;\n overflow-wrap: anywhere;\n display: flex;\n flex-direction: column;\n }\n\n .heading {\n color: var(--text--color--default);\n overflow-wrap: anywhere;\n }\n\n .header {\n overflow-wrap: anywhere;\n display: flex;\n gap: var(--list-item--avatar-to-title-spacing);\n max-width: 100%;\n }\n\n .subTitle {\n font-size: var(--list-item--subtitle-font-size);\n\n .text:not(:last-child)::after {\n content: \"–\";\n display: inline-block;\n margin: 0 var(--size-rem--s);\n }\n }\n\n .badge {\n max-width: 100%;\n }\n\n &.listView {\n padding: var(--list-item--padding);\n gap: var(--list-item--spacing);\n\n .columnLayout {\n flex-grow: 1;\n\n > :global(.flow--column-layout) {\n flex-grow: 1;\n align-items: center;\n }\n }\n\n .contentWrapper {\n display: flex;\n gap: var(--list-item--spacing);\n justify-content: space-between;\n flex-grow: 1;\n align-items: flex-start;\n }\n\n .content {\n align-items: center;\n align-self: center;\n max-width: 100%;\n }\n\n .title {\n max-width: 100%;\n min-width: 0;\n }\n\n .action {\n margin-inline-start: auto;\n\n :global(.flow--button) {\n margin-inline-end: 0;\n }\n }\n\n .header {\n order: 0;\n flex-grow: 1;\n align-items: center;\n\n &:empty,\n .subTitle:empty {\n display: none;\n }\n\n .avatar,\n .checkboxContainer {\n align-self: start;\n }\n\n .checkboxContainer {\n height: var(--avatar--size--m);\n }\n }\n\n &:has(.subTitle:not(:empty)) {\n .action,\n .avatar,\n .checkboxContainer {\n margin-top: var(--size-px--xxs);\n }\n }\n\n .topContent {\n order: 1;\n }\n\n :global(.flow--heading--heading-content) {\n max-width: 100%;\n }\n }\n\n &.tileView {\n gap: var(--list-item--padding);\n border-color: var(--list-item--border-color);\n border-width: var(--list-item--border-width);\n border-style: var(--list-item--border-style);\n border-radius: var(--list-item--corner-radius);\n align-content: flex-start;\n height: 100%;\n position: relative;\n overflow: hidden;\n\n .content {\n flex-direction: column;\n justify-content: flex-start;\n align-items: flex-start;\n padding-inline: var(--list-item--padding);\n padding-bottom: var(--list-item--padding);\n width: 100%;\n }\n\n .avatarContainer {\n width: 100%;\n border-bottom: var(--list-item--border-width)\n var(--list-item--border-style) var(--list-item--border-color);\n aspect-ratio: 16 / 9;\n\n // A consumer child inside `Avatar` — Flow `Image` or a bare `<img>`.\n // stylelint-disable-next-line selector-max-type -- bare `<img>` has no class\n img {\n overflow-clip-margin: unset;\n aspect-ratio: 16 / 9;\n }\n }\n\n .avatar {\n width: 100%;\n height: 100%;\n border-radius: 0;\n\n :global(.flow--avatar--icon) {\n width: var(--size-px--xxl);\n height: var(--size-px--xxl);\n }\n\n :global(.flow--avatar--initials) {\n font-size: var(--size-px--xxl);\n }\n }\n\n .checkboxContainer {\n position: absolute;\n top: var(--list-item--padding);\n inset-inline-start: var(--list-item--padding);\n background-color: var(--list-item--checkbox-background-color);\n border-radius: var(--list-item--checkbox-corner-radius);\n\n :global(.flow--checkbox .flow--checkbox--icon) {\n color: var(--list-item--checkbox-color);\n padding: var(--size-px--xxxs);\n }\n }\n\n .title {\n width: 100%;\n min-width: 0;\n\n :global(.flow--heading--heading-content) {\n position: absolute;\n top: var(--list-item--padding);\n inset-inline: var(--list-item--padding);\n justify-content: end;\n }\n }\n\n &:has(.checkboxContainer:not(:empty)) {\n :global(.flow--heading--heading-content) {\n inset-inline-start: calc(var(--list-item--padding) * 2 + var(--icon--size--m));\n }\n }\n\n .topContent,\n .header {\n width: 100%;\n }\n\n .action {\n align-self: start;\n }\n\n .bottomContent {\n margin-top: auto;\n }\n }\n}\n"],"mappings":""}
|
|
1
|
+
{"version":3,"file":"ListItemView.module.mjs","names":[],"sources":["../../../../../../../../../src/components/List/components/ListItemView/ListItemView.module.scss"],"sourcesContent":[".view {\n display: flex;\n flex-direction: column;\n\n .checkboxContainer {\n display: flex;\n align-items: center;\n flex-shrink: 0;\n\n &:empty {\n display: none;\n }\n }\n\n .content {\n min-width: 0;\n display: flex;\n gap: var(--list-item--spacing);\n flex-grow: 1;\n flex-wrap: wrap;\n }\n\n .topContent {\n overflow-wrap: anywhere;\n display: flex;\n }\n\n .bottomContent {\n width: 100%;\n overflow-wrap: anywhere;\n display: flex;\n flex-direction: column;\n }\n\n .heading {\n color: var(--text--color--default);\n overflow-wrap: anywhere;\n }\n\n .header {\n overflow-wrap: anywhere;\n display: flex;\n gap: var(--list-item--avatar-to-title-spacing);\n max-width: 100%;\n }\n\n .subTitle {\n font-size: var(--list-item--subtitle-font-size);\n\n .text:not(:last-child)::after {\n content: \"–\";\n display: inline-block;\n margin: 0 var(--size-rem--s);\n }\n }\n\n .badge {\n max-width: 100%;\n }\n\n &.listView {\n padding: var(--list-item--padding);\n gap: var(--list-item--spacing);\n\n .columnLayout {\n flex-grow: 1;\n\n > :global(.flow--column-layout) {\n flex-grow: 1;\n align-items: center;\n }\n }\n\n .contentWrapper {\n display: flex;\n gap: var(--list-item--spacing);\n justify-content: space-between;\n flex-grow: 1;\n align-items: flex-start;\n }\n\n .content {\n align-items: center;\n align-self: center;\n max-width: 100%;\n }\n\n .title {\n max-width: 100%;\n min-width: 0;\n }\n\n .action {\n margin-inline-start: auto;\n\n :global(.flow--button) {\n margin-inline-end: 0;\n }\n }\n\n .header {\n order: 0;\n flex-grow: 1;\n align-items: center;\n\n &:empty,\n .subTitle:empty {\n display: none;\n }\n\n .avatar,\n .checkboxContainer {\n align-self: start;\n }\n\n .checkboxContainer {\n height: var(--avatar--size--m);\n }\n }\n\n &:has(.subTitle:not(:empty)) {\n .action,\n .avatar,\n .checkboxContainer {\n margin-top: var(--size-px--xxs);\n }\n }\n\n .topContent {\n order: 1;\n }\n\n :global(.flow--heading--heading-content) {\n max-width: 100%;\n }\n }\n\n &.tileView {\n gap: var(--list-item--padding);\n border-color: var(--list-item--border-color);\n border-width: var(--list-item--border-width);\n border-style: var(--list-item--border-style);\n border-radius: var(--list-item--corner-radius);\n align-content: flex-start;\n height: 100%;\n position: relative;\n overflow: hidden;\n\n .content {\n flex-direction: column;\n justify-content: flex-start;\n align-items: flex-start;\n padding-inline: var(--list-item--padding);\n padding-bottom: var(--list-item--padding);\n width: 100%;\n }\n\n .avatarContainer {\n width: 100%;\n border-bottom: var(--list-item--border-width)\n var(--list-item--border-style) var(--list-item--border-color);\n aspect-ratio: 16 / 9;\n\n // A consumer child inside `Avatar` — Flow `Image` or a bare `<img>`.\n // stylelint-disable-next-line selector-max-type -- bare `<img>` has no class\n img {\n overflow-clip-margin: unset;\n aspect-ratio: 16 / 9;\n }\n }\n\n .avatar {\n width: 100%;\n height: 100%;\n border-radius: 0;\n\n :global(.flow--avatar--icon) {\n width: var(--size-px--xxl);\n height: var(--size-px--xxl);\n }\n\n :global(.flow--avatar--initials) {\n font-size: var(--size-px--xxl);\n }\n }\n\n .checkboxContainer {\n position: absolute;\n top: var(--list-item--padding);\n inset-inline-start: var(--list-item--padding);\n background-color: var(--list-item--checkbox-background-color);\n border-radius: var(--list-item--checkbox-corner-radius);\n\n :global(.flow--checkbox .flow--checkbox--icon) {\n color: var(--list-item--checkbox-color);\n padding: var(--size-px--xxxs);\n }\n }\n\n .title {\n width: 100%;\n min-width: 0;\n\n :global(.flow--heading--heading-text-spacer) {\n display: none;\n }\n\n :global(.flow--heading--heading-content) {\n position: absolute;\n top: var(--list-item--padding);\n inset-inline: var(--list-item--padding);\n display: flex;\n flex-wrap: wrap;\n gap: var(--heading--icon-to-text-spacing);\n justify-content: end;\n }\n\n :global(.flow--heading--heading-content-item):not(:last-child) {\n margin-inline-end: 0;\n }\n }\n\n &:has(.checkboxContainer:not(:empty)) {\n :global(.flow--heading--heading-content) {\n inset-inline-start: calc(var(--list-item--padding) * 2 + var(--icon--size--m));\n }\n }\n\n .topContent,\n .header {\n width: 100%;\n }\n\n .action {\n align-self: start;\n }\n\n .bottomContent {\n margin-top: auto;\n }\n }\n}\n"],"mappings":""}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Modal.module.mjs","names":[],"sources":["../../../../../../../src/components/Modal/Modal.module.scss"],"sourcesContent":["@use \"@/styles/mixins/scrollbar\";\n\n/* Caps the dialog width per size token (`size-s` / `size-m` / `size-l`). */\n@mixin size($size) {\n &.size-#{$size} {\n [role=\"dialog\"] {\n width: inherit;\n max-width: var(--modal--size--#{$size});\n }\n }\n}\n\n/* ===========================================================================\n Base — shared by Modal (centered / bottom sheet) and OffCanvas (side panel).\n =========================================================================== */\n.modal,\n.offCanvas {\n /* Overlay.module.scss lays the viewport out; the dialog inside it is the only\n pointer target. */\n > :global(.flow--overlay--viewport) {\n pointer-events: none;\n\n /* react-aria's own modal wrapper — it gets no className from Flow, so\n its default `react-aria-Modal` class is the handle. */\n > :global(.react-aria-Modal) {\n display: flex;\n justify-content: center;\n width: inherit;\n max-height: var(--visual-viewport-height);\n padding: var(--size-px--xl);\n }\n }\n\n /* Close button: hidden when an action group is present, unless forced. */\n &:has(.actionGroup) {\n .closeButton:not(.alwaysVisible) {\n display: none;\n }\n }\n\n .closeButton.alwaysHidden {\n display: none;\n }\n\n /* The dialog card itself — a flex column. It is also the scroll container on\n mobile, and the sticky header/footer stack against its content only. */\n [role=\"dialog\"] {\n display: flex;\n flex-direction: column;\n isolation: isolate;\n max-height: 100%;\n overflow: hidden;\n outline: none;\n pointer-events: all;\n background-color: var(--modal--background-color);\n border: var(--modal--border-width) var(--modal--border-style)\n var(--modal--border-color);\n\n // A consumer `Form` (or raw `<form>`) wrapping the modal content. `Form`\n // is a plain FC, so the props context cannot give it a class.\n // stylelint-disable-next-line selector-max-type -- consumer form, no class\n > form {\n display: contents;\n }\n }\n\n /* Header */\n // A `Header`/`SectionHeader` — or a raw `<header>` — the consumer places in\n // the modal; both must match.\n // stylelint-disable-next-line selector-max-type -- consumer-placed header\n header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n }\n\n .header {\n display: flex;\n align-items: center;\n gap: var(--heading--icon-to-text-spacing);\n padding-top: var(--modal--header-padding-top);\n padding-inline: var(--modal--padding);\n\n /* Flatten the heading's text and content spans into the header row, so\n badges stay behind the title instead of wrapping onto their own line.\n Heading's spans do carry classes, but `.flow--heading--heading-content`\n already sets `display: none` on `:empty` at the same specificity a class\n selector here would reach — source order would then decide. */\n // stylelint-disable-next-line selector-max-type -- see above\n > span {\n display: contents;\n }\n\n .headerTitle {\n min-width: 0;\n }\n\n .closeButton {\n order: 1;\n margin-inline-start: auto;\n }\n }\n\n /* Content — the scrollable body */\n .content,\n .columnLayout {\n @include scrollbar.scrollbar;\n\n flex-grow: 1;\n min-height: var(--modal--content-min-height);\n padding: var(--modal--padding);\n overflow: hidden auto;\n background-color: var(--modal--background-color);\n }\n\n .columnLayout .accentBox {\n position: sticky;\n top: 0;\n height: fit-content;\n }\n\n /* Action group — the footer */\n .actionGroup {\n padding: var(--modal--padding);\n background-color: var(--modal--footer-background-color);\n }\n\n /* ActionGroup's \"sorted\" layout sets flex-grow:1 on itself; the modal footer\n must keep its natural height (otherwise it fills the full-height off-canvas\n panel). Scope via the dialog so flex-grow:0 wins the equal-specificity /\n source-order battle — without raising the specificity of the padding above,\n which the mobile rules override. */\n [role=\"dialog\"] .actionGroup {\n flex-grow: 0;\n }\n}\n\n/* ===========================================================================\n Modal — desktop (centered dialog, zoom in/out).\n =========================================================================== */\n@media (width > 768px) {\n .modal {\n @include size(s);\n @include size(m);\n @include size(l);\n\n [role=\"dialog\"] {\n border-radius: var(--modal--corner-radius);\n }\n\n > :global(.flow--overlay--viewport) > :global(.react-aria-Modal) {\n &[data-entering] {\n animation: modal-zoom var(--transition--duration--slow)\n cubic-bezier(0.1, 0.8, 0.3, 1.2);\n }\n\n &[data-exiting] {\n animation: modal-zoom var(--transition--duration--default)\n cubic-bezier(0.1, 0.8, 0.3, 1.2) reverse;\n }\n }\n }\n}\n\n/* ===========================================================================\n OffCanvas — side panel (all widths), full height, slides in from the side.\n =========================================================================== */\n.offCanvas {\n @include size(s);\n @include size(m);\n @include size(l);\n\n [role=\"dialog\"] {\n height: 100%;\n border-radius: 0;\n }\n\n > :global(.flow--overlay--viewport) {\n padding-inline-start: var(--size-px--m);\n\n > :global(.react-aria-Modal) {\n justify-content: flex-end;\n width: inherit;\n height: inherit;\n padding: unset;\n\n &[data-entering] {\n animation: modal-slide-in-from-right var(--transition--duration--slow);\n }\n\n &[data-exiting] {\n animation: modal-slide-in-from-right\n var(--transition--duration--default) reverse;\n }\n }\n }\n\n &.left {\n > :global(.flow--overlay--viewport) {\n padding-inline: 0 var(--size-px--m);\n\n > :global(.react-aria-Modal) {\n justify-content: flex-start;\n padding: unset;\n\n &[data-entering] {\n animation: modal-slide-in-from-left var(--transition--duration--slow);\n }\n\n &[data-exiting] {\n animation: modal-slide-in-from-left\n var(--transition--duration--default) reverse;\n }\n }\n }\n }\n}\n\n/* ===========================================================================\n Modal — mobile (bottom sheet), issue #2423.\n\n One scroll container: the dialog scrolls while the header sticks to the top\n and the footer to the bottom. While the virtual keyboard is open\n (.keyboardVisible) both un-stick so header + content + footer flow normally\n and the content gets the full available space.\n =========================================================================== */\n@media (max-width: 768px) {\n .modal {\n /* Bottom-anchored sheet: rounded top corners + slide-up animation. */\n > :global(.flow--overlay--viewport) > :global(.react-aria-Modal) {\n margin-top: auto;\n width: 100%;\n padding: unset;\n overflow: hidden;\n border-start-start-radius: var(--modal--corner-radius);\n border-start-end-radius: var(--modal--corner-radius);\n pointer-events: all;\n\n &[data-entering] {\n animation: modal-slide-up var(--transition--duration--slow);\n }\n\n &[data-exiting] {\n animation: modal-slide-up var(--transition--duration--default) reverse;\n }\n }\n\n /* The dialog is the single scroll container. Capped just below the visual\n viewport so a full-height sheet keeps a small gap from the top edge. */\n [role=\"dialog\"] {\n @include scrollbar.scrollbar;\n\n width: inherit;\n max-height: calc(\n var(--visual-viewport-height) - var(--modal--tray-top-spacing)\n );\n overflow: hidden auto;\n }\n\n // stylelint-disable-next-line selector-max-type -- consumer form, see above\n [role=\"dialog\"] > form {\n width: inherit;\n }\n\n /* flex: 0 0 auto keeps natural heights; without flex-shrink:0 the flex\n column compresses the content box and the (overflow:visible) fields\n spill over the footer. */\n .header,\n .content,\n .columnLayout,\n .actionGroup {\n flex: 0 0 auto;\n }\n\n .content,\n .columnLayout {\n min-height: 0;\n overflow: visible;\n }\n\n /* Docked header + footer (sticky within the single scroll container). */\n .header {\n position: sticky;\n top: 0;\n z-index: 1;\n background-color: var(--modal--background-color);\n }\n\n .actionGroup {\n position: sticky;\n bottom: 0;\n z-index: 1;\n }\n }\n\n /* Keyboard open: un-stick both so everything flows for maximum typing space.\n The dialog fills the available height and the footer uses margin-top:auto,\n so with SHORT content the footer still sits at the bottom (not mid-air) and\n with tall content it scrolls away with everything else. Never hidden. */\n .modal.keyboardVisible {\n [role=\"dialog\"] {\n min-height: calc(\n var(--visual-viewport-height) - var(--modal--tray-top-spacing)\n );\n }\n\n .header,\n .actionGroup {\n position: static;\n }\n\n .actionGroup {\n margin-top: auto;\n }\n }\n\n /* Shared mobile spacing + full-width stacked actions (Modal + OffCanvas). */\n .modal,\n .offCanvas {\n .header {\n padding-inline: var(--modal--padding-mobile);\n }\n\n .content,\n .columnLayout,\n .actionGroup {\n padding: var(--modal--padding-mobile);\n }\n\n .actionGroup {\n flex-direction: column;\n\n // The footer's buttons are consumer `Button`/`Action` children; a raw\n // `<button>` matches today too.\n // stylelint-disable-next-line selector-max-type -- consumer children\n button {\n width: 100%;\n }\n }\n }\n}\n\n/* ===========================================================================\n Animations\n =========================================================================== */\n@keyframes modal-zoom {\n /* Start with scale(1) to let ResizeObservers take the correct width on mount. */\n 0% {\n opacity: 0;\n transform: scale(1);\n }\n\n 0.1% {\n opacity: 1;\n transform: scale(0.8);\n }\n\n 100% {\n transform: scale(1);\n }\n}\n\n@keyframes modal-slide-up {\n from {\n translate: 0 30%;\n }\n\n to {\n translate: 0 0;\n }\n}\n\n@keyframes modal-slide-in-from-right {\n from {\n translate: 30% 0;\n }\n\n to {\n translate: 0 0;\n }\n}\n\n@keyframes modal-slide-in-from-left {\n from {\n translate: -30% 0;\n }\n\n to {\n translate: 0 0;\n }\n}\n"],"mappings":""}
|
|
1
|
+
{"version":3,"file":"Modal.module.mjs","names":[],"sources":["../../../../../../../src/components/Modal/Modal.module.scss"],"sourcesContent":["@use \"@/styles/mixins/scrollbar\";\n\n/* Caps the dialog width per size token (`size-s` / `size-m` / `size-l`). */\n@mixin size($size) {\n &.size-#{$size} {\n [role=\"dialog\"] {\n width: inherit;\n max-width: var(--modal--size--#{$size});\n }\n }\n}\n\n/* ===========================================================================\n Base — shared by Modal (centered / bottom sheet) and OffCanvas (side panel).\n =========================================================================== */\n.modal,\n.offCanvas {\n /* Overlay.module.scss lays the viewport out; the dialog inside it is the only\n pointer target. */\n > :global(.flow--overlay--viewport) {\n pointer-events: none;\n\n /* react-aria's own modal wrapper — it gets no className from Flow, so\n its default `react-aria-Modal` class is the handle. */\n > :global(.react-aria-Modal) {\n display: flex;\n justify-content: center;\n width: inherit;\n max-height: var(--visual-viewport-height);\n padding: var(--size-px--xl);\n }\n }\n\n /* Close button: hidden when an action group is present, unless forced. */\n &:has(.actionGroup) {\n .closeButton:not(.alwaysVisible) {\n display: none;\n }\n }\n\n .closeButton.alwaysHidden {\n display: none;\n }\n\n /* The dialog card itself — a flex column. It is also the scroll container on\n mobile, and the sticky header/footer stack against its content only. */\n [role=\"dialog\"] {\n display: flex;\n flex-direction: column;\n isolation: isolate;\n max-height: 100%;\n overflow: hidden;\n outline: none;\n pointer-events: all;\n background-color: var(--modal--background-color);\n border: var(--modal--border-width) var(--modal--border-style)\n var(--modal--border-color);\n\n // A consumer `Form` (or raw `<form>`) wrapping the modal content. `Form`\n // is a plain FC, so the props context cannot give it a class.\n // stylelint-disable-next-line selector-max-type -- consumer form, no class\n > form {\n display: contents;\n }\n }\n\n /* Header */\n // A `Header`/`SectionHeader` — or a raw `<header>` — the consumer places in\n // the modal; both must match.\n // stylelint-disable-next-line selector-max-type -- consumer-placed header\n header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n }\n\n .header {\n display: flex;\n align-items: center;\n gap: var(--heading--icon-to-text-spacing);\n padding-top: var(--modal--header-padding-top);\n padding-inline: var(--modal--padding);\n\n /* Flatten the heading's text and content spans into the header row, so\n badges stay behind the title instead of wrapping onto their own line.\n Heading's spans do carry classes, but `.flow--heading--heading-content`\n already sets `display: none` on `:empty` at the same specificity a class\n selector here would reach — source order would then decide. */\n // stylelint-disable-next-line selector-max-type -- see above\n > span {\n display: contents;\n }\n\n :global(.flow--heading--heading-text-spacer) {\n display: none;\n }\n\n :global(.flow--heading--heading-content)\n :global(.flow--heading--heading-content-item):not(:last-child) {\n margin-inline-end: 0;\n }\n\n .headerTitle {\n min-width: 0;\n }\n\n .closeButton {\n order: 1;\n margin-inline-start: auto;\n }\n }\n\n /* Content — the scrollable body */\n .content,\n .columnLayout {\n @include scrollbar.scrollbar;\n\n flex-grow: 1;\n min-height: var(--modal--content-min-height);\n padding: var(--modal--padding);\n overflow: hidden auto;\n background-color: var(--modal--background-color);\n }\n\n .columnLayout .accentBox {\n position: sticky;\n top: 0;\n height: fit-content;\n }\n\n /* Action group — the footer */\n .actionGroup {\n padding: var(--modal--padding);\n background-color: var(--modal--footer-background-color);\n }\n\n /* ActionGroup's \"sorted\" layout sets flex-grow:1 on itself; the modal footer\n must keep its natural height (otherwise it fills the full-height off-canvas\n panel). Scope via the dialog so flex-grow:0 wins the equal-specificity /\n source-order battle — without raising the specificity of the padding above,\n which the mobile rules override. */\n [role=\"dialog\"] .actionGroup {\n flex-grow: 0;\n }\n}\n\n/* ===========================================================================\n Modal — desktop (centered dialog, zoom in/out).\n =========================================================================== */\n@media (width > 768px) {\n .modal {\n @include size(s);\n @include size(m);\n @include size(l);\n\n [role=\"dialog\"] {\n border-radius: var(--modal--corner-radius);\n }\n\n > :global(.flow--overlay--viewport) > :global(.react-aria-Modal) {\n &[data-entering] {\n animation: modal-zoom var(--transition--duration--slow)\n cubic-bezier(0.1, 0.8, 0.3, 1.2);\n }\n\n &[data-exiting] {\n animation: modal-zoom var(--transition--duration--default)\n cubic-bezier(0.1, 0.8, 0.3, 1.2) reverse;\n }\n }\n }\n}\n\n/* ===========================================================================\n OffCanvas — side panel (all widths), full height, slides in from the side.\n =========================================================================== */\n.offCanvas {\n @include size(s);\n @include size(m);\n @include size(l);\n\n [role=\"dialog\"] {\n height: 100%;\n border-radius: 0;\n }\n\n > :global(.flow--overlay--viewport) {\n padding-inline-start: var(--size-px--m);\n\n > :global(.react-aria-Modal) {\n justify-content: flex-end;\n width: inherit;\n height: inherit;\n padding: unset;\n\n &[data-entering] {\n animation: modal-slide-in-from-right var(--transition--duration--slow);\n }\n\n &[data-exiting] {\n animation: modal-slide-in-from-right\n var(--transition--duration--default) reverse;\n }\n }\n }\n\n &.left {\n > :global(.flow--overlay--viewport) {\n padding-inline: 0 var(--size-px--m);\n\n > :global(.react-aria-Modal) {\n justify-content: flex-start;\n padding: unset;\n\n &[data-entering] {\n animation: modal-slide-in-from-left var(--transition--duration--slow);\n }\n\n &[data-exiting] {\n animation: modal-slide-in-from-left\n var(--transition--duration--default) reverse;\n }\n }\n }\n }\n}\n\n/* ===========================================================================\n Modal — mobile (bottom sheet), issue #2423.\n\n One scroll container: the dialog scrolls while the header sticks to the top\n and the footer to the bottom. While the virtual keyboard is open\n (.keyboardVisible) both un-stick so header + content + footer flow normally\n and the content gets the full available space.\n =========================================================================== */\n@media (max-width: 768px) {\n .modal {\n /* Bottom-anchored sheet: rounded top corners + slide-up animation. */\n > :global(.flow--overlay--viewport) > :global(.react-aria-Modal) {\n margin-top: auto;\n width: 100%;\n padding: unset;\n overflow: hidden;\n border-start-start-radius: var(--modal--corner-radius);\n border-start-end-radius: var(--modal--corner-radius);\n pointer-events: all;\n\n &[data-entering] {\n animation: modal-slide-up var(--transition--duration--slow);\n }\n\n &[data-exiting] {\n animation: modal-slide-up var(--transition--duration--default) reverse;\n }\n }\n\n /* The dialog is the single scroll container. Capped just below the visual\n viewport so a full-height sheet keeps a small gap from the top edge. */\n [role=\"dialog\"] {\n @include scrollbar.scrollbar;\n\n width: inherit;\n max-height: calc(\n var(--visual-viewport-height) - var(--modal--tray-top-spacing)\n );\n overflow: hidden auto;\n }\n\n // stylelint-disable-next-line selector-max-type -- consumer form, see above\n [role=\"dialog\"] > form {\n width: inherit;\n }\n\n /* flex: 0 0 auto keeps natural heights; without flex-shrink:0 the flex\n column compresses the content box and the (overflow:visible) fields\n spill over the footer. */\n .header,\n .content,\n .columnLayout,\n .actionGroup {\n flex: 0 0 auto;\n }\n\n .content,\n .columnLayout {\n min-height: 0;\n overflow: visible;\n }\n\n /* Docked header + footer (sticky within the single scroll container). */\n .header {\n position: sticky;\n top: 0;\n z-index: 1;\n background-color: var(--modal--background-color);\n }\n\n .actionGroup {\n position: sticky;\n bottom: 0;\n z-index: 1;\n }\n }\n\n /* Keyboard open: un-stick both so everything flows for maximum typing space.\n The dialog fills the available height and the footer uses margin-top:auto,\n so with SHORT content the footer still sits at the bottom (not mid-air) and\n with tall content it scrolls away with everything else. Never hidden. */\n .modal.keyboardVisible {\n [role=\"dialog\"] {\n min-height: calc(\n var(--visual-viewport-height) - var(--modal--tray-top-spacing)\n );\n }\n\n .header,\n .actionGroup {\n position: static;\n }\n\n .actionGroup {\n margin-top: auto;\n }\n }\n\n /* Shared mobile spacing + full-width stacked actions (Modal + OffCanvas). */\n .modal,\n .offCanvas {\n .header {\n padding-inline: var(--modal--padding-mobile);\n }\n\n .content,\n .columnLayout,\n .actionGroup {\n padding: var(--modal--padding-mobile);\n }\n\n .actionGroup {\n flex-direction: column;\n\n // The footer's buttons are consumer `Button`/`Action` children; a raw\n // `<button>` matches today too.\n // stylelint-disable-next-line selector-max-type -- consumer children\n button {\n width: 100%;\n }\n }\n }\n}\n\n/* ===========================================================================\n Animations\n =========================================================================== */\n@keyframes modal-zoom {\n /* Start with scale(1) to let ResizeObservers take the correct width on mount. */\n 0% {\n opacity: 0;\n transform: scale(1);\n }\n\n 0.1% {\n opacity: 1;\n transform: scale(0.8);\n }\n\n 100% {\n transform: scale(1);\n }\n}\n\n@keyframes modal-slide-up {\n from {\n translate: 0 30%;\n }\n\n to {\n translate: 0 0;\n }\n}\n\n@keyframes modal-slide-in-from-right {\n from {\n translate: 30% 0;\n }\n\n to {\n translate: 0 0;\n }\n}\n\n@keyframes modal-slide-in-from-left {\n from {\n translate: -30% 0;\n }\n\n to {\n translate: 0 0;\n }\n}\n"],"mappings":""}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mittwald/flow-react-components",
|
|
3
|
-
"version": "1.3.
|
|
3
|
+
"version": "1.3.6",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "A React implementation of Flow, mittwald’s design system",
|
|
6
6
|
"homepage": "https://flow.mittwald.de",
|
|
@@ -83,9 +83,9 @@
|
|
|
83
83
|
"@internationalized/string-compiler": "^3.4.1",
|
|
84
84
|
"@lezer/common": "^1.5.2",
|
|
85
85
|
"@lezer/highlight": "^1.2.3",
|
|
86
|
-
"@mittwald/flow-icons": "^1.3.
|
|
86
|
+
"@mittwald/flow-icons": "^1.3.6",
|
|
87
87
|
"@mittwald/password-tools-js": "^3.0.0",
|
|
88
|
-
"@mittwald/react-tunnel": "^1.3.
|
|
88
|
+
"@mittwald/react-tunnel": "^1.3.6",
|
|
89
89
|
"@mittwald/react-use-promise": "^4.2.2",
|
|
90
90
|
"@react-aria/form": "^3.2.1",
|
|
91
91
|
"@react-aria/i18n": "^3.13.1",
|
|
@@ -138,12 +138,12 @@
|
|
|
138
138
|
"@internationalized/date": "^3.12.3",
|
|
139
139
|
"@lezer/generator": "^1.8.0",
|
|
140
140
|
"@lezer/lr": "^1.4.10",
|
|
141
|
-
"@mittwald/flow-core": "1.3.
|
|
142
|
-
"@mittwald/flow-design-tokens": "1.3.
|
|
143
|
-
"@mittwald/flow-icons-base": "1.3.
|
|
141
|
+
"@mittwald/flow-core": "1.3.6",
|
|
142
|
+
"@mittwald/flow-design-tokens": "1.3.6",
|
|
143
|
+
"@mittwald/flow-icons-base": "1.3.6",
|
|
144
144
|
"@mittwald/react-use-promise": "^4.2.2",
|
|
145
145
|
"@mittwald/remote-dom-react": "1.2.2-mittwald.10",
|
|
146
|
-
"@mittwald/typescript-config": "1.3.
|
|
146
|
+
"@mittwald/typescript-config": "1.3.6",
|
|
147
147
|
"@nx/storybook": "^22.7.6",
|
|
148
148
|
"@storybook/addon-a11y": "^10.5.10",
|
|
149
149
|
"@storybook/addon-actions": "^9.0.8",
|
|
@@ -195,7 +195,7 @@
|
|
|
195
195
|
},
|
|
196
196
|
"peerDependencies": {
|
|
197
197
|
"@internationalized/date": "^3.12.2",
|
|
198
|
-
"@mittwald/flow-icons-pro": "1.3.
|
|
198
|
+
"@mittwald/flow-icons-pro": "1.3.6",
|
|
199
199
|
"@mittwald/react-use-promise": "^4.2.2",
|
|
200
200
|
"next": "^16.2.3",
|
|
201
201
|
"react": "^19.2.0",
|
|
@@ -219,5 +219,5 @@
|
|
|
219
219
|
"browserslist": [
|
|
220
220
|
"baseline widely available"
|
|
221
221
|
],
|
|
222
|
-
"gitHead": "
|
|
222
|
+
"gitHead": "e4399552c31e1bd186452c6b430ecccfc27f73e9"
|
|
223
223
|
}
|