@mittwald/flow-react-components 0.2.0-alpha.674 → 0.2.0-alpha.675

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

@@ -1,204 +1,52 @@
 "use client"
 /* */
 import { jsx, jsxs } from 'react/jsx-runtime';
-import * as Recharts from 'recharts';
-import { Children, useRef, useState, useEffect } from 'react';
+import { ResponsiveContainer, ComposedChart } from 'recharts';
+import { useMemo, isValidElement } from 'react';
 import clsx from 'clsx';
 import styles from './CartesianChart.module.scss.mjs';
+import { useChartClipRect } from './hooks/useChartClipRect.mjs';
+import DivView from '../../views/DivView.mjs';
 import { Wrap } from '../Wrap/Wrap.mjs';
-import '../AccentBox/AccentBox.mjs';
-import '../../lib/propsContext/propsContext.mjs';
-import '../../lib/propsContext/components/PropsContextProvider.mjs';
-import '../Button/Button.mjs';
-import '@tabler/icons-react';
-import '../Icon/Icon.mjs';
-import '../../views/IconView.mjs';
-import '@mittwald/react-tunnel';
-import '../Activity/Activity.mjs';
-import '../Action/Action.mjs';
-import 'react-aria';
-import '@react-aria/live-announcer';
-import '../ActionGroup/ActionGroup.mjs';
-import '../Alert/Alert.mjs';
-import '../AlertBadge/AlertBadge.mjs';
-import '../AlertText/AlertText.mjs';
-import '../Align/Align.mjs';
-import '../Autocomplete/Autocomplete.mjs';
-import '../Avatar/Avatar.mjs';
-import '../Badge/Badge.mjs';
-import 'react-aria-components';
-import 'mobx';
-import '../../lib/controller/overlay/context.mjs';
-import 'remeda';
-import '@react-aria/utils';
-import 'dot-prop';
-import '../../lib/tokens/CategoricalColors.mjs';
-import '../Text/Text.mjs';
-import '@mittwald/react-use-promise';
-import '../Heading/Heading.mjs';
-import '../../views/SkeletonTextView.mjs';
-import '../../views/LoadingSpinnerView.mjs';
-import { CartesianGrid } from './components/CartesianGrid/CartesianGrid.mjs';
-import '../Checkbox/Checkbox.mjs';
-import '../CheckboxButton/CheckboxButton.mjs';
-import '../CheckboxGroup/CheckboxGroup.mjs';
-import 'react-syntax-highlighter';
-import '../CopyButton/CopyButton.mjs';
-import '../ColumnLayout/ColumnLayout.mjs';
-import '../ComboBox/ComboBox.mjs';
-import '../../lib/propsContext/components/ComponentPropsContextProvider.mjs';
-import '../Content/Content.mjs';
-import '../ContextMenu/ContextMenu.mjs';
-import '../MenuItem/MenuItem.mjs';
-import '../ContextMenu/components/ContextMenuTrigger/ContextMenuTrigger.mjs';
-import '../ContextMenu/components/ContextMenuSection/ContextMenuSection.mjs';
-import '../ContextualHelp/ContextualHelp.mjs';
-import '../ContextualHelp/components/ContextualHelpTrigger/ContextualHelpTrigger.mjs';
-import '../CounterBadge/CounterBadge.mjs';
-import '../CountryOptions/CountryOptions.mjs';
-import '../DatePicker/DatePicker.mjs';
-import '../DateRangePicker/DateRangePicker.mjs';
-import '../FieldDescription/FieldDescription.mjs';
-import '../FieldError/FieldError.mjs';
-import '../FileCard/FileCard.mjs';
-import '../FileCardList/FileCardList.mjs';
-import '../FileDropZone/FileDropZone.mjs';
-import '../FileField/FileField.mjs';
-import '../Header/Header.mjs';
-import '../IllustratedMessage/IllustratedMessage.mjs';
-import '../Image/Image.mjs';
-import '../Initials/Initials.mjs';
-import '../Label/Label.mjs';
-import '../LayoutCard/LayoutCard.mjs';
-import '../OverlayTrigger/components/MenuTrigger/MenuTrigger.mjs';
-import '../../views/DialogTriggerView.mjs';
-import '../LightBox/LightBox.mjs';
-import '../Link/Link.mjs';
-import 'invariant';
-import '../../views/ListItemViewContentView.mjs';
-import '../../views/ButtonView.mjs';
-import '../../views/ContextMenuTriggerView.mjs';
-import '../List/components/ListSummary/ListSummary.mjs';
-import '../List/listContext.mjs';
-import '../List/List.mjs';
-import 'react-markdown';
-import 'remark-gfm';
-import '../MarkdownEditor/MarkdownEditor.mjs';
-import '../Message/Message.mjs';
-import '../MessageThread/MessageThread.mjs';
-import '../Modal/Modal.mjs';
-import '../Navigation/Navigation.mjs';
-import '../Navigation/components/NavigationGroup/NavigationGroup.mjs';
-import '../NotificationProvider/NotificationProvider.mjs';
-import 'luxon';
-import '../NumberField/NumberField.mjs';
-import '../Option/Option.mjs';
-import '../../views/OverlayContentView.mjs';
-import '../PasswordCreationField/PasswordCreationField.mjs';
-import '../Popover/components/PopoverTrigger/PopoverTrigger.mjs';
-import '../Popover/Popover.mjs';
-import '../ProgressBar/ProgressBar.mjs';
-import '../RadioGroup/RadioGroup.mjs';
-import '../RadioGroup/components/Radio/Radio.mjs';
-import '../RadioGroup/components/RadioButton/RadioButton.mjs';
-import '../Rating/Rating.mjs';
-import '../SearchField/SearchField.mjs';
-import '../Section/Section.mjs';
-import '../SegmentedControl/SegmentedControl.mjs';
-import '../SegmentedControl/components/Segment/Segment.mjs';
-import '../Select/Select.mjs';
-import '../SettingsProvider/SettingsProvider.mjs';
-import '../Slider/Slider.mjs';
-import '../SuspenseTrigger/SuspenseTrigger.mjs';
-import '../Switch/Switch.mjs';
-import '../Tabs/Tabs.mjs';
-import '../Tabs/components/Tab/context.mjs';
-import '../TextArea/TextArea.mjs';
-import '../TextField/TextField.mjs';
-import '../TimeField/TimeField.mjs';
-import '../TranslationProvider/TranslationProvider.mjs';
-import 'react-truncate-inside';
 
 const CartesianChart = (props) => {
-  const {
-    children,
-    data,
+  const { children, data, className, height, flexGrow, emptyView, ...rest } = props;
+  const { viewDimensions, ref: containerRef } = useChartClipRect();
+  const showEmptyView = !!((!data || data.length === 0) && emptyView);
+  const rootClassName = clsx(
+    styles.cartesianChart,
     className,
-    height,
-    flexGrow,
-    emptyView: EmptyView,
-    ...rest
-  } = props;
-  const rootClassName = clsx(styles.cartesianChart, className);
-  const otherChildren = [];
-  const gridChildren = [];
-  Children.forEach(children, (child) => {
-    if (!child) return;
-    const element = child;
-    if (element.type === CartesianGrid) {
-      gridChildren.push(element);
-    } else {
-      otherChildren.push(element);
+    showEmptyView && styles.emptyView
+  );
+  const emptyElement = useMemo(() => {
+    if (isValidElement(emptyView)) {
+      return emptyView;
     }
-  });
-  const showEmptyView = (!data || data.length === 0) && EmptyView;
-  const chartContainerRef = useRef(null);
-  const [viewDimensions, setViewDimensions] = useState(null);
-  useEffect(() => {
-    if (showEmptyView) {
-      const updateDimensions = () => {
-        const svg = chartContainerRef.current?.querySelector(
-          "svg"
-        );
-        if (!svg) return;
-        const clip = svg.querySelector("clipPath rect");
-        if (clip) {
-          const x = parseFloat(clip.getAttribute("x") ?? "0");
-          const y = parseFloat(clip.getAttribute("y") ?? "0");
-          const width = parseFloat(clip.getAttribute("width") ?? "0");
-          const height2 = parseFloat(clip.getAttribute("height") ?? "0");
-          setViewDimensions({ x, y, width, height: height2 });
-        }
-      };
-      updateDimensions();
-      const container = chartContainerRef.current;
-      const observer = new ResizeObserver(updateDimensions);
-      if (container) observer.observe(container);
-      return () => {
-        observer.disconnect();
-      };
+    if (!emptyView) {
+      return;
     }
-  }, [showEmptyView, chartContainerRef.current]);
-  return /* @__PURE__ */ jsx(Wrap, { if: height, children: /* @__PURE__ */ jsx(
-    "div",
+    console.warn(
+      "CartesianChart: emptyView as a non-element is deprecated and will be removed in a future release. Please provide an element as emptyView."
+    );
+    return null;
+  }, [emptyView]);
+  return /* @__PURE__ */ jsx(Wrap, { if: height, children: /* @__PURE__ */ jsx("div", { style: { height, flex: flexGrow ? 1 : void 0 }, children: /* @__PURE__ */ jsx(
+    ResponsiveContainer,
     {
-      style: { height, flex: flexGrow ? 1 : void 0 },
-      ref: chartContainerRef,
-      children: /* @__PURE__ */ jsx(
-        Recharts.ResponsiveContainer,
-        {
-          initialDimension: {
-            // fix warning on initial render
-            width: 1,
-            height: 1
-          },
-          children: /* @__PURE__ */ jsxs(
-            Recharts.ComposedChart,
-            {
-              data,
-              className: rootClassName,
-              ...rest,
-              children: [
-                !showEmptyView && gridChildren,
-                otherChildren,
-                showEmptyView && viewDimensions && /* @__PURE__ */ jsx("foreignObject", { ...viewDimensions, children: /* @__PURE__ */ jsx("div", { className: styles.emptyViewContainer, children: /* @__PURE__ */ jsx(EmptyView, { data }) }) })
-              ]
-            }
-          )
-        }
-      )
+      initialDimension: {
+        // fix warning on initial render
+        width: 1,
+        height: 1
+      },
+      width: height ? void 0 : "100%",
+      aspect: height ? void 0 : 3,
+      ref: containerRef,
+      children: /* @__PURE__ */ jsxs(ComposedChart, { data, className: rootClassName, ...rest, children: [
+        children,
+        showEmptyView && viewDimensions && /* @__PURE__ */ jsx("foreignObject", { ...viewDimensions, children: /* @__PURE__ */ jsx(DivView, { className: styles.emptyViewContainer, children: emptyElement }) })
+      ] })
     }
-  ) });
+  ) }) });
 };
 
 export { CartesianChart };

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

@@ -1 +1 @@
-{"version":3,"file":"CartesianChart.mjs","sources":["../../../../../../src/components/CartesianChart/CartesianChart.tsx"],"sourcesContent":["import * as Recharts from \"recharts\";\nimport React, {\n  Children,\n  useEffect,\n  useRef,\n  useState,\n  type ComponentProps,\n  type FC,\n  type PropsWithChildren,\n  type ReactElement,\n  type SVGProps,\n} from \"react\";\nimport clsx from \"clsx\";\nimport styles from \"./CartesianChart.module.scss\";\nimport Wrap from \"../Wrap\";\nimport { CartesianGrid } from \"../public\";\n\nexport interface CartesianChartEmptyViewProps {\n  data?: ComponentProps<typeof Recharts.ComposedChart>[\"data\"];\n}\n\nexport interface CartesianChartProps\n  extends\n    Pick<\n      ComponentProps<typeof Recharts.ComposedChart>,\n      \"data\" | \"className\" | \"syncId\" | \"syncMethod\"\n    >,\n    PropsWithChildren {\n  height?: string;\n  /** View that is provided when data is empty/undefined */\n  emptyView?: React.ComponentType<CartesianChartEmptyViewProps>;\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: EmptyView,\n    ...rest\n  } = props;\n  const rootClassName = clsx(styles.cartesianChart, className);\n\n  const otherChildren: ReactElement[] = [];\n  const gridChildren: ReactElement[] = [];\n\n  Children.forEach(children, (child) => {\n    if (!child) return;\n    const element = child as ReactElement;\n\n    if (element.type === CartesianGrid) {\n      gridChildren.push(element);\n    } else {\n      otherChildren.push(element);\n    }\n  });\n\n  const showEmptyView = (!data || data.length === 0) && EmptyView;\n\n  const chartContainerRef = useRef<HTMLDivElement>(null);\n  const [viewDimensions, setViewDimensions] = useState<Partial<\n    SVGProps<SVGForeignObjectElement>\n  > | null>(null);\n\n  // resizing the foreignObject for the EmptyView on size changes\n  useEffect(() => {\n    if (showEmptyView) {\n      const updateDimensions = () => {\n        const svg = chartContainerRef.current?.querySelector(\n          \"svg\",\n        ) as SVGSVGElement | null;\n        if (!svg) return;\n\n        const clip = svg.querySelector(\"clipPath rect\");\n        if (clip) {\n          const x = parseFloat(clip.getAttribute(\"x\") ?? \"0\");\n          const y = parseFloat(clip.getAttribute(\"y\") ?? \"0\");\n          const width = parseFloat(clip.getAttribute(\"width\") ?? \"0\");\n          const height = parseFloat(clip.getAttribute(\"height\") ?? \"0\");\n          setViewDimensions({ x, y, width, height });\n        }\n      };\n\n      updateDimensions();\n\n      const container = chartContainerRef.current;\n      const observer = new ResizeObserver(updateDimensions);\n      if (container) observer.observe(container);\n\n      return () => {\n        observer.disconnect();\n      };\n    }\n  }, [showEmptyView, chartContainerRef.current]);\n\n  return (\n    <Wrap if={height}>\n      <div\n        style={{ height, flex: flexGrow ? 1 : undefined }}\n        ref={chartContainerRef}\n      >\n        <Recharts.ResponsiveContainer\n          initialDimension={{\n            // fix warning on initial render\n            width: 1,\n            height: 1,\n          }}\n        >\n          <Recharts.ComposedChart\n            data={data}\n            className={rootClassName}\n            {...rest}\n          >\n            {!showEmptyView && gridChildren}\n            {otherChildren}\n            {showEmptyView && viewDimensions && (\n              <foreignObject {...viewDimensions}>\n                <div className={styles.emptyViewContainer}>\n                  <EmptyView data={data} />\n                </div>\n              </foreignObject>\n            )}\n          </Recharts.ComposedChart>\n        </Recharts.ResponsiveContainer>\n      </div>\n    </Wrap>\n  );\n};\n\nexport default CartesianChart;\n"],"names":["height"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuCO,MAAM,cAAA,GAA0C,CAAC,KAAA,KAAU;AAChE,EAAA,MAAM;AAAA,IACJ,QAAA;AAAA,IACA,IAAA;AAAA,IACA,SAAA;AAAA,IACA,MAAA;AAAA,IACA,QAAA;AAAA,IACA,SAAA,EAAW,SAAA;AAAA,IACX,GAAG;AAAA,GACL,GAAI,KAAA;AACJ,EAAA,MAAM,aAAA,GAAgB,IAAA,CAAK,MAAA,CAAO,cAAA,EAAgB,SAAS,CAAA;AAE3D,EAAA,MAAM,gBAAgC,EAAC;AACvC,EAAA,MAAM,eAA+B,EAAC;AAEtC,EAAA,QAAA,CAAS,OAAA,CAAQ,QAAA,EAAU,CAAC,KAAA,KAAU;AACpC,IAAA,IAAI,CAAC,KAAA,EAAO;AACZ,IAAA,MAAM,OAAA,GAAU,KAAA;AAEhB,IAAA,IAAI,OAAA,CAAQ,SAAS,aAAA,EAAe;AAClC,MAAA,YAAA,CAAa,KAAK,OAAO,CAAA;AAAA,IAC3B,CAAA,MAAO;AACL,MAAA,aAAA,CAAc,KAAK,OAAO,CAAA;AAAA,IAC5B;AAAA,EACF,CAAC,CAAA;AAED,EAAA,MAAM,aAAA,GAAA,CAAiB,CAAC,IAAA,IAAQ,IAAA,CAAK,WAAW,CAAA,KAAM,SAAA;AAEtD,EAAA,MAAM,iBAAA,GAAoB,OAAuB,IAAI,CAAA;AACrD,EAAA,MAAM,CAAC,cAAA,EAAgB,iBAAiB,CAAA,GAAI,SAElC,IAAI,CAAA;AAGd,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,aAAA,EAAe;AACjB,MAAA,MAAM,mBAAmB,MAAM;AAC7B,QAAA,MAAM,GAAA,GAAM,kBAAkB,OAAA,EAAS,aAAA;AAAA,UACrC;AAAA,SACF;AACA,QAAA,IAAI,CAAC,GAAA,EAAK;AAEV,QAAA,MAAM,IAAA,GAAO,GAAA,CAAI,aAAA,CAAc,eAAe,CAAA;AAC9C,QAAA,IAAI,IAAA,EAAM;AACR,UAAA,MAAM,IAAI,UAAA,CAAW,IAAA,CAAK,YAAA,CAAa,GAAG,KAAK,GAAG,CAAA;AAClD,UAAA,MAAM,IAAI,UAAA,CAAW,IAAA,CAAK,YAAA,CAAa,GAAG,KAAK,GAAG,CAAA;AAClD,UAAA,MAAM,QAAQ,UAAA,CAAW,IAAA,CAAK,YAAA,CAAa,OAAO,KAAK,GAAG,CAAA;AAC1D,UAAA,MAAMA,UAAS,UAAA,CAAW,IAAA,CAAK,YAAA,CAAa,QAAQ,KAAK,GAAG,CAAA;AAC5D,UAAA,iBAAA,CAAkB,EAAE,CAAA,EAAG,CAAA,EAAG,KAAA,EAAO,MAAA,EAAAA,SAAQ,CAAA;AAAA,QAC3C;AAAA,MACF,CAAA;AAEA,MAAA,gBAAA,EAAiB;AAEjB,MAAA,MAAM,YAAY,iBAAA,CAAkB,OAAA;AACpC,MAAA,MAAM,QAAA,GAAW,IAAI,cAAA,CAAe,gBAAgB,CAAA;AACpD,MAAA,IAAI,SAAA,EAAW,QAAA,CAAS,OAAA,CAAQ,SAAS,CAAA;AAEzC,MAAA,OAAO,MAAM;AACX,QAAA,QAAA,CAAS,UAAA,EAAW;AAAA,MACtB,CAAA;AAAA,IACF;AAAA,EACF,CAAA,EAAG,CAAC,aAAA,EAAe,iBAAA,CAAkB,OAAO,CAAC,CAAA;AAE7C,EAAA,uBACE,GAAA,CAAC,IAAA,EAAA,EAAK,EAAA,EAAI,MAAA,EACR,QAAA,kBAAA,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,OAAO,EAAE,MAAA,EAAQ,IAAA,EAAM,QAAA,GAAW,IAAI,MAAA,EAAU;AAAA,MAChD,GAAA,EAAK,iBAAA;AAAA,MAEL,QAAA,kBAAA,GAAA;AAAA,QAAC,QAAA,CAAS,mBAAA;AAAA,QAAT;AAAA,UACC,gBAAA,EAAkB;AAAA;AAAA,YAEhB,KAAA,EAAO,CAAA;AAAA,YACP,MAAA,EAAQ;AAAA,WACV;AAAA,UAEA,QAAA,kBAAA,IAAA;AAAA,YAAC,QAAA,CAAS,aAAA;AAAA,YAAT;AAAA,cACC,IAAA;AAAA,cACA,SAAA,EAAW,aAAA;AAAA,cACV,GAAG,IAAA;AAAA,cAEH,QAAA,EAAA;AAAA,gBAAA,CAAC,aAAA,IAAiB,YAAA;AAAA,gBAClB,aAAA;AAAA,gBACA,aAAA,IAAiB,cAAA,oBAChB,GAAA,CAAC,eAAA,EAAA,EAAe,GAAG,cAAA,EACjB,QAAA,kBAAA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,OAAO,kBAAA,EACrB,QAAA,kBAAA,GAAA,CAAC,SAAA,EAAA,EAAU,IAAA,EAAY,GACzB,CAAA,EACF;AAAA;AAAA;AAAA;AAEJ;AAAA;AACF;AAAA,GACF,EACF,CAAA;AAEJ;;;;"}
+{"version":3,"file":"CartesianChart.mjs","sources":["../../../../../../src/components/CartesianChart/CartesianChart.tsx"],"sourcesContent":["import { ComposedChart, ResponsiveContainer } from \"recharts\";\nimport React, {\n  type ComponentProps,\n  type FC,\n  isValidElement,\n  type PropsWithChildren,\n  type ReactNode,\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\";\n\n/** @deprecated Use a ReactNode instead */\nexport interface CartesianChartEmptyViewProps {\n  data?: ComponentProps<typeof ComposedChart>[\"data\"];\n}\n\nexport interface CartesianChartProps\n  extends\n    Pick<\n      ComponentProps<typeof ComposedChart>,\n      \"data\" | \"className\" | \"syncId\" | \"syncMethod\"\n    >,\n    PropsWithChildren {\n  height?: string;\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 { children, data, className, height, flexGrow, emptyView, ...rest } =\n    props;\n\n  const { viewDimensions, ref: containerRef } = useChartClipRect();\n\n  const showEmptyView = !!((!data || data.length === 0) && emptyView);\n  const rootClassName = clsx(\n    styles.cartesianChart,\n    className,\n    showEmptyView && styles.emptyView,\n  );\n\n  const emptyElement = useMemo(() => {\n    if (isValidElement(emptyView)) {\n      return emptyView;\n    }\n\n    if (!emptyView) {\n      return;\n    }\n\n    console.warn(\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    return null;\n  }, [emptyView]);\n\n  return (\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 data={data} className={rootClassName} {...rest}>\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  );\n};\n\nexport default CartesianChart;\n"],"names":[],"mappings":";;;;;;;;;AAwCO,MAAM,cAAA,GAA0C,CAAC,KAAA,KAAU;AAChE,EAAA,MAAM,EAAE,UAAU,IAAA,EAAM,SAAA,EAAW,QAAQ,QAAA,EAAU,SAAA,EAAW,GAAG,IAAA,EAAK,GACtE,KAAA;AAEF,EAAA,MAAM,EAAE,cAAA,EAAgB,GAAA,EAAK,YAAA,KAAiB,gBAAA,EAAiB;AAE/D,EAAA,MAAM,gBAAgB,CAAC,EAAA,CAAG,CAAC,IAAA,IAAQ,IAAA,CAAK,WAAW,CAAA,KAAM,SAAA,CAAA;AACzD,EAAA,MAAM,aAAA,GAAgB,IAAA;AAAA,IACpB,MAAA,CAAO,cAAA;AAAA,IACP,SAAA;AAAA,IACA,iBAAiB,MAAA,CAAO;AAAA,GAC1B;AAEA,EAAA,MAAM,YAAA,GAAe,QAAQ,MAAM;AACjC,IAAA,IAAI,cAAA,CAAe,SAAS,CAAA,EAAG;AAC7B,MAAA,OAAO,SAAA;AAAA,IACT;AAEA,IAAA,IAAI,CAAC,SAAA,EAAW;AACd,MAAA;AAAA,IACF;AAEA,IAAA,OAAA,CAAQ,IAAA;AAAA,MACN;AAAA,KACF;AACA,IAAA,OAAO,IAAA;AAAA,EACT,CAAA,EAAG,CAAC,SAAS,CAAC,CAAA;AAEd,EAAA,uBACE,GAAA,CAAC,IAAA,EAAA,EAAK,EAAA,EAAI,MAAA,EACR,QAAA,kBAAA,GAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAO,EAAE,MAAA,EAAQ,IAAA,EAAM,QAAA,GAAW,CAAA,GAAI,QAAU,EACnD,QAAA,kBAAA,GAAA;AAAA,IAAC,mBAAA;AAAA,IAAA;AAAA,MACC,gBAAA,EAAkB;AAAA;AAAA,QAEhB,KAAA,EAAO,CAAA;AAAA,QACP,MAAA,EAAQ;AAAA,OACV;AAAA,MACA,KAAA,EAAO,SAAS,MAAA,GAAY,MAAA;AAAA,MAC5B,MAAA,EAAQ,SAAS,MAAA,GAAY,CAAA;AAAA,MAC7B,GAAA,EAAK,YAAA;AAAA,MAEL,+BAAC,aAAA,EAAA,EAAc,IAAA,EAAY,SAAA,EAAW,aAAA,EAAgB,GAAG,IAAA,EACtD,QAAA,EAAA;AAAA,QAAA,QAAA;AAAA,QACA,aAAA,IAAiB,cAAA,oBAChB,GAAA,CAAC,eAAA,EAAA,EAAe,GAAG,cAAA,EACjB,QAAA,kBAAA,GAAA,CAAC,OAAA,EAAA,EAAQ,SAAA,EAAW,MAAA,CAAO,kBAAA,EACxB,QAAA,EAAA,YAAA,EACH,CAAA,EACF;AAAA,OAAA,EAEJ;AAAA;AAAA,KAEJ,CAAA,EACF,CAAA;AAEJ;;;;"}

package/dist/js/components/src/components/CartesianChart/CartesianChart.module.scss.mjs

@@ -2,10 +2,12 @@
 /* */
 const cartesianChart = "flow--cartesian-chart";
 const emptyViewContainer = "flow--cartesian-chart--empty-view-container";
+const emptyView = "flow--cartesian-chart--empty-view";
 const styles = {
 	cartesianChart: cartesianChart,
-	emptyViewContainer: emptyViewContainer
+	emptyViewContainer: emptyViewContainer,
+	emptyView: emptyView
 };
 
-export { cartesianChart, styles as default, emptyViewContainer };
+export { cartesianChart, styles as default, emptyView, emptyViewContainer };
 //# sourceMappingURL=CartesianChart.module.scss.mjs.map

package/dist/js/components/src/components/CartesianChart/CartesianChart.module.scss.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"CartesianChart.module.scss.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;"}
+{"version":3,"file":"CartesianChart.module.scss.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;"}

package/dist/js/components/src/components/CartesianChart/hooks/useChartClipRect.mjs

@@ -0,0 +1,71 @@
+"use client"
+/* */
+import { useRef, useState, useEffect } from 'react';
+import { useCallbackRef } from 'use-callback-ref';
+
+const useChartClipRect = () => {
+  const observerRef = useRef(null);
+  const svgRef = useRef(null);
+  const [viewDimensions, setViewDimensions] = useState(null);
+  useEffect(() => {
+    return () => {
+      if (observerRef.current) {
+        observerRef.current.disconnect();
+        observerRef.current = null;
+      }
+    };
+  }, []);
+  const attachContainerRef = useCallbackRef(
+    null,
+    (div) => {
+      if (observerRef.current) {
+        observerRef.current.disconnect();
+        observerRef.current = null;
+      }
+      const svg = div?.querySelector("svg") ?? null;
+      svgRef.current = svg;
+      if (!svg) {
+        return;
+      }
+      const clipRect = svg.querySelector(
+        "clipPath rect"
+      );
+      if (!clipRect) {
+        return;
+      }
+      const observer = new MutationObserver((mutations) => {
+        const newViewDimensions = mutations.reduce(
+          (acc, mutation) => {
+            if (mutation.type !== "attributes" || !mutation.attributeName) {
+              return acc;
+            }
+            const target = mutation.target;
+            const attr = mutation.attributeName;
+            const value = target.getAttribute(attr);
+            if (value) {
+              acc = {
+                ...acc,
+                [attr]: value
+              };
+            }
+            return acc;
+          },
+          viewDimensions ?? { x: "0", y: "0", width: "0", height: "0" }
+        );
+        setViewDimensions(newViewDimensions);
+      });
+      observer.observe(clipRect, {
+        attributes: true,
+        attributeFilter: ["x", "y", "width", "height"],
+        attributeOldValue: false,
+        childList: false,
+        subtree: false
+      });
+      observerRef.current = observer;
+    }
+  );
+  return { viewDimensions, ref: attachContainerRef };
+};
+
+export { useChartClipRect };
+//# sourceMappingURL=useChartClipRect.mjs.map

package/dist/js/components/src/components/CartesianChart/hooks/useChartClipRect.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useChartClipRect.mjs","sources":["../../../../../../../src/components/CartesianChart/hooks/useChartClipRect.ts"],"sourcesContent":["import { type SVGProps, useEffect, useRef, useState } from \"react\";\nimport { useCallbackRef } from \"use-callback-ref\";\n\n/** @internal * */\nexport type ViewDimensions = Pick<\n  SVGProps<SVGForeignObjectElement>,\n  \"x\" | \"y\" | \"width\" | \"height\"\n> | null;\n\n/** @internal * */\nexport const useChartClipRect = () => {\n  const observerRef = useRef<MutationObserver>(null);\n  const svgRef = useRef<SVGSVGElement>(null);\n\n  const [viewDimensions, setViewDimensions] = useState<ViewDimensions>(null);\n\n  useEffect(() => {\n    return () => {\n      if (observerRef.current) {\n        observerRef.current.disconnect();\n        observerRef.current = null;\n      }\n    };\n  }, []);\n\n  const attachContainerRef = useCallbackRef(\n    null,\n    (div: HTMLDivElement | null) => {\n      if (observerRef.current) {\n        observerRef.current.disconnect();\n        observerRef.current = null;\n      }\n\n      const svg = div?.querySelector(\"svg\") ?? null;\n      svgRef.current = svg;\n\n      if (!svg) {\n        return;\n      }\n\n      const clipRect = svg.querySelector(\n        \"clipPath rect\",\n      ) as SVGRectElement | null;\n      if (!clipRect) {\n        return;\n      }\n\n      const observer = new MutationObserver((mutations) => {\n        const newViewDimensions: ViewDimensions = mutations.reduce(\n          (acc, mutation) => {\n            if (mutation.type !== \"attributes\" || !mutation.attributeName) {\n              return acc;\n            }\n\n            const target = mutation.target as SVGRectElement;\n            const attr = mutation.attributeName as keyof ViewDimensions;\n            const value = target.getAttribute(attr);\n\n            if (value) {\n              acc = {\n                ...acc,\n                [attr]: value,\n              };\n            }\n\n            return acc;\n          },\n          viewDimensions ?? { x: \"0\", y: \"0\", width: \"0\", height: \"0\" },\n        );\n\n        setViewDimensions(newViewDimensions);\n      });\n\n      observer.observe(clipRect, {\n        attributes: true,\n        attributeFilter: [\"x\", \"y\", \"width\", \"height\"],\n        attributeOldValue: false,\n        childList: false,\n        subtree: false,\n      });\n\n      observerRef.current = observer;\n    },\n  );\n\n  return { viewDimensions, ref: attachContainerRef };\n};\n"],"names":[],"mappings":";;;AAUO,MAAM,mBAAmB,MAAM;AACpC,EAAA,MAAM,WAAA,GAAc,OAAyB,IAAI,CAAA;AACjD,EAAA,MAAM,MAAA,GAAS,OAAsB,IAAI,CAAA;AAEzC,EAAA,MAAM,CAAC,cAAA,EAAgB,iBAAiB,CAAA,GAAI,SAAyB,IAAI,CAAA;AAEzE,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,OAAO,MAAM;AACX,MAAA,IAAI,YAAY,OAAA,EAAS;AACvB,QAAA,WAAA,CAAY,QAAQ,UAAA,EAAW;AAC/B,QAAA,WAAA,CAAY,OAAA,GAAU,IAAA;AAAA,MACxB;AAAA,IACF,CAAA;AAAA,EACF,CAAA,EAAG,EAAE,CAAA;AAEL,EAAA,MAAM,kBAAA,GAAqB,cAAA;AAAA,IACzB,IAAA;AAAA,IACA,CAAC,GAAA,KAA+B;AAC9B,MAAA,IAAI,YAAY,OAAA,EAAS;AACvB,QAAA,WAAA,CAAY,QAAQ,UAAA,EAAW;AAC/B,QAAA,WAAA,CAAY,OAAA,GAAU,IAAA;AAAA,MACxB;AAEA,MAAA,MAAM,GAAA,GAAM,GAAA,EAAK,aAAA,CAAc,KAAK,CAAA,IAAK,IAAA;AACzC,MAAA,MAAA,CAAO,OAAA,GAAU,GAAA;AAEjB,MAAA,IAAI,CAAC,GAAA,EAAK;AACR,QAAA;AAAA,MACF;AAEA,MAAA,MAAM,WAAW,GAAA,CAAI,aAAA;AAAA,QACnB;AAAA,OACF;AACA,MAAA,IAAI,CAAC,QAAA,EAAU;AACb,QAAA;AAAA,MACF;AAEA,MAAA,MAAM,QAAA,GAAW,IAAI,gBAAA,CAAiB,CAAC,SAAA,KAAc;AACnD,QAAA,MAAM,oBAAoC,SAAA,CAAU,MAAA;AAAA,UAClD,CAAC,KAAK,QAAA,KAAa;AACjB,YAAA,IAAI,QAAA,CAAS,IAAA,KAAS,YAAA,IAAgB,CAAC,SAAS,aAAA,EAAe;AAC7D,cAAA,OAAO,GAAA;AAAA,YACT;AAEA,YAAA,MAAM,SAAS,QAAA,CAAS,MAAA;AACxB,YAAA,MAAM,OAAO,QAAA,CAAS,aAAA;AACtB,YAAA,MAAM,KAAA,GAAQ,MAAA,CAAO,YAAA,CAAa,IAAI,CAAA;AAEtC,YAAA,IAAI,KAAA,EAAO;AACT,cAAA,GAAA,GAAM;AAAA,gBACJ,GAAG,GAAA;AAAA,gBACH,CAAC,IAAI,GAAG;AAAA,eACV;AAAA,YACF;AAEA,YAAA,OAAO,GAAA;AAAA,UACT,CAAA;AAAA,UACA,cAAA,IAAkB,EAAE,CAAA,EAAG,GAAA,EAAK,GAAG,GAAA,EAAK,KAAA,EAAO,GAAA,EAAK,MAAA,EAAQ,GAAA;AAAI,SAC9D;AAEA,QAAA,iBAAA,CAAkB,iBAAiB,CAAA;AAAA,MACrC,CAAC,CAAA;AAED,MAAA,QAAA,CAAS,QAAQ,QAAA,EAAU;AAAA,QACzB,UAAA,EAAY,IAAA;AAAA,QACZ,eAAA,EAAiB,CAAC,GAAA,EAAK,GAAA,EAAK,SAAS,QAAQ,CAAA;AAAA,QAC7C,iBAAA,EAAmB,KAAA;AAAA,QACnB,SAAA,EAAW,KAAA;AAAA,QACX,OAAA,EAAS;AAAA,OACV,CAAA;AAED,MAAA,WAAA,CAAY,OAAA,GAAU,QAAA;AAAA,IACxB;AAAA,GACF;AAEA,EAAA,OAAO,EAAE,cAAA,EAAgB,GAAA,EAAK,kBAAA,EAAmB;AACnD;;;;"}

package/dist/js/flr-universal.mjs

@@ -145,6 +145,8 @@ import './components/src/components/Badge/Badge.mjs';
 import 'react-aria-components';
 export { BrowserOnly } from './components/src/components/BrowserOnly/BrowserOnly.mjs';
 import 'recharts';
+import 'use-callback-ref';
+import './components/src/views/DivView.mjs';
 import './components/src/lib/tokens/CategoricalColors.mjs';
 import './components/src/components/Text/Text.mjs';
 import '@mittwald/react-use-promise';

package/dist/js/flr-universal.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"flr-universal.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"flr-universal.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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

@@ -1,12 +1,13 @@
-import { default as React, ComponentProps, FC, PropsWithChildren } from 'react';
-import * as Recharts from "recharts";
+import { ComposedChart } from 'recharts';
+import { ComponentProps, FC, PropsWithChildren, ReactNode } from 'react';
+/** @deprecated Use a ReactNode instead */
 export interface CartesianChartEmptyViewProps {
-    data?: ComponentProps<typeof Recharts.ComposedChart>["data"];
+    data?: ComponentProps<typeof ComposedChart>["data"];
 }
-export interface CartesianChartProps extends Pick<ComponentProps<typeof Recharts.ComposedChart>, "data" | "className" | "syncId" | "syncMethod">, PropsWithChildren {
+export interface CartesianChartProps extends Pick<ComponentProps<typeof ComposedChart>, "data" | "className" | "syncId" | "syncMethod">, PropsWithChildren {
     height?: string;
     /** View that is provided when data is empty/undefined */
-    emptyView?: React.ComponentType<CartesianChartEmptyViewProps>;
+    emptyView?: ReactNode;
     /**
      * Allow the height controlling container to set flex-grow: 1. Can only be
      * used in combination with `height`

package/dist/types/components/CartesianChart/CartesianChart.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CartesianChart.d.ts","sourceRoot":"","sources":["../../../../src/components/CartesianChart/CartesianChart.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,QAAQ,MAAM,UAAU,CAAC;AACrC,OAAO,KAAK,EAAE,EAKZ,KAAK,cAAc,EACnB,KAAK,EAAE,EACP,KAAK,iBAAiB,EAGvB,MAAM,OAAO,CAAC;AAMf,MAAM,WAAW,4BAA4B;IAC3C,IAAI,CAAC,EAAE,cAAc,CAAC,OAAO,QAAQ,CAAC,aAAa,CAAC,CAAC,MAAM,CAAC,CAAC;CAC9D;AAED,MAAM,WAAW,mBACf,SACE,IAAI,CACF,cAAc,CAAC,OAAO,QAAQ,CAAC,aAAa,CAAC,EAC7C,MAAM,GAAG,WAAW,GAAG,QAAQ,GAAG,YAAY,CAC/C,EACD,iBAAiB;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,yDAAyD;IACzD,SAAS,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,4BAA4B,CAAC,CAAC;IAC9D;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,wBAAwB;AACxB,eAAO,MAAM,cAAc,EAAE,EAAE,CAAC,mBAAmB,CAgGlD,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"CartesianChart.d.ts","sourceRoot":"","sources":["../../../../src/components/CartesianChart/CartesianChart.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAuB,MAAM,UAAU,CAAC;AAC9D,OAAc,EACZ,KAAK,cAAc,EACnB,KAAK,EAAE,EAEP,KAAK,iBAAiB,EACtB,KAAK,SAAS,EAEf,MAAM,OAAO,CAAC;AAOf,0CAA0C;AAC1C,MAAM,WAAW,4BAA4B;IAC3C,IAAI,CAAC,EAAE,cAAc,CAAC,OAAO,aAAa,CAAC,CAAC,MAAM,CAAC,CAAC;CACrD;AAED,MAAM,WAAW,mBACf,SACE,IAAI,CACF,cAAc,CAAC,OAAO,aAAa,CAAC,EACpC,MAAM,GAAG,WAAW,GAAG,QAAQ,GAAG,YAAY,CAC/C,EACD,iBAAiB;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB,yDAAyD;IACzD,SAAS,CAAC,EAAE,SAAS,CAAC;IAEtB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,wBAAwB;AACxB,eAAO,MAAM,cAAc,EAAE,EAAE,CAAC,mBAAmB,CAuDlD,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/dist/types/components/CartesianChart/hooks/useChartClipRect.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=useChartClipRect.d.ts.map

package/dist/types/components/CartesianChart/hooks/useChartClipRect.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useChartClipRect.d.ts","sourceRoot":"","sources":["../../../../../src/components/CartesianChart/hooks/useChartClipRect.ts"],"names":[],"mappings":""}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mittwald/flow-react-components",
-  "version": "0.2.0-alpha.674",
+  "version": "0.2.0-alpha.675",
   "type": "module",
   "description": "A React implementation of Flow, mittwald’s design system",
   "homepage": "https://mittwald.github.io/flow",
@@ -58,7 +58,7 @@
   "dependencies": {
     "@internationalized/string-compiler": "^3.2.6",
     "@mittwald/password-tools-js": "3.0.0-alpha.18",
-    "@mittwald/react-tunnel": "0.2.0-alpha.674",
+    "@mittwald/react-tunnel": "0.2.0-alpha.675",
     "@mittwald/react-use-promise": "^4.2.2",
     "@react-aria/form": "^3.1.3",
     "@react-aria/live-announcer": "^3.4.4",
@@ -104,7 +104,7 @@
     "@faker-js/faker": "^10.2.0",
     "@internationalized/date": "^3.10.1",
     "@mittwald/flow-core": "",
-    "@mittwald/flow-design-tokens": "0.2.0-alpha.674",
+    "@mittwald/flow-design-tokens": "0.2.0-alpha.675",
     "@mittwald/react-use-promise": "^4.2.2",
     "@mittwald/remote-dom-react": "1.2.2-mittwald.10",
     "@mittwald/typescript-config": "",
@@ -172,5 +172,5 @@
       "optional": true
     }
   },
-  "gitHead": "8b5459f6cf637f972b8adcb2c8cb1c006e3f129d"
+  "gitHead": "3d05327f32a6ca087b3755132f13e13c589bf74c"
 }