@foodpilot/foods 2.11.25 → 2.11.30

package/dist/components/Cards/TrajectoryCards/components/Comparisons.js

@@ -1,13 +1,29 @@
 import { jsx } from "react/jsx-runtime";
 import { TrajectoryComparison } from "./TrajectoryComparison.js";
 import { StartToCurrentArrow, CurrentToTargetArrow } from "../styles/index.js";
-const StartCurrentComparison = ({ currentValue, targetValue, orientation, improvement }) => /* @__PURE__ */ jsx(StartToCurrentArrow, { orientation, children: /* @__PURE__ */ jsx(TrajectoryComparison, { value: targetValue, comparedTo: currentValue, improvement }) });
+const StartCurrentComparison = ({ currentValue, targetValue, orientation, improvement }) => /* @__PURE__ */ jsx(StartToCurrentArrow, { orientation, children: /* @__PURE__ */ jsx(
+  TrajectoryComparison,
+  {
+    value: targetValue,
+    comparedTo: currentValue,
+    improvement,
+    orientation
+  }
+) });
 const LastTargetComparison = ({
   currentValue,
   targetValue,
   orientation,
   improvement
-}) => /* @__PURE__ */ jsx(CurrentToTargetArrow, { orientation, children: /* @__PURE__ */ jsx(TrajectoryComparison, { value: targetValue, comparedTo: currentValue, improvement }) });
+}) => /* @__PURE__ */ jsx(CurrentToTargetArrow, { orientation, children: /* @__PURE__ */ jsx(
+  TrajectoryComparison,
+  {
+    value: targetValue,
+    comparedTo: currentValue,
+    improvement,
+    orientation
+  }
+) });
 export {
   LastTargetComparison,
   StartCurrentComparison

package/dist/components/Cards/TrajectoryCards/components/TrajectoryComparison.d.ts

@@ -1,9 +1,11 @@
 import { Improvement } from '../../../ComparisonBlock/ComparisonBlock.tsx';
+import { TrajectoryPosition } from '../Blocks/types.ts';
 import { StepType } from './Step.tsx';
 type TrajectoryComparisonProps = {
     value: StepType["value"];
     comparedTo: StepType["value"];
     improvement: Improvement;
+    orientation: TrajectoryPosition | undefined;
 };
 export declare const TrajectoryComparison: (props: TrajectoryComparisonProps) => import("react/jsx-runtime").JSX.Element | undefined;
 export {};

package/dist/components/Cards/TrajectoryCards/components/TrajectoryComparison.js

@@ -1,27 +1,17 @@
 import { jsx } from "react/jsx-runtime";
-import { ComparisonBlock } from "../../../ComparisonBlock/ComparisonBlock.js";
+import { ComparisonArrow } from "../../../ComparisonBlock/ComparisonArrow.js";
 const TrajectoryComparison = (props) => {
-  const { value, comparedTo, improvement } = props;
+  const { value, comparedTo, improvement, orientation } = props;
   if (value === null || comparedTo === null) {
     return;
   }
   return /* @__PURE__ */ jsx(
-    ComparisonBlock,
+    ComparisonArrow,
     {
-      layout: {
-        size: "M",
-        direction: "horizontal"
-      },
-      disableText: true,
-      currentValue: value,
-      comparedTo: {
-        value: comparedTo,
-        unit: "",
-        // not used
-        label: ""
-        // not used
-      },
-      improvement
+      value,
+      comparedTo,
+      improvement,
+      arrowDirection: orientation === "vertical" ? "bottom" : "right"
     }
   );
 };

package/dist/components/ComparisonBlock/ComparisonArrow.d.ts

@@ -0,0 +1,20 @@
+import { Improvement } from './ComparisonBlock';
+import { ColorSet } from './useColorAndArrow';
+export type ArrowDirection = "bottom" | "right";
+export type ComparisonSign = "+" | "-" | "=";
+export type ComparisonArrowProps = {
+    value: number | string;
+    comparedTo: number | string;
+    improvement: Improvement;
+    arrowDirection: ArrowDirection;
+    locale?: string;
+};
+export declare const ComparisonArrow: (props: ComparisonArrowProps) => import("react/jsx-runtime").JSX.Element;
+type DiffPercentageTagProps = {
+    value: number;
+    color: ColorSet;
+    sign: ComparisonSign;
+    position?: "right" | "bottom";
+};
+export declare const DiffPercentageTag: (props: DiffPercentageTagProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/ComparisonBlock/ComparisonArrow.js

@@ -0,0 +1,120 @@
+import { jsx, Fragment, jsxs } from "react/jsx-runtime";
+import { Stack, useTheme, Box, Typography } from "@mui/material";
+import { useColorAndArrowIcon } from "./useColorAndArrow.js";
+const ComparisonArrow = (props) => {
+  const { value, comparedTo, improvement, arrowDirection } = props;
+  const previousValue = Number(comparedTo);
+  const currentValue = Number(value);
+  const percentageDifference = previousValue > 0 ? Math.abs(100 - currentValue / previousValue * 100) : Infinity;
+  const colorAndArrowIcon = useColorAndArrowIcon({
+    currentValue,
+    previousValue,
+    improvement,
+    layout: {
+      size: "M",
+      direction: "horizontal"
+    }
+  });
+  if (isNaN(percentageDifference) || percentageDifference === Infinity || percentageDifference === -Infinity) {
+    return /* @__PURE__ */ jsx(Fragment, {});
+  }
+  const positive = percentageDifference >= 0;
+  const isNeutral = percentageDifference === 0;
+  const sign = isNeutral ? "=" : positive ? "+" : "-";
+  return /* @__PURE__ */ jsx(Stack, { width: "60px", children: /* @__PURE__ */ jsx(
+    DiffPercentageTag,
+    {
+      position: arrowDirection,
+      value: percentageDifference,
+      color: colorAndArrowIcon.color,
+      sign
+    }
+  ) });
+};
+const DiffPercentageTag = (props) => {
+  const { value, position = "right" } = props;
+  const theme = useTheme();
+  const bgColor = props.color.secondaryColor;
+  const accentColor = props.color.primaryColor;
+  const isRight = position === "right";
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      sx: {
+        display: "inline-flex",
+        position: "relative",
+        alignItems: "center",
+        justifyContent: "center",
+        backgroundColor: bgColor,
+        border: `2px solid ${accentColor}`,
+        borderRight: isRight ? "none" : void 0,
+        borderRadius: theme.spacing(0.75),
+        padding: theme.spacing(0.25, 0.75),
+        paddingRight: theme.spacing(1),
+        height: "26px",
+        zIndex: 2
+      },
+      children: [
+        isRight ? /* @__PURE__ */ jsx(
+          Box,
+          {
+            sx: {
+              background: `linear-gradient(45deg, transparent 0%, transparent 55%, ${bgColor} 55%, ${bgColor} 100%)`,
+              position: "absolute",
+              border: `2px solid ${accentColor}`,
+              borderLeft: "none",
+              borderBottom: "none",
+              borderRadius: theme.spacing(0.75),
+              borderTopRightRadius: theme.spacing(0.5),
+              borderBottomRightRadius: theme.spacing(0.25),
+              borderTopLeftRadius: theme.spacing(0.25),
+              height: "18px",
+              width: "18px",
+              right: -7,
+              top: 2,
+              transform: "rotate(45deg)",
+              zIndex: -2
+            }
+          }
+        ) : /* @__PURE__ */ jsx(
+          Box,
+          {
+            sx: {
+              background: `linear-gradient(135deg, transparent 0%, transparent 45%, ${bgColor} 45%, ${bgColor} 100%)`,
+              position: "absolute",
+              border: `2px solid ${accentColor}`,
+              borderTop: "none",
+              borderLeft: "none",
+              borderRadius: "1.5px",
+              height: "12px",
+              width: "12px",
+              bottom: -7,
+              left: "50%",
+              transform: "translateX(-50%) rotate(45deg)",
+              zIndex: -2
+            }
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          Stack,
+          {
+            flexDirection: "row",
+            gap: theme.spacing(0.5),
+            sx: { lineHeight: 1, position: "relative", zIndex: 1 },
+            children: [
+              /* @__PURE__ */ jsx(Typography, { variant: "small-bold", sx: { color: accentColor }, children: props.sign }),
+              /* @__PURE__ */ jsxs(Typography, { variant: "small-bold", title: value.toString(), children: [
+                Math.round(value),
+                "%"
+              ] })
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  ComparisonArrow,
+  DiffPercentageTag
+};

package/dist/components/ComparisonBlock/SvgArrow.d.ts

@@ -0,0 +1,7 @@
+export type ArrowDirection = "bottom" | "right" | "top" | "left";
+type ArrowProps = unknown;
+export declare const UpArrow: (_props: ArrowProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DownArrow: (_props: ArrowProps) => import("react/jsx-runtime").JSX.Element;
+export declare const LeftArrow: (_props: ArrowProps) => import("react/jsx-runtime").JSX.Element;
+export declare const RightArrow: (_props: ArrowProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/ComparisonBlock/index.d.ts

@@ -1 +1,2 @@
 export { ComparisonBlock } from './ComparisonBlock.tsx';
+export { ComparisonArrow } from './ComparisonArrow.tsx';

package/dist/components/Navigation/FoodsNavBar/FoodsNavbar.d.ts

@@ -53,8 +53,12 @@ export type SidebarTexts = {
     shortenSidebar: string;
     logout: string;
 };
+type OrganizationPopoverActions = {
+    closePopover: () => void;
+};
 export type OrganizationPopover = {
     element: JSX.Element;
+    renderPopover?: (actions: OrganizationPopoverActions) => ReactNode;
 };
 export type Organization = {
     name: string;
@@ -76,3 +80,4 @@ export type FoodsNavbarProps = {
     onMobileDrawerClose?: () => void;
 };
 export declare const FoodsNavbar: (props: FoodsNavbarProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Navigation/FoodsNavBar/Sections/Organization/ButtonPopover.d.ts

@@ -1,9 +1,10 @@
 import { SxProps } from '@mui/material';
+import { ReactNode } from 'react';
 type Anchor = HTMLElement | null;
 type ButtonPopoverProps = {
     anchor: Anchor;
     setAnchor: (elementToAttachTo: Anchor) => void;
-    children: JSX.Element | undefined;
+    children: ReactNode;
     paperOverrides: SxProps | undefined;
 };
 export declare const ButtonPopover: (props: ButtonPopoverProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Navigation/FoodsNavBar/Sections/Organization/Organization.js

@@ -7,6 +7,11 @@ const Organization = (props) => {
   const { isExtended, name, picture, popover } = props;
   const theme = useTheme();
   const [anchor, setAnchor] = useState(null);
+  const closePopover = () => setAnchor(null);
+  const actions = {
+    closePopover
+  };
+  const toRender = (popover == null ? void 0 : popover.renderPopover) ? popover.renderPopover(actions) : popover == null ? void 0 : popover.element;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsxs(
       Box,
@@ -82,15 +87,7 @@ const Organization = (props) => {
         sx: {
           flex: 1
         },
-        children: /* @__PURE__ */ jsx(
-          ButtonPopover,
-          {
-            anchor,
-            setAnchor,
-            children: popover == null ? void 0 : popover.element,
-            paperOverrides: void 0
-          }
-        )
+        children: /* @__PURE__ */ jsx(ButtonPopover, { anchor, setAnchor, paperOverrides: void 0, children: toRender })
       }
     )
   ] });

package/dist/components/Navigation/FoodsNavBar/Sections/Profile/UserButton.js

@@ -13,8 +13,8 @@ const UserButton = (props) => {
   const isUserPopoverOpen = Boolean(anchor);
   const onClose = () => setAnchor(null);
   const fullName = `${user.firstname} ${user.lastname}`;
-  const firstName = user.firstname.replaceAll(" ", " ");
-  const lastName = user.lastname.replaceAll(" ", " ");
+  const firstName = user.firstname.replaceAll(" ", " ");
+  const lastName = user.lastname.replaceAll(" ", " ");
   return /* @__PURE__ */ jsxs(
     Box,
     {

package/dist/main.js

@@ -53,6 +53,7 @@ import { Article } from "./components/CMS/ArticleBlock/Article.js";
 import { IndicatorBlock } from "./components/CMS/IndicatorBlock/IndicatorBlock.js";
 import { LightIndicatorBlock } from "./components/CMS/IndicatorBlock/LightIndicatorBlock.js";
 import { ComparisonBlock } from "./components/ComparisonBlock/ComparisonBlock.js";
+import { ComparisonArrow } from "./components/ComparisonBlock/ComparisonArrow.js";
 import { CustomTypography } from "./components/CustomTypography/CustomTypography.js";
 import { TypographyList } from "./components/CustomTypography/TypographyList.js";
 import { PrimaryDialog } from "./components/Dialog/PrimaryDialog.js";
@@ -177,6 +178,7 @@ export {
   CollectiveTheme,
   CollectiveThemeOptions,
   ComingSoonBadge,
+  ComparisonArrow,
   ComparisonBlock,
   ComparisonLabel,
   ContextualContentBox,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@foodpilot/foods",
   "private": false,
-  "version": "2.11.25",
+  "version": "2.11.30",
   "type": "module",
   "main": "./dist/main.js",
   "module": "./dist/main.js",