@foodpilot/foods 2.11.13 → 2.11.15

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

@@ -1,12 +1,11 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { useTheme, ButtonGroup, Button, Box, Typography } from "@mui/material";
+import { ButtonGroup, Button, Box } from "@mui/material";
 import { useState, Fragment } from "react";
 import { LinkAction } from "./LinkAction.js";
 import { CustomRender } from "./CustomRender.js";
 import { Separator } from "./Separator.js";
 import { FoodsIcon } from "../../../../../Icons/FoodsIcon.js";
 const DrawerAction = (props) => {
-  const theme = useTheme();
   const { button, isExpanded, extendSidebar, onMobileDrawerClose } = props;
   const isOneButtonSelected = button.items.some((value) => {
     if (value.type === "separator") return false;
@@ -54,20 +53,17 @@ const DrawerAction = (props) => {
                   children: [
                     button.icon,
                     isExpanded && /* @__PURE__ */ jsx(
-                      Typography,
+                      Box,
                       {
                         sx: {
-                          color: theme.custom.grey[100],
-                          flexWrap: "nowrap",
-                          flex: 1,
-                          textAlign: "left",
                           display: "-webkit-box",
                           WebkitLineClamp: 1,
-                          WebkitBoxOrient: "vertical",
+                          flex: 1,
                           overflow: "hidden",
-                          textOverflow: "ellipsis"
+                          WebkitBoxOrient: "vertical",
+                          textOverflow: "ellipsis",
+                          textAlign: "left"
                         },
-                        variant: "body-bold",
                         children: button.label
                       }
                     )

package/dist/components/Tabs/FoodsTabs/FoodsTabTemplate.js

@@ -28,7 +28,12 @@ const SpecialTab = styled((props) => {
       // <Typography>SomethingSomething</Typography>
       "&.Mui-selected span": {
         color: theme.palette.primary[600]
-      }
+      },
+      // The default is at 8px, but we want to align in a custom way
+      ".MuiTab-icon": {
+        marginRight: 0
+      },
+      paddingInline: 0
     };
   }
   if (variant === "secondary") {

package/dist/components/Tabs/FoodsTabs/FoodsTabs.d.ts

@@ -5,14 +5,15 @@ import { StyledComponent } from '@emotion/styled';
 import { CommonProps } from '@mui/material/OverridableComponent';
 import { MUIStyledCommonProps } from '@mui/system';
 export type TabVariants = "primary" | "secondary" | "buttons";
-export type FoodsTabTemplateOption = {
+export type FoodsTabTemplateOption<IdType = unknown> = {
+    id?: IdType;
     name: ReactNode;
     icon?: IconMappingProps;
     disabled?: boolean;
     TabProps?: TabProps;
 };
-export type FoodsTabsProps = {
-    tabs: FoodsTabTemplateOption[];
+export type FoodsTabsProps<IdType = unknown> = {
+    tabs: FoodsTabTemplateOption<IdType>[];
     tabVariant: TabVariants;
     textVariant?: TypographyProps["variant"];
     selectedTabIndex?: number;
@@ -25,7 +26,7 @@ export type FoodsTabsProps = {
     TabsProps?: TabsProps;
     TabProps?: TabProps;
 };
-export declare const FoodsTabs: (props: FoodsTabsProps) => import("react/jsx-runtime").JSX.Element;
+export declare const FoodsTabs: <IdType>(props: FoodsTabsProps<IdType>) => import("react/jsx-runtime").JSX.Element;
 export declare const SpecialTabs: StyledComponent< TabsOwnProps & CommonProps & Omit<Omit< DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void | DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | RefObject<HTMLDivElement> | null | undefined;
 }, "className" | "classes" | "style" | "children" | "aria-label" | "aria-labelledby" | "onChange" | "sx" | "slots" | "slotProps" | "variant" | "orientation" | "value" | "action" | "allowScrollButtonsMobile" | "centered" | "indicatorColor" | "ScrollButtonComponent" | "scrollButtons" | "selectionFollowsFocus" | "TabIndicatorProps" | "TabScrollButtonProps" | "textColor" | "visibleScrollbar"> & {

package/dist/components/Tabs/FoodsTabs/FoodsTabs.js

@@ -24,6 +24,7 @@ const FoodsTabs = (props) => {
   useEffect(() => {
     _setValue(selectedTabIndex);
   }, [selectedTabIndex]);
+  const buttonGap = props.tabVariant === "primary" ? "20px" : "0px";
   return /* @__PURE__ */ jsx(Box, { sx: { width: "100%" }, ...BoxProps2, children: /* @__PURE__ */ jsx(
     SpecialTabs,
     {
@@ -35,6 +36,13 @@ const FoodsTabs = (props) => {
       "aria-label": "section-tabs",
       variant: isScrollable ? "scrollable" : "standard",
       tabVariant,
+      slotProps: {
+        list: {
+          sx: {
+            gap: buttonGap
+          }
+        }
+      },
       ...TabsProps2,
       children: tabs.map((tab, tabIndex) => {
         const extraTabProps = {
@@ -96,7 +104,9 @@ const SpecialTabs = styled((props) => {
       // This is the border that shows the selected item below it
       // or on the side of it when it's horizontal
       ".MuiTabs-indicator": {
-        backgroundColor: theme.palette.background.paper
+        display: "none"
+        // backgroundColor: theme.palette.background.paper,
+        // backgroundColor: theme.palette.background.paper,
       },
       ".MuiTabs-flexContainer::after": {
         content: '" "',

package/package.json

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