@mittwald/flow-react-components 0.2.0-alpha.804 → 0.2.0-alpha.805

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 (33) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/dist/assets/doc-properties.json +370 -349
  3. package/dist/css/all.css +1 -1
  4. package/dist/js/_virtual/_.locale.json@cbc1b50fe3e51afbdb1b35a65308b79e.mjs +14 -0
  5. package/dist/js/_virtual/_.locale.json@cbc1b50fe3e51afbdb1b35a65308b79e.mjs.map +1 -0
  6. package/dist/js/packages/components/src/components/CodeBlock/CodeBlock.mjs +70 -16
  7. package/dist/js/packages/components/src/components/CodeBlock/CodeBlock.mjs.map +1 -1
  8. package/dist/js/packages/components/src/components/CodeBlock/CodeBlock.module.scss.mjs +7 -3
  9. package/dist/js/packages/components/src/components/CodeBlock/CodeBlock.module.scss.mjs.map +1 -1
  10. package/dist/js/packages/components/src/components/CodeEditor/CodeEditor.mjs +1 -1
  11. package/dist/js/packages/components/src/components/CodeEditor/CodeEditor.mjs.map +1 -1
  12. package/dist/js/packages/components/src/components/CodeEditor/CodeEditor.module.scss.mjs +3 -1
  13. package/dist/js/packages/components/src/components/CodeEditor/CodeEditor.module.scss.mjs.map +1 -1
  14. package/dist/js/packages/components/src/components/CodeEditor/themes/defaultEditorTheme.mjs +4 -4
  15. package/dist/js/packages/components/src/components/CodeEditor/themes/defaultEditorTheme.mjs.map +1 -1
  16. package/dist/js/packages/components/src/components/DatePicker/components/DateInput/DateInput.module.scss.mjs +1 -2
  17. package/dist/js/packages/components/src/components/DatePicker/components/DateInput/DateInput.module.scss.mjs.map +1 -1
  18. package/dist/js/packages/components/src/components/DateRangePicker/components/DateRangeInput/DateRangeInput.module.scss.mjs +1 -2
  19. package/dist/js/packages/components/src/components/DateRangePicker/components/DateRangeInput/DateRangeInput.module.scss.mjs.map +1 -1
  20. package/dist/js/packages/components/src/components/RadioGroup/components/RadioButton/RadioButton.module.scss.mjs +1 -2
  21. package/dist/js/packages/components/src/components/RadioGroup/components/RadioButton/RadioButton.module.scss.mjs.map +1 -1
  22. package/dist/js/packages/components/src/components/Select/Select.module.scss.mjs +1 -2
  23. package/dist/js/packages/components/src/components/Select/Select.module.scss.mjs.map +1 -1
  24. package/dist/js/packages/components/src/components/TextArea/TextArea.module.scss.mjs +1 -2
  25. package/dist/js/packages/components/src/components/TextArea/TextArea.module.scss.mjs.map +1 -1
  26. package/dist/js/packages/components/src/components/TimeField/TimeField.module.scss.mjs +1 -2
  27. package/dist/js/packages/components/src/components/TimeField/TimeField.module.scss.mjs.map +1 -1
  28. package/dist/types/components/CodeBlock/CodeBlock.d.ts +7 -0
  29. package/dist/types/components/CodeBlock/CodeBlock.d.ts.map +1 -1
  30. package/dist/types/components/CodeBlock/stories/Default.stories.d.ts +1 -2
  31. package/dist/types/components/CodeBlock/stories/Default.stories.d.ts.map +1 -1
  32. package/dist/types/components/CodeEditor/CodeEditor.d.ts.map +1 -1
  33. package/package.json +6 -6
@@ -0,0 +1,14 @@
1
+ "use client"
2
+ /* */
3
+ const locales = {"de-DE":{
4
+ "showLess": "Weniger anzeigen",
5
+ "showMore": "Mehr anzeigen"
6
+ }
7
+ ,"en-US":{
8
+ "showLess": "Show less",
9
+ "showMore": "Show more"
10
+ }
11
+ };
12
+
13
+ export { locales as default };
14
+ //# sourceMappingURL=_.locale.json@cbc1b50fe3e51afbdb1b35a65308b79e.mjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"_.locale.json@cbc1b50fe3e51afbdb1b35a65308b79e.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;"}
@@ -1,9 +1,14 @@
1
1
  "use client"
2
2
  /* */
3
- import { jsx } from 'react/jsx-runtime';
3
+ import { jsx, jsxs } from 'react/jsx-runtime';
4
+ import { useState, useId } from 'react';
4
5
  import clsx from 'clsx';
5
6
  import styles from './CodeBlock.module.scss.mjs';
6
7
  import { CodeEditor } from '../CodeEditor/CodeEditor.mjs';
8
+ import { Button } from '../Button/Button.mjs';
9
+ import '../TranslationProvider/TranslationProvider.mjs';
10
+ import { useLocalizedStringFormatter } from '../TranslationProvider/useLocalizedStringFormatter.mjs';
11
+ import locales from '../../../../../_virtual/_.locale.json@cbc1b50fe3e51afbdb1b35a65308b79e.mjs';
7
12
 
8
13
  const CodeBlock = (props) => {
9
14
  const {
@@ -12,26 +17,75 @@ const CodeBlock = (props) => {
12
17
  copyable = false,
13
18
  showLineNumbers = false,
14
19
  children,
20
+ truncateLines = false,
15
21
  ...rest
16
22
  } = props;
23
+ const [collapsed, setCollapsed] = useState(true);
24
+ const [maxHeight, setMaxHeight] = useState();
25
+ const stringFormatter = useLocalizedStringFormatter(locales, "CodeBlock");
17
26
  const rootClassName = clsx(styles.codeBlock, className);
27
+ const id = useId();
18
28
  if (!code) {
19
- return /* @__PURE__ */ jsx("div", { className: clsx(rootClassName, styles.withCodeContent), children: /* @__PURE__ */ jsx("pre", { children: /* @__PURE__ */ jsx("code", { children }) }) });
29
+ return /* @__PURE__ */ jsx("div", { className: clsx(rootClassName, styles.withChildren), children: /* @__PURE__ */ jsx("pre", { children: /* @__PURE__ */ jsx("code", { children }) }) });
20
30
  }
21
- return /* @__PURE__ */ jsx("div", { className: rootClassName, children: /* @__PURE__ */ jsx(
22
- CodeEditor,
23
- {
24
- ...rest,
25
- value: code,
26
- editable: false,
27
- copyable,
28
- showLineNumbers,
29
- showLinterMarkers: false,
30
- showCodeFolding: false,
31
- showActiveLineMarker: false,
32
- isReadOnly: true
33
- }
34
- ) });
31
+ return /* @__PURE__ */ jsxs("div", { children: [
32
+ /* @__PURE__ */ jsx(
33
+ "div",
34
+ {
35
+ className: rootClassName,
36
+ style: {
37
+ maxHeight: collapsed ? maxHeight : void 0
38
+ },
39
+ children: /* @__PURE__ */ jsx(
40
+ CodeEditor,
41
+ {
42
+ ...rest,
43
+ value: code,
44
+ editable: false,
45
+ copyable,
46
+ showLineNumbers,
47
+ showLinterMarkers: false,
48
+ showCodeFolding: false,
49
+ showActiveLineMarker: false,
50
+ isReadOnly: true,
51
+ onCreateEditor: (view) => {
52
+ if (!truncateLines) {
53
+ return;
54
+ }
55
+ const lineHeight = 20;
56
+ const padding = 12;
57
+ const visibleLines = typeof truncateLines === "number" ? truncateLines : 8;
58
+ const totalLines = view.state.doc.lines;
59
+ if (totalLines > visibleLines)
60
+ setMaxHeight(lineHeight * visibleLines + padding);
61
+ },
62
+ id
63
+ }
64
+ )
65
+ }
66
+ ),
67
+ truncateLines && maxHeight && /* @__PURE__ */ jsx(
68
+ "div",
69
+ {
70
+ className: clsx(
71
+ styles.buttonContainer,
72
+ collapsed && styles.collapsed
73
+ ),
74
+ children: /* @__PURE__ */ jsx(
75
+ Button,
76
+ {
77
+ variant: "plain",
78
+ color: "secondary",
79
+ size: "s",
80
+ onPress: () => setCollapsed((prev) => !prev),
81
+ "aria-expanded": !collapsed,
82
+ "aria-controls": id,
83
+ children: stringFormatter.format(collapsed ? "showMore" : "showLess")
84
+ }
85
+ )
86
+ }
87
+ )
88
+ ] });
35
89
  };
36
90
 
37
91
  export { CodeBlock };
@@ -1 +1 @@
1
- {"version":3,"file":"CodeBlock.mjs","sources":["../../../../../../../src/components/CodeBlock/CodeBlock.tsx"],"sourcesContent":["import type { FC, PropsWithChildren } from \"react\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport clsx from \"clsx\";\nimport styles from \"./CodeBlock.module.scss\";\nimport { CodeEditor, type CodeEditorProps } from \"@/components/CodeEditor\";\n\nexport interface CodeBlockProps\n extends\n PropsWithClassName,\n PropsWithChildren,\n Partial<\n Pick<CodeEditorProps, \"language\" | \"showLineNumbers\" | \"copyable\">\n > {\n code?: string;\n}\n\n/** @flr-generate all */\nexport const CodeBlock: FC<CodeBlockProps> = (props) => {\n const {\n code,\n className,\n copyable = false,\n showLineNumbers = false,\n children,\n ...rest\n } = props;\n\n const rootClassName = clsx(styles.codeBlock, className);\n\n if (!code) {\n return (\n <div className={clsx(rootClassName, styles.withCodeContent)}>\n <pre>\n <code>{children}</code>\n </pre>\n </div>\n );\n }\n\n return (\n <div className={rootClassName}>\n <CodeEditor\n {...rest}\n value={code}\n editable={false}\n copyable={copyable}\n showLineNumbers={showLineNumbers}\n showLinterMarkers={false}\n showCodeFolding={false}\n showActiveLineMarker={false}\n isReadOnly\n />\n </div>\n );\n};\n\nexport default CodeBlock;\n"],"names":[],"mappings":";;;;;AAiBO,MAAM,SAAA,GAAgC,CAAC,KAAA,KAAU;AACtD,EAAA,MAAM;AAAA,IACJ,IAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAA,GAAW,KAAA;AAAA,IACX,eAAA,GAAkB,KAAA;AAAA,IAClB,QAAA;AAAA,IACA,GAAG;AAAA,GACL,GAAI,KAAA;AAEJ,EAAA,MAAM,aAAA,GAAgB,IAAA,CAAK,MAAA,CAAO,SAAA,EAAW,SAAS,CAAA;AAEtD,EAAA,IAAI,CAAC,IAAA,EAAM;AACT,IAAA,uBACE,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,IAAA,CAAK,eAAe,MAAA,CAAO,eAAe,CAAA,EACxD,QAAA,kBAAA,GAAA,CAAC,KAAA,EAAA,EACC,QAAA,kBAAA,GAAA,CAAC,MAAA,EAAA,EAAM,QAAA,EAAS,GAClB,CAAA,EACF,CAAA;AAAA,EAEJ;AAEA,EAAA,uBACE,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,aAAA,EACd,QAAA,kBAAA,GAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACE,GAAG,IAAA;AAAA,MACJ,KAAA,EAAO,IAAA;AAAA,MACP,QAAA,EAAU,KAAA;AAAA,MACV,QAAA;AAAA,MACA,eAAA;AAAA,MACA,iBAAA,EAAmB,KAAA;AAAA,MACnB,eAAA,EAAiB,KAAA;AAAA,MACjB,oBAAA,EAAsB,KAAA;AAAA,MACtB,UAAA,EAAU;AAAA;AAAA,GACZ,EACF,CAAA;AAEJ;;;;"}
1
+ {"version":3,"file":"CodeBlock.mjs","sources":["../../../../../../../src/components/CodeBlock/CodeBlock.tsx"],"sourcesContent":["import { type FC, type PropsWithChildren, useId, useState } from \"react\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport clsx from \"clsx\";\nimport styles from \"./CodeBlock.module.scss\";\nimport { CodeEditor, type CodeEditorProps } from \"@/components/CodeEditor\";\nimport { Button } from \"@/components/Button\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider\";\nimport locales from \"./locales/*.locale.json\";\n\nexport interface CodeBlockProps\n extends\n PropsWithClassName,\n PropsWithChildren,\n Partial<\n Pick<CodeEditorProps, \"language\" | \"showLineNumbers\" | \"copyable\">\n > {\n code?: string;\n /**\n * Controls truncation of long code blocks. `false` disables it, `true`\n * truncates after 8 lines, and a number sets the maximum line count.\n *\n * @default: false\n */\n truncateLines?: boolean | number;\n}\n\n/** @flr-generate all */\nexport const CodeBlock: FC<CodeBlockProps> = (props) => {\n const {\n code,\n className,\n copyable = false,\n showLineNumbers = false,\n children,\n truncateLines = false,\n ...rest\n } = props;\n\n const [collapsed, setCollapsed] = useState(true);\n const [maxHeight, setMaxHeight] = useState<number>();\n\n const stringFormatter = useLocalizedStringFormatter(locales, \"CodeBlock\");\n\n const rootClassName = clsx(styles.codeBlock, className);\n\n const id = useId();\n\n if (!code) {\n return (\n <div className={clsx(rootClassName, styles.withChildren)}>\n <pre>\n <code>{children}</code>\n </pre>\n </div>\n );\n }\n\n return (\n <div>\n <div\n className={rootClassName}\n style={{\n maxHeight: collapsed ? maxHeight : undefined,\n }}\n >\n <CodeEditor\n {...rest}\n value={code}\n editable={false}\n copyable={copyable}\n showLineNumbers={showLineNumbers}\n showLinterMarkers={false}\n showCodeFolding={false}\n showActiveLineMarker={false}\n isReadOnly\n onCreateEditor={(view) => {\n if (!truncateLines) {\n return;\n }\n\n const lineHeight = 20;\n const padding = 12;\n\n const visibleLines =\n typeof truncateLines === \"number\" ? truncateLines : 8;\n\n const totalLines = view.state.doc.lines;\n\n if (totalLines > visibleLines)\n setMaxHeight(lineHeight * visibleLines + padding);\n }}\n id={id}\n />\n </div>\n\n {truncateLines && maxHeight && (\n <div\n className={clsx(\n styles.buttonContainer,\n collapsed && styles.collapsed,\n )}\n >\n <Button\n variant=\"plain\"\n color=\"secondary\"\n size=\"s\"\n onPress={() => setCollapsed((prev) => !prev)}\n aria-expanded={!collapsed}\n aria-controls={id}\n >\n {stringFormatter.format(collapsed ? \"showMore\" : \"showLess\")}\n </Button>\n </div>\n )}\n </div>\n );\n};\n\nexport default CodeBlock;\n"],"names":[],"mappings":";;;;;;;;;;AA2BO,MAAM,SAAA,GAAgC,CAAC,KAAA,KAAU;AACtD,EAAA,MAAM;AAAA,IACJ,IAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAA,GAAW,KAAA;AAAA,IACX,eAAA,GAAkB,KAAA;AAAA,IAClB,QAAA;AAAA,IACA,aAAA,GAAgB,KAAA;AAAA,IAChB,GAAG;AAAA,GACL,GAAI,KAAA;AAEJ,EAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAI,SAAS,IAAI,CAAA;AAC/C,EAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAI,QAAA,EAAiB;AAEnD,EAAA,MAAM,eAAA,GAAkB,2BAAA,CAA4B,OAAA,EAAS,WAAW,CAAA;AAExE,EAAA,MAAM,aAAA,GAAgB,IAAA,CAAK,MAAA,CAAO,SAAA,EAAW,SAAS,CAAA;AAEtD,EAAA,MAAM,KAAK,KAAA,EAAM;AAEjB,EAAA,IAAI,CAAC,IAAA,EAAM;AACT,IAAA,uBACE,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,IAAA,CAAK,eAAe,MAAA,CAAO,YAAY,CAAA,EACrD,QAAA,kBAAA,GAAA,CAAC,KAAA,EAAA,EACC,QAAA,kBAAA,GAAA,CAAC,MAAA,EAAA,EAAM,QAAA,EAAS,GAClB,CAAA,EACF,CAAA;AAAA,EAEJ;AAEA,EAAA,4BACG,KAAA,EAAA,EACC,QAAA,EAAA;AAAA,oBAAA,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,aAAA;AAAA,QACX,KAAA,EAAO;AAAA,UACL,SAAA,EAAW,YAAY,SAAA,GAAY;AAAA,SACrC;AAAA,QAEA,QAAA,kBAAA,GAAA;AAAA,UAAC,UAAA;AAAA,UAAA;AAAA,YACE,GAAG,IAAA;AAAA,YACJ,KAAA,EAAO,IAAA;AAAA,YACP,QAAA,EAAU,KAAA;AAAA,YACV,QAAA;AAAA,YACA,eAAA;AAAA,YACA,iBAAA,EAAmB,KAAA;AAAA,YACnB,eAAA,EAAiB,KAAA;AAAA,YACjB,oBAAA,EAAsB,KAAA;AAAA,YACtB,UAAA,EAAU,IAAA;AAAA,YACV,cAAA,EAAgB,CAAC,IAAA,KAAS;AACxB,cAAA,IAAI,CAAC,aAAA,EAAe;AAClB,gBAAA;AAAA,cACF;AAEA,cAAA,MAAM,UAAA,GAAa,EAAA;AACnB,cAAA,MAAM,OAAA,GAAU,EAAA;AAEhB,cAAA,MAAM,YAAA,GACJ,OAAO,aAAA,KAAkB,QAAA,GAAW,aAAA,GAAgB,CAAA;AAEtD,cAAA,MAAM,UAAA,GAAa,IAAA,CAAK,KAAA,CAAM,GAAA,CAAI,KAAA;AAElC,cAAA,IAAI,UAAA,GAAa,YAAA;AACf,gBAAA,YAAA,CAAa,UAAA,GAAa,eAAe,OAAO,CAAA;AAAA,YACpD,CAAA;AAAA,YACA;AAAA;AAAA;AACF;AAAA,KACF;AAAA,IAEC,iBAAiB,SAAA,oBAChB,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,IAAA;AAAA,UACT,MAAA,CAAO,eAAA;AAAA,UACP,aAAa,MAAA,CAAO;AAAA,SACtB;AAAA,QAEA,QAAA,kBAAA,GAAA;AAAA,UAAC,MAAA;AAAA,UAAA;AAAA,YACC,OAAA,EAAQ,OAAA;AAAA,YACR,KAAA,EAAM,WAAA;AAAA,YACN,IAAA,EAAK,GAAA;AAAA,YACL,SAAS,MAAM,YAAA,CAAa,CAAC,IAAA,KAAS,CAAC,IAAI,CAAA;AAAA,YAC3C,iBAAe,CAAC,SAAA;AAAA,YAChB,eAAA,EAAe,EAAA;AAAA,YAEd,QAAA,EAAA,eAAA,CAAgB,MAAA,CAAO,SAAA,GAAY,UAAA,GAAa,UAAU;AAAA;AAAA;AAC7D;AAAA;AACF,GAAA,EAEJ,CAAA;AAEJ;;;;"}
@@ -1,11 +1,15 @@
1
1
  "use client"
2
2
  /* */
3
3
  const codeBlock = "flow--code-block";
4
- const withCodeContent = "flow--code-block--with-code-content";
4
+ const withChildren = "flow--code-block--with-children";
5
+ const buttonContainer = "flow--code-block--button-container";
6
+ const collapsed = "flow--code-block--collapsed";
5
7
  const styles = {
6
8
  codeBlock: codeBlock,
7
- withCodeContent: withCodeContent
9
+ withChildren: withChildren,
10
+ buttonContainer: buttonContainer,
11
+ collapsed: collapsed
8
12
  };
9
13
 
10
- export { codeBlock, styles as default, withCodeContent };
14
+ export { buttonContainer, codeBlock, collapsed, styles as default, withChildren };
11
15
  //# sourceMappingURL=CodeBlock.module.scss.mjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"CodeBlock.module.scss.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;"}
1
+ {"version":3,"file":"CodeBlock.module.scss.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;"}
@@ -75,7 +75,7 @@ const CodeEditor = flowComponent("CodeEditor", (props) => {
75
75
  "aria-required": isRequired,
76
76
  "aria-invalid": isInvalid,
77
77
  readOnly: isReadOnly,
78
- className: styles.codeMirror,
78
+ className: clsx(styles.codeMirror, isReadOnly && styles.readonly),
79
79
  ref: (codeMirrorRef) => {
80
80
  if (codeMirrorRef?.editor) {
81
81
  localRef.current = codeMirrorRef.editor;
@@ -1 +1 @@
1
- {"version":3,"file":"CodeEditor.mjs","sources":["../../../../../../../src/components/CodeEditor/CodeEditor.tsx"],"sourcesContent":["import type { ReactCodeMirrorProps } from \"@uiw/react-codemirror\";\nimport CodeMirror from \"@uiw/react-codemirror\";\nimport {\n flowComponent,\n type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport { useControlledHostValueProps } from \"@/lib/remote/useControlledHostValueProps\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport clsx from \"clsx\";\nimport styles from \"./CodeEditor.module.scss\";\nimport { type CodeEditorLanguage } from \"@/components/CodeEditor/languages\";\nimport { useMakeFocusable } from \"@/lib/hooks/dom/useMakeFocusable\";\nimport { useObjectRef } from \"react-aria\";\nimport { defaultLightTheme } from \"@/components/CodeEditor/themes/defaultEditorTheme\";\nimport {\n type CodeEditorSetup,\n useCodeEditorExtensions,\n} from \"@/components/CodeEditor/hooks/useCodeEditorExtensions\";\nimport { CopyButton } from \"@/components/CopyButton\";\nimport React from \"react\";\n\nexport interface CodeEditorProps\n extends\n Omit<ReactCodeMirrorProps, \"theme\" | \"lang\" | \"basicSetup\" | \"readOnly\">,\n CodeEditorSetup,\n FlowComponentProps {\n defaultValue?: string;\n isReadOnly?: boolean;\n isInvalid?: boolean;\n className?: string;\n language?: CodeEditorLanguage;\n copyable?: boolean;\n\n isRequired?: boolean;\n validationBehavior?: unknown;\n}\n\n/** @flr-generate all */\nexport const CodeEditor = flowComponent(\"CodeEditor\", (props) => {\n const {\n ref,\n children,\n className,\n language,\n extensions,\n isReadOnly,\n isInvalid,\n isRequired,\n validationBehavior: _ignoredValidationBehavior,\n value,\n showLineNumbers = true,\n showCodeFolding = true,\n showCodeIndentationMakers = true,\n showLinterMarkers = true,\n showActiveLineMarker = true,\n copyable = true,\n ...rest\n } = useControlledHostValueProps(props);\n\n const {\n FieldErrorView,\n FieldErrorCaptureContext,\n fieldProps,\n fieldPropsContext,\n } = useFieldComponent(props);\n\n const rootClassName = clsx(\n fieldProps.className,\n styles.codeEditor,\n className,\n );\n\n const enabledExtensions = useCodeEditorExtensions(language, extensions, {\n showLineNumbers: showLineNumbers,\n showCodeIndentationMakers: showCodeIndentationMakers,\n showCodeFolding: showCodeFolding,\n showLinterMarkers: showLinterMarkers,\n });\n\n const localRef = useObjectRef(ref);\n useMakeFocusable(localRef);\n\n return (\n <div className={rootClassName}>\n <PropsContextProvider props={fieldPropsContext}>\n <FieldErrorCaptureContext>\n <CodeMirror\n {...rest}\n value={value}\n basicSetup={{\n highlightActiveLine: showActiveLineMarker,\n highlightActiveLineGutter: showActiveLineMarker,\n autocompletion: false,\n lineNumbers: false,\n foldGutter: false,\n highlightSelectionMatches: false,\n }}\n theme={defaultLightTheme}\n aria-required={isRequired}\n aria-invalid={isInvalid}\n readOnly={isReadOnly}\n className={styles.codeMirror}\n ref={(codeMirrorRef) => {\n if (codeMirrorRef?.editor) {\n localRef.current = codeMirrorRef.editor;\n }\n }}\n extensions={enabledExtensions}\n >\n {copyable && (\n <CopyButton\n className={styles.copyButton}\n size=\"s\"\n variant=\"soft\"\n text={value}\n />\n )}\n </CodeMirror>\n {children}\n </FieldErrorCaptureContext>\n <FieldErrorView />\n </PropsContextProvider>\n </div>\n );\n});\n\nexport default CodeEditor;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAuCO,MAAM,UAAA,GAAa,aAAA,CAAc,YAAA,EAAc,CAAC,KAAA,KAAU;AAC/D,EAAA,MAAM;AAAA,IACJ,GAAA;AAAA,IACA,QAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAA;AAAA,IACA,UAAA;AAAA,IACA,UAAA;AAAA,IACA,SAAA;AAAA,IACA,UAAA;AAAA,IACA,kBAAA,EAAoB,0BAAA;AAAA,IACpB,KAAA;AAAA,IACA,eAAA,GAAkB,IAAA;AAAA,IAClB,eAAA,GAAkB,IAAA;AAAA,IAClB,yBAAA,GAA4B,IAAA;AAAA,IAC5B,iBAAA,GAAoB,IAAA;AAAA,IACpB,oBAAA,GAAuB,IAAA;AAAA,IACvB,QAAA,GAAW,IAAA;AAAA,IACX,GAAG;AAAA,GACL,GAAI,4BAA4B,KAAK,CAAA;AAErC,EAAA,MAAM;AAAA,IACJ,cAAA;AAAA,IACA,wBAAA;AAAA,IACA,UAAA;AAAA,IACA;AAAA,GACF,GAAI,kBAAkB,KAAK,CAAA;AAE3B,EAAA,MAAM,aAAA,GAAgB,IAAA;AAAA,IACpB,UAAA,CAAW,SAAA;AAAA,IACX,MAAA,CAAO,UAAA;AAAA,IACP;AAAA,GACF;AAEA,EAAA,MAAM,iBAAA,GAAoB,uBAAA,CAAwB,QAAA,EAAU,UAAA,EAAY;AAAA,IACtE,eAAA;AAAA,IACA,yBAAA;AAAA,IACA,eAAA;AAAA,IACA;AAAA,GACD,CAAA;AAED,EAAA,MAAM,QAAA,GAAW,aAAa,GAAG,CAAA;AACjC,EAAA,gBAAA,CAAiB,QAAQ,CAAA;AAEzB,EAAA,2BACG,KAAA,EAAA,EAAI,SAAA,EAAW,eACd,QAAA,kBAAA,IAAA,CAAC,oBAAA,EAAA,EAAqB,OAAO,iBAAA,EAC3B,QAAA,EAAA;AAAA,oBAAA,IAAA,CAAC,wBAAA,EAAA,EACC,QAAA,EAAA;AAAA,sBAAA,GAAA;AAAA,QAAC,UAAA;AAAA,QAAA;AAAA,UACE,GAAG,IAAA;AAAA,UACJ,KAAA;AAAA,UACA,UAAA,EAAY;AAAA,YACV,mBAAA,EAAqB,oBAAA;AAAA,YACrB,yBAAA,EAA2B,oBAAA;AAAA,YAC3B,cAAA,EAAgB,KAAA;AAAA,YAChB,WAAA,EAAa,KAAA;AAAA,YACb,UAAA,EAAY,KAAA;AAAA,YACZ,yBAAA,EAA2B;AAAA,WAC7B;AAAA,UACA,KAAA,EAAO,iBAAA;AAAA,UACP,eAAA,EAAe,UAAA;AAAA,UACf,cAAA,EAAc,SAAA;AAAA,UACd,QAAA,EAAU,UAAA;AAAA,UACV,WAAW,MAAA,CAAO,UAAA;AAAA,UAClB,GAAA,EAAK,CAAC,aAAA,KAAkB;AACtB,YAAA,IAAI,eAAe,MAAA,EAAQ;AACzB,cAAA,QAAA,CAAS,UAAU,aAAA,CAAc,MAAA;AAAA,YACnC;AAAA,UACF,CAAA;AAAA,UACA,UAAA,EAAY,iBAAA;AAAA,UAEX,QAAA,EAAA,QAAA,oBACC,GAAA;AAAA,YAAC,UAAA;AAAA,YAAA;AAAA,cACC,WAAW,MAAA,CAAO,UAAA;AAAA,cAClB,IAAA,EAAK,GAAA;AAAA,cACL,OAAA,EAAQ,MAAA;AAAA,cACR,IAAA,EAAM;AAAA;AAAA;AACR;AAAA,OAEJ;AAAA,MACC;AAAA,KAAA,EACH,CAAA;AAAA,wBACC,cAAA,EAAA,EAAe;AAAA,GAAA,EAClB,CAAA,EACF,CAAA;AAEJ,CAAC;;;;"}
1
+ {"version":3,"file":"CodeEditor.mjs","sources":["../../../../../../../src/components/CodeEditor/CodeEditor.tsx"],"sourcesContent":["import type { ReactCodeMirrorProps } from \"@uiw/react-codemirror\";\nimport CodeMirror from \"@uiw/react-codemirror\";\nimport {\n flowComponent,\n type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport { useControlledHostValueProps } from \"@/lib/remote/useControlledHostValueProps\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport clsx from \"clsx\";\nimport styles from \"./CodeEditor.module.scss\";\nimport { type CodeEditorLanguage } from \"@/components/CodeEditor/languages\";\nimport { useMakeFocusable } from \"@/lib/hooks/dom/useMakeFocusable\";\nimport { useObjectRef } from \"react-aria\";\nimport { defaultLightTheme } from \"@/components/CodeEditor/themes/defaultEditorTheme\";\nimport {\n type CodeEditorSetup,\n useCodeEditorExtensions,\n} from \"@/components/CodeEditor/hooks/useCodeEditorExtensions\";\nimport { CopyButton } from \"@/components/CopyButton\";\nimport React from \"react\";\n\nexport interface CodeEditorProps\n extends\n Omit<ReactCodeMirrorProps, \"theme\" | \"lang\" | \"basicSetup\" | \"readOnly\">,\n CodeEditorSetup,\n FlowComponentProps {\n defaultValue?: string;\n isReadOnly?: boolean;\n isInvalid?: boolean;\n className?: string;\n language?: CodeEditorLanguage;\n copyable?: boolean;\n isRequired?: boolean;\n validationBehavior?: unknown;\n}\n\n/** @flr-generate all */\nexport const CodeEditor = flowComponent(\"CodeEditor\", (props) => {\n const {\n ref,\n children,\n className,\n language,\n extensions,\n isReadOnly,\n isInvalid,\n isRequired,\n validationBehavior: _ignoredValidationBehavior,\n value,\n showLineNumbers = true,\n showCodeFolding = true,\n showCodeIndentationMakers = true,\n showLinterMarkers = true,\n showActiveLineMarker = true,\n copyable = true,\n ...rest\n } = useControlledHostValueProps(props);\n\n const {\n FieldErrorView,\n FieldErrorCaptureContext,\n fieldProps,\n fieldPropsContext,\n } = useFieldComponent(props);\n\n const rootClassName = clsx(\n fieldProps.className,\n styles.codeEditor,\n className,\n );\n\n const enabledExtensions = useCodeEditorExtensions(language, extensions, {\n showLineNumbers: showLineNumbers,\n showCodeIndentationMakers: showCodeIndentationMakers,\n showCodeFolding: showCodeFolding,\n showLinterMarkers: showLinterMarkers,\n });\n\n const localRef = useObjectRef(ref);\n useMakeFocusable(localRef);\n\n return (\n <div className={rootClassName}>\n <PropsContextProvider props={fieldPropsContext}>\n <FieldErrorCaptureContext>\n <CodeMirror\n {...rest}\n value={value}\n basicSetup={{\n highlightActiveLine: showActiveLineMarker,\n highlightActiveLineGutter: showActiveLineMarker,\n autocompletion: false,\n lineNumbers: false,\n foldGutter: false,\n highlightSelectionMatches: false,\n }}\n theme={defaultLightTheme}\n aria-required={isRequired}\n aria-invalid={isInvalid}\n readOnly={isReadOnly}\n className={clsx(styles.codeMirror, isReadOnly && styles.readonly)}\n ref={(codeMirrorRef) => {\n if (codeMirrorRef?.editor) {\n localRef.current = codeMirrorRef.editor;\n }\n }}\n extensions={enabledExtensions}\n >\n {copyable && (\n <CopyButton\n className={styles.copyButton}\n size=\"s\"\n variant=\"soft\"\n text={value}\n />\n )}\n </CodeMirror>\n {children}\n </FieldErrorCaptureContext>\n <FieldErrorView />\n </PropsContextProvider>\n </div>\n );\n});\n\nexport default CodeEditor;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAsCO,MAAM,UAAA,GAAa,aAAA,CAAc,YAAA,EAAc,CAAC,KAAA,KAAU;AAC/D,EAAA,MAAM;AAAA,IACJ,GAAA;AAAA,IACA,QAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAA;AAAA,IACA,UAAA;AAAA,IACA,UAAA;AAAA,IACA,SAAA;AAAA,IACA,UAAA;AAAA,IACA,kBAAA,EAAoB,0BAAA;AAAA,IACpB,KAAA;AAAA,IACA,eAAA,GAAkB,IAAA;AAAA,IAClB,eAAA,GAAkB,IAAA;AAAA,IAClB,yBAAA,GAA4B,IAAA;AAAA,IAC5B,iBAAA,GAAoB,IAAA;AAAA,IACpB,oBAAA,GAAuB,IAAA;AAAA,IACvB,QAAA,GAAW,IAAA;AAAA,IACX,GAAG;AAAA,GACL,GAAI,4BAA4B,KAAK,CAAA;AAErC,EAAA,MAAM;AAAA,IACJ,cAAA;AAAA,IACA,wBAAA;AAAA,IACA,UAAA;AAAA,IACA;AAAA,GACF,GAAI,kBAAkB,KAAK,CAAA;AAE3B,EAAA,MAAM,aAAA,GAAgB,IAAA;AAAA,IACpB,UAAA,CAAW,SAAA;AAAA,IACX,MAAA,CAAO,UAAA;AAAA,IACP;AAAA,GACF;AAEA,EAAA,MAAM,iBAAA,GAAoB,uBAAA,CAAwB,QAAA,EAAU,UAAA,EAAY;AAAA,IACtE,eAAA;AAAA,IACA,yBAAA;AAAA,IACA,eAAA;AAAA,IACA;AAAA,GACD,CAAA;AAED,EAAA,MAAM,QAAA,GAAW,aAAa,GAAG,CAAA;AACjC,EAAA,gBAAA,CAAiB,QAAQ,CAAA;AAEzB,EAAA,2BACG,KAAA,EAAA,EAAI,SAAA,EAAW,eACd,QAAA,kBAAA,IAAA,CAAC,oBAAA,EAAA,EAAqB,OAAO,iBAAA,EAC3B,QAAA,EAAA;AAAA,oBAAA,IAAA,CAAC,wBAAA,EAAA,EACC,QAAA,EAAA;AAAA,sBAAA,GAAA;AAAA,QAAC,UAAA;AAAA,QAAA;AAAA,UACE,GAAG,IAAA;AAAA,UACJ,KAAA;AAAA,UACA,UAAA,EAAY;AAAA,YACV,mBAAA,EAAqB,oBAAA;AAAA,YACrB,yBAAA,EAA2B,oBAAA;AAAA,YAC3B,cAAA,EAAgB,KAAA;AAAA,YAChB,WAAA,EAAa,KAAA;AAAA,YACb,UAAA,EAAY,KAAA;AAAA,YACZ,yBAAA,EAA2B;AAAA,WAC7B;AAAA,UACA,KAAA,EAAO,iBAAA;AAAA,UACP,eAAA,EAAe,UAAA;AAAA,UACf,cAAA,EAAc,SAAA;AAAA,UACd,QAAA,EAAU,UAAA;AAAA,UACV,WAAW,IAAA,CAAK,MAAA,CAAO,UAAA,EAAY,UAAA,IAAc,OAAO,QAAQ,CAAA;AAAA,UAChE,GAAA,EAAK,CAAC,aAAA,KAAkB;AACtB,YAAA,IAAI,eAAe,MAAA,EAAQ;AACzB,cAAA,QAAA,CAAS,UAAU,aAAA,CAAc,MAAA;AAAA,YACnC;AAAA,UACF,CAAA;AAAA,UACA,UAAA,EAAY,iBAAA;AAAA,UAEX,QAAA,EAAA,QAAA,oBACC,GAAA;AAAA,YAAC,UAAA;AAAA,YAAA;AAAA,cACC,WAAW,MAAA,CAAO,UAAA;AAAA,cAClB,IAAA,EAAK,GAAA;AAAA,cACL,OAAA,EAAQ,MAAA;AAAA,cACR,IAAA,EAAM;AAAA;AAAA;AACR;AAAA,OAEJ;AAAA,MACC;AAAA,KAAA,EACH,CAAA;AAAA,wBACC,cAAA,EAAA,EAAe;AAAA,GAAA,EAClB,CAAA,EACF,CAAA;AAEJ,CAAC;;;;"}
@@ -2,12 +2,14 @@
2
2
  /* */
3
3
  const codeEditor = "flow--code-editor";
4
4
  const codeMirror = "flow--code-editor--code-mirror";
5
+ const readonly = "flow--code-editor--readonly";
5
6
  const copyButton = "flow--code-editor--copy-button";
6
7
  const styles = {
7
8
  codeEditor: codeEditor,
8
9
  codeMirror: codeMirror,
10
+ readonly: readonly,
9
11
  copyButton: copyButton
10
12
  };
11
13
 
12
- export { codeEditor, codeMirror, copyButton, styles as default };
14
+ export { codeEditor, codeMirror, copyButton, styles as default, readonly };
13
15
  //# sourceMappingURL=CodeEditor.module.scss.mjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"CodeEditor.module.scss.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;"}
1
+ {"version":3,"file":"CodeEditor.module.scss.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;"}
@@ -6,12 +6,12 @@ import { tags } from '@lezer/highlight';
6
6
  const defaultLightTheme = githubLightInit({
7
7
  theme: "light",
8
8
  settings: {
9
- fontSize: "var(--code-editor--font-size);",
10
- fontFamily: "var(--code-editor--font-family);",
11
- foreground: "var(--color--code-syntax--title)",
9
+ fontSize: "var(--code-editor--font-size)",
10
+ fontFamily: "var(--code-editor--font-family)",
11
+ foreground: "var(--form-control--content-color--default)",
12
12
  background: "transparent",
13
13
  gutterBackground: "var(--form-control--background-color--default)",
14
- gutterForeground: "var(--color--code-syntax--title)"
14
+ gutterForeground: "var(--form-control--content-color--default)"
15
15
  },
16
16
  styles: [
17
17
  { tag: tags.keyword, color: "var(--color--code-syntax--keyword)" },
@@ -1 +1 @@
1
- {"version":3,"file":"defaultEditorTheme.mjs","sources":["../../../../../../../../src/components/CodeEditor/themes/defaultEditorTheme.ts"],"sourcesContent":["import { githubLightInit } from \"@uiw/codemirror-theme-github\";\nimport { tags as t } from \"@lezer/highlight\";\n\nexport const defaultLightTheme = githubLightInit({\n theme: \"light\",\n settings: {\n fontSize: \"var(--code-editor--font-size);\",\n fontFamily: \"var(--code-editor--font-family);\",\n foreground: \"var(--color--code-syntax--title)\",\n background: \"transparent\",\n gutterBackground: \"var(--form-control--background-color--default)\",\n gutterForeground: \"var(--color--code-syntax--title)\",\n },\n styles: [\n { tag: t.keyword, color: \"var(--color--code-syntax--keyword)\" },\n {\n tag: [t.typeName, t.className],\n color: \"var(--color--code-syntax--type)\",\n },\n { tag: t.variableName, color: \"var(--color--code-syntax--variable)\" },\n {\n tag: [t.propertyName, t.attributeName],\n color: \"var(--color--code-syntax--property)\",\n },\n { tag: [t.string, t.regexp], color: \"var(--color--code-syntax--string)\" },\n { tag: t.number, color: \"var(--color--code-syntax--number)\" },\n { tag: t.comment, color: \"var(--color--code-syntax--comment)\" },\n {\n tag: [t.function(t.variableName), t.function(t.propertyName)],\n color: \"var(--color--code-syntax--function)\",\n },\n {\n tag: [t.operator, t.typeOperator],\n color: \"var(--color--code-syntax--operator)\",\n },\n { tag: t.invalid, color: \"var(--color--code-syntax--invalid)\" },\n ],\n});\n"],"names":["t"],"mappings":";;;AAGO,MAAM,oBAAoB,eAAA,CAAgB;AAAA,EAC/C,KAAA,EAAO,OAAA;AAAA,EACP,QAAA,EAAU;AAAA,IACR,QAAA,EAAU,gCAAA;AAAA,IACV,UAAA,EAAY,kCAAA;AAAA,IACZ,UAAA,EAAY,kCAAA;AAAA,IACZ,UAAA,EAAY,aAAA;AAAA,IACZ,gBAAA,EAAkB,gDAAA;AAAA,IAClB,gBAAA,EAAkB;AAAA,GACpB;AAAA,EACA,MAAA,EAAQ;AAAA,IACN,EAAE,GAAA,EAAKA,IAAA,CAAE,OAAA,EAAS,OAAO,oCAAA,EAAqC;AAAA,IAC9D;AAAA,MACE,GAAA,EAAK,CAACA,IAAA,CAAE,QAAA,EAAUA,KAAE,SAAS,CAAA;AAAA,MAC7B,KAAA,EAAO;AAAA,KACT;AAAA,IACA,EAAE,GAAA,EAAKA,IAAA,CAAE,YAAA,EAAc,OAAO,qCAAA,EAAsC;AAAA,IACpE;AAAA,MACE,GAAA,EAAK,CAACA,IAAA,CAAE,YAAA,EAAcA,KAAE,aAAa,CAAA;AAAA,MACrC,KAAA,EAAO;AAAA,KACT;AAAA,IACA,EAAE,KAAK,CAACA,IAAA,CAAE,QAAQA,IAAA,CAAE,MAAM,CAAA,EAAG,KAAA,EAAO,mCAAA,EAAoC;AAAA,IACxE,EAAE,GAAA,EAAKA,IAAA,CAAE,MAAA,EAAQ,OAAO,mCAAA,EAAoC;AAAA,IAC5D,EAAE,GAAA,EAAKA,IAAA,CAAE,OAAA,EAAS,OAAO,oCAAA,EAAqC;AAAA,IAC9D;AAAA,MACE,GAAA,EAAK,CAACA,IAAA,CAAE,QAAA,CAASA,IAAA,CAAE,YAAY,CAAA,EAAGA,IAAA,CAAE,QAAA,CAASA,IAAA,CAAE,YAAY,CAAC,CAAA;AAAA,MAC5D,KAAA,EAAO;AAAA,KACT;AAAA,IACA;AAAA,MACE,GAAA,EAAK,CAACA,IAAA,CAAE,QAAA,EAAUA,KAAE,YAAY,CAAA;AAAA,MAChC,KAAA,EAAO;AAAA,KACT;AAAA,IACA,EAAE,GAAA,EAAKA,IAAA,CAAE,OAAA,EAAS,OAAO,oCAAA;AAAqC;AAElE,CAAC;;;;"}
1
+ {"version":3,"file":"defaultEditorTheme.mjs","sources":["../../../../../../../../src/components/CodeEditor/themes/defaultEditorTheme.ts"],"sourcesContent":["import { githubLightInit } from \"@uiw/codemirror-theme-github\";\nimport { tags as t } from \"@lezer/highlight\";\n\nexport const defaultLightTheme = githubLightInit({\n theme: \"light\",\n settings: {\n fontSize: \"var(--code-editor--font-size)\",\n fontFamily: \"var(--code-editor--font-family)\",\n foreground: \"var(--form-control--content-color--default)\",\n background: \"transparent\",\n gutterBackground: \"var(--form-control--background-color--default)\",\n gutterForeground: \"var(--form-control--content-color--default)\",\n },\n styles: [\n { tag: t.keyword, color: \"var(--color--code-syntax--keyword)\" },\n {\n tag: [t.typeName, t.className],\n color: \"var(--color--code-syntax--type)\",\n },\n { tag: t.variableName, color: \"var(--color--code-syntax--variable)\" },\n {\n tag: [t.propertyName, t.attributeName],\n color: \"var(--color--code-syntax--property)\",\n },\n { tag: [t.string, t.regexp], color: \"var(--color--code-syntax--string)\" },\n { tag: t.number, color: \"var(--color--code-syntax--number)\" },\n { tag: t.comment, color: \"var(--color--code-syntax--comment)\" },\n {\n tag: [t.function(t.variableName), t.function(t.propertyName)],\n color: \"var(--color--code-syntax--function)\",\n },\n {\n tag: [t.operator, t.typeOperator],\n color: \"var(--color--code-syntax--operator)\",\n },\n { tag: t.invalid, color: \"var(--color--code-syntax--invalid)\" },\n ],\n});\n"],"names":["t"],"mappings":";;;AAGO,MAAM,oBAAoB,eAAA,CAAgB;AAAA,EAC/C,KAAA,EAAO,OAAA;AAAA,EACP,QAAA,EAAU;AAAA,IACR,QAAA,EAAU,+BAAA;AAAA,IACV,UAAA,EAAY,iCAAA;AAAA,IACZ,UAAA,EAAY,6CAAA;AAAA,IACZ,UAAA,EAAY,aAAA;AAAA,IACZ,gBAAA,EAAkB,gDAAA;AAAA,IAClB,gBAAA,EAAkB;AAAA,GACpB;AAAA,EACA,MAAA,EAAQ;AAAA,IACN,EAAE,GAAA,EAAKA,IAAA,CAAE,OAAA,EAAS,OAAO,oCAAA,EAAqC;AAAA,IAC9D;AAAA,MACE,GAAA,EAAK,CAACA,IAAA,CAAE,QAAA,EAAUA,KAAE,SAAS,CAAA;AAAA,MAC7B,KAAA,EAAO;AAAA,KACT;AAAA,IACA,EAAE,GAAA,EAAKA,IAAA,CAAE,YAAA,EAAc,OAAO,qCAAA,EAAsC;AAAA,IACpE;AAAA,MACE,GAAA,EAAK,CAACA,IAAA,CAAE,YAAA,EAAcA,KAAE,aAAa,CAAA;AAAA,MACrC,KAAA,EAAO;AAAA,KACT;AAAA,IACA,EAAE,KAAK,CAACA,IAAA,CAAE,QAAQA,IAAA,CAAE,MAAM,CAAA,EAAG,KAAA,EAAO,mCAAA,EAAoC;AAAA,IACxE,EAAE,GAAA,EAAKA,IAAA,CAAE,MAAA,EAAQ,OAAO,mCAAA,EAAoC;AAAA,IAC5D,EAAE,GAAA,EAAKA,IAAA,CAAE,OAAA,EAAS,OAAO,oCAAA,EAAqC;AAAA,IAC9D;AAAA,MACE,GAAA,EAAK,CAACA,IAAA,CAAE,QAAA,CAASA,IAAA,CAAE,YAAY,CAAA,EAAGA,IAAA,CAAE,QAAA,CAASA,IAAA,CAAE,YAAY,CAAC,CAAA;AAAA,MAC5D,KAAA,EAAO;AAAA,KACT;AAAA,IACA;AAAA,MACE,GAAA,EAAK,CAACA,IAAA,CAAE,QAAA,EAAUA,KAAE,YAAY,CAAA;AAAA,MAChC,KAAA,EAAO;AAAA,KACT;AAAA,IACA,EAAE,GAAA,EAAKA,IAAA,CAAE,OAAA,EAAS,OAAO,oCAAA;AAAqC;AAElE,CAAC;;;;"}
@@ -2,8 +2,7 @@
2
2
  /* */
3
3
  const dateInput = "flow--date-picker--date-input";
4
4
  const styles = {
5
- dateInput: dateInput
6
- };
5
+ dateInput: dateInput};
7
6
 
8
7
  export { dateInput, styles as default };
9
8
  //# sourceMappingURL=DateInput.module.scss.mjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"DateInput.module.scss.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}
1
+ {"version":3,"file":"DateInput.module.scss.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
@@ -2,8 +2,7 @@
2
2
  /* */
3
3
  const dateRangeInput = "flow--date-range-picker--date-range-input";
4
4
  const styles = {
5
- dateRangeInput: dateRangeInput
6
- };
5
+ dateRangeInput: dateRangeInput};
7
6
 
8
7
  export { dateRangeInput, styles as default };
9
8
  //# sourceMappingURL=DateRangeInput.module.scss.mjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"DateRangeInput.module.scss.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}
1
+ {"version":3,"file":"DateRangeInput.module.scss.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
@@ -6,8 +6,7 @@ const radioButton = "flow--radio-group--radio-button";
6
6
  const styles = {
7
7
  label: label,
8
8
  content: content,
9
- radioButton: radioButton
10
- };
9
+ radioButton: radioButton};
11
10
 
12
11
  export { content, styles as default, label, radioButton };
13
12
  //# sourceMappingURL=RadioButton.module.scss.mjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"RadioButton.module.scss.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;"}
1
+ {"version":3,"file":"RadioButton.module.scss.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;"}
@@ -4,8 +4,7 @@ const select = "flow--select";
4
4
  const toggle = "flow--select--toggle";
5
5
  const styles = {
6
6
  select: select,
7
- toggle: toggle
8
- };
7
+ toggle: toggle};
9
8
 
10
9
  export { styles as default, select, toggle };
11
10
  //# sourceMappingURL=Select.module.scss.mjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"Select.module.scss.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;"}
1
+ {"version":3,"file":"Select.module.scss.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}
@@ -8,8 +8,7 @@ const styles = {
8
8
  input: input,
9
9
  horizontalResize: horizontalResize,
10
10
  verticalResize: verticalResize,
11
- resize: resize
12
- };
11
+ resize: resize};
13
12
 
14
13
  export { styles as default, horizontalResize, input, resize, verticalResize };
15
14
  //# sourceMappingURL=TextArea.module.scss.mjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"TextArea.module.scss.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;"}
1
+ {"version":3,"file":"TextArea.module.scss.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;"}
@@ -2,8 +2,7 @@
2
2
  /* */
3
3
  const dateInput = "flow--time-field--date-input";
4
4
  const styles = {
5
- dateInput: dateInput
6
- };
5
+ dateInput: dateInput};
7
6
 
8
7
  export { dateInput, styles as default };
9
8
  //# sourceMappingURL=TimeField.module.scss.mjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"TimeField.module.scss.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}
1
+ {"version":3,"file":"TimeField.module.scss.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
@@ -3,6 +3,13 @@ import { PropsWithClassName } from '../../lib/types/props';
3
3
  import { CodeEditorProps } from '../CodeEditor';
4
4
  export interface CodeBlockProps extends PropsWithClassName, PropsWithChildren, Partial<Pick<CodeEditorProps, "language" | "showLineNumbers" | "copyable">> {
5
5
  code?: string;
6
+ /**
7
+ * Controls truncation of long code blocks. `false` disables it, `true`
8
+ * truncates after 8 lines, and a number sets the maximum line count.
9
+ *
10
+ * @default: false
11
+ */
12
+ truncateLines?: boolean | number;
6
13
  }
7
14
  /** @flr-generate all */
8
15
  export declare const CodeBlock: FC<CodeBlockProps>;
@@ -1 +1 @@
1
- {"version":3,"file":"CodeBlock.d.ts","sourceRoot":"","sources":["../../../../src/components/CodeBlock/CodeBlock.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AACnD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AAG5D,OAAO,EAAc,KAAK,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAE3E,MAAM,WAAW,cACf,SACE,kBAAkB,EAClB,iBAAiB,EACjB,OAAO,CACL,IAAI,CAAC,eAAe,EAAE,UAAU,GAAG,iBAAiB,GAAG,UAAU,CAAC,CACnE;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,wBAAwB;AACxB,eAAO,MAAM,SAAS,EAAE,EAAE,CAAC,cAAc,CAqCxC,CAAC;AAEF,eAAe,SAAS,CAAC"}
1
+ {"version":3,"file":"CodeBlock.d.ts","sourceRoot":"","sources":["../../../../src/components/CodeBlock/CodeBlock.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,EAAE,KAAK,iBAAiB,EAAmB,MAAM,OAAO,CAAC;AACzE,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AAG5D,OAAO,EAAc,KAAK,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAK3E,MAAM,WAAW,cACf,SACE,kBAAkB,EAClB,iBAAiB,EACjB,OAAO,CACL,IAAI,CAAC,eAAe,EAAE,UAAU,GAAG,iBAAiB,GAAG,UAAU,CAAC,CACnE;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;;OAKG;IACH,aAAa,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;CAClC;AAED,wBAAwB;AACxB,eAAO,MAAM,SAAS,EAAE,EAAE,CAAC,cAAc,CAyFxC,CAAC;AAEF,eAAe,SAAS,CAAC"}
@@ -4,7 +4,6 @@ declare const meta: Meta<typeof CodeBlock>;
4
4
  export default meta;
5
5
  type Story = StoryObj<typeof CodeBlock>;
6
6
  export declare const Default: Story;
7
- export declare const WithLineNumbers: Story;
8
- export declare const Copyable: Story;
7
+ export declare const TruncateLines: Story;
9
8
  export declare const WithChildren: Story;
10
9
  //# sourceMappingURL=Default.stories.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"Default.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/CodeBlock/stories/Default.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEvD,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAInD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,SAAS,CAehC,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,SAAS,CAAC,CAAC;AAExC,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAEjC,eAAO,MAAM,eAAe,EAAE,KAA2C,CAAC;AAE1E,eAAO,MAAM,QAAQ,EAAE,KAAoC,CAAC;AAE5D,eAAO,MAAM,YAAY,EAAE,KAU1B,CAAC"}
1
+ {"version":3,"file":"Default.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/CodeBlock/stories/Default.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEvD,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAInD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,SAAS,CAsBhC,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,SAAS,CAAC,CAAC;AAExC,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAEjC,eAAO,MAAM,aAAa,EAAE,KAE3B,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAa1B,CAAC"}
@@ -1 +1 @@
1
- {"version":3,"file":"CodeEditor.d.ts","sourceRoot":"","sources":["../../../../src/components/CodeEditor/CodeEditor.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,uBAAuB,CAAC;AAElE,OAAO,EAEL,KAAK,kBAAkB,EACxB,MAAM,sCAAsC,CAAC;AAM9C,OAAO,EAAE,KAAK,kBAAkB,EAAE,MAAM,mCAAmC,CAAC;AAI5E,OAAO,EACL,KAAK,eAAe,EAErB,MAAM,uDAAuD,CAAC;AAE/D,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,WAAW,eACf,SACE,IAAI,CAAC,oBAAoB,EAAE,OAAO,GAAG,MAAM,GAAG,YAAY,GAAG,UAAU,CAAC,EACxE,eAAe,EACf,kBAAkB;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,kBAAkB,CAAC;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAED,wBAAwB;AACxB,eAAO,MAAM,UAAU,gFAsFrB,CAAC;AAEH,eAAe,UAAU,CAAC"}
1
+ {"version":3,"file":"CodeEditor.d.ts","sourceRoot":"","sources":["../../../../src/components/CodeEditor/CodeEditor.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,uBAAuB,CAAC;AAElE,OAAO,EAEL,KAAK,kBAAkB,EACxB,MAAM,sCAAsC,CAAC;AAM9C,OAAO,EAAE,KAAK,kBAAkB,EAAE,MAAM,mCAAmC,CAAC;AAI5E,OAAO,EACL,KAAK,eAAe,EAErB,MAAM,uDAAuD,CAAC;AAE/D,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,WAAW,eACf,SACE,IAAI,CAAC,oBAAoB,EAAE,OAAO,GAAG,MAAM,GAAG,YAAY,GAAG,UAAU,CAAC,EACxE,eAAe,EACf,kBAAkB;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,kBAAkB,CAAC;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAED,wBAAwB;AACxB,eAAO,MAAM,UAAU,gFAsFrB,CAAC;AAEH,eAAe,UAAU,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mittwald/flow-react-components",
3
- "version": "0.2.0-alpha.804",
3
+ "version": "0.2.0-alpha.805",
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.804",
63
+ "@mittwald/flow-icons": "0.2.0-alpha.805",
64
64
  "@mittwald/password-tools-js": "3.0.0-alpha.29",
65
- "@mittwald/react-tunnel": "0.2.0-alpha.804",
65
+ "@mittwald/react-tunnel": "0.2.0-alpha.805",
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.804",
119
+ "@mittwald/flow-design-tokens": "0.2.0-alpha.805",
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.803",
172
+ "@mittwald/flow-icons-pro": "0.2.0-alpha.804",
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": "5d4495cc3bec4f235549b96c6b50ff9865efb427"
193
+ "gitHead": "ba0db7375bd15b9265cca23144a8f4e1423ddb63"
194
194
  }