@foodpilot/foods 2.7.9 → 2.7.10

package/dist/components/Badge/FoodsBadge.d.ts

@@ -5,5 +5,6 @@ export type FoodsBadgeProps = {
     icon: FoodsIconProps["icon"];
     boxProps?: BoxProps;
     boxExtraPaddingPx?: number;
+    placeholder?: FoodsIconProps["placeholder"];
 };
 export declare const FoodsBadge: (props: FoodsBadgeProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Badge/FoodsBadge.js

@@ -17,7 +17,7 @@ const FoodsBadge = (props) => {
         height: `${widthHeight.height + boxExtraPaddingPx}px`,
         ...boxProps.sx
       },
-      children: /* @__PURE__ */ jsx(FoodsIcon, { size: widthHeight, icon })
+      children: /* @__PURE__ */ jsx(FoodsIcon, { size: widthHeight, icon, placeholder: props.placeholder })
     }
   );
 };

package/dist/components/Icons/FoodsIcon.d.ts

@@ -4,6 +4,7 @@ type Size = WidthHeight | number;
 export type FoodsIconProps = {
     size: Size;
     icon: keyof IconMapping | (string & {}) | undefined;
+    placeholder?: "empty" | "blank" | "defaultIcon";
     backgroundColor?: string;
     color?: string;
 };

package/dist/components/Icons/FoodsIcon.js

@@ -2,15 +2,17 @@ import { jsx } from "react/jsx-runtime";
 import { Box } from "@mui/material";
 import { iconMapping, computeSize } from "./iconConfig.js";
 import { useTheme } from "@mui/material/styles";
+import { ReactComponent as SvgBlankIcon } from "./blankIcon.svg.js";
 const FoodsIcon = (props) => {
   var _a;
-  const { icon, size, backgroundColor, color } = props;
+  const { icon, size, backgroundColor, color, placeholder = "empty" } = props;
   const theme = useTheme();
-  if (icon === void 0 || icon === "") {
+  const placeholderIcon = placeholder === "empty" ? null : placeholder === "defaultIcon" ? iconMapping["default"] : SvgBlankIcon;
+  const _Icon = (_a = iconMapping) == null ? void 0 : _a[icon];
+  const Icon = _Icon === void 0 ? placeholderIcon : _Icon;
+  if (Icon === null) {
     return null;
   }
-  const _Icon = (_a = iconMapping) == null ? void 0 : _a[icon];
-  const Icon = _Icon === void 0 ? iconMapping["default"] : _Icon;
   const widthHeight = typeof size === "number" ? computeSize(size) : size;
   return backgroundColor ? /* @__PURE__ */ jsx(
     Box,

package/dist/components/Icons/blankIcon.svg.js

@@ -0,0 +1,5 @@
+import * as React from "react";
+const SvgBlankIcon = (props) => /* @__PURE__ */ React.createElement("svg", { width: 40, height: 40, viewBox: "0 0 40 40", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", ...props });
+export {
+  SvgBlankIcon as ReactComponent
+};

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

@@ -1,3 +1,4 @@
+import { ReactNode } from 'react';
 import { NormalCssProperties } from '@mui/material/styles/createMixins';
 export type SidebarOptions = {
     isExpanded?: boolean;
@@ -9,6 +10,17 @@ export type User = {
     lastname: string;
     picture?: string;
 };
+export type CustomRenderCallback = {
+    isExpanded: boolean;
+    extendSidebar: () => void;
+    onMobileDrawerClose?: () => void;
+};
+export type NavbarDrawerItemType = ({
+    type: "custom";
+    isSelected: boolean;
+} & NavbarCustomType) | ({
+    type?: "link";
+} & NavbarLinkType);
 export type NavbarLinkType = {
     icon: JSX.Element;
     isSelected: boolean;
@@ -19,9 +31,16 @@ export type NavbarLinkType = {
 export type NavbarDrawerType = {
     label: string;
     icon: JSX.Element;
-    items: NavbarLinkType[];
+    items: NavbarDrawerItemType[];
+};
+export type NavbarCustomType = {
+    render: (options: CustomRenderCallback) => ReactNode;
 };
-export type NavbarButtonType = ({
+export type NavbarButtonType = {
+    type: "separator";
+} | ({
+    type: "custom";
+} & NavbarCustomType) | ({
     type: "drawer";
 } & NavbarDrawerType) | ({
     type: "link";
@@ -43,6 +62,7 @@ export type Organization = {
 export type NavigationMode = "mobile" | "tablet" | "desktop";
 export type FoodsNavbarProps = {
     buttons: NavbarButtonType[];
+    footerButtons: NavbarButtonType[];
     connectedUser: User;
     organization: Organization;
     sidebarTexts: SidebarTexts;

package/dist/components/Navigation/FoodsNavBar/FoodsNavbar.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useTheme, Box } from "@mui/material";
+import { useTheme, Box, Stack } from "@mui/material";
 import { useState, useEffect } from "react";
 import { UserButton } from "./Sections/Profile/UserButton.js";
 import { UserButtons } from "./Sections/UserButtons/UserButtons.js";
@@ -9,6 +9,7 @@ const FoodsNavbar = (props) => {
   const theme = useTheme();
   const {
     buttons,
+    footerButtons,
     connectedUser,
     organization,
     sidebarTexts,
@@ -104,21 +105,38 @@ const FoodsNavbar = (props) => {
               {
                 sx: {
                   gridRow: "2",
-                  paddingTop: "16px"
+                  paddingBlock: theme.spacing(2),
+                  border: "1px solid red",
+                  height: "100%"
                 },
-                children: /* @__PURE__ */ jsx(
-                  UserButtons,
-                  {
-                    buttons,
-                    isExpanded: isSidebarExpanded,
-                    extendSidebar: () => {
-                      if (navigationMode === "desktop") {
-                        setSidebarExpanded(true);
-                      }
-                    },
-                    onMobileDrawerClose: navigationMode === "mobile" ? onMobileDrawerClose : void 0
-                  }
-                )
+                children: /* @__PURE__ */ jsxs(Stack, { justifyContent: "space-between", height: "100%", children: [
+                  /* @__PURE__ */ jsx(
+                    UserButtons,
+                    {
+                      buttons,
+                      isExpanded: isSidebarExpanded,
+                      extendSidebar: () => {
+                        if (navigationMode === "desktop") {
+                          setSidebarExpanded(true);
+                        }
+                      },
+                      onMobileDrawerClose: navigationMode === "mobile" ? onMobileDrawerClose : void 0
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    UserButtons,
+                    {
+                      buttons: footerButtons,
+                      isExpanded: isSidebarExpanded,
+                      extendSidebar: () => {
+                        if (navigationMode === "desktop") {
+                          setSidebarExpanded(true);
+                        }
+                      },
+                      onMobileDrawerClose: navigationMode === "mobile" ? onMobileDrawerClose : void 0
+                    }
+                  )
+                ] })
               }
             ),
             navigationMode === "desktop" && /* @__PURE__ */ jsx(

package/dist/components/Navigation/FoodsNavBar/Sections/UserButtons/Button/CustomRender.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from 'react';
+type CustomRenderProps = {
+    isExpanded: boolean;
+    children: ReactNode;
+};
+export declare const CustomRender: (props: CustomRenderProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Navigation/FoodsNavBar/Sections/UserButtons/Button/CustomRender.js

@@ -0,0 +1,11 @@
+import { jsx } from "react/jsx-runtime";
+import { useTheme } from "@mui/material";
+import Stack from "@mui/material/Stack/Stack";
+const CustomRender = (props) => {
+  const theme = useTheme();
+  const { isExpanded, children } = props;
+  return /* @__PURE__ */ jsx(Stack, { paddingInline: isExpanded === false ? theme.spacing(1) : "none", children });
+};
+export {
+  CustomRender
+};

package/dist/components/Navigation/FoodsNavBar/Sections/UserButtons/Button/DrawerAction.js

@@ -2,6 +2,7 @@ import { jsxs, jsx } from "react/jsx-runtime";
 import { useTheme, ButtonGroup, Button, Box, Typography } from "@mui/material";
 import { useState, Fragment } from "react";
 import { LinkAction } from "./LinkAction.js";
+import { CustomRender } from "./CustomRender.js";
 import { FoodsIcon } from "../../../../../Icons/FoodsIcon.js";
 const DrawerAction = (props) => {
   const theme = useTheme();
@@ -85,6 +86,14 @@ const DrawerAction = (props) => {
       }
     ),
     isExpanded && isDrawerOpened && /* @__PURE__ */ jsx(Box, { sx: { paddingLeft: "30px" }, children: button.items.map((item, index) => {
+      if (item.type === "custom") {
+        const component = item.render({
+          isExpanded,
+          extendSidebar,
+          onMobileDrawerClose
+        });
+        return /* @__PURE__ */ jsx(CustomRender, { isExpanded, children: component });
+      }
       return /* @__PURE__ */ jsx(
         LinkAction,
         {

package/dist/components/Navigation/FoodsNavBar/Sections/UserButtons/Button/Separator.d.ts

@@ -0,0 +1,5 @@
+type Props = {
+    isExpanded: boolean;
+};
+export declare const Separator: (props: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Navigation/FoodsNavBar/Sections/UserButtons/Button/Separator.js

@@ -0,0 +1,10 @@
+import { jsx } from "react/jsx-runtime";
+import { useTheme, Stack, Box } from "@mui/material";
+const Separator = (props) => {
+  const theme = useTheme();
+  const { isExpanded } = props;
+  return /* @__PURE__ */ jsx(Stack, { marginBlock: theme.spacing(0.5), paddingInline: isExpanded === false ? theme.spacing(2) : "none", children: /* @__PURE__ */ jsx(Box, { borderTop: `1px solid ${theme.custom.grey[2e3]}` }) });
+};
+export {
+  Separator
+};

package/dist/components/Navigation/FoodsNavBar/Sections/UserButtons/Button/TopLinkAction.js

@@ -41,6 +41,7 @@ const ExpandedButton = (props) => {
     ButtonGroup,
     {
       style: {
+        // padding: 0,
         display: "flex",
         overflow: "hidden"
       },

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

@@ -3,6 +3,8 @@ import { LinkAction } from "./Button/LinkAction.js";
 import { TopLinkAction } from "./Button/TopLinkAction.js";
 import { DrawerAction } from "./Button/DrawerAction.js";
 import { Box } from "@mui/material";
+import { Separator } from "./Button/Separator.js";
+import { CustomRender } from "./Button/CustomRender.js";
 const UserButtons = (props) => {
   const { buttons, isExpanded, extendSidebar, onMobileDrawerClose } = props;
   return /* @__PURE__ */ jsx(
@@ -14,6 +16,17 @@ const UserButtons = (props) => {
         gap: "4px"
       },
       children: buttons.map((button, index) => {
+        if (button.type === "custom") {
+          const component = button.render({
+            isExpanded,
+            extendSidebar,
+            onMobileDrawerClose
+          });
+          return /* @__PURE__ */ jsx(CustomRender, { isExpanded, children: component });
+        }
+        if (button.type === "separator") {
+          return /* @__PURE__ */ jsx(Separator, { isExpanded });
+        }
         if (button.type === "drawer") {
           return /* @__PURE__ */ jsx(
             DrawerAction,

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

@@ -1,2 +1,7 @@
 export * from './FoodsNavbar';
 export * from './Plugin/DefaultUserAction';
+export { CustomRender } from './Sections/UserButtons/Button/CustomRender';
+export { DrawerAction } from './Sections/UserButtons/Button/DrawerAction';
+export { LinkAction } from './Sections/UserButtons/Button/LinkAction';
+export { Separator } from './Sections/UserButtons/Button/Separator';
+export { TopLinkAction } from './Sections/UserButtons/Button/TopLinkAction';

package/dist/main.js

@@ -99,6 +99,11 @@ import { InitHeader } from "./components/Layout/BlockList/Headers/InitHeader.js"
 import { LinearProgress } from "./components/LinearProgress.js";
 import { IconThread } from "./components/Navigation/IconThread.js";
 import { HeaderNav, NavBarLink, Navbar, SubMenu, UserNav } from "./components/Navigation/Navbar.js";
+import { CustomRender } from "./components/Navigation/FoodsNavBar/Sections/UserButtons/Button/CustomRender.js";
+import { DrawerAction } from "./components/Navigation/FoodsNavBar/Sections/UserButtons/Button/DrawerAction.js";
+import { LinkAction } from "./components/Navigation/FoodsNavBar/Sections/UserButtons/Button/LinkAction.js";
+import { Separator } from "./components/Navigation/FoodsNavBar/Sections/UserButtons/Button/Separator.js";
+import { TopLinkAction } from "./components/Navigation/FoodsNavBar/Sections/UserButtons/Button/TopLinkAction.js";
 import { FoodsNavbar } from "./components/Navigation/FoodsNavBar/FoodsNavbar.js";
 import { DefaultUserAction } from "./components/Navigation/FoodsNavBar/Plugin/DefaultUserAction.js";
 import { NumberWithUnit } from "./components/Number/NumberWithUnit.js";
@@ -168,6 +173,7 @@ export {
   ComparisonLabel,
   ContextualContentBox,
   CoordinatePopover,
+  CustomRender,
   CustomToggleButton,
   CustomToggleButtonNodeTitle,
   CustomTypography,
@@ -175,6 +181,7 @@ export {
   DefaultUserAction,
   DottedBox,
   DoughnutChart,
+  DrawerAction,
   EcoScoreCell,
   EditHeader,
   EmptyForm,
@@ -225,6 +232,7 @@ export {
   LightIndicatorBlock,
   LineGroupBox,
   LinearProgress,
+  LinkAction,
   ListHeader,
   MRTGrid,
   MultiValueFilter,
@@ -260,6 +268,7 @@ export {
   SectionTabs,
   SeeMoreCard,
   SelectBlock,
+  Separator,
   SolidGreyBox,
   SsqCard,
   SubMenu,
@@ -274,6 +283,7 @@ export {
   Textarea,
   ThemedPopover,
   ToggleSwitch,
+  TopLinkAction,
   TrajectoryCards,
   TrajectoryChart,
   Typography,

package/dist/themes/common/components.js

@@ -104,7 +104,7 @@ const components = {
           textTransform: "none",
           fontSize: "0.9rem",
           lineHeight: "1rem",
-          borderRadius: "25px",
+          borderRadius: theme.spacing(1),
           height: "40px",
           fontWeight: 700,
           ...ownerState.variant === "primary" && {
@@ -173,13 +173,11 @@ const components = {
             border: `1px solid ${theme.custom.grey[500]}`
           },
           ...ownerState.variant === "validate" && {
-            borderRadius: "44px",
             color: "#FFFFFF",
             transition: "none",
             background: `linear-gradient(180deg, ${theme.custom.green[500]} 0%, ${theme.custom.green[700]} 100%)`
           },
           ...ownerState.variant === "delete" && {
-            borderRadius: "44px",
             color: "#FFFFFF",
             transition: "none",
             background: `${theme.custom.red[600]}`
@@ -475,6 +473,7 @@ const components = {
             height: "24px",
             color: theme.custom.grey[2800],
             backgroundColor: "inherit",
+            borderRadius: "32px",
             ":hover": {
               backgroundColor: theme.custom.grey[600]
             },
@@ -493,6 +492,7 @@ const components = {
             height: "36px",
             color: theme.custom.grey[2800],
             backgroundColor: "inherit",
+            borderRadius: "32px",
             ":hover": {
               backgroundColor: theme.custom.grey[600]
             },
@@ -511,6 +511,7 @@ const components = {
             height: "44px",
             color: theme.custom.grey[2800],
             backgroundColor: "inherit",
+            borderRadius: "32px",
             ":hover": {
               backgroundColor: theme.custom.grey[600]
             },
@@ -530,6 +531,7 @@ const components = {
             color: theme.custom.grey[2800],
             background: "linear-gradient(180deg, #FFFFFF 0%, #F6F5F3 154.5%)",
             border: `1px solid ${theme.custom.grey[500]}`,
+            borderRadius: "32px",
             ":hover": {
               background: "none",
               backgroundColor: theme.custom.grey[400]
@@ -553,6 +555,7 @@ const components = {
             color: theme.custom.grey[2800],
             background: "linear-gradient(180deg, #FFFFFF 0%, #F6F5F3 154.5%)",
             border: `1px solid ${theme.custom.grey[500]}`,
+            borderRadius: "32px",
             ":hover": {
               background: "none",
               backgroundColor: theme.custom.grey[400]
@@ -576,6 +579,7 @@ const components = {
             color: theme.custom.grey[2800],
             background: "linear-gradient(180deg, #FFFFFF 0%, #F6F5F3 154.5%)",
             border: `1px solid ${theme.custom.grey[500]}`,
+            borderRadius: "32px",
             ":hover": {
               background: "none",
               backgroundColor: theme.custom.grey[400]

package/package.json

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