@mittwald/flow-react-components 1.5.16 → 1.5.17

package/dist/js/packages/components/src/components/TextField/TextField.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"TextField.mjs","names":["styles","locales"],"sources":["../../../../../../../src/components/TextField/TextField.tsx"],"sourcesContent":["import {\n  flowComponent,\n  type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport * as Aria from \"react-aria-components\";\nimport { type PropsWithChildren, useState } from \"react\";\nimport { useControlledHostValueProps } from \"@/lib/remote/useControlledHostValueProps\";\nimport { type PropsContext, PropsContextProvider } from \"@/lib/propsContext\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport styles from \"./TextField.module.scss\";\nimport { FieldDescription } from \"@/components/FieldDescription\";\nimport locales from \"./locales/*.locale.json\";\nimport { Button } from \"@/components/Button\";\nimport { IconHide, IconShow } from \"@/components/Icon/components/icons\";\nimport clsx from \"clsx\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\n\nexport interface TextFieldProps\n  extends\n    PropsWithChildren<Omit<Aria.TextFieldProps, \"children\">>,\n    Pick<Aria.InputProps, \"placeholder\">,\n    FlowComponentProps<HTMLInputElement> {\n  /** Whether a character count should be displayed inside the field description. */\n  showCharacterCount?: boolean;\n}\n\n/** @flr-generate all */\nexport const TextField = flowComponent(\"TextField\", (props) => {\n  const {\n    className,\n    showCharacterCount,\n    form,\n    placeholder,\n    ref,\n    type: typeFromProps,\n    children,\n    onChange,\n    ...rest\n  } = useControlledHostValueProps(props, \"\");\n\n  const [charactersCount, setCharactersCount] = useState(\n    props.defaultValue?.length ?? props.value?.length ?? 0,\n  );\n\n  const [type, setType] = useState(typeFromProps);\n\n  const {\n    FieldErrorView,\n    FieldErrorCaptureContext,\n    fieldPropsContext,\n    wrapperProps,\n    controlProps,\n    skeletonProps,\n  } = useFieldComponent(props, \"TextField\");\n\n  const rootClassName = clsx(wrapperProps.className, className);\n\n  const propsContext: PropsContext = {\n    Button: {\n      className: styles.button,\n      variant: \"plain\",\n      color: \"secondary\",\n      tunnel: {\n        id: \"button\",\n        component: \"TextField\",\n      },\n    },\n    CopyButton: {\n      className: styles.button,\n      tunnel: {\n        id: \"button\",\n        component: \"TextField\",\n      },\n    },\n    ...fieldPropsContext,\n  };\n\n  const handleChange = (v: string) => {\n    if (showCharacterCount) {\n      setCharactersCount(v.length);\n    }\n    if (onChange) {\n      onChange(v);\n    }\n  };\n\n  const translation = useLocalizedStringFormatter(locales, \"TextField\");\n\n  const charactersCountDescription = translation.format(\"characters\", {\n    count: charactersCount,\n    maxCount: props.maxLength ?? 0,\n  });\n\n  return (\n    <Aria.TextField\n      {...rest}\n      {...controlProps}\n      {...skeletonProps}\n      className={rootClassName}\n      onChange={handleChange}\n      type={type}\n    >\n      <PropsContextProvider props={propsContext}>\n        <FieldErrorCaptureContext>\n          {children}\n          <div className={styles.inputContainer}>\n            <Aria.Input\n              form={form}\n              placeholder={placeholder}\n              className={styles.input}\n              ref={ref}\n            />\n            <UiComponentTunnelExit id=\"button\" component=\"TextField\" />\n            {typeFromProps === \"password\" && (\n              <Button\n                color=\"secondary\"\n                variant=\"plain\"\n                className={styles.button}\n                onPress={() =>\n                  setType(type === \"password\" ? \"text\" : \"password\")\n                }\n                aria-label={translation.format(\n                  `password.${type === \"password\" ? \"show\" : \"hide\"}`,\n                )}\n              >\n                {type === \"password\" ? <IconShow /> : <IconHide />}\n              </Button>\n            )}\n          </div>\n          {showCharacterCount && (\n            <FieldDescription>{charactersCountDescription}</FieldDescription>\n          )}\n        </FieldErrorCaptureContext>\n        <FieldErrorView />\n      </PropsContextProvider>\n    </Aria.TextField>\n  );\n});\n\nexport default TextField;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AA4BA,IAAa,YAAY,cAAc,cAAc,UAAU;CAC7D,MAAM,EACJ,WACA,oBACA,MACA,aACA,KACA,MAAM,eACN,UACA,UACA,GAAG,SACD,4BAA4B,OAAO,EAAE;CAEzC,MAAM,CAAC,iBAAiB,sBAAsB,SAC5C,MAAM,cAAc,UAAU,MAAM,OAAO,UAAU,CACvD;CAEA,MAAM,CAAC,MAAM,WAAW,SAAS,aAAa;CAE9C,MAAM,EACJ,gBACA,0BACA,mBACA,cACA,cACA,kBACE,kBAAkB,OAAO,WAAW;CAExC,MAAM,gBAAgB,KAAK,aAAa,WAAW,SAAS;CAE5D,MAAM,eAA6B;EACjC,QAAQ;GACN,WAAWA,yBAAO;GAClB,SAAS;GACT,OAAO;GACP,QAAQ;IACN,IAAI;IACJ,WAAW;GACb;EACF;EACA,YAAY;GACV,WAAWA,yBAAO;GAClB,QAAQ;IACN,IAAI;IACJ,WAAW;GACb;EACF;EACA,GAAG;CACL;CAEA,MAAM,gBAAgB,MAAc;EAClC,IAAI,oBACF,mBAAmB,EAAE,MAAM;EAE7B,IAAI,UACF,SAAS,CAAC;CAEd;CAEA,MAAM,cAAc,4BAA4BC,kBAAS,WAAW;CAEpE,MAAM,6BAA6B,YAAY,OAAO,cAAc;EAClE,OAAO;EACP,UAAU,MAAM,aAAa;CAC/B,CAAC;CAED,OACE,oBAAC,KAAK,WAAN;EACE,GAAI;EACJ,GAAI;EACJ,GAAI;EACJ,WAAW;EACX,UAAU;EACJ;EAEN,UAAA,qBAAC,sBAAD;GAAsB,OAAO;GAA7B,UAAA,CACE,qBAAC,0BAAD,EAAA,UAAA;IACG;IACD,qBAAC,OAAD;KAAK,WAAWD,yBAAO;KAAvB,UAAA;MACE,oBAAC,KAAK,OAAN;OACQ;OACO;OACb,WAAWA,yBAAO;OACb;MACN,CAAA;MACD,oBAAC,uBAAD;OAAuB,IAAG;OAAS,WAAU;MAAa,CAAA;MACzD,kBAAkB,cACjB,oBAAC,QAAD;OACE,OAAM;OACN,SAAQ;OACR,WAAWA,yBAAO;OAClB,eACE,QAAQ,SAAS,aAAa,SAAS,UAAU;OAEnD,cAAY,YAAY,OACtB,YAAY,SAAS,aAAa,SAAS,QAC7C;OAEC,UAAA,SAAS,aAAa,oBAAC,UAAD,CAAW,CAAA,IAAI,oBAAC,UAAD,CAAW,CAAA;MAC3C,CAAA;KAEP;;IACJ,sBACC,oBAAC,kBAAD,EAAA,UAAmB,2BAA6C,CAAA;GAE1C,EAAA,CAAA,GAC1B,oBAAC,gBAAD,CAAiB,CAAA,CACG;;CACR,CAAA;AAEpB,CAAC"}
+{"version":3,"file":"TextField.mjs","names":["styles","locales"],"sources":["../../../../../../../src/components/TextField/TextField.tsx"],"sourcesContent":["import {\n  flowComponent,\n  type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport * as Aria from \"react-aria-components\";\nimport { type PropsWithChildren, useState } from \"react\";\nimport { useControlledHostValueProps } from \"@/lib/remote/useControlledHostValueProps\";\nimport { type PropsContext, PropsContextProvider } from \"@/lib/propsContext\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport styles from \"./TextField.module.scss\";\nimport { FieldDescription } from \"@/components/FieldDescription\";\nimport locales from \"./locales/*.locale.json\";\nimport { Button } from \"@/components/Button\";\nimport { IconHide, IconShow } from \"@/components/Icon/components/icons\";\nimport clsx from \"clsx\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\n\nexport interface TextFieldProps\n  extends\n    PropsWithChildren<Omit<Aria.TextFieldProps, \"children\">>,\n    Pick<Aria.InputProps, \"placeholder\">,\n    FlowComponentProps<HTMLInputElement> {\n  /** Whether a character count should be displayed inside the field description. */\n  showCharacterCount?: boolean;\n}\n\n/** @flr-generate all */\nexport const TextField = flowComponent(\"TextField\", (props) => {\n  const {\n    className,\n    showCharacterCount,\n    form,\n    placeholder,\n    ref,\n    type: typeFromProps,\n    children,\n    onChange,\n    ...rest\n  } = useControlledHostValueProps(props, \"\");\n\n  const [charactersCount, setCharactersCount] = useState(\n    props.defaultValue?.length ?? props.value?.length ?? 0,\n  );\n\n  const [type, setType] = useState(typeFromProps);\n\n  const {\n    FieldErrorView,\n    FieldErrorCaptureContext,\n    fieldPropsContext,\n    wrapperProps,\n    controlProps,\n    skeletonProps,\n  } = useFieldComponent(props, \"TextField\");\n\n  const rootClassName = clsx(wrapperProps.className, className);\n\n  const propsContext: PropsContext = {\n    Button: {\n      className: styles.button,\n      variant: \"plain\",\n      color: \"secondary\",\n      tunnel: {\n        id: \"button\",\n        component: \"TextField\",\n      },\n    },\n    CopyButton: {\n      className: styles.button,\n      tunnel: {\n        id: \"button\",\n        component: \"TextField\",\n      },\n    },\n    ...fieldPropsContext,\n  };\n\n  const handleChange = (v: string) => {\n    if (showCharacterCount) {\n      setCharactersCount(v.length);\n    }\n    if (onChange) {\n      onChange(v);\n    }\n  };\n\n  const translation = useLocalizedStringFormatter(locales, \"TextField\");\n\n  const charactersCountDescription = translation.format(\"characters\", {\n    count: charactersCount,\n    maxCount: props.maxLength ?? 0,\n  });\n\n  const isPasswordHidden = type === \"password\";\n\n  const togglePasswordVisibility = () =>\n    setType(isPasswordHidden ? \"text\" : \"password\");\n\n  const passwordVisibilityButton = (\n    <Button\n      color=\"secondary\"\n      variant=\"plain\"\n      className={styles.button}\n      onPress={togglePasswordVisibility}\n      aria-label={translation.format(\n        isPasswordHidden ? \"password.show\" : \"password.hide\",\n      )}\n    >\n      {isPasswordHidden ? <IconShow /> : <IconHide />}\n    </Button>\n  );\n\n  return (\n    <Aria.TextField\n      {...rest}\n      {...controlProps}\n      {...skeletonProps}\n      className={rootClassName}\n      onChange={handleChange}\n      type={type}\n    >\n      <PropsContextProvider props={propsContext}>\n        <FieldErrorCaptureContext>\n          {children}\n          <div className={styles.inputContainer}>\n            <Aria.Input\n              form={form}\n              placeholder={placeholder}\n              className={styles.input}\n              ref={ref}\n            />\n            <UiComponentTunnelExit id=\"button\" component=\"TextField\" />\n            {typeFromProps === \"password\" && passwordVisibilityButton}\n          </div>\n          {showCharacterCount && (\n            <FieldDescription>{charactersCountDescription}</FieldDescription>\n          )}\n        </FieldErrorCaptureContext>\n        <FieldErrorView />\n      </PropsContextProvider>\n    </Aria.TextField>\n  );\n});\n\nexport default TextField;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AA4BA,IAAa,YAAY,cAAc,cAAc,UAAU;CAC7D,MAAM,EACJ,WACA,oBACA,MACA,aACA,KACA,MAAM,eACN,UACA,UACA,GAAG,SACD,4BAA4B,OAAO,EAAE;CAEzC,MAAM,CAAC,iBAAiB,sBAAsB,SAC5C,MAAM,cAAc,UAAU,MAAM,OAAO,UAAU,CACvD;CAEA,MAAM,CAAC,MAAM,WAAW,SAAS,aAAa;CAE9C,MAAM,EACJ,gBACA,0BACA,mBACA,cACA,cACA,kBACE,kBAAkB,OAAO,WAAW;CAExC,MAAM,gBAAgB,KAAK,aAAa,WAAW,SAAS;CAE5D,MAAM,eAA6B;EACjC,QAAQ;GACN,WAAWA,yBAAO;GAClB,SAAS;GACT,OAAO;GACP,QAAQ;IACN,IAAI;IACJ,WAAW;GACb;EACF;EACA,YAAY;GACV,WAAWA,yBAAO;GAClB,QAAQ;IACN,IAAI;IACJ,WAAW;GACb;EACF;EACA,GAAG;CACL;CAEA,MAAM,gBAAgB,MAAc;EAClC,IAAI,oBACF,mBAAmB,EAAE,MAAM;EAE7B,IAAI,UACF,SAAS,CAAC;CAEd;CAEA,MAAM,cAAc,4BAA4BC,kBAAS,WAAW;CAEpE,MAAM,6BAA6B,YAAY,OAAO,cAAc;EAClE,OAAO;EACP,UAAU,MAAM,aAAa;CAC/B,CAAC;CAED,MAAM,mBAAmB,SAAS;CAElC,MAAM,iCACJ,QAAQ,mBAAmB,SAAS,UAAU;CAEhD,MAAM,2BACJ,oBAAC,QAAD;EACE,OAAM;EACN,SAAQ;EACR,WAAWD,yBAAO;EAClB,SAAS;EACT,cAAY,YAAY,OACtB,mBAAmB,kBAAkB,eACvC;EAEC,UAAA,mBAAmB,oBAAC,UAAD,CAAW,CAAA,IAAI,oBAAC,UAAD,CAAW,CAAA;CACxC,CAAA;CAGV,OACE,oBAAC,KAAK,WAAN;EACE,GAAI;EACJ,GAAI;EACJ,GAAI;EACJ,WAAW;EACX,UAAU;EACJ;EAEN,UAAA,qBAAC,sBAAD;GAAsB,OAAO;GAA7B,UAAA,CACE,qBAAC,0BAAD,EAAA,UAAA;IACG;IACD,qBAAC,OAAD;KAAK,WAAWA,yBAAO;KAAvB,UAAA;MACE,oBAAC,KAAK,OAAN;OACQ;OACO;OACb,WAAWA,yBAAO;OACb;MACN,CAAA;MACD,oBAAC,uBAAD;OAAuB,IAAG;OAAS,WAAU;MAAa,CAAA;MACzD,kBAAkB,cAAc;KAC9B;;IACJ,sBACC,oBAAC,kBAAD,EAAA,UAAmB,2BAA6C,CAAA;GAE1C,EAAA,CAAA,GAC1B,oBAAC,gBAAD,CAAiB,CAAA,CACG;;CACR,CAAA;AAEpB,CAAC"}

package/dist/types/components/CodeBlock/CodeBlock.d.ts

@@ -8,7 +8,7 @@ export interface CodeBlockProps extends PropsWithClassName, PropsWithChildren, P
      * Controls truncation of long code blocks. `false` disables it, `true`
      * truncates after 8 lines, and a number sets the maximum line count.
      *
-     * @default: false
+     * @default false
      */
     truncateLines?: boolean | number;
 }

package/dist/types/components/DonutChart/DonutChart.d.ts

@@ -15,10 +15,7 @@ export interface DonutChartProps extends Omit<Aria.ProgressBarProps, "children"
     size?: "m" | "l";
     /** Divides the fill of the donut chart into segments */
     segments?: DonutChartSegment[];
-    /**
-     * Whether the legend component is shown when segments are used. @default:
-     * true
-     */
+    /** Whether the legend component is shown when segments are used. @default true */
     showLegend?: boolean;
     /** The position of the legend. @default "right" */
     legendPosition?: "top" | "left" | "bottom" | "right";

package/dist/types/components/List/components/ListSummary/ListSummary.d.ts

@@ -1,7 +1,7 @@
 import { PropsWithChildren } from 'react';
 import { FlowComponentProps } from '../../../../lib/componentFactory/flowComponent';
 export interface ListSummaryProps extends FlowComponentProps, PropsWithChildren {
-    /** Whether the summary is placed above or underneath the list @default: "top" */
+    /** Whether the summary is placed above or underneath the list @default "top" */
     position?: "top" | "bottom";
 }
 /** @flr-generate all */

package/dist/types/components/ProgressBar/ProgressBar.d.ts

@@ -17,10 +17,7 @@ export interface ProgressBarProps extends PropsWithChildren<Omit<Aria.ProgressBa
         color?: CategoricalWithCustomColor;
         valueText?: string;
     }[];
-    /**
-     * Whether the legend component is shown when segments are used. @default:
-     * true
-     */
+    /** Whether the legend component is shown when segments are used. @default true */
     showLegend?: boolean;
 }
 /** @flr-generate all */

package/dist/types/components/Rating/Rating.d.ts

@@ -4,28 +4,28 @@ import * as Aria from "react-aria-components";
 export interface RatingProps extends FlowComponentProps, PropsWithChildren, Omit<Aria.RadioGroupProps, "children" | "value" | "defaultValue"> {
     /**
      * The value sets the amount of filled stars. Decimals are rounded to the
-     * nearest whole star. @default: 0
+     * nearest whole star. @default 0
      */
     value?: number;
     /**
      * The defaultValue sets the amount of default filled stars. Decimals are
-     * rounded to the nearest whole star. @default: 0
+     * rounded to the nearest whole star. @default 0
      */
     defaultValue?: number;
-    /** The size of the component. @default: "m" */
+    /** The size of the component. @default "m" */
     size?: "s" | "m";
     /**
      * The number of segments the rating consists of. Ignored when the rating has
      * `RatingSegment` children — those define the number of segments themselves.
      *
-     * @default: 5
+     * @default 5
      */
     maxValue?: number;
     /**
      * How the segments are filled. `cumulative` fills every segment up to the
      * value, `single` fills only the selected segment.
      *
-     * @default: cumulative
+     * @default "cumulative"
      */
     fill?: "cumulative" | "single";
     /** An alternative icon for the empty state */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mittwald/flow-react-components",
-  "version": "1.5.16",
+  "version": "1.5.17",
   "type": "module",
   "description": "A React implementation of Flow, mittwald’s design system",
   "homepage": "https://flow.mittwald.de",
@@ -84,9 +84,9 @@
     "@internationalized/string-compiler": "^3.4.1",
     "@lezer/common": "^1.5.2",
     "@lezer/highlight": "^1.2.3",
-    "@mittwald/flow-icons": "^1.5.16",
+    "@mittwald/flow-icons": "^1.5.17",
     "@mittwald/password-tools-js": "^3.0.0",
-    "@mittwald/react-tunnel": "^1.5.16",
+    "@mittwald/react-tunnel": "^1.5.17",
     "@mittwald/react-use-promise": "^4.2.2",
     "@react-aria/form": "^3.2.1",
     "@react-aria/i18n": "^3.13.1",
@@ -139,13 +139,13 @@
     "@internationalized/date": "^3.12.3",
     "@lezer/generator": "^1.8.0",
     "@lezer/lr": "^1.4.10",
-    "@mittwald/flow-components-base": "1.5.16",
-    "@mittwald/flow-core": "1.5.16",
-    "@mittwald/flow-design-tokens": "1.5.16",
-    "@mittwald/flow-icons-base": "1.5.16",
+    "@mittwald/flow-components-base": "1.5.17",
+    "@mittwald/flow-core": "1.5.17",
+    "@mittwald/flow-design-tokens": "1.5.17",
+    "@mittwald/flow-icons-base": "1.5.17",
     "@mittwald/react-use-promise": "^4.2.2",
     "@mittwald/remote-dom-react": "1.2.2-mittwald.10",
-    "@mittwald/typescript-config": "1.5.16",
+    "@mittwald/typescript-config": "1.5.17",
     "@nx/storybook": "^22.7.6",
     "@storybook/addon-a11y": "^10.5.10",
     "@storybook/addon-actions": "^9.0.8",
@@ -199,7 +199,7 @@
   },
   "peerDependencies": {
     "@internationalized/date": "^3.12.2",
-    "@mittwald/flow-icons-pro": "1.5.16",
+    "@mittwald/flow-icons-pro": "1.5.17",
     "@mittwald/react-use-promise": "^4.2.2",
     "next": "^16.2.3",
     "react": "^19.2.0",
@@ -223,5 +223,5 @@
   "browserslist": [
     "baseline widely available"
   ],
-  "gitHead": "d1bc9af39685c830d052fc726f36ad2d7d3e204a"
+  "gitHead": "c4217f1b1b40e5abc50cda314682a74408d6af8f"
 }