@mittwald/flow-react-components 0.2.0-alpha.884 → 0.2.0-alpha.886
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 +10 -0
- package/dist/assets/doc-properties.json +10968 -5728
- package/dist/css/all.css +1 -1
- package/dist/js/_virtual/_.locale.json@164140296eee39fbc28322d0864a89ac.mjs +12 -0
- package/dist/js/_virtual/_.locale.json@164140296eee39fbc28322d0864a89ac.mjs.map +1 -0
- package/dist/js/_virtual/_.locale.json@8caea407512a4a9945a6d45b68eaebed.mjs +11 -0
- package/dist/js/_virtual/_.locale.json@8caea407512a4a9945a6d45b68eaebed.mjs.map +1 -0
- package/dist/js/packages/components/src/components/Initials/Initials.mjs +1 -1
- package/dist/js/packages/components/src/components/Initials/Initials.mjs.map +1 -1
- package/dist/js/packages/components/src/components/Message/Message.mjs +26 -8
- package/dist/js/packages/components/src/components/Message/Message.mjs.map +1 -1
- package/dist/js/packages/components/src/components/MessageThread/MessageThread.mjs +3 -2
- package/dist/js/packages/components/src/components/MessageThread/MessageThread.mjs.map +1 -1
- package/dist/js/packages/components/src/components/MessageThread/components/MessageSeparator/MessageSeparator.mjs +7 -1
- package/dist/js/packages/components/src/components/MessageThread/components/MessageSeparator/MessageSeparator.mjs.map +1 -1
- package/dist/types/components/Message/Message.d.ts +2 -2
- package/dist/types/components/Message/Message.d.ts.map +1 -1
- package/dist/types/components/MessageThread/MessageThread.d.ts.map +1 -1
- package/dist/types/components/MessageThread/components/MessageSeparator/MessageSeparator.d.ts.map +1 -1
- package/dist/types/components/MessageThread/stories/Default.stories.d.ts.map +1 -1
- package/package.json +6 -6
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
"use client"
|
|
2
|
+
/* */
|
|
3
|
+
const locales = {"de-DE":{
|
|
4
|
+
"separator.label": "Statusänderung"
|
|
5
|
+
}
|
|
6
|
+
,"en-US":{
|
|
7
|
+
"separator.label": "Status update"
|
|
8
|
+
}
|
|
9
|
+
};
|
|
10
|
+
|
|
11
|
+
export { locales as default };
|
|
12
|
+
//# sourceMappingURL=_.locale.json@164140296eee39fbc28322d0864a89ac.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"_.locale.json@164140296eee39fbc28322d0864a89ac.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;"}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
"use client"
|
|
2
|
+
/* */
|
|
3
|
+
const locales = {"de-DE":{
|
|
4
|
+
"headerLabel": "Nachricht von",
|
|
5
|
+
"options": "Optionen"
|
|
6
|
+
}
|
|
7
|
+
,"en-US":{ "headerLabel": "Message by", "options": "Options" }
|
|
8
|
+
};
|
|
9
|
+
|
|
10
|
+
export { locales as default };
|
|
11
|
+
//# sourceMappingURL=_.locale.json@8caea407512a4a9945a6d45b68eaebed.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"_.locale.json@8caea407512a4a9945a6d45b68eaebed.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;"}
|
|
@@ -30,7 +30,7 @@ const Initials = flowComponent("Initials", (props) => {
|
|
|
30
30
|
{
|
|
31
31
|
"data-dynamic-color": dynamicColor,
|
|
32
32
|
"aria-hidden": ariaHidden,
|
|
33
|
-
"aria-label": textContent,
|
|
33
|
+
"aria-label": ariaHidden ? void 0 : textContent,
|
|
34
34
|
className: rootClassName,
|
|
35
35
|
ref,
|
|
36
36
|
role: "img",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Initials.mjs","sources":["../../../../../../../src/components/Initials/Initials.tsx"],"sourcesContent":["import { type PropsWithChildren, useMemo } from \"react\";\nimport { getInitialsFromString } from \"./lib/getInitialsFromString\";\nimport styles from \"./Initials.module.scss\";\nimport clsx from \"clsx\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport { getColorFromInitials } from \"@/components/Initials/lib/getColorFromInitials\";\nimport { extractTextFromFirstChild } from \"@/lib/react/remote\";\n\nexport interface InitialsProps\n extends PropsWithChildren, PropsWithClassName, FlowComponentProps {\n \"aria-hidden\"?: boolean;\n /** @internal */\n useDynamicColor?: boolean;\n}\n\n/** @flr-generate all */\nexport const Initials = flowComponent(\"Initials\", (props) => {\n const {\n children,\n useDynamicColor = false,\n className,\n \"aria-hidden\": ariaHidden,\n ref,\n } = props;\n\n const textContent = extractTextFromFirstChild(children) ?? \"\";\n const initials = getInitialsFromString(textContent);\n const dynamicColor = useMemo(\n () => (useDynamicColor ? getColorFromInitials(textContent) : undefined),\n [useDynamicColor, textContent],\n );\n\n const rootClassName = clsx(styles.initials, className);\n\n const initialsElements = initials.map((initial, index) => (\n <span aria-hidden role=\"presentation\" key={index}>\n {initial}\n </span>\n ));\n\n return (\n <div\n data-dynamic-color={dynamicColor}\n aria-hidden={ariaHidden}\n aria-label={textContent}\n className={rootClassName}\n ref={ref}\n role=\"img\"\n >\n {initialsElements}\n </div>\n );\n});\n\nexport default Initials;\n"],"names":[],"mappings":";;;;;;;;;AAkBO,MAAM,QAAA,GAAW,aAAA,CAAc,UAAA,EAAY,CAAC,KAAA,KAAU;AAC3D,EAAA,MAAM;AAAA,IACJ,QAAA;AAAA,IACA,eAAA,GAAkB,KAAA;AAAA,IAClB,SAAA;AAAA,IACA,aAAA,EAAe,UAAA;AAAA,IACf;AAAA,GACF,GAAI,KAAA;AAEJ,EAAA,MAAM,WAAA,GAAc,yBAAA,CAA0B,QAAQ,CAAA,IAAK,EAAA;AAC3D,EAAA,MAAM,QAAA,GAAW,sBAAsB,WAAW,CAAA;AAClD,EAAA,MAAM,YAAA,GAAe,OAAA;AAAA,IACnB,MAAO,eAAA,GAAkB,oBAAA,CAAqB,WAAW,CAAA,GAAI,MAAA;AAAA,IAC7D,CAAC,iBAAiB,WAAW;AAAA,GAC/B;AAEA,EAAA,MAAM,aAAA,GAAgB,IAAA,CAAK,MAAA,CAAO,QAAA,EAAU,SAAS,CAAA;AAErD,EAAA,MAAM,gBAAA,GAAmB,QAAA,CAAS,GAAA,CAAI,CAAC,SAAS,KAAA,qBAC9C,GAAA,CAAC,MAAA,EAAA,EAAK,aAAA,EAAW,IAAA,EAAC,IAAA,EAAK,cAAA,EACpB,QAAA,EAAA,OAAA,EAAA,EADwC,KAE3C,CACD,CAAA;AAED,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,oBAAA,EAAoB,YAAA;AAAA,MACpB,aAAA,EAAa,UAAA;AAAA,MACb,YAAA,EAAY,WAAA;AAAA,
|
|
1
|
+
{"version":3,"file":"Initials.mjs","sources":["../../../../../../../src/components/Initials/Initials.tsx"],"sourcesContent":["import { type PropsWithChildren, useMemo } from \"react\";\nimport { getInitialsFromString } from \"./lib/getInitialsFromString\";\nimport styles from \"./Initials.module.scss\";\nimport clsx from \"clsx\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport { getColorFromInitials } from \"@/components/Initials/lib/getColorFromInitials\";\nimport { extractTextFromFirstChild } from \"@/lib/react/remote\";\n\nexport interface InitialsProps\n extends PropsWithChildren, PropsWithClassName, FlowComponentProps {\n \"aria-hidden\"?: boolean;\n /** @internal */\n useDynamicColor?: boolean;\n}\n\n/** @flr-generate all */\nexport const Initials = flowComponent(\"Initials\", (props) => {\n const {\n children,\n useDynamicColor = false,\n className,\n \"aria-hidden\": ariaHidden,\n ref,\n } = props;\n\n const textContent = extractTextFromFirstChild(children) ?? \"\";\n const initials = getInitialsFromString(textContent);\n const dynamicColor = useMemo(\n () => (useDynamicColor ? getColorFromInitials(textContent) : undefined),\n [useDynamicColor, textContent],\n );\n\n const rootClassName = clsx(styles.initials, className);\n\n const initialsElements = initials.map((initial, index) => (\n <span aria-hidden role=\"presentation\" key={index}>\n {initial}\n </span>\n ));\n\n return (\n <div\n data-dynamic-color={dynamicColor}\n aria-hidden={ariaHidden}\n aria-label={ariaHidden ? undefined : textContent}\n className={rootClassName}\n ref={ref}\n role=\"img\"\n >\n {initialsElements}\n </div>\n );\n});\n\nexport default Initials;\n"],"names":[],"mappings":";;;;;;;;;AAkBO,MAAM,QAAA,GAAW,aAAA,CAAc,UAAA,EAAY,CAAC,KAAA,KAAU;AAC3D,EAAA,MAAM;AAAA,IACJ,QAAA;AAAA,IACA,eAAA,GAAkB,KAAA;AAAA,IAClB,SAAA;AAAA,IACA,aAAA,EAAe,UAAA;AAAA,IACf;AAAA,GACF,GAAI,KAAA;AAEJ,EAAA,MAAM,WAAA,GAAc,yBAAA,CAA0B,QAAQ,CAAA,IAAK,EAAA;AAC3D,EAAA,MAAM,QAAA,GAAW,sBAAsB,WAAW,CAAA;AAClD,EAAA,MAAM,YAAA,GAAe,OAAA;AAAA,IACnB,MAAO,eAAA,GAAkB,oBAAA,CAAqB,WAAW,CAAA,GAAI,MAAA;AAAA,IAC7D,CAAC,iBAAiB,WAAW;AAAA,GAC/B;AAEA,EAAA,MAAM,aAAA,GAAgB,IAAA,CAAK,MAAA,CAAO,QAAA,EAAU,SAAS,CAAA;AAErD,EAAA,MAAM,gBAAA,GAAmB,QAAA,CAAS,GAAA,CAAI,CAAC,SAAS,KAAA,qBAC9C,GAAA,CAAC,MAAA,EAAA,EAAK,aAAA,EAAW,IAAA,EAAC,IAAA,EAAK,cAAA,EACpB,QAAA,EAAA,OAAA,EAAA,EADwC,KAE3C,CACD,CAAA;AAED,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,oBAAA,EAAoB,YAAA;AAAA,MACpB,aAAA,EAAa,UAAA;AAAA,MACb,YAAA,EAAY,aAAa,MAAA,GAAY,WAAA;AAAA,MACrC,SAAA,EAAW,aAAA;AAAA,MACX,GAAA;AAAA,MACA,IAAA,EAAK,KAAA;AAAA,MAEJ,QAAA,EAAA;AAAA;AAAA,GACH;AAEJ,CAAC;;;;"}
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
"use client"
|
|
2
2
|
/* */
|
|
3
3
|
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
4
|
+
import 'react';
|
|
4
5
|
import clsx from 'clsx';
|
|
5
6
|
import styles from './Message.module.scss.mjs';
|
|
6
7
|
import { dynamic } from '../../lib/propsContext/dynamicProps/dynamic.mjs';
|
|
7
8
|
import '../../lib/propsContext/propsContext.mjs';
|
|
8
9
|
import { PropsContextProvider } from '../../lib/propsContext/components/PropsContextProvider.mjs';
|
|
9
|
-
import 'react';
|
|
10
10
|
import '@mittwald/flow-icons';
|
|
11
11
|
import '../Icon/components/IconSetProvider.mjs';
|
|
12
12
|
import '../Icon/Icon.mjs';
|
|
@@ -14,18 +14,30 @@ import '../../views/IconView.mjs';
|
|
|
14
14
|
import { IconContextMenu } from '../Icon/components/icons/IconContextMenu.mjs';
|
|
15
15
|
import { flowComponent } from '../../lib/componentFactory/flowComponent.mjs';
|
|
16
16
|
import { ClearPropsContext } from '../../lib/propsContext/components/ClearPropsContext.mjs';
|
|
17
|
+
import locales from '../../../../../_virtual/_.locale.json@8caea407512a4a9945a6d45b68eaebed.mjs';
|
|
18
|
+
import '../TranslationProvider/TranslationProvider.mjs';
|
|
19
|
+
import { useLocalizedStringFormatter } from '../TranslationProvider/useLocalizedStringFormatter.mjs';
|
|
20
|
+
import * as Aria from 'react-aria-components';
|
|
17
21
|
|
|
18
22
|
const Message = flowComponent("Message", (props) => {
|
|
19
|
-
const {
|
|
23
|
+
const {
|
|
24
|
+
type = "responder",
|
|
25
|
+
children,
|
|
26
|
+
className,
|
|
27
|
+
color,
|
|
28
|
+
elementType = "article"
|
|
29
|
+
} = props;
|
|
30
|
+
const Element = elementType;
|
|
20
31
|
const rootClassName = clsx(styles.message, styles[type], className);
|
|
21
32
|
const style = color ? { "--message-background": color } : void 0;
|
|
33
|
+
const formatter = useLocalizedStringFormatter(locales, "Message");
|
|
22
34
|
const propsContext = {
|
|
23
35
|
Content: {
|
|
24
36
|
className: styles.content,
|
|
25
37
|
children: dynamic((props2) => {
|
|
26
38
|
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
27
|
-
/* @__PURE__ */ jsx("div", { className: styles.tipBorder }),
|
|
28
|
-
/* @__PURE__ */ jsx("div", { className: styles.tip }),
|
|
39
|
+
/* @__PURE__ */ jsx("div", { className: styles.tipBorder, "aria-hidden": true }),
|
|
40
|
+
/* @__PURE__ */ jsx("div", { className: styles.tip, "aria-hidden": true }),
|
|
29
41
|
props2.children
|
|
30
42
|
] });
|
|
31
43
|
})
|
|
@@ -44,14 +56,20 @@ const Message = flowComponent("Message", (props) => {
|
|
|
44
56
|
size: "s",
|
|
45
57
|
variant: "plain",
|
|
46
58
|
color: "secondary",
|
|
47
|
-
children: /* @__PURE__ */ jsx(IconContextMenu, {})
|
|
59
|
+
children: /* @__PURE__ */ jsx(IconContextMenu, {}),
|
|
60
|
+
"aria-label": formatter.format("options")
|
|
48
61
|
}
|
|
49
62
|
},
|
|
50
63
|
Text: { className: styles.date },
|
|
51
64
|
Align: {
|
|
52
65
|
wrapWith: /* @__PURE__ */ jsx(ClearPropsContext, {}),
|
|
53
|
-
className: styles.user
|
|
54
|
-
|
|
66
|
+
className: styles.user,
|
|
67
|
+
Avatar: { Initials: { "aria-hidden": true } }
|
|
68
|
+
},
|
|
69
|
+
children: dynamic((props2) => /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
70
|
+
/* @__PURE__ */ jsx(Aria.VisuallyHidden, { children: formatter.format("headerLabel") }),
|
|
71
|
+
props2.children
|
|
72
|
+
] }))
|
|
55
73
|
},
|
|
56
74
|
Button: {
|
|
57
75
|
size: "s",
|
|
@@ -65,7 +83,7 @@ const Message = flowComponent("Message", (props) => {
|
|
|
65
83
|
}
|
|
66
84
|
}
|
|
67
85
|
};
|
|
68
|
-
return /* @__PURE__ */ jsx(PropsContextProvider, { props: propsContext, children: /* @__PURE__ */ jsx(
|
|
86
|
+
return /* @__PURE__ */ jsx(PropsContextProvider, { props: propsContext, children: /* @__PURE__ */ jsx(Element, { className: rootClassName, style, children }) });
|
|
69
87
|
});
|
|
70
88
|
|
|
71
89
|
export { Message };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Message.mjs","sources":["../../../../../../../src/components/Message/Message.tsx"],"sourcesContent":["import type
|
|
1
|
+
{"version":3,"file":"Message.mjs","sources":["../../../../../../../src/components/Message/Message.tsx"],"sourcesContent":["import { type CSSProperties, type PropsWithChildren } from \"react\";\nimport clsx from \"clsx\";\nimport styles from \"./Message.module.scss\";\nimport type {\n PropsWithClassName,\n PropsWithElementType,\n} from \"@/lib/types/props\";\nimport {\n dynamic,\n type PropsContext,\n PropsContextProvider,\n} from \"@/lib/propsContext\";\nimport { IconContextMenu } from \"@/components/Icon/components/icons\";\nimport {\n flowComponent,\n type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport ClearPropsContext from \"@/lib/propsContext/components/ClearPropsContext\";\nimport locales from \"./locales/*.locale.json\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider\";\nimport * as Aria from \"react-aria-components\";\n\nexport interface MessageProps\n extends\n PropsWithChildren,\n PropsWithClassName,\n FlowComponentProps,\n PropsWithElementType<\"article\" | \"li\"> {\n /** Determines the color and orientation of the message. @default \"responder\" */\n type?: \"responder\" | \"sender\";\n color?: string;\n}\n\n/** @flr-generate all */\nexport const Message = flowComponent(\"Message\", (props) => {\n const {\n type = \"responder\",\n children,\n className,\n color,\n elementType = \"article\",\n } = props;\n\n const Element = elementType;\n\n const rootClassName = clsx(styles.message, styles[type], className);\n\n const style = color\n ? ({ \"--message-background\": color } as CSSProperties)\n : undefined;\n\n const formatter = useLocalizedStringFormatter(locales, \"Message\");\n\n const propsContext: PropsContext = {\n Content: {\n className: styles.content,\n children: dynamic((props) => {\n return (\n <>\n <div className={styles.tipBorder} aria-hidden />\n <div className={styles.tip} aria-hidden />\n {props.children}\n </>\n );\n }),\n },\n Header: {\n className: styles.header,\n Button: {\n className: styles.headerAction,\n size: \"s\",\n variant: \"plain\",\n color: \"secondary\",\n },\n ContextMenuTrigger: {\n Button: {\n className: styles.headerAction,\n size: \"s\",\n variant: \"plain\",\n color: \"secondary\",\n children: <IconContextMenu />,\n \"aria-label\": formatter.format(\"options\"),\n },\n },\n Text: { className: styles.date },\n Align: {\n wrapWith: <ClearPropsContext />,\n className: styles.user,\n Avatar: { Initials: { \"aria-hidden\": true } },\n },\n children: dynamic((props) => (\n <>\n <Aria.VisuallyHidden>\n {formatter.format(\"headerLabel\")}\n </Aria.VisuallyHidden>\n {props.children}\n </>\n )),\n },\n\n Button: {\n size: \"s\",\n className: styles.action,\n },\n ActionGroup: {\n className: styles.actionGroup,\n Button: {\n size: \"s\",\n className: styles.actionGroupAction,\n },\n },\n };\n\n return (\n <PropsContextProvider props={propsContext}>\n <Element className={rootClassName} style={style}>\n {children}\n </Element>\n </PropsContextProvider>\n );\n});\n\nexport default Message;\n"],"names":["props"],"mappings":"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"}
|
|
@@ -19,10 +19,11 @@ const MessageThread = flowComponent("MessageThread", (props) => {
|
|
|
19
19
|
styles.message,
|
|
20
20
|
styles[props2.type ?? "responder"]
|
|
21
21
|
);
|
|
22
|
-
})
|
|
22
|
+
}),
|
|
23
|
+
elementType: "li"
|
|
23
24
|
}
|
|
24
25
|
};
|
|
25
|
-
return /* @__PURE__ */ jsx(PropsContextProvider, { props: propsContext, children: /* @__PURE__ */ jsx("
|
|
26
|
+
return /* @__PURE__ */ jsx(PropsContextProvider, { props: propsContext, children: /* @__PURE__ */ jsx("ul", { className: rootClassName, children }) });
|
|
26
27
|
});
|
|
27
28
|
|
|
28
29
|
export { MessageThread };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MessageThread.mjs","sources":["../../../../../../../src/components/MessageThread/MessageThread.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport clsx from \"clsx\";\nimport styles from \"./MessageThread.module.scss\";\nimport {\n dynamic,\n type PropsContext,\n PropsContextProvider,\n} from \"@/lib/propsContext\";\nimport {\n flowComponent,\n type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\n\nexport type MessageThreadProps = PropsWithChildren &\n PropsWithClassName &\n FlowComponentProps;\n\n/** @flr-generate all */\nexport const MessageThread = flowComponent(\"MessageThread\", (props) => {\n const { children, className } = props;\n\n const rootClassName = clsx(styles.messageThread, className);\n\n const propsContext: PropsContext = {\n Message: {\n className: dynamic((props) => {\n return clsx(\n props.className,\n styles.message,\n styles[props.type ?? \"responder\"],\n );\n }),\n },\n };\n\n return (\n <PropsContextProvider props={propsContext}>\n <
|
|
1
|
+
{"version":3,"file":"MessageThread.mjs","sources":["../../../../../../../src/components/MessageThread/MessageThread.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport clsx from \"clsx\";\nimport styles from \"./MessageThread.module.scss\";\nimport {\n dynamic,\n type PropsContext,\n PropsContextProvider,\n} from \"@/lib/propsContext\";\nimport {\n flowComponent,\n type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\n\nexport type MessageThreadProps = PropsWithChildren &\n PropsWithClassName &\n FlowComponentProps;\n\n/** @flr-generate all */\nexport const MessageThread = flowComponent(\"MessageThread\", (props) => {\n const { children, className } = props;\n\n const rootClassName = clsx(styles.messageThread, className);\n\n const propsContext: PropsContext = {\n Message: {\n className: dynamic((props) => {\n return clsx(\n props.className,\n styles.message,\n styles[props.type ?? \"responder\"],\n );\n }),\n elementType: \"li\",\n },\n };\n\n return (\n <PropsContextProvider props={propsContext}>\n <ul className={rootClassName}>{children}</ul>\n </PropsContextProvider>\n );\n});\n\nexport default MessageThread;\n"],"names":["props"],"mappings":";;;;;;;;AAmBO,MAAM,aAAA,GAAgB,aAAA,CAAc,eAAA,EAAiB,CAAC,KAAA,KAAU;AACrE,EAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAU,GAAI,KAAA;AAEhC,EAAA,MAAM,aAAA,GAAgB,IAAA,CAAK,MAAA,CAAO,aAAA,EAAe,SAAS,CAAA;AAE1D,EAAA,MAAM,YAAA,GAA6B;AAAA,IACjC,OAAA,EAAS;AAAA,MACP,SAAA,EAAW,OAAA,CAAQ,CAACA,MAAAA,KAAU;AAC5B,QAAA,OAAO,IAAA;AAAA,UACLA,MAAAA,CAAM,SAAA;AAAA,UACN,MAAA,CAAO,OAAA;AAAA,UACP,MAAA,CAAOA,MAAAA,CAAM,IAAA,IAAQ,WAAW;AAAA,SAClC;AAAA,MACF,CAAC,CAAA;AAAA,MACD,WAAA,EAAa;AAAA;AACf,GACF;AAEA,EAAA,uBACE,GAAA,CAAC,wBAAqB,KAAA,EAAO,YAAA,EAC3B,8BAAC,IAAA,EAAA,EAAG,SAAA,EAAW,aAAA,EAAgB,QAAA,EAAS,CAAA,EAC1C,CAAA;AAEJ,CAAC;;;;"}
|
|
@@ -6,12 +6,18 @@ import 'react';
|
|
|
6
6
|
import clsx from 'clsx';
|
|
7
7
|
import { Separator } from '../../../Separator/Separator.mjs';
|
|
8
8
|
import { Content } from '../../../Content/Content.mjs';
|
|
9
|
+
import '../../../TranslationProvider/TranslationProvider.mjs';
|
|
10
|
+
import { useLocalizedStringFormatter } from '../../../TranslationProvider/useLocalizedStringFormatter.mjs';
|
|
11
|
+
import locales from '../../../../../../../_virtual/_.locale.json@164140296eee39fbc28322d0864a89ac.mjs';
|
|
12
|
+
import * as Aria from 'react-aria-components';
|
|
9
13
|
|
|
10
14
|
const MessageSeparator = (props) => {
|
|
11
15
|
const { children, className } = props;
|
|
12
16
|
const rootClassName = clsx(styles.messageSeparator, className);
|
|
13
|
-
|
|
17
|
+
const formatter = useLocalizedStringFormatter(locales, "MessageThread");
|
|
18
|
+
return /* @__PURE__ */ jsxs("li", { className: rootClassName, children: [
|
|
14
19
|
/* @__PURE__ */ jsx(Separator, { className: styles.separator }),
|
|
20
|
+
/* @__PURE__ */ jsx(Aria.VisuallyHidden, { children: formatter.format("separator.label") }),
|
|
15
21
|
/* @__PURE__ */ jsx(Content, { className: styles.content, children })
|
|
16
22
|
] });
|
|
17
23
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MessageSeparator.mjs","sources":["../../../../../../../../../src/components/MessageThread/components/MessageSeparator/MessageSeparator.tsx"],"sourcesContent":["import type { FC, PropsWithChildren } from \"react\";\nimport styles from \"./MessageSeparator.module.scss\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport React from \"react\";\nimport clsx from \"clsx\";\nimport { Separator } from \"@/components/Separator\";\nimport { Content } from \"@/components/Content\";\n\nexport interface MessageSeparatorProps\n extends PropsWithChildren, PropsWithClassName {}\n\n/** @flr-generate all */\nexport const MessageSeparator: FC<MessageSeparatorProps> = (props) => {\n const { children, className } = props;\n\n const rootClassName = clsx(styles.messageSeparator, className);\n\n return (\n <
|
|
1
|
+
{"version":3,"file":"MessageSeparator.mjs","sources":["../../../../../../../../../src/components/MessageThread/components/MessageSeparator/MessageSeparator.tsx"],"sourcesContent":["import type { FC, PropsWithChildren } from \"react\";\nimport styles from \"./MessageSeparator.module.scss\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport React from \"react\";\nimport clsx from \"clsx\";\nimport { Separator } from \"@/components/Separator\";\nimport { Content } from \"@/components/Content\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider\";\nimport locales from \"../../locales/*.locale.json\";\nimport * as Aria from \"react-aria-components\";\n\nexport interface MessageSeparatorProps\n extends PropsWithChildren, PropsWithClassName {}\n\n/** @flr-generate all */\nexport const MessageSeparator: FC<MessageSeparatorProps> = (props) => {\n const { children, className } = props;\n\n const rootClassName = clsx(styles.messageSeparator, className);\n\n const formatter = useLocalizedStringFormatter(locales, \"MessageThread\");\n\n return (\n <li className={rootClassName}>\n <Separator className={styles.separator} />\n <Aria.VisuallyHidden>\n {formatter.format(\"separator.label\")}\n </Aria.VisuallyHidden>\n <Content className={styles.content}>{children}</Content>\n </li>\n );\n};\nexport default MessageSeparator;\n"],"names":[],"mappings":";;;;;;;;;;;AAeO,MAAM,gBAAA,GAA8C,CAAC,KAAA,KAAU;AACpE,EAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAU,GAAI,KAAA;AAEhC,EAAA,MAAM,aAAA,GAAgB,IAAA,CAAK,MAAA,CAAO,gBAAA,EAAkB,SAAS,CAAA;AAE7D,EAAA,MAAM,SAAA,GAAY,2BAAA,CAA4B,OAAA,EAAS,eAAe,CAAA;AAEtE,EAAA,uBACE,IAAA,CAAC,IAAA,EAAA,EAAG,SAAA,EAAW,aAAA,EACb,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,SAAA,EAAA,EAAU,SAAA,EAAW,MAAA,CAAO,SAAA,EAAW,CAAA;AAAA,wBACvC,IAAA,CAAK,cAAA,EAAL,EACE,QAAA,EAAA,SAAA,CAAU,MAAA,CAAO,iBAAiB,CAAA,EACrC,CAAA;AAAA,oBACA,GAAA,CAAC,OAAA,EAAA,EAAQ,SAAA,EAAW,MAAA,CAAO,SAAU,QAAA,EAAS;AAAA,GAAA,EAChD,CAAA;AAEJ;;;;"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { PropsWithChildren } from 'react';
|
|
2
|
-
import { PropsWithClassName } from '../../lib/types/props';
|
|
2
|
+
import { PropsWithClassName, PropsWithElementType } from '../../lib/types/props';
|
|
3
3
|
import { FlowComponentProps } from '../../lib/componentFactory/flowComponent';
|
|
4
|
-
export interface MessageProps extends PropsWithChildren, PropsWithClassName, FlowComponentProps {
|
|
4
|
+
export interface MessageProps extends PropsWithChildren, PropsWithClassName, FlowComponentProps, PropsWithElementType<"article" | "li"> {
|
|
5
5
|
/** Determines the color and orientation of the message. @default "responder" */
|
|
6
6
|
type?: "responder" | "sender";
|
|
7
7
|
color?: string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Message.d.ts","sourceRoot":"","sources":["../../../../src/components/Message/Message.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,
|
|
1
|
+
{"version":3,"file":"Message.d.ts","sourceRoot":"","sources":["../../../../src/components/Message/Message.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAsB,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAGnE,OAAO,KAAK,EACV,kBAAkB,EAClB,oBAAoB,EACrB,MAAM,mBAAmB,CAAC;AAO3B,OAAO,EAEL,KAAK,kBAAkB,EACxB,MAAM,sCAAsC,CAAC;AAM9C,MAAM,WAAW,YACf,SACE,iBAAiB,EACjB,kBAAkB,EAClB,kBAAkB,EAClB,oBAAoB,CAAC,SAAS,GAAG,IAAI,CAAC;IACxC,gFAAgF;IAChF,IAAI,CAAC,EAAE,WAAW,GAAG,QAAQ,CAAC;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,wBAAwB;AACxB,eAAO,MAAM,OAAO,iGAsFlB,CAAC;AAEH,eAAe,OAAO,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MessageThread.d.ts","sourceRoot":"","sources":["../../../../src/components/MessageThread/MessageThread.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAC/C,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AAQ5D,OAAO,EAEL,KAAK,kBAAkB,EACxB,MAAM,sCAAsC,CAAC;AAE9C,MAAM,MAAM,kBAAkB,GAAG,iBAAiB,GAChD,kBAAkB,GAClB,kBAAkB,CAAC;AAErB,wBAAwB;AACxB,eAAO,MAAM,aAAa;;
|
|
1
|
+
{"version":3,"file":"MessageThread.d.ts","sourceRoot":"","sources":["../../../../src/components/MessageThread/MessageThread.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAC/C,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AAQ5D,OAAO,EAEL,KAAK,kBAAkB,EACxB,MAAM,sCAAsC,CAAC;AAE9C,MAAM,MAAM,kBAAkB,GAAG,iBAAiB,GAChD,kBAAkB,GAClB,kBAAkB,CAAC;AAErB,wBAAwB;AACxB,eAAO,MAAM,aAAa;;4GAuBxB,CAAC;AAEH,eAAe,aAAa,CAAC"}
|
package/dist/types/components/MessageThread/components/MessageSeparator/MessageSeparator.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MessageSeparator.d.ts","sourceRoot":"","sources":["../../../../../../src/components/MessageThread/components/MessageSeparator/MessageSeparator.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAEnD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;
|
|
1
|
+
{"version":3,"file":"MessageSeparator.d.ts","sourceRoot":"","sources":["../../../../../../src/components/MessageThread/components/MessageSeparator/MessageSeparator.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAEnD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AAS5D,MAAM,WAAW,qBACf,SAAQ,iBAAiB,EAAE,kBAAkB;CAAG;AAElD,wBAAwB;AACxB,eAAO,MAAM,gBAAgB,EAAE,EAAE,CAAC,qBAAqB,CAgBtD,CAAC;AACF,eAAe,gBAAgB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Default.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/MessageThread/stories/Default.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAKvD,OAAO,EAAoB,aAAa,EAAE,MAAM,4BAA4B,CAAC;
|
|
1
|
+
{"version":3,"file":"Default.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/MessageThread/stories/Default.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAKvD,OAAO,EAAoB,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAkD7E,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,aAAa,CA6BpC,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,aAAa,CAAC,CAAC;AAE5C,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mittwald/flow-react-components",
|
|
3
|
-
"version": "0.2.0-alpha.
|
|
3
|
+
"version": "0.2.0-alpha.886",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "A React implementation of Flow, mittwald’s design system",
|
|
6
6
|
"homepage": "https://mittwald.github.io/flow",
|
|
@@ -63,9 +63,9 @@
|
|
|
63
63
|
"@internationalized/string": "^3.2.9",
|
|
64
64
|
"@internationalized/string-compiler": "^3.4.1",
|
|
65
65
|
"@lezer/highlight": "^1.2.3",
|
|
66
|
-
"@mittwald/flow-icons": "0.2.0-alpha.
|
|
66
|
+
"@mittwald/flow-icons": "0.2.0-alpha.886",
|
|
67
67
|
"@mittwald/password-tools-js": "3.0.0-alpha.30",
|
|
68
|
-
"@mittwald/react-tunnel": "0.2.0-alpha.
|
|
68
|
+
"@mittwald/react-tunnel": "0.2.0-alpha.886",
|
|
69
69
|
"@mittwald/react-use-promise": "^4.2.2",
|
|
70
70
|
"@react-aria/form": "^3.2.1",
|
|
71
71
|
"@react-aria/i18n": "^3.13.1",
|
|
@@ -120,7 +120,7 @@
|
|
|
120
120
|
"@lezer/generator": "^1.8.0",
|
|
121
121
|
"@lezer/lr": "^1.4.10",
|
|
122
122
|
"@mittwald/flow-core": "",
|
|
123
|
-
"@mittwald/flow-design-tokens": "0.2.0-alpha.
|
|
123
|
+
"@mittwald/flow-design-tokens": "0.2.0-alpha.886",
|
|
124
124
|
"@mittwald/flow-icons-base": "",
|
|
125
125
|
"@mittwald/react-use-promise": "^4.2.2",
|
|
126
126
|
"@mittwald/remote-dom-react": "1.2.2-mittwald.10",
|
|
@@ -175,7 +175,7 @@
|
|
|
175
175
|
},
|
|
176
176
|
"peerDependencies": {
|
|
177
177
|
"@internationalized/date": "^3.12.2",
|
|
178
|
-
"@mittwald/flow-icons-pro": "0.2.0-alpha.
|
|
178
|
+
"@mittwald/flow-icons-pro": "0.2.0-alpha.885",
|
|
179
179
|
"@mittwald/react-use-promise": "^4.2.2",
|
|
180
180
|
"next": "^16.2.3",
|
|
181
181
|
"react": "^19.2.0",
|
|
@@ -196,5 +196,5 @@
|
|
|
196
196
|
"optional": true
|
|
197
197
|
}
|
|
198
198
|
},
|
|
199
|
-
"gitHead": "
|
|
199
|
+
"gitHead": "8749dad12785c668bbc6aecb67e98528977ac701"
|
|
200
200
|
}
|