@mittwald/flow-react-components 0.2.0-alpha.812 → 0.2.0-alpha.814
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +12 -0
- package/dist/assets/doc-properties.json +1955 -1893
- package/dist/css/all.css +1 -1
- package/dist/js/packages/components/src/components/Accordion/Accordion.mjs +20 -17
- package/dist/js/packages/components/src/components/Accordion/Accordion.mjs.map +1 -1
- package/dist/js/packages/components/src/components/List/components/Items/components/Item/components/AccordionButton.mjs +1 -1
- package/dist/js/packages/components/src/components/List/components/Items/components/Item/components/AccordionButton.mjs.map +1 -1
- package/dist/js/packages/components/src/components/Navigation/Navigation.mjs +2 -2
- package/dist/js/packages/components/src/components/Navigation/Navigation.mjs.map +1 -1
- package/dist/js/packages/components/src/components/Navigation/components/LinkListTunnelExit/LinkListTunnelExit.mjs +23 -0
- package/dist/js/packages/components/src/components/Navigation/components/LinkListTunnelExit/LinkListTunnelExit.mjs.map +1 -0
- package/dist/js/packages/components/src/components/Navigation/components/NavigationGroup/NavigationGroup.mjs +4 -4
- package/dist/js/packages/components/src/components/Navigation/components/NavigationGroup/NavigationGroup.mjs.map +1 -1
- package/dist/types/components/Accordion/Accordion.d.ts.map +1 -1
- package/dist/types/components/Navigation/Navigation.d.ts.map +1 -1
- package/dist/types/components/Navigation/components/LinkListTunnelExit/LinkListTunnelExit.d.ts +3 -0
- package/dist/types/components/Navigation/components/LinkListTunnelExit/LinkListTunnelExit.d.ts.map +1 -0
- package/dist/types/components/Navigation/components/NavigationGroup/NavigationGroup.d.ts.map +1 -1
- package/package.json +6 -6
|
@@ -36,21 +36,24 @@ const Accordion = flowComponent(
|
|
|
36
36
|
);
|
|
37
37
|
const headerId = useId();
|
|
38
38
|
const contentId = useId();
|
|
39
|
-
const
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
39
|
+
const HeaderButton = (props2) => {
|
|
40
|
+
const { children: children2 } = props2;
|
|
41
|
+
return /* @__PURE__ */ jsxs(
|
|
42
|
+
Button,
|
|
43
|
+
{
|
|
44
|
+
tunnel: null,
|
|
45
|
+
unstyled: true,
|
|
46
|
+
"aria-expanded": expanded,
|
|
47
|
+
className: styles.headerButton,
|
|
48
|
+
onPress: () => setExpanded((expanded2) => !expanded2),
|
|
49
|
+
"aria-controls": contentId,
|
|
50
|
+
children: [
|
|
51
|
+
children2,
|
|
52
|
+
/* @__PURE__ */ jsx(IconChevronDown, { className: styles.chevron })
|
|
53
|
+
]
|
|
54
|
+
}
|
|
55
|
+
);
|
|
56
|
+
};
|
|
54
57
|
const propsContext = {
|
|
55
58
|
Content: {
|
|
56
59
|
className: styles.contentInner,
|
|
@@ -63,11 +66,11 @@ const Accordion = flowComponent(
|
|
|
63
66
|
className: styles.header,
|
|
64
67
|
level: 4,
|
|
65
68
|
size: "xs",
|
|
66
|
-
children: dynamic((props2) =>
|
|
69
|
+
children: dynamic((props2) => /* @__PURE__ */ jsx(HeaderButton, { children: props2.children }))
|
|
67
70
|
},
|
|
68
71
|
Label: {
|
|
69
72
|
className: styles.header,
|
|
70
|
-
children: dynamic((props2) =>
|
|
73
|
+
children: dynamic((props2) => /* @__PURE__ */ jsx(HeaderButton, { children: props2.children }))
|
|
71
74
|
}
|
|
72
75
|
};
|
|
73
76
|
return /* @__PURE__ */ jsx("div", { ...rest, className: rootClassName, children: /* @__PURE__ */ jsxs(PropsContextProvider, { props: propsContext, dependencies: [expanded], children: [
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Accordion.mjs","sources":["../../../../../../../src/components/Accordion/Accordion.tsx"],"sourcesContent":["import type { ComponentProps, FC, PropsWithChildren
|
|
1
|
+
{"version":3,"file":"Accordion.mjs","sources":["../../../../../../../src/components/Accordion/Accordion.tsx"],"sourcesContent":["import type { ComponentProps, FC, PropsWithChildren } from \"react\";\nimport { useId, useState } from \"react\";\nimport clsx from \"clsx\";\nimport styles from \"./Accordion.module.scss\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { dynamic, PropsContextProvider } from \"@/lib/propsContext\";\nimport { Button } from \"@/components/Button\";\nimport { IconChevronDown } from \"@/components/Icon/components/icons\";\nimport { Activity } from \"@/components/Activity\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { UiComponentTunnelExit } from \"../UiComponentTunnel/UiComponentTunnelExit\";\n\nexport interface AccordionProps extends PropsWithChildren<\n ComponentProps<\"div\">\n> {\n /** Whether the accordion should be initially expanded. */\n defaultExpanded?: boolean;\n /** The visual variant of the accordion. @default \"default\" */\n variant?: \"default\" | \"outline\";\n}\n\n/** @flr-generate all */\nexport const Accordion: FC<AccordionProps> = flowComponent(\n \"Accordion\",\n (props) => {\n const {\n children,\n className,\n defaultExpanded = false,\n variant = \"default\",\n ...rest\n } = props;\n const [expanded, setExpanded] = useState(defaultExpanded);\n\n const rootClassName = clsx(\n styles.accordion,\n expanded && styles.expanded,\n className,\n variant === \"outline\" && styles.outline,\n );\n\n const headerId = useId();\n const contentId = useId();\n\n const HeaderButton: FC<PropsWithChildren> = (props) => {\n const { children } = props;\n return (\n <Button\n tunnel={null}\n unstyled\n aria-expanded={expanded}\n className={styles.headerButton}\n onPress={() => setExpanded((expanded) => !expanded)}\n aria-controls={contentId}\n >\n {children}\n <IconChevronDown className={styles.chevron} />\n </Button>\n );\n };\n\n const propsContext: PropsContext = {\n Content: {\n className: styles.contentInner,\n tunnel: {\n id: \"content\",\n component: \"Accordion\",\n },\n },\n Heading: {\n className: styles.header,\n level: 4,\n size: \"xs\",\n children: dynamic((props) => (\n <HeaderButton>{props.children}</HeaderButton>\n )),\n },\n Label: {\n className: styles.header,\n children: dynamic((props) => (\n <HeaderButton>{props.children}</HeaderButton>\n )),\n },\n };\n\n return (\n <div {...rest} className={rootClassName}>\n <PropsContextProvider props={propsContext} dependencies={[expanded]}>\n {children}\n <div\n aria-labelledby={headerId}\n id={contentId}\n role=\"region\"\n hidden={!expanded}\n className={styles.content}\n >\n <Activity isActive={expanded} inactiveDelay={1000}>\n <UiComponentTunnelExit id=\"content\" component=\"Accordion\" />\n </Activity>\n </div>\n </PropsContextProvider>\n </div>\n );\n },\n {\n type: \"layout\",\n },\n);\n\nexport default Accordion;\n"],"names":["props","children","expanded"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AccordionButton.mjs","sources":["../../../../../../../../../../../../src/components/List/components/Items/components/Item/components/AccordionButton.tsx"],"sourcesContent":["import type { FC, PropsWithChildren } from \"react\";\nimport {\n IconChevronDown,\n IconChevronUp,\n} from \"@/components/Icon/components/icons\";\nimport locales from \"../../../../../locales/*.locale.json\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\nimport ButtonView from \"@/views/ButtonView\";\nimport styles from \"../../../../ListItemView/ListItemView.module.scss\";\n\ninterface Props extends PropsWithChildren {\n isExpanded: boolean;\n toggle: () => void;\n contentElementId: string;\n}\n\nexport const AccordionButton: FC<Props> = (props) => {\n const { isExpanded, toggle, children, contentElementId } = props;\n const stringFormatter = useLocalizedStringFormatter(locales, \"List\");\n\n return (\n <>\n <ButtonView\n className={styles.action}\n tunnel={{\n id: \"button\",\n component: \"
|
|
1
|
+
{"version":3,"file":"AccordionButton.mjs","sources":["../../../../../../../../../../../../src/components/List/components/Items/components/Item/components/AccordionButton.tsx"],"sourcesContent":["import type { FC, PropsWithChildren } from \"react\";\nimport {\n IconChevronDown,\n IconChevronUp,\n} from \"@/components/Icon/components/icons\";\nimport locales from \"../../../../../locales/*.locale.json\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\nimport ButtonView from \"@/views/ButtonView\";\nimport styles from \"../../../../ListItemView/ListItemView.module.scss\";\n\ninterface Props extends PropsWithChildren {\n isExpanded: boolean;\n toggle: () => void;\n contentElementId: string;\n}\n\nexport const AccordionButton: FC<Props> = (props) => {\n const { isExpanded, toggle, children, contentElementId } = props;\n const stringFormatter = useLocalizedStringFormatter(locales, \"List\");\n\n return (\n <>\n <ButtonView\n className={styles.action}\n tunnel={{\n id: \"button\",\n component: \"ListItemView\",\n }}\n variant=\"plain\"\n color=\"secondary\"\n onPress={toggle}\n aria-label={stringFormatter.format(\n \"toggleExpandButton.\" + (isExpanded ? \"collapse\" : \"expand\"),\n )}\n aria-controls={contentElementId}\n aria-expanded={isExpanded}\n >\n {isExpanded ? <IconChevronUp /> : <IconChevronDown />}\n </ButtonView>\n {isExpanded && children}\n </>\n );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;AAgBO,MAAM,eAAA,GAA6B,CAAC,KAAA,KAAU;AACnD,EAAA,MAAM,EAAE,UAAA,EAAY,MAAA,EAAQ,QAAA,EAAU,kBAAiB,GAAI,KAAA;AAC3D,EAAA,MAAM,eAAA,GAAkB,2BAAA,CAA4B,OAAA,EAAS,MAAM,CAAA;AAEnE,EAAA,uBACE,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,oBAAA,GAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACC,WAAW,MAAA,CAAO,MAAA;AAAA,QAClB,MAAA,EAAQ;AAAA,UACN,EAAA,EAAI,QAAA;AAAA,UACJ,SAAA,EAAW;AAAA,SACb;AAAA,QACA,OAAA,EAAQ,OAAA;AAAA,QACR,KAAA,EAAM,WAAA;AAAA,QACN,OAAA,EAAS,MAAA;AAAA,QACT,cAAY,eAAA,CAAgB,MAAA;AAAA,UAC1B,qBAAA,IAAyB,aAAa,UAAA,GAAa,QAAA;AAAA,SACrD;AAAA,QACA,eAAA,EAAe,gBAAA;AAAA,QACf,eAAA,EAAe,UAAA;AAAA,QAEd,QAAA,EAAA,UAAA,mBAAa,GAAA,CAAC,aAAA,EAAA,EAAc,CAAA,uBAAM,eAAA,EAAA,EAAgB;AAAA;AAAA,KACrD;AAAA,IACC,UAAA,IAAc;AAAA,GAAA,EACjB,CAAA;AAEJ;;;;"}
|
|
@@ -6,7 +6,7 @@ import clsx from 'clsx';
|
|
|
6
6
|
import '../../lib/propsContext/propsContext.mjs';
|
|
7
7
|
import { PropsContextProvider } from '../../lib/propsContext/components/PropsContextProvider.mjs';
|
|
8
8
|
import { flowComponent } from '../../lib/componentFactory/flowComponent.mjs';
|
|
9
|
-
import {
|
|
9
|
+
import { LinkListTunnelExit } from './components/LinkListTunnelExit/LinkListTunnelExit.mjs';
|
|
10
10
|
|
|
11
11
|
const Navigation = flowComponent("Navigation", (props) => {
|
|
12
12
|
const { className, children, ref, ...rest } = props;
|
|
@@ -38,7 +38,7 @@ const Navigation = flowComponent("Navigation", (props) => {
|
|
|
38
38
|
}
|
|
39
39
|
},
|
|
40
40
|
children: /* @__PURE__ */ jsxs("nav", { className: rootClassName, role: "navigation", ...rest, ref, children: [
|
|
41
|
-
/* @__PURE__ */ jsx(
|
|
41
|
+
/* @__PURE__ */ jsx(LinkListTunnelExit, { id: "links", component: "Navigation" }),
|
|
42
42
|
children
|
|
43
43
|
] })
|
|
44
44
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Navigation.mjs","sources":["../../../../../../../src/components/Navigation/Navigation.tsx"],"sourcesContent":["import type { ComponentProps, PropsWithChildren } from \"react\";\nimport styles from \"./Navigation.module.scss\";\nimport clsx from \"clsx\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport {\n flowComponent,\n type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport type { ComponentPropsContext } from \"@/lib/propsContext/types\";\nimport {
|
|
1
|
+
{"version":3,"file":"Navigation.mjs","sources":["../../../../../../../src/components/Navigation/Navigation.tsx"],"sourcesContent":["import type { ComponentProps, PropsWithChildren } from \"react\";\nimport styles from \"./Navigation.module.scss\";\nimport clsx from \"clsx\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport {\n flowComponent,\n type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport type { ComponentPropsContext } from \"@/lib/propsContext/types\";\nimport { LinkListTunnelExit } from \"@/components/Navigation/components/LinkListTunnelExit/LinkListTunnelExit\";\n\nexport interface NavigationProps\n extends\n PropsWithChildren<ComponentProps<\"nav\">>,\n PropsWithClassName,\n FlowComponentProps<HTMLElement> {}\n\n/** @flr-generate all */\nexport const Navigation = flowComponent(\"Navigation\", (props) => {\n const { className, children, ref, ...rest } = props;\n\n const rootClassName = clsx(styles.navigation, className);\n\n const linkPropsContext: ComponentPropsContext<\"Link\"> = {\n wrapWith: <li />,\n className: styles.item,\n unstyled: true,\n Icon: {\n className: styles.icon,\n size: \"m\",\n },\n Badge: { className: styles.badge },\n CounterBadge: { className: styles.badge },\n };\n\n return (\n <PropsContextProvider\n props={{\n Link: {\n ...linkPropsContext,\n tunnel: {\n id: \"links\",\n component: \"Navigation\",\n },\n },\n NavigationGroup: {\n Link: linkPropsContext,\n },\n }}\n >\n <nav className={rootClassName} role=\"navigation\" {...rest} ref={ref}>\n <LinkListTunnelExit id=\"links\" component=\"Navigation\" />\n {children}\n </nav>\n </PropsContextProvider>\n );\n});\n\nexport default Navigation;\n"],"names":[],"mappings":";;;;;;;;AAmBO,MAAM,UAAA,GAAa,aAAA,CAAc,YAAA,EAAc,CAAC,KAAA,KAAU;AAC/D,EAAA,MAAM,EAAE,SAAA,EAAW,QAAA,EAAU,GAAA,EAAK,GAAG,MAAK,GAAI,KAAA;AAE9C,EAAA,MAAM,aAAA,GAAgB,IAAA,CAAK,MAAA,CAAO,UAAA,EAAY,SAAS,CAAA;AAEvD,EAAA,MAAM,gBAAA,GAAkD;AAAA,IACtD,QAAA,sBAAW,IAAA,EAAA,EAAG,CAAA;AAAA,IACd,WAAW,MAAA,CAAO,IAAA;AAAA,IAClB,QAAA,EAAU,IAAA;AAAA,IACV,IAAA,EAAM;AAAA,MACJ,WAAW,MAAA,CAAO,IAAA;AAAA,MAClB,IAAA,EAAM;AAAA,KACR;AAAA,IACA,KAAA,EAAO,EAAE,SAAA,EAAW,MAAA,CAAO,KAAA,EAAM;AAAA,IACjC,YAAA,EAAc,EAAE,SAAA,EAAW,MAAA,CAAO,KAAA;AAAM,GAC1C;AAEA,EAAA,uBACE,GAAA;AAAA,IAAC,oBAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO;AAAA,QACL,IAAA,EAAM;AAAA,UACJ,GAAG,gBAAA;AAAA,UACH,MAAA,EAAQ;AAAA,YACN,EAAA,EAAI,OAAA;AAAA,YACJ,SAAA,EAAW;AAAA;AACb,SACF;AAAA,QACA,eAAA,EAAiB;AAAA,UACf,IAAA,EAAM;AAAA;AACR,OACF;AAAA,MAEA,QAAA,kBAAA,IAAA,CAAC,SAAI,SAAA,EAAW,aAAA,EAAe,MAAK,YAAA,EAAc,GAAG,MAAM,GAAA,EACzD,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,kBAAA,EAAA,EAAmB,EAAA,EAAG,OAAA,EAAQ,SAAA,EAAU,YAAA,EAAa,CAAA;AAAA,QACrD;AAAA,OAAA,EACH;AAAA;AAAA,GACF;AAEJ,CAAC;;;;"}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
"use client"
|
|
2
|
+
/* */
|
|
3
|
+
import { jsx } from 'react/jsx-runtime';
|
|
4
|
+
import { Children } from 'react';
|
|
5
|
+
import { UiComponentTunnelExit } from '../../../UiComponentTunnel/UiComponentTunnelExit.mjs';
|
|
6
|
+
|
|
7
|
+
const LinkListTunnelExit = (props) => {
|
|
8
|
+
return /* @__PURE__ */ jsx(
|
|
9
|
+
UiComponentTunnelExit,
|
|
10
|
+
{
|
|
11
|
+
...props,
|
|
12
|
+
children: (children) => {
|
|
13
|
+
if (Children.count(children) >= 1) {
|
|
14
|
+
return /* @__PURE__ */ jsx("ul", { children });
|
|
15
|
+
}
|
|
16
|
+
return null;
|
|
17
|
+
}
|
|
18
|
+
}
|
|
19
|
+
);
|
|
20
|
+
};
|
|
21
|
+
|
|
22
|
+
export { LinkListTunnelExit };
|
|
23
|
+
//# sourceMappingURL=LinkListTunnelExit.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"LinkListTunnelExit.mjs","sources":["../../../../../../../../../src/components/Navigation/components/LinkListTunnelExit/LinkListTunnelExit.tsx"],"sourcesContent":["import { Children } from \"react\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\n\nexport const LinkListTunnelExit: typeof UiComponentTunnelExit = (props) => {\n return (\n <UiComponentTunnelExit\n {...props}\n children={(children) => {\n if (Children.count(children) >= 1) {\n return <ul>{children}</ul>;\n }\n\n return null;\n }}\n />\n );\n};\n"],"names":[],"mappings":";;;;AAGO,MAAM,kBAAA,GAAmD,CAAC,KAAA,KAAU;AACzE,EAAA,uBACE,GAAA;AAAA,IAAC,qBAAA;AAAA,IAAA;AAAA,MACE,GAAG,KAAA;AAAA,MACJ,QAAA,EAAU,CAAC,QAAA,KAAa;AACtB,QAAA,IAAI,QAAA,CAAS,KAAA,CAAM,QAAQ,CAAA,IAAK,CAAA,EAAG;AACjC,UAAA,uBAAO,GAAA,CAAC,QAAI,QAAA,EAAS,CAAA;AAAA,QACvB;AAEA,QAAA,OAAO,IAAA;AAAA,MACT;AAAA;AAAA,GACF;AAEJ;;;;"}
|
|
@@ -9,7 +9,7 @@ import { PropsContextProvider } from '../../../../lib/propsContext/components/Pr
|
|
|
9
9
|
import { Accordion } from '../../../Accordion/Accordion.mjs';
|
|
10
10
|
import { Content } from '../../../Content/Content.mjs';
|
|
11
11
|
import { flowComponent } from '../../../../lib/componentFactory/flowComponent.mjs';
|
|
12
|
-
import {
|
|
12
|
+
import { LinkListTunnelExit } from '../LinkListTunnelExit/LinkListTunnelExit.mjs';
|
|
13
13
|
|
|
14
14
|
const NavigationGroup = flowComponent("NavigationGroup", (props) => {
|
|
15
15
|
const { children, className, collapsable, ...rest } = props;
|
|
@@ -31,13 +31,13 @@ const NavigationGroup = flowComponent("NavigationGroup", (props) => {
|
|
|
31
31
|
}
|
|
32
32
|
}
|
|
33
33
|
};
|
|
34
|
-
const collapsableUi = /* @__PURE__ */ jsxs(Accordion, { defaultExpanded: true, children: [
|
|
34
|
+
const collapsableUi = /* @__PURE__ */ jsxs(Accordion, { defaultExpanded: true, className: rootClassName, children: [
|
|
35
35
|
children,
|
|
36
|
-
/* @__PURE__ */ jsx(Content, { children: /* @__PURE__ */ jsx(
|
|
36
|
+
/* @__PURE__ */ jsx(Content, { children: /* @__PURE__ */ jsx(LinkListTunnelExit, { id: "groupLinks", component: "NavigationGroup" }) })
|
|
37
37
|
] });
|
|
38
38
|
const defaultUi = /* @__PURE__ */ jsxs("section", { "aria-labelledby": generatedId, className: rootClassName, ...rest, children: [
|
|
39
39
|
children,
|
|
40
|
-
/* @__PURE__ */ jsx(
|
|
40
|
+
/* @__PURE__ */ jsx(LinkListTunnelExit, { id: "groupLinks", component: "NavigationGroup" })
|
|
41
41
|
] });
|
|
42
42
|
return /* @__PURE__ */ jsx(PropsContextProvider, { props: propsContext, dependencies: [generatedId], children: collapsable ? collapsableUi : defaultUi });
|
|
43
43
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NavigationGroup.mjs","sources":["../../../../../../../../../src/components/Navigation/components/NavigationGroup/NavigationGroup.tsx"],"sourcesContent":["import type
|
|
1
|
+
{"version":3,"file":"NavigationGroup.mjs","sources":["../../../../../../../../../src/components/Navigation/components/NavigationGroup/NavigationGroup.tsx"],"sourcesContent":["import { type ComponentProps, type PropsWithChildren } from \"react\";\nimport { useId } from \"react\";\nimport clsx from \"clsx\";\nimport styles from \"./NavigationGroup.module.scss\";\nimport { type PropsContext, PropsContextProvider } from \"@/lib/propsContext\";\nimport { Accordion } from \"@/components/Accordion\";\nimport { Content } from \"@/components/Content\";\nimport {\n flowComponent,\n type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport { LinkListTunnelExit } from \"@/components/Navigation/components/LinkListTunnelExit/LinkListTunnelExit\";\n\nexport interface NavigationGroupProps\n extends\n PropsWithChildren<ComponentProps<\"section\">>,\n FlowComponentProps<HTMLElement> {\n collapsable?: boolean;\n}\n\n/** @flr-generate all */\nexport const NavigationGroup = flowComponent(\"NavigationGroup\", (props) => {\n const { children, className, collapsable, ...rest } = props;\n\n const rootClassName = clsx(\n styles.navigationGroup,\n collapsable && styles.collapsable,\n className,\n );\n\n const generatedId = useId();\n\n const propsContext: PropsContext = {\n Label: {\n id: generatedId,\n className: styles.label,\n },\n Link: {\n tunnel: {\n id: \"groupLinks\",\n component: \"NavigationGroup\",\n },\n },\n };\n\n const collapsableUi = (\n <Accordion defaultExpanded className={rootClassName}>\n {children}\n <Content>\n <LinkListTunnelExit id=\"groupLinks\" component=\"NavigationGroup\" />\n </Content>\n </Accordion>\n );\n\n const defaultUi = (\n <section aria-labelledby={generatedId} className={rootClassName} {...rest}>\n {children}\n <LinkListTunnelExit id=\"groupLinks\" component=\"NavigationGroup\" />\n </section>\n );\n\n return (\n <PropsContextProvider props={propsContext} dependencies={[generatedId]}>\n {collapsable ? collapsableUi : defaultUi}\n </PropsContextProvider>\n );\n});\n\nexport default NavigationGroup;\n"],"names":[],"mappings":";;;;;;;;;;;AAqBO,MAAM,eAAA,GAAkB,aAAA,CAAc,iBAAA,EAAmB,CAAC,KAAA,KAAU;AACzE,EAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAW,WAAA,EAAa,GAAG,MAAK,GAAI,KAAA;AAEtD,EAAA,MAAM,aAAA,GAAgB,IAAA;AAAA,IACpB,MAAA,CAAO,eAAA;AAAA,IACP,eAAe,MAAA,CAAO,WAAA;AAAA,IACtB;AAAA,GACF;AAEA,EAAA,MAAM,cAAc,KAAA,EAAM;AAE1B,EAAA,MAAM,YAAA,GAA6B;AAAA,IACjC,KAAA,EAAO;AAAA,MACL,EAAA,EAAI,WAAA;AAAA,MACJ,WAAW,MAAA,CAAO;AAAA,KACpB;AAAA,IACA,IAAA,EAAM;AAAA,MACJ,MAAA,EAAQ;AAAA,QACN,EAAA,EAAI,YAAA;AAAA,QACJ,SAAA,EAAW;AAAA;AACb;AACF,GACF;AAEA,EAAA,MAAM,gCACJ,IAAA,CAAC,SAAA,EAAA,EAAU,eAAA,EAAe,IAAA,EAAC,WAAW,aAAA,EACnC,QAAA,EAAA;AAAA,IAAA,QAAA;AAAA,oBACD,GAAA,CAAC,WACC,QAAA,kBAAA,GAAA,CAAC,kBAAA,EAAA,EAAmB,IAAG,YAAA,EAAa,SAAA,EAAU,mBAAkB,CAAA,EAClE;AAAA,GAAA,EACF,CAAA;AAGF,EAAA,MAAM,SAAA,wBACH,SAAA,EAAA,EAAQ,iBAAA,EAAiB,aAAa,SAAA,EAAW,aAAA,EAAgB,GAAG,IAAA,EAClE,QAAA,EAAA;AAAA,IAAA,QAAA;AAAA,oBACD,GAAA,CAAC,kBAAA,EAAA,EAAmB,EAAA,EAAG,YAAA,EAAa,WAAU,iBAAA,EAAkB;AAAA,GAAA,EAClE,CAAA;AAGF,EAAA,uBACE,GAAA,CAAC,oBAAA,EAAA,EAAqB,KAAA,EAAO,YAAA,EAAc,YAAA,EAAc,CAAC,WAAW,CAAA,EAClE,QAAA,EAAA,WAAA,GAAc,aAAA,GAAgB,SAAA,EACjC,CAAA;AAEJ,CAAC;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Accordion.d.ts","sourceRoot":"","sources":["../../../../src/components/Accordion/Accordion.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,EAAE,EAAE,iBAAiB,
|
|
1
|
+
{"version":3,"file":"Accordion.d.ts","sourceRoot":"","sources":["../../../../src/components/Accordion/Accordion.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,EAAE,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAYnE,MAAM,WAAW,cAAe,SAAQ,iBAAiB,CACvD,cAAc,CAAC,KAAK,CAAC,CACtB;IACC,0DAA0D;IAC1D,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,8DAA8D;IAC9D,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;CACjC;AAED,wBAAwB;AACxB,eAAO,MAAM,SAAS,EAAE,EAAE,CAAC,cAAc,CAqFxC,CAAC;AAEF,eAAe,SAAS,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Navigation.d.ts","sourceRoot":"","sources":["../../../../src/components/Navigation/Navigation.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAI/D,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAEL,KAAK,kBAAkB,EACxB,MAAM,sCAAsC,CAAC;AAI9C,MAAM,WAAW,eACf,SACE,iBAAiB,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC,EACxC,kBAAkB,EAClB,kBAAkB,CAAC,WAAW,CAAC;CAAG;AAEtC,wBAAwB;AACxB,eAAO,MAAM,UAAU,
|
|
1
|
+
{"version":3,"file":"Navigation.d.ts","sourceRoot":"","sources":["../../../../src/components/Navigation/Navigation.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAI/D,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAEL,KAAK,kBAAkB,EACxB,MAAM,sCAAsC,CAAC;AAI9C,MAAM,WAAW,eACf,SACE,iBAAiB,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC,EACxC,kBAAkB,EAClB,kBAAkB,CAAC,WAAW,CAAC;CAAG;AAEtC,wBAAwB;AACxB,eAAO,MAAM,UAAU,iGAsCrB,CAAC;AAEH,eAAe,UAAU,CAAC"}
|
package/dist/types/components/Navigation/components/LinkListTunnelExit/LinkListTunnelExit.d.ts.map
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"LinkListTunnelExit.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Navigation/components/LinkListTunnelExit/LinkListTunnelExit.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,qBAAqB,EAAE,MAAM,sDAAsD,CAAC;AAE7F,eAAO,MAAM,kBAAkB,EAAE,OAAO,qBAavC,CAAC"}
|
package/dist/types/components/Navigation/components/NavigationGroup/NavigationGroup.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NavigationGroup.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Navigation/components/NavigationGroup/NavigationGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,
|
|
1
|
+
{"version":3,"file":"NavigationGroup.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Navigation/components/NavigationGroup/NavigationGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAOpE,OAAO,EAEL,KAAK,kBAAkB,EACxB,MAAM,sCAAsC,CAAC;AAG9C,MAAM,WAAW,oBACf,SACE,iBAAiB,CAAC,cAAc,CAAC,SAAS,CAAC,CAAC,EAC5C,kBAAkB,CAAC,WAAW,CAAC;IACjC,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,wBAAwB;AACxB,eAAO,MAAM,eAAe,sGA6C1B,CAAC;AAEH,eAAe,eAAe,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.814",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "A React implementation of Flow, mittwald’s design system",
|
|
6
6
|
"homepage": "https://mittwald.github.io/flow",
|
|
@@ -60,9 +60,9 @@
|
|
|
60
60
|
"@codemirror/lint": "^6.9.5",
|
|
61
61
|
"@internationalized/string": "^3.2.7",
|
|
62
62
|
"@lezer/highlight": "^1.2.3",
|
|
63
|
-
"@mittwald/flow-icons": "0.2.0-alpha.
|
|
63
|
+
"@mittwald/flow-icons": "0.2.0-alpha.814",
|
|
64
64
|
"@mittwald/password-tools-js": "3.0.0-alpha.29",
|
|
65
|
-
"@mittwald/react-tunnel": "0.2.0-alpha.
|
|
65
|
+
"@mittwald/react-tunnel": "0.2.0-alpha.814",
|
|
66
66
|
"@mittwald/react-use-promise": "^4.2.2",
|
|
67
67
|
"@react-aria/form": "^3.1.3",
|
|
68
68
|
"@react-aria/i18n": "^3.12.16",
|
|
@@ -116,7 +116,7 @@
|
|
|
116
116
|
"@lezer/generator": "^1.8.0",
|
|
117
117
|
"@lezer/lr": "^1.4.8",
|
|
118
118
|
"@mittwald/flow-core": "",
|
|
119
|
-
"@mittwald/flow-design-tokens": "0.2.0-alpha.
|
|
119
|
+
"@mittwald/flow-design-tokens": "0.2.0-alpha.814",
|
|
120
120
|
"@mittwald/flow-icons-base": "",
|
|
121
121
|
"@mittwald/react-use-promise": "^4.2.2",
|
|
122
122
|
"@mittwald/remote-dom-react": "1.2.2-mittwald.10",
|
|
@@ -169,7 +169,7 @@
|
|
|
169
169
|
},
|
|
170
170
|
"peerDependencies": {
|
|
171
171
|
"@internationalized/date": "^3.10.0",
|
|
172
|
-
"@mittwald/flow-icons-pro": "0.2.0-alpha.
|
|
172
|
+
"@mittwald/flow-icons-pro": "0.2.0-alpha.813",
|
|
173
173
|
"@mittwald/react-use-promise": "^4.2.2",
|
|
174
174
|
"next": "*",
|
|
175
175
|
"react": "^19.2.0",
|
|
@@ -190,5 +190,5 @@
|
|
|
190
190
|
"optional": true
|
|
191
191
|
}
|
|
192
192
|
},
|
|
193
|
-
"gitHead": "
|
|
193
|
+
"gitHead": "6ed780a1dac798b319115657ac77c3c5d2d11157"
|
|
194
194
|
}
|