@mittwald/flow-react-components 1.6.0-next.3 → 1.6.0-next.30

package/dist/js/packages/components/src/components/Calendar/components/RangeCalendar/helpers/useCalendarDateRangePresets.mjs

@@ -1,7 +1,7 @@
 "use client"
 /* */
 import { useLocalizedStringFormatter } from "../../../../TranslationProvider/useLocalizedStringFormatter.mjs";
-import __locale_default from "../../../../../../../../_virtual/_6.locale.mjs";
+import __locale_default from "../../../../../../../../_virtual/_7.locale.mjs";
 import { useContext, useMemo } from "react";
 import { RangeCalendarStateContext } from "react-aria-components";
 import invariant from "invariant";

package/dist/js/packages/components/src/components/CartesianChart/CartesianChart.mjs

@@ -16,10 +16,12 @@ import { TypedChartLegend } from "./components/ChartLegend/ChartLegend.mjs";
 import { TypedChartTooltip } from "./components/ChartTooltip/types.mjs";
 import { TypedLine } from "./components/Line/Line.mjs";
 import clsx from "clsx";
-import { isValidElement, useId, useMemo } from "react";
+import { useId, useMemo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { ComposedChart, ResponsiveContainer } from "recharts";
 //#region src/components/CartesianChart/CartesianChart.tsx
+var reactComponentTypes = [Symbol.for("react.memo"), Symbol.for("react.forward_ref")];
+var isEmptyViewComponent = (value) => typeof value === "function" || typeof value === "object" && value !== null && "$$typeof" in value && reactComponentTypes.includes(value.$$typeof);
 /** @flr-generate all */
 var CartesianChart = (props) => {
 	const { children, data, className, height, flexGrow, emptyView, layout = "horizontal", ...rest } = props;
@@ -27,12 +29,8 @@ var CartesianChart = (props) => {
 	const { viewDimensions, ref: containerRef } = useChartClipRect();
 	const showEmptyView = !!((!data || data.length === 0) && emptyView);
 	const rootClassName = clsx(CartesianChart_module_default.cartesianChart, showEmptyView && CartesianChart_module_default.emptyView, className);
-	if (!!emptyView && !isValidElement(emptyView)) warnDeprecation("CartesianChart: emptyView as a non-element is deprecated and will be removed in a future release. Please provide an element as emptyView.");
-	const emptyElement = useMemo(() => {
-		if (isValidElement(emptyView)) return emptyView;
-		if (!emptyView) return;
-		return null;
-	}, [emptyView]);
+	const EmptyViewComponent = isEmptyViewComponent(emptyView) ? emptyView : void 0;
+	if (EmptyViewComponent) warnDeprecation("Passing a component to the 'emptyView' prop is deprecated and will be removed in a future release. Use 'emptyView={<Element />}' instead.");
 	const chartId = useId().replaceAll(/[^\w-]/g, "");
 	const contextValue = useMemo(() => ({
 		layout,
@@ -74,7 +72,7 @@ var CartesianChart = (props) => {
 							...viewDimensions,
 							children: /* @__PURE__ */ jsx(DivView, {
 								className: CartesianChart_module_default.emptyViewContainer,
-								children: emptyElement
+								children: EmptyViewComponent ? /* @__PURE__ */ jsx(EmptyViewComponent, { data }) : emptyView
 							})
 						})]
 					})

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

@@ -1 +1 @@
-{"version":3,"file":"CartesianChart.mjs","names":["styles"],"sources":["../../../../../../../src/components/CartesianChart/CartesianChart.tsx"],"sourcesContent":["import { ComposedChart, ResponsiveContainer } from \"recharts\";\nimport {\n  type ComponentProps,\n  type ComponentType,\n  type FC,\n  isValidElement,\n  type PropsWithChildren,\n  type ReactNode,\n  useId,\n  useMemo,\n} from \"react\";\nimport clsx from \"clsx\";\nimport styles from \"./CartesianChart.module.scss\";\nimport { useChartClipRect } from \"@/components/CartesianChart/hooks/useChartClipRect\";\nimport DivView from \"@/views/DivView\";\nimport Wrap from \"@/components/Wrap\";\nimport type {\n  CartesianChartLayout,\n  ChartDataValue,\n  DataKeyProp,\n} from \"@/components/CartesianChart/types\";\nimport { CartesianChartContextProvider } from \"@/components/CartesianChart/context\";\nimport { TypedArea } from \"@/components/CartesianChart/components/Area\";\nimport { TypedBar } from \"@/components/CartesianChart/components/Bar\";\nimport { TypedXAxis } from \"@/components/CartesianChart/components/XAxis\";\nimport { TypedYAxis } from \"@/components/CartesianChart/components/YAxis\";\nimport { TypedChartGrid } from \"@/components/CartesianChart/components/ChartGrid\";\nimport { TypedChartLegend } from \"@/components/CartesianChart/components/ChartLegend\";\nimport { TypedChartTooltip } from \"@/components/CartesianChart/components/ChartTooltip\";\nimport { TypedLine } from \"@/components/CartesianChart/components/Line\";\nimport { useWarnDeprecation } from \"@/components/DeprecationWarningProvider\";\nimport { useSkeletonMode } from \"@/components/SkeletonMode/skeletonModeContext\";\n\n/** @deprecated Use a ReactNode instead */\nexport interface CartesianChartEmptyViewProps {\n  data?: ComponentProps<typeof ComposedChart>[\"data\"];\n}\n\nexport interface CartesianChartProps<TData = ChartDataValue>\n  extends\n    Pick<\n      ComponentProps<typeof ComposedChart>,\n      \"className\" | \"syncId\" | \"syncMethod\"\n    >,\n    PropsWithChildren {\n  /** The data points rendered by the chart. */\n  data?: TData[];\n\n  /** The height of the chart. */\n  height?: string;\n\n  /**\n   * The orientation of the axes and graphical items. `\"horizontal\"` puts the\n   * category axis on the x-axis — bars grow upwards. `\"vertical\"` puts it on\n   * the y-axis — bars grow to the side. `XAxis` and `YAxis` follow the layout\n   * on their own; only the `dataKey` moves to whichever axis is the categorical\n   * one.\n   *\n   * @default \"horizontal\"\n   */\n  layout?: CartesianChartLayout;\n\n  /** View that is provided when data is empty/undefined */\n  emptyView?: ReactNode;\n\n  /**\n   * Allow the height controlling container to set flex-grow: 1. Can only be\n   * used in combination with `height`\n   */\n  flexGrow?: boolean;\n}\n\n/** @flr-generate all */\nexport const CartesianChart: FC<CartesianChartProps> = (props) => {\n  const {\n    children,\n    data,\n    className,\n    height,\n    flexGrow,\n    emptyView,\n    layout = \"horizontal\",\n    ...rest\n  } = props;\n  const warnDeprecation = useWarnDeprecation();\n\n  const { viewDimensions, ref: containerRef } = useChartClipRect();\n\n  const showEmptyView = !!((!data || data.length === 0) && emptyView);\n  const rootClassName = clsx(\n    styles.cartesianChart,\n    showEmptyView && styles.emptyView,\n    className,\n  );\n  const usesDeprecatedEmptyView = !!emptyView && !isValidElement(emptyView);\n\n  if (usesDeprecatedEmptyView) {\n    warnDeprecation(\n      \"CartesianChart: emptyView as a non-element is deprecated and will be removed in a future release. Please provide an element as emptyView.\",\n    );\n  }\n\n  const emptyElement = useMemo(() => {\n    if (isValidElement(emptyView)) {\n      return emptyView;\n    }\n\n    if (!emptyView) {\n      return;\n    }\n\n    return null;\n  }, [emptyView]);\n\n  const chartId = useId().replaceAll(/[^\\w-]/g, \"\");\n  const contextValue = useMemo(\n    () => ({ layout, stackIdPrefix: `${chartId}-` }),\n    [layout, chartId],\n  );\n\n  const isSkeleton = useSkeletonMode();\n\n  /* No recharts and no svg: one surface in the size the chart would take. */\n  if (isSkeleton) {\n    return (\n      <div\n        className={styles.skeleton}\n        style={{\n          height,\n          aspectRatio: height ? undefined : 3,\n          flex: flexGrow ? 1 : undefined,\n        }}\n        aria-hidden\n        inert\n      />\n    );\n  }\n\n  return (\n    <CartesianChartContextProvider value={contextValue}>\n      <Wrap if={height}>\n        <div style={{ height, flex: flexGrow ? 1 : undefined }}>\n          <ResponsiveContainer\n            initialDimension={{\n              // fix warning on initial render\n              width: 1,\n              height: 1,\n            }}\n            width={height ? undefined : \"100%\"}\n            aspect={height ? undefined : 3}\n            ref={containerRef}\n          >\n            <ComposedChart\n              data={data}\n              className={rootClassName}\n              layout={layout}\n              {...rest}\n            >\n              {children}\n              {showEmptyView && viewDimensions && (\n                <foreignObject {...viewDimensions}>\n                  <DivView className={styles.emptyViewContainer}>\n                    {emptyElement}\n                  </DivView>\n                </foreignObject>\n              )}\n            </ComposedChart>\n          </ResponsiveContainer>\n        </div>\n      </Wrap>\n    </CartesianChartContextProvider>\n  );\n};\n\nexport const typedCartesianChart = <\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  TData extends ChartDataValue<any> = ChartDataValue<any>,\n  XAxisDataKey extends DataKeyProp<TData> = DataKeyProp<TData>,\n>() => ({\n  Chart: CartesianChart as ComponentType<CartesianChartProps<TData>>,\n  Area: TypedArea<TData>(),\n  Bar: TypedBar<TData>(),\n  XAxis: TypedXAxis<TData, XAxisDataKey>(),\n  YAxis: TypedYAxis<TData>(),\n  Grid: TypedChartGrid(),\n  Legend: TypedChartLegend(),\n  Tooltip: TypedChartTooltip<TData, XAxisDataKey>(),\n  Line: TypedLine<TData>(),\n});\n\nexport default CartesianChart;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAyEA,IAAa,kBAA2C,UAAU;CAChE,MAAM,EACJ,UACA,MACA,WACA,QACA,UACA,WACA,SAAS,cACT,GAAG,SACD;CACJ,MAAM,kBAAkB,mBAAmB;CAE3C,MAAM,EAAE,gBAAgB,KAAK,iBAAiB,iBAAiB;CAE/D,MAAM,gBAAgB,CAAC,GAAG,CAAC,QAAQ,KAAK,WAAW,MAAM;CACzD,MAAM,gBAAgB,KACpBA,8BAAO,gBACP,iBAAiBA,8BAAO,WACxB,SACF;CAGA,IAFgC,CAAC,CAAC,aAAa,CAAC,eAAe,SAAS,GAGtE,gBACE,2IACF;CAGF,MAAM,eAAe,cAAc;EACjC,IAAI,eAAe,SAAS,GAC1B,OAAO;EAGT,IAAI,CAAC,WACH;EAGF,OAAO;CACT,GAAG,CAAC,SAAS,CAAC;CAEd,MAAM,UAAU,MAAM,CAAC,CAAC,WAAW,WAAW,EAAE;CAChD,MAAM,eAAe,eACZ;EAAE;EAAQ,eAAe,GAAG,QAAQ;CAAG,IAC9C,CAAC,QAAQ,OAAO,CAClB;CAKA,IAHmB,gBAGf,GACF,OACE,oBAAC,OAAD;EACE,WAAWA,8BAAO;EAClB,OAAO;GACL;GACA,aAAa,SAAS,KAAA,IAAY;GAClC,MAAM,WAAW,IAAI,KAAA;EACvB;EACA,eAAA;EACA,OAAA;CACD,CAAA;CAIL,OACE,oBAAC,+BAAD;EAA+B,OAAO;EACpC,UAAA,oBAAC,MAAD;GAAM,IAAI;GACR,UAAA,oBAAC,OAAD;IAAK,OAAO;KAAE;KAAQ,MAAM,WAAW,IAAI,KAAA;IAAU;IACnD,UAAA,oBAAC,qBAAD;KACE,kBAAkB;MAEhB,OAAO;MACP,QAAQ;KACV;KACA,OAAO,SAAS,KAAA,IAAY;KAC5B,QAAQ,SAAS,KAAA,IAAY;KAC7B,KAAK;KAEL,UAAA,qBAAC,eAAD;MACQ;MACN,WAAW;MACH;MACR,GAAI;MAJN,UAAA,CAMG,UACA,iBAAiB,kBAChB,oBAAC,iBAAD;OAAe,GAAI;OACjB,UAAA,oBAAC,SAAD;QAAS,WAAWA,8BAAO;QACxB,UAAA;OACM,CAAA;MACI,CAAA,CAEJ;;IACI,CAAA;GAClB,CAAA;EACD,CAAA;CACuB,CAAA;AAEnC;AAEA,IAAa,6BAIL;CACN,OAAO;CACP,MAAM,UAAiB;CACvB,KAAK,SAAgB;CACrB,OAAO,WAAgC;CACvC,OAAO,WAAkB;CACzB,MAAM,eAAe;CACrB,QAAQ,iBAAiB;CACzB,SAAS,kBAAuC;CAChD,MAAM,UAAiB;AACzB"}
+{"version":3,"file":"CartesianChart.mjs","names":["styles"],"sources":["../../../../../../../src/components/CartesianChart/CartesianChart.tsx"],"sourcesContent":["import { ComposedChart, ResponsiveContainer } from \"recharts\";\nimport {\n  type ComponentProps,\n  type ComponentType,\n  type FC,\n  type PropsWithChildren,\n  type ReactNode,\n  useId,\n  useMemo,\n} from \"react\";\nimport clsx from \"clsx\";\nimport styles from \"./CartesianChart.module.scss\";\nimport { useChartClipRect } from \"@/components/CartesianChart/hooks/useChartClipRect\";\nimport DivView from \"@/views/DivView\";\nimport Wrap from \"@/components/Wrap\";\nimport type {\n  CartesianChartLayout,\n  ChartDataValue,\n  DataKeyProp,\n} from \"@/components/CartesianChart/types\";\nimport { CartesianChartContextProvider } from \"@/components/CartesianChart/context\";\nimport { TypedArea } from \"@/components/CartesianChart/components/Area\";\nimport { TypedBar } from \"@/components/CartesianChart/components/Bar\";\nimport { TypedXAxis } from \"@/components/CartesianChart/components/XAxis\";\nimport { TypedYAxis } from \"@/components/CartesianChart/components/YAxis\";\nimport { TypedChartGrid } from \"@/components/CartesianChart/components/ChartGrid\";\nimport { TypedChartLegend } from \"@/components/CartesianChart/components/ChartLegend\";\nimport { TypedChartTooltip } from \"@/components/CartesianChart/components/ChartTooltip\";\nimport { TypedLine } from \"@/components/CartesianChart/components/Line\";\nimport { useWarnDeprecation } from \"@/components/DeprecationWarningProvider\";\nimport { useSkeletonMode } from \"@/components/SkeletonMode/skeletonModeContext\";\n\n/** @deprecated Use a ReactNode instead */\nexport interface CartesianChartEmptyViewProps {\n  data?: ComponentProps<typeof ComposedChart>[\"data\"];\n}\n\nexport interface CartesianChartProps<TData = ChartDataValue>\n  extends\n    Pick<\n      ComponentProps<typeof ComposedChart>,\n      \"className\" | \"syncId\" | \"syncMethod\"\n    >,\n    PropsWithChildren {\n  /** The data points rendered by the chart. */\n  data?: TData[];\n\n  /** The height of the chart. */\n  height?: string;\n\n  /**\n   * The orientation of the axes and graphical items. `\"horizontal\"` puts the\n   * category axis on the x-axis — bars grow upwards. `\"vertical\"` puts it on\n   * the y-axis — bars grow to the side. `XAxis` and `YAxis` follow the layout\n   * on their own; only the `dataKey` moves to whichever axis is the categorical\n   * one.\n   *\n   * @default \"horizontal\"\n   */\n  layout?: CartesianChartLayout;\n\n  /** View that is provided when data is empty/undefined */\n  emptyView?: ReactNode;\n\n  /**\n   * Allow the height controlling container to set flex-grow: 1. Can only be\n   * used in combination with `height`\n   */\n  flexGrow?: boolean;\n}\n\nconst reactComponentTypes = [\n  Symbol.for(\"react.memo\"),\n  Symbol.for(\"react.forward_ref\"),\n];\n\nconst isEmptyViewComponent = (\n  value: unknown,\n): value is ComponentType<CartesianChartEmptyViewProps> =>\n  typeof value === \"function\" ||\n  (typeof value === \"object\" &&\n    value !== null &&\n    \"$$typeof\" in value &&\n    reactComponentTypes.includes(value.$$typeof as symbol));\n\n/** @flr-generate all */\nexport const CartesianChart: FC<CartesianChartProps> = (props) => {\n  const {\n    children,\n    data,\n    className,\n    height,\n    flexGrow,\n    emptyView,\n    layout = \"horizontal\",\n    ...rest\n  } = props;\n  const warnDeprecation = useWarnDeprecation();\n\n  const { viewDimensions, ref: containerRef } = useChartClipRect();\n\n  const showEmptyView = !!((!data || data.length === 0) && emptyView);\n  const rootClassName = clsx(\n    styles.cartesianChart,\n    showEmptyView && styles.emptyView,\n    className,\n  );\n  const EmptyViewComponent = isEmptyViewComponent(emptyView)\n    ? emptyView\n    : undefined;\n\n  if (EmptyViewComponent) {\n    warnDeprecation(\n      \"Passing a component to the 'emptyView' prop is deprecated and will be removed in a future release. Use 'emptyView={<Element />}' instead.\",\n    );\n  }\n\n  const chartId = useId().replaceAll(/[^\\w-]/g, \"\");\n  const contextValue = useMemo(\n    () => ({ layout, stackIdPrefix: `${chartId}-` }),\n    [layout, chartId],\n  );\n\n  const isSkeleton = useSkeletonMode();\n\n  /* No recharts and no svg: one surface in the size the chart would take. */\n  if (isSkeleton) {\n    return (\n      <div\n        className={styles.skeleton}\n        style={{\n          height,\n          aspectRatio: height ? undefined : 3,\n          flex: flexGrow ? 1 : undefined,\n        }}\n        aria-hidden\n        inert\n      />\n    );\n  }\n\n  return (\n    <CartesianChartContextProvider value={contextValue}>\n      <Wrap if={height}>\n        <div style={{ height, flex: flexGrow ? 1 : undefined }}>\n          <ResponsiveContainer\n            initialDimension={{\n              // fix warning on initial render\n              width: 1,\n              height: 1,\n            }}\n            width={height ? undefined : \"100%\"}\n            aspect={height ? undefined : 3}\n            ref={containerRef}\n          >\n            <ComposedChart\n              data={data}\n              className={rootClassName}\n              layout={layout}\n              {...rest}\n            >\n              {children}\n              {showEmptyView && viewDimensions && (\n                <foreignObject {...viewDimensions}>\n                  <DivView className={styles.emptyViewContainer}>\n                    {EmptyViewComponent ? (\n                      <EmptyViewComponent data={data} />\n                    ) : (\n                      emptyView\n                    )}\n                  </DivView>\n                </foreignObject>\n              )}\n            </ComposedChart>\n          </ResponsiveContainer>\n        </div>\n      </Wrap>\n    </CartesianChartContextProvider>\n  );\n};\n\nexport const typedCartesianChart = <\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  TData extends ChartDataValue<any> = ChartDataValue<any>,\n  XAxisDataKey extends DataKeyProp<TData> = DataKeyProp<TData>,\n>() => ({\n  Chart: CartesianChart as ComponentType<CartesianChartProps<TData>>,\n  Area: TypedArea<TData>(),\n  Bar: TypedBar<TData>(),\n  XAxis: TypedXAxis<TData, XAxisDataKey>(),\n  YAxis: TypedYAxis<TData>(),\n  Grid: TypedChartGrid(),\n  Legend: TypedChartLegend(),\n  Tooltip: TypedChartTooltip<TData, XAxisDataKey>(),\n  Line: TypedLine<TData>(),\n});\n\nexport default CartesianChart;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAuEA,IAAM,sBAAsB,CAC1B,OAAO,IAAI,YAAY,GACvB,OAAO,IAAI,mBAAmB,CAChC;AAEA,IAAM,wBACJ,UAEA,OAAO,UAAU,cAChB,OAAO,UAAU,YAChB,UAAU,QACV,cAAc,SACd,oBAAoB,SAAS,MAAM,QAAkB;;AAGzD,IAAa,kBAA2C,UAAU;CAChE,MAAM,EACJ,UACA,MACA,WACA,QACA,UACA,WACA,SAAS,cACT,GAAG,SACD;CACJ,MAAM,kBAAkB,mBAAmB;CAE3C,MAAM,EAAE,gBAAgB,KAAK,iBAAiB,iBAAiB;CAE/D,MAAM,gBAAgB,CAAC,GAAG,CAAC,QAAQ,KAAK,WAAW,MAAM;CACzD,MAAM,gBAAgB,KACpBA,8BAAO,gBACP,iBAAiBA,8BAAO,WACxB,SACF;CACA,MAAM,qBAAqB,qBAAqB,SAAS,IACrD,YACA,KAAA;CAEJ,IAAI,oBACF,gBACE,2IACF;CAGF,MAAM,UAAU,MAAM,CAAC,CAAC,WAAW,WAAW,EAAE;CAChD,MAAM,eAAe,eACZ;EAAE;EAAQ,eAAe,GAAG,QAAQ;CAAG,IAC9C,CAAC,QAAQ,OAAO,CAClB;CAKA,IAHmB,gBAGf,GACF,OACE,oBAAC,OAAD;EACE,WAAWA,8BAAO;EAClB,OAAO;GACL;GACA,aAAa,SAAS,KAAA,IAAY;GAClC,MAAM,WAAW,IAAI,KAAA;EACvB;EACA,eAAA;EACA,OAAA;CACD,CAAA;CAIL,OACE,oBAAC,+BAAD;EAA+B,OAAO;EACpC,UAAA,oBAAC,MAAD;GAAM,IAAI;GACR,UAAA,oBAAC,OAAD;IAAK,OAAO;KAAE;KAAQ,MAAM,WAAW,IAAI,KAAA;IAAU;IACnD,UAAA,oBAAC,qBAAD;KACE,kBAAkB;MAEhB,OAAO;MACP,QAAQ;KACV;KACA,OAAO,SAAS,KAAA,IAAY;KAC5B,QAAQ,SAAS,KAAA,IAAY;KAC7B,KAAK;KAEL,UAAA,qBAAC,eAAD;MACQ;MACN,WAAW;MACH;MACR,GAAI;MAJN,UAAA,CAMG,UACA,iBAAiB,kBAChB,oBAAC,iBAAD;OAAe,GAAI;OACjB,UAAA,oBAAC,SAAD;QAAS,WAAWA,8BAAO;QACxB,UAAA,qBACC,oBAAC,oBAAD,EAA0B,KAAO,CAAA,IAEjC;OAEK,CAAA;MACI,CAAA,CAEJ;;IACI,CAAA;GAClB,CAAA;EACD,CAAA;CACuB,CAAA;AAEnC;AAEA,IAAa,6BAIL;CACN,OAAO;CACP,MAAM,UAAiB;CACvB,KAAK,SAAgB;CACrB,OAAO,WAAgC;CACvC,OAAO,WAAkB;CACzB,MAAM,eAAe;CACrB,QAAQ,iBAAiB;CACzB,SAAS,kBAAuC;CAChD,MAAM,UAAiB;AACzB"}

package/dist/js/packages/components/src/components/CartesianChart/components/ChartTooltip/TooltipProgressBar.mjs

@@ -3,7 +3,7 @@
 import { useLocalizedStringFormatter } from "../../../TranslationProvider/useLocalizedStringFormatter.mjs";
 import { ProgressBar } from "../../../ProgressBar/ProgressBar.mjs";
 import { Label } from "../../../Label/Label.mjs";
-import __locale_default from "../../../../../../../_virtual/_9.locale.mjs";
+import __locale_default from "../../../../../../../_virtual/_10.locale.mjs";
 import ChartTooltip_module_default from "./ChartTooltip.module.mjs";
 import { jsx } from "react/jsx-runtime";
 import { usePromise } from "@mittwald/react-use-promise";

package/dist/js/packages/components/src/components/CartesianChart/components/YAxis/YAxis.mjs

@@ -2,6 +2,7 @@
 /* */
 import { useDesignTokens } from "../../../../lib/theming/hooks/useDesignTokens.mjs";
 import { useCartesianChartContext } from "../../context.mjs";
+import { useTickLabelWidth } from "../../hooks/useTickLabelWidth.mjs";
 import { TypedYAxis } from "./types.mjs";
 import { jsx } from "react/jsx-runtime";
 import * as Recharts from "recharts";
@@ -20,17 +21,34 @@ var YAxis = (props) => {
 	const { domain, type = "auto", width, ...rest } = props;
 	const tokens = useDesignTokens();
 	const { layout } = useCartesianChartContext();
-	const isCategoryAxis = type === "category" || type === "auto" && layout === "vertical";
+	const tickLabels = useTickLabelWidth();
+	const isAutoWidth = (width ?? (type === "category" || type === "auto" && layout === "vertical" ? "auto" : void 0)) === "auto";
+	const tickMargin = parseInt(tokens.axis.spacing.value);
+	const tickSize = parseInt(tokens.axis["tick-size"].value);
+	const tickFill = tokens.axis["color"].value;
+	const autoWidth = tickLabels.width === void 0 ? "auto" : tickLabels.width + tickSize + tickMargin;
+	const measuredTick = (tickProps) => {
+		const { payload, index, tickFormatter } = tickProps;
+		const value = `${tickFormatter ? tickFormatter(payload.value, index) : payload.value}${rest.unit ?? ""}`;
+		return /* @__PURE__ */ jsx(Recharts.Text, {
+			...tickProps,
+			ref: tickLabels.labelRef,
+			className: "recharts-cartesian-axis-tick-value",
+			fill: tickFill,
+			width: void 0,
+			children: value
+		});
+	};
 	return /* @__PURE__ */ jsx(Recharts.YAxis, {
 		...rest,
 		allowDataOverflow: true,
 		domain,
 		type,
-		width: width ?? (isCategoryAxis ? "auto" : void 0),
+		width: isAutoWidth ? autoWidth : width,
 		fontSize: tokens.axis["font-size"].value,
-		tick: { fill: tokens.axis["color"].value },
-		tickMargin: parseInt(tokens.axis.spacing.value),
-		tickSize: parseInt(tokens.axis["tick-size"].value)
+		tick: isAutoWidth ? measuredTick : { fill: tickFill },
+		tickMargin,
+		tickSize
 	});
 };
 //#endregion

package/dist/js/packages/components/src/components/CartesianChart/components/YAxis/YAxis.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"YAxis.mjs","names":[],"sources":["../../../../../../../../../src/components/CartesianChart/components/YAxis/YAxis.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport * as Recharts from \"recharts\";\nimport type {\n  ChartDataValue,\n  DataKey,\n  DataKeyValue,\n} from \"@/components/CartesianChart/types\";\nimport { useCartesianChartContext } from \"@/components/CartesianChart/context\";\nimport { useDesignTokens } from \"@/lib/theming\";\n\nexport type YAxisProps<\n  TData extends ChartDataValue = ChartDataValue,\n  TDataKey extends DataKey<TData> = DataKey<TData>,\n  TDataMatch = DataKeyValue<TData, TDataKey>,\n> = Pick<\n  Recharts.YAxisProps,\n  | \"className\"\n  | \"orientation\"\n  | \"allowDecimals\"\n  | \"interval\"\n  | \"minTickGap\"\n  | \"scale\"\n  | \"type\"\n  | \"domain\"\n  | \"hide\"\n  | \"unit\"\n> & {\n  dataKey?: TDataKey;\n  tickFormatter?: (value: TDataMatch, index: number) => string;\n  /**\n   * The width of the axis in pixels. `\"auto\"` sizes the axis to its widest tick\n   * label. Defaults to `\"auto\"` for a category axis (e.g. with `layout` set to\n   * `\"vertical\"`) and to `60` otherwise. Pin a number to align the plot areas\n   * of synchronized charts.\n   */\n  width?: number | \"auto\";\n};\n\n/**\n * `tickFormatter` is deliberately not part of the remote surface. A function\n * property crosses the boundary as a thread proxy whose call returns a Promise,\n * and recharts concatenates the formatter's result straight into the tick label\n * — so remotely every tick rendered `[object Promise]`. Dropping it from the\n * remote surface leaves the raw value there; the prop keeps working locally.\n *\n * @flr-generate all\n * @flr-ignore-props tickFormatter\n */\nexport const YAxis: FC<YAxisProps> = (props) => {\n  const { domain, type = \"auto\", width, ...rest } = props;\n\n  const tokens = useDesignTokens();\n  const { layout } = useCartesianChartContext();\n\n  const isCategoryAxis =\n    type === \"category\" || (type === \"auto\" && layout === \"vertical\");\n\n  return (\n    <Recharts.YAxis\n      {...rest}\n      allowDataOverflow\n      domain={domain}\n      type={type}\n      width={width ?? (isCategoryAxis ? \"auto\" : undefined)}\n      fontSize={tokens.axis[\"font-size\"].value}\n      tick={{\n        fill: tokens.axis[\"color\"].value,\n      }}\n      tickMargin={parseInt(tokens.axis.spacing.value)}\n      tickSize={parseInt(tokens.axis[\"tick-size\"].value)}\n    />\n  );\n};\n\nexport { TypedYAxis } from \"./types\";\n\nexport default YAxis;\n"],"mappings":";;;;;;;;;;;;;;;;;;AAgDA,IAAa,SAAyB,UAAU;CAC9C,MAAM,EAAE,QAAQ,OAAO,QAAQ,OAAO,GAAG,SAAS;CAElD,MAAM,SAAS,gBAAgB;CAC/B,MAAM,EAAE,WAAW,yBAAyB;CAE5C,MAAM,iBACJ,SAAS,cAAe,SAAS,UAAU,WAAW;CAExD,OACE,oBAAC,SAAS,OAAV;EACE,GAAI;EACJ,mBAAA;EACQ;EACF;EACN,OAAO,UAAU,iBAAiB,SAAS,KAAA;EAC3C,UAAU,OAAO,KAAK,YAAY,CAAC;EACnC,MAAM,EACJ,MAAM,OAAO,KAAK,QAAQ,CAAC,MAC7B;EACA,YAAY,SAAS,OAAO,KAAK,QAAQ,KAAK;EAC9C,UAAU,SAAS,OAAO,KAAK,YAAY,CAAC,KAAK;CAClD,CAAA;AAEL"}
+{"version":3,"file":"YAxis.mjs","names":[],"sources":["../../../../../../../../../src/components/CartesianChart/components/YAxis/YAxis.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport * as Recharts from \"recharts\";\nimport type {\n  ChartDataValue,\n  DataKey,\n  DataKeyValue,\n} from \"@/components/CartesianChart/types\";\nimport { useCartesianChartContext } from \"@/components/CartesianChart/context\";\nimport { useDesignTokens } from \"@/lib/theming\";\nimport { useTickLabelWidth } from \"@/components/CartesianChart/hooks/useTickLabelWidth\";\n\nexport type YAxisProps<\n  TData extends ChartDataValue = ChartDataValue,\n  TDataKey extends DataKey<TData> = DataKey<TData>,\n  TDataMatch = DataKeyValue<TData, TDataKey>,\n> = Pick<\n  Recharts.YAxisProps,\n  | \"className\"\n  | \"orientation\"\n  | \"allowDecimals\"\n  | \"interval\"\n  | \"minTickGap\"\n  | \"scale\"\n  | \"type\"\n  | \"domain\"\n  | \"hide\"\n  | \"unit\"\n> & {\n  dataKey?: TDataKey;\n  tickFormatter?: (value: TDataMatch, index: number) => string;\n  /**\n   * The width of the axis in pixels. `\"auto\"` sizes the axis to its widest tick\n   * label. Defaults to `\"auto\"` for a category axis (e.g. with `layout` set to\n   * `\"vertical\"`) and to `60` otherwise. Pin a number to align the plot areas\n   * of synchronized charts.\n   */\n  width?: number | \"auto\";\n};\n\n/**\n * `tickFormatter` is deliberately not part of the remote surface. A function\n * property crosses the boundary as a thread proxy whose call returns a Promise,\n * and recharts concatenates the formatter's result straight into the tick label\n * — so remotely every tick rendered `[object Promise]`. Dropping it from the\n * remote surface leaves the raw value there; the prop keeps working locally.\n *\n * @flr-generate all\n * @flr-ignore-props tickFormatter\n */\nexport const YAxis: FC<YAxisProps> = (props) => {\n  const { domain, type = \"auto\", width, ...rest } = props;\n\n  const tokens = useDesignTokens();\n  const { layout } = useCartesianChartContext();\n  const tickLabels = useTickLabelWidth();\n\n  const isCategoryAxis =\n    type === \"category\" || (type === \"auto\" && layout === \"vertical\");\n  const isAutoWidth =\n    (width ?? (isCategoryAxis ? \"auto\" : undefined)) === \"auto\";\n\n  const tickMargin = parseInt(tokens.axis.spacing.value);\n  const tickSize = parseInt(tokens.axis[\"tick-size\"].value);\n  const tickFill = tokens.axis[\"color\"].value;\n\n  /*\n   * Recharts' own `\"auto\"` stays in charge until the labels are measured, so\n   * the first frame is close already.\n   */\n  const autoWidth =\n    tickLabels.width === undefined\n      ? \"auto\"\n      : tickLabels.width + tickSize + tickMargin;\n\n  /*\n   * Recharts' default tick label, plus the measuring ref. Recharts passes a\n   * numeric axis width on to the label, which wraps once the text is wider —\n   * so the label drops it, as it does with `\"auto\"`.\n   */\n  const measuredTick = (tickProps: Recharts.YAxisTickContentProps) => {\n    const { payload, index, tickFormatter } = tickProps;\n    const value = `${tickFormatter ? tickFormatter(payload.value, index) : payload.value}${rest.unit ?? \"\"}`;\n    return (\n      <Recharts.Text\n        {...tickProps}\n        ref={tickLabels.labelRef}\n        className=\"recharts-cartesian-axis-tick-value\"\n        fill={tickFill}\n        width={undefined}\n      >\n        {value}\n      </Recharts.Text>\n    );\n  };\n\n  return (\n    <Recharts.YAxis\n      {...rest}\n      allowDataOverflow\n      domain={domain}\n      type={type}\n      width={isAutoWidth ? autoWidth : width}\n      fontSize={tokens.axis[\"font-size\"].value}\n      tick={isAutoWidth ? measuredTick : { fill: tickFill }}\n      tickMargin={tickMargin}\n      tickSize={tickSize}\n    />\n  );\n};\n\nexport { TypedYAxis } from \"./types\";\n\nexport default YAxis;\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAiDA,IAAa,SAAyB,UAAU;CAC9C,MAAM,EAAE,QAAQ,OAAO,QAAQ,OAAO,GAAG,SAAS;CAElD,MAAM,SAAS,gBAAgB;CAC/B,MAAM,EAAE,WAAW,yBAAyB;CAC5C,MAAM,aAAa,kBAAkB;CAIrC,MAAM,eACH,UAFD,SAAS,cAAe,SAAS,UAAU,WAAW,aAE1B,SAAS,KAAA,QAAgB;CAEvD,MAAM,aAAa,SAAS,OAAO,KAAK,QAAQ,KAAK;CACrD,MAAM,WAAW,SAAS,OAAO,KAAK,YAAY,CAAC,KAAK;CACxD,MAAM,WAAW,OAAO,KAAK,QAAQ,CAAC;CAMtC,MAAM,YACJ,WAAW,UAAU,KAAA,IACjB,SACA,WAAW,QAAQ,WAAW;CAOpC,MAAM,gBAAgB,cAA8C;EAClE,MAAM,EAAE,SAAS,OAAO,kBAAkB;EAC1C,MAAM,QAAQ,GAAG,gBAAgB,cAAc,QAAQ,OAAO,KAAK,IAAI,QAAQ,QAAQ,KAAK,QAAQ;EACpG,OACE,oBAAC,SAAS,MAAV;GACE,GAAI;GACJ,KAAK,WAAW;GAChB,WAAU;GACV,MAAM;GACN,OAAO,KAAA;GAEN,UAAA;EACY,CAAA;CAEnB;CAEA,OACE,oBAAC,SAAS,OAAV;EACE,GAAI;EACJ,mBAAA;EACQ;EACF;EACN,OAAO,cAAc,YAAY;EACjC,UAAU,OAAO,KAAK,YAAY,CAAC;EACnC,MAAM,cAAc,eAAe,EAAE,MAAM,SAAS;EACxC;EACF;CACX,CAAA;AAEL"}

package/dist/js/packages/components/src/components/CartesianChart/hooks/useTickLabelWidth.mjs

@@ -0,0 +1,67 @@
+"use client"
+/* */
+import { createFrameResizeObserver } from "../../../lib/dom/createFrameResizeObserver.mjs";
+import { useCallback, useEffect, useRef, useState } from "react";
+//#region src/components/CartesianChart/hooks/useTickLabelWidth.ts
+var measureLabel = (label) => {
+	try {
+		return label.getBBox().width;
+	} catch {
+		return 0;
+	}
+};
+/**
+* Measures the widest tick label of an axis, for an axis that sizes itself to
+* its labels.
+*
+* Replaces recharts' own `width="auto"` measurement, which undersizes the axis
+* in two ways. It reads `getBoundingClientRect()` — screen pixels, which a CSS
+* `zoom` or `transform` on an ancestor scales — and uses the result as SVG user
+* units. And it measures once, so a web font that replaces its fallback after
+* mount widens the labels past the axis. `getBBox()` measures in user units,
+* and a `ResizeObserver` — which tracks an SVG element's bbox — measures again
+* whenever a label changes size: a font swap, a new text, a hidden chart that
+* is shown.
+*
+* Attach the returned ref to every tick label. The width is `undefined` until a
+* label has been measured.
+*
+* @internal
+*/
+var useTickLabelWidth = () => {
+	const labels = useRef(/* @__PURE__ */ new Set());
+	const observer = useRef(null);
+	const [width, setWidth] = useState();
+	const measure = useCallback(() => {
+		const widest = Math.max(0, ...[...labels.current].map(measureLabel));
+		setWidth(widest > 0 ? Math.ceil(widest) : void 0);
+	}, []);
+	useEffect(() => {
+		if (typeof ResizeObserver === "undefined") return;
+		const frameObserver = createFrameResizeObserver(measure);
+		frameObserver.observe(labels.current);
+		observer.current = frameObserver;
+		return () => {
+			frameObserver.disconnect();
+			observer.current = null;
+		};
+	}, [measure]);
+	return {
+		width,
+		labelRef: useCallback((label) => {
+			if (!label) return;
+			labels.current.add(label);
+			observer.current?.observe(labels.current);
+			measure();
+			return () => {
+				labels.current.delete(label);
+				observer.current?.observe(labels.current);
+				measure();
+			};
+		}, [measure])
+	};
+};
+//#endregion
+export { useTickLabelWidth };
+
+//# sourceMappingURL=useTickLabelWidth.mjs.map

package/dist/js/packages/components/src/components/CartesianChart/hooks/useTickLabelWidth.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTickLabelWidth.mjs","names":[],"sources":["../../../../../../../../src/components/CartesianChart/hooks/useTickLabelWidth.ts"],"sourcesContent":["import {\n  type RefCallback,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\nimport {\n  createFrameResizeObserver,\n  type FrameResizeObserver,\n} from \"@/lib/dom/createFrameResizeObserver\";\n\nconst measureLabel = (label: SVGTextElement): number => {\n  try {\n    return label.getBBox().width;\n  } catch {\n    // Firefox throws for an element that is not rendered, and jsdom has no\n    // `getBBox` at all.\n    return 0;\n  }\n};\n\n/**\n * Measures the widest tick label of an axis, for an axis that sizes itself to\n * its labels.\n *\n * Replaces recharts' own `width=\"auto\"` measurement, which undersizes the axis\n * in two ways. It reads `getBoundingClientRect()` — screen pixels, which a CSS\n * `zoom` or `transform` on an ancestor scales — and uses the result as SVG user\n * units. And it measures once, so a web font that replaces its fallback after\n * mount widens the labels past the axis. `getBBox()` measures in user units,\n * and a `ResizeObserver` — which tracks an SVG element's bbox — measures again\n * whenever a label changes size: a font swap, a new text, a hidden chart that\n * is shown.\n *\n * Attach the returned ref to every tick label. The width is `undefined` until a\n * label has been measured.\n *\n * @internal\n */\nexport const useTickLabelWidth = () => {\n  const labels = useRef(new Set<SVGTextElement>());\n  const observer = useRef<FrameResizeObserver>(null);\n  const [width, setWidth] = useState<number>();\n\n  const measure = useCallback(() => {\n    const widest = Math.max(0, ...[...labels.current].map(measureLabel));\n    setWidth(widest > 0 ? Math.ceil(widest) : undefined);\n  }, []);\n\n  useEffect(() => {\n    // jsdom has no `ResizeObserver`.\n    if (typeof ResizeObserver === \"undefined\") {\n      return;\n    }\n    const frameObserver = createFrameResizeObserver(measure);\n    frameObserver.observe(labels.current);\n    observer.current = frameObserver;\n    return () => {\n      frameObserver.disconnect();\n      observer.current = null;\n    };\n  }, [measure]);\n\n  const labelRef: RefCallback<SVGTextElement> = useCallback(\n    (label) => {\n      if (!label) {\n        return;\n      }\n      labels.current.add(label);\n      observer.current?.observe(labels.current);\n      measure();\n      return () => {\n        labels.current.delete(label);\n        observer.current?.observe(labels.current);\n        measure();\n      };\n    },\n    [measure],\n  );\n\n  return { width, labelRef };\n};\n"],"mappings":";;;;;AAYA,IAAM,gBAAgB,UAAkC;CACtD,IAAI;EACF,OAAO,MAAM,QAAQ,CAAC,CAAC;CACzB,QAAQ;EAGN,OAAO;CACT;AACF;;;;;;;;;;;;;;;;;;;AAoBA,IAAa,0BAA0B;CACrC,MAAM,SAAS,uBAAO,IAAI,IAAoB,CAAC;CAC/C,MAAM,WAAW,OAA4B,IAAI;CACjD,MAAM,CAAC,OAAO,YAAY,SAAiB;CAE3C,MAAM,UAAU,kBAAkB;EAChC,MAAM,SAAS,KAAK,IAAI,GAAG,GAAG,CAAC,GAAG,OAAO,OAAO,CAAC,CAAC,IAAI,YAAY,CAAC;EACnE,SAAS,SAAS,IAAI,KAAK,KAAK,MAAM,IAAI,KAAA,CAAS;CACrD,GAAG,CAAC,CAAC;CAEL,gBAAgB;EAEd,IAAI,OAAO,mBAAmB,aAC5B;EAEF,MAAM,gBAAgB,0BAA0B,OAAO;EACvD,cAAc,QAAQ,OAAO,OAAO;EACpC,SAAS,UAAU;EACnB,aAAa;GACX,cAAc,WAAW;GACzB,SAAS,UAAU;EACrB;CACF,GAAG,CAAC,OAAO,CAAC;CAmBZ,OAAO;EAAE;EAAO,UAjB8B,aAC3C,UAAU;GACT,IAAI,CAAC,OACH;GAEF,OAAO,QAAQ,IAAI,KAAK;GACxB,SAAS,SAAS,QAAQ,OAAO,OAAO;GACxC,QAAQ;GACR,aAAa;IACX,OAAO,QAAQ,OAAO,KAAK;IAC3B,SAAS,SAAS,QAAQ,OAAO,OAAO;IACxC,QAAQ;GACV;EACF,GACA,CAAC,OAAO,CAGM;CAAS;AAC3B"}

package/dist/js/packages/components/src/components/Checkbox/Checkbox.mjs

@@ -33,12 +33,12 @@ var Checkbox = flowComponent("Checkbox", (props) => {
 	};
 	return /* @__PURE__ */ jsxs("div", {
 		...skeletonProps,
-		className: clsx(Checkbox_module_default.checkbox, className, wrapperProps.className),
+		className: clsx(wrapperProps.className, Checkbox_module_default.checkbox, className),
 		children: [/* @__PURE__ */ jsx(FieldErrorCaptureContext, { children: /* @__PURE__ */ jsx(Aria.Checkbox, {
 			...rest,
 			"aria-describedby": controlProps["aria-describedby"],
 			inputRef,
-			className: clsx(inputClassName, Checkbox_module_default.input),
+			className: clsx(Checkbox_module_default.input, inputClassName),
 			children: ({ isSelected, isIndeterminate }) => /* @__PURE__ */ jsxs(PropsContextProvider, {
 				props: fieldPropsContext,
 				children: [renderIcon(isSelected, isIndeterminate), /* @__PURE__ */ jsx(SkeletonRawText, { children })]

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

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.mjs","names":["styles"],"sources":["../../../../../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import {\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n} from \"@/components/Icon/components/icons\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport clsx from \"clsx\";\nimport type { PropsWithChildren } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport styles from \"./Checkbox.module.scss\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport { useObjectRef } from \"react-aria\";\nimport { SkeletonRawText } from \"@/components/SkeletonMode/components/SkeletonRawText\";\nimport {\n  SkeletonModeReset,\n  useSkeletonMode,\n} from \"@/components/SkeletonMode/skeletonModeContext\";\n\nexport interface CheckboxProps\n  extends\n    PropsWithChildren<\n      Omit<Aria.CheckboxProps, \"children\" | \"ref\" | \"inputRef\">\n    >,\n    FlowComponentProps<HTMLInputElement> {\n  /** The class name of the underlying input element. */\n  inputClassName?: string;\n}\n\n/** @flr-generate all */\nexport const Checkbox = flowComponent(\"Checkbox\", (props) => {\n  const { children, className, ref, inputClassName, ...rest } = props;\n\n  const {\n    FieldErrorView,\n    FieldErrorCaptureContext,\n    fieldPropsContext,\n    wrapperProps,\n    controlProps,\n    skeletonProps,\n  } = useFieldComponent(props, \"Checkbox\");\n\n  const inputRef = useObjectRef(ref);\n  const isSkeleton = useSkeletonMode();\n\n  const checkedIcon = <IconCheckboxChecked className={styles.icon} />;\n  const indeterminateIcon = (\n    <IconCheckboxIndeterminate className={styles.icon} />\n  );\n  const emptyIcon = <IconCheckboxEmpty className={styles.icon} />;\n\n  const renderIcon = (isSelected: boolean, isIndeterminate: boolean) => {\n    const icon = isSelected\n      ? checkedIcon\n      : isIndeterminate\n        ? indeterminateIcon\n        : emptyIcon;\n\n    const skeletonIcon = (\n      <span className={styles.skeletonIcon}>\n        <SkeletonModeReset>{icon}</SkeletonModeReset>\n      </span>\n    );\n\n    return isSkeleton ? skeletonIcon : icon;\n  };\n\n  return (\n    <div\n      {...skeletonProps}\n      className={clsx(styles.checkbox, className, wrapperProps.className)}\n    >\n      <FieldErrorCaptureContext>\n        <Aria.Checkbox\n          {...rest}\n          aria-describedby={controlProps[\"aria-describedby\"]}\n          inputRef={inputRef}\n          className={clsx(inputClassName, styles.input)}\n        >\n          {({ isSelected, isIndeterminate }) => (\n            <PropsContextProvider props={fieldPropsContext}>\n              {renderIcon(isSelected, isIndeterminate)}\n              <SkeletonRawText>{children}</SkeletonRawText>\n            </PropsContextProvider>\n          )}\n        </Aria.Checkbox>\n      </FieldErrorCaptureContext>\n      <FieldErrorView />\n    </div>\n  );\n});\n\nexport default Checkbox;\n"],"mappings":";;;;;;;;;;;;;;;;;AA+BA,IAAa,WAAW,cAAc,aAAa,UAAU;CAC3D,MAAM,EAAE,UAAU,WAAW,KAAK,gBAAgB,GAAG,SAAS;CAE9D,MAAM,EACJ,gBACA,0BACA,mBACA,cACA,cACA,kBACE,kBAAkB,OAAO,UAAU;CAEvC,MAAM,WAAW,aAAa,GAAG;CACjC,MAAM,aAAa,gBAAgB;CAEnC,MAAM,cAAc,oBAAC,qBAAD,EAAqB,WAAWA,wBAAO,KAAO,CAAA;CAClE,MAAM,oBACJ,oBAAC,2BAAD,EAA2B,WAAWA,wBAAO,KAAO,CAAA;CAEtD,MAAM,YAAY,oBAAC,mBAAD,EAAmB,WAAWA,wBAAO,KAAO,CAAA;CAE9D,MAAM,cAAc,YAAqB,oBAA6B;EACpE,MAAM,OAAO,aACT,cACA,kBACE,oBACA;EAEN,MAAM,eACJ,oBAAC,QAAD;GAAM,WAAWA,wBAAO;GACtB,UAAA,oBAAC,mBAAD,EAAA,UAAoB,KAAwB,CAAA;EACxC,CAAA;EAGR,OAAO,aAAa,eAAe;CACrC;CAEA,OACE,qBAAC,OAAD;EACE,GAAI;EACJ,WAAW,KAAKA,wBAAO,UAAU,WAAW,aAAa,SAAS;EAFpE,UAAA,CAIE,oBAAC,0BAAD,EAAA,UACE,oBAAC,KAAK,UAAN;GACE,GAAI;GACJ,oBAAkB,aAAa;GACrB;GACV,WAAW,KAAK,gBAAgBA,wBAAO,KAAK;GAE1C,WAAA,EAAE,YAAY,sBACd,qBAAC,sBAAD;IAAsB,OAAO;IAA7B,UAAA,CACG,WAAW,YAAY,eAAe,GACvC,oBAAC,iBAAD,EAAkB,SAA0B,CAAA,CACxB;;EAEX,CAAA,EACS,CAAA,GAC1B,oBAAC,gBAAD,CAAiB,CAAA,CACd;;AAET,CAAC"}
+{"version":3,"file":"Checkbox.mjs","names":["styles"],"sources":["../../../../../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import {\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n} from \"@/components/Icon/components/icons\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport clsx from \"clsx\";\nimport type { PropsWithChildren } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport styles from \"./Checkbox.module.scss\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport { useObjectRef } from \"react-aria\";\nimport { SkeletonRawText } from \"@/components/SkeletonMode/components/SkeletonRawText\";\nimport {\n  SkeletonModeReset,\n  useSkeletonMode,\n} from \"@/components/SkeletonMode/skeletonModeContext\";\n\nexport interface CheckboxProps\n  extends\n    PropsWithChildren<\n      Omit<Aria.CheckboxProps, \"children\" | \"ref\" | \"inputRef\">\n    >,\n    FlowComponentProps<HTMLInputElement> {\n  /** The class name of the underlying input element. */\n  inputClassName?: string;\n}\n\n/** @flr-generate all */\nexport const Checkbox = flowComponent(\"Checkbox\", (props) => {\n  const { children, className, ref, inputClassName, ...rest } = props;\n\n  const {\n    FieldErrorView,\n    FieldErrorCaptureContext,\n    fieldPropsContext,\n    wrapperProps,\n    controlProps,\n    skeletonProps,\n  } = useFieldComponent(props, \"Checkbox\");\n\n  const inputRef = useObjectRef(ref);\n  const isSkeleton = useSkeletonMode();\n\n  const checkedIcon = <IconCheckboxChecked className={styles.icon} />;\n  const indeterminateIcon = (\n    <IconCheckboxIndeterminate className={styles.icon} />\n  );\n  const emptyIcon = <IconCheckboxEmpty className={styles.icon} />;\n\n  const renderIcon = (isSelected: boolean, isIndeterminate: boolean) => {\n    const icon = isSelected\n      ? checkedIcon\n      : isIndeterminate\n        ? indeterminateIcon\n        : emptyIcon;\n\n    const skeletonIcon = (\n      <span className={styles.skeletonIcon}>\n        <SkeletonModeReset>{icon}</SkeletonModeReset>\n      </span>\n    );\n\n    return isSkeleton ? skeletonIcon : icon;\n  };\n\n  return (\n    <div\n      {...skeletonProps}\n      className={clsx(wrapperProps.className, styles.checkbox, className)}\n    >\n      <FieldErrorCaptureContext>\n        <Aria.Checkbox\n          {...rest}\n          aria-describedby={controlProps[\"aria-describedby\"]}\n          inputRef={inputRef}\n          className={clsx(styles.input, inputClassName)}\n        >\n          {({ isSelected, isIndeterminate }) => (\n            <PropsContextProvider props={fieldPropsContext}>\n              {renderIcon(isSelected, isIndeterminate)}\n              <SkeletonRawText>{children}</SkeletonRawText>\n            </PropsContextProvider>\n          )}\n        </Aria.Checkbox>\n      </FieldErrorCaptureContext>\n      <FieldErrorView />\n    </div>\n  );\n});\n\nexport default Checkbox;\n"],"mappings":";;;;;;;;;;;;;;;;;AA+BA,IAAa,WAAW,cAAc,aAAa,UAAU;CAC3D,MAAM,EAAE,UAAU,WAAW,KAAK,gBAAgB,GAAG,SAAS;CAE9D,MAAM,EACJ,gBACA,0BACA,mBACA,cACA,cACA,kBACE,kBAAkB,OAAO,UAAU;CAEvC,MAAM,WAAW,aAAa,GAAG;CACjC,MAAM,aAAa,gBAAgB;CAEnC,MAAM,cAAc,oBAAC,qBAAD,EAAqB,WAAWA,wBAAO,KAAO,CAAA;CAClE,MAAM,oBACJ,oBAAC,2BAAD,EAA2B,WAAWA,wBAAO,KAAO,CAAA;CAEtD,MAAM,YAAY,oBAAC,mBAAD,EAAmB,WAAWA,wBAAO,KAAO,CAAA;CAE9D,MAAM,cAAc,YAAqB,oBAA6B;EACpE,MAAM,OAAO,aACT,cACA,kBACE,oBACA;EAEN,MAAM,eACJ,oBAAC,QAAD;GAAM,WAAWA,wBAAO;GACtB,UAAA,oBAAC,mBAAD,EAAA,UAAoB,KAAwB,CAAA;EACxC,CAAA;EAGR,OAAO,aAAa,eAAe;CACrC;CAEA,OACE,qBAAC,OAAD;EACE,GAAI;EACJ,WAAW,KAAK,aAAa,WAAWA,wBAAO,UAAU,SAAS;EAFpE,UAAA,CAIE,oBAAC,0BAAD,EAAA,UACE,oBAAC,KAAK,UAAN;GACE,GAAI;GACJ,oBAAkB,aAAa;GACrB;GACV,WAAW,KAAKA,wBAAO,OAAO,cAAc;GAE1C,WAAA,EAAE,YAAY,sBACd,qBAAC,sBAAD;IAAsB,OAAO;IAA7B,UAAA,CACG,WAAW,YAAY,eAAe,GACvC,oBAAC,iBAAD,EAAkB,SAA0B,CAAA,CACxB;;EAEX,CAAA,EACS,CAAA,GAC1B,oBAAC,gBAAD,CAAiB,CAAA,CACd;;AAET,CAAC"}

package/dist/js/packages/components/src/components/CodeBlock/CodeBlock.mjs

@@ -5,7 +5,7 @@ import { useLocalizedStringFormatter } from "../TranslationProvider/useLocalized
 import { Button } from "../Button/Button.mjs";
 import CodeBlock_module_default from "./CodeBlock.module.mjs";
 import { CodeEditor } from "../CodeEditor/CodeEditor.mjs";
-import __locale_default from "../../../../../_virtual/_11.locale.mjs";
+import __locale_default from "../../../../../_virtual/_12.locale.mjs";
 import clsx from "clsx";
 import { useId, useRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";
@@ -20,10 +20,10 @@ var CodeBlock = (props) => {
 	const editorRef = useRef(null);
 	const stringFormatter = useLocalizedStringFormatter(__locale_default, "CodeBlock");
 	const isSkeleton = useSkeletonMode();
-	const rootClassName = clsx(CodeBlock_module_default.codeBlock, isSkeleton && CodeBlock_module_default.skeleton, className);
+	const baseClassName = clsx(CodeBlock_module_default.codeBlock, isSkeleton && CodeBlock_module_default.skeleton);
 	const id = useId();
 	if (!code) return /* @__PURE__ */ jsx("div", {
-		className: clsx(rootClassName, CodeBlock_module_default.withChildren),
+		className: clsx(baseClassName, CodeBlock_module_default.withChildren, className),
 		inert: isSkeleton || void 0,
 		children: /* @__PURE__ */ jsx("pre", { children: /* @__PURE__ */ jsx("code", { children: /* @__PURE__ */ jsx(SkeletonModeReset, { children }) }) })
 	});
@@ -48,7 +48,7 @@ var CodeBlock = (props) => {
 		}
 	};
 	return /* @__PURE__ */ jsx("div", {
-		className: clsx(rootClassName, maxHeight && CodeBlock_module_default.truncated, folded && CodeBlock_module_default.folded),
+		className: clsx(baseClassName, maxHeight && CodeBlock_module_default.truncated, folded && CodeBlock_module_default.folded, className),
 		style: heightVariables,
 		onTransitionEnd: (event) => {
 			if (event.propertyName === "max-height") setExpandedHeight(void 0);

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

@@ -1 +1 @@
-{"version":3,"file":"CodeBlock.mjs","names":["locales","styles"],"sources":["../../../../../../../src/components/CodeBlock/CodeBlock.tsx"],"sourcesContent":["import {\n  type FC,\n  type PropsWithChildren,\n  useId,\n  useRef,\n  useState,\n} from \"react\";\nimport { flushSync } from \"react-dom\";\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\";\nimport {\n  SkeletonModeReset,\n  useSkeletonMode,\n} from \"@/components/SkeletonMode/skeletonModeContext\";\n\nexport interface CodeBlockProps\n  extends\n    PropsWithClassName,\n    PropsWithChildren,\n    Partial<\n      Pick<CodeEditorProps, \"language\" | \"showLineNumbers\" | \"copyable\">\n    > {\n  /** The code displayed in the block. */\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 [folded, setFolded] = useState(truncateLines !== false);\n  const [maxHeight, setMaxHeight] = useState<number>();\n  /* The full height, only while the toggle animates to or from it. */\n  const [expandedHeight, setExpandedHeight] = useState<number>();\n  const editorRef = useRef<HTMLElement>(null);\n\n  const stringFormatter = useLocalizedStringFormatter(locales, \"CodeBlock\");\n  const isSkeleton = useSkeletonMode();\n\n  const rootClassName = clsx(\n    styles.codeBlock,\n    isSkeleton && styles.skeleton,\n    className,\n  );\n\n  const id = useId();\n\n  if (!code) {\n    return (\n      <div\n        className={clsx(rootClassName, styles.withChildren)}\n        inert={isSkeleton || undefined}\n      >\n        {/* Deliberately class-less: a `flow--` class would make the global\n            reset's `font: inherit` apply and replace the UA monospace\n            metrics. See CodeBlock.module.scss. */}\n        <pre>\n          <code>\n            <SkeletonModeReset>{children}</SkeletonModeReset>\n          </code>\n        </pre>\n      </div>\n    );\n  }\n\n  const heightVariables: React.CSSProperties = {\n    ...(maxHeight ? { \"--max-height\": `${maxHeight}px` } : {}),\n    ...(expandedHeight\n      ? { \"--expanded-max-height\": `${expandedHeight}px` }\n      : {}),\n  };\n\n  /* A height transition needs a length on both ends – `none` does not\n     interpolate. So the full height is measured for the transition and\n     released once it ended, and code that changes later is not clipped. */\n  const toggleFolded = () => {\n    const editor = editorRef.current;\n\n    if (!editor) {\n      setFolded((folded) => !folded);\n      return;\n    }\n\n    const animates = getComputedStyle(editor)\n      .transitionDuration.split(\",\")\n      .some((duration) => parseFloat(duration) > 0);\n\n    if (folded) {\n      setExpandedHeight(animates ? editor.scrollHeight : undefined);\n      setFolded(false);\n    } else {\n      flushSync(() => setExpandedHeight(editor.scrollHeight));\n      // Applies the start height before the folded one replaces it.\n      editor.getBoundingClientRect();\n      setFolded(true);\n    }\n  };\n\n  return (\n    <div\n      className={clsx(\n        rootClassName,\n        maxHeight && styles.truncated,\n        folded && styles.folded,\n      )}\n      style={heightVariables}\n      onTransitionEnd={(event) => {\n        if (event.propertyName === \"max-height\") {\n          setExpandedHeight(undefined);\n        }\n      }}\n      inert={isSkeleton || undefined}\n    >\n      {/* The code block is one skeleton surface in the size of its code, so\n          the editor inside renders for real, but invisibly. */}\n      <SkeletonModeReset>\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            editorRef.current = view.dom;\n\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          {truncateLines && maxHeight && (\n            <div className={clsx(styles.buttonContainer)}>\n              <Button\n                variant=\"plain\"\n                color=\"secondary\"\n                size=\"s\"\n                onPress={toggleFolded}\n                aria-expanded={!folded}\n                aria-controls={id}\n              >\n                {stringFormatter.format(folded ? \"showMore\" : \"showLess\")}\n              </Button>\n            </div>\n          )}\n        </CodeEditor>\n      </SkeletonModeReset>\n    </div>\n  );\n};\n\nexport default CodeBlock;\n"],"mappings":";;;;;;;;;;;;;;AAuCA,IAAa,aAAiC,UAAU;CACtD,MAAM,EACJ,MACA,WACA,WAAW,OACX,kBAAkB,OAClB,UACA,gBAAgB,OAChB,GAAG,SACD;CAEJ,MAAM,CAAC,QAAQ,aAAa,SAAS,kBAAkB,KAAK;CAC5D,MAAM,CAAC,WAAW,gBAAgB,SAAiB;CAEnD,MAAM,CAAC,gBAAgB,qBAAqB,SAAiB;CAC7D,MAAM,YAAY,OAAoB,IAAI;CAE1C,MAAM,kBAAkB,4BAA4BA,kBAAS,WAAW;CACxE,MAAM,aAAa,gBAAgB;CAEnC,MAAM,gBAAgB,KACpBC,yBAAO,WACP,cAAcA,yBAAO,UACrB,SACF;CAEA,MAAM,KAAK,MAAM;CAEjB,IAAI,CAAC,MACH,OACE,oBAAC,OAAD;EACE,WAAW,KAAK,eAAeA,yBAAO,YAAY;EAClD,OAAO,cAAc,KAAA;EAKrB,UAAA,oBAAC,OAAD,EAAA,UACE,oBAAC,QAAD,EAAA,UACE,oBAAC,mBAAD,EAAoB,SAA4B,CAAA,EAC5C,CAAA,EACH,CAAA;CACF,CAAA;CAIT,MAAM,kBAAuC;EAC3C,GAAI,YAAY,EAAE,gBAAgB,GAAG,UAAU,IAAI,IAAI,CAAC;EACxD,GAAI,iBACA,EAAE,yBAAyB,GAAG,eAAe,IAAI,IACjD,CAAC;CACP;CAKA,MAAM,qBAAqB;EACzB,MAAM,SAAS,UAAU;EAEzB,IAAI,CAAC,QAAQ;GACX,WAAW,WAAW,CAAC,MAAM;GAC7B;EACF;EAEA,MAAM,WAAW,iBAAiB,MAAM,CAAC,CACtC,mBAAmB,MAAM,GAAG,CAAC,CAC7B,MAAM,aAAa,WAAW,QAAQ,IAAI,CAAC;EAE9C,IAAI,QAAQ;GACV,kBAAkB,WAAW,OAAO,eAAe,KAAA,CAAS;GAC5D,UAAU,KAAK;EACjB,OAAO;GACL,gBAAgB,kBAAkB,OAAO,YAAY,CAAC;GAEtD,OAAO,sBAAsB;GAC7B,UAAU,IAAI;EAChB;CACF;CAEA,OACE,oBAAC,OAAD;EACE,WAAW,KACT,eACA,aAAaA,yBAAO,WACpB,UAAUA,yBAAO,MACnB;EACA,OAAO;EACP,kBAAkB,UAAU;GAC1B,IAAI,MAAM,iBAAiB,cACzB,kBAAkB,KAAA,CAAS;EAE/B;EACA,OAAO,cAAc,KAAA;EAIrB,UAAA,oBAAC,mBAAD,EAAA,UACE,oBAAC,YAAD;GACE,GAAI;GACJ,OAAO;GACP,UAAU;GACA;GACO;GACjB,mBAAmB;GACnB,iBAAiB;GACjB,sBAAsB;GACtB,YAAA;GACA,iBAAiB,SAAS;IACxB,UAAU,UAAU,KAAK;IAEzB,IAAI,CAAC,eACH;IAGF,MAAM,aAAa;IACnB,MAAM,UAAU;IAEhB,MAAM,eACJ,OAAO,kBAAkB,WAAW,gBAAgB;IAItD,IAFmB,KAAK,MAAM,IAAI,QAEjB,cACf,aAAa,aAAa,eAAe,OAAO;GACpD;GACI;GAEH,UAAA,iBAAiB,aAChB,oBAAC,OAAD;IAAK,WAAW,KAAKA,yBAAO,eAAe;IACzC,UAAA,oBAAC,QAAD;KACE,SAAQ;KACR,OAAM;KACN,MAAK;KACL,SAAS;KACT,iBAAe,CAAC;KAChB,iBAAe;KAEd,UAAA,gBAAgB,OAAO,SAAS,aAAa,UAAU;IAClD,CAAA;GACL,CAAA;EAEG,CAAA,EACK,CAAA;CAChB,CAAA;AAET"}
+{"version":3,"file":"CodeBlock.mjs","names":["locales","styles"],"sources":["../../../../../../../src/components/CodeBlock/CodeBlock.tsx"],"sourcesContent":["import {\n  type FC,\n  type PropsWithChildren,\n  useId,\n  useRef,\n  useState,\n} from \"react\";\nimport { flushSync } from \"react-dom\";\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\";\nimport {\n  SkeletonModeReset,\n  useSkeletonMode,\n} from \"@/components/SkeletonMode/skeletonModeContext\";\n\nexport interface CodeBlockProps\n  extends\n    PropsWithClassName,\n    PropsWithChildren,\n    Partial<\n      Pick<CodeEditorProps, \"language\" | \"showLineNumbers\" | \"copyable\">\n    > {\n  /** The code displayed in the block. */\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 [folded, setFolded] = useState(truncateLines !== false);\n  const [maxHeight, setMaxHeight] = useState<number>();\n  /* The full height, only while the toggle animates to or from it. */\n  const [expandedHeight, setExpandedHeight] = useState<number>();\n  const editorRef = useRef<HTMLElement>(null);\n\n  const stringFormatter = useLocalizedStringFormatter(locales, \"CodeBlock\");\n  const isSkeleton = useSkeletonMode();\n\n  const baseClassName = clsx(styles.codeBlock, isSkeleton && styles.skeleton);\n\n  const id = useId();\n\n  if (!code) {\n    return (\n      <div\n        className={clsx(baseClassName, styles.withChildren, className)}\n        inert={isSkeleton || undefined}\n      >\n        {/* Deliberately class-less: a `flow--` class would make the global\n            reset's `font: inherit` apply and replace the UA monospace\n            metrics. See CodeBlock.module.scss. */}\n        <pre>\n          <code>\n            <SkeletonModeReset>{children}</SkeletonModeReset>\n          </code>\n        </pre>\n      </div>\n    );\n  }\n\n  const heightVariables: React.CSSProperties = {\n    ...(maxHeight ? { \"--max-height\": `${maxHeight}px` } : {}),\n    ...(expandedHeight\n      ? { \"--expanded-max-height\": `${expandedHeight}px` }\n      : {}),\n  };\n\n  /* A height transition needs a length on both ends – `none` does not\n     interpolate. So the full height is measured for the transition and\n     released once it ended, and code that changes later is not clipped. */\n  const toggleFolded = () => {\n    const editor = editorRef.current;\n\n    if (!editor) {\n      setFolded((folded) => !folded);\n      return;\n    }\n\n    const animates = getComputedStyle(editor)\n      .transitionDuration.split(\",\")\n      .some((duration) => parseFloat(duration) > 0);\n\n    if (folded) {\n      setExpandedHeight(animates ? editor.scrollHeight : undefined);\n      setFolded(false);\n    } else {\n      flushSync(() => setExpandedHeight(editor.scrollHeight));\n      // Applies the start height before the folded one replaces it.\n      editor.getBoundingClientRect();\n      setFolded(true);\n    }\n  };\n\n  return (\n    <div\n      className={clsx(\n        baseClassName,\n        maxHeight && styles.truncated,\n        folded && styles.folded,\n        className,\n      )}\n      style={heightVariables}\n      onTransitionEnd={(event) => {\n        if (event.propertyName === \"max-height\") {\n          setExpandedHeight(undefined);\n        }\n      }}\n      inert={isSkeleton || undefined}\n    >\n      {/* The code block is one skeleton surface in the size of its code, so\n          the editor inside renders for real, but invisibly. */}\n      <SkeletonModeReset>\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            editorRef.current = view.dom;\n\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          {truncateLines && maxHeight && (\n            <div className={clsx(styles.buttonContainer)}>\n              <Button\n                variant=\"plain\"\n                color=\"secondary\"\n                size=\"s\"\n                onPress={toggleFolded}\n                aria-expanded={!folded}\n                aria-controls={id}\n              >\n                {stringFormatter.format(folded ? \"showMore\" : \"showLess\")}\n              </Button>\n            </div>\n          )}\n        </CodeEditor>\n      </SkeletonModeReset>\n    </div>\n  );\n};\n\nexport default CodeBlock;\n"],"mappings":";;;;;;;;;;;;;;AAuCA,IAAa,aAAiC,UAAU;CACtD,MAAM,EACJ,MACA,WACA,WAAW,OACX,kBAAkB,OAClB,UACA,gBAAgB,OAChB,GAAG,SACD;CAEJ,MAAM,CAAC,QAAQ,aAAa,SAAS,kBAAkB,KAAK;CAC5D,MAAM,CAAC,WAAW,gBAAgB,SAAiB;CAEnD,MAAM,CAAC,gBAAgB,qBAAqB,SAAiB;CAC7D,MAAM,YAAY,OAAoB,IAAI;CAE1C,MAAM,kBAAkB,4BAA4BA,kBAAS,WAAW;CACxE,MAAM,aAAa,gBAAgB;CAEnC,MAAM,gBAAgB,KAAKC,yBAAO,WAAW,cAAcA,yBAAO,QAAQ;CAE1E,MAAM,KAAK,MAAM;CAEjB,IAAI,CAAC,MACH,OACE,oBAAC,OAAD;EACE,WAAW,KAAK,eAAeA,yBAAO,cAAc,SAAS;EAC7D,OAAO,cAAc,KAAA;EAKrB,UAAA,oBAAC,OAAD,EAAA,UACE,oBAAC,QAAD,EAAA,UACE,oBAAC,mBAAD,EAAoB,SAA4B,CAAA,EAC5C,CAAA,EACH,CAAA;CACF,CAAA;CAIT,MAAM,kBAAuC;EAC3C,GAAI,YAAY,EAAE,gBAAgB,GAAG,UAAU,IAAI,IAAI,CAAC;EACxD,GAAI,iBACA,EAAE,yBAAyB,GAAG,eAAe,IAAI,IACjD,CAAC;CACP;CAKA,MAAM,qBAAqB;EACzB,MAAM,SAAS,UAAU;EAEzB,IAAI,CAAC,QAAQ;GACX,WAAW,WAAW,CAAC,MAAM;GAC7B;EACF;EAEA,MAAM,WAAW,iBAAiB,MAAM,CAAC,CACtC,mBAAmB,MAAM,GAAG,CAAC,CAC7B,MAAM,aAAa,WAAW,QAAQ,IAAI,CAAC;EAE9C,IAAI,QAAQ;GACV,kBAAkB,WAAW,OAAO,eAAe,KAAA,CAAS;GAC5D,UAAU,KAAK;EACjB,OAAO;GACL,gBAAgB,kBAAkB,OAAO,YAAY,CAAC;GAEtD,OAAO,sBAAsB;GAC7B,UAAU,IAAI;EAChB;CACF;CAEA,OACE,oBAAC,OAAD;EACE,WAAW,KACT,eACA,aAAaA,yBAAO,WACpB,UAAUA,yBAAO,QACjB,SACF;EACA,OAAO;EACP,kBAAkB,UAAU;GAC1B,IAAI,MAAM,iBAAiB,cACzB,kBAAkB,KAAA,CAAS;EAE/B;EACA,OAAO,cAAc,KAAA;EAIrB,UAAA,oBAAC,mBAAD,EAAA,UACE,oBAAC,YAAD;GACE,GAAI;GACJ,OAAO;GACP,UAAU;GACA;GACO;GACjB,mBAAmB;GACnB,iBAAiB;GACjB,sBAAsB;GACtB,YAAA;GACA,iBAAiB,SAAS;IACxB,UAAU,UAAU,KAAK;IAEzB,IAAI,CAAC,eACH;IAGF,MAAM,aAAa;IACnB,MAAM,UAAU;IAEhB,MAAM,eACJ,OAAO,kBAAkB,WAAW,gBAAgB;IAItD,IAFmB,KAAK,MAAM,IAAI,QAEjB,cACf,aAAa,aAAa,eAAe,OAAO;GACpD;GACI;GAEH,UAAA,iBAAiB,aAChB,oBAAC,OAAD;IAAK,WAAW,KAAKA,yBAAO,eAAe;IACzC,UAAA,oBAAC,QAAD;KACE,SAAQ;KACR,OAAM;KACN,MAAK;KACL,SAAS;KACT,iBAAe,CAAC;KAChB,iBAAe;KAEd,UAAA,gBAAgB,OAAO,SAAS,aAAa,UAAU;IAClD,CAAA;GACL,CAAA;EAEG,CAAA,EACK,CAAA;CAChB,CAAA;AAET"}

package/dist/js/packages/components/src/components/CodeEditor/CodeEditor.mjs

@@ -12,7 +12,7 @@ import { defaultLightTheme } from "./themes/defaultEditorTheme.mjs";
 import { useCodeEditorExtensions } from "./hooks/useCodeEditorExtensions.mjs";
 import { CopyButton } from "../CopyButton/CopyButton.mjs";
 import clsx from "clsx";
-import { useCallback, useId, useState } from "react";
+import { useCallback, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useObjectRef } from "react-aria";
 import CodeMirror, { EditorView } from "@uiw/react-codemirror";
@@ -22,7 +22,7 @@ import CodeMirror, { EditorView } from "@uiw/react-codemirror";
 * @flowStatus new
 */
 var CodeEditor = flowComponent("CodeEditor", (props) => {
-	const { ref, children, className, language, extensions, isReadOnly, isDisabled, isInvalid, isRequired, validationBehavior: _ignoredValidationBehavior, value, showLineNumbers = true, showCodeFolding = true, showCodeIndentationMakers = true, showLinterMarkers = true, showActiveLineMarker = true, copyable = true, height, minHeight, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...rest } = useControlledHostValueProps(props, "");
+	const { ref, children, className, language, extensions, isReadOnly, isDisabled, isInvalid, isRequired, validationBehavior: _ignoredValidationBehavior, value, onChange, onStatistics, showLineNumbers = true, showCodeFolding = true, showCodeIndentationMakers = true, showLinterMarkers = true, showActiveLineMarker = true, copyable = true, height, minHeight, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...rest } = useControlledHostValueProps(props, "");
 	const { FieldErrorView, FieldErrorCaptureContext, wrapperProps, controlProps, fieldPropsContext } = useFieldComponent(props, "CodeEditor");
 	const rootClassName = clsx(wrapperProps.className, CodeEditor_module_default.codeEditor, className);
 	const labelId = useId();
@@ -83,14 +83,48 @@ var CodeEditor = flowComponent("CodeEditor", (props) => {
 	*/
 	const labelledBy = joinIds(ariaLabelledBy, hasLabel && labelId);
 	const describedBy = joinIds(hasDescription && descriptionId, controlProps["aria-describedby"]);
-	const contentAttributes = EditorView.contentAttributes.of({
+	/**
+	* CodeMirror reconfigures the editor whenever `extensions`, `basicSetup` or
+	* `onChange` is a new object. All three are stable, so a render with
+	* unchanged props leaves the editor as it is.
+	*/
+	const allExtensions = useMemo(() => [...enabledExtensions, EditorView.contentAttributes.of({
 		...labelledBy ? { "aria-labelledby": labelledBy } : {},
 		...ariaLabel ? { "aria-label": ariaLabel } : {},
 		...describedBy ? { "aria-describedby": describedBy } : {},
 		...isRequired ? { "aria-required": "true" } : {},
 		...isInvalid ? { "aria-invalid": "true" } : {},
 		...isDisabled ? { "aria-disabled": "true" } : {}
+	})], [
+		enabledExtensions,
+		labelledBy,
+		ariaLabel,
+		describedBy,
+		isRequired,
+		isInvalid,
+		isDisabled
+	]);
+	const handlersRef = useRef({
+		onChange,
+		onStatistics
 	});
+	useLayoutEffect(() => {
+		handlersRef.current = {
+			onChange,
+			onStatistics
+		};
+	});
+	const stableOnChange = useCallback((value) => handlersRef.current.onChange(value), []);
+	const stableOnStatistics = useCallback((statistics) => handlersRef.current.onStatistics?.(statistics), []);
+	const highlightActiveLine = showActiveLineMarker && !isDisabled;
+	const basicSetup = useMemo(() => ({
+		highlightActiveLine,
+		highlightActiveLineGutter: highlightActiveLine,
+		autocompletion: false,
+		lineNumbers: false,
+		foldGutter: false,
+		highlightSelectionMatches: false
+	}), [highlightActiveLine]);
 	const localRef = useObjectRef(ref);
 	useMakeFocusable(localRef);
 	const isSkeleton = useSkeletonMode();
@@ -105,14 +139,9 @@ var CodeEditor = flowComponent("CodeEditor", (props) => {
 	const editor = /* @__PURE__ */ jsxs(CodeMirror, {
 		...rest,
 		value,
-		basicSetup: {
-			highlightActiveLine: showActiveLineMarker && !isDisabled,
-			highlightActiveLineGutter: showActiveLineMarker && !isDisabled,
-			autocompletion: false,
-			lineNumbers: false,
-			foldGutter: false,
-			highlightSelectionMatches: false
-		},
+		onChange: stableOnChange,
+		onStatistics: stableOnStatistics,
+		basicSetup,
 		theme: defaultLightTheme,
 		"data-invalid": isInvalid || void 0,
 		"data-disabled": isDisabled || void 0,
@@ -122,7 +151,7 @@ var CodeEditor = flowComponent("CodeEditor", (props) => {
 		ref: (codeMirrorRef) => {
 			if (codeMirrorRef?.editor) localRef.current = codeMirrorRef.editor;
 		},
-		extensions: [...enabledExtensions, contentAttributes],
+		extensions: allExtensions,
 		height: height ?? minHeight,
 		children: [copyable && /* @__PURE__ */ jsx(CopyButton, {
 			className: CodeEditor_module_default.copyButton,

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

@@ -1 +1 @@
-{"version":3,"file":"CodeEditor.mjs","names":["styles"],"sources":["../../../../../../../src/components/CodeEditor/CodeEditor.tsx"],"sourcesContent":["import type { ReactCodeMirrorProps } from \"@uiw/react-codemirror\";\nimport CodeMirror, { EditorView } from \"@uiw/react-codemirror\";\nimport { useCallback, useId, useState } from \"react\";\nimport {\n  flowComponent,\n  type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport { useControlledHostValueProps } from \"@/lib/remote/useControlledHostValueProps\";\nimport { joinIds, useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport { type PropsContext, 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 { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\nimport { useSkeletonMode } from \"@/components/SkeletonMode/skeletonModeContext\";\n\nexport interface CodeEditorProps\n  extends\n    Omit<ReactCodeMirrorProps, \"theme\" | \"lang\" | \"basicSetup\" | \"readOnly\">,\n    CodeEditorSetup,\n    FlowComponentProps {\n  /** The initial code of an uncontrolled editor. */\n  defaultValue?: string;\n  /**\n   * Whether the code can be read but not edited.\n   *\n   * @default false\n   */\n  isReadOnly?: boolean;\n  /**\n   * Whether the editor is disabled. The code can neither be edited, focused nor\n   * copied.\n   *\n   * @default false\n   */\n  isDisabled?: boolean;\n  /**\n   * Whether the editor is displayed as invalid.\n   *\n   * @default false\n   */\n  isInvalid?: boolean;\n  /** The elements class name. */\n  className?: string;\n  /**\n   * The language the code is highlighted as. A language the editor does not\n   * know is shown as plain text.\n   */\n  language?: CodeEditorLanguage | (string & {});\n  /**\n   * Whether a button to copy the code to the clipboard is shown.\n   *\n   * @default true\n   */\n  copyable?: boolean;\n  /**\n   * Whether the field must be filled in. Only marks the editor as required for\n   * assistive technology — the editor does not validate itself.\n   *\n   * @default false\n   */\n  isRequired?: boolean;\n  /**\n   * @internal Set by `<Field />` on every form field. The editor has no\n   * react-aria validation to forward it to and drops it.\n   */\n  validationBehavior?: unknown;\n}\n\n/**\n * @flr-generate all\n * @flowStatus new\n */\nexport const CodeEditor = flowComponent(\"CodeEditor\", (props) => {\n  const {\n    ref,\n    children,\n    className,\n    language,\n    extensions,\n    isReadOnly,\n    isDisabled,\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    height,\n    minHeight,\n    \"aria-label\": ariaLabel,\n    \"aria-labelledby\": ariaLabelledBy,\n    ...rest\n  } = useControlledHostValueProps(props, \"\");\n\n  const {\n    FieldErrorView,\n    FieldErrorCaptureContext,\n    wrapperProps,\n    controlProps,\n    fieldPropsContext,\n  } = useFieldComponent(props, \"CodeEditor\");\n\n  const rootClassName = clsx(\n    wrapperProps.className,\n    styles.codeEditor,\n    className,\n  );\n\n  const labelId = useId();\n  const descriptionId = useId();\n\n  /**\n   * Both are optional. Their refs tell whether they are rendered, so the editor\n   * never references an element that does not exist – a dangling id fails HTML\n   * validators and a11y checks. The callbacks are stable: a new one per render\n   * would detach and re-attach on every render.\n   */\n  const [hasLabel, setHasLabel] = useState(false);\n  const [hasDescription, setHasDescription] = useState(false);\n  const labelRef = useCallback((element: Element | null) => {\n    setHasLabel(!!element);\n  }, []);\n  const descriptionRef = useCallback((element: Element | null) => {\n    setHasDescription(!!element);\n  }, []);\n\n  /**\n   * The label and the field description are declared as children of the code\n   * editor, but must be rendered outside of the editor itself. They are\n   * tunneled out of the editor – just like the field error. Their ids are the\n   * ones the editor references.\n   */\n  const propsContext: PropsContext = {\n    ...fieldPropsContext,\n    Label: {\n      ...fieldPropsContext.Label,\n      id: labelId,\n      ref: labelRef,\n      tunnel: { id: \"label\", component: \"CodeEditor\" },\n    },\n    FieldDescription: {\n      ...fieldPropsContext.FieldDescription,\n      id: descriptionId,\n      ref: descriptionRef,\n      tunnel: { id: \"fieldDescription\", component: \"CodeEditor\" },\n    },\n  };\n\n  const enabledExtensions = useCodeEditorExtensions(language, extensions, {\n    showLineNumbers: showLineNumbers,\n    showCodeIndentationMakers: showCodeIndentationMakers,\n    showCodeFolding: showCodeFolding,\n    showLinterMarkers: showLinterMarkers,\n  });\n\n  /**\n   * The editable element of CodeMirror is the `.cm-content` element – not the\n   * root element the props are applied to. Its ARIA attributes are set through\n   * the content attributes facet.\n   *\n   * Without a label, an `aria-label` names the editor instead.\n   */\n  const labelledBy = joinIds(ariaLabelledBy, hasLabel && labelId);\n  const describedBy = joinIds(\n    hasDescription && descriptionId,\n    controlProps[\"aria-describedby\"],\n  );\n\n  const contentAttributes = EditorView.contentAttributes.of({\n    ...(labelledBy ? { \"aria-labelledby\": labelledBy } : {}),\n    ...(ariaLabel ? { \"aria-label\": ariaLabel } : {}),\n    ...(describedBy ? { \"aria-describedby\": describedBy } : {}),\n    ...(isRequired ? { \"aria-required\": \"true\" } : {}),\n    ...(isInvalid ? { \"aria-invalid\": \"true\" } : {}),\n    ...(isDisabled ? { \"aria-disabled\": \"true\" } : {}),\n  });\n\n  const localRef = useObjectRef(ref);\n\n  useMakeFocusable(localRef);\n\n  const isSkeleton = useSkeletonMode();\n\n  /* No CodeMirror: one surface, as high as the code in the editor's line\n     height. The children still render, so a label or a field description\n     tunnels out and follows its own skeleton rule. */\n  const skeleton = (\n    <div\n      className={clsx(\n        styles.codeMirror,\n        isReadOnly && styles.readonly,\n        styles.skeleton,\n      )}\n    >\n      <div\n        className={styles.skeletonLines}\n        style={{ height: height ?? minHeight }}\n      >\n        {(value ?? \"\").split(\"\\n\").map((line, index) => (\n          <div key={index}>{line || \" \"}</div>\n        ))}\n      </div>\n      {children}\n    </div>\n  );\n\n  const editor = (\n    <CodeMirror\n      {...rest}\n      value={value}\n      basicSetup={{\n        highlightActiveLine: showActiveLineMarker && !isDisabled,\n        highlightActiveLineGutter: showActiveLineMarker && !isDisabled,\n        autocompletion: false,\n        lineNumbers: false,\n        foldGutter: false,\n        highlightSelectionMatches: false,\n      }}\n      theme={defaultLightTheme}\n      data-invalid={isInvalid || undefined}\n      data-disabled={isDisabled || undefined}\n      readOnly={isReadOnly || isDisabled}\n      editable={!isDisabled}\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, contentAttributes]}\n      height={height ?? minHeight}\n    >\n      {copyable && (\n        <CopyButton\n          className={styles.copyButton}\n          size=\"s\"\n          variant=\"soft\"\n          text={value}\n          isDisabled={isDisabled}\n        />\n      )}\n      {children}\n    </CodeMirror>\n  );\n\n  return (\n    <div\n      className={rootClassName}\n      data-disabled={isDisabled || undefined}\n      inert={isSkeleton || undefined}\n    >\n      <PropsContextProvider props={propsContext}>\n        <UiComponentTunnelExit id=\"label\" component=\"CodeEditor\" />\n        <FieldErrorCaptureContext>\n          {isSkeleton ? skeleton : editor}\n        </FieldErrorCaptureContext>\n        <UiComponentTunnelExit id=\"fieldDescription\" component=\"CodeEditor\" />\n        <FieldErrorView />\n      </PropsContextProvider>\n    </div>\n  );\n});\n\nexport default CodeEditor;\n"],"mappings":"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"}
+{"version":3,"file":"CodeEditor.mjs","names":["styles"],"sources":["../../../../../../../src/components/CodeEditor/CodeEditor.tsx"],"sourcesContent":["import type { ReactCodeMirrorProps, Statistics } from \"@uiw/react-codemirror\";\nimport CodeMirror, { EditorView } from \"@uiw/react-codemirror\";\nimport {\n  useCallback,\n  useId,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport {\n  flowComponent,\n  type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport { useControlledHostValueProps } from \"@/lib/remote/useControlledHostValueProps\";\nimport { joinIds, useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport { type PropsContext, 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 { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\nimport { useSkeletonMode } from \"@/components/SkeletonMode/skeletonModeContext\";\n\nexport interface CodeEditorProps\n  extends\n    Omit<ReactCodeMirrorProps, \"theme\" | \"lang\" | \"basicSetup\" | \"readOnly\">,\n    CodeEditorSetup,\n    FlowComponentProps {\n  /** The initial code of an uncontrolled editor. */\n  defaultValue?: string;\n  /**\n   * Whether the code can be read but not edited.\n   *\n   * @default false\n   */\n  isReadOnly?: boolean;\n  /**\n   * Whether the editor is disabled. The code can neither be edited, focused nor\n   * copied.\n   *\n   * @default false\n   */\n  isDisabled?: boolean;\n  /**\n   * Whether the editor is displayed as invalid.\n   *\n   * @default false\n   */\n  isInvalid?: boolean;\n  /** The elements class name. */\n  className?: string;\n  /**\n   * The language the code is highlighted as. A language the editor does not\n   * know is shown as plain text.\n   */\n  language?: CodeEditorLanguage | (string & {});\n  /**\n   * Whether a button to copy the code to the clipboard is shown.\n   *\n   * @default true\n   */\n  copyable?: boolean;\n  /**\n   * Whether the field must be filled in. Only marks the editor as required for\n   * assistive technology — the editor does not validate itself.\n   *\n   * @default false\n   */\n  isRequired?: boolean;\n  /**\n   * @internal Set by `<Field />` on every form field. The editor has no\n   * react-aria validation to forward it to and drops it.\n   */\n  validationBehavior?: unknown;\n}\n\n/**\n * @flr-generate all\n * @flowStatus new\n */\nexport const CodeEditor = flowComponent(\"CodeEditor\", (props) => {\n  const {\n    ref,\n    children,\n    className,\n    language,\n    extensions,\n    isReadOnly,\n    isDisabled,\n    isInvalid,\n    isRequired,\n    validationBehavior: _ignoredValidationBehavior,\n    value,\n    onChange,\n    onStatistics,\n    showLineNumbers = true,\n    showCodeFolding = true,\n    showCodeIndentationMakers = true,\n    showLinterMarkers = true,\n    showActiveLineMarker = true,\n    copyable = true,\n    height,\n    minHeight,\n    \"aria-label\": ariaLabel,\n    \"aria-labelledby\": ariaLabelledBy,\n    ...rest\n  } = useControlledHostValueProps(props, \"\");\n\n  const {\n    FieldErrorView,\n    FieldErrorCaptureContext,\n    wrapperProps,\n    controlProps,\n    fieldPropsContext,\n  } = useFieldComponent(props, \"CodeEditor\");\n\n  const rootClassName = clsx(\n    wrapperProps.className,\n    styles.codeEditor,\n    className,\n  );\n\n  const labelId = useId();\n  const descriptionId = useId();\n\n  /**\n   * Both are optional. Their refs tell whether they are rendered, so the editor\n   * never references an element that does not exist – a dangling id fails HTML\n   * validators and a11y checks. The callbacks are stable: a new one per render\n   * would detach and re-attach on every render.\n   */\n  const [hasLabel, setHasLabel] = useState(false);\n  const [hasDescription, setHasDescription] = useState(false);\n  const labelRef = useCallback((element: Element | null) => {\n    setHasLabel(!!element);\n  }, []);\n  const descriptionRef = useCallback((element: Element | null) => {\n    setHasDescription(!!element);\n  }, []);\n\n  /**\n   * The label and the field description are declared as children of the code\n   * editor, but must be rendered outside of the editor itself. They are\n   * tunneled out of the editor – just like the field error. Their ids are the\n   * ones the editor references.\n   */\n  const propsContext: PropsContext = {\n    ...fieldPropsContext,\n    Label: {\n      ...fieldPropsContext.Label,\n      id: labelId,\n      ref: labelRef,\n      tunnel: { id: \"label\", component: \"CodeEditor\" },\n    },\n    FieldDescription: {\n      ...fieldPropsContext.FieldDescription,\n      id: descriptionId,\n      ref: descriptionRef,\n      tunnel: { id: \"fieldDescription\", component: \"CodeEditor\" },\n    },\n  };\n\n  const enabledExtensions = useCodeEditorExtensions(language, extensions, {\n    showLineNumbers: showLineNumbers,\n    showCodeIndentationMakers: showCodeIndentationMakers,\n    showCodeFolding: showCodeFolding,\n    showLinterMarkers: showLinterMarkers,\n  });\n\n  /**\n   * The editable element of CodeMirror is the `.cm-content` element – not the\n   * root element the props are applied to. Its ARIA attributes are set through\n   * the content attributes facet.\n   *\n   * Without a label, an `aria-label` names the editor instead.\n   */\n  const labelledBy = joinIds(ariaLabelledBy, hasLabel && labelId);\n  const describedBy = joinIds(\n    hasDescription && descriptionId,\n    controlProps[\"aria-describedby\"],\n  );\n\n  /**\n   * CodeMirror reconfigures the editor whenever `extensions`, `basicSetup` or\n   * `onChange` is a new object. All three are stable, so a render with\n   * unchanged props leaves the editor as it is.\n   */\n  const allExtensions = useMemo(\n    () => [\n      ...enabledExtensions,\n      EditorView.contentAttributes.of({\n        ...(labelledBy ? { \"aria-labelledby\": labelledBy } : {}),\n        ...(ariaLabel ? { \"aria-label\": ariaLabel } : {}),\n        ...(describedBy ? { \"aria-describedby\": describedBy } : {}),\n        ...(isRequired ? { \"aria-required\": \"true\" } : {}),\n        ...(isInvalid ? { \"aria-invalid\": \"true\" } : {}),\n        ...(isDisabled ? { \"aria-disabled\": \"true\" } : {}),\n      }),\n    ],\n    [\n      enabledExtensions,\n      labelledBy,\n      ariaLabel,\n      describedBy,\n      isRequired,\n      isInvalid,\n      isDisabled,\n    ],\n  );\n\n  /*\n   * A new `onChange` on every render would reconfigure the editor as well.\n   * CodeMirror's update listener captures `onStatistics` along with it, so both\n   * call the latest handler through a ref.\n   */\n  const handlersRef = useRef({ onChange, onStatistics });\n  useLayoutEffect(() => {\n    handlersRef.current = { onChange, onStatistics };\n  });\n  const stableOnChange = useCallback(\n    (value: string) => handlersRef.current.onChange(value),\n    [],\n  );\n  const stableOnStatistics = useCallback(\n    (statistics: Statistics) => handlersRef.current.onStatistics?.(statistics),\n    [],\n  );\n\n  const highlightActiveLine = showActiveLineMarker && !isDisabled;\n  const basicSetup = useMemo(\n    () => ({\n      highlightActiveLine,\n      highlightActiveLineGutter: highlightActiveLine,\n      autocompletion: false,\n      lineNumbers: false,\n      foldGutter: false,\n      highlightSelectionMatches: false,\n    }),\n    [highlightActiveLine],\n  );\n\n  const localRef = useObjectRef(ref);\n\n  useMakeFocusable(localRef);\n\n  const isSkeleton = useSkeletonMode();\n\n  /* No CodeMirror: one surface, as high as the code in the editor's line\n     height. The children still render, so a label or a field description\n     tunnels out and follows its own skeleton rule. */\n  const skeleton = (\n    <div\n      className={clsx(\n        styles.codeMirror,\n        isReadOnly && styles.readonly,\n        styles.skeleton,\n      )}\n    >\n      <div\n        className={styles.skeletonLines}\n        style={{ height: height ?? minHeight }}\n      >\n        {(value ?? \"\").split(\"\\n\").map((line, index) => (\n          <div key={index}>{line || \" \"}</div>\n        ))}\n      </div>\n      {children}\n    </div>\n  );\n\n  const editor = (\n    <CodeMirror\n      {...rest}\n      value={value}\n      onChange={stableOnChange}\n      onStatistics={stableOnStatistics}\n      basicSetup={basicSetup}\n      theme={defaultLightTheme}\n      data-invalid={isInvalid || undefined}\n      data-disabled={isDisabled || undefined}\n      readOnly={isReadOnly || isDisabled}\n      editable={!isDisabled}\n      className={clsx(styles.codeMirror, isReadOnly && styles.readonly)}\n      ref={(codeMirrorRef) => {\n        if (codeMirrorRef?.editor) {\n          localRef.current = codeMirrorRef.editor;\n        }\n      }}\n      extensions={allExtensions}\n      height={height ?? minHeight}\n    >\n      {copyable && (\n        <CopyButton\n          className={styles.copyButton}\n          size=\"s\"\n          variant=\"soft\"\n          text={value}\n          isDisabled={isDisabled}\n        />\n      )}\n      {children}\n    </CodeMirror>\n  );\n\n  return (\n    <div\n      className={rootClassName}\n      data-disabled={isDisabled || undefined}\n      inert={isSkeleton || undefined}\n    >\n      <PropsContextProvider props={propsContext}>\n        <UiComponentTunnelExit id=\"label\" component=\"CodeEditor\" />\n        <FieldErrorCaptureContext>\n          {isSkeleton ? skeleton : editor}\n        </FieldErrorCaptureContext>\n        <UiComponentTunnelExit id=\"fieldDescription\" component=\"CodeEditor\" />\n        <FieldErrorView />\n      </PropsContextProvider>\n    </div>\n  );\n});\n\nexport default CodeEditor;\n"],"mappings":"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"}

package/dist/js/packages/components/src/components/CodeEditor/hooks/useCodeEditorExtensions.mjs

@@ -2,38 +2,51 @@
 /* */
 import supportedCodeEditorLanguages, { isCodeEditorLanguage } from "../languages/index.mjs";
 import { gutterSpacer } from "../extensions/gutterSpacer.mjs";
+import { useMemo } from "react";
 import { lineNumbers } from "@uiw/react-codemirror";
 import { foldGutter } from "@codemirror/language";
 import { lintGutter } from "@codemirror/lint";
 import { indentationMarkers } from "@replit/codemirror-indentation-markers";
 //#region src/components/CodeEditor/hooks/useCodeEditorExtensions.tsx
 var markerColor = "var(--code-editor--indentation-marker-color)";
-var indentationMarkerColors = {
+var codeIndentationMarkers = indentationMarkers({ colors: {
 	light: markerColor,
 	dark: markerColor,
 	activeLight: markerColor,
 	activeDark: markerColor
-};
+} });
+var noExtensions = [];
 /** @internal */
-var useCodeEditorExtensions = (language, extensions = [], options = {
+var useCodeEditorExtensions = (language, extensions = noExtensions, options = {
 	showCodeFolding: true,
 	showCodeIndentationMakers: true,
 	showLineNumbers: true,
 	showLinterMarkers: true
 }) => {
-	if (options.showLineNumbers) extensions.push(lineNumbers());
-	if (options.showCodeFolding) extensions.push(foldGutter({ markerDOM: (open) => {
-		const element = document.createElement("span");
-		element.classList.add("cm-foldGutter");
-		element.classList.add(open ? "cm-foldGutter-open" : "cm-foldGutter-closed");
-		element.innerText = open ? "⌄" : "›";
-		return element;
-	} }));
-	if (options.showLinterMarkers) extensions.push(lintGutter());
-	if (options.showLineNumbers && (!options.showCodeFolding || !options.showLinterMarkers)) extensions.push(gutterSpacer());
-	if (options.showCodeIndentationMakers) extensions.push(indentationMarkers({ colors: indentationMarkerColors }));
-	if (language && isCodeEditorLanguage(language)) supportedCodeEditorLanguages[language]?.map((loader) => extensions.push(loader()));
-	return extensions;
+	const { showCodeFolding, showCodeIndentationMakers, showLineNumbers, showLinterMarkers } = options;
+	return useMemo(() => {
+		const enabledExtensions = [...extensions];
+		if (showLineNumbers) enabledExtensions.push(lineNumbers());
+		if (showCodeFolding) enabledExtensions.push(foldGutter({ markerDOM: (open) => {
+			const element = document.createElement("span");
+			element.classList.add("cm-foldGutter");
+			element.classList.add(open ? "cm-foldGutter-open" : "cm-foldGutter-closed");
+			element.innerText = open ? "⌄" : "›";
+			return element;
+		} }));
+		if (showLinterMarkers) enabledExtensions.push(lintGutter());
+		if (showLineNumbers && (!showCodeFolding || !showLinterMarkers)) enabledExtensions.push(gutterSpacer());
+		if (showCodeIndentationMakers) enabledExtensions.push(codeIndentationMarkers);
+		if (language && isCodeEditorLanguage(language)) for (const loader of supportedCodeEditorLanguages[language] ?? []) enabledExtensions.push(loader());
+		return enabledExtensions;
+	}, [
+		language,
+		extensions,
+		showCodeFolding,
+		showCodeIndentationMakers,
+		showLineNumbers,
+		showLinterMarkers
+	]);
 };
 //#endregion
 export { useCodeEditorExtensions };