@mittwald/flow-react-components 1.4.0-next.5 → 1.4.0-next.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.
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/Label/Label.mjs +33 -25
  6. package/dist/js/packages/components/src/components/Label/Label.mjs.map +1 -1
  7. package/dist/js/packages/components/src/components/Label/Label.module.mjs +4 -2
  8. package/dist/js/packages/components/src/components/Label/Label.module.mjs.map +1 -1
  9. package/package.json +9 -9
package/dist/js/packages/components/src/components/Label/Label.mjs CHANGED
@@ -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__ */ jsxs(Aria.Label, {
46
- ...rest,
47
- className: rootClassName,
48
- ref,
49
- children: [
50
- children,
51
- optional && optionalMarker,
52
- /* @__PURE__ */ jsx(UiComponentTunnelExit, {
53
- id: "contextualHelp",
54
- component: "Label",
55
- children: (children) => {
56
- if (React.Children.count(children) >= 1) return children;
57
- }
58
- }),
59
- /* @__PURE__ */ jsx(UiComponentTunnelExit, {
60
- id: "right",
61
- component: "Label",
62
- children: (children) => {
63
- if (React.Children.count(children) >= 1) return /* @__PURE__ */ jsx("div", {
64
- className: Label_module_default.right,
65
- children
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
  });
package/dist/js/packages/components/src/components/Label/Label.mjs.map CHANGED
@@ -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 {...rest} className={rootClassName} ref={ref}>\n {children}\n {optional && optionalMarker}\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 </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,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;EAC3B,UAAA,qBAAC,KAAK,OAAN;GAAY,GAAI;GAAM,WAAW;GAAoB;GAArD,UAAA;IACG;IACA,YAAY;IACb,oBAAC,uBAAD;KAAuB,IAAG;KAAiB,WAAU;KACjD,WAAA,aAAa;MACb,IAAI,MAAM,SAAS,MAAM,QAAQ,KAAK,GACpC,OAAO;KAIX;IACqB,CAAA;IACvB,oBAAC,uBAAD;KAAuB,IAAG;KAAQ,WAAU;KACxC,WAAA,aAAa;MACb,IAAI,MAAM,SAAS,MAAM,QAAQ,KAAK,GACpC,OAAO,oBAAC,OAAD;OAAK,WAAW,qBAAO;OAAQ;MAAc,CAAA;KAIxD;IACqB,CAAA;GACb;;CACQ,CAAA;AAE1B,CAAC"}
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"}
package/dist/js/packages/components/src/components/Label/Label.module.mjs CHANGED
@@ -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
package/dist/js/packages/components/src/components/Label/Label.module.mjs.map CHANGED
@@ -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":""}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mittwald/flow-react-components",
3
- "version": "1.4.0-next.5",
3
+ "version": "1.4.0-next.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.4.0-next.5",
86
+ "@mittwald/flow-icons": "^1.4.0-next.6",
87
87
  "@mittwald/password-tools-js": "^3.0.0",
88
- "@mittwald/react-tunnel": "^1.4.0-next.5",
88
+ "@mittwald/react-tunnel": "^1.4.0-next.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.4.0-next.5",
142
- "@mittwald/flow-design-tokens": "1.4.0-next.5",
143
- "@mittwald/flow-icons-base": "1.4.0-next.5",
141
+ "@mittwald/flow-core": "1.4.0-next.6",
142
+ "@mittwald/flow-design-tokens": "1.4.0-next.6",
143
+ "@mittwald/flow-icons-base": "1.4.0-next.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.4.0-next.5",
146
+ "@mittwald/typescript-config": "1.4.0-next.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.4.0-next.5",
198
+ "@mittwald/flow-icons-pro": "1.4.0-next.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": "5ec666d946ab9d48d85abb1bf35d44aa68c83623"
222
+ "gitHead": "5666c4be4df5f5a104c032aa2e1a8c1c28335046"
223
223
  }