@mittwald/flow-react-components 0.2.0-alpha.74 → 0.2.0-alpha.740

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

@@ -0,0 +1,132 @@
+"use client"
+/* */
+import { jsxs, jsx } from 'react/jsx-runtime';
+import styles from './Button.module.scss.mjs';
+import * as Aria from 'react-aria-components';
+import clsx from 'clsx';
+import '../../lib/propsContext/propsContext.mjs';
+import { PropsContextProvider } from '../../lib/propsContext/components/PropsContextProvider.mjs';
+import 'react';
+import '@mittwald/flow-icons';
+import '../Icon/components/IconSetProvider.mjs';
+import '../Icon/Icon.mjs';
+import '../../views/IconView.mjs';
+import { IconFailed } from '../Icon/components/icons/IconFailed.mjs';
+import { IconSucceeded } from '../Icon/components/icons/IconSucceeded.mjs';
+import { Wrap } from '../Wrap/Wrap.mjs';
+import { Text } from '../Text/Text.mjs';
+import { flowComponent } from '../../lib/componentFactory/flowComponent.mjs';
+import { LoadingSpinner } from '../LoadingSpinner/LoadingSpinner.mjs';
+import { useAriaAnnounceActionState } from '../Action/lib/ariaLive.mjs';
+import { extractTextFromFirstChild } from '../../lib/react/remote.mjs';
+
+const disablePendingProps = (props) => {
+  if (props.isPending || props.isSucceeded || props.isFailed || props["aria-disabled"] || props.isReadOnly) {
+    props = { ...props };
+    const mutedActionHandler = (e) => {
+      if (e && typeof e === "object") {
+        const isReactAriaEvent = "continuePropagation" in e && typeof e.continuePropagation === "function";
+        if (!isReactAriaEvent && "stopPropagation" in e && typeof e.stopPropagation === "function") {
+          e.stopPropagation();
+        }
+        if ("preventDefault" in e && typeof e.preventDefault === "function") {
+          e.preventDefault();
+        }
+      }
+      return false;
+    };
+    props.onClick = mutedActionHandler;
+    props.onPress = mutedActionHandler;
+    props.onPressStart = mutedActionHandler;
+    props.onPressEnd = mutedActionHandler;
+    props.onPressChange = mutedActionHandler;
+    props.onPressUp = mutedActionHandler;
+    props.onKeyDown = mutedActionHandler;
+    props.onKeyUp = mutedActionHandler;
+  }
+  return props;
+};
+const Button = flowComponent("Button", (props) => {
+  props = disablePendingProps(props);
+  const {
+    color = "primary",
+    variant = "solid",
+    children,
+    className,
+    size = "m",
+    isPending,
+    isSucceeded,
+    isFailed,
+    "aria-disabled": ariaDisabled,
+    ref,
+    slot: ignoredSlotProp,
+    ariaSlot: slot,
+    unstyled,
+    isReadOnly,
+    ...restProps
+  } = props;
+  const rootClassName = unstyled ? className : clsx(
+    styles.button,
+    isPending && styles.isPending,
+    isSucceeded && styles.isSucceeded,
+    isFailed && styles.isFailed,
+    styles[`size-${size}`],
+    styles[color],
+    styles[variant],
+    className,
+    /**
+     * Workaround warning: The Aria.Button does not support "aria-disabled"
+     * by now, so this Button will be visually disabled via CSS.
+     */
+    ariaDisabled && styles.ariaDisabled
+  );
+  useAriaAnnounceActionState(
+    isPending ? "isPending" : isSucceeded ? "isSucceeded" : isFailed ? "isFailed" : "isIdle"
+  );
+  const propsContext = {
+    Icon: {
+      className: styles.icon,
+      "aria-hidden": true,
+      size
+    },
+    Text: {
+      className: styles.text
+    },
+    Avatar: {
+      className: styles.avatar
+    },
+    CounterBadge: {
+      className: styles.counterBadge
+    },
+    Image: {
+      className: styles.image
+    }
+  };
+  const StateIconComponent = isSucceeded ? IconSucceeded : isFailed ? IconFailed : isPending ? LoadingSpinner : void 0;
+  const stateIcon = StateIconComponent && /* @__PURE__ */ jsx(
+    StateIconComponent,
+    {
+      size,
+      className: styles.stateIcon,
+      status: isFailed ? "danger" : isSucceeded ? "success" : void 0
+    }
+  );
+  const isStringContent = extractTextFromFirstChild(children) !== void 0;
+  return /* @__PURE__ */ jsxs(
+    Aria.Button,
+    {
+      className: rootClassName,
+      ref,
+      slot,
+      ...isReadOnly === true ? { "data-readonly": true } : {},
+      ...restProps,
+      children: [
+        /* @__PURE__ */ jsx(PropsContextProvider, { props: propsContext, children: /* @__PURE__ */ jsx(Wrap, { if: !unstyled, children: /* @__PURE__ */ jsx("span", { className: styles.content, children: /* @__PURE__ */ jsx(Wrap, { if: isStringContent, children: /* @__PURE__ */ jsx(Text, { className: styles.text, children }) }) }) }) }),
+        stateIcon
+      ]
+    }
+  );
+});
+
+export { Button, Button as default };
+//# sourceMappingURL=Button.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Button.mjs","sources":["../../../../../../src/components/Button/Button.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport styles from \"./Button.module.scss\";\nimport * as Aria from \"react-aria-components\";\nimport clsx from \"clsx\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport { IconFailed, IconSucceeded } from \"@/components/Icon/components/icons\";\nimport { Wrap } from \"@/components/Wrap\";\nimport { Text } from \"@/components/Text\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport LoadingSpinner from \"@/components/LoadingSpinner/LoadingSpinner\";\nimport { useAriaAnnounceActionState } from \"@/components/Action/lib/ariaLive\";\nimport { extractTextFromFirstChild } from \"@/lib/react/remote\";\n\nexport interface ButtonProps\n  extends\n    PropsWithChildren<Aria.ButtonProps>,\n    FlowComponentProps<HTMLButtonElement> {\n  /** Slot for button placement in action groups. */\n  slot?: string;\n  /** The color of the button. @default \"primary\" */\n  color?: \"primary\" | \"accent\" | \"secondary\" | \"danger\" | \"dark\" | \"light\";\n  /** The visual variant of the button. @default \"solid\" */\n  variant?: \"plain\" | \"solid\" | \"soft\" | \"outline\";\n  /** The size of the button. @default \"m\" */\n  size?: \"m\" | \"s\";\n  /** Disables button but keeps it focusable. */\n  \"aria-disabled\"?: boolean;\n  /** Whether the button is in a pending state. */\n  isPending?: boolean;\n  /** Whether the button is in a succeeded state. */\n  isSucceeded?: boolean;\n  /** Whether the button is in a failed state. */\n  isFailed?: boolean;\n  /** Whether the button is in a read only state. */\n  isReadOnly?: boolean;\n  /** @internal */\n  unstyled?: boolean;\n  /** @internal */\n  ariaSlot?: string | null;\n}\n\nconst disablePendingProps = (props: ButtonProps) => {\n  if (\n    props.isPending ||\n    props.isSucceeded ||\n    props.isFailed ||\n    props[\"aria-disabled\"] ||\n    props.isReadOnly\n  ) {\n    props = { ...props };\n\n    const mutedActionHandler = (e: unknown) => {\n      if (e && typeof e === \"object\") {\n        // stopPropagation is the default behavior in React Aria\n        const isReactAriaEvent =\n          \"continuePropagation\" in e &&\n          typeof e.continuePropagation === \"function\";\n\n        if (\n          !isReactAriaEvent &&\n          \"stopPropagation\" in e &&\n          typeof e.stopPropagation === \"function\"\n        ) {\n          e.stopPropagation();\n        }\n        if (\"preventDefault\" in e && typeof e.preventDefault === \"function\") {\n          e.preventDefault();\n        }\n      }\n\n      return false;\n    };\n\n    props.onClick = mutedActionHandler;\n    props.onPress = mutedActionHandler;\n    props.onPressStart = mutedActionHandler;\n    props.onPressEnd = mutedActionHandler;\n    props.onPressChange = mutedActionHandler;\n    props.onPressUp = mutedActionHandler;\n    props.onKeyDown = mutedActionHandler;\n    props.onKeyUp = mutedActionHandler;\n  }\n\n  return props;\n};\n\n/** @flr-generate all */\nexport const Button = flowComponent(\"Button\", (props) => {\n  props = disablePendingProps(props);\n\n  const {\n    color = \"primary\",\n    variant = \"solid\",\n    children,\n    className,\n    size = \"m\",\n    isPending,\n    isSucceeded,\n    isFailed,\n    \"aria-disabled\": ariaDisabled,\n    ref,\n    slot: ignoredSlotProp,\n    ariaSlot: slot,\n    unstyled,\n    isReadOnly,\n    ...restProps\n  } = props;\n\n  const rootClassName = unstyled\n    ? className\n    : clsx(\n        styles.button,\n        isPending && styles.isPending,\n        isSucceeded && styles.isSucceeded,\n        isFailed && styles.isFailed,\n        styles[`size-${size}`],\n        styles[color],\n        styles[variant],\n        className,\n        /**\n         * Workaround warning: The Aria.Button does not support \"aria-disabled\"\n         * by now, so this Button will be visually disabled via CSS.\n         */\n        ariaDisabled && styles.ariaDisabled,\n      );\n\n  useAriaAnnounceActionState(\n    isPending\n      ? \"isPending\"\n      : isSucceeded\n        ? \"isSucceeded\"\n        : isFailed\n          ? \"isFailed\"\n          : \"isIdle\",\n  );\n\n  const propsContext: PropsContext = {\n    Icon: {\n      className: styles.icon,\n      \"aria-hidden\": true,\n      size,\n    },\n    Text: {\n      className: styles.text,\n    },\n    Avatar: {\n      className: styles.avatar,\n    },\n    CounterBadge: {\n      className: styles.counterBadge,\n    },\n    Image: {\n      className: styles.image,\n    },\n  };\n\n  const StateIconComponent = isSucceeded\n    ? IconSucceeded\n    : isFailed\n      ? IconFailed\n      : isPending\n        ? LoadingSpinner\n        : undefined;\n\n  const stateIcon = StateIconComponent && (\n    <StateIconComponent\n      size={size}\n      className={styles.stateIcon}\n      status={isFailed ? \"danger\" : isSucceeded ? \"success\" : undefined}\n    />\n  );\n\n  const isStringContent = extractTextFromFirstChild(children) !== undefined;\n\n  return (\n    <Aria.Button\n      className={rootClassName}\n      ref={ref}\n      slot={slot}\n      {...(isReadOnly === true ? { \"data-readonly\": true } : {})}\n      {...restProps}\n    >\n      <PropsContextProvider props={propsContext}>\n        <Wrap if={!unstyled}>\n          <span className={styles.content}>\n            <Wrap if={isStringContent}>\n              <Text className={styles.text}>{children}</Text>\n            </Wrap>\n          </span>\n        </Wrap>\n      </PropsContextProvider>\n      {stateIcon}\n    </Aria.Button>\n  );\n});\n\nexport default Button;\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,52 @@
+"use client"
+/* */
+const button = "flow--button";
+const outline = "flow--button--outline";
+const content = "flow--button--content";
+const stateIcon = "flow--button--state-icon";
+const icon = "flow--button--icon";
+const text = "flow--button--text";
+const counterBadge = "flow--button--counter-badge";
+const isPending = "flow--button--is-pending";
+const isFailed = "flow--button--is-failed";
+const isSucceeded = "flow--button--is-succeeded";
+const plain = "flow--button--plain";
+const primary = "flow--button--primary";
+const solid = "flow--button--solid";
+const ariaDisabled = "flow--button--aria-disabled";
+const accent = "flow--button--accent";
+const danger = "flow--button--danger";
+const secondary = "flow--button--secondary";
+const dark = "flow--button--dark";
+const light = "flow--button--light";
+const soft = "flow--button--soft";
+const avatar = "flow--button--avatar";
+const image = "flow--button--image";
+const styles = {
+	button: button,
+	outline: outline,
+	content: content,
+	stateIcon: stateIcon,
+	icon: icon,
+	text: text,
+	counterBadge: counterBadge,
+	isPending: isPending,
+	isFailed: isFailed,
+	isSucceeded: isSucceeded,
+	plain: plain,
+	"size-s": "flow--button--size-s",
+	primary: primary,
+	solid: solid,
+	ariaDisabled: ariaDisabled,
+	accent: accent,
+	danger: danger,
+	secondary: secondary,
+	dark: dark,
+	light: light,
+	soft: soft,
+	avatar: avatar,
+	image: image
+};
+
+export { accent, ariaDisabled, avatar, button, content, counterBadge, danger, dark, styles as default, icon, image, isFailed, isPending, isSucceeded, light, outline, plain, primary, secondary, soft, solid, stateIcon, text };
+//# sourceMappingURL=Button.module.scss.mjs.map

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

@@ -0,0 +1,17 @@
+"use client"
+/* */
+import { jsxs, jsx } from 'react/jsx-runtime';
+import 'react';
+import * as Aria from 'react-aria-components';
+import styles from './Calendar.module.scss.mjs';
+import { CalendarHeader } from './components/CalendarHeader/CalendarHeader.mjs';
+
+const Calendar = () => {
+  return /* @__PURE__ */ jsxs(Aria.Calendar, { className: styles.calendar, children: [
+    /* @__PURE__ */ jsx(CalendarHeader, {}),
+    /* @__PURE__ */ jsx(Aria.CalendarGrid, { weekdayStyle: "short", children: (date) => /* @__PURE__ */ jsx(Aria.CalendarCell, { date }) })
+  ] });
+};
+
+export { Calendar };
+//# sourceMappingURL=Calendar.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Calendar.mjs","sources":["../../../../../../src/components/Calendar/Calendar.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport React from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport styles from \"@/components/Calendar/Calendar.module.scss\";\nimport CalendarHeader from \"./components/CalendarHeader\";\n\nexport const Calendar: FC = () => {\n  return (\n    <Aria.Calendar className={styles.calendar}>\n      <CalendarHeader />\n      <Aria.CalendarGrid weekdayStyle=\"short\">\n        {(date) => <Aria.CalendarCell date={date} />}\n      </Aria.CalendarGrid>\n    </Aria.Calendar>\n  );\n};\n\nexport default Calendar;\n"],"names":[],"mappings":";;;;;;AAMO,MAAM,WAAe,MAAM;AAChC,EAAA,4BACG,IAAA,CAAK,QAAA,EAAL,EAAc,SAAA,EAAW,OAAO,QAAA,EAC/B,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,cAAA,EAAA,EAAe,CAAA;AAAA,oBAChB,GAAA,CAAC,IAAA,CAAK,YAAA,EAAL,EAAkB,YAAA,EAAa,OAAA,EAC7B,QAAA,EAAA,CAAC,IAAA,qBAAS,GAAA,CAAC,IAAA,CAAK,YAAA,EAAL,EAAkB,MAAY,CAAA,EAC5C;AAAA,GAAA,EACF,CAAA;AAEJ;;;;"}

package/dist/js/components/src/components/Calendar/RangeCalendar.mjs

@@ -0,0 +1,18 @@
+"use client"
+/* */
+import { jsxs, jsx } from 'react/jsx-runtime';
+import 'react';
+import * as Aria from 'react-aria-components';
+import styles from './Calendar.module.scss.mjs';
+import { CalendarHeader } from './components/CalendarHeader/CalendarHeader.mjs';
+import clsx from 'clsx';
+
+const RangeCalendar = () => {
+  return /* @__PURE__ */ jsxs(Aria.RangeCalendar, { className: clsx(styles.calendar, styles.range), children: [
+    /* @__PURE__ */ jsx(CalendarHeader, {}),
+    /* @__PURE__ */ jsx(Aria.CalendarGrid, { children: (date) => /* @__PURE__ */ jsx(Aria.CalendarCell, { date }) })
+  ] });
+};
+
+export { RangeCalendar };
+//# sourceMappingURL=RangeCalendar.mjs.map

package/dist/js/components/src/components/Calendar/RangeCalendar.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"RangeCalendar.mjs","sources":["../../../../../../src/components/Calendar/RangeCalendar.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport React from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport styles from \"@/components/Calendar/Calendar.module.scss\";\nimport CalendarHeader from \"./components/CalendarHeader\";\nimport clsx from \"clsx\";\n\nexport const RangeCalendar: FC = () => {\n  return (\n    <Aria.RangeCalendar className={clsx(styles.calendar, styles.range)}>\n      <CalendarHeader />\n      <Aria.CalendarGrid>\n        {(date) => <Aria.CalendarCell date={date} />}\n      </Aria.CalendarGrid>\n    </Aria.RangeCalendar>\n  );\n};\n\nexport default RangeCalendar;\n"],"names":[],"mappings":";;;;;;;AAOO,MAAM,gBAAoB,MAAM;AACrC,EAAA,uBACE,IAAA,CAAC,IAAA,CAAK,aAAA,EAAL,EAAmB,SAAA,EAAW,KAAK,MAAA,CAAO,QAAA,EAAU,MAAA,CAAO,KAAK,CAAA,EAC/D,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,cAAA,EAAA,EAAe,CAAA;AAAA,oBAChB,GAAA,CAAC,IAAA,CAAK,YAAA,EAAL,EACE,QAAA,EAAA,CAAC,IAAA,qBAAS,GAAA,CAAC,IAAA,CAAK,YAAA,EAAL,EAAkB,IAAA,EAAY,CAAA,EAC5C;AAAA,GAAA,EACF,CAAA;AAEJ;;;;"}

package/dist/js/components/src/components/Calendar/components/CalendarHeader/CalendarHeader.mjs

@@ -0,0 +1,23 @@
+"use client"
+/* */
+import { jsxs, jsx } from 'react/jsx-runtime';
+import 'react';
+import { Button } from '../../../Button/Button.mjs';
+import * as Aria from 'react-aria-components';
+import '@mittwald/flow-icons';
+import '../../../Icon/components/IconSetProvider.mjs';
+import '../../../Icon/Icon.mjs';
+import '../../../../views/IconView.mjs';
+import { IconChevronLeft } from '../../../Icon/components/icons/IconChevronLeft.mjs';
+import { IconChevronRight } from '../../../Icon/components/icons/IconChevronRight.mjs';
+
+const CalendarHeader = () => {
+  return /* @__PURE__ */ jsxs("header", { children: [
+    /* @__PURE__ */ jsx(Button, { ariaSlot: "previous", variant: "plain", color: "secondary", children: /* @__PURE__ */ jsx(IconChevronLeft, {}) }),
+    /* @__PURE__ */ jsx(Aria.Heading, {}),
+    /* @__PURE__ */ jsx(Button, { ariaSlot: "next", variant: "plain", color: "secondary", children: /* @__PURE__ */ jsx(IconChevronRight, {}) })
+  ] });
+};
+
+export { CalendarHeader, CalendarHeader as default };
+//# sourceMappingURL=CalendarHeader.mjs.map

package/dist/js/components/src/components/Calendar/components/CalendarHeader/CalendarHeader.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"CalendarHeader.mjs","sources":["../../../../../../../../src/components/Calendar/components/CalendarHeader/CalendarHeader.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport React from \"react\";\nimport { Button } from \"@/components/Button\";\nimport * as Aria from \"react-aria-components\";\nimport {\n  IconChevronLeft,\n  IconChevronRight,\n} from \"@/components/Icon/components/icons\";\n\nexport const CalendarHeader: FC = () => {\n  return (\n    <header>\n      <Button ariaSlot=\"previous\" variant=\"plain\" color=\"secondary\">\n        <IconChevronLeft />\n      </Button>\n      <Aria.Heading />\n      <Button ariaSlot=\"next\" variant=\"plain\" color=\"secondary\">\n        <IconChevronRight />\n      </Button>\n    </header>\n  );\n};\n\nexport default CalendarHeader;\n"],"names":[],"mappings":";;;;;;;;;;;AASO,MAAM,iBAAqB,MAAM;AACtC,EAAA,4BACG,QAAA,EAAA,EACC,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,MAAA,EAAA,EAAO,UAAS,UAAA,EAAW,OAAA,EAAQ,SAAQ,KAAA,EAAM,WAAA,EAChD,QAAA,kBAAA,GAAA,CAAC,eAAA,EAAA,EAAgB,CAAA,EACnB,CAAA;AAAA,oBACA,GAAA,CAAC,IAAA,CAAK,OAAA,EAAL,EAAa,CAAA;AAAA,oBACd,GAAA,CAAC,MAAA,EAAA,EAAO,QAAA,EAAS,MAAA,EAAO,OAAA,EAAQ,SAAQ,KAAA,EAAM,WAAA,EAC5C,QAAA,kBAAA,GAAA,CAAC,gBAAA,EAAA,EAAiB,CAAA,EACpB;AAAA,GAAA,EACF,CAAA;AAEJ;;;;"}

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

@@ -0,0 +1,53 @@
+"use client"
+/* */
+import { jsx, jsxs } from 'react/jsx-runtime';
+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';
+
+const CartesianChart = (props) => {
+  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,
+    showEmptyView && styles.emptyView
+  );
+  const emptyElement = useMemo(() => {
+    if (isValidElement(emptyView)) {
+      return emptyView;
+    }
+    if (!emptyView) {
+      return;
+    }
+    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,
+    {
+      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 };
+//# sourceMappingURL=CartesianChart.mjs.map

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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,13 @@
+"use client"
+/* */
+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,
+	emptyView: emptyView
+};
+
+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

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

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

@@ -0,0 +1,33 @@
+"use client"
+/* */
+import { jsx } from 'react/jsx-runtime';
+import 'react';
+import * as Recharts from 'recharts';
+import tokens from '../../../../../../design-tokens/dist/variables.json.mjs';
+import { AreaDot } from '../AreaDot/AreaDot.mjs';
+import { isCategoricalColor } from '../../../../lib/tokens/isCategoricalColor.mjs';
+
+const Area = (props) => {
+  const {
+    color: colorFromProps = "sea-green",
+    stackId = 1,
+    fillOpacity = 1,
+    ...rest
+  } = props;
+  const color = isCategoricalColor(colorFromProps) ? `var(--color--categorical--${colorFromProps})` : colorFromProps;
+  return /* @__PURE__ */ jsx(
+    Recharts.Area,
+    {
+      stackId,
+      fillOpacity,
+      ...rest,
+      activeDot: /* @__PURE__ */ jsx(AreaDot, { color }),
+      fill: color,
+      stroke: tokens.area["border-color"].value,
+      strokeWidth: tokens.area["border-width"].value
+    }
+  );
+};
+
+export { Area };
+//# sourceMappingURL=Area.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Area.mjs","sources":["../../../../../../../../src/components/CartesianChart/components/Area/Area.tsx"],"sourcesContent":["import { type FC } from \"react\";\nimport * as Recharts from \"recharts\";\nimport tokens from \"@mittwald/flow-design-tokens/variables.json\";\nimport { AreaDot } from \"../AreaDot\";\nimport type { CategoricalWithCustomColor } from \"@/lib/tokens/CategoricalColors\";\nimport { isCategoricalColor } from \"@/lib/tokens/isCategoricalColor\";\n\nexport interface AreaProps extends Pick<\n  Recharts.AreaProps,\n  | \"className\"\n  | \"dataKey\"\n  | \"stackId\"\n  | \"fillOpacity\"\n  | \"key\"\n  | \"xAxisId\"\n  | \"yAxisId\"\n  | \"type\"\n  | \"unit\"\n> {\n  /** The color of the area. @default \"sea-green\" */\n  color?: CategoricalWithCustomColor;\n}\n\n/** @flr-generate all */\nexport const Area: FC<AreaProps> = (props) => {\n  const {\n    color: colorFromProps = \"sea-green\",\n    stackId = 1,\n    fillOpacity = 1,\n    ...rest\n  } = props;\n\n  const color = isCategoricalColor(colorFromProps)\n    ? `var(--color--categorical--${colorFromProps})`\n    : colorFromProps;\n\n  return (\n    <Recharts.Area\n      stackId={stackId}\n      fillOpacity={fillOpacity}\n      {...rest}\n      activeDot={<AreaDot color={color} />}\n      fill={color}\n      stroke={tokens.area[\"border-color\"].value}\n      strokeWidth={tokens.area[\"border-width\"].value}\n    />\n  );\n};\n\nexport default Area;\n"],"names":[],"mappings":";;;;;;;AAwBO,MAAM,IAAA,GAAsB,CAAC,KAAA,KAAU;AAC5C,EAAA,MAAM;AAAA,IACJ,OAAO,cAAA,GAAiB,WAAA;AAAA,IACxB,OAAA,GAAU,CAAA;AAAA,IACV,WAAA,GAAc,CAAA;AAAA,IACd,GAAG;AAAA,GACL,GAAI,KAAA;AAEJ,EAAA,MAAM,QAAQ,kBAAA,CAAmB,cAAc,CAAA,GAC3C,CAAA,0BAAA,EAA6B,cAAc,CAAA,CAAA,CAAA,GAC3C,cAAA;AAEJ,EAAA,uBACE,GAAA;AAAA,IAAC,QAAA,CAAS,IAAA;AAAA,IAAT;AAAA,MACC,OAAA;AAAA,MACA,WAAA;AAAA,MACC,GAAG,IAAA;AAAA,MACJ,SAAA,kBAAW,GAAA,CAAC,OAAA,EAAA,EAAQ,KAAA,EAAc,CAAA;AAAA,MAClC,IAAA,EAAM,KAAA;AAAA,MACN,MAAA,EAAQ,MAAA,CAAO,IAAA,CAAK,cAAc,CAAA,CAAE,KAAA;AAAA,MACpC,WAAA,EAAa,MAAA,CAAO,IAAA,CAAK,cAAc,CAAA,CAAE;AAAA;AAAA,GAC3C;AAEJ;;;;"}

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

@@ -0,0 +1,30 @@
+"use client"
+/* */
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+const AreaDot = ({
+  cx,
+  cy,
+  color
+}) => {
+  if (cx === void 0 || cy === void 0) return null;
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      x: cx - 7,
+      y: cy - 7,
+      width: 14,
+      height: 14,
+      viewBox: "0 0 14 14",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: [
+        /* @__PURE__ */ jsx("circle", { cx: "7", cy: "7", r: "7", fill: "white" }),
+        /* @__PURE__ */ jsx("circle", { cx: "7", cy: "7", r: "4", stroke: color, strokeWidth: "2", fill: "white" })
+      ]
+    }
+  );
+};
+
+export { AreaDot };
+//# sourceMappingURL=AreaDot.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AreaDot.mjs","sources":["../../../../../../../../src/components/CartesianChart/components/AreaDot/AreaDot.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport type * as Recharts from \"recharts\";\n\nexport const AreaDot: FC<Recharts.DotProps & { color: string }> = ({\n  cx,\n  cy,\n  color,\n}) => {\n  if (cx === undefined || cy === undefined) return null;\n\n  return (\n    <svg\n      x={cx - 7}\n      y={cy - 7}\n      width={14}\n      height={14}\n      viewBox=\"0 0 14 14\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <circle cx=\"7\" cy=\"7\" r=\"7\" fill=\"white\" />\n      <circle cx=\"7\" cy=\"7\" r=\"4\" stroke={color} strokeWidth=\"2\" fill=\"white\" />\n    </svg>\n  );\n};\n"],"names":[],"mappings":";;AAGO,MAAM,UAAqD,CAAC;AAAA,EACjE,EAAA;AAAA,EACA,EAAA;AAAA,EACA;AACF,CAAA,KAAM;AACJ,EAAA,IAAI,EAAA,KAAO,MAAA,IAAa,EAAA,KAAO,MAAA,EAAW,OAAO,IAAA;AAEjD,EAAA,uBACE,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,GAAG,EAAA,GAAK,CAAA;AAAA,MACR,GAAG,EAAA,GAAK,CAAA;AAAA,MACR,KAAA,EAAO,EAAA;AAAA,MACP,MAAA,EAAQ,EAAA;AAAA,MACR,OAAA,EAAQ,WAAA;AAAA,MACR,IAAA,EAAK,MAAA;AAAA,MACL,KAAA,EAAM,4BAAA;AAAA,MAEN,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,QAAA,EAAA,EAAO,IAAG,GAAA,EAAI,EAAA,EAAG,KAAI,CAAA,EAAE,GAAA,EAAI,MAAK,OAAA,EAAQ,CAAA;AAAA,wBACzC,GAAA,CAAC,QAAA,EAAA,EAAO,EAAA,EAAG,GAAA,EAAI,EAAA,EAAG,GAAA,EAAI,CAAA,EAAE,GAAA,EAAI,MAAA,EAAQ,KAAA,EAAO,WAAA,EAAY,GAAA,EAAI,MAAK,OAAA,EAAQ;AAAA;AAAA;AAAA,GAC1E;AAEJ;;;;"}

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

@@ -0,0 +1,21 @@
+"use client"
+/* */
+import { jsx } from 'react/jsx-runtime';
+import * as Recharts from 'recharts';
+import tokens from '../../../../../../design-tokens/dist/variables.json.mjs';
+
+const CartesianGrid = (props) => {
+  const { vertical = false, ...rest } = props;
+  return /* @__PURE__ */ jsx(
+    Recharts.CartesianGrid,
+    {
+      vertical,
+      ...rest,
+      stroke: tokens["cartesian-grid"].color.value,
+      strokeWidth: tokens["cartesian-grid"]["stroke-width"].value
+    }
+  );
+};
+
+export { CartesianGrid };
+//# sourceMappingURL=CartesianGrid.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CartesianGrid.mjs","sources":["../../../../../../../../src/components/CartesianChart/components/CartesianGrid/CartesianGrid.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport * as Recharts from \"recharts\";\nimport tokens from \"@mittwald/flow-design-tokens/variables.json\";\n\nexport type CartesianGridProps = Pick<\n  Recharts.CartesianGridProps,\n  \"className\" | \"vertical\" | \"horizontal\" | \"strokeDasharray\"\n>;\n\n/** @flr-generate all */\nexport const CartesianGrid: FC<CartesianGridProps> = (props) => {\n  const { vertical = false, ...rest } = props;\n\n  return (\n    <Recharts.CartesianGrid\n      vertical={vertical}\n      {...rest}\n      stroke={tokens[\"cartesian-grid\"].color.value}\n      strokeWidth={tokens[\"cartesian-grid\"][\"stroke-width\"].value}\n    />\n  );\n};\n\nexport default CartesianGrid;\n"],"names":[],"mappings":";;;;AAUO,MAAM,aAAA,GAAwC,CAAC,KAAA,KAAU;AAC9D,EAAA,MAAM,EAAE,QAAA,GAAW,KAAA,EAAO,GAAG,MAAK,GAAI,KAAA;AAEtC,EAAA,uBACE,GAAA;AAAA,IAAC,QAAA,CAAS,aAAA;AAAA,IAAT;AAAA,MACC,QAAA;AAAA,MACC,GAAG,IAAA;AAAA,MACJ,MAAA,EAAQ,MAAA,CAAO,gBAAgB,CAAA,CAAE,KAAA,CAAM,KAAA;AAAA,MACvC,WAAA,EAAa,MAAA,CAAO,gBAAgB,CAAA,CAAE,cAAc,CAAA,CAAE;AAAA;AAAA,GACxD;AAEJ;;;;"}

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

@@ -0,0 +1,19 @@
+"use client"
+/* */
+import { jsx } from 'react/jsx-runtime';
+import * as Recharts from 'recharts';
+import LegendContent from './LegendContent.mjs';
+
+const ChartLegend = (props) => {
+  const { formatter, ...rest } = props;
+  return /* @__PURE__ */ jsx(
+    Recharts.Legend,
+    {
+      ...rest,
+      content: /* @__PURE__ */ jsx(LegendContent, { formatter })
+    }
+  );
+};
+
+export { ChartLegend };
+//# sourceMappingURL=ChartLegend.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ChartLegend.mjs","sources":["../../../../../../../../src/components/CartesianChart/components/ChartLegend/ChartLegend.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport * as Recharts from \"recharts\";\nimport LegendContent from \"./LegendContent\";\n\nexport type ChartLegendFormatter = (text: string) => string;\n\nexport interface WithChartLegendFormatters {\n  /**\n   * A formatter function for the texts of the Legend. Can be used for purposes\n   * like translations.\n   */\n  formatter?: ChartLegendFormatter;\n}\n\nexport type ChartLegendProps = Pick<\n  Recharts.LegendProps,\n  \"className\" | \"verticalAlign\"\n> &\n  WithChartLegendFormatters;\n\n/** @flr-generate all */\nexport const ChartLegend: FC<ChartLegendProps> = (props) => {\n  const { formatter, ...rest } = props;\n\n  return (\n    <Recharts.Legend\n      {...rest}\n      content={<LegendContent formatter={formatter} />}\n    />\n  );\n};\n\nexport default ChartLegend;\n"],"names":[],"mappings":";;;;AAqBO,MAAM,WAAA,GAAoC,CAAC,KAAA,KAAU;AAC1D,EAAA,MAAM,EAAE,SAAA,EAAW,GAAG,IAAA,EAAK,GAAI,KAAA;AAE/B,EAAA,uBACE,GAAA;AAAA,IAAC,QAAA,CAAS,MAAA;AAAA,IAAT;AAAA,MACE,GAAG,IAAA;AAAA,MACJ,OAAA,kBAAS,GAAA,CAAC,aAAA,EAAA,EAAc,SAAA,EAAsB;AAAA;AAAA,GAChD;AAEJ;;;;"}

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

@@ -0,0 +1,19 @@
+"use client"
+/* */
+import { jsx } from 'react/jsx-runtime';
+import { Legend } from '../../../Legend/Legend.mjs';
+import { LegendItem } from '../../../Legend/components/LegendItem/LegendItem.mjs';
+
+const LegendContent = (props) => {
+  const { formatter, payload } = props;
+  return /* @__PURE__ */ jsx(Legend, { children: payload?.filter(
+    (entry) => entry.payload && "fill" in entry.payload && entry.payload?.fill !== "none"
+  ).map((entry, index) => {
+    const { payload: payload2, dataKey } = entry;
+    const fill = payload2 && "fill" in payload2 && typeof payload2.fill === "string" ? payload2.fill : void 0;
+    return /* @__PURE__ */ jsx(LegendItem, { color: fill, children: dataKey ? formatter ? formatter(dataKey?.toString()) : dataKey.toString() : "" }, `legendItem-${index}`);
+  }) });
+};
+
+export { LegendContent as default };
+//# sourceMappingURL=LegendContent.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LegendContent.mjs","sources":["../../../../../../../../src/components/CartesianChart/components/ChartLegend/LegendContent.tsx"],"sourcesContent":["import type { Props } from \"recharts/types/component/DefaultLegendContent\";\nimport type { WithChartLegendFormatters } from \"./ChartLegend\";\nimport type { FC } from \"react\";\nimport Legend, { LegendItem } from \"@/components/Legend\";\n\ntype LegendContentType = Omit<Props, \"formatter\"> & WithChartLegendFormatters;\n\nconst LegendContent: FC<LegendContentType> = (props) => {\n  const { formatter, payload } = props;\n\n  return (\n    <Legend>\n      {payload\n        ?.filter(\n          (entry) =>\n            entry.payload &&\n            \"fill\" in entry.payload &&\n            entry.payload?.fill !== \"none\",\n        )\n        .map((entry, index) => {\n          const { payload, dataKey } = entry;\n          const fill =\n            payload && \"fill\" in payload && typeof payload.fill === \"string\"\n              ? payload.fill\n              : undefined;\n\n          return (\n            <LegendItem key={`legendItem-${index}`} color={fill}>\n              {dataKey\n                ? formatter\n                  ? formatter(dataKey?.toString())\n                  : dataKey.toString()\n                : \"\"}\n            </LegendItem>\n          );\n        })}\n    </Legend>\n  );\n};\n\nexport default LegendContent;\n"],"names":["payload"],"mappings":";;;;AAOA,MAAM,aAAA,GAAuC,CAAC,KAAA,KAAU;AACtD,EAAA,MAAM,EAAE,SAAA,EAAW,OAAA,EAAQ,GAAI,KAAA;AAE/B,EAAA,uBACE,GAAA,CAAC,UACE,QAAA,EAAA,OAAA,EACG,MAAA;AAAA,IACA,CAAC,UACC,KAAA,CAAM,OAAA,IACN,UAAU,KAAA,CAAM,OAAA,IAChB,KAAA,CAAM,OAAA,EAAS,IAAA,KAAS;AAAA,GAC5B,CACC,GAAA,CAAI,CAAC,KAAA,EAAO,KAAA,KAAU;AACrB,IAAA,MAAM,EAAE,OAAA,EAAAA,QAAAA,EAAS,OAAA,EAAQ,GAAI,KAAA;AAC7B,IAAA,MAAM,IAAA,GACJA,YAAW,MAAA,IAAUA,QAAAA,IAAW,OAAOA,QAAAA,CAAQ,IAAA,KAAS,QAAA,GACpDA,QAAAA,CAAQ,IAAA,GACR,MAAA;AAEN,IAAA,2BACG,UAAA,EAAA,EAAuC,KAAA,EAAO,IAAA,EAC5C,QAAA,EAAA,OAAA,GACG,YACE,SAAA,CAAU,OAAA,EAAS,QAAA,EAAU,IAC7B,OAAA,CAAQ,QAAA,KACV,EAAA,EAAA,EALW,CAAA,WAAA,EAAc,KAAK,CAAA,CAMpC,CAAA;AAAA,EAEJ,CAAC,CAAA,EACL,CAAA;AAEJ;;;;"}

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

@@ -0,0 +1,40 @@
+"use client"
+/* */
+import { jsx } from 'react/jsx-runtime';
+import { Suspense } from 'react';
+import { Tooltip } from 'recharts';
+import '../../../Text/Text.mjs';
+import clsx from 'clsx';
+import '../../../../lib/tokens/CategoricalColors.mjs';
+import '@mittwald/react-use-promise';
+import { TooltipContent } from './TooltipContent.mjs';
+import styles from './ChartTooltip.module.scss.mjs';
+import LoadingSpinnerView from '../../../../views/LoadingSpinnerView.mjs';
+
+const ChartTooltip = (props) => {
+  const { headingFormatter, formatter, ...rest } = props;
+  return /* @__PURE__ */ jsx(
+    Tooltip,
+    {
+      ...rest,
+      cursor: false,
+      content: (props2) => {
+        if (!props2.active || !props2.payload || props2.payload.length === 0) {
+          return null;
+        }
+        const className = clsx(props2.wrapperClassName, styles.tooltip);
+        return /* @__PURE__ */ jsx("div", { className, children: /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(LoadingSpinnerView, {}), children: /* @__PURE__ */ jsx(
+          TooltipContent,
+          {
+            ...props2,
+            headingFormatter,
+            formatter
+          }
+        ) }) });
+      }
+    }
+  );
+};
+
+export { ChartTooltip };
+//# sourceMappingURL=ChartTooltip.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ChartTooltip.mjs","sources":["../../../../../../../../src/components/CartesianChart/components/ChartTooltip/ChartTooltip.tsx"],"sourcesContent":["import React, { type FC, Suspense } from \"react\";\nimport { Tooltip, type TooltipProps } from \"recharts\";\nimport type {\n  NameType,\n  ValueType,\n} from \"recharts/types/component/DefaultTooltipContent\";\nimport { type TooltipPayloadItem } from \"@/components/CartesianChart/components/ChartTooltip/TooltipLegendItem\";\nimport { TooltipContent } from \"@/components/CartesianChart/components/ChartTooltip/TooltipContent\";\nimport clsx from \"clsx\";\nimport styles from \"./ChartTooltip.module.scss\";\nimport LoadingSpinnerView from \"@/views/LoadingSpinnerView\";\n\nexport type TooltipLineFormatter = (\n  value: TooltipPayloadItem[\"value\"],\n  name: TooltipPayloadItem[\"dataKey\"],\n  index: number,\n  unit?: TooltipPayloadItem[\"unit\"],\n) => Promise<string> | string;\n\nexport type TooltipHeadingFormatter = (\n  title: string | number | undefined,\n) => Promise<string> | string;\n\nexport interface WithTooltipFormatters {\n  /**\n   * A formatter function for the lines in the tooltip. Can be used for purposes\n   * like translations.\n   */\n  formatter?: TooltipLineFormatter;\n  /**\n   * A formatter function for the heading of the tooltip. Can be used for\n   * purposes like translations.\n   */\n  headingFormatter?: TooltipHeadingFormatter;\n}\n\nexport interface ChartTooltipProps\n  extends\n    Pick<\n      TooltipProps<ValueType, NameType>,\n      \"wrapperClassName\" | \"allowEscapeViewBox\"\n    >,\n    WithTooltipFormatters {}\n\n/** @flr-generate all */\nexport const ChartTooltip: FC<ChartTooltipProps> = (props) => {\n  const { headingFormatter, formatter, ...rest } = props;\n\n  return (\n    <Tooltip\n      {...rest}\n      cursor={false}\n      content={(props) => {\n        if (!props.active || !props.payload || props.payload.length === 0) {\n          return null;\n        }\n\n        const className = clsx(props.wrapperClassName, styles.tooltip);\n        return (\n          <div className={className}>\n            <Suspense fallback={<LoadingSpinnerView />}>\n              <TooltipContent\n                {...props}\n                headingFormatter={headingFormatter}\n                formatter={formatter}\n              />\n            </Suspense>\n          </div>\n        );\n      }}\n    />\n  );\n};\n\nexport default ChartTooltip;\n"],"names":["props"],"mappings":";;;;;;;;;;;AA6CO,MAAM,YAAA,GAAsC,CAAC,KAAA,KAAU;AAC5D,EAAA,MAAM,EAAE,gBAAA,EAAkB,SAAA,EAAW,GAAG,MAAK,GAAI,KAAA;AAEjD,EAAA,uBACE,GAAA;AAAA,IAAC,OAAA;AAAA,IAAA;AAAA,MACE,GAAG,IAAA;AAAA,MACJ,MAAA,EAAQ,KAAA;AAAA,MACR,OAAA,EAAS,CAACA,MAAAA,KAAU;AAClB,QAAA,IAAI,CAACA,OAAM,MAAA,IAAU,CAACA,OAAM,OAAA,IAAWA,MAAAA,CAAM,OAAA,CAAQ,MAAA,KAAW,CAAA,EAAG;AACjE,UAAA,OAAO,IAAA;AAAA,QACT;AAEA,QAAA,MAAM,SAAA,GAAY,IAAA,CAAKA,MAAAA,CAAM,gBAAA,EAAkB,OAAO,OAAO,CAAA;AAC7D,QAAA,uBACE,GAAA,CAAC,SAAI,SAAA,EACH,QAAA,kBAAA,GAAA,CAAC,YAAS,QAAA,kBAAU,GAAA,CAAC,sBAAmB,CAAA,EACtC,QAAA,kBAAA,GAAA;AAAA,UAAC,cAAA;AAAA,UAAA;AAAA,YACE,GAAGA,MAAAA;AAAA,YACJ,gBAAA;AAAA,YACA;AAAA;AAAA,WAEJ,CAAA,EACF,CAAA;AAAA,MAEJ;AAAA;AAAA,GACF;AAEJ;;;;"}

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

@@ -0,0 +1,9 @@
+"use client"
+/* */
+const tooltip = "flow--cartesian-chart--chart-tooltip--tooltip";
+const styles = {
+	tooltip: tooltip
+};
+
+export { styles as default, tooltip };
+//# sourceMappingURL=ChartTooltip.module.scss.mjs.map

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

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

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

@@ -0,0 +1,31 @@
+"use client"
+/* */
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { Suspense } from 'react';
+import { usePromise } from '@mittwald/react-use-promise';
+import { Heading } from '../../../Heading/Heading.mjs';
+import { TooltipLegendItem } from './TooltipLegendItem.mjs';
+import SkeletonTextView from '../../../../views/SkeletonTextView.mjs';
+
+const TooltipContent = (props) => {
+  const { headingFormatter, formatter, label, payload } = props;
+  const formattedHeading = usePromise(
+    async (label2, formatter2) => {
+      if (!formatter2) {
+        return label2;
+      }
+      return formatter2(label2);
+    },
+    [label, headingFormatter]
+  );
+  const items = payload.filter((item) => item.fill !== "none").map((item, index) => {
+    return /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(SkeletonTextView, {}), children: /* @__PURE__ */ jsx(TooltipLegendItem, { formatter, item, index }) }, item.dataKey);
+  });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Heading, { level: 4, children: formattedHeading }),
+    items
+  ] });
+};
+
+export { TooltipContent };
+//# sourceMappingURL=TooltipContent.mjs.map