@mittwald/flow-react-components 0.2.0-alpha.661 → 0.2.0-alpha.662

package/dist/js/_virtual/_.locale.json@8d5024994f97657f895a4e2a188d2d8a.mjs

@@ -1,6 +1,7 @@
 "use client"
 /* */
 const locales = {"de-DE": {  "list.filters": `Filter`,
+  "list.filters.all": `Alle Filter`,
   "list.filters.clear": `Filter entfernen`,
   "list.filters.reset": `Filter zurücksetzen`,
   "list.filters.store": `Filter speichern`,
@@ -8,6 +9,8 @@ const locales = {"de-DE": {  "list.filters": `Filter`,
   "list.noResult.text": `Deine Suche ergab keine Ergebnisse. Bitte passe die Suchanfrage oder deine Filter an.`,
   "list.options": `Optionen`,
   "list.paginationInfo": (args) => `${args.visibleItemsCount} von insgesamt ${args.totalItemsCount} angezeigt`,
+  "list.reset": `Zurücksetzen`,
+  "list.results.show": (args, formatter) => `${formatter.select({1: () => `${args.totalItemCount} Ergebnis`, other: () => `${args.totalItemCount} Ergebnisse`}, args.totalItemCount)} anzeigen`,
   "list.search.announce.noResult": (args) => `Keine Treffer für "${args.searchTerm}"`,
   "list.search.announce.result": (args) => `${args.resultCount} Treffer für "${args.searchTerm}"`,
   "list.settings": `Einstellungen`,
@@ -20,6 +23,7 @@ const locales = {"de-DE": {  "list.filters": `Filter`,
   "list.toggleExpandButton.collapse": `Weniger anzeigen`,
   "list.toggleExpandButton.expand": `Mehr anzeigen`,
 },"en-US": {  "list.filters": `Filters`,
+  "list.filters.all": `All filters`,
   "list.filters.clear": `Clear filters`,
   "list.filters.reset": `Reset filters`,
   "list.filters.store": `Store filters`,
@@ -27,6 +31,8 @@ const locales = {"de-DE": {  "list.filters": `Filter`,
   "list.noResult.text": `Your search did not return any results. Please adjust the search query or your filters.`,
   "list.options": `Options`,
   "list.paginationInfo": (args) => `Showing ${args.visibleItemsCount} of ${args.totalItemsCount}`,
+  "list.reset": `Reset`,
+  "list.results.show": (args, formatter) => `Show ${formatter.select({1: () => `${args.totalItemCount} result`, other: () => `${args.totalItemCount} Results`}, args.totalItemCount)}`,
   "list.search.announce.noResult": (args) => `${args.resultCount} matches for "${args.searchTerm}"`,
   "list.search.announce.result": (args) => `No matches for "${args.searchTerm}"`,
   "list.settings": `Settings`,

package/dist/js/_virtual/_.locale.json@8d5024994f97657f895a4e2a188d2d8a.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"_.locale.json@8d5024994f97657f895a4e2a188d2d8a.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"_.locale.json@8d5024994f97657f895a4e2a188d2d8a.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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

@@ -33,8 +33,11 @@ import 'remeda';
 import '@react-aria/utils';
 import 'dot-prop';
 import '../../lib/tokens/CategoricalColors.mjs';
-import '../Heading/Heading.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';
@@ -91,7 +94,6 @@ import 'luxon';
 import '../NumberField/NumberField.mjs';
 import '../Option/Option.mjs';
 import '../../views/OverlayContentView.mjs';
-import '../../views/LoadingSpinnerView.mjs';
 import '../PasswordCreationField/PasswordCreationField.mjs';
 import '../Popover/components/PopoverTrigger/PopoverTrigger.mjs';
 import '../Popover/Popover.mjs';

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":"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"}
+{"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":"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"}

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

@@ -1,31 +1,37 @@
 "use client"
 /* */
 import { jsx } from 'react/jsx-runtime';
-import * as Recharts from 'recharts';
+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 { formatter, headingFormatter, ...rest } = props;
+  const { headingFormatter, formatter, ...rest } = props;
   return /* @__PURE__ */ jsx(
-    Recharts.Tooltip,
+    Tooltip,
     {
       ...rest,
+      cursor: false,
       content: (props2) => {
-        const {
-          formatter: ignoredFormatter,
-          labelFormatter: ignoredLabelFormatter,
-          ...rest2
-        } = props2;
-        return /* @__PURE__ */ jsx(
+        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,
           {
-            formatter,
+            ...props2,
             headingFormatter,
-            ...rest2
+            formatter
           }
-        );
-      },
-      cursor: false
+        ) }) });
+      }
     }
   );
 };

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

@@ -1 +1 @@
-{"version":3,"file":"ChartTooltip.mjs","sources":["../../../../../../../../src/components/CartesianChart/components/ChartTooltip/ChartTooltip.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport * as Recharts from \"recharts\";\nimport type {\n  NameType,\n  ValueType,\n} from \"recharts/types/component/DefaultTooltipContent\";\nimport { TooltipContent } from \"./TooltipContent\";\n\nexport type TooltipLineFormatter = (\n  value: ValueType,\n  name: NameType,\n  index: number,\n  unit?: string | number,\n) => string;\n\nexport type TooltipHeadingFormatter = (\n  title: string | number | undefined,\n) => 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      Recharts.TooltipProps<ValueType, NameType>,\n      \"wrapperClassName\" | \"allowEscapeViewBox\"\n    >,\n    WithTooltipFormatters {}\n\n/** @flr-generate all */\nexport const ChartTooltip: FC<ChartTooltipProps> = (props) => {\n  const { formatter, headingFormatter, ...rest } = props;\n  return (\n    <Recharts.Tooltip\n      {...rest}\n      content={(props) => {\n        const {\n          formatter: ignoredFormatter,\n          labelFormatter: ignoredLabelFormatter,\n          ...rest\n        } = props;\n\n        return (\n          <TooltipContent\n            formatter={formatter}\n            headingFormatter={headingFormatter}\n            {...rest}\n          />\n        );\n      }}\n      cursor={false}\n    />\n  );\n};\n\nexport default ChartTooltip;\n"],"names":["props","rest"],"mappings":";;;;AAyCO,MAAM,YAAA,GAAsC,CAAC,KAAA,KAAU;AAC5D,EAAA,MAAM,EAAE,SAAA,EAAW,gBAAA,EAAkB,GAAG,MAAK,GAAI,KAAA;AACjD,EAAA,uBACE,GAAA;AAAA,IAAC,QAAA,CAAS,OAAA;AAAA,IAAT;AAAA,MACE,GAAG,IAAA;AAAA,MACJ,OAAA,EAAS,CAACA,MAAAA,KAAU;AAClB,QAAA,MAAM;AAAA,UACJ,SAAA,EAAW,gBAAA;AAAA,UACX,cAAA,EAAgB,qBAAA;AAAA,UAChB,GAAGC;AAAA,SACL,GAAID,MAAAA;AAEJ,QAAA,uBACE,GAAA;AAAA,UAAC,cAAA;AAAA,UAAA;AAAA,YACC,SAAA;AAAA,YACA,gBAAA;AAAA,YACC,GAAGC;AAAA;AAAA,SACN;AAAA,MAEJ,CAAA;AAAA,MACA,MAAA,EAAQ;AAAA;AAAA,GACV;AAEJ;;;;"}
+{"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/TooltipContent.mjs

@@ -1,28 +1,30 @@
 "use client"
 /* */
-import { jsxs, jsx } from 'react/jsx-runtime';
-import clsx from 'clsx';
+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 { LegendItem } from '../../../Legend/components/LegendItem/LegendItem.mjs';
-import styles from './ChartTooltip.module.scss.mjs';
+import { TooltipLegendItem } from './TooltipLegendItem.mjs';
+import SkeletonTextView from '../../../../views/SkeletonTextView.mjs';
 
 const TooltipContent = (props) => {
-  const {
-    active,
-    payload,
-    formatter,
-    headingFormatter,
-    label,
-    wrapperClassName
-  } = props;
-  const className = clsx(wrapperClassName, styles.tooltip);
-  if (active && payload && payload.length) {
-    return /* @__PURE__ */ jsxs("div", { className, children: [
-      /* @__PURE__ */ jsx(Heading, { level: 4, children: headingFormatter ? headingFormatter(label) : label }),
-      payload.filter((i) => i.fill !== "none").map((i, index) => /* @__PURE__ */ jsx(LegendItem, { color: i.fill, children: formatter ? formatter(i.value, i.dataKey, index, i.unit) : `${i.dataKey}: ${i.value} ${i.unit ? ` ${i.unit}` : ""}` }, i.dataKey))
-    ] });
-  }
-  return null;
+  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 };

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

@@ -1 +1 @@
-{"version":3,"file":"TooltipContent.mjs","sources":["../../../../../../../../src/components/CartesianChart/components/ChartTooltip/TooltipContent.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport Heading from \"@/components/Heading\";\nimport { LegendItem } from \"@/components/Legend/components/LegendItem\";\nimport type * as Recharts from \"recharts\";\nimport type {\n  NameType,\n  ValueType,\n} from \"recharts/types/component/DefaultTooltipContent\";\nimport type { WithTooltipFormatters } from \"./ChartTooltip\";\nimport styles from \"./ChartTooltip.module.scss\";\n\ninterface TooltipContentProps\n  extends\n    Pick<\n      Recharts.TooltipContentProps<ValueType, NameType>,\n      \"active\" | \"payload\" | \"label\" | \"wrapperClassName\"\n    >,\n    WithTooltipFormatters {}\n\nexport const TooltipContent = (props: TooltipContentProps) => {\n  const {\n    active,\n    payload,\n    formatter,\n    headingFormatter,\n    label,\n    wrapperClassName,\n  } = props;\n  const className = clsx(wrapperClassName, styles.tooltip);\n\n  if (active && payload && payload.length) {\n    return (\n      <div className={className}>\n        <Heading level={4}>\n          {headingFormatter ? headingFormatter(label) : label}\n        </Heading>\n        {payload\n          .filter((i) => i.fill !== \"none\")\n          .map((i, index) => (\n            <LegendItem color={i.fill} key={i.dataKey}>\n              {formatter\n                ? formatter(i.value, i.dataKey, index, i.unit)\n                : `${i.dataKey}: ${i.value} ${i.unit ? ` ${i.unit}` : \"\"}`}\n            </LegendItem>\n          ))}\n      </div>\n    );\n  }\n\n  return null;\n};\n"],"names":[],"mappings":";;;;;;AAmBO,MAAM,cAAA,GAAiB,CAAC,KAAA,KAA+B;AAC5D,EAAA,MAAM;AAAA,IACJ,MAAA;AAAA,IACA,OAAA;AAAA,IACA,SAAA;AAAA,IACA,gBAAA;AAAA,IACA,KAAA;AAAA,IACA;AAAA,GACF,GAAI,KAAA;AACJ,EAAA,MAAM,SAAA,GAAY,IAAA,CAAK,gBAAA,EAAkB,MAAA,CAAO,OAAO,CAAA;AAEvD,EAAA,IAAI,MAAA,IAAU,OAAA,IAAW,OAAA,CAAQ,MAAA,EAAQ;AACvC,IAAA,uBACE,IAAA,CAAC,SAAI,SAAA,EACH,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,WAAQ,KAAA,EAAO,CAAA,EACb,6BAAmB,gBAAA,CAAiB,KAAK,IAAI,KAAA,EAChD,CAAA;AAAA,MACC,OAAA,CACE,OAAO,CAAC,CAAA,KAAM,EAAE,IAAA,KAAS,MAAM,EAC/B,GAAA,CAAI,CAAC,GAAG,KAAA,qBACP,GAAA,CAAC,cAAW,KAAA,EAAO,CAAA,CAAE,MAClB,QAAA,EAAA,SAAA,GACG,SAAA,CAAU,EAAE,KAAA,EAAO,CAAA,CAAE,SAAS,KAAA,EAAO,CAAA,CAAE,IAAI,CAAA,GAC3C,CAAA,EAAG,EAAE,OAAO,CAAA,EAAA,EAAK,EAAE,KAAK,CAAA,CAAA,EAAI,EAAE,IAAA,GAAO,CAAA,CAAA,EAAI,EAAE,IAAI,CAAA,CAAA,GAAK,EAAE,CAAA,CAAA,EAAA,EAH5B,CAAA,CAAE,OAIlC,CACD;AAAA,KAAA,EACL,CAAA;AAAA,EAEJ;AAEA,EAAA,OAAO,IAAA;AACT;;;;"}
+{"version":3,"file":"TooltipContent.mjs","sources":["../../../../../../../../src/components/CartesianChart/components/ChartTooltip/TooltipContent.tsx"],"sourcesContent":["import React, { type FC, Suspense } from \"react\";\nimport type { TooltipContentProps } from \"recharts\";\nimport type {\n  NameType,\n  ValueType,\n} from \"recharts/types/component/DefaultTooltipContent\";\nimport { usePromise } from \"@mittwald/react-use-promise\";\nimport Heading from \"@/components/Heading\";\nimport type { WithTooltipFormatters } from \"@/components/CartesianChart\";\nimport { TooltipLegendItem } from \"@/components/CartesianChart/components/ChartTooltip/TooltipLegendItem\";\nimport SkeletonTextView from \"@/views/SkeletonTextView\";\n\n/** @internal */\nexport const TooltipContent: FC<\n  WithTooltipFormatters &\n    Omit<TooltipContentProps<ValueType, NameType>, \"formatter\">\n> = (props) => {\n  const { headingFormatter, formatter, label, payload } = props;\n\n  const formattedHeading = usePromise(\n    async (label, formatter) => {\n      if (!formatter) {\n        return label;\n      }\n\n      return formatter(label);\n    },\n    [label, headingFormatter] as const,\n  );\n\n  const items = payload\n    .filter((item) => item.fill !== \"none\")\n    .map((item, index) => {\n      return (\n        <Suspense key={item.dataKey} fallback={<SkeletonTextView />}>\n          <TooltipLegendItem formatter={formatter} item={item} index={index} />\n        </Suspense>\n      );\n    });\n\n  return (\n    <>\n      <Heading level={4}>{formattedHeading}</Heading>\n      {items}\n    </>\n  );\n};\n"],"names":["label","formatter"],"mappings":";;;;;;;AAaO,MAAM,cAAA,GAGT,CAAC,KAAA,KAAU;AACb,EAAA,MAAM,EAAE,gBAAA,EAAkB,SAAA,EAAW,KAAA,EAAO,SAAQ,GAAI,KAAA;AAExD,EAAA,MAAM,gBAAA,GAAmB,UAAA;AAAA,IACvB,OAAOA,QAAOC,UAAAA,KAAc;AAC1B,MAAA,IAAI,CAACA,UAAAA,EAAW;AACd,QAAA,OAAOD,MAAAA;AAAA,MACT;AAEA,MAAA,OAAOC,WAAUD,MAAK,CAAA;AAAA,IACxB,CAAA;AAAA,IACA,CAAC,OAAO,gBAAgB;AAAA,GAC1B;AAEA,EAAA,MAAM,KAAA,GAAQ,OAAA,CACX,MAAA,CAAO,CAAC,IAAA,KAAS,IAAA,CAAK,IAAA,KAAS,MAAM,CAAA,CACrC,GAAA,CAAI,CAAC,IAAA,EAAM,KAAA,KAAU;AACpB,IAAA,uBACE,GAAA,CAAC,QAAA,EAAA,EAA4B,QAAA,kBAAU,GAAA,CAAC,gBAAA,EAAA,EAAiB,CAAA,EACvD,QAAA,kBAAA,GAAA,CAAC,iBAAA,EAAA,EAAkB,SAAA,EAAsB,IAAA,EAAY,KAAA,EAAc,CAAA,EAAA,EADtD,KAAK,OAEpB,CAAA;AAAA,EAEJ,CAAC,CAAA;AAEH,EAAA,uBACE,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,OAAA,EAAA,EAAQ,KAAA,EAAO,CAAA,EAAI,QAAA,EAAA,gBAAA,EAAiB,CAAA;AAAA,IACpC;AAAA,GAAA,EACH,CAAA;AAEJ;;;;"}

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

@@ -0,0 +1,26 @@
+"use client"
+/* */
+import { jsx } from 'react/jsx-runtime';
+import { LegendItem } from '../../../Legend/components/LegendItem/LegendItem.mjs';
+import { usePromise } from '@mittwald/react-use-promise';
+
+const TooltipLegendItem = ({
+  formatter,
+  item,
+  index
+}) => {
+  const { value, dataKey, unit, fill } = item;
+  const formattedLabel = usePromise(
+    async (value2, dataKey2, index2, unit2, formatter2) => {
+      if (!formatter2) {
+        return `${dataKey2}: ${value2}${unit2 ? ` ${unit2}` : ""}`;
+      }
+      return formatter2(value2, dataKey2, index2, unit2);
+    },
+    [value, dataKey, index, unit, formatter]
+  );
+  return /* @__PURE__ */ jsx(LegendItem, { color: fill, children: formattedLabel });
+};
+
+export { TooltipLegendItem };
+//# sourceMappingURL=TooltipLegendItem.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TooltipLegendItem.mjs","sources":["../../../../../../../../src/components/CartesianChart/components/ChartTooltip/TooltipLegendItem.tsx"],"sourcesContent":["import { LegendItem } from \"@/components/Legend/components/LegendItem\";\nimport type { WithTooltipFormatters } from \"./ChartTooltip\";\nimport type { FC } from \"react\";\nimport type { DefaultTooltipContentProps } from \"recharts\";\nimport type {\n  NameType,\n  ValueType,\n} from \"recharts/types/component/DefaultTooltipContent\";\nimport { usePromise } from \"@mittwald/react-use-promise\";\n\n/** @internal */\nexport type TooltipPayloadItem = NonNullable<\n  DefaultTooltipContentProps<ValueType, NameType>[\"payload\"]\n>[number];\n\n/** @internal */\ninterface LegendItemLabelProps extends Pick<\n  WithTooltipFormatters,\n  \"formatter\"\n> {\n  item: TooltipPayloadItem;\n  index: number;\n}\n\n/** @internal */\nexport const TooltipLegendItem: FC<LegendItemLabelProps> = ({\n  formatter,\n  item,\n  index,\n}) => {\n  const { value, dataKey, unit, fill } = item;\n\n  const formattedLabel = usePromise(\n    async (value, dataKey, index, unit, formatter) => {\n      if (!formatter) {\n        return `${dataKey}: ${value}${unit ? ` ${unit}` : \"\"}`;\n      }\n\n      return formatter(value, dataKey, index, unit);\n    },\n    [value, dataKey, index, unit, formatter] as const,\n  );\n\n  return <LegendItem color={fill}>{formattedLabel}</LegendItem>;\n};\n"],"names":["value","dataKey","index","unit","formatter"],"mappings":";;;;AAyBO,MAAM,oBAA8C,CAAC;AAAA,EAC1D,SAAA;AAAA,EACA,IAAA;AAAA,EACA;AACF,CAAA,KAAM;AACJ,EAAA,MAAM,EAAE,KAAA,EAAO,OAAA,EAAS,IAAA,EAAM,MAAK,GAAI,IAAA;AAEvC,EAAA,MAAM,cAAA,GAAiB,UAAA;AAAA,IACrB,OAAOA,MAAAA,EAAOC,QAAAA,EAASC,MAAAA,EAAOC,OAAMC,UAAAA,KAAc;AAChD,MAAA,IAAI,CAACA,UAAAA,EAAW;AACd,QAAA,OAAO,CAAA,EAAGH,QAAO,CAAA,EAAA,EAAKD,MAAK,GAAGG,KAAAA,GAAO,CAAA,CAAA,EAAIA,KAAI,CAAA,CAAA,GAAK,EAAE,CAAA,CAAA;AAAA,MACtD;AAEA,MAAA,OAAOC,UAAAA,CAAUJ,MAAAA,EAAOC,QAAAA,EAASC,MAAAA,EAAOC,KAAI,CAAA;AAAA,IAC9C,CAAA;AAAA,IACA,CAAC,KAAA,EAAO,OAAA,EAAS,KAAA,EAAO,MAAM,SAAS;AAAA,GACzC;AAEA,EAAA,uBAAO,GAAA,CAAC,UAAA,EAAA,EAAW,KAAA,EAAO,IAAA,EAAO,QAAA,EAAA,cAAA,EAAe,CAAA;AAClD;;;;"}

package/dist/js/components/src/components/List/components/Header/Header.mjs

@@ -7,12 +7,12 @@ import clsx from 'clsx';
 import { ActiveFilters } from './components/ActiveFilters/ActiveFilters.mjs';
 import { useList } from '../../hooks/useList.mjs';
 import { SearchField } from './components/SearchField/SearchField.mjs';
-import { ViewModeMenu } from './components/Settings/ViewModeMenu.mjs';
+import { ViewModeContextMenu } from './components/ViewModeContextMenu/ViewModeContextMenu.mjs';
 import { TunnelExit } from '@mittwald/react-tunnel';
 import DivView from '../../../../views/DivView.mjs';
-import { SortingMenu } from './components/Settings/SortingMenu.mjs';
-import { FilterMenuList } from './components/Filters/FilterMenuList.mjs';
-import { CombinedFilterMenu } from './components/Filters/CombinedFilterMenu.mjs';
+import { SortingContextMenu } from './components/SortingContextMenu/SortingContextMenu.mjs';
+import { FilterContextMenus } from './components/FilterContextMenu/FilterContextMenus.mjs';
+import { AllFiltersModal } from './components/AllFiltersModal/AllFiltersModal.mjs';
 import { useAvailableViewModes } from './lib.mjs';
 
 const Header = (props) => {
@@ -32,10 +32,10 @@ const Header = (props) => {
         /* @__PURE__ */ jsxs(DivView, { className: headerStyles.headerContent, children: [
           /* @__PURE__ */ jsx(TunnelExit, { id: "actions" }),
           hasOptions && /* @__PURE__ */ jsxs(DivView, { className: headerStyles.options, children: [
-            /* @__PURE__ */ jsx(ViewModeMenu, {}),
-            /* @__PURE__ */ jsx(SortingMenu, {}),
-            /* @__PURE__ */ jsx(FilterMenuList, {}),
-            /* @__PURE__ */ jsx(CombinedFilterMenu, {}),
+            /* @__PURE__ */ jsx(ViewModeContextMenu, {}),
+            /* @__PURE__ */ jsx(SortingContextMenu, {}),
+            /* @__PURE__ */ jsx(FilterContextMenus, {}),
+            /* @__PURE__ */ jsx(AllFiltersModal, {}),
             list.search && /* @__PURE__ */ jsx(SearchField, { search: list.search })
           ] })
         ] }),

package/dist/js/components/src/components/List/components/Header/Header.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Header.mjs","sources":["../../../../../../../../src/components/List/components/Header/Header.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport React from \"react\";\nimport styles from \"./Header.module.css\";\nimport clsx from \"clsx\";\nimport { ActiveFilters } from \"@/components/List/components/Header/components/ActiveFilters\";\nimport { useList } from \"@/components/List/hooks/useList\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport { SearchField } from \"@/components/List/components/Header/components/SearchField/SearchField\";\nimport { ViewModeMenu } from \"@/components/List/components/Header/components/Settings/ViewModeMenu\";\nimport { TunnelExit } from \"@mittwald/react-tunnel\";\nimport DivView from \"@/views/DivView\";\nimport { SortingMenu } from \"@/components/List/components/Header/components/Settings/SortingMenu\";\nimport { FilterMenuList } from \"@/components/List/components/Header/components/Filters/FilterMenuList\";\nimport { CombinedFilterMenu } from \"@/components/List/components/Header/components/Filters/CombinedFilterMenu\";\nimport { useAvailableViewModes } from \"@/components/List/components/Header/lib\";\n\nexport const Header: FC<PropsWithClassName> = (props) => {\n  const { className } = props;\n  const list = useList();\n\n  const availableViewModes = useAvailableViewModes();\n\n  const hasOptions =\n    list.filters.length > 0 ||\n    list.visibleSorting.length > 0 ||\n    list.search ||\n    availableViewModes.length > 1;\n\n  return (\n    <DivView\n      className={clsx(\n        className,\n        styles.header,\n        list.search && styles.withSearch,\n      )}\n    >\n      <DivView className={styles.headerContent}>\n        <TunnelExit id=\"actions\" />\n        {hasOptions && (\n          <DivView className={styles.options}>\n            {/* Desktop */}\n            <ViewModeMenu />\n            <SortingMenu />\n            <FilterMenuList />\n\n            {/* Mobile */}\n            <CombinedFilterMenu />\n\n            {list.search && <SearchField search={list.search} />}\n          </DivView>\n        )}\n      </DivView>\n      <ActiveFilters />\n    </DivView>\n  );\n};\n\nexport default Header;\n"],"names":["styles"],"mappings":";;;;;;;;;;;;;;;AAgBO,MAAM,MAAA,GAAiC,CAAC,KAAA,KAAU;AACvD,EAAA,MAAM,EAAE,WAAU,GAAI,KAAA;AACtB,EAAA,MAAM,OAAO,OAAA,EAAQ;AAErB,EAAA,MAAM,qBAAqB,qBAAA,EAAsB;AAEjD,EAAA,MAAM,UAAA,GACJ,IAAA,CAAK,OAAA,CAAQ,MAAA,GAAS,CAAA,IACtB,IAAA,CAAK,cAAA,CAAe,MAAA,GAAS,CAAA,IAC7B,IAAA,CAAK,MAAA,IACL,kBAAA,CAAmB,MAAA,GAAS,CAAA;AAE9B,EAAA,uBACE,IAAA;AAAA,IAAC,OAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,IAAA;AAAA,QACT,SAAA;AAAA,QACAA,YAAA,CAAO,MAAA;AAAA,QACP,IAAA,CAAK,UAAUA,YAAA,CAAO;AAAA,OACxB;AAAA,MAEA,QAAA,EAAA;AAAA,wBAAA,IAAA,CAAC,OAAA,EAAA,EAAQ,SAAA,EAAWA,YAAA,CAAO,aAAA,EACzB,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,UAAA,EAAA,EAAW,IAAG,SAAA,EAAU,CAAA;AAAA,UACxB,UAAA,oBACC,IAAA,CAAC,OAAA,EAAA,EAAQ,SAAA,EAAWA,aAAO,OAAA,EAEzB,QAAA,EAAA;AAAA,4BAAA,GAAA,CAAC,YAAA,EAAA,EAAa,CAAA;AAAA,gCACb,WAAA,EAAA,EAAY,CAAA;AAAA,gCACZ,cAAA,EAAA,EAAe,CAAA;AAAA,gCAGf,kBAAA,EAAA,EAAmB,CAAA;AAAA,YAEnB,KAAK,MAAA,oBAAU,GAAA,CAAC,WAAA,EAAA,EAAY,MAAA,EAAQ,KAAK,MAAA,EAAQ;AAAA,WAAA,EACpD;AAAA,SAAA,EAEJ,CAAA;AAAA,4BACC,aAAA,EAAA,EAAc;AAAA;AAAA;AAAA,GACjB;AAEJ;;;;"}
+{"version":3,"file":"Header.mjs","sources":["../../../../../../../../src/components/List/components/Header/Header.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport React from \"react\";\nimport styles from \"./Header.module.css\";\nimport clsx from \"clsx\";\nimport { ActiveFilters } from \"@/components/List/components/Header/components/ActiveFilters\";\nimport { useList } from \"@/components/List/hooks/useList\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport { SearchField } from \"@/components/List/components/Header/components/SearchField/SearchField\";\nimport { ViewModeContextMenu } from \"@/components/List/components/Header/components/ViewModeContextMenu/ViewModeContextMenu\";\nimport { TunnelExit } from \"@mittwald/react-tunnel\";\nimport DivView from \"@/views/DivView\";\nimport { SortingContextMenu } from \"@/components/List/components/Header/components/SortingContextMenu/SortingContextMenu\";\nimport { FilterContextMenus } from \"@/components/List/components/Header/components/FilterContextMenu/FilterContextMenus\";\nimport { AllFiltersModal } from \"@/components/List/components/Header/components/AllFiltersModal/AllFiltersModal\";\nimport { useAvailableViewModes } from \"@/components/List/components/Header/lib\";\n\nexport const Header: FC<PropsWithClassName> = (props) => {\n  const { className } = props;\n  const list = useList();\n\n  const availableViewModes = useAvailableViewModes();\n\n  const hasOptions =\n    list.filters.length > 0 ||\n    list.visibleSorting.length > 0 ||\n    list.search ||\n    availableViewModes.length > 1;\n\n  return (\n    <DivView\n      className={clsx(\n        className,\n        styles.header,\n        list.search && styles.withSearch,\n      )}\n    >\n      <DivView className={styles.headerContent}>\n        <TunnelExit id=\"actions\" />\n        {hasOptions && (\n          <DivView className={styles.options}>\n            <ViewModeContextMenu />\n            <SortingContextMenu />\n            <FilterContextMenus />\n            <AllFiltersModal />\n\n            {list.search && <SearchField search={list.search} />}\n          </DivView>\n        )}\n      </DivView>\n      <ActiveFilters />\n    </DivView>\n  );\n};\n\nexport default Header;\n"],"names":["styles"],"mappings":";;;;;;;;;;;;;;;AAgBO,MAAM,MAAA,GAAiC,CAAC,KAAA,KAAU;AACvD,EAAA,MAAM,EAAE,WAAU,GAAI,KAAA;AACtB,EAAA,MAAM,OAAO,OAAA,EAAQ;AAErB,EAAA,MAAM,qBAAqB,qBAAA,EAAsB;AAEjD,EAAA,MAAM,UAAA,GACJ,IAAA,CAAK,OAAA,CAAQ,MAAA,GAAS,CAAA,IACtB,IAAA,CAAK,cAAA,CAAe,MAAA,GAAS,CAAA,IAC7B,IAAA,CAAK,MAAA,IACL,kBAAA,CAAmB,MAAA,GAAS,CAAA;AAE9B,EAAA,uBACE,IAAA;AAAA,IAAC,OAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,IAAA;AAAA,QACT,SAAA;AAAA,QACAA,YAAA,CAAO,MAAA;AAAA,QACP,IAAA,CAAK,UAAUA,YAAA,CAAO;AAAA,OACxB;AAAA,MAEA,QAAA,EAAA;AAAA,wBAAA,IAAA,CAAC,OAAA,EAAA,EAAQ,SAAA,EAAWA,YAAA,CAAO,aAAA,EACzB,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,UAAA,EAAA,EAAW,IAAG,SAAA,EAAU,CAAA;AAAA,UACxB,UAAA,oBACC,IAAA,CAAC,OAAA,EAAA,EAAQ,SAAA,EAAWA,aAAO,OAAA,EACzB,QAAA,EAAA;AAAA,4BAAA,GAAA,CAAC,mBAAA,EAAA,EAAoB,CAAA;AAAA,gCACpB,kBAAA,EAAA,EAAmB,CAAA;AAAA,gCACnB,kBAAA,EAAA,EAAmB,CAAA;AAAA,gCACnB,eAAA,EAAA,EAAgB,CAAA;AAAA,YAEhB,KAAK,MAAA,oBAAU,GAAA,CAAC,WAAA,EAAA,EAAY,MAAA,EAAQ,KAAK,MAAA,EAAQ;AAAA,WAAA,EACpD;AAAA,SAAA,EAEJ,CAAA;AAAA,4BACC,aAAA,EAAA,EAAc;AAAA;AAAA;AAAA,GACjB;AAEJ;;;;"}

package/dist/js/components/src/components/List/components/Header/Header.module.css.mjs

@@ -5,8 +5,8 @@ const headerContent = "flow--list--header--header-content";
 const actions = "flow--list--header--actions";
 const options = "flow--list--header--options";
 const withSearch = "flow--list--header--with-search";
-const mobile = "flow--list--header--mobile";
-const desktop = "flow--list--header--desktop";
+const hideOnDesktop = "flow--list--header--hide-on-desktop";
+const hideOnMobile = "flow--list--header--hide-on-mobile";
 const action = "flow--list--header--action";
 const headerStyles = {
 	header: header,
@@ -14,10 +14,10 @@ const headerStyles = {
 	actions: actions,
 	options: options,
 	withSearch: withSearch,
-	mobile: mobile,
-	desktop: desktop,
+	hideOnDesktop: hideOnDesktop,
+	hideOnMobile: hideOnMobile,
 	action: action
 };
 
-export { action, actions, headerStyles as default, desktop, header, headerContent, mobile, options, withSearch };
+export { action, actions, headerStyles as default, header, headerContent, hideOnDesktop, hideOnMobile, options, withSearch };
 //# sourceMappingURL=Header.module.css.mjs.map

package/dist/js/components/src/components/List/components/Header/components/AllFiltersModal/AllFiltersModal.mjs

@@ -0,0 +1,114 @@
+"use client"
+/* */
+import { jsx, jsxs } from 'react/jsx-runtime';
+import 'react';
+import '@tabler/icons-react';
+import '../../../../../Icon/Icon.mjs';
+import '../../../../../../views/IconView.mjs';
+import { IconFilter } from '../../../../../Icon/components/icons/IconFilter.mjs';
+import ButtonView from '../../../../../../views/ButtonView.mjs';
+import 'invariant';
+import 'react-aria-components';
+import '../../../../../IllustratedMessage/IllustratedMessage.mjs';
+import '../../../../../Heading/Heading.mjs';
+import '../../../../../Text/Text.mjs';
+import locales from '../../../../../../../../_virtual/_.locale.json@8d5024994f97657f895a4e2a188d2d8a.mjs';
+import { useLocalizedStringFormatter } from 'react-aria';
+import clsx from 'clsx';
+import '@mittwald/react-tunnel';
+import '../../../../../../views/ListItemViewContentView.mjs';
+import '../../../../../../lib/propsContext/propsContext.mjs';
+import '../../../../../../lib/propsContext/components/PropsContextProvider.mjs';
+import '../../../../../../views/ContextMenuTriggerView.mjs';
+import '../../../../../ColumnLayout/ColumnLayout.mjs';
+import '../../../ListSummary/ListSummary.mjs';
+import { useList } from '../../../../hooks/useList.mjs';
+import '../../../../listContext.mjs';
+import 'mobx';
+import '../../../../List.mjs';
+import headerStyles from '../../Header.module.css.mjs';
+import ContentView from '../../../../../../views/ContentView.mjs';
+import SectionView from '../../../../../../views/SectionView.mjs';
+import { FilterAccordion } from './FilterAccordion.mjs';
+import { ViewModeAccordion } from './ViewModeAccordion.mjs';
+import TextView from '../../../../../../views/TextView.mjs';
+import { SortingAccordion } from './SortingAccordion.mjs';
+import ActionGroupView from '../../../../../../views/ActionGroupView.mjs';
+import { useOverlayController } from '../../../../../../lib/controller/overlay/useOverlayController.mjs';
+import HeadingView from '../../../../../../views/HeadingView.mjs';
+import { ModalTrigger } from '../../../../../Modal/components/ModalTrigger/ModalTrigger.mjs';
+import { Modal } from '../../../../../Modal/Modal.mjs';
+import { SkeletonText } from '../../../../../SkeletonText/SkeletonText.mjs';
+
+const AllFiltersModal = () => {
+  const list = useList();
+  const stringFormatter = useLocalizedStringFormatter(locales);
+  const isInitiallyLoading = list.loader.useIsInitiallyLoading();
+  const totalItemCount = list.batches.getTotalItemsCount() ?? list.items.entries.length;
+  const filterAccordions = list.filters.map((f) => /* @__PURE__ */ jsx(FilterAccordion, { filter: f }, f.name));
+  const accordions = [
+    /* @__PURE__ */ jsx(ViewModeAccordion, {}, "viewMode"),
+    /* @__PURE__ */ jsx(SortingAccordion, {}, "sorting"),
+    ...filterAccordions
+  ].filter(Boolean);
+  const hasSecondaryFilters = list.filters.some(
+    (f) => f.priority === "secondary"
+  );
+  const controller = useOverlayController("Modal");
+  if (accordions.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs(ModalTrigger, { controller, children: [
+    /* @__PURE__ */ jsxs(
+      ButtonView,
+      {
+        className: clsx(
+          headerStyles.hideOnMobile,
+          hasSecondaryFilters ? void 0 : headerStyles.hideOnDesktop
+        ),
+        variant: "outline",
+        color: "secondary",
+        children: [
+          /* @__PURE__ */ jsx(TextView, { children: stringFormatter.format("list.filters.all") }),
+          /* @__PURE__ */ jsx(IconFilter, {})
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      ButtonView,
+      {
+        className: headerStyles.hideOnDesktop,
+        variant: "outline",
+        color: "secondary",
+        "aria-label": stringFormatter.format("list.filters.all"),
+        children: /* @__PURE__ */ jsx(IconFilter, {})
+      }
+    ),
+    /* @__PURE__ */ jsxs(Modal, { offCanvas: true, controller, children: [
+      /* @__PURE__ */ jsx(HeadingView, { children: stringFormatter.format("list.filters.all") }),
+      /* @__PURE__ */ jsx(ContentView, { children: /* @__PURE__ */ jsxs(SectionView, { children: [
+        ...accordions
+      ] }) }),
+      /* @__PURE__ */ jsxs(ActionGroupView, { children: [
+        /* @__PURE__ */ jsx(ButtonView, { onPress: () => controller.close(), children: /* @__PURE__ */ jsx(TextView, { children: isInitiallyLoading ? /* @__PURE__ */ jsx(SkeletonText, { width: "16ch" }) : stringFormatter.format("list.results.show", {
+          totalItemCount
+        }) }) }),
+        /* @__PURE__ */ jsx(
+          ButtonView,
+          {
+            color: "secondary",
+            variant: "soft",
+            onPress: () => {
+              list.resetFilters();
+              controller.close();
+            },
+            children: stringFormatter.format("list.reset")
+          }
+        )
+      ] })
+    ] })
+  ] });
+};
+
+export { AllFiltersModal };
+//# sourceMappingURL=AllFiltersModal.mjs.map

package/dist/js/components/src/components/List/components/Header/components/AllFiltersModal/AllFiltersModal.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"AllFiltersModal.mjs","sources":["../../../../../../../../../../src/components/List/components/Header/components/AllFiltersModal/AllFiltersModal.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport React from \"react\";\nimport { IconFilter } from \"@/components/Icon/components/icons\";\nimport ButtonView from \"@/views/ButtonView\";\nimport { useList } from \"@/components/List\";\nimport styles from \"@/components/List/components/Header/Header.module.css\";\nimport { useLocalizedStringFormatter } from \"react-aria\";\nimport locales from \"../../../../locales/*.locale.json\";\nimport ContentView from \"@/views/ContentView\";\nimport SectionView from \"@/views/SectionView\";\nimport { FilterAccordion } from \"@/components/List/components/Header/components/AllFiltersModal/FilterAccordion\";\nimport { ViewModeAccordion } from \"@/components/List/components/Header/components/AllFiltersModal/ViewModeAccordion\";\nimport TextView from \"@/views/TextView\";\nimport { SortingAccordion } from \"@/components/List/components/Header/components/AllFiltersModal/SortingAccordion\";\nimport ActionGroupView from \"@/views/ActionGroupView\";\nimport { useOverlayController } from \"@/lib/controller\";\nimport HeadingView from \"@/views/HeadingView\";\nimport clsx from \"clsx\";\nimport Modal, { ModalTrigger } from \"@/components/Modal\";\nimport { SkeletonText } from \"@/components/SkeletonText\";\n\nexport const AllFiltersModal: FC = () => {\n  const list = useList();\n  const stringFormatter = useLocalizedStringFormatter(locales);\n\n  const isInitiallyLoading = list.loader.useIsInitiallyLoading();\n  const totalItemCount =\n    list.batches.getTotalItemsCount() ?? list.items.entries.length;\n\n  const filterAccordions = list.filters.map((f) => (\n    <FilterAccordion filter={f} key={f.name} />\n  ));\n\n  const accordions = [\n    <ViewModeAccordion key=\"viewMode\" />,\n    <SortingAccordion key=\"sorting\" />,\n    ...filterAccordions,\n  ].filter(Boolean);\n\n  const hasSecondaryFilters = list.filters.some(\n    (f) => f.priority === \"secondary\",\n  );\n\n  const controller = useOverlayController(\"Modal\");\n\n  if (accordions.length === 0) {\n    return null;\n  }\n\n  return (\n    <ModalTrigger controller={controller}>\n      <ButtonView\n        className={clsx(\n          styles.hideOnMobile,\n          hasSecondaryFilters ? undefined : styles.hideOnDesktop,\n        )}\n        variant=\"outline\"\n        color=\"secondary\"\n      >\n        <TextView>{stringFormatter.format(\"list.filters.all\")}</TextView>\n        <IconFilter />\n      </ButtonView>\n\n      <ButtonView\n        className={styles.hideOnDesktop}\n        variant=\"outline\"\n        color=\"secondary\"\n        aria-label={stringFormatter.format(\"list.filters.all\")}\n      >\n        <IconFilter />\n      </ButtonView>\n\n      <Modal offCanvas controller={controller}>\n        <HeadingView>{stringFormatter.format(\"list.filters.all\")}</HeadingView>\n        <ContentView>\n          <SectionView>{...accordions}</SectionView>\n        </ContentView>\n\n        <ActionGroupView>\n          <ButtonView onPress={() => controller.close()}>\n            <TextView>\n              {isInitiallyLoading ? (\n                <SkeletonText width=\"16ch\" />\n              ) : (\n                stringFormatter.format(\"list.results.show\", {\n                  totalItemCount,\n                })\n              )}\n            </TextView>\n          </ButtonView>\n          <ButtonView\n            color=\"secondary\"\n            variant=\"soft\"\n            onPress={() => {\n              list.resetFilters();\n              controller.close();\n            }}\n          >\n            {stringFormatter.format(\"list.reset\")}\n          </ButtonView>\n        </ActionGroupView>\n      </Modal>\n    </ModalTrigger>\n  );\n};\n"],"names":["styles"],"mappings":"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"}

package/dist/js/components/src/components/List/components/Header/components/AllFiltersModal/FilterAccordion.mjs

@@ -0,0 +1,26 @@
+"use client"
+/* */
+import { jsxs, jsx } from 'react/jsx-runtime';
+import 'react';
+import AccordionView from '../../../../../../views/AccordionView.mjs';
+import HeadingView from '../../../../../../views/HeadingView.mjs';
+import ContentView from '../../../../../../views/ContentView.mjs';
+import RadioGroupView from '../../../../../../views/RadioGroupView.mjs';
+import RadioView from '../../../../../../views/RadioView.mjs';
+import CheckboxGroupView from '../../../../../../views/CheckboxGroupView.mjs';
+import CheckboxView from '../../../../../../views/CheckboxView.mjs';
+
+const FilterAccordion = (props) => {
+  const { filter } = props;
+  const activeKeys = filter.values.filter((v) => v.isActive).map((v) => v.id);
+  return /* @__PURE__ */ jsxs(AccordionView, { children: [
+    /* @__PURE__ */ jsx(HeadingView, { children: filter.name ?? filter.property }),
+    /* @__PURE__ */ jsxs(ContentView, { children: [
+      filter.mode === "one" && /* @__PURE__ */ jsx(RadioGroupView, { value: activeKeys[0], m: [1, 1], children: filter.values.map((v) => /* @__PURE__ */ jsx(RadioView, { value: v.id, onPress: () => v.toggle(), children: v.render() }, v.id)) }),
+      filter.mode !== "one" && /* @__PURE__ */ jsx(CheckboxGroupView, { value: activeKeys, m: [1, 1], children: filter.values.map((v) => /* @__PURE__ */ jsx(CheckboxView, { value: v.id, onPress: () => v.toggle(), children: v.render() }, v.id)) })
+    ] })
+  ] });
+};
+
+export { FilterAccordion };
+//# sourceMappingURL=FilterAccordion.mjs.map

package/dist/js/components/src/components/List/components/Header/components/AllFiltersModal/FilterAccordion.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterAccordion.mjs","sources":["../../../../../../../../../../src/components/List/components/Header/components/AllFiltersModal/FilterAccordion.tsx"],"sourcesContent":["import React, { type FC } from \"react\";\nimport AccordionView from \"@/views/AccordionView\";\nimport HeadingView from \"@/views/HeadingView\";\nimport ContentView from \"@/views/ContentView\";\nimport RadioGroupView from \"@/views/RadioGroupView\";\nimport RadioView from \"@/views/RadioView\";\nimport CheckboxGroupView from \"@/views/CheckboxGroupView\";\nimport CheckboxView from \"@/views/CheckboxView\";\nimport type { Filter } from \"@/components/List/model/filter/Filter\";\n\ninterface Props {\n  filter: Filter<never, never, never>;\n}\n\nexport const FilterAccordion: FC<Props> = (props) => {\n  const { filter } = props;\n\n  const activeKeys = filter.values.filter((v) => v.isActive).map((v) => v.id);\n\n  return (\n    <AccordionView>\n      <HeadingView>{filter.name ?? filter.property}</HeadingView>\n      <ContentView>\n        {filter.mode === \"one\" && (\n          <RadioGroupView value={activeKeys[0]} m={[1, 1]}>\n            {filter.values.map((v) => (\n              <RadioView key={v.id} value={v.id} onPress={() => v.toggle()}>\n                {v.render()}\n              </RadioView>\n            ))}\n          </RadioGroupView>\n        )}\n        {filter.mode !== \"one\" && (\n          <CheckboxGroupView value={activeKeys} m={[1, 1]}>\n            {filter.values.map((v) => (\n              <CheckboxView key={v.id} value={v.id} onPress={() => v.toggle()}>\n                {v.render()}\n              </CheckboxView>\n            ))}\n          </CheckboxGroupView>\n        )}\n      </ContentView>\n    </AccordionView>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;AAcO,MAAM,eAAA,GAA6B,CAAC,KAAA,KAAU;AACnD,EAAA,MAAM,EAAE,QAAO,GAAI,KAAA;AAEnB,EAAA,MAAM,UAAA,GAAa,MAAA,CAAO,MAAA,CAAO,MAAA,CAAO,CAAC,CAAA,KAAM,CAAA,CAAE,QAAQ,CAAA,CAAE,GAAA,CAAI,CAAC,CAAA,KAAM,EAAE,EAAE,CAAA;AAE1E,EAAA,4BACG,aAAA,EAAA,EACC,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,WAAA,EAAA,EAAa,QAAA,EAAA,MAAA,CAAO,IAAA,IAAQ,MAAA,CAAO,QAAA,EAAS,CAAA;AAAA,yBAC5C,WAAA,EAAA,EACE,QAAA,EAAA;AAAA,MAAA,MAAA,CAAO,IAAA,KAAS,KAAA,oBACf,GAAA,CAAC,cAAA,EAAA,EAAe,OAAO,UAAA,CAAW,CAAC,CAAA,EAAG,CAAA,EAAG,CAAC,CAAA,EAAG,CAAC,CAAA,EAC3C,QAAA,EAAA,MAAA,CAAO,OAAO,GAAA,CAAI,CAAC,CAAA,qBAClB,GAAA,CAAC,SAAA,EAAA,EAAqB,KAAA,EAAO,CAAA,CAAE,EAAA,EAAI,SAAS,MAAM,CAAA,CAAE,MAAA,EAAO,EACxD,YAAE,MAAA,EAAO,EAAA,EADI,CAAA,CAAE,EAElB,CACD,CAAA,EACH,CAAA;AAAA,MAED,MAAA,CAAO,IAAA,KAAS,KAAA,oBACf,GAAA,CAAC,qBAAkB,KAAA,EAAO,UAAA,EAAY,CAAA,EAAG,CAAC,CAAA,EAAG,CAAC,CAAA,EAC3C,QAAA,EAAA,MAAA,CAAO,OAAO,GAAA,CAAI,CAAC,CAAA,qBAClB,GAAA,CAAC,YAAA,EAAA,EAAwB,KAAA,EAAO,CAAA,CAAE,EAAA,EAAI,SAAS,MAAM,CAAA,CAAE,MAAA,EAAO,EAC3D,YAAE,MAAA,EAAO,EAAA,EADO,CAAA,CAAE,EAErB,CACD,CAAA,EACH;AAAA,KAAA,EAEJ;AAAA,GAAA,EACF,CAAA;AAEJ;;;;"}

package/dist/js/components/src/components/List/components/Header/components/AllFiltersModal/SortingAccordion.mjs

@@ -0,0 +1,57 @@
+"use client"
+/* */
+import { jsxs, jsx } from 'react/jsx-runtime';
+import 'react';
+import AccordionView from '../../../../../../views/AccordionView.mjs';
+import HeadingView from '../../../../../../views/HeadingView.mjs';
+import { useLocalizedStringFormatter } from 'react-aria';
+import ContentView from '../../../../../../views/ContentView.mjs';
+import RadioGroupView from '../../../../../../views/RadioGroupView.mjs';
+import RadioView from '../../../../../../views/RadioView.mjs';
+import 'invariant';
+import 'react-aria-components';
+import '../../../../../IllustratedMessage/IllustratedMessage.mjs';
+import '@tabler/icons-react';
+import '../../../../../Icon/Icon.mjs';
+import '../../../../../../views/IconView.mjs';
+import '../../../../../Heading/Heading.mjs';
+import '../../../../../Text/Text.mjs';
+import locales from '../../../../../../../../_virtual/_.locale.json@8d5024994f97657f895a4e2a188d2d8a.mjs';
+import 'clsx';
+import '@mittwald/react-tunnel';
+import '../../../../../../views/ListItemViewContentView.mjs';
+import '../../../../../../lib/propsContext/propsContext.mjs';
+import '../../../../../../lib/propsContext/components/PropsContextProvider.mjs';
+import '../../../../../../views/ButtonView.mjs';
+import '../../../../../../views/ContextMenuTriggerView.mjs';
+import '../../../../../ColumnLayout/ColumnLayout.mjs';
+import '../../../ListSummary/ListSummary.mjs';
+import { useList } from '../../../../hooks/useList.mjs';
+import '../../../../listContext.mjs';
+import 'mobx';
+import '../../../../List.mjs';
+
+const SortingAccordion = () => {
+  const list = useList();
+  const stringFormatter = useLocalizedStringFormatter(locales);
+  const sorting = list.visibleSorting;
+  const activeSorting = sorting.find((s) => s.isSorted());
+  if (sorting.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs(AccordionView, { children: [
+    /* @__PURE__ */ jsx(HeadingView, { children: stringFormatter.format("list.sorting") }),
+    /* @__PURE__ */ jsx(ContentView, { children: /* @__PURE__ */ jsx(RadioGroupView, { value: activeSorting?.id, m: [1, 1], children: sorting.map((s) => /* @__PURE__ */ jsx(
+      RadioView,
+      {
+        value: s.id,
+        onPress: () => list.getSorting(s.id).enable(),
+        children: s.name ?? s.property
+      },
+      s.id
+    )) }) })
+  ] });
+};
+
+export { SortingAccordion };
+//# sourceMappingURL=SortingAccordion.mjs.map

package/dist/js/components/src/components/List/components/Header/components/AllFiltersModal/SortingAccordion.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SortingAccordion.mjs","sources":["../../../../../../../../../../src/components/List/components/Header/components/AllFiltersModal/SortingAccordion.tsx"],"sourcesContent":["import React, { type FC } from \"react\";\nimport AccordionView from \"@/views/AccordionView\";\nimport HeadingView from \"@/views/HeadingView\";\nimport { useLocalizedStringFormatter } from \"react-aria\";\nimport ContentView from \"@/views/ContentView\";\nimport RadioGroupView from \"@/views/RadioGroupView\";\nimport RadioView from \"@/views/RadioView\";\nimport { useList } from \"@/components/List\";\nimport locales from \"../../../../locales/*.locale.json\";\n\nexport const SortingAccordion: FC = () => {\n  const list = useList();\n  const stringFormatter = useLocalizedStringFormatter(locales);\n\n  const sorting = list.visibleSorting;\n  const activeSorting = sorting.find((s) => s.isSorted());\n\n  if (sorting.length === 0) {\n    return null;\n  }\n\n  return (\n    <AccordionView>\n      <HeadingView>{stringFormatter.format(\"list.sorting\")}</HeadingView>\n      <ContentView>\n        <RadioGroupView value={activeSorting?.id} m={[1, 1]}>\n          {sorting.map((s) => (\n            <RadioView\n              key={s.id}\n              value={s.id}\n              onPress={() => list.getSorting(s.id).enable()}\n            >\n              {s.name ?? s.property}\n            </RadioView>\n          ))}\n        </RadioGroupView>\n      </ContentView>\n    </AccordionView>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAUO,MAAM,mBAAuB,MAAM;AACxC,EAAA,MAAM,OAAO,OAAA,EAAQ;AACrB,EAAA,MAAM,eAAA,GAAkB,4BAA4B,OAAO,CAAA;AAE3D,EAAA,MAAM,UAAU,IAAA,CAAK,cAAA;AACrB,EAAA,MAAM,gBAAgB,OAAA,CAAQ,IAAA,CAAK,CAAC,CAAA,KAAM,CAAA,CAAE,UAAU,CAAA;AAEtD,EAAA,IAAI,OAAA,CAAQ,WAAW,CAAA,EAAG;AACxB,IAAA,OAAO,IAAA;AAAA,EACT;AAEA,EAAA,4BACG,aAAA,EAAA,EACC,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,WAAA,EAAA,EAAa,QAAA,EAAA,eAAA,CAAgB,MAAA,CAAO,cAAc,CAAA,EAAE,CAAA;AAAA,oBACrD,GAAA,CAAC,WAAA,EAAA,EACC,QAAA,kBAAA,GAAA,CAAC,cAAA,EAAA,EAAe,OAAO,aAAA,EAAe,EAAA,EAAI,CAAA,EAAG,CAAC,GAAG,CAAC,CAAA,EAC/C,QAAA,EAAA,OAAA,CAAQ,GAAA,CAAI,CAAC,CAAA,qBACZ,GAAA;AAAA,MAAC,SAAA;AAAA,MAAA;AAAA,QAEC,OAAO,CAAA,CAAE,EAAA;AAAA,QACT,SAAS,MAAM,IAAA,CAAK,WAAW,CAAA,CAAE,EAAE,EAAE,MAAA,EAAO;AAAA,QAE3C,QAAA,EAAA,CAAA,CAAE,QAAQ,CAAA,CAAE;AAAA,OAAA;AAAA,MAJR,CAAA,CAAE;AAAA,KAMV,GACH,CAAA,EACF;AAAA,GAAA,EACF,CAAA;AAEJ;;;;"}