@mittwald/flow-react-components 1.2.0-next.26 → 1.2.0-next.27

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.
Files changed (9) hide show
  1. package/dist/assets/component-index.json +1 -1
  2. package/dist/assets/doc-properties.json +1 -1
  3. package/dist/css/all-layered.css +1 -1
  4. package/dist/css/all.css +1 -1
  5. package/dist/js/packages/components/src/components/Navigation/Navigation.mjs +9 -0
  6. package/dist/js/packages/components/src/components/Navigation/Navigation.mjs.map +1 -1
  7. package/dist/js/packages/components/src/components/Navigation/Navigation.module.mjs.map +1 -1
  8. package/dist/types/components/Navigation/Navigation.d.ts.map +1 -1
  9. package/package.json +9 -9
package/dist/js/packages/components/src/components/Navigation/Navigation.mjs CHANGED
@@ -2,11 +2,19 @@
2
2
  /* */
3
3
  import { PropsContextProvider } from "../../lib/propsContext/components/PropsContextProvider.mjs";
4
4
  import { flowComponent } from "../../lib/componentFactory/flowComponent.mjs";
5
+ import dynamic from "../../lib/propsContext/dynamicProps/dynamic.mjs";
6
+ import { containsTextChild } from "../../lib/react/remote.mjs";
5
7
  import Navigation_module_default from "./Navigation.module.mjs";
6
8
  import { LinkListTunnelExit } from "./components/LinkListTunnelExit/LinkListTunnelExit.mjs";
7
9
  import clsx from "clsx";
10
+ import { Children } from "react";
8
11
  import { jsx, jsxs } from "react/jsx-runtime";
9
12
  //#region src/components/Navigation/Navigation.tsx
13
+ /**
14
+ * A bare text node is an anonymous flex item that no rule can reach, so give
15
+ * the label an element the item can truncate.
16
+ */
17
+ var wrapTextInLabel = (children) => Children.map(children, (child) => containsTextChild(child) ? /* @__PURE__ */ jsx("span", { children: child }) : child);
10
18
  /** @flr-generate all */
11
19
  var Navigation = flowComponent("Navigation", (props) => {
12
20
  const { className, children, ref, ...rest } = props;
@@ -15,6 +23,7 @@ var Navigation = flowComponent("Navigation", (props) => {
15
23
  wrapWith: /* @__PURE__ */ jsx("li", {}),
16
24
  className: Navigation_module_default.item,
17
25
  unstyled: true,
26
+ children: dynamic((linkProps) => wrapTextInLabel(linkProps.children)),
18
27
  Icon: {
19
28
  className: Navigation_module_default.icon,
20
29
  size: "m"
package/dist/js/packages/components/src/components/Navigation/Navigation.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Navigation.mjs","names":[],"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 AlertBadge: { 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"],"mappings":";;;;;;;;;;AAmBA,IAAa,aAAa,cAAc,eAAe,UAAU;CAC/D,MAAM,EAAE,WAAW,UAAU,KAAK,GAAG,SAAS;CAE9C,MAAM,gBAAgB,KAAK,0BAAO,YAAY,SAAS;CAEvD,MAAM,mBAAkD;EACtD,UAAU,oBAAC,MAAD,CAAK,CAAA;EACf,WAAW,0BAAO;EAClB,UAAU;EACV,MAAM;GACJ,WAAW,0BAAO;GAClB,MAAM;EACR;EACA,OAAO,EAAE,WAAW,0BAAO,MAAM;EACjC,YAAY,EAAE,WAAW,0BAAO,MAAM;EACtC,cAAc,EAAE,WAAW,0BAAO,MAAM;CAC1C;CAEA,OACE,oBAAC,sBAAD;EACE,OAAO;GACL,MAAM;IACJ,GAAG;IACH,QAAQ;KACN,IAAI;KACJ,WAAW;IACb;GACF;GACA,iBAAiB,EACf,MAAM,iBACR;EACF;EAEA,UAAA,qBAAC,OAAD;GAAK,WAAW;GAAe,MAAK;GAAa,GAAI;GAAW;GAAhE,UAAA,CACE,oBAAC,oBAAD;IAAoB,IAAG;IAAQ,WAAU;GAAc,CAAA,GACtD,QACE;;CACe,CAAA;AAE1B,CAAC"}
1
+ {"version":3,"file":"Navigation.mjs","names":[],"sources":["../../../../../../../src/components/Navigation/Navigation.tsx"],"sourcesContent":["import type { ComponentProps, PropsWithChildren, ReactNode } from \"react\";\nimport { Children } from \"react\";\nimport styles from \"./Navigation.module.scss\";\nimport clsx from \"clsx\";\nimport { dynamic, 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\";\nimport { containsTextChild } from \"@/lib/react/remote\";\n\nexport interface NavigationProps\n extends\n PropsWithChildren<ComponentProps<\"nav\">>,\n PropsWithClassName,\n FlowComponentProps<HTMLElement> {}\n\n/**\n * A bare text node is an anonymous flex item that no rule can reach, so give\n * the label an element the item can truncate.\n */\nconst wrapTextInLabel = (children: ReactNode): ReactNode =>\n Children.map(children, (child) =>\n containsTextChild(child) ? <span>{child}</span> : child,\n );\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 children: dynamic((linkProps) => wrapTextInLabel(linkProps.children)),\n Icon: {\n className: styles.icon,\n size: \"m\",\n },\n Badge: { className: styles.badge },\n AlertBadge: { 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"],"mappings":";;;;;;;;;;;;;;;;AAwBA,IAAM,mBAAmB,aACvB,SAAS,IAAI,WAAW,UACtB,kBAAkB,KAAK,IAAI,oBAAC,QAAD,EAAA,UAAO,MAAY,CAAA,IAAI,KACpD;;AAGF,IAAa,aAAa,cAAc,eAAe,UAAU;CAC/D,MAAM,EAAE,WAAW,UAAU,KAAK,GAAG,SAAS;CAE9C,MAAM,gBAAgB,KAAK,0BAAO,YAAY,SAAS;CAEvD,MAAM,mBAAkD;EACtD,UAAU,oBAAC,MAAD,CAAK,CAAA;EACf,WAAW,0BAAO;EAClB,UAAU;EACV,UAAU,SAAS,cAAc,gBAAgB,UAAU,QAAQ,CAAC;EACpE,MAAM;GACJ,WAAW,0BAAO;GAClB,MAAM;EACR;EACA,OAAO,EAAE,WAAW,0BAAO,MAAM;EACjC,YAAY,EAAE,WAAW,0BAAO,MAAM;EACtC,cAAc,EAAE,WAAW,0BAAO,MAAM;CAC1C;CAEA,OACE,oBAAC,sBAAD;EACE,OAAO;GACL,MAAM;IACJ,GAAG;IACH,QAAQ;KACN,IAAI;KACJ,WAAW;IACb;GACF;GACA,iBAAiB,EACf,MAAM,iBACR;EACF;EAEA,UAAA,qBAAC,OAAD;GAAK,WAAW;GAAe,MAAK;GAAa,GAAI;GAAW;GAAhE,UAAA,CACE,oBAAC,oBAAD;IAAoB,IAAG;IAAQ,WAAU;GAAc,CAAA,GACtD,QACE;;CACe,CAAA;AAE1B,CAAC"}
package/dist/js/packages/components/src/components/Navigation/Navigation.module.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Navigation.module.mjs","names":[],"sources":["../../../../../../../src/components/Navigation/Navigation.module.scss"],"sourcesContent":["@use \"@/styles/mixins/menuItem\";\n\n.navigation {\n display: flex;\n flex-direction: column;\n\n ul {\n display: flex;\n flex-direction: column;\n row-gap: var(--menu--item-to-item-spacing);\n\n &:empty {\n display: none;\n }\n }\n\n .item {\n @include menuItem.menuItem();\n\n flex-wrap: wrap;\n\n > .icon {\n order: 0;\n }\n\n > :not(.icon) {\n order: 1;\n }\n\n .badge {\n margin-inline-start: auto;\n }\n }\n\n hr {\n margin-bottom: var(--menu--group-to-group-spacing);\n }\n}\n"],"mappings":""}
1
+ {"version":3,"file":"Navigation.module.mjs","names":[],"sources":["../../../../../../../src/components/Navigation/Navigation.module.scss"],"sourcesContent":["@use \"@/styles/mixins/menuItem\";\n@use \"@/styles/mixins/ellipsis\";\n\n.navigation {\n display: flex;\n flex-direction: column;\n min-width: 0;\n\n ul {\n display: flex;\n flex-direction: column;\n row-gap: var(--menu--item-to-item-spacing);\n\n &:empty {\n display: none;\n }\n }\n\n .item {\n @include menuItem.menuItem();\n\n > .icon {\n order: 0;\n flex-shrink: 0;\n }\n\n > :not(.icon) {\n order: 1;\n }\n\n > :not(.icon, .badge) {\n @include ellipsis.ellipsis;\n\n min-width: 0;\n }\n\n .badge {\n margin-inline-start: auto;\n flex-shrink: 0;\n }\n }\n\n hr {\n margin-bottom: var(--menu--group-to-group-spacing);\n }\n}\n"],"mappings":""}
package/dist/types/components/Navigation/Navigation.d.ts.map CHANGED
@@ -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,iGAuCrB,CAAC;AAEH,eAAe,UAAU,CAAC"}
1
+ {"version":3,"file":"Navigation.d.ts","sourceRoot":"","sources":["../../../../src/components/Navigation/Navigation.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,iBAAiB,EAAa,MAAM,OAAO,CAAC;AAK1E,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAEL,KAAK,kBAAkB,EACxB,MAAM,sCAAsC,CAAC;AAK9C,MAAM,WAAW,eACf,SACE,iBAAiB,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC,EACxC,kBAAkB,EAClB,kBAAkB,CAAC,WAAW,CAAC;CAAG;AAWtC,wBAAwB;AACxB,eAAO,MAAM,UAAU,iGAwCrB,CAAC;AAEH,eAAe,UAAU,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mittwald/flow-react-components",
3
- "version": "1.2.0-next.26",
3
+ "version": "1.2.0-next.27",
4
4
  "type": "module",
5
5
  "description": "A React implementation of Flow, mittwald’s design system",
6
6
  "homepage": "https://flow.mittwald.de",
@@ -78,9 +78,9 @@
78
78
  "@internationalized/string-compiler": "^3.4.1",
79
79
  "@lezer/common": "^1.5.2",
80
80
  "@lezer/highlight": "^1.2.3",
81
- "@mittwald/flow-icons": "1.2.0-next.26",
81
+ "@mittwald/flow-icons": "1.2.0-next.27",
82
82
  "@mittwald/password-tools-js": "3.0.0-alpha.31",
83
- "@mittwald/react-tunnel": "1.2.0-next.26",
83
+ "@mittwald/react-tunnel": "1.2.0-next.27",
84
84
  "@mittwald/react-use-promise": "^4.2.2",
85
85
  "@react-aria/form": "^3.2.1",
86
86
  "@react-aria/i18n": "^3.13.1",
@@ -134,12 +134,12 @@
134
134
  "@internationalized/date": "^3.12.3",
135
135
  "@lezer/generator": "^1.8.0",
136
136
  "@lezer/lr": "^1.4.10",
137
- "@mittwald/flow-core": "1.2.0-next.26",
138
- "@mittwald/flow-design-tokens": "1.2.0-next.26",
139
- "@mittwald/flow-icons-base": "1.2.0-next.26",
137
+ "@mittwald/flow-core": "1.2.0-next.27",
138
+ "@mittwald/flow-design-tokens": "1.2.0-next.27",
139
+ "@mittwald/flow-icons-base": "1.2.0-next.27",
140
140
  "@mittwald/react-use-promise": "^4.2.2",
141
141
  "@mittwald/remote-dom-react": "1.2.2-mittwald.10",
142
- "@mittwald/typescript-config": "1.2.0-next.26",
142
+ "@mittwald/typescript-config": "1.2.0-next.27",
143
143
  "@nx/storybook": "^22.7.6",
144
144
  "@storybook/addon-a11y": "^10.5.10",
145
145
  "@storybook/addon-actions": "^9.0.8",
@@ -190,7 +190,7 @@
190
190
  },
191
191
  "peerDependencies": {
192
192
  "@internationalized/date": "^3.12.2",
193
- "@mittwald/flow-icons-pro": "1.2.0-next.26",
193
+ "@mittwald/flow-icons-pro": "1.2.0-next.27",
194
194
  "@mittwald/react-use-promise": "^4.2.2",
195
195
  "next": "^16.2.3",
196
196
  "react": "^19.2.0",
@@ -211,5 +211,5 @@
211
211
  "optional": true
212
212
  }
213
213
  },
214
- "gitHead": "f68bd5f056421e22aac4bed5619c93e9b0c05777"
214
+ "gitHead": "d8cd045572a80cc5a158078961156587cda1b7c0"
215
215
  }