@skodaflow/web-library 4.2.0 → 6.0.0

package/components/stepper/stepper.d.ts

@@ -1,6 +1,6 @@
-import { FC, HTMLAttributes, ReactNode } from 'react';
-import { SxProps } from '@mui/system';
 import { Theme } from '@mui/material';
+import { SxProps } from '@mui/system';
+import { FC, HTMLAttributes, ReactNode } from 'react';
 export interface StepperProps extends HTMLAttributes<HTMLDivElement> {
     /**
      *  The activeStep of a stepper.

package/components/stepper/stepper.js

@@ -1,2 +1,2 @@
-import{__rest as e}from"tslib";import{jsx as o}from"react/jsx-runtime";import r from"@mui/material/Stepper";import{styled as t}from"@mui/material/styles";import{StepConnector as n,stepConnectorClasses as i,Step as a,StepLabel as l}from"@mui/material";import{flowColors as c}from"../../design/skoda/palette.theme.js";const d=t=>{var{activeStep:n,alternativeLabel:i,children:c,classes:d,connector:p,nonLinear:b,orientation:u,step:f}=t,g=e(t,["activeStep","alternativeLabel","children","classes","connector","nonLinear","orientation","step"]);const x={lineHeight:"16px",fontSize:"12px",fontWeight:"400"};return o(h,{children:o("div",{children:o(r,Object.assign({className:"controllerContainer"},g,{activeStep:n,sx:{maxWidth:800,display:"flex",alignItems:"center",spacing:4},alternativeLabel:i,connector:o(m,{}),children:f.map((e=>o(a,{children:o(l,{style:x,StepIconComponent:s,children:e})},e)))}))})})};function s(e){const{active:r,completed:t,className:n}=e;return o(p,{className:n,children:o("div",r?{className:"QontoStepIcon-active"}:t?{className:"QontoStepIcon-completedIcon"}:{className:"QontoStepIcon-circle"})})}const p=t("div")((({theme:e})=>{let o={};return o={color:"dark"===e.palette.mode?e.palette.grey[700]:"#464748",display:"flex",height:22,alignItems:"center","& .QontoStepIcon-completedIcon":{color:c.onSurface.os700,width:12,height:12,borderRadius:"50%",backgroundColor:"currentColor","&:hover":{borderRadius:"50%",border:`1.5px solid ${c.onSurface.os700}`,color:c.brand.secondary}},"& .QontoStepIcon-active":{color:c.onSurface.os700,width:18,height:18,borderRadius:"50%",marginRight:"5.25px",marginLeft:"0px",backgroundColor:"currentColor","&:hover":{borderRadius:"50%",border:`1.5px solid ${c.onSurface.os700}`,color:c.brand.secondary}},"& .QontoStepIcon-circle":{width:12,height:12,borderRadius:"50%",border:"1.5px solid #C4C6C7",color:"transparent","&:hover":{cursor:"pointer",borderRadius:"50%",border:`1.5px solid ${c.disabled.tertiary}`,backgroundColor:c.disabled.secondary}}},o})),m=t(n)((({theme:e})=>({[`&.${i.alternativeLabel}`]:{top:10,left:"calc(-50% + 8px)",right:"calc(50% + 8px)"},[`&.${i.active}`]:{[`& .${i.line}`]:{borderColor:c.onSurface.os700,width:"60px"}},[`&.${i.completed}`]:{[`& .${i.line}`]:{borderColor:c.onSurface.os700}},[`& .${i.line}`]:{borderColor:"dark"===e.palette.mode?e.palette.grey[800]:c.disabled.primary,borderTopWidth:3,borderRadius:1}}))),h=t("div")((()=>{let e={};return e={"& .controllerContainer":{display:"flex",alignItems:"center",fontFamily:"SKODA Next",fontStyle:"normal",fontWeight:"700",fontSize:"12px",lineHeight:"16px"}},e}));export{d as Stepper};
+import{__rest as e}from"tslib";import{jsx as o}from"react/jsx-runtime";import{StepConnector as r,stepConnectorClasses as t,Step as n,StepLabel as i}from"@mui/material";import a from"@mui/material/Stepper";import{styled as l}from"@mui/material/styles";import{flowColors as c}from"../../design/skoda/palette.theme.js";const d=r=>{var{activeStep:t,alternativeLabel:l,children:c,classes:d,connector:p,nonLinear:b,orientation:u,step:f}=r,g=e(r,["activeStep","alternativeLabel","children","classes","connector","nonLinear","orientation","step"]);const x={lineHeight:"16px",fontSize:"12px",fontWeight:"400"};return o(h,{children:o("div",{children:o(a,Object.assign({className:"controllerContainer"},g,{activeStep:t,sx:{maxWidth:800,display:"flex",alignItems:"center",spacing:4},alternativeLabel:l,connector:o(m,{}),children:f.map((e=>o(n,{children:o(i,{style:x,StepIconComponent:s,children:e})},e)))}))})})};function s(e){const{active:r,completed:t,className:n}=e;return o(p,{className:n,children:o("div",r?{className:"QontoStepIcon-active"}:t?{className:"QontoStepIcon-completedIcon"}:{className:"QontoStepIcon-circle"})})}const p=l("div")((({theme:e})=>{let o={};return o={color:"dark"===e.palette.mode?e.palette.grey[700]:"#464748",display:"flex",height:22,alignItems:"center","& .QontoStepIcon-completedIcon":{color:c.onSurface.os700,width:12,height:12,borderRadius:"50%",backgroundColor:"currentColor","&:hover":{borderRadius:"50%",border:`1.5px solid ${c.onSurface.os700}`,color:c.brand.secondary}},"& .QontoStepIcon-active":{color:c.onSurface.os700,width:18,height:18,borderRadius:"50%",marginRight:"5.25px",marginLeft:"0px",backgroundColor:"currentColor","&:hover":{borderRadius:"50%",border:`1.5px solid ${c.onSurface.os700}`,color:c.brand.secondary}},"& .QontoStepIcon-circle":{width:12,height:12,borderRadius:"50%",border:"1.5px solid #C4C6C7",color:"transparent","&:hover":{cursor:"pointer",borderRadius:"50%",border:`1.5px solid ${c.disabled.tertiary}`,backgroundColor:c.disabled.secondary}}},o})),m=l(r)((({theme:e})=>({[`&.${t.alternativeLabel}`]:{top:10,left:"calc(-50% + 9px)",right:"calc(50% + 9px)"},[`&.${t.active}`]:{[`& .${t.line}`]:{borderColor:c.onSurface.os700,width:"60px"}},[`&.${t.completed}`]:{[`& .${t.line}`]:{borderColor:c.onSurface.os700}},[`& .${t.line}`]:{borderColor:"dark"===e.palette.mode?e.palette.grey[800]:c.disabled.primary,borderTopWidth:3,borderRadius:1}}))),h=l("div")((()=>{let e={};return e={"& .controllerContainer":{display:"flex",alignItems:"center",fontFamily:"SKODA Next",fontStyle:"normal",fontWeight:"700",fontSize:"12px",lineHeight:"16px"}},e}));export{d as Stepper};
 //# sourceMappingURL=stepper.js.map

package/components/stepper/stepper.js.map

@@ -1 +1 @@
-{"version":3,"file":"stepper.js","sources":["../../../src/components/stepper/stepper.tsx"],"sourcesContent":["import { __rest } from \"tslib\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport MuiStepper from '@mui/material/Stepper';\nimport { styled } from '@mui/material/styles';\nimport { Step, StepConnector, stepConnectorClasses, StepLabel } from '@mui/material';\nimport { flowColors } from '../../design/skoda/palette.theme';\nexport const Stepper = (_a) => {\n    var { activeStep, alternativeLabel, children, classes, connector, nonLinear, orientation, step } = _a, props = __rest(_a, [\"activeStep\", \"alternativeLabel\", \"children\", \"classes\", \"connector\", \"nonLinear\", \"orientation\", \"step\"]);\n    const styles = {\n        lineHeight: '16px',\n        fontSize: '12px',\n        fontWeight: '400',\n    };\n    const desktopStepper = () => (_jsx(\"div\", { children: _jsx(MuiStepper, Object.assign({ className: \"controllerContainer\" }, props, { activeStep: activeStep, sx: {\n                maxWidth: 800,\n                display: 'flex',\n                alignItems: 'center',\n                spacing: 4,\n            }, alternativeLabel: alternativeLabel, connector: _jsx(QontoConnector, {}), children: step.map((label) => (_jsx(Step, { children: _jsx(StepLabel, { style: styles, StepIconComponent: QontoStepIcon, children: label }) }, label))) })) }));\n    return _jsx(StepperStyled, { children: desktopStepper() });\n};\nfunction QontoStepIcon(props) {\n    const { active, completed, className } = props;\n    return (_jsx(QontoStepIconRoot, { className: className, children: active ? (_jsx(\"div\", { className: \"QontoStepIcon-active\" })) : completed ? (_jsx(\"div\", { className: \"QontoStepIcon-completedIcon\" })) : (_jsx(\"div\", { className: \"QontoStepIcon-circle\" })) }));\n}\nconst QontoStepIconRoot = styled('div')(({ theme }) => {\n    let style = {};\n    style = {\n        color: theme.palette.mode === 'dark' ? theme.palette.grey[700] : '#464748',\n        display: 'flex',\n        height: 22,\n        alignItems: 'center',\n        '& .QontoStepIcon-completedIcon': {\n            color: flowColors.onSurface.os700,\n            width: 12,\n            height: 12,\n            borderRadius: '50%',\n            backgroundColor: 'currentColor',\n            '&:hover': {\n                borderRadius: '50%',\n                border: `1.5px solid ${flowColors.onSurface.os700}`,\n                color: flowColors.brand.secondary,\n            },\n        },\n        '& .QontoStepIcon-active': {\n            color: flowColors.onSurface.os700,\n            width: 18,\n            height: 18,\n            borderRadius: '50%',\n            marginRight: '5.25px',\n            marginLeft: '0px',\n            backgroundColor: 'currentColor',\n            '&:hover': {\n                borderRadius: '50%',\n                border: `1.5px solid ${flowColors.onSurface.os700}`,\n                color: flowColors.brand.secondary,\n            },\n        },\n        '& .QontoStepIcon-circle': {\n            width: 12,\n            height: 12,\n            borderRadius: '50%',\n            border: '1.5px solid #C4C6C7',\n            color: 'transparent',\n            '&:hover': {\n                cursor: 'pointer',\n                borderRadius: '50%',\n                border: `1.5px solid ${flowColors.disabled.tertiary}`,\n                backgroundColor: flowColors.disabled.secondary,\n            },\n        },\n    };\n    return style;\n});\nconst QontoConnector = styled(StepConnector)(({ theme }) => ({\n    [`&.${stepConnectorClasses.alternativeLabel}`]: {\n        top: 10,\n        left: 'calc(-50% + 8px)',\n        right: 'calc(50% + 8px)',\n    },\n    [`&.${stepConnectorClasses.active}`]: {\n        [`& .${stepConnectorClasses.line}`]: {\n            borderColor: flowColors.onSurface.os700,\n            width: '60px',\n        },\n    },\n    [`&.${stepConnectorClasses.completed}`]: {\n        [`& .${stepConnectorClasses.line}`]: {\n            borderColor: flowColors.onSurface.os700,\n        },\n    },\n    [`& .${stepConnectorClasses.line}`]: {\n        borderColor: theme.palette.mode === 'dark' ? theme.palette.grey[800] : flowColors.disabled.primary,\n        borderTopWidth: 3,\n        borderRadius: 1,\n    },\n}));\nconst StepperStyled = styled('div')(() => {\n    let style = {};\n    const SKODA_NEXT = 'SKODA Next';\n    style = {\n        '& .controllerContainer': {\n            display: 'flex',\n            alignItems: 'center',\n            fontFamily: SKODA_NEXT,\n            fontStyle: 'normal',\n            fontWeight: '700',\n            fontSize: '12px',\n            lineHeight: '16px',\n        },\n    };\n    return style;\n});\n//# sourceMappingURL=stepper.js.map"],"names":["Stepper","_a","activeStep","alternativeLabel","children","classes","connector","nonLinear","orientation","step","props","__rest","styles","lineHeight","fontSize","fontWeight","_jsx","StepperStyled","MuiStepper","Object","assign","className","sx","maxWidth","display","alignItems","spacing","QontoConnector","map","label","Step","StepLabel","style","StepIconComponent","QontoStepIcon","active","completed","QontoStepIconRoot","styled","theme","color","palette","mode","grey","height","flowColors","onSurface","os700","width","borderRadius","backgroundColor","border","brand","secondary","marginRight","marginLeft","cursor","disabled","tertiary","StepConnector","stepConnectorClasses","top","left","right","line","borderColor","primary","borderTopWidth","fontFamily","fontStyle"],"mappings":"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"}
+{"version":3,"file":"stepper.js","sources":["../../../src/components/stepper/stepper.tsx"],"sourcesContent":["import { __rest } from \"tslib\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { Step, StepConnector, StepLabel, stepConnectorClasses } from '@mui/material';\nimport MuiStepper from '@mui/material/Stepper';\nimport { styled } from '@mui/material/styles';\nimport { flowColors } from '../../design/skoda/palette.theme';\nexport const Stepper = (_a) => {\n    var { activeStep, alternativeLabel, children, classes, connector, nonLinear, orientation, step } = _a, props = __rest(_a, [\"activeStep\", \"alternativeLabel\", \"children\", \"classes\", \"connector\", \"nonLinear\", \"orientation\", \"step\"]);\n    const styles = {\n        lineHeight: '16px',\n        fontSize: '12px',\n        fontWeight: '400',\n    };\n    const desktopStepper = () => (_jsx(\"div\", { children: _jsx(MuiStepper, Object.assign({ className: \"controllerContainer\" }, props, { activeStep: activeStep, sx: {\n                maxWidth: 800,\n                display: 'flex',\n                alignItems: 'center',\n                spacing: 4,\n            }, alternativeLabel: alternativeLabel, connector: _jsx(QontoConnector, {}), children: step.map((label) => (_jsx(Step, { children: _jsx(StepLabel, { style: styles, StepIconComponent: QontoStepIcon, children: label }) }, label))) })) }));\n    return _jsx(StepperStyled, { children: desktopStepper() });\n};\nfunction QontoStepIcon(props) {\n    const { active, completed, className } = props;\n    return (_jsx(QontoStepIconRoot, { className: className, children: active ? (_jsx(\"div\", { className: \"QontoStepIcon-active\" })) : completed ? (_jsx(\"div\", { className: \"QontoStepIcon-completedIcon\" })) : (_jsx(\"div\", { className: \"QontoStepIcon-circle\" })) }));\n}\nconst QontoStepIconRoot = styled('div')(({ theme }) => {\n    let style = {};\n    style = {\n        color: theme.palette.mode === 'dark' ? theme.palette.grey[700] : '#464748',\n        display: 'flex',\n        height: 22,\n        alignItems: 'center',\n        '& .QontoStepIcon-completedIcon': {\n            color: flowColors.onSurface.os700,\n            width: 12,\n            height: 12,\n            borderRadius: '50%',\n            backgroundColor: 'currentColor',\n            '&:hover': {\n                borderRadius: '50%',\n                border: `1.5px solid ${flowColors.onSurface.os700}`,\n                color: flowColors.brand.secondary,\n            },\n        },\n        '& .QontoStepIcon-active': {\n            color: flowColors.onSurface.os700,\n            width: 18,\n            height: 18,\n            borderRadius: '50%',\n            marginRight: '5.25px',\n            marginLeft: '0px',\n            backgroundColor: 'currentColor',\n            '&:hover': {\n                borderRadius: '50%',\n                border: `1.5px solid ${flowColors.onSurface.os700}`,\n                color: flowColors.brand.secondary,\n            },\n        },\n        '& .QontoStepIcon-circle': {\n            width: 12,\n            height: 12,\n            borderRadius: '50%',\n            border: '1.5px solid #C4C6C7',\n            color: 'transparent',\n            '&:hover': {\n                cursor: 'pointer',\n                borderRadius: '50%',\n                border: `1.5px solid ${flowColors.disabled.tertiary}`,\n                backgroundColor: flowColors.disabled.secondary,\n            },\n        },\n    };\n    return style;\n});\nconst QontoConnector = styled(StepConnector)(({ theme }) => ({\n    [`&.${stepConnectorClasses.alternativeLabel}`]: {\n        top: 10,\n        left: 'calc(-50% + 9px)',\n        right: 'calc(50% + 9px)',\n    },\n    [`&.${stepConnectorClasses.active}`]: {\n        [`& .${stepConnectorClasses.line}`]: {\n            borderColor: flowColors.onSurface.os700,\n            width: '60px',\n        },\n    },\n    [`&.${stepConnectorClasses.completed}`]: {\n        [`& .${stepConnectorClasses.line}`]: {\n            borderColor: flowColors.onSurface.os700,\n        },\n    },\n    [`& .${stepConnectorClasses.line}`]: {\n        borderColor: theme.palette.mode === 'dark' ? theme.palette.grey[800] : flowColors.disabled.primary,\n        borderTopWidth: 3,\n        borderRadius: 1,\n    },\n}));\nconst StepperStyled = styled('div')(() => {\n    let style = {};\n    const SKODA_NEXT = 'SKODA Next';\n    style = {\n        '& .controllerContainer': {\n            display: 'flex',\n            alignItems: 'center',\n            fontFamily: SKODA_NEXT,\n            fontStyle: 'normal',\n            fontWeight: '700',\n            fontSize: '12px',\n            lineHeight: '16px',\n        },\n    };\n    return style;\n});\n//# sourceMappingURL=stepper.js.map"],"names":["Stepper","_a","activeStep","alternativeLabel","children","classes","connector","nonLinear","orientation","step","props","__rest","styles","lineHeight","fontSize","fontWeight","_jsx","StepperStyled","MuiStepper","Object","assign","className","sx","maxWidth","display","alignItems","spacing","QontoConnector","map","label","Step","StepLabel","style","StepIconComponent","QontoStepIcon","active","completed","QontoStepIconRoot","styled","theme","color","palette","mode","grey","height","flowColors","onSurface","os700","width","borderRadius","backgroundColor","border","brand","secondary","marginRight","marginLeft","cursor","disabled","tertiary","StepConnector","stepConnectorClasses","top","left","right","line","borderColor","primary","borderTopWidth","fontFamily","fontStyle"],"mappings":"4TAMY,MAACA,EAAWC,IACpB,IAAIC,WAAEA,EAAUC,iBAAEA,EAAgBC,SAAEA,EAAQC,QAAEA,EAAOC,UAAEA,EAASC,UAAEA,EAASC,YAAEA,EAAWC,KAAEA,GAASR,EAAIS,EAAQC,EAAOV,EAAI,CAAC,aAAc,mBAAoB,WAAY,UAAW,YAAa,YAAa,cAAe,SAC7N,MAAMW,EAAS,CACXC,WAAY,OACZC,SAAU,OACVC,WAAY,OAQhB,OAAOC,EAAKC,EAAe,CAAEb,SANCY,EAAK,MAAO,CAAEZ,SAAUY,EAAKE,EAAYC,OAAOC,OAAO,CAAEC,UAAW,uBAAyBX,EAAO,CAAER,WAAYA,EAAYoB,GAAI,CACpJC,SAAU,IACVC,QAAS,OACTC,WAAY,SACZC,QAAS,GACVvB,iBAAkBA,EAAkBG,UAAWU,EAAKW,EAAgB,CAAA,GAAKvB,SAAUK,EAAKmB,KAAKC,GAAWb,EAAKc,EAAM,CAAE1B,SAAUY,EAAKe,EAAW,CAAEC,MAAOpB,EAAQqB,kBAAmBC,EAAe9B,SAAUyB,KAAYA,WACzK,EAE9D,SAASK,EAAcxB,GACnB,MAAMyB,OAAEA,EAAMC,UAAEA,EAASf,UAAEA,GAAcX,EACzC,OAAQM,EAAKqB,EAAmB,CAAEhB,UAAWA,EAAWjB,SAAoBY,EAAK,MAAfmB,EAAsB,CAAEd,UAAW,wBAA6Be,EAAyB,CAAEf,UAAW,+BAAiD,CAAEA,UAAW,0BAC1O,CACA,MAAMgB,EAAoBC,EAAO,MAAPA,EAAc,EAAGC,YACvC,IAAIP,EAAQ,CAAA,EA8CZ,OA7CAA,EAAQ,CACJQ,MAA8B,SAAvBD,EAAME,QAAQC,KAAkBH,EAAME,QAAQE,KAAK,KAAO,UACjEnB,QAAS,OACToB,OAAQ,GACRnB,WAAY,SACZ,iCAAkC,CAC9Be,MAAOK,EAAWC,UAAUC,MAC5BC,MAAO,GACPJ,OAAQ,GACRK,aAAc,MACdC,gBAAiB,eACjB,UAAW,CACPD,aAAc,MACdE,OAAQ,eAAeN,EAAWC,UAAUC,QAC5CP,MAAOK,EAAWO,MAAMC,YAGhC,0BAA2B,CACvBb,MAAOK,EAAWC,UAAUC,MAC5BC,MAAO,GACPJ,OAAQ,GACRK,aAAc,MACdK,YAAa,SACbC,WAAY,MACZL,gBAAiB,eACjB,UAAW,CACPD,aAAc,MACdE,OAAQ,eAAeN,EAAWC,UAAUC,QAC5CP,MAAOK,EAAWO,MAAMC,YAGhC,0BAA2B,CACvBL,MAAO,GACPJ,OAAQ,GACRK,aAAc,MACdE,OAAQ,sBACRX,MAAO,cACP,UAAW,CACPgB,OAAQ,UACRP,aAAc,MACdE,OAAQ,eAAeN,EAAWY,SAASC,WAC3CR,gBAAiBL,EAAWY,SAASJ,aAI1CrB,CAAK,IAEVL,EAAiBW,EAAOqB,EAAPrB,EAAsB,EAAGC,YAAa,CACzD,CAAC,KAAKqB,EAAqBzD,oBAAqB,CAC5C0D,IAAK,GACLC,KAAM,mBACNC,MAAO,mBAEX,CAAC,KAAKH,EAAqBzB,UAAW,CAClC,CAAC,MAAMyB,EAAqBI,QAAS,CACjCC,YAAapB,EAAWC,UAAUC,MAClCC,MAAO,SAGf,CAAC,KAAKY,EAAqBxB,aAAc,CACrC,CAAC,MAAMwB,EAAqBI,QAAS,CACjCC,YAAapB,EAAWC,UAAUC,QAG1C,CAAC,MAAMa,EAAqBI,QAAS,CACjCC,YAAoC,SAAvB1B,EAAME,QAAQC,KAAkBH,EAAME,QAAQE,KAAK,KAAOE,EAAWY,SAASS,QAC3FC,eAAgB,EAChBlB,aAAc,OAGhBhC,EAAgBqB,EAAO,MAAPA,EAAc,KAChC,IAAIN,EAAQ,CAAA,EAaZ,OAXAA,EAAQ,CACJ,yBAA0B,CACtBR,QAAS,OACTC,WAAY,SACZ2C,WALW,aAMXC,UAAW,SACXtD,WAAY,MACZD,SAAU,OACVD,WAAY,SAGbmB,CAAK"}

package/components/tab/hook/useTabs.d.ts

@@ -1,3 +1,4 @@
+/** @deprecated use Tab component from @mui/material instead */
 declare const useTabs: () => {
     handleOverflowingTabs: (tabsRef: any, windowWidth: any, children: any, setMenuChildren: any) => void;
     handleIsMobileView: (variantSecondaryNavigation: any, isMobileView: any, setIsMobileView: any, setWindowWidth: any) => void;

package/components/tab/hook/useTabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"useTabs.js","sources":["../../../../src/components/tab/hook/useTabs.ts"],"sourcesContent":["import { useTheme } from '@mui/material';\nimport React, { useCallback } from 'react';\nconst useTabs = () => {\n    const theme = useTheme();\n    //HANDLE THE RENDER OF THE MORE BTN TABS AND THE OVERFLOWING TABS THAT MUST BE SHOWN INSIDE THE DROPDOWN\n    const handleOverflowingTabs = useCallback((tabsRef, windowWidth, children, setMenuChildren) => {\n        const tabsListParent = tabsRef.current.closest('div');\n        const tabsListContainer = tabsListParent.querySelectorAll('div')[1];\n        const tabsList = tabsListContainer.querySelectorAll('.MuiTab-root');\n        const moreBtn = [...tabsList].find((item) => item.id === 'simple-tab-more');\n        tabsList.forEach((item) => {\n            item.style.display = 'inline-flex';\n        });\n        //if the screen size is desktop view, handle more btn, else hide more btn\n        const hiddenItems = [];\n        const primaryWidth = tabsListContainer.offsetWidth;\n        const primaryItems = [...tabsList].filter((item) => item.id !== 'simple-tab-more');\n        const moreBtnWidth = moreBtn.offsetWidth + 58;\n        //we are hiding tabs if the overflow the tabs container\n        primaryItems.forEach((item) => {\n            if (primaryWidth <= item.offsetLeft + (item.offsetWidth + moreBtnWidth)) {\n                item.style.display = 'none';\n                hiddenItems.push(item.id);\n            }\n        });\n        // if there are hidden elements (overflowing) show the more tabs and add hidden elements inisde the menu list\n        //else hide more button\n        if (!hiddenItems.length) {\n            moreBtn.style.display = 'none';\n        }\n        else {\n            const arr = [];\n            hiddenItems.forEach((item) => {\n                const filteredChildren = React.Children.toArray(children).find((child) => item === 'simple-tab-' + child.props.value);\n                if (filteredChildren) {\n                    arr.push(filteredChildren);\n                }\n            });\n            setMenuChildren(arr);\n        }\n    }, [theme.breakpoints.values.lg]);\n    const handleIsMobileView = useCallback((variantSecondaryNavigation, isMobileView, setIsMobileView, setWindowWidth) => {\n        setWindowWidth(window.innerWidth);\n        if (variantSecondaryNavigation) {\n            if (window.innerWidth <= theme.breakpoints.values.md && !isMobileView) {\n                setIsMobileView(true);\n            }\n            else if (window.innerWidth > theme.breakpoints.values.md) {\n                setIsMobileView(false);\n            }\n        }\n    }, [theme.breakpoints.values.md]);\n    //Returns the id and the aria controls for the tab component\n    const a11yProps = useCallback((index) => {\n        return {\n            id: `simple-tab-${index}`,\n            'aria-controls': `simple-tabpanel-${index}`,\n        };\n    }, []);\n    return {\n        handleOverflowingTabs,\n        handleIsMobileView,\n        a11yProps,\n    };\n};\nexport default useTabs;\n//# sourceMappingURL=useTabs.js.map"],"names":["useTabs","theme","useTheme","handleOverflowingTabs","useCallback","tabsRef","windowWidth","children","setMenuChildren","tabsListContainer","current","closest","querySelectorAll","tabsList","moreBtn","find","item","id","forEach","style","display","hiddenItems","primaryWidth","offsetWidth","primaryItems","filter","moreBtnWidth","offsetLeft","push","length","arr","filteredChildren","React","Children","toArray","child","props","value","breakpoints","values","lg","handleIsMobileView","variantSecondaryNavigation","isMobileView","setIsMobileView","setWindowWidth","window","innerWidth","md","a11yProps","index"],"mappings":"gFAEK,MAACA,EAAU,KACZ,MAAMC,EAAQC,IAwDd,MAAO,CACHC,sBAvD0BC,GAAY,CAACC,EAASC,EAAaC,EAAUC,KACvE,MACMC,EADiBJ,EAAQK,QAAQC,QAAQ,OACNC,iBAAiB,OAAO,GAC3DC,EAAWJ,EAAkBG,iBAAiB,gBAC9CE,EAAU,IAAID,GAAUE,MAAMC,GAAqB,oBAAZA,EAAKC,KAClDJ,EAASK,SAASF,IACdA,EAAKG,MAAMC,QAAU,aAAa,IAGtC,MAAMC,EAAc,GACdC,EAAeb,EAAkBc,YACjCC,EAAe,IAAIX,GAAUY,QAAQT,GAAqB,oBAAZA,EAAKC,KACnDS,EAAeZ,EAAQS,YAAc,GAU3C,GARAC,EAAaN,SAASF,IACdM,GAAgBN,EAAKW,YAAcX,EAAKO,YAAcG,KACtDV,EAAKG,MAAMC,QAAU,OACrBC,EAAYO,KAAKZ,EAAKC,IACzB,IAIAI,EAAYQ,OAGZ,CACD,MAAMC,EAAM,GACZT,EAAYH,SAASF,IACjB,MAAMe,EAAmBC,EAAMC,SAASC,QAAQ3B,GAAUQ,MAAMoB,GAAUnB,IAAS,cAAgBmB,EAAMC,MAAMC,QAC3GN,GACAD,EAAIF,KAAKG,EACZ,IAELvB,EAAgBsB,EACnB,MAXGhB,EAAQK,MAAMC,QAAU,MAW3B,GACF,CAACnB,EAAMqC,YAAYC,OAAOC,KAqBzBC,mBApBuBrC,GAAY,CAACsC,EAA4BC,EAAcC,EAAiBC,KAC/FA,EAAeC,OAAOC,YAClBL,IACII,OAAOC,YAAc9C,EAAMqC,YAAYC,OAAOS,KAAOL,EACrDC,GAAgB,GAEXE,OAAOC,WAAa9C,EAAMqC,YAAYC,OAAOS,IAClDJ,GAAgB,GAEvB,GACF,CAAC3C,EAAMqC,YAAYC,OAAOS,KAWzBC,UATc7C,GAAa8C,IACpB,CACHjC,GAAI,cAAciC,IAClB,gBAAiB,mBAAmBA,OAEzC,IAKF"}
+{"version":3,"file":"useTabs.js","sources":["../../../../src/components/tab/hook/useTabs.ts"],"sourcesContent":["import { useTheme } from '@mui/material';\nimport React, { useCallback } from 'react';\n/** @deprecated use Tab component from @mui/material instead */\nconst useTabs = () => {\n    const theme = useTheme();\n    //HANDLE THE RENDER OF THE MORE BTN TABS AND THE OVERFLOWING TABS THAT MUST BE SHOWN INSIDE THE DROPDOWN\n    const handleOverflowingTabs = useCallback((tabsRef, windowWidth, children, setMenuChildren) => {\n        const tabsListParent = tabsRef.current.closest('div');\n        const tabsListContainer = tabsListParent.querySelectorAll('div')[1];\n        const tabsList = tabsListContainer.querySelectorAll('.MuiTab-root');\n        const moreBtn = [...tabsList].find((item) => item.id === 'simple-tab-more');\n        tabsList.forEach((item) => {\n            item.style.display = 'inline-flex';\n        });\n        //if the screen size is desktop view, handle more btn, else hide more btn\n        const hiddenItems = [];\n        const primaryWidth = tabsListContainer.offsetWidth;\n        const primaryItems = [...tabsList].filter((item) => item.id !== 'simple-tab-more');\n        const moreBtnWidth = moreBtn.offsetWidth + 58;\n        //we are hiding tabs if the overflow the tabs container\n        primaryItems.forEach((item) => {\n            if (primaryWidth <= item.offsetLeft + (item.offsetWidth + moreBtnWidth)) {\n                item.style.display = 'none';\n                hiddenItems.push(item.id);\n            }\n        });\n        // if there are hidden elements (overflowing) show the more tabs and add hidden elements inisde the menu list\n        //else hide more button\n        if (!hiddenItems.length) {\n            moreBtn.style.display = 'none';\n        }\n        else {\n            const arr = [];\n            hiddenItems.forEach((item) => {\n                const filteredChildren = React.Children.toArray(children).find((child) => item === 'simple-tab-' + child.props.value);\n                if (filteredChildren) {\n                    arr.push(filteredChildren);\n                }\n            });\n            setMenuChildren(arr);\n        }\n    }, [theme.breakpoints.values.lg]);\n    const handleIsMobileView = useCallback((variantSecondaryNavigation, isMobileView, setIsMobileView, setWindowWidth) => {\n        setWindowWidth(window.innerWidth);\n        if (variantSecondaryNavigation) {\n            if (window.innerWidth <= theme.breakpoints.values.md && !isMobileView) {\n                setIsMobileView(true);\n            }\n            else if (window.innerWidth > theme.breakpoints.values.md) {\n                setIsMobileView(false);\n            }\n        }\n    }, [theme.breakpoints.values.md]);\n    //Returns the id and the aria controls for the tab component\n    const a11yProps = useCallback((index) => {\n        return {\n            id: `simple-tab-${index}`,\n            'aria-controls': `simple-tabpanel-${index}`,\n        };\n    }, []);\n    return {\n        handleOverflowingTabs,\n        handleIsMobileView,\n        a11yProps,\n    };\n};\nexport default useTabs;\n//# sourceMappingURL=useTabs.js.map"],"names":["useTabs","theme","useTheme","handleOverflowingTabs","useCallback","tabsRef","windowWidth","children","setMenuChildren","tabsListContainer","current","closest","querySelectorAll","tabsList","moreBtn","find","item","id","forEach","style","display","hiddenItems","primaryWidth","offsetWidth","primaryItems","filter","moreBtnWidth","offsetLeft","push","length","arr","filteredChildren","React","Children","toArray","child","props","value","breakpoints","values","lg","handleIsMobileView","variantSecondaryNavigation","isMobileView","setIsMobileView","setWindowWidth","window","innerWidth","md","a11yProps","index"],"mappings":"gFAGK,MAACA,EAAU,KACZ,MAAMC,EAAQC,IAwDd,MAAO,CACHC,sBAvD0BC,GAAY,CAACC,EAASC,EAAaC,EAAUC,KACvE,MACMC,EADiBJ,EAAQK,QAAQC,QAAQ,OACNC,iBAAiB,OAAO,GAC3DC,EAAWJ,EAAkBG,iBAAiB,gBAC9CE,EAAU,IAAID,GAAUE,MAAMC,GAAqB,oBAAZA,EAAKC,KAClDJ,EAASK,SAASF,IACdA,EAAKG,MAAMC,QAAU,aAAa,IAGtC,MAAMC,EAAc,GACdC,EAAeb,EAAkBc,YACjCC,EAAe,IAAIX,GAAUY,QAAQT,GAAqB,oBAAZA,EAAKC,KACnDS,EAAeZ,EAAQS,YAAc,GAU3C,GARAC,EAAaN,SAASF,IACdM,GAAgBN,EAAKW,YAAcX,EAAKO,YAAcG,KACtDV,EAAKG,MAAMC,QAAU,OACrBC,EAAYO,KAAKZ,EAAKC,IACzB,IAIAI,EAAYQ,OAGZ,CACD,MAAMC,EAAM,GACZT,EAAYH,SAASF,IACjB,MAAMe,EAAmBC,EAAMC,SAASC,QAAQ3B,GAAUQ,MAAMoB,GAAUnB,IAAS,cAAgBmB,EAAMC,MAAMC,QAC3GN,GACAD,EAAIF,KAAKG,EACZ,IAELvB,EAAgBsB,EACnB,MAXGhB,EAAQK,MAAMC,QAAU,MAW3B,GACF,CAACnB,EAAMqC,YAAYC,OAAOC,KAqBzBC,mBApBuBrC,GAAY,CAACsC,EAA4BC,EAAcC,EAAiBC,KAC/FA,EAAeC,OAAOC,YAClBL,IACII,OAAOC,YAAc9C,EAAMqC,YAAYC,OAAOS,KAAOL,EACrDC,GAAgB,GAEXE,OAAOC,WAAa9C,EAAMqC,YAAYC,OAAOS,IAClDJ,GAAgB,GAEvB,GACF,CAAC3C,EAAMqC,YAAYC,OAAOS,KAWzBC,UATc7C,GAAa8C,IACpB,CACHjC,GAAI,cAAciC,IAClB,gBAAiB,mBAAmBA,OAEzC,IAKF"}

package/components/tab/menuTab.d.ts

@@ -32,5 +32,6 @@ export interface TabProps {
  * @description SkodaFlow Tab component.
  * @param props TabProps
  * @returns React Functional Component
+ * @deprecated use Tab component from @mui/material instead
  */
 export declare const MenuTab: React.ForwardRefExoticComponent<TabProps & React.RefAttributes<HTMLDivElement>>;

package/components/tab/menuTab.js

@@ -1,2 +1,2 @@
-import{jsx as e,jsxs as o,Fragment as a}from"react/jsx-runtime";import r,{forwardRef as i,useContext as l,useState as t,useCallback as n,useEffect as c}from"react";import{TabsContext as p}from"./tabs.js";import{MenuItem as s,Popper as m,ClickAwayListener as d,Fade as b,styled as u,MenuList as h}from"@mui/material";import{Icon as x}from"../icon/icon.js";import f from"./tabStyled.js";import v from"./hook/useTabs.js";const k=i((({label:i,value:u,children:h},k)=>{const{activeTab:C,updateActiveTab:g,smallSize:j}=l(p),[y,T]=t(!1),[S,z]=t(!1),[A,P]=t(null),[N,O]=t(null),{a11yProps:E}=v(),H=n((e=>{e.href?window.open(e.href,e.target):g(e.value,!0),z(!1),e.onClick&&e.onClick(e.value),e.analyticsCallback&&e.analyticsCallback(e.value),O(e.label)}),[g]),I=n((e=>{z(!S),P(e.currentTarget)}),[S]),M=n((()=>r.Children.map(h,(o=>e(s,{style:{fontSize:"16px"},onClick:()=>H(o.props),children:o.props.label})))),[h,H]);return c((()=>{T(C===u)}),[C,y,u]),o(a,{children:[e(f,Object.assign({ref:k,wrapped:!0,onClick:I,smallSize:j,isActive:y,value:u,tabIndex:1,label:N||i},E(u),{icon:e(x,{className:S?"chevron-up":"chevron-down"}),iconPosition:"end",className:"MuiTab-more"})),e(m,{open:S,anchorEl:A,placement:"bottom",transition:!0,children:({TransitionProps:o})=>e(d,{onClickAway:()=>z(!1),children:e(b,Object.assign({},o,{timeout:350,children:e(w,{id:"more-tabs-menu",children:M()})}))})})]})})),w=u(h)((()=>({top:"13px",left:"27px",boxShadow:"rgb(0 0 0 / 15%) 0px 3px 8px",borderRadius:"4px",padding:"0px",width:"131px",maxHeight:"240px",overflow:"overlay"})));export{k as MenuTab};
+import{jsx as e,jsxs as o,Fragment as i}from"react/jsx-runtime";import r,{forwardRef as a,useContext as n,useState as l,useCallback as t,useEffect as c}from"react";import{TabsContext as p}from"./tabs.js";import{MenuItem as s,Popper as m,ClickAwayListener as d,Fade as b,styled as u,MenuList as h}from"@mui/material";import{Icon as x}from"../icon/icon.js";import"../icon/icon.definitions.js";import f from"./tabStyled.js";import v from"./hook/useTabs.js";const j=a((({label:a,value:u,children:h},j)=>{const{activeTab:w,updateActiveTab:C,smallSize:g}=n(p),[y,T]=l(!1),[S,z]=l(!1),[A,P]=l(null),[O,E]=l(null),{a11yProps:H}=v(),I=t((e=>{e.href?window.open(e.href,e.target):C(e.value,!0),z(!1),e.onClick&&e.onClick(e.value),e.analyticsCallback&&e.analyticsCallback(e.value),E(e.label)}),[C]),M=t((e=>{z(!S),P(e.currentTarget)}),[S]),N=t((()=>r.Children.map(h,(o=>e(s,{style:{fontSize:"16px"},onClick:()=>I(o.props),children:o.props.label})))),[h,I]);return c((()=>{T(w===u)}),[w,y,u]),o(i,{children:[e(f,Object.assign({ref:j,wrapped:!0,onClick:M,smallSize:g,isActive:y,value:u,tabIndex:1,label:O||a},H(u),{icon:e(x,{name:S?"chevron-up":"chevron-down"}),iconPosition:"end",className:"MuiTab-more"})),e(m,{open:S,anchorEl:A,placement:"bottom",transition:!0,children:({TransitionProps:o})=>e(d,{onClickAway:()=>z(!1),children:e(b,Object.assign({},o,{timeout:350,children:e(k,{id:"more-tabs-menu",children:N()})}))})})]})})),k=u(h)((()=>({top:"13px",left:"27px",boxShadow:"rgb(0 0 0 / 15%) 0px 3px 8px",borderRadius:"4px",padding:"0px",width:"131px",maxHeight:"240px",overflow:"overlay"})));export{j as MenuTab};
 //# sourceMappingURL=menuTab.js.map

package/components/tab/menuTab.js.map

@@ -1 +1 @@
-{"version":3,"file":"menuTab.js","sources":["../../../src/components/tab/menuTab.tsx"],"sourcesContent":["import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport React, { useState, useContext, useEffect, useCallback, forwardRef } from 'react';\nimport { TabsContext } from './tabs';\nimport { ClickAwayListener, Fade, MenuItem, MenuList, Popper, styled } from '@mui/material';\nimport { Icon } from '../icon';\nimport TabStyled from './tabStyled';\nimport useTabs from './hook/useTabs';\n/**\n * @description SkodaFlow Tab component.\n * @param props TabProps\n * @returns React Functional Component\n */\nexport const MenuTab = forwardRef(({ label, value, children }, ref) => {\n    const { activeTab, updateActiveTab, smallSize } = useContext(TabsContext);\n    const [isActive, setIsActive] = useState(false);\n    const [open, setOpen] = useState(false);\n    const [anchorEl, setAnchorEl] = useState(null);\n    const [selectedLabel, setSelectedLabel] = useState(null);\n    const { a11yProps } = useTabs();\n    //On tab clicked: set the new activeTab selected\n    //if is a menu tab: set the anchor element for the menu and set the width of the menu equal to the tab component\n    //then call the onClick from outside\n    const handleOnClick = useCallback((_props) => {\n        if (!_props.href) {\n            updateActiveTab(_props.value, true);\n        }\n        else {\n            window.open(_props.href, _props.target);\n        }\n        setOpen(false);\n        _props.onClick && _props.onClick(_props.value);\n        _props.analyticsCallback && _props.analyticsCallback(_props.value);\n        setSelectedLabel(_props.label);\n    }, [updateActiveTab]);\n    const handleOpenMenu = useCallback((e) => {\n        setOpen(!open);\n        setAnchorEl(e.currentTarget);\n    }, [open]);\n    //RETURNS ALL THE TABS OVERFLOWING AS MENU ITEMS\n    const handleMenuItems = useCallback(() => {\n        return React.Children.map(children, (child) => {\n            return (_jsx(MenuItem, { style: { fontSize: '16px' }, onClick: () => handleOnClick(child.props), children: child.props.label }));\n        });\n    }, [children, handleOnClick]);\n    //If the activeTab is equal to the current tab, set active\n    useEffect(() => {\n        if (activeTab === value) {\n            setIsActive(true);\n        }\n        else {\n            setIsActive(false);\n        }\n    }, [activeTab, isActive, value]);\n    return (_jsxs(_Fragment, { children: [_jsx(TabStyled, Object.assign({ ref: ref, wrapped: true, onClick: handleOpenMenu, smallSize: smallSize, isActive: isActive, value: value, tabIndex: 1, label: selectedLabel || label }, a11yProps(value), { icon: _jsx(Icon, { className: open ? 'chevron-up' : 'chevron-down' }), iconPosition: \"end\", className: \"MuiTab-more\" })), _jsx(Popper, { open: open, anchorEl: anchorEl, placement: \"bottom\", transition: true, children: ({ TransitionProps }) => (_jsx(ClickAwayListener, { onClickAway: () => setOpen(false), children: _jsx(Fade, Object.assign({}, TransitionProps, { timeout: 350, children: _jsx(MenuStyled, { id: \"more-tabs-menu\", children: handleMenuItems() }) })) })) })] }));\n});\nconst MenuStyled = styled(MenuList)(() => {\n    return {\n        top: '13px',\n        left: '27px',\n        boxShadow: 'rgb(0 0 0 / 15%) 0px 3px 8px',\n        borderRadius: '4px',\n        padding: '0px',\n        width: '131px',\n        maxHeight: '240px',\n        overflow: 'overlay',\n    };\n});\n//# sourceMappingURL=menuTab.js.map"],"names":["MenuTab","forwardRef","label","value","children","ref","activeTab","updateActiveTab","smallSize","useContext","TabsContext","isActive","setIsActive","useState","open","setOpen","anchorEl","setAnchorEl","selectedLabel","setSelectedLabel","a11yProps","useTabs","handleOnClick","useCallback","_props","href","window","target","onClick","analyticsCallback","handleOpenMenu","e","currentTarget","handleMenuItems","React","Children","map","child","_jsx","MenuItem","style","fontSize","props","useEffect","_jsxs","_Fragment","TabStyled","Object","assign","wrapped","tabIndex","icon","Icon","className","iconPosition","Popper","placement","transition","TransitionProps","ClickAwayListener","onClickAway","Fade","timeout","MenuStyled","id","styled","MenuList","top","left","boxShadow","borderRadius","padding","width","maxHeight","overflow"],"mappings":"kaAYY,MAACA,EAAUC,GAAW,EAAGC,QAAOC,QAAOC,YAAYC,KAC3D,MAAMC,UAAEA,EAASC,gBAAEA,EAAeC,UAAEA,GAAcC,EAAWC,IACtDC,EAAUC,GAAeC,GAAS,IAClCC,EAAMC,GAAWF,GAAS,IAC1BG,EAAUC,GAAeJ,EAAS,OAClCK,EAAeC,GAAoBN,EAAS,OAC7CO,UAAEA,GAAcC,IAIhBC,EAAgBC,GAAaC,IAC1BA,EAAOC,KAIRC,OAAOZ,KAAKU,EAAOC,KAAMD,EAAOG,QAHhCpB,EAAgBiB,EAAOrB,OAAO,GAKlCY,GAAQ,GACRS,EAAOI,SAAWJ,EAAOI,QAAQJ,EAAOrB,OACxCqB,EAAOK,mBAAqBL,EAAOK,kBAAkBL,EAAOrB,OAC5DgB,EAAiBK,EAAOtB,MAAM,GAC/B,CAACK,IACEuB,EAAiBP,GAAaQ,IAChChB,GAASD,GACTG,EAAYc,EAAEC,cAAc,GAC7B,CAAClB,IAEEmB,EAAkBV,GAAY,IACzBW,EAAMC,SAASC,IAAIhC,GAAWiC,GACzBC,EAAKC,EAAU,CAAEC,MAAO,CAAEC,SAAU,QAAUb,QAAS,IAAMN,EAAce,EAAMK,OAAQtC,SAAUiC,EAAMK,MAAMxC,WAE5H,CAACE,EAAUkB,IAUd,OARAqB,GAAU,KAEF/B,EADAN,IAAcH,EAKjB,GACF,CAACG,EAAWK,EAAUR,IACjByC,EAAMC,EAAW,CAAEzC,SAAU,CAACkC,EAAKQ,EAAWC,OAAOC,OAAO,CAAE3C,IAAKA,EAAK4C,SAAS,EAAMrB,QAASE,EAAgBtB,UAAWA,EAAWG,SAAUA,EAAUR,MAAOA,EAAO+C,SAAU,EAAGhD,MAAOgB,GAAiBhB,GAASkB,EAAUjB,GAAQ,CAAEgD,KAAMb,EAAKc,EAAM,CAAEC,UAAWvC,EAAO,aAAe,iBAAmBwC,aAAc,MAAOD,UAAW,iBAAmBf,EAAKiB,EAAQ,CAAEzC,KAAMA,EAAME,SAAUA,EAAUwC,UAAW,SAAUC,YAAY,EAAMrD,SAAU,EAAGsD,qBAAuBpB,EAAKqB,EAAmB,CAAEC,YAAa,IAAM7C,GAAQ,GAAQX,SAAUkC,EAAKuB,EAAMd,OAAOC,OAAO,CAAE,EAAEU,EAAiB,CAAEI,QAAS,IAAK1D,SAAUkC,EAAKyB,EAAY,CAAEC,GAAI,iBAAkB5D,SAAU6B,eAAqC,IAE3sB8B,EAAaE,EAAOC,EAAPD,EAAiB,KACzB,CACHE,IAAK,OACLC,KAAM,OACNC,UAAW,+BACXC,aAAc,MACdC,QAAS,MACTC,MAAO,QACPC,UAAW,QACXC,SAAU"}
+{"version":3,"file":"menuTab.js","sources":["../../../src/components/tab/menuTab.tsx"],"sourcesContent":["import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport React, { useState, useContext, useEffect, useCallback, forwardRef } from 'react';\nimport { TabsContext } from './tabs';\nimport { ClickAwayListener, Fade, MenuItem, MenuList, Popper, styled } from '@mui/material';\nimport { Icon } from '../icon';\nimport TabStyled from './tabStyled';\nimport useTabs from './hook/useTabs';\n/**\n * @description SkodaFlow Tab component.\n * @param props TabProps\n * @returns React Functional Component\n * @deprecated use Tab component from @mui/material instead\n */\nexport const MenuTab = forwardRef(({ label, value, children }, ref) => {\n    const { activeTab, updateActiveTab, smallSize } = useContext(TabsContext);\n    const [isActive, setIsActive] = useState(false);\n    const [open, setOpen] = useState(false);\n    const [anchorEl, setAnchorEl] = useState(null);\n    const [selectedLabel, setSelectedLabel] = useState(null);\n    const { a11yProps } = useTabs();\n    //On tab clicked: set the new activeTab selected\n    //if is a menu tab: set the anchor element for the menu and set the width of the menu equal to the tab component\n    //then call the onClick from outside\n    const handleOnClick = useCallback((_props) => {\n        if (!_props.href) {\n            updateActiveTab(_props.value, true);\n        }\n        else {\n            window.open(_props.href, _props.target);\n        }\n        setOpen(false);\n        _props.onClick && _props.onClick(_props.value);\n        _props.analyticsCallback && _props.analyticsCallback(_props.value);\n        setSelectedLabel(_props.label);\n    }, [updateActiveTab]);\n    const handleOpenMenu = useCallback((e) => {\n        setOpen(!open);\n        setAnchorEl(e.currentTarget);\n    }, [open]);\n    //RETURNS ALL THE TABS OVERFLOWING AS MENU ITEMS\n    const handleMenuItems = useCallback(() => {\n        return React.Children.map(children, (child) => {\n            return (_jsx(MenuItem, { style: { fontSize: '16px' }, onClick: () => handleOnClick(child.props), children: child.props.label }));\n        });\n    }, [children, handleOnClick]);\n    //If the activeTab is equal to the current tab, set active\n    useEffect(() => {\n        if (activeTab === value) {\n            setIsActive(true);\n        }\n        else {\n            setIsActive(false);\n        }\n    }, [activeTab, isActive, value]);\n    return (_jsxs(_Fragment, { children: [_jsx(TabStyled, Object.assign({ ref: ref, wrapped: true, onClick: handleOpenMenu, smallSize: smallSize, isActive: isActive, value: value, tabIndex: 1, label: selectedLabel || label }, a11yProps(value), { icon: _jsx(Icon, { name: open ? 'chevron-up' : 'chevron-down' }), iconPosition: \"end\", className: \"MuiTab-more\" })), _jsx(Popper, { open: open, anchorEl: anchorEl, placement: \"bottom\", transition: true, children: ({ TransitionProps }) => (_jsx(ClickAwayListener, { onClickAway: () => setOpen(false), children: _jsx(Fade, Object.assign({}, TransitionProps, { timeout: 350, children: _jsx(MenuStyled, { id: \"more-tabs-menu\", children: handleMenuItems() }) })) })) })] }));\n});\nconst MenuStyled = styled(MenuList)(() => {\n    return {\n        top: '13px',\n        left: '27px',\n        boxShadow: 'rgb(0 0 0 / 15%) 0px 3px 8px',\n        borderRadius: '4px',\n        padding: '0px',\n        width: '131px',\n        maxHeight: '240px',\n        overflow: 'overlay',\n    };\n});\n//# sourceMappingURL=menuTab.js.map"],"names":["MenuTab","forwardRef","label","value","children","ref","activeTab","updateActiveTab","smallSize","useContext","TabsContext","isActive","setIsActive","useState","open","setOpen","anchorEl","setAnchorEl","selectedLabel","setSelectedLabel","a11yProps","useTabs","handleOnClick","useCallback","_props","href","window","target","onClick","analyticsCallback","handleOpenMenu","e","currentTarget","handleMenuItems","React","Children","map","child","_jsx","MenuItem","style","fontSize","props","useEffect","_jsxs","_Fragment","TabStyled","Object","assign","wrapped","tabIndex","icon","Icon","name","iconPosition","className","Popper","placement","transition","TransitionProps","ClickAwayListener","onClickAway","Fade","timeout","MenuStyled","id","styled","MenuList","top","left","boxShadow","borderRadius","padding","width","maxHeight","overflow"],"mappings":"scAaY,MAACA,EAAUC,GAAW,EAAGC,QAAOC,QAAOC,YAAYC,KAC3D,MAAMC,UAAEA,EAASC,gBAAEA,EAAeC,UAAEA,GAAcC,EAAWC,IACtDC,EAAUC,GAAeC,GAAS,IAClCC,EAAMC,GAAWF,GAAS,IAC1BG,EAAUC,GAAeJ,EAAS,OAClCK,EAAeC,GAAoBN,EAAS,OAC7CO,UAAEA,GAAcC,IAIhBC,EAAgBC,GAAaC,IAC1BA,EAAOC,KAIRC,OAAOZ,KAAKU,EAAOC,KAAMD,EAAOG,QAHhCpB,EAAgBiB,EAAOrB,OAAO,GAKlCY,GAAQ,GACRS,EAAOI,SAAWJ,EAAOI,QAAQJ,EAAOrB,OACxCqB,EAAOK,mBAAqBL,EAAOK,kBAAkBL,EAAOrB,OAC5DgB,EAAiBK,EAAOtB,MAAM,GAC/B,CAACK,IACEuB,EAAiBP,GAAaQ,IAChChB,GAASD,GACTG,EAAYc,EAAEC,cAAc,GAC7B,CAAClB,IAEEmB,EAAkBV,GAAY,IACzBW,EAAMC,SAASC,IAAIhC,GAAWiC,GACzBC,EAAKC,EAAU,CAAEC,MAAO,CAAEC,SAAU,QAAUb,QAAS,IAAMN,EAAce,EAAMK,OAAQtC,SAAUiC,EAAMK,MAAMxC,WAE5H,CAACE,EAAUkB,IAUd,OARAqB,GAAU,KAEF/B,EADAN,IAAcH,EAKjB,GACF,CAACG,EAAWK,EAAUR,IACjByC,EAAMC,EAAW,CAAEzC,SAAU,CAACkC,EAAKQ,EAAWC,OAAOC,OAAO,CAAE3C,IAAKA,EAAK4C,SAAS,EAAMrB,QAASE,EAAgBtB,UAAWA,EAAWG,SAAUA,EAAUR,MAAOA,EAAO+C,SAAU,EAAGhD,MAAOgB,GAAiBhB,GAASkB,EAAUjB,GAAQ,CAAEgD,KAAMb,EAAKc,EAAM,CAAEC,KAAMvC,EAAO,aAAe,iBAAmBwC,aAAc,MAAOC,UAAW,iBAAmBjB,EAAKkB,EAAQ,CAAE1C,KAAMA,EAAME,SAAUA,EAAUyC,UAAW,SAAUC,YAAY,EAAMtD,SAAU,EAAGuD,qBAAuBrB,EAAKsB,EAAmB,CAAEC,YAAa,IAAM9C,GAAQ,GAAQX,SAAUkC,EAAKwB,EAAMf,OAAOC,OAAO,CAAE,EAAEW,EAAiB,CAAEI,QAAS,IAAK3D,SAAUkC,EAAK0B,EAAY,CAAEC,GAAI,iBAAkB7D,SAAU6B,eAAqC,IAEtsB+B,EAAaE,EAAOC,EAAPD,EAAiB,KACzB,CACHE,IAAK,OACLC,KAAM,OACNC,UAAW,+BACXC,aAAc,MACdC,QAAS,MACTC,MAAO,QACPC,UAAW,QACXC,SAAU"}

package/components/tab/secondaryNavigation/secondaryNavigationTabs.js

@@ -1,2 +1,2 @@
-import{jsxs as o,jsx as r,Fragment as e}from"react/jsx-runtime";import i,{useState as t,useCallback as n,useEffect as a}from"react";import p from"@mui/material/AppBar";import l from"@mui/material/Toolbar";import{Icon as s}from"../../icon/icon.js";import d from"./secondaryTabStyled.js";import{styled as c,Backdrop as m,Popper as h,MenuList as b,MenuItem as x,Box as u,ClickAwayListener as g,Fade as f}from"@mui/material";import{Divider as v}from"../../divider/divider.js";import{flowColors as k}from"../../../design/skoda/palette.theme.js";const y=({currentActiveTab:p,setCurrentActiveTab:c,children:m})=>{const[h,b]=t(null),[k,y]=t(null),[w,z]=t(!1),[R,S]=t(null),O=n((o=>{c(o.value),o.onClick&&o.onClick()}),[c]),B=n((o=>{z(!w),y(o.currentTarget)}),[w]),I=n((i=>i.href?o("a",{href:i.href,target:i.target||null,children:[r(s,{color:"inherit",className:i.icon||"more-horizontal"}),i.label]}):o(e,{children:[r(s,{color:"inherit",className:i.icon||"more-horizontal"}),i.label]})),[]),L=n((o=>{S(o.label),o.href?window.open(o.href,o.target):c(o.value),z(!1),o.onClick&&o.onClick(o.value)}),[c]),M=n((()=>h.slice(3).map(((e,i)=>o("div",{children:[r(x,{onClick:()=>L(e.props),children:e.props.label},i),r(v,{orientation:"horizontal",textAlign:"center",variant:"middle"})]},e.props.label)))),[h,L]);return a((()=>{b(i.Children.toArray(m))}),[m]),r(A,{position:"fixed",color:"transparent",children:r(l,{children:r(u,{sx:{display:"flex"},children:h&&o(e,{children:[r(d,Object.assign({},h[0].props,{isActive:p===h[0].props.value,onClick:()=>{O(h[0].props)},children:I(h[0].props)}),"secondary-tab-0"),r(d,Object.assign({},h[1].props,{isActive:p===h[1].props.value,onClick:()=>{O(h[1].props)},children:I(h[1].props)}),"secondary-tab-1"),r(d,Object.assign({},h[2].props,{isActive:p===h[2].props.value,onClick:()=>{O(h[2].props)},children:I(h[2].props)}),"secondary-tab-2"),h.length>4&&o(e,{children:[o(d,{isActive:w,moreTab:!0,selectedMenuLabel:R,onClick:B,children:[r(s,{color:"inherit",className:"more-vertical"}),R]},"secondary-tab-more"),r(T,{open:w,anchorEl:k,placement:"top",transition:!0,disablePortal:!1,children:({TransitionProps:o})=>r(g,{onClickAway:()=>z(!1),children:r(C,{open:w,onClick:()=>z(!1),children:r(f,Object.assign({},o,{timeout:350,children:r(j,{id:"more-tabs-menu",children:M()})}))})})})]}),h.length<=4&&r(d,Object.assign({},h[3].props,{isActive:p===h[3].props.value,onClick:()=>{O(h[3].props)},children:I(h[3].props)}),"secondary-tab-3")]})})})})},C=c(m)((()=>({zIndex:2e3}))),T=c(h)((()=>({transform:"unset !important",position:"static !important",zIndex:2e3}))),j=c(b)((({theme:o})=>({position:"absolute",bottom:"0",left:0,width:"100%",padding:"26px 0px 27px 0px",background:"white",boxSizing:"border-box",borderTopLeftRadius:"16px",borderTopRightRadius:"16px",zIndex:2e3,boxShadow:"rgb(0 0 0 / 15%) 0px 3px 8px","& .MuiDivider-root":{display:"block",marginTop:"0px !important",marginBottom:"0px !important"},"& div:first-of-type":{"& > li":{borderTopLeftRadius:"16px",borderTopRightRadius:"16px"}},"& > div > li":{fontSize:"16px",fontWeight:"400",color:o.palette.onSurface.os900,paddingTop:"11px",paddingBottom:"11px"}}))),A=c(p)((()=>({maxHeigth:"56px",padding:"0px",top:"auto",bottom:0,boxShadow:"none",borderTop:`1px solid ${k.transparent.secondary}`,backgroundColor:k.background.primary,"& > div.MuiToolbar-root":{maxHeight:"56px",padding:"0px","& > div":{width:"100%",justifyContent:"space-evenly","& > div":{"&> a":{padding:0,textDecoration:"none"}}}}})));export{y as SecondaryNavigationTabs};
+import{jsxs as o,jsx as r,Fragment as e}from"react/jsx-runtime";import i,{useState as t,useCallback as n,useEffect as a}from"react";import p from"@mui/material/AppBar";import l from"@mui/material/Toolbar";import{Icon as c}from"../../icon/icon.js";import"../../icon/icon.definitions.js";import d from"./secondaryTabStyled.js";import{styled as s,Backdrop as m,Popper as h,MenuList as b,MenuItem as x,Divider as u,Box as g,ClickAwayListener as f,Fade as v}from"@mui/material";import{flowColors as k}from"../../../design/skoda/palette.theme.js";const y=({currentActiveTab:p,setCurrentActiveTab:s,children:m})=>{const[h,b]=t(null),[k,y]=t(null),[w,z]=t(!1),[R,S]=t(null),O=n((o=>{s(o.value),o.onClick&&o.onClick()}),[s]),B=n((o=>{z(!w),y(o.currentTarget)}),[w]),I=n((i=>i.href?o("a",{href:i.href,target:i.target||null,children:[r(c,{color:"inherit",name:i.icon||"more-horizontal"}),i.label]}):o(e,{children:[r(c,{color:"inherit",name:i.icon||"more-horizontal"}),i.label]})),[]),L=n((o=>{S(o.label),o.href?window.open(o.href,o.target):s(o.value),z(!1),o.onClick&&o.onClick(o.value)}),[s]),M=n((()=>h.slice(3).map(((e,i)=>o("div",{children:[r(x,{onClick:()=>L(e.props),children:e.props.label},i),r(u,{orientation:"horizontal",textAlign:"center",variant:"middle"})]},e.props.label)))),[h,L]);return a((()=>{b(i.Children.toArray(m))}),[m]),r(A,{position:"fixed",color:"transparent",children:r(l,{children:r(g,{sx:{display:"flex"},children:h&&o(e,{children:[r(d,Object.assign({},h[0].props,{isActive:p===h[0].props.value,onClick:()=>{O(h[0].props)},children:I(h[0].props)}),"secondary-tab-0"),r(d,Object.assign({},h[1].props,{isActive:p===h[1].props.value,onClick:()=>{O(h[1].props)},children:I(h[1].props)}),"secondary-tab-1"),r(d,Object.assign({},h[2].props,{isActive:p===h[2].props.value,onClick:()=>{O(h[2].props)},children:I(h[2].props)}),"secondary-tab-2"),h.length>4&&o(e,{children:[o(d,{isActive:w,moreTab:!0,selectedMenuLabel:R,onClick:B,children:[r(c,{color:"inherit",name:"vertical"}),R]},"secondary-tab-more"),r(T,{open:w,anchorEl:k,placement:"top",transition:!0,disablePortal:!1,children:({TransitionProps:o})=>r(f,{onClickAway:()=>z(!1),children:r(C,{open:w,onClick:()=>z(!1),children:r(v,Object.assign({},o,{timeout:350,children:r(j,{id:"more-tabs-menu",children:M()})}))})})})]}),h.length<=4&&r(d,Object.assign({},h[3].props,{isActive:p===h[3].props.value,onClick:()=>{O(h[3].props)},children:I(h[3].props)}),"secondary-tab-3")]})})})})},C=s(m)((()=>({zIndex:2e3}))),T=s(h)((()=>({transform:"unset !important",position:"static !important",zIndex:2e3}))),j=s(b)((({theme:o})=>({position:"absolute",bottom:"0",left:0,width:"100%",padding:"26px 0px 27px 0px",background:"white",boxSizing:"border-box",borderTopLeftRadius:"16px",borderTopRightRadius:"16px",zIndex:2e3,boxShadow:"rgb(0 0 0 / 15%) 0px 3px 8px","& .MuiDivider-root":{display:"block",marginTop:"0px !important",marginBottom:"0px !important"},"& div:first-of-type":{"& > li":{borderTopLeftRadius:"16px",borderTopRightRadius:"16px"}},"& > div > li":{fontSize:"16px",fontWeight:"400",color:o.palette.onSurface.os900,paddingTop:"11px",paddingBottom:"11px"}}))),A=s(p)((()=>({maxHeigth:"56px",padding:"0px",top:"auto",bottom:0,boxShadow:"none",borderTop:`1px solid ${k.transparent.secondary}`,backgroundColor:k.background.primary,"& > div.MuiToolbar-root":{maxHeight:"56px",padding:"0px","& > div":{width:"100%",justifyContent:"space-evenly","& > div":{"&> a":{padding:0,textDecoration:"none"}}}}})));export{y as SecondaryNavigationTabs};
 //# sourceMappingURL=secondaryNavigationTabs.js.map

package/components/tab/secondaryNavigation/secondaryNavigationTabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"secondaryNavigationTabs.js","sources":["../../../../src/components/tab/secondaryNavigation/secondaryNavigationTabs.tsx"],"sourcesContent":["import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from \"react/jsx-runtime\";\nimport React, { useCallback, useEffect, useState } from 'react';\nimport MuiAppBar from '@mui/material/AppBar';\nimport Toolbar from '@mui/material/Toolbar';\nimport { Icon } from '../../icon';\nimport SecondaryTabStyled from './secondaryTabStyled';\nimport { MenuItem, ClickAwayListener, Fade, MenuList, Popper, styled, Box, Backdrop } from '@mui/material';\nimport { Divider } from '../../divider';\nimport { flowColors } from '../../../design/skoda/palette.theme';\n/**\n * @description SkodaFlow Checkbox component.\n * Properties are inherited from HTML Button element.\n * @param props AppBarProps\n * @returns React Functional Component\n */\nexport const SecondaryNavigationTabs = ({ currentActiveTab, setCurrentActiveTab, children }) => {\n    const [childrenArr, setChildrenArr] = useState(null);\n    const [anchorEl, setAnchorEl] = useState(null);\n    const [open, setOpen] = useState(false);\n    const [selectedMenuLabel, setSelectedMenuLabel] = useState(null);\n    //handle the active tab selected\n    const handleActiveTab = useCallback((_props) => {\n        setCurrentActiveTab(_props.value);\n        _props.onClick && _props.onClick();\n    }, [setCurrentActiveTab]);\n    //handle the click on tab of type menu\n    const handleMenuTabClick = useCallback((e) => {\n        setOpen(!open);\n        setAnchorEl(e.currentTarget);\n    }, [open]);\n    //render a link tab or not based on type\n    const handleRenderTabType = useCallback((_props) => {\n        if (_props.href) {\n            return (_jsxs(\"a\", { href: _props.href, target: _props.target || null, children: [_jsx(Icon, { color: \"inherit\", className: _props.icon || 'more-horizontal' }), _props.label] }));\n        }\n        else {\n            return (_jsxs(_Fragment, { children: [_jsx(Icon, { color: \"inherit\", className: _props.icon || 'more-horizontal' }), _props.label] }));\n        }\n    }, []);\n    //handle the event triggered on onclick based on tab type (link or tab)\n    const onClickMenuItem = useCallback((_props) => {\n        setSelectedMenuLabel(_props.label);\n        if (!_props.href) {\n            setCurrentActiveTab(_props.value);\n        }\n        else {\n            window.open(_props.href, _props.target);\n        }\n        setOpen(false);\n        _props.onClick && _props.onClick(_props.value);\n    }, [setCurrentActiveTab]);\n    //returns the list of menu items\n    const handleMenuItems = useCallback(() => {\n        const menuItems = childrenArr.slice(3);\n        return menuItems.map((item, i) => {\n            return (_jsxs(\"div\", { children: [_jsx(MenuItem, { onClick: () => onClickMenuItem(item.props), children: item.props.label }, i), _jsx(Divider, { orientation: \"horizontal\", textAlign: \"center\", variant: \"middle\" })] }, item.props.label));\n        });\n    }, [childrenArr, onClickMenuItem]);\n    useEffect(() => {\n        setChildrenArr(React.Children.toArray(children));\n    }, [children]);\n    return (_jsx(AppBarStyled, { position: \"fixed\", color: \"transparent\", children: _jsx(Toolbar, { children: _jsx(Box, { sx: { display: 'flex' }, children: childrenArr && (_jsxs(_Fragment, { children: [_jsx(SecondaryTabStyled, Object.assign({}, childrenArr[0].props, { isActive: currentActiveTab === childrenArr[0].props.value, onClick: () => {\n                                handleActiveTab(childrenArr[0].props);\n                            }, children: handleRenderTabType(childrenArr[0].props) }), `secondary-tab-0`), _jsx(SecondaryTabStyled, Object.assign({}, childrenArr[1].props, { isActive: currentActiveTab === childrenArr[1].props.value, onClick: () => {\n                                handleActiveTab(childrenArr[1].props);\n                            }, children: handleRenderTabType(childrenArr[1].props) }), `secondary-tab-1`), _jsx(SecondaryTabStyled, Object.assign({}, childrenArr[2].props, { isActive: currentActiveTab === childrenArr[2].props.value, onClick: () => {\n                                handleActiveTab(childrenArr[2].props);\n                            }, children: handleRenderTabType(childrenArr[2].props) }), `secondary-tab-2`), childrenArr.length > 4 && (_jsxs(_Fragment, { children: [_jsxs(SecondaryTabStyled, { isActive: open, moreTab: true, selectedMenuLabel: selectedMenuLabel, onClick: handleMenuTabClick, children: [_jsx(Icon, { color: \"inherit\", className: 'more-vertical' }), selectedMenuLabel] }, `secondary-tab-more`), _jsx(PopperStyled, { open: open, anchorEl: anchorEl, placement: \"top\", transition: true, disablePortal: false, children: ({ TransitionProps }) => (_jsx(ClickAwayListener, { onClickAway: () => setOpen(false), children: _jsx(BackdropStyled, { open: open, onClick: () => setOpen(false), children: _jsx(Fade, Object.assign({}, TransitionProps, { timeout: 350, children: _jsx(MenuStyled, { id: \"more-tabs-menu\", children: handleMenuItems() }) })) }) })) })] })), childrenArr.length <= 4 && (_jsx(SecondaryTabStyled, Object.assign({}, childrenArr[3].props, { isActive: currentActiveTab === childrenArr[3].props.value, onClick: () => {\n                                handleActiveTab(childrenArr[3].props);\n                            }, children: handleRenderTabType(childrenArr[3].props) }), `secondary-tab-3`))] })) }) }) }));\n};\nconst BackdropStyled = styled(Backdrop)(() => {\n    return {\n        zIndex: 2000,\n    };\n});\nconst PopperStyled = styled(Popper)(() => {\n    const style = {\n        transform: 'unset !important',\n        position: 'static !important',\n        zIndex: 2000,\n    };\n    return style;\n});\nconst MenuStyled = styled(MenuList)(({ theme }) => {\n    return {\n        position: 'absolute',\n        bottom: '0',\n        left: 0,\n        width: '100%',\n        padding: '26px 0px 27px 0px',\n        background: 'white',\n        boxSizing: 'border-box',\n        borderTopLeftRadius: '16px',\n        borderTopRightRadius: '16px',\n        zIndex: 2000,\n        boxShadow: 'rgb(0 0 0 / 15%) 0px 3px 8px',\n        '& .MuiDivider-root': {\n            display: 'block',\n            marginTop: '0px !important',\n            marginBottom: '0px !important',\n        },\n        '& div:first-of-type': {\n            '& > li': {\n                borderTopLeftRadius: '16px',\n                borderTopRightRadius: '16px',\n            },\n        },\n        '& > div > li': {\n            fontSize: '16px',\n            fontWeight: '400',\n            color: theme.palette.onSurface.os900,\n            paddingTop: '11px',\n            paddingBottom: '11px',\n        },\n    };\n});\n/**\n * @description Tabs styling definition based on props\n */\nconst AppBarStyled = styled(MuiAppBar)(() => {\n    return {\n        maxHeigth: '56px',\n        padding: '0px',\n        top: 'auto',\n        bottom: 0,\n        boxShadow: 'none',\n        borderTop: `1px solid ${flowColors.transparent.secondary}`,\n        backgroundColor: flowColors.background.primary,\n        '& > div.MuiToolbar-root': {\n            maxHeight: '56px',\n            padding: '0px',\n            '& > div': {\n                width: '100%',\n                justifyContent: 'space-evenly',\n                '& > div': {\n                    '&> a': {\n                        padding: 0,\n                        textDecoration: 'none',\n                    },\n                },\n            },\n        },\n    };\n});\n//# sourceMappingURL=secondaryNavigationTabs.js.map"],"names":["SecondaryNavigationTabs","currentActiveTab","setCurrentActiveTab","children","childrenArr","setChildrenArr","useState","anchorEl","setAnchorEl","open","setOpen","selectedMenuLabel","setSelectedMenuLabel","handleActiveTab","useCallback","_props","value","onClick","handleMenuTabClick","e","currentTarget","handleRenderTabType","href","_jsxs","target","_jsx","Icon","color","className","icon","label","_Fragment","onClickMenuItem","window","handleMenuItems","slice","map","item","i","MenuItem","props","Divider","orientation","textAlign","variant","useEffect","React","Children","toArray","AppBarStyled","position","Toolbar","Box","sx","display","SecondaryTabStyled","Object","assign","isActive","length","moreTab","PopperStyled","placement","transition","disablePortal","TransitionProps","ClickAwayListener","onClickAway","BackdropStyled","Fade","timeout","MenuStyled","id","styled","Backdrop","zIndex","Popper","transform","MenuList","theme","bottom","left","width","padding","background","boxSizing","borderTopLeftRadius","borderTopRightRadius","boxShadow","marginTop","marginBottom","fontSize","fontWeight","palette","onSurface","os900","paddingTop","paddingBottom","MuiAppBar","maxHeigth","top","borderTop","flowColors","transparent","secondary","backgroundColor","primary","maxHeight","justifyContent","textDecoration"],"mappings":"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"}
+{"version":3,"file":"secondaryNavigationTabs.js","sources":["../../../../src/components/tab/secondaryNavigation/secondaryNavigationTabs.tsx"],"sourcesContent":["import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from \"react/jsx-runtime\";\nimport React, { useCallback, useEffect, useState } from 'react';\nimport MuiAppBar from '@mui/material/AppBar';\nimport Toolbar from '@mui/material/Toolbar';\nimport { Icon } from '../../icon';\nimport SecondaryTabStyled from './secondaryTabStyled';\nimport { MenuItem, ClickAwayListener, Fade, MenuList, Popper, styled, Box, Backdrop, Divider } from '@mui/material';\nimport { flowColors } from '../../../design/skoda/palette.theme';\n/**\n * @description SkodaFlow Checkbox component.\n * Properties are inherited from HTML Button element.\n * @param props AppBarProps\n * @returns React Functional Component\n */\nexport const SecondaryNavigationTabs = ({ currentActiveTab, setCurrentActiveTab, children }) => {\n    const [childrenArr, setChildrenArr] = useState(null);\n    const [anchorEl, setAnchorEl] = useState(null);\n    const [open, setOpen] = useState(false);\n    const [selectedMenuLabel, setSelectedMenuLabel] = useState(null);\n    //handle the active tab selected\n    const handleActiveTab = useCallback((_props) => {\n        setCurrentActiveTab(_props.value);\n        _props.onClick && _props.onClick();\n    }, [setCurrentActiveTab]);\n    //handle the click on tab of type menu\n    const handleMenuTabClick = useCallback((e) => {\n        setOpen(!open);\n        setAnchorEl(e.currentTarget);\n    }, [open]);\n    //render a link tab or not based on type\n    const handleRenderTabType = useCallback((_props) => {\n        if (_props.href) {\n            return (_jsxs(\"a\", { href: _props.href, target: _props.target || null, children: [_jsx(Icon, { color: \"inherit\", name: _props.icon || 'more-horizontal' }), _props.label] }));\n        }\n        else {\n            return (_jsxs(_Fragment, { children: [_jsx(Icon, { color: \"inherit\", name: _props.icon || 'more-horizontal' }), _props.label] }));\n        }\n    }, []);\n    //handle the event triggered on onclick based on tab type (link or tab)\n    const onClickMenuItem = useCallback((_props) => {\n        setSelectedMenuLabel(_props.label);\n        if (!_props.href) {\n            setCurrentActiveTab(_props.value);\n        }\n        else {\n            window.open(_props.href, _props.target);\n        }\n        setOpen(false);\n        _props.onClick && _props.onClick(_props.value);\n    }, [setCurrentActiveTab]);\n    //returns the list of menu items\n    const handleMenuItems = useCallback(() => {\n        const menuItems = childrenArr.slice(3);\n        return menuItems.map((item, i) => {\n            return (_jsxs(\"div\", { children: [_jsx(MenuItem, { onClick: () => onClickMenuItem(item.props), children: item.props.label }, i), _jsx(Divider, { orientation: \"horizontal\", textAlign: \"center\", variant: \"middle\" })] }, item.props.label));\n        });\n    }, [childrenArr, onClickMenuItem]);\n    useEffect(() => {\n        setChildrenArr(React.Children.toArray(children));\n    }, [children]);\n    return (_jsx(AppBarStyled, { position: \"fixed\", color: \"transparent\", children: _jsx(Toolbar, { children: _jsx(Box, { sx: { display: 'flex' }, children: childrenArr && (_jsxs(_Fragment, { children: [_jsx(SecondaryTabStyled, Object.assign({}, childrenArr[0].props, { isActive: currentActiveTab === childrenArr[0].props.value, onClick: () => {\n                                handleActiveTab(childrenArr[0].props);\n                            }, children: handleRenderTabType(childrenArr[0].props) }), `secondary-tab-0`), _jsx(SecondaryTabStyled, Object.assign({}, childrenArr[1].props, { isActive: currentActiveTab === childrenArr[1].props.value, onClick: () => {\n                                handleActiveTab(childrenArr[1].props);\n                            }, children: handleRenderTabType(childrenArr[1].props) }), `secondary-tab-1`), _jsx(SecondaryTabStyled, Object.assign({}, childrenArr[2].props, { isActive: currentActiveTab === childrenArr[2].props.value, onClick: () => {\n                                handleActiveTab(childrenArr[2].props);\n                            }, children: handleRenderTabType(childrenArr[2].props) }), `secondary-tab-2`), childrenArr.length > 4 && (_jsxs(_Fragment, { children: [_jsxs(SecondaryTabStyled, { isActive: open, moreTab: true, selectedMenuLabel: selectedMenuLabel, onClick: handleMenuTabClick, children: [_jsx(Icon, { color: \"inherit\", name: \"vertical\" }), selectedMenuLabel] }, `secondary-tab-more`), _jsx(PopperStyled, { open: open, anchorEl: anchorEl, placement: \"top\", transition: true, disablePortal: false, children: ({ TransitionProps }) => (_jsx(ClickAwayListener, { onClickAway: () => setOpen(false), children: _jsx(BackdropStyled, { open: open, onClick: () => setOpen(false), children: _jsx(Fade, Object.assign({}, TransitionProps, { timeout: 350, children: _jsx(MenuStyled, { id: \"more-tabs-menu\", children: handleMenuItems() }) })) }) })) })] })), childrenArr.length <= 4 && (_jsx(SecondaryTabStyled, Object.assign({}, childrenArr[3].props, { isActive: currentActiveTab === childrenArr[3].props.value, onClick: () => {\n                                handleActiveTab(childrenArr[3].props);\n                            }, children: handleRenderTabType(childrenArr[3].props) }), `secondary-tab-3`))] })) }) }) }));\n};\nconst BackdropStyled = styled(Backdrop)(() => {\n    return {\n        zIndex: 2000,\n    };\n});\nconst PopperStyled = styled(Popper)(() => {\n    const style = {\n        transform: 'unset !important',\n        position: 'static !important',\n        zIndex: 2000,\n    };\n    return style;\n});\nconst MenuStyled = styled(MenuList)(({ theme }) => {\n    return {\n        position: 'absolute',\n        bottom: '0',\n        left: 0,\n        width: '100%',\n        padding: '26px 0px 27px 0px',\n        background: 'white',\n        boxSizing: 'border-box',\n        borderTopLeftRadius: '16px',\n        borderTopRightRadius: '16px',\n        zIndex: 2000,\n        boxShadow: 'rgb(0 0 0 / 15%) 0px 3px 8px',\n        '& .MuiDivider-root': {\n            display: 'block',\n            marginTop: '0px !important',\n            marginBottom: '0px !important',\n        },\n        '& div:first-of-type': {\n            '& > li': {\n                borderTopLeftRadius: '16px',\n                borderTopRightRadius: '16px',\n            },\n        },\n        '& > div > li': {\n            fontSize: '16px',\n            fontWeight: '400',\n            color: theme.palette.onSurface.os900,\n            paddingTop: '11px',\n            paddingBottom: '11px',\n        },\n    };\n});\n/**\n * @description Tabs styling definition based on props\n */\nconst AppBarStyled = styled(MuiAppBar)(() => {\n    return {\n        maxHeigth: '56px',\n        padding: '0px',\n        top: 'auto',\n        bottom: 0,\n        boxShadow: 'none',\n        borderTop: `1px solid ${flowColors.transparent.secondary}`,\n        backgroundColor: flowColors.background.primary,\n        '& > div.MuiToolbar-root': {\n            maxHeight: '56px',\n            padding: '0px',\n            '& > div': {\n                width: '100%',\n                justifyContent: 'space-evenly',\n                '& > div': {\n                    '&> a': {\n                        padding: 0,\n                        textDecoration: 'none',\n                    },\n                },\n            },\n        },\n    };\n});\n//# sourceMappingURL=secondaryNavigationTabs.js.map"],"names":["SecondaryNavigationTabs","currentActiveTab","setCurrentActiveTab","children","childrenArr","setChildrenArr","useState","anchorEl","setAnchorEl","open","setOpen","selectedMenuLabel","setSelectedMenuLabel","handleActiveTab","useCallback","_props","value","onClick","handleMenuTabClick","e","currentTarget","handleRenderTabType","href","_jsxs","target","_jsx","Icon","color","name","icon","label","_Fragment","onClickMenuItem","window","handleMenuItems","slice","map","item","i","MenuItem","props","Divider","orientation","textAlign","variant","useEffect","React","Children","toArray","AppBarStyled","position","Toolbar","Box","sx","display","SecondaryTabStyled","Object","assign","isActive","length","moreTab","PopperStyled","placement","transition","disablePortal","TransitionProps","ClickAwayListener","onClickAway","BackdropStyled","Fade","timeout","MenuStyled","id","styled","Backdrop","zIndex","Popper","transform","MenuList","theme","bottom","left","width","padding","background","boxSizing","borderTopLeftRadius","borderTopRightRadius","boxShadow","marginTop","marginBottom","fontSize","fontWeight","palette","onSurface","os900","paddingTop","paddingBottom","MuiAppBar","maxHeigth","top","borderTop","flowColors","transparent","secondary","backgroundColor","primary","maxHeight","justifyContent","textDecoration"],"mappings":"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"}

package/components/tab/tab.d.ts

@@ -45,5 +45,6 @@ export interface TabProps {
  * @description SkodaFlow Tab component.
  * @param props TabProps
  * @returns React Functional Component
+ * @deprecated use Tab component from @mui/material instead
  */
 export declare const Tab: React.ForwardRefExoticComponent<TabProps & React.RefAttributes<HTMLDivElement>>;

package/components/tab/tab.js.map

@@ -1 +1 @@
-{"version":3,"file":"tab.js","sources":["../../../src/components/tab/tab.tsx"],"sourcesContent":["import { jsx as _jsx, Fragment as _Fragment } from \"react/jsx-runtime\";\nimport { useState, useContext, useEffect, useCallback, forwardRef } from 'react';\nimport useTabs from './hook/useTabs';\nimport { TabsContext } from './tabs';\nimport TabStyled from './tabStyled';\n/**\n * @description SkodaFlow Tab component.\n * @param props TabProps\n * @returns React Functional Component\n */\nexport const Tab = forwardRef(({ label, value, onClick, analyticsCallback, href, target, ariaLabel }, ref) => {\n    const { activeTab, updateActiveTab, smallSize } = useContext(TabsContext);\n    const [isActive, setIsActive] = useState(false);\n    const { a11yProps } = useTabs();\n    //On tab clicked: set the new activeTab selected\n    //if is a menu tab: set the anchor element for the menu and set the width of the menu equal to the tab component\n    //then call the onClick from outside\n    const handleOnClick = useCallback((e) => {\n        updateActiveTab(value, false);\n        analyticsCallback && analyticsCallback(e);\n        onClick && onClick(e);\n    }, [value, onClick, updateActiveTab, analyticsCallback]);\n    //IF href prop is present: render the Link Tab\n    //Otherwise render the default tab\n    const handleTabType = useCallback(() => {\n        if (href) {\n            return (_jsx(TabStyled, Object.assign({ wrapped: true, ref: ref, smallSize: smallSize, isActive: isActive, \"aria-label\": ariaLabel, value: value, label: label, tabIndex: isActive ? 0 : -1 }, a11yProps(value), { component: 'a', href: href, target: target, onClick: (e) => handleOnClick(e) })));\n        }\n        else {\n            return (_jsx(TabStyled, Object.assign({ wrapped: true, ref: ref, \"aria-label\": ariaLabel, tabIndex: isActive ? 0 : -1, smallSize: smallSize, isActive: isActive, onClick: (e) => handleOnClick(e), value: value, label: label }, a11yProps(value))));\n        }\n    }, [href, smallSize, isActive, target, value, label, a11yProps, ariaLabel, handleOnClick, ref]);\n    //If the activeTab is equal to the current tab, set active\n    useEffect(() => {\n        if (activeTab === value) {\n            setIsActive(true);\n        }\n        else {\n            setIsActive(false);\n        }\n    }, [activeTab, value]);\n    return _jsx(_Fragment, { children: handleTabType() });\n});\n//# sourceMappingURL=tab.js.map"],"names":["Tab","forwardRef","label","value","onClick","analyticsCallback","href","target","ariaLabel","ref","activeTab","updateActiveTab","smallSize","useContext","TabsContext","isActive","setIsActive","useState","a11yProps","useTabs","handleOnClick","useCallback","e","handleTabType","_jsx","TabStyled","Object","assign","wrapped","tabIndex","component","useEffect","_Fragment","children"],"mappings":"8PAUY,MAACA,EAAMC,GAAW,EAAGC,QAAOC,QAAOC,UAASC,oBAAmBC,OAAMC,SAAQC,aAAaC,KAClG,MAAMC,UAAEA,EAASC,gBAAEA,EAAeC,UAAEA,GAAcC,EAAWC,IACtDC,EAAUC,GAAeC,GAAS,IACnCC,UAAEA,GAAcC,IAIhBC,EAAgBC,GAAaC,IAC/BX,EAAgBR,GAAO,GACvBE,GAAqBA,EAAkBiB,GACvClB,GAAWA,EAAQkB,EAAE,GACtB,CAACnB,EAAOC,EAASO,EAAiBN,IAG/BkB,EAAgBF,GAAY,IAElBG,EAAKC,EADbnB,EACwBoB,OAAOC,OAAO,CAAEC,SAAS,EAAMnB,IAAKA,EAAKG,UAAWA,EAAWG,SAAUA,EAAU,aAAcP,EAAWL,MAAOA,EAAOD,MAAOA,EAAO2B,SAAUd,EAAW,GAAK,GAAKG,EAAUf,GAAQ,CAAE2B,UAAW,IAAKxB,KAAMA,EAAMC,OAAQA,EAAQH,QAAUkB,GAAMF,EAAcE,KAGrQI,OAAOC,OAAO,CAAEC,SAAS,EAAMnB,IAAKA,EAAK,aAAcD,EAAWqB,SAAUd,EAAW,GAAK,EAAGH,UAAWA,EAAWG,SAAUA,EAAUX,QAAUkB,GAAMF,EAAcE,GAAInB,MAAOA,EAAOD,MAAOA,GAASgB,EAAUf,MAEhP,CAACG,EAAMM,EAAWG,EAAUR,EAAQJ,EAAOD,EAAOgB,EAAWV,EAAWY,EAAeX,IAU1F,OARAsB,GAAU,KAEFf,EADAN,IAAcP,EAKjB,GACF,CAACO,EAAWP,IACRqB,EAAKQ,EAAW,CAAEC,SAAUV,KAAkB"}
+{"version":3,"file":"tab.js","sources":["../../../src/components/tab/tab.tsx"],"sourcesContent":["import { jsx as _jsx, Fragment as _Fragment } from \"react/jsx-runtime\";\nimport { useState, useContext, useEffect, useCallback, forwardRef } from 'react';\nimport useTabs from './hook/useTabs';\nimport { TabsContext } from './tabs';\nimport TabStyled from './tabStyled';\n/**\n * @description SkodaFlow Tab component.\n * @param props TabProps\n * @returns React Functional Component\n * @deprecated use Tab component from @mui/material instead\n */\nexport const Tab = forwardRef(({ label, value, onClick, analyticsCallback, href, target, ariaLabel }, ref) => {\n    const { activeTab, updateActiveTab, smallSize } = useContext(TabsContext);\n    const [isActive, setIsActive] = useState(false);\n    const { a11yProps } = useTabs();\n    //On tab clicked: set the new activeTab selected\n    //if is a menu tab: set the anchor element for the menu and set the width of the menu equal to the tab component\n    //then call the onClick from outside\n    const handleOnClick = useCallback((e) => {\n        updateActiveTab(value, false);\n        analyticsCallback && analyticsCallback(e);\n        onClick && onClick(e);\n    }, [value, onClick, updateActiveTab, analyticsCallback]);\n    //IF href prop is present: render the Link Tab\n    //Otherwise render the default tab\n    const handleTabType = useCallback(() => {\n        if (href) {\n            return (_jsx(TabStyled, Object.assign({ wrapped: true, ref: ref, smallSize: smallSize, isActive: isActive, \"aria-label\": ariaLabel, value: value, label: label, tabIndex: isActive ? 0 : -1 }, a11yProps(value), { component: 'a', href: href, target: target, onClick: (e) => handleOnClick(e) })));\n        }\n        else {\n            return (_jsx(TabStyled, Object.assign({ wrapped: true, ref: ref, \"aria-label\": ariaLabel, tabIndex: isActive ? 0 : -1, smallSize: smallSize, isActive: isActive, onClick: (e) => handleOnClick(e), value: value, label: label }, a11yProps(value))));\n        }\n    }, [href, smallSize, isActive, target, value, label, a11yProps, ariaLabel, handleOnClick, ref]);\n    //If the activeTab is equal to the current tab, set active\n    useEffect(() => {\n        if (activeTab === value) {\n            setIsActive(true);\n        }\n        else {\n            setIsActive(false);\n        }\n    }, [activeTab, value]);\n    return _jsx(_Fragment, { children: handleTabType() });\n});\n//# sourceMappingURL=tab.js.map"],"names":["Tab","forwardRef","label","value","onClick","analyticsCallback","href","target","ariaLabel","ref","activeTab","updateActiveTab","smallSize","useContext","TabsContext","isActive","setIsActive","useState","a11yProps","useTabs","handleOnClick","useCallback","e","handleTabType","_jsx","TabStyled","Object","assign","wrapped","tabIndex","component","useEffect","_Fragment","children"],"mappings":"8PAWY,MAACA,EAAMC,GAAW,EAAGC,QAAOC,QAAOC,UAASC,oBAAmBC,OAAMC,SAAQC,aAAaC,KAClG,MAAMC,UAAEA,EAASC,gBAAEA,EAAeC,UAAEA,GAAcC,EAAWC,IACtDC,EAAUC,GAAeC,GAAS,IACnCC,UAAEA,GAAcC,IAIhBC,EAAgBC,GAAaC,IAC/BX,EAAgBR,GAAO,GACvBE,GAAqBA,EAAkBiB,GACvClB,GAAWA,EAAQkB,EAAE,GACtB,CAACnB,EAAOC,EAASO,EAAiBN,IAG/BkB,EAAgBF,GAAY,IAElBG,EAAKC,EADbnB,EACwBoB,OAAOC,OAAO,CAAEC,SAAS,EAAMnB,IAAKA,EAAKG,UAAWA,EAAWG,SAAUA,EAAU,aAAcP,EAAWL,MAAOA,EAAOD,MAAOA,EAAO2B,SAAUd,EAAW,GAAK,GAAKG,EAAUf,GAAQ,CAAE2B,UAAW,IAAKxB,KAAMA,EAAMC,OAAQA,EAAQH,QAAUkB,GAAMF,EAAcE,KAGrQI,OAAOC,OAAO,CAAEC,SAAS,EAAMnB,IAAKA,EAAK,aAAcD,EAAWqB,SAAUd,EAAW,GAAK,EAAGH,UAAWA,EAAWG,SAAUA,EAAUX,QAAUkB,GAAMF,EAAcE,GAAInB,MAAOA,EAAOD,MAAOA,GAASgB,EAAUf,MAEhP,CAACG,EAAMM,EAAWG,EAAUR,EAAQJ,EAAOD,EAAOgB,EAAWV,EAAWY,EAAeX,IAU1F,OARAsB,GAAU,KAEFf,EADAN,IAAcP,EAKjB,GACF,CAACO,EAAWP,IACRqB,EAAKQ,EAAW,CAAEC,SAAUV,KAAkB"}

package/components/tab/tabPanel.d.ts

@@ -17,4 +17,5 @@ export interface TabPanelProps {
      */
     index?: number | string;
 }
+/** @deprecated use Tab component from @mui/material instead */
 export declare const TabPanel: React.FC<TabPanelProps>;

package/components/tab/tabPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"tabPanel.js","sources":["../../../src/components/tab/tabPanel.tsx"],"sourcesContent":["import { __rest } from \"tslib\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nexport const TabPanel = (props) => {\n    const { children, value, index } = props, other = __rest(props, [\"children\", \"value\", \"index\"]);\n    return (_jsx(\"div\", Object.assign({ role: \"tabpanel\", hidden: value !== index, id: `simple-tabpanel-${index}`, \"aria-labelledby\": `simple-tab-${index}` }, other, { children: value === index && children })));\n};\n//# sourceMappingURL=tabPanel.js.map"],"names":["TabPanel","props","children","value","index","other","__rest","_jsx","Object","assign","role","hidden","id"],"mappings":"uEAEY,MAACA,EAAYC,IACrB,MAAMC,SAAEA,EAAQC,MAAEA,EAAKC,MAAEA,GAAUH,EAAOI,EAAQC,EAAOL,EAAO,CAAC,WAAY,QAAS,UACtF,OAAQM,EAAK,MAAOC,OAAOC,OAAO,CAAEC,KAAM,WAAYC,OAAQR,IAAUC,EAAOQ,GAAI,mBAAmBR,IAAS,kBAAmB,cAAcA,KAAWC,EAAO,CAAEH,SAAUC,IAAUC,GAASF,IAAc"}
+{"version":3,"file":"tabPanel.js","sources":["../../../src/components/tab/tabPanel.tsx"],"sourcesContent":["import { __rest } from \"tslib\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\n/** @deprecated use Tab component from @mui/material instead */\nexport const TabPanel = (props) => {\n    const { children, value, index } = props, other = __rest(props, [\"children\", \"value\", \"index\"]);\n    return (_jsx(\"div\", Object.assign({ role: \"tabpanel\", hidden: value !== index, id: `simple-tabpanel-${index}`, \"aria-labelledby\": `simple-tab-${index}` }, other, { children: value === index && children })));\n};\n//# sourceMappingURL=tabPanel.js.map"],"names":["TabPanel","props","children","value","index","other","__rest","_jsx","Object","assign","role","hidden","id"],"mappings":"uEAGY,MAACA,EAAYC,IACrB,MAAMC,SAAEA,EAAQC,MAAEA,EAAKC,MAAEA,GAAUH,EAAOI,EAAQC,EAAOL,EAAO,CAAC,WAAY,QAAS,UACtF,OAAQM,EAAK,MAAOC,OAAOC,OAAO,CAAEC,KAAM,WAAYC,OAAQR,IAAUC,EAAOQ,GAAI,mBAAmBR,IAAS,kBAAmB,cAAcA,KAAWC,EAAO,CAAEH,SAAUC,IAAUC,GAASF,IAAc"}

package/components/tab/tabStyled.d.ts

@@ -1,10 +1,11 @@
 /// <reference types="react" />
 /**
  * @description Tabs styling definition based on props
+ * @deprecated use Tab component from @mui/material instead
  */
 declare const TabStyled: import("@emotion/styled").StyledComponent<import("@mui/material/Tab").TabOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: import("react").Ref<HTMLDivElement>;
-}, "disabled" | "className" | "style" | "classes" | "action" | "centerRipple" | "children" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "sx" | "tabIndex" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "icon" | "iconPosition" | "label" | "value" | "wrapped"> & {
+}, "disabled" | "className" | "style" | "classes" | "children" | "sx" | "label" | "tabIndex" | "action" | "value" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "icon" | "iconPosition" | "wrapped"> & {
     theme?: import("@emotion/react").Theme;
 } & {
     component?: import("react").ElementType<any>;

package/components/tab/tabStyled.js.map

@@ -1 +1 @@
-{"version":3,"file":"tabStyled.js","sources":["../../../src/components/tab/tabStyled.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport MuiTab from '@mui/material/Tab';\n/**\n * @description Tabs styling definition based on props\n */\nconst TabStyled = styled(MuiTab, {\n    shouldForwardProp: (prop) => prop !== 'isActive' && prop !== 'smallSize' && prop !== 'ref',\n})(({ isActive, smallSize, theme }) => {\n    let styles = {\n        minWidth: 'fit-content',\n        fontWeight: '700',\n        padding: 0,\n        color: theme.palette.onSurface.os500,\n        opacity: 1,\n        fontSize: '20px',\n        textTransform: 'none',\n        transition: 'color .3s ease-out',\n        minHeight: '32px',\n        maxHeight: '32px',\n        marginTop: '4px',\n        fontFamily: 'SKODA Next',\n        letterSpacing: '0.02857em',\n        '&:focus': {\n            paddingLeft: '5px',\n            paddingRight: '5px',\n            border: `2px solid ${theme.palette.text.primary}`,\n            boxSizing: ' border-box',\n        },\n        '&:hover': {\n            color: theme.palette.text.primary,\n            position: 'relative',\n            overflow: 'visible',\n            '& > .MuiIcon-root': {\n                color: theme.palette.text.primary,\n            },\n            '&:after': {\n                content: '\"\"',\n                display: 'block',\n                position: 'absolute',\n                height: '3px',\n                backgroundColor: theme.palette.brand.primary,\n                width: '100%',\n                bottom: '-12px',\n                left: 0,\n            },\n        },\n        '&:active': {\n            color: theme.palette.text.primary,\n        },\n        '& > .MuiIcon-root': {\n            fontSize: '20px !Important',\n            width: '20px',\n            height: '30px',\n            color: theme.palette.onSurface.os500,\n        },\n    };\n    styles = Object.assign(Object.assign({}, styles), { [theme.breakpoints.down('sm')]: {\n            fontSize: '14px',\n            minWidth: '56px',\n            marginTop: '6px',\n        } });\n    if (isActive) {\n        styles = Object.assign(Object.assign({}, styles), { color: theme.palette.text.primary });\n    }\n    if (smallSize) {\n        styles = Object.assign(Object.assign({}, styles), { fontSize: '14px', minWidth: '56px', marginTop: '6px', '& > .MuiIcon-root': {\n                fontSize: '15px !important',\n                width: '15px',\n                height: '22px',\n            } });\n    }\n    return styles;\n});\nexport default TabStyled;\n//# sourceMappingURL=tabStyled.js.map"],"names":["TabStyled","styled","MuiTab","shouldForwardProp","prop","isActive","smallSize","theme","styles","minWidth","fontWeight","padding","color","palette","onSurface","os500","opacity","fontSize","textTransform","transition","minHeight","maxHeight","marginTop","fontFamily","letterSpacing","paddingLeft","paddingRight","border","text","primary","boxSizing","position","overflow","content","display","height","backgroundColor","brand","width","bottom","left","Object","assign","breakpoints","down"],"mappings":"gEAKK,MAACA,EAAYC,EAAOC,EAAQ,CAC7BC,kBAAoBC,GAAkB,aAATA,GAAgC,cAATA,GAAiC,QAATA,GAD9DH,EAEf,EAAGI,WAAUC,YAAWC,YACvB,IAAIC,EAAS,CACTC,SAAU,cACVC,WAAY,MACZC,QAAS,EACTC,MAAOL,EAAMM,QAAQC,UAAUC,MAC/BC,QAAS,EACTC,SAAU,OACVC,cAAe,OACfC,WAAY,qBACZC,UAAW,OACXC,UAAW,OACXC,UAAW,MACXC,WAAY,aACZC,cAAe,YACf,UAAW,CACPC,YAAa,MACbC,aAAc,MACdC,OAAQ,aAAapB,EAAMM,QAAQe,KAAKC,UACxCC,UAAW,eAEf,UAAW,CACPlB,MAAOL,EAAMM,QAAQe,KAAKC,QAC1BE,SAAU,WACVC,SAAU,UACV,oBAAqB,CACjBpB,MAAOL,EAAMM,QAAQe,KAAKC,SAE9B,UAAW,CACPI,QAAS,KACTC,QAAS,QACTH,SAAU,WACVI,OAAQ,MACRC,gBAAiB7B,EAAMM,QAAQwB,MAAMR,QACrCS,MAAO,OACPC,OAAQ,QACRC,KAAM,IAGd,WAAY,CACR5B,MAAOL,EAAMM,QAAQe,KAAKC,SAE9B,oBAAqB,CACjBZ,SAAU,kBACVqB,MAAO,OACPH,OAAQ,OACRvB,MAAOL,EAAMM,QAAQC,UAAUC,QAkBvC,OAfAP,EAASiC,OAAOC,OAAOD,OAAOC,OAAO,CAAE,EAAElC,GAAS,CAAE,CAACD,EAAMoC,YAAYC,KAAK,OAAQ,CAC5E3B,SAAU,OACVR,SAAU,OACVa,UAAW,SAEfjB,IACAG,EAASiC,OAAOC,OAAOD,OAAOC,OAAO,CAAA,EAAIlC,GAAS,CAAEI,MAAOL,EAAMM,QAAQe,KAAKC,WAE9EvB,IACAE,EAASiC,OAAOC,OAAOD,OAAOC,OAAO,CAAE,EAAElC,GAAS,CAAES,SAAU,OAAQR,SAAU,OAAQa,UAAW,MAAO,oBAAqB,CACvHL,SAAU,kBACVqB,MAAO,OACPH,OAAQ,WAGb3B,CAAM"}
+{"version":3,"file":"tabStyled.js","sources":["../../../src/components/tab/tabStyled.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport MuiTab from '@mui/material/Tab';\n/**\n * @description Tabs styling definition based on props\n * @deprecated use Tab component from @mui/material instead\n */\nconst TabStyled = styled(MuiTab, {\n    shouldForwardProp: (prop) => prop !== 'isActive' && prop !== 'smallSize' && prop !== 'ref',\n})(({ isActive, smallSize, theme }) => {\n    let styles = {\n        minWidth: 'fit-content',\n        fontWeight: '700',\n        padding: 0,\n        color: theme.palette.onSurface.os500,\n        opacity: 1,\n        fontSize: '20px',\n        textTransform: 'none',\n        transition: 'color .3s ease-out',\n        minHeight: '32px',\n        maxHeight: '32px',\n        marginTop: '4px',\n        fontFamily: 'SKODA Next',\n        letterSpacing: '0.02857em',\n        '&:focus': {\n            paddingLeft: '5px',\n            paddingRight: '5px',\n            border: `2px solid ${theme.palette.text.primary}`,\n            boxSizing: ' border-box',\n        },\n        '&:hover': {\n            color: theme.palette.text.primary,\n            position: 'relative',\n            overflow: 'visible',\n            '& > .MuiIcon-root': {\n                color: theme.palette.text.primary,\n            },\n            '&:after': {\n                content: '\"\"',\n                display: 'block',\n                position: 'absolute',\n                height: '3px',\n                backgroundColor: theme.palette.brand.primary,\n                width: '100%',\n                bottom: '-12px',\n                left: 0,\n            },\n        },\n        '&:active': {\n            color: theme.palette.text.primary,\n        },\n        '& > .MuiIcon-root': {\n            fontSize: '20px !Important',\n            width: '20px',\n            height: '30px',\n            color: theme.palette.onSurface.os500,\n        },\n    };\n    styles = Object.assign(Object.assign({}, styles), { [theme.breakpoints.down('sm')]: {\n            fontSize: '14px',\n            minWidth: '56px',\n            marginTop: '6px',\n        } });\n    if (isActive) {\n        styles = Object.assign(Object.assign({}, styles), { color: theme.palette.text.primary });\n    }\n    if (smallSize) {\n        styles = Object.assign(Object.assign({}, styles), { fontSize: '14px', minWidth: '56px', marginTop: '6px', '& > .MuiIcon-root': {\n                fontSize: '15px !important',\n                width: '15px',\n                height: '22px',\n            } });\n    }\n    return styles;\n});\nexport default TabStyled;\n//# sourceMappingURL=tabStyled.js.map"],"names":["TabStyled","styled","MuiTab","shouldForwardProp","prop","isActive","smallSize","theme","styles","minWidth","fontWeight","padding","color","palette","onSurface","os500","opacity","fontSize","textTransform","transition","minHeight","maxHeight","marginTop","fontFamily","letterSpacing","paddingLeft","paddingRight","border","text","primary","boxSizing","position","overflow","content","display","height","backgroundColor","brand","width","bottom","left","Object","assign","breakpoints","down"],"mappings":"gEAMK,MAACA,EAAYC,EAAOC,EAAQ,CAC7BC,kBAAoBC,GAAkB,aAATA,GAAgC,cAATA,GAAiC,QAATA,GAD9DH,EAEf,EAAGI,WAAUC,YAAWC,YACvB,IAAIC,EAAS,CACTC,SAAU,cACVC,WAAY,MACZC,QAAS,EACTC,MAAOL,EAAMM,QAAQC,UAAUC,MAC/BC,QAAS,EACTC,SAAU,OACVC,cAAe,OACfC,WAAY,qBACZC,UAAW,OACXC,UAAW,OACXC,UAAW,MACXC,WAAY,aACZC,cAAe,YACf,UAAW,CACPC,YAAa,MACbC,aAAc,MACdC,OAAQ,aAAapB,EAAMM,QAAQe,KAAKC,UACxCC,UAAW,eAEf,UAAW,CACPlB,MAAOL,EAAMM,QAAQe,KAAKC,QAC1BE,SAAU,WACVC,SAAU,UACV,oBAAqB,CACjBpB,MAAOL,EAAMM,QAAQe,KAAKC,SAE9B,UAAW,CACPI,QAAS,KACTC,QAAS,QACTH,SAAU,WACVI,OAAQ,MACRC,gBAAiB7B,EAAMM,QAAQwB,MAAMR,QACrCS,MAAO,OACPC,OAAQ,QACRC,KAAM,IAGd,WAAY,CACR5B,MAAOL,EAAMM,QAAQe,KAAKC,SAE9B,oBAAqB,CACjBZ,SAAU,kBACVqB,MAAO,OACPH,OAAQ,OACRvB,MAAOL,EAAMM,QAAQC,UAAUC,QAkBvC,OAfAP,EAASiC,OAAOC,OAAOD,OAAOC,OAAO,CAAE,EAAElC,GAAS,CAAE,CAACD,EAAMoC,YAAYC,KAAK,OAAQ,CAC5E3B,SAAU,OACVR,SAAU,OACVa,UAAW,SAEfjB,IACAG,EAASiC,OAAOC,OAAOD,OAAOC,OAAO,CAAA,EAAIlC,GAAS,CAAEI,MAAOL,EAAMM,QAAQe,KAAKC,WAE9EvB,IACAE,EAASiC,OAAOC,OAAOD,OAAOC,OAAO,CAAE,EAAElC,GAAS,CAAES,SAAU,OAAQR,SAAU,OAAQa,UAAW,MAAO,oBAAqB,CACvHL,SAAU,kBACVqB,MAAO,OACPH,OAAQ,WAGb3B,CAAM"}

package/components/tab/tabs.d.ts

@@ -51,5 +51,6 @@ export interface TabsProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChang
  * Properties are inherited from HTML Button element.
  * @param props TabsProps
  * @returns React Functional Component
+ * @deprecated use Tab component from @mui/material instead
  */
 export declare const Tabs: FC<TabsProps>;

package/components/tab/tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.js","sources":["../../../src/components/tab/tabs.tsx"],"sourcesContent":["import { __rest } from \"tslib\";\nimport { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from \"react/jsx-runtime\";\nimport React, { useCallback, useEffect, useRef, useState } from 'react';\nimport MuiTabs from '@mui/material/Tabs';\nimport { styled } from '@mui/material/styles';\nimport { SecondaryNavigationTabs } from './secondaryNavigation/secondaryNavigationTabs';\nimport { MenuTab } from './menuTab';\nimport useTabs from './hook/useTabs';\nimport { useTheme } from '@mui/material';\nimport { flowColors } from '../../design/skoda/palette.theme';\nimport noop from 'lodash/noop';\nexport const TabsContext = React.createContext({\n    activeTab: null,\n    updateActiveTab: noop,\n    smallSize: false,\n});\n/**\n * @description SkodaFlow Checkbox component.\n * Properties are inherited from HTML Button element.\n * @param props TabsProps\n * @returns React Functional Component\n */\nexport const Tabs = (_a) => {\n    var { handleChange, defaultActiveTab, smallSize, variantSecondaryNavigation, children, sx, classes, labelMoreItem = 'More', activeTab } = _a, props = __rest(_a, [\"handleChange\", \"defaultActiveTab\", \"smallSize\", \"variantSecondaryNavigation\", \"children\", \"sx\", \"classes\", \"labelMoreItem\", \"activeTab\"]);\n    const [currentActiveTab, setCurrentActiveTab] = useState(activeTab !== null && activeTab !== void 0 ? activeTab : defaultActiveTab);\n    const [windowWidth, setWindowWidth] = useState(null);\n    const [isMobileView, setIsMobileView] = useState(false);\n    const [menuChildren, setMenuChildren] = useState([]);\n    const [mouseDown, setMouseDown] = useState(false);\n    const [activeMenuItem, setActiveMenuItem] = useState(false);\n    const moreBtnRef = useRef(null);\n    const tabsRef = useRef(null);\n    const { handleOverflowingTabs, handleIsMobileView } = useTabs();\n    const theme = useTheme();\n    const updateActiveTab = useCallback((value, fromMenu) => {\n        setActiveMenuItem(fromMenu);\n        setCurrentActiveTab(value);\n    }, []);\n    const handleMobileView = useCallback(() => {\n        handleIsMobileView(variantSecondaryNavigation, isMobileView, setIsMobileView, setWindowWidth);\n    }, [handleIsMobileView, isMobileView, variantSecondaryNavigation]);\n    useEffect(() => {\n        setCurrentActiveTab(activeTab !== null && activeTab !== void 0 ? activeTab : defaultActiveTab);\n    }, [activeTab, defaultActiveTab]);\n    useEffect(() => {\n        handleMobileView();\n        window.addEventListener('resize', handleMobileView);\n        return () => {\n            window.removeEventListener('resize', handleMobileView);\n        };\n    });\n    useEffect(() => {\n        handleChange && handleChange(currentActiveTab);\n    }, [currentActiveTab, handleChange]);\n    //Set the initial more btn menu list\n    useEffect(() => {\n        setMenuChildren(React.Children.toArray(children));\n    }, [children]);\n    //on screen resize: if the more btn is rendered, handle the more btn menu and the overflowing tabs\n    useEffect(() => {\n        if (moreBtnRef && moreBtnRef.current) {\n            handleOverflowingTabs(tabsRef, windowWidth, children, setMenuChildren);\n        }\n    }, [windowWidth, handleOverflowingTabs, children]);\n    useEffect(() => {\n        document.addEventListener('mousedown', function () {\n            setMouseDown(true);\n        });\n        document.addEventListener('keydown', function () {\n            setMouseDown(false);\n        });\n    }, []);\n    useEffect(() => { }, [props]);\n    return (_jsx(_Fragment, { children: variantSecondaryNavigation && isMobileView ? (_jsx(SecondaryNavigationTabs, { labelMoreItem: labelMoreItem, currentActiveTab: currentActiveTab, setCurrentActiveTab: (val) => setCurrentActiveTab(val), children: children })) : (_jsx(TabsContext.Provider, { value: { activeTab: currentActiveTab, updateActiveTab, smallSize }, children: _jsxs(TabsStyled, { ref: tabsRef, variant: windowWidth <= theme.breakpoints.values.lg ? 'scrollable' : 'fullWidth', scrollButtons: false, smallSize: smallSize, value: activeMenuItem ? 'more' : currentActiveTab, mouseDown: mouseDown, sx: sx, classes: classes, children: [children, _jsx(MenuTab, { value: \"more\", ref: moreBtnRef, label: labelMoreItem, children: menuChildren })] }) })) }));\n};\n/**\n * @description Tabs styling definition based on props\n */\nconst TabsStyled = styled(MuiTabs, {\n    shouldForwardProp: (prop) => prop !== 'variantSecondaryNavigation' && prop !== 'smallSize' && prop !== 'mouseDown',\n})((_a) => {\n    var { isActive, theme } = _a, props = __rest(_a, [\"isActive\", \"theme\"]);\n    let styles = {};\n    styles = Object.assign(Object.assign({}, styles), { boxSizing: 'border-box', '& *': {\n            boxSizing: 'border-box',\n        }, '& > div': {\n            '& > div > .MuiTab-root:last-child': {\n                marginRight: '10px',\n            },\n            '& > div': {\n                marginLeft: '2px',\n                width: '100%',\n            },\n            '& > .MuiTabs-indicator': {\n                height: '3px',\n                backgroundColor: flowColors.brand.primary,\n            },\n            '& > div > .MuiTab-root': {\n                marginLeft: '56px',\n            },\n        } });\n    if (props.smallSize) {\n        styles = Object.assign(Object.assign({}, styles), { '& > div': {\n                '& > div > .MuiTab-root:last-child': {\n                    marginRight: '10px',\n                },\n                '& > div': {\n                    marginLeft: '2px',\n                },\n                '& > div > .MuiTab-root': {\n                    marginLeft: '40px',\n                    '&:after': {\n                        bottom: '-11px',\n                    },\n                },\n            }, '& .MuiTabs-indicator': {\n                backgroundColor: flowColors.brand.primary,\n            } });\n    }\n    if (props.mouseDown) {\n        styles = Object.assign(Object.assign({}, styles), { '& > div': Object.assign(Object.assign({}, styles['& > div']), { '& > div > .MuiTab-root': Object.assign(Object.assign({}, styles['& > div']['& > div > .MuiTab-root']), { '&:focus': {\n                        border: 0,\n                        paddingLeft: 0,\n                        paddingRight: 0,\n                    } }) }) });\n    }\n    return styles;\n});\n//# sourceMappingURL=tabs.js.map"],"names":["TabsContext","React","createContext","activeTab","updateActiveTab","noop","smallSize","Tabs","_a","handleChange","defaultActiveTab","variantSecondaryNavigation","children","sx","classes","labelMoreItem","props","__rest","currentActiveTab","setCurrentActiveTab","useState","windowWidth","setWindowWidth","isMobileView","setIsMobileView","menuChildren","setMenuChildren","mouseDown","setMouseDown","activeMenuItem","setActiveMenuItem","moreBtnRef","useRef","tabsRef","handleOverflowingTabs","handleIsMobileView","useTabs","theme","useTheme","useCallback","value","fromMenu","handleMobileView","useEffect","window","addEventListener","removeEventListener","Children","toArray","current","document","_jsx","_Fragment","SecondaryNavigationTabs","val","Provider","_jsxs","TabsStyled","ref","variant","breakpoints","values","lg","scrollButtons","MenuTab","label","styled","MuiTabs","shouldForwardProp","prop","styles","Object","assign","boxSizing","marginRight","marginLeft","width","height","backgroundColor","flowColors","brand","primary","bottom","border","paddingLeft","paddingRight"],"mappings":"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"}
+{"version":3,"file":"tabs.js","sources":["../../../src/components/tab/tabs.tsx"],"sourcesContent":["import { __rest } from \"tslib\";\nimport { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from \"react/jsx-runtime\";\nimport React, { useCallback, useEffect, useRef, useState } from 'react';\nimport MuiTabs from '@mui/material/Tabs';\nimport { styled } from '@mui/material/styles';\nimport { SecondaryNavigationTabs } from './secondaryNavigation/secondaryNavigationTabs';\nimport { MenuTab } from './menuTab';\nimport useTabs from './hook/useTabs';\nimport { useTheme } from '@mui/material';\nimport { flowColors } from '../../design/skoda/palette.theme';\nimport noop from 'lodash/noop';\nexport const TabsContext = React.createContext({\n    activeTab: null,\n    updateActiveTab: noop,\n    smallSize: false,\n});\n/**\n * @description SkodaFlow Checkbox component.\n * Properties are inherited from HTML Button element.\n * @param props TabsProps\n * @returns React Functional Component\n * @deprecated use Tab component from @mui/material instead\n */\nexport const Tabs = (_a) => {\n    var { handleChange, defaultActiveTab, smallSize, variantSecondaryNavigation, children, sx, classes, labelMoreItem = 'More', activeTab } = _a, props = __rest(_a, [\"handleChange\", \"defaultActiveTab\", \"smallSize\", \"variantSecondaryNavigation\", \"children\", \"sx\", \"classes\", \"labelMoreItem\", \"activeTab\"]);\n    const [currentActiveTab, setCurrentActiveTab] = useState(activeTab !== null && activeTab !== void 0 ? activeTab : defaultActiveTab);\n    const [windowWidth, setWindowWidth] = useState(null);\n    const [isMobileView, setIsMobileView] = useState(false);\n    const [menuChildren, setMenuChildren] = useState([]);\n    const [mouseDown, setMouseDown] = useState(false);\n    const [activeMenuItem, setActiveMenuItem] = useState(false);\n    const moreBtnRef = useRef(null);\n    const tabsRef = useRef(null);\n    const { handleOverflowingTabs, handleIsMobileView } = useTabs();\n    const theme = useTheme();\n    const updateActiveTab = useCallback((value, fromMenu) => {\n        setActiveMenuItem(fromMenu);\n        setCurrentActiveTab(value);\n    }, []);\n    const handleMobileView = useCallback(() => {\n        handleIsMobileView(variantSecondaryNavigation, isMobileView, setIsMobileView, setWindowWidth);\n    }, [handleIsMobileView, isMobileView, variantSecondaryNavigation]);\n    useEffect(() => {\n        setCurrentActiveTab(activeTab !== null && activeTab !== void 0 ? activeTab : defaultActiveTab);\n    }, [activeTab, defaultActiveTab]);\n    useEffect(() => {\n        handleMobileView();\n        window.addEventListener('resize', handleMobileView);\n        return () => {\n            window.removeEventListener('resize', handleMobileView);\n        };\n    });\n    useEffect(() => {\n        handleChange && handleChange(currentActiveTab);\n    }, [currentActiveTab, handleChange]);\n    //Set the initial more btn menu list\n    useEffect(() => {\n        setMenuChildren(React.Children.toArray(children));\n    }, [children]);\n    //on screen resize: if the more btn is rendered, handle the more btn menu and the overflowing tabs\n    useEffect(() => {\n        if (moreBtnRef && moreBtnRef.current) {\n            handleOverflowingTabs(tabsRef, windowWidth, children, setMenuChildren);\n        }\n    }, [windowWidth, handleOverflowingTabs, children]);\n    useEffect(() => {\n        document.addEventListener('mousedown', function () {\n            setMouseDown(true);\n        });\n        document.addEventListener('keydown', function () {\n            setMouseDown(false);\n        });\n    }, []);\n    useEffect(() => { }, [props]);\n    return (_jsx(_Fragment, { children: variantSecondaryNavigation && isMobileView ? (_jsx(SecondaryNavigationTabs, { labelMoreItem: labelMoreItem, currentActiveTab: currentActiveTab, setCurrentActiveTab: (val) => setCurrentActiveTab(val), children: children })) : (_jsx(TabsContext.Provider, { value: { activeTab: currentActiveTab, updateActiveTab, smallSize }, children: _jsxs(TabsStyled, { ref: tabsRef, variant: windowWidth <= theme.breakpoints.values.lg ? 'scrollable' : 'fullWidth', scrollButtons: false, smallSize: smallSize, value: activeMenuItem ? 'more' : currentActiveTab, mouseDown: mouseDown, sx: sx, classes: classes, children: [children, _jsx(MenuTab, { value: \"more\", ref: moreBtnRef, label: labelMoreItem, children: menuChildren })] }) })) }));\n};\n/**\n * @description Tabs styling definition based on props\n */\nconst TabsStyled = styled(MuiTabs, {\n    shouldForwardProp: (prop) => prop !== 'variantSecondaryNavigation' && prop !== 'smallSize' && prop !== 'mouseDown',\n})((_a) => {\n    var { isActive, theme } = _a, props = __rest(_a, [\"isActive\", \"theme\"]);\n    let styles = {};\n    styles = Object.assign(Object.assign({}, styles), { boxSizing: 'border-box', '& *': {\n            boxSizing: 'border-box',\n        }, '& > div': {\n            '& > div > .MuiTab-root:last-child': {\n                marginRight: '10px',\n            },\n            '& > div': {\n                marginLeft: '2px',\n                width: '100%',\n            },\n            '& > .MuiTabs-indicator': {\n                height: '3px',\n                backgroundColor: flowColors.brand.primary,\n            },\n            '& > div > .MuiTab-root': {\n                marginLeft: '56px',\n            },\n        } });\n    if (props.smallSize) {\n        styles = Object.assign(Object.assign({}, styles), { '& > div': {\n                '& > div > .MuiTab-root:last-child': {\n                    marginRight: '10px',\n                },\n                '& > div': {\n                    marginLeft: '2px',\n                },\n                '& > div > .MuiTab-root': {\n                    marginLeft: '40px',\n                    '&:after': {\n                        bottom: '-11px',\n                    },\n                },\n            }, '& .MuiTabs-indicator': {\n                backgroundColor: flowColors.brand.primary,\n            } });\n    }\n    if (props.mouseDown) {\n        styles = Object.assign(Object.assign({}, styles), { '& > div': Object.assign(Object.assign({}, styles['& > div']), { '& > div > .MuiTab-root': Object.assign(Object.assign({}, styles['& > div']['& > div > .MuiTab-root']), { '&:focus': {\n                        border: 0,\n                        paddingLeft: 0,\n                        paddingRight: 0,\n                    } }) }) });\n    }\n    return styles;\n});\n//# sourceMappingURL=tabs.js.map"],"names":["TabsContext","React","createContext","activeTab","updateActiveTab","noop","smallSize","Tabs","_a","handleChange","defaultActiveTab","variantSecondaryNavigation","children","sx","classes","labelMoreItem","props","__rest","currentActiveTab","setCurrentActiveTab","useState","windowWidth","setWindowWidth","isMobileView","setIsMobileView","menuChildren","setMenuChildren","mouseDown","setMouseDown","activeMenuItem","setActiveMenuItem","moreBtnRef","useRef","tabsRef","handleOverflowingTabs","handleIsMobileView","useTabs","theme","useTheme","useCallback","value","fromMenu","handleMobileView","useEffect","window","addEventListener","removeEventListener","Children","toArray","current","document","_jsx","_Fragment","SecondaryNavigationTabs","val","Provider","_jsxs","TabsStyled","ref","variant","breakpoints","values","lg","scrollButtons","MenuTab","label","styled","MuiTabs","shouldForwardProp","prop","styles","Object","assign","boxSizing","marginRight","marginLeft","width","height","backgroundColor","flowColors","brand","primary","bottom","border","paddingLeft","paddingRight"],"mappings":"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"}

package/components/textInput/textInput.js

@@ -1,2 +1,2 @@
-import{__rest as e}from"tslib";import{jsx as o}from"react/jsx-runtime";import{useState as r,useRef as l}from"react";import{Icon as n}from"../icon/icon.js";import{InputAdornment as a}from"@mui/material";import t from"../common/styled/textFieldStyled.js";import{useTextInput as i}from"./hook/useTextInput.js";import s from"../common/hook/useWindowSize.js";import{useTextInputEffect as m}from"./hook/useTextInputEffect.js";import d from"../common/helperText.js";import h from"lodash/noop";const u=u=>{var{name:c,id:p,label:f=null,onChange:x,onBlur:b,onFocus:C,value:j,placeholder:v,hasError:F,fullWidth:k=!0,excludeChars:y}=u,g=e(u,["name","id","label","onChange","onBlur","onFocus","value","placeholder","hasError","fullWidth","excludeChars"]);const[T,w]=r(j||""),[I,L]=r(!1),[B,D]=r(!1),[E,O]=r(!1),[W,K]=r(!1),{handleOnBlur:N,handleOnFocus:P,handleOnChange:M,handlePlaceholder:S}=i(f,W,v,g.type),q=l(null),{width:z}=s();return m(q,h,k,z,T,j,g.maxChars,g.required,L,w,K),o("div",{children:o(t,Object.assign({},g,{className:[g.icon?"textField-Icon":"",f?"textField-Label":"textField-NoLabel"].join(" "),InputLabelProps:{shrink:I},InputProps:g.icon?{startAdornment:o(a,{position:"start",children:o(n,{color:g.disabled?"disabled":"inherit",className:g.icon})})}:{},onChange:e=>M(e,g.maxChars,x,w),value:T,onFocus:e=>P(e,D,L,C),onMouseEnter:()=>O(!0),onMouseLeave:()=>O(!1),hovered:E,onBlur:e=>N(e,L,D,b,T),focused:B,placeholder:S,label:v?null:f,hiddenLabel:!!v,name:c,ref:q,id:p,error:F,fullWidth:k,onKeyDown:e=>{g.onKeyDownCallback&&g.onKeyDownCallback(e),y&&y.length>0&&y.includes(e.key)&&e.preventDefault()},helperText:o(d,{maxChars:g.maxChars,currentValue:T,helpText:g.helpText})}))})};export{u as TextInput};
+import{__rest as e}from"tslib";import{jsx as o}from"react/jsx-runtime";import{useState as r,useRef as n}from"react";import{Icon as l}from"../icon/icon.js";import"../icon/icon.definitions.js";import{InputAdornment as t}from"@mui/material";import a from"../common/styled/textFieldStyled.js";import{useTextInput as i}from"./hook/useTextInput.js";import s from"../common/hook/useWindowSize.js";import{useTextInputEffect as m}from"./hook/useTextInputEffect.js";import d from"../common/helperText.js";import h from"lodash/noop";const u=u=>{var{name:c,id:p,label:f=null,onChange:x,onBlur:b,onFocus:C,value:j,placeholder:v,hasError:F,fullWidth:k=!0,excludeChars:y}=u,g=e(u,["name","id","label","onChange","onBlur","onFocus","value","placeholder","hasError","fullWidth","excludeChars"]);const[T,w]=r(j||""),[I,L]=r(!1),[B,D]=r(!1),[E,O]=r(!1),[W,K]=r(!1),{handleOnBlur:P,handleOnFocus:M,handleOnChange:N,handlePlaceholder:S}=i(f,W,v,g.type),q=n(null),{width:z}=s();return m(q,h,k,z,T,j,g.maxChars,g.required,L,w,K),o("div",{children:o(a,Object.assign({},g,{className:[g.icon?"textField-Icon":"",f?"textField-Label":"textField-NoLabel"].join(" "),InputLabelProps:{shrink:I},InputProps:g.icon?{startAdornment:o(t,{position:"start",children:o(l,{color:g.disabled?"disabled":"inherit",name:g.icon})})}:{},onChange:e=>N(e,g.maxChars,x,w),value:T,onFocus:e=>M(e,D,L,C),onMouseEnter:()=>O(!0),onMouseLeave:()=>O(!1),hovered:E,onBlur:e=>P(e,L,D,b,T),focused:B,placeholder:S,label:v?null:f,hiddenLabel:!!v,name:c,ref:q,id:p,error:F,fullWidth:k,onKeyDown:e=>{g.onKeyDownCallback&&g.onKeyDownCallback(e),y&&y.length>0&&y.includes(e.key)&&e.preventDefault()},helperText:o(d,{maxChars:g.maxChars,currentValue:T,helpText:g.helpText})}))})};export{u as TextInput};
 //# sourceMappingURL=textInput.js.map

package/components/textInput/textInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"textInput.js","sources":["../../../src/components/textInput/textInput.tsx"],"sourcesContent":["import { __rest } from \"tslib\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { useRef, useState } from 'react';\nimport { Icon } from '../icon';\nimport { InputAdornment } from '@mui/material';\nimport TextFieldStyled from '../common/styled/textFieldStyled';\nimport { useTextInput } from './hook/useTextInput';\nimport useWindowSize from '../common/hook/useWindowSize';\nimport { useTextInputEffect } from './hook/useTextInputEffect';\nimport HelperText from '../common/helperText';\nimport noop from 'lodash/noop';\n/**\n * @description SkodaFlow TextInput component.\n * Properties are inherited from HTML input element.\n * @param props TextInputProps\n * @returns React Functional Component\n * @deprecated this component is deprecated. Use themed TextField component from @mui/material instead.\n */\nexport const TextInput = (_a) => {\n    var { name, id, label = null, onChange, onBlur, onFocus, value, placeholder, hasError, fullWidth = true, excludeChars } = _a, props = __rest(_a, [\"name\", \"id\", \"label\", \"onChange\", \"onBlur\", \"onFocus\", \"value\", \"placeholder\", \"hasError\", \"fullWidth\", \"excludeChars\"]);\n    const [currentValue, setCurrentValue] = useState(value || '');\n    const [isShrunk, setIsShrunk] = useState(false);\n    const [isFocused, setIsFocused] = useState(false);\n    const [hovered, setHovered] = useState(false);\n    const [isRequired, setIsRequired] = useState(false);\n    const { handleOnBlur, handleOnFocus, handleOnChange, handlePlaceholder } = useTextInput(label, isRequired, placeholder, props.type);\n    const inputRef = useRef(null);\n    const { width } = useWindowSize();\n    useTextInputEffect(inputRef, noop, fullWidth, width, currentValue, value, props.maxChars, props.required, setIsShrunk, setCurrentValue, setIsRequired);\n    return (_jsx(\"div\", { children: _jsx(TextFieldStyled, Object.assign({}, props, { className: [props.icon ? 'textField-Icon' : '', label ? 'textField-Label' : 'textField-NoLabel'].join(' '), InputLabelProps: {\n                shrink: isShrunk,\n            }, InputProps: props.icon\n                ? {\n                    startAdornment: (_jsx(InputAdornment, { position: \"start\", children: _jsx(Icon, { color: props.disabled ? 'disabled' : 'inherit', className: props.icon }) })),\n                }\n                : {}, onChange: (event) => handleOnChange(event, props.maxChars, onChange, setCurrentValue), value: currentValue, onFocus: (event) => handleOnFocus(event, setIsFocused, setIsShrunk, onFocus), onMouseEnter: () => setHovered(true), onMouseLeave: () => setHovered(false), hovered: hovered, onBlur: (event) => handleOnBlur(event, setIsShrunk, setIsFocused, onBlur, currentValue), focused: isFocused, placeholder: handlePlaceholder, label: placeholder ? null : label, hiddenLabel: !!placeholder, name: name, ref: inputRef, id: id, error: hasError, fullWidth: fullWidth, onKeyDown: (event) => {\n                if (props.onKeyDownCallback)\n                    props.onKeyDownCallback(event);\n                if (excludeChars && excludeChars.length > 0 && excludeChars.includes(event.key)) {\n                    event.preventDefault();\n                }\n            }, helperText: _jsx(HelperText, { maxChars: props.maxChars, currentValue: currentValue, helpText: props.helpText }) })) }));\n};\n//# sourceMappingURL=textInput.js.map"],"names":["TextInput","_a","name","id","label","onChange","onBlur","onFocus","value","placeholder","hasError","fullWidth","excludeChars","props","__rest","currentValue","setCurrentValue","useState","isShrunk","setIsShrunk","isFocused","setIsFocused","hovered","setHovered","isRequired","setIsRequired","handleOnBlur","handleOnFocus","handleOnChange","handlePlaceholder","useTextInput","type","inputRef","useRef","width","useWindowSize","useTextInputEffect","noop","maxChars","required","_jsx","children","TextFieldStyled","Object","assign","className","icon","join","InputLabelProps","shrink","InputProps","startAdornment","InputAdornment","position","Icon","color","disabled","event","onMouseEnter","onMouseLeave","focused","hiddenLabel","ref","error","onKeyDown","onKeyDownCallback","length","includes","key","preventDefault","helperText","HelperText","helpText"],"mappings":"seAkBY,MAACA,EAAaC,IACtB,IAAIC,KAAEA,EAAIC,GAAEA,EAAEC,MAAEA,EAAQ,KAAIC,SAAEA,EAAQC,OAAEA,EAAMC,QAAEA,EAAOC,MAAEA,EAAKC,YAAEA,EAAWC,SAAEA,EAAQC,UAAEA,GAAY,EAAIC,aAAEA,GAAiBX,EAAIY,EAAQC,EAAOb,EAAI,CAAC,OAAQ,KAAM,QAAS,WAAY,SAAU,UAAW,QAAS,cAAe,WAAY,YAAa,iBAC3P,MAAOc,EAAcC,GAAmBC,EAAST,GAAS,KACnDU,EAAUC,GAAeF,GAAS,IAClCG,EAAWC,GAAgBJ,GAAS,IACpCK,EAASC,GAAcN,GAAS,IAChCO,EAAYC,GAAiBR,GAAS,IACvCS,aAAEA,EAAYC,cAAEA,EAAaC,eAAEA,EAAcC,kBAAEA,GAAsBC,EAAa1B,EAAOoB,EAAYf,EAAaI,EAAMkB,MACxHC,EAAWC,EAAO,OAClBC,MAAEA,GAAUC,IAElB,OADAC,EAAmBJ,EAAUK,EAAM1B,EAAWuB,EAAOnB,EAAcP,EAAOK,EAAMyB,SAAUzB,EAAM0B,SAAUpB,EAAaH,EAAiBS,GAChIe,EAAK,MAAO,CAAEC,SAAUD,EAAKE,EAAiBC,OAAOC,OAAO,GAAI/B,EAAO,CAAEgC,UAAW,CAAChC,EAAMiC,KAAO,iBAAmB,GAAI1C,EAAQ,kBAAoB,qBAAqB2C,KAAK,KAAMC,gBAAiB,CAClMC,OAAQ/B,GACTgC,WAAYrC,EAAMiC,KACf,CACEK,eAAiBX,EAAKY,EAAgB,CAAEC,SAAU,QAASZ,SAAUD,EAAKc,EAAM,CAAEC,MAAO1C,EAAM2C,SAAW,WAAa,UAAWX,UAAWhC,EAAMiC,UAErJ,CAAE,EAAEzC,SAAWoD,GAAU7B,EAAe6B,EAAO5C,EAAMyB,SAAUjC,EAAUW,GAAkBR,MAAOO,EAAcR,QAAUkD,GAAU9B,EAAc8B,EAAOpC,EAAcF,EAAaZ,GAAUmD,aAAc,IAAMnC,GAAW,GAAOoC,aAAc,IAAMpC,GAAW,GAAQD,QAASA,EAAShB,OAASmD,GAAU/B,EAAa+B,EAAOtC,EAAaE,EAAcf,EAAQS,GAAe6C,QAASxC,EAAWX,YAAaoB,EAAmBzB,MAAOK,EAAc,KAAOL,EAAOyD,cAAepD,EAAaP,KAAMA,EAAM4D,IAAK9B,EAAU7B,GAAIA,EAAI4D,MAAOrD,EAAUC,UAAWA,EAAWqD,UAAYP,IAC7jB5C,EAAMoD,mBACNpD,EAAMoD,kBAAkBR,GACxB7C,GAAgBA,EAAasD,OAAS,GAAKtD,EAAauD,SAASV,EAAMW,MACvEX,EAAMY,gBACT,EACFC,WAAY9B,EAAK+B,EAAY,CAAEjC,SAAUzB,EAAMyB,SAAUvB,aAAcA,EAAcyD,SAAU3D,EAAM2D,eAAoB"}
+{"version":3,"file":"textInput.js","sources":["../../../src/components/textInput/textInput.tsx"],"sourcesContent":["import { __rest } from \"tslib\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { useRef, useState } from 'react';\nimport { Icon } from '../icon';\nimport { InputAdornment } from '@mui/material';\nimport TextFieldStyled from '../common/styled/textFieldStyled';\nimport { useTextInput } from './hook/useTextInput';\nimport useWindowSize from '../common/hook/useWindowSize';\nimport { useTextInputEffect } from './hook/useTextInputEffect';\nimport HelperText from '../common/helperText';\nimport noop from 'lodash/noop';\n/**\n * @description SkodaFlow TextInput component.\n * Properties are inherited from HTML input element.\n * @param props TextInputProps\n * @returns React Functional Component\n * @deprecated this component is deprecated. Use themed TextField component from @mui/material instead.\n */\nexport const TextInput = (_a) => {\n    var { name, id, label = null, onChange, onBlur, onFocus, value, placeholder, hasError, fullWidth = true, excludeChars } = _a, props = __rest(_a, [\"name\", \"id\", \"label\", \"onChange\", \"onBlur\", \"onFocus\", \"value\", \"placeholder\", \"hasError\", \"fullWidth\", \"excludeChars\"]);\n    const [currentValue, setCurrentValue] = useState(value || '');\n    const [isShrunk, setIsShrunk] = useState(false);\n    const [isFocused, setIsFocused] = useState(false);\n    const [hovered, setHovered] = useState(false);\n    const [isRequired, setIsRequired] = useState(false);\n    const { handleOnBlur, handleOnFocus, handleOnChange, handlePlaceholder } = useTextInput(label, isRequired, placeholder, props.type);\n    const inputRef = useRef(null);\n    const { width } = useWindowSize();\n    useTextInputEffect(inputRef, noop, fullWidth, width, currentValue, value, props.maxChars, props.required, setIsShrunk, setCurrentValue, setIsRequired);\n    return (_jsx(\"div\", { children: _jsx(TextFieldStyled, Object.assign({}, props, { className: [props.icon ? 'textField-Icon' : '', label ? 'textField-Label' : 'textField-NoLabel'].join(' '), InputLabelProps: {\n                shrink: isShrunk,\n            }, InputProps: props.icon\n                ? {\n                    startAdornment: (_jsx(InputAdornment, { position: \"start\", children: _jsx(Icon, { color: props.disabled ? 'disabled' : 'inherit', name: props.icon }) })),\n                }\n                : {}, onChange: (event) => handleOnChange(event, props.maxChars, onChange, setCurrentValue), value: currentValue, onFocus: (event) => handleOnFocus(event, setIsFocused, setIsShrunk, onFocus), onMouseEnter: () => setHovered(true), onMouseLeave: () => setHovered(false), hovered: hovered, onBlur: (event) => handleOnBlur(event, setIsShrunk, setIsFocused, onBlur, currentValue), focused: isFocused, placeholder: handlePlaceholder, label: placeholder ? null : label, hiddenLabel: !!placeholder, name: name, ref: inputRef, id: id, error: hasError, fullWidth: fullWidth, onKeyDown: (event) => {\n                if (props.onKeyDownCallback)\n                    props.onKeyDownCallback(event);\n                if (excludeChars && excludeChars.length > 0 && excludeChars.includes(event.key)) {\n                    event.preventDefault();\n                }\n            }, helperText: _jsx(HelperText, { maxChars: props.maxChars, currentValue: currentValue, helpText: props.helpText }) })) }));\n};\n//# sourceMappingURL=textInput.js.map"],"names":["TextInput","_a","name","id","label","onChange","onBlur","onFocus","value","placeholder","hasError","fullWidth","excludeChars","props","__rest","currentValue","setCurrentValue","useState","isShrunk","setIsShrunk","isFocused","setIsFocused","hovered","setHovered","isRequired","setIsRequired","handleOnBlur","handleOnFocus","handleOnChange","handlePlaceholder","useTextInput","type","inputRef","useRef","width","useWindowSize","useTextInputEffect","noop","maxChars","required","_jsx","children","TextFieldStyled","Object","assign","className","icon","join","InputLabelProps","shrink","InputProps","startAdornment","InputAdornment","position","Icon","color","disabled","event","onMouseEnter","onMouseLeave","focused","hiddenLabel","ref","error","onKeyDown","onKeyDownCallback","length","includes","key","preventDefault","helperText","HelperText","helpText"],"mappings":"0gBAkBY,MAACA,EAAaC,IACtB,IAAIC,KAAEA,EAAIC,GAAEA,EAAEC,MAAEA,EAAQ,KAAIC,SAAEA,EAAQC,OAAEA,EAAMC,QAAEA,EAAOC,MAAEA,EAAKC,YAAEA,EAAWC,SAAEA,EAAQC,UAAEA,GAAY,EAAIC,aAAEA,GAAiBX,EAAIY,EAAQC,EAAOb,EAAI,CAAC,OAAQ,KAAM,QAAS,WAAY,SAAU,UAAW,QAAS,cAAe,WAAY,YAAa,iBAC3P,MAAOc,EAAcC,GAAmBC,EAAST,GAAS,KACnDU,EAAUC,GAAeF,GAAS,IAClCG,EAAWC,GAAgBJ,GAAS,IACpCK,EAASC,GAAcN,GAAS,IAChCO,EAAYC,GAAiBR,GAAS,IACvCS,aAAEA,EAAYC,cAAEA,EAAaC,eAAEA,EAAcC,kBAAEA,GAAsBC,EAAa1B,EAAOoB,EAAYf,EAAaI,EAAMkB,MACxHC,EAAWC,EAAO,OAClBC,MAAEA,GAAUC,IAElB,OADAC,EAAmBJ,EAAUK,EAAM1B,EAAWuB,EAAOnB,EAAcP,EAAOK,EAAMyB,SAAUzB,EAAM0B,SAAUpB,EAAaH,EAAiBS,GAChIe,EAAK,MAAO,CAAEC,SAAUD,EAAKE,EAAiBC,OAAOC,OAAO,GAAI/B,EAAO,CAAEgC,UAAW,CAAChC,EAAMiC,KAAO,iBAAmB,GAAI1C,EAAQ,kBAAoB,qBAAqB2C,KAAK,KAAMC,gBAAiB,CAClMC,OAAQ/B,GACTgC,WAAYrC,EAAMiC,KACf,CACEK,eAAiBX,EAAKY,EAAgB,CAAEC,SAAU,QAASZ,SAAUD,EAAKc,EAAM,CAAEC,MAAO1C,EAAM2C,SAAW,WAAa,UAAWtD,KAAMW,EAAMiC,UAEhJ,CAAE,EAAEzC,SAAWoD,GAAU7B,EAAe6B,EAAO5C,EAAMyB,SAAUjC,EAAUW,GAAkBR,MAAOO,EAAcR,QAAUkD,GAAU9B,EAAc8B,EAAOpC,EAAcF,EAAaZ,GAAUmD,aAAc,IAAMnC,GAAW,GAAOoC,aAAc,IAAMpC,GAAW,GAAQD,QAASA,EAAShB,OAASmD,GAAU/B,EAAa+B,EAAOtC,EAAaE,EAAcf,EAAQS,GAAe6C,QAASxC,EAAWX,YAAaoB,EAAmBzB,MAAOK,EAAc,KAAOL,EAAOyD,cAAepD,EAAaP,KAAMA,EAAM4D,IAAK9B,EAAU7B,GAAIA,EAAI4D,MAAOrD,EAAUC,UAAWA,EAAWqD,UAAYP,IAC7jB5C,EAAMoD,mBACNpD,EAAMoD,kBAAkBR,GACxB7C,GAAgBA,EAAasD,OAAS,GAAKtD,EAAauD,SAASV,EAAMW,MACvEX,EAAMY,gBACT,EACFC,WAAY9B,EAAK+B,EAAY,CAAEjC,SAAUzB,EAAMyB,SAAUvB,aAAcA,EAAcyD,SAAU3D,EAAM2D,eAAoB"}

package/components/upload/UploadField.d.ts

@@ -1,5 +1,5 @@
 import { FC, ReactNode } from 'react';
-import { availableIcons } from '../icon';
+import { IconNameProp } from '../icon';
 export type UploadFieldProps = {
     /**
      * Glob string that specifies which file types are accepted by upload
@@ -27,7 +27,7 @@ export type UploadFieldProps = {
      * Icon name of the upload button.
      * @default undefined
      */
-    uploadIcon?: (typeof availableIcons)[number];
+    uploadIcon?: IconNameProp;
     /**
      * Label of the upload button.
      * @default Upload

package/components/upload/UploadField.js

@@ -1,2 +1,2 @@
-import{jsx as e,jsxs as r}from"react/jsx-runtime";import{useRef as t,useState as n,useCallback as o}from"react";import{UploadBox as i}from"./UploadBox.js";import{Icon as a}from"../icon/icon.js";import{Box as l,IconButton as p,Typography as c}from"@mui/material";import{minimatch as s}from"minimatch";const f=({uploadIcon:f="plus",maxFiles:m=1,uploadLabel:d="Upload",accept:u="*",onFileDrop:g})=>{const h=t(null),[v,y]=n(!1),[x,D]=n(!1),j=o((e=>{e.stopPropagation(),e.preventDefault()}),[]),C=o((e=>{[...e.dataTransfer.files].filter((e=>s(e.type,u))).length>0?y(!0):D(!0)}),[y,D]),P=o((()=>{y(!1),D(!1)}),[y,D]),k=o((()=>{var e;null===(e=h.current)||void 0===e||e.click()}),[]),E=o((e=>{e.preventDefault(),e.stopPropagation();const r=[...e.dataTransfer.files].filter((e=>s(e.type,u))).slice(0,m);y(!1),D(!1),r.length>0&&g(r)}),[y,D]),F=o((e=>{e.preventDefault(),e.stopPropagation();const r=[...e.target.files].filter((e=>s(e.type,u))).slice(0,m);r.length>0&&(g([...r]),h.current&&(h.current.value=""))}),[]);return e(i,{color:v?"primary":"secondary",children:r(l,{sx:{width:"100%",height:"100%",display:"flex",alignItems:"center",justifyContent:"center",padding:"16px",gap:"8px","& *":{pointerEvents:"none"},cursor:x?"no-drop":"pointer"},onDragOver:j,onDrop:E,onDragEnter:C,onDragLeave:P,onClick:k,children:[e(p,{children:e(a,{className:f})}),"string"==typeof d?e(c,{children:d}):d,e("input",{ref:h,hidden:!0,type:"file",multiple:m>1,accept:u,onChange:F})]})})};export{f as UploadField};
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import{useRef as r,useState as n,useCallback as o}from"react";import{UploadBox as i}from"./UploadBox.js";import{Icon as a}from"../icon/icon.js";import"../icon/icon.definitions.js";import{Box as p,IconButton as l,Typography as c}from"@mui/material";import{minimatch as s}from"minimatch";const f=({uploadIcon:f="plus",maxFiles:m=1,uploadLabel:d="Upload",accept:u="*",onFileDrop:g})=>{const h=r(null),[v,y]=n(!1),[x,D]=n(!1),j=o((e=>{e.stopPropagation(),e.preventDefault()}),[]),C=o((e=>{[...e.dataTransfer.files].filter((e=>s(e.type,u))).length>0?y(!0):D(!0)}),[y,D]),P=o((()=>{y(!1),D(!1)}),[y,D]),k=o((()=>{var e;null===(e=h.current)||void 0===e||e.click()}),[]),E=o((e=>{e.preventDefault(),e.stopPropagation();const t=[...e.dataTransfer.files].filter((e=>s(e.type,u))).slice(0,m);y(!1),D(!1),t.length>0&&g(t)}),[y,D]),F=o((e=>{e.preventDefault(),e.stopPropagation();const t=[...e.target.files].filter((e=>s(e.type,u))).slice(0,m);t.length>0&&(g([...t]),h.current&&(h.current.value=""))}),[]);return e(i,{color:v?"primary":"secondary",children:t(p,{sx:{width:"100%",height:"100%",display:"flex",alignItems:"center",justifyContent:"center",padding:"16px",gap:"8px","& *":{pointerEvents:"none"},cursor:x?"no-drop":"pointer"},onDragOver:j,onDrop:E,onDragEnter:C,onDragLeave:P,onClick:k,children:[e(l,{children:e(a,{name:f})}),"string"==typeof d?e(c,{children:d}):d,e("input",{ref:h,hidden:!0,type:"file",multiple:m>1,accept:u,onChange:F})]})})};export{f as UploadField};
 //# sourceMappingURL=UploadField.js.map

package/components/upload/UploadField.js.map

@@ -1 +1 @@
-{"version":3,"file":"UploadField.js","sources":["../../../src/components/upload/UploadField.tsx"],"sourcesContent":["import { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport { useCallback, useRef, useState } from 'react';\nimport { UploadBox } from './UploadBox';\nimport { Icon } from '../icon';\nimport { Box, IconButton, Typography } from '@mui/material';\nimport { minimatch } from 'minimatch';\nexport const UploadField = ({ uploadIcon = 'plus', maxFiles = 1, uploadLabel = 'Upload', accept = '*', onFileDrop, }) => {\n    const inputRef = useRef(null);\n    const [dragging, setDragging] = useState(false);\n    const [dragInvalid, setDragInvalid] = useState(false);\n    const preventDragOver = useCallback((event) => {\n        event.stopPropagation();\n        event.preventDefault();\n    }, []);\n    const dragOverHandler = useCallback((event) => {\n        const files = [...event.dataTransfer.files];\n        const matched = files.filter((file) => minimatch(file.type, accept));\n        if (matched.length > 0) {\n            setDragging(true);\n        }\n        else {\n            setDragInvalid(true);\n        }\n    }, [setDragging, setDragInvalid]);\n    const dragLeaveHandler = useCallback(() => {\n        setDragging(false);\n        setDragInvalid(false);\n    }, [setDragging, setDragInvalid]);\n    const uploadClickHandler = useCallback(() => {\n        var _a;\n        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.click();\n    }, []);\n    const dropHandler = useCallback((event) => {\n        event.preventDefault();\n        event.stopPropagation();\n        const files = [...event.dataTransfer.files];\n        const matched = files.filter((file) => minimatch(file.type, accept)).slice(0, maxFiles);\n        setDragging(false);\n        setDragInvalid(false);\n        if (matched.length > 0) {\n            onFileDrop(matched);\n        }\n    }, [setDragging, setDragInvalid]);\n    const inputChangeHandler = useCallback((event) => {\n        event.preventDefault();\n        event.stopPropagation();\n        const files = [...event.target.files];\n        const matched = files.filter((file) => minimatch(file.type, accept)).slice(0, maxFiles);\n        if (matched.length > 0) {\n            onFileDrop([...matched]);\n            if (inputRef.current) {\n                inputRef.current.value = '';\n            }\n        }\n    }, []);\n    return (_jsx(UploadBox, { color: dragging ? 'primary' : 'secondary', children: _jsxs(Box, { sx: {\n                width: '100%',\n                height: '100%',\n                display: 'flex',\n                alignItems: 'center',\n                justifyContent: 'center',\n                padding: '16px',\n                gap: '8px',\n                '& *': {\n                    pointerEvents: 'none',\n                },\n                cursor: dragInvalid ? 'no-drop' : 'pointer',\n            }, onDragOver: preventDragOver, onDrop: dropHandler, onDragEnter: dragOverHandler, onDragLeave: dragLeaveHandler, onClick: uploadClickHandler, children: [_jsx(IconButton, { children: _jsx(Icon, { className: uploadIcon }) }), typeof uploadLabel === 'string' ? _jsx(Typography, { children: uploadLabel }) : uploadLabel, _jsx(\"input\", { ref: inputRef, hidden: true, type: \"file\", multiple: maxFiles > 1, accept: accept, onChange: inputChangeHandler })] }) }));\n};\n//# sourceMappingURL=UploadField.js.map"],"names":["UploadField","uploadIcon","maxFiles","uploadLabel","accept","onFileDrop","inputRef","useRef","dragging","setDragging","useState","dragInvalid","setDragInvalid","preventDragOver","useCallback","event","stopPropagation","preventDefault","dragOverHandler","dataTransfer","files","filter","file","minimatch","type","length","dragLeaveHandler","uploadClickHandler","_a","current","click","dropHandler","matched","slice","inputChangeHandler","target","value","_jsx","UploadBox","color","children","_jsxs","Box","sx","width","height","display","alignItems","justifyContent","padding","gap","pointerEvents","cursor","onDragOver","onDrop","onDragEnter","onDragLeave","onClick","IconButton","Icon","className","Typography","ref","hidden","multiple","onChange"],"mappings":"4SAMY,MAACA,EAAc,EAAGC,aAAa,OAAQC,WAAW,EAAGC,cAAc,SAAUC,SAAS,IAAKC,iBACnG,MAAMC,EAAWC,EAAO,OACjBC,EAAUC,GAAeC,GAAS,IAClCC,EAAaC,GAAkBF,GAAS,GACzCG,EAAkBC,GAAaC,IACjCA,EAAMC,kBACND,EAAME,gBAAgB,GACvB,IACGC,EAAkBJ,GAAaC,IACnB,IAAIA,EAAMI,aAAaC,OACfC,QAAQC,GAASC,EAAUD,EAAKE,KAAMpB,KAChDqB,OAAS,EACjBhB,GAAY,GAGZG,GAAe,EAClB,GACF,CAACH,EAAaG,IACXc,EAAmBZ,GAAY,KACjCL,GAAY,GACZG,GAAe,EAAM,GACtB,CAACH,EAAaG,IACXe,EAAqBb,GAAY,KACnC,IAAIc,EACwB,QAA3BA,EAAKtB,EAASuB,eAA4B,IAAPD,GAAyBA,EAAGE,OAAO,GACxE,IACGC,EAAcjB,GAAaC,IAC7BA,EAAME,iBACNF,EAAMC,kBACN,MACMgB,EADQ,IAAIjB,EAAMI,aAAaC,OACfC,QAAQC,GAASC,EAAUD,EAAKE,KAAMpB,KAAS6B,MAAM,EAAG/B,GAC9EO,GAAY,GACZG,GAAe,GACXoB,EAAQP,OAAS,GACjBpB,EAAW2B,EACd,GACF,CAACvB,EAAaG,IACXsB,EAAqBpB,GAAaC,IACpCA,EAAME,iBACNF,EAAMC,kBACN,MACMgB,EADQ,IAAIjB,EAAMoB,OAAOf,OACTC,QAAQC,GAASC,EAAUD,EAAKE,KAAMpB,KAAS6B,MAAM,EAAG/B,GAC1E8B,EAAQP,OAAS,IACjBpB,EAAW,IAAI2B,IACX1B,EAASuB,UACTvB,EAASuB,QAAQO,MAAQ,IAEhC,GACF,IACH,OAAQC,EAAKC,EAAW,CAAEC,MAAO/B,EAAW,UAAY,YAAagC,SAAUC,EAAMC,EAAK,CAAEC,GAAI,CACpFC,MAAO,OACPC,OAAQ,OACRC,QAAS,OACTC,WAAY,SACZC,eAAgB,SAChBC,QAAS,OACTC,IAAK,MACL,MAAO,CACHC,cAAe,QAEnBC,OAAQzC,EAAc,UAAY,WACnC0C,WAAYxC,EAAiByC,OAAQvB,EAAawB,YAAarC,EAAiBsC,YAAa9B,EAAkB+B,QAAS9B,EAAoBa,SAAU,CAACH,EAAKqB,EAAY,CAAElB,SAAUH,EAAKsB,EAAM,CAAEC,UAAW3D,MAAyC,iBAAhBE,EAA2BkC,EAAKwB,EAAY,CAAErB,SAAUrC,IAAiBA,EAAakC,EAAK,QAAS,CAAEyB,IAAKxD,EAAUyD,QAAQ,EAAMvC,KAAM,OAAQwC,SAAU9D,EAAW,EAAGE,OAAQA,EAAQ6D,SAAU/B,QAA8B"}
+{"version":3,"file":"UploadField.js","sources":["../../../src/components/upload/UploadField.tsx"],"sourcesContent":["import { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport { useCallback, useRef, useState } from 'react';\nimport { UploadBox } from './UploadBox';\nimport { Icon } from '../icon';\nimport { Box, IconButton, Typography } from '@mui/material';\nimport { minimatch } from 'minimatch';\nexport const UploadField = ({ uploadIcon = 'plus', maxFiles = 1, uploadLabel = 'Upload', accept = '*', onFileDrop, }) => {\n    const inputRef = useRef(null);\n    const [dragging, setDragging] = useState(false);\n    const [dragInvalid, setDragInvalid] = useState(false);\n    const preventDragOver = useCallback((event) => {\n        event.stopPropagation();\n        event.preventDefault();\n    }, []);\n    const dragOverHandler = useCallback((event) => {\n        const files = [...event.dataTransfer.files];\n        const matched = files.filter((file) => minimatch(file.type, accept));\n        if (matched.length > 0) {\n            setDragging(true);\n        }\n        else {\n            setDragInvalid(true);\n        }\n    }, [setDragging, setDragInvalid]);\n    const dragLeaveHandler = useCallback(() => {\n        setDragging(false);\n        setDragInvalid(false);\n    }, [setDragging, setDragInvalid]);\n    const uploadClickHandler = useCallback(() => {\n        var _a;\n        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.click();\n    }, []);\n    const dropHandler = useCallback((event) => {\n        event.preventDefault();\n        event.stopPropagation();\n        const files = [...event.dataTransfer.files];\n        const matched = files.filter((file) => minimatch(file.type, accept)).slice(0, maxFiles);\n        setDragging(false);\n        setDragInvalid(false);\n        if (matched.length > 0) {\n            onFileDrop(matched);\n        }\n    }, [setDragging, setDragInvalid]);\n    const inputChangeHandler = useCallback((event) => {\n        event.preventDefault();\n        event.stopPropagation();\n        const files = [...event.target.files];\n        const matched = files.filter((file) => minimatch(file.type, accept)).slice(0, maxFiles);\n        if (matched.length > 0) {\n            onFileDrop([...matched]);\n            if (inputRef.current) {\n                inputRef.current.value = '';\n            }\n        }\n    }, []);\n    return (_jsx(UploadBox, { color: dragging ? 'primary' : 'secondary', children: _jsxs(Box, { sx: {\n                width: '100%',\n                height: '100%',\n                display: 'flex',\n                alignItems: 'center',\n                justifyContent: 'center',\n                padding: '16px',\n                gap: '8px',\n                '& *': {\n                    pointerEvents: 'none',\n                },\n                cursor: dragInvalid ? 'no-drop' : 'pointer',\n            }, onDragOver: preventDragOver, onDrop: dropHandler, onDragEnter: dragOverHandler, onDragLeave: dragLeaveHandler, onClick: uploadClickHandler, children: [_jsx(IconButton, { children: _jsx(Icon, { name: uploadIcon }) }), typeof uploadLabel === 'string' ? _jsx(Typography, { children: uploadLabel }) : uploadLabel, _jsx(\"input\", { ref: inputRef, hidden: true, type: \"file\", multiple: maxFiles > 1, accept: accept, onChange: inputChangeHandler })] }) }));\n};\n//# sourceMappingURL=UploadField.js.map"],"names":["UploadField","uploadIcon","maxFiles","uploadLabel","accept","onFileDrop","inputRef","useRef","dragging","setDragging","useState","dragInvalid","setDragInvalid","preventDragOver","useCallback","event","stopPropagation","preventDefault","dragOverHandler","dataTransfer","files","filter","file","minimatch","type","length","dragLeaveHandler","uploadClickHandler","_a","current","click","dropHandler","matched","slice","inputChangeHandler","target","value","_jsx","UploadBox","color","children","_jsxs","Box","sx","width","height","display","alignItems","justifyContent","padding","gap","pointerEvents","cursor","onDragOver","onDrop","onDragEnter","onDragLeave","onClick","IconButton","Icon","name","Typography","ref","hidden","multiple","onChange"],"mappings":"gVAMY,MAACA,EAAc,EAAGC,aAAa,OAAQC,WAAW,EAAGC,cAAc,SAAUC,SAAS,IAAKC,iBACnG,MAAMC,EAAWC,EAAO,OACjBC,EAAUC,GAAeC,GAAS,IAClCC,EAAaC,GAAkBF,GAAS,GACzCG,EAAkBC,GAAaC,IACjCA,EAAMC,kBACND,EAAME,gBAAgB,GACvB,IACGC,EAAkBJ,GAAaC,IACnB,IAAIA,EAAMI,aAAaC,OACfC,QAAQC,GAASC,EAAUD,EAAKE,KAAMpB,KAChDqB,OAAS,EACjBhB,GAAY,GAGZG,GAAe,EAClB,GACF,CAACH,EAAaG,IACXc,EAAmBZ,GAAY,KACjCL,GAAY,GACZG,GAAe,EAAM,GACtB,CAACH,EAAaG,IACXe,EAAqBb,GAAY,KACnC,IAAIc,EACwB,QAA3BA,EAAKtB,EAASuB,eAA4B,IAAPD,GAAyBA,EAAGE,OAAO,GACxE,IACGC,EAAcjB,GAAaC,IAC7BA,EAAME,iBACNF,EAAMC,kBACN,MACMgB,EADQ,IAAIjB,EAAMI,aAAaC,OACfC,QAAQC,GAASC,EAAUD,EAAKE,KAAMpB,KAAS6B,MAAM,EAAG/B,GAC9EO,GAAY,GACZG,GAAe,GACXoB,EAAQP,OAAS,GACjBpB,EAAW2B,EACd,GACF,CAACvB,EAAaG,IACXsB,EAAqBpB,GAAaC,IACpCA,EAAME,iBACNF,EAAMC,kBACN,MACMgB,EADQ,IAAIjB,EAAMoB,OAAOf,OACTC,QAAQC,GAASC,EAAUD,EAAKE,KAAMpB,KAAS6B,MAAM,EAAG/B,GAC1E8B,EAAQP,OAAS,IACjBpB,EAAW,IAAI2B,IACX1B,EAASuB,UACTvB,EAASuB,QAAQO,MAAQ,IAEhC,GACF,IACH,OAAQC,EAAKC,EAAW,CAAEC,MAAO/B,EAAW,UAAY,YAAagC,SAAUC,EAAMC,EAAK,CAAEC,GAAI,CACpFC,MAAO,OACPC,OAAQ,OACRC,QAAS,OACTC,WAAY,SACZC,eAAgB,SAChBC,QAAS,OACTC,IAAK,MACL,MAAO,CACHC,cAAe,QAEnBC,OAAQzC,EAAc,UAAY,WACnC0C,WAAYxC,EAAiByC,OAAQvB,EAAawB,YAAarC,EAAiBsC,YAAa9B,EAAkB+B,QAAS9B,EAAoBa,SAAU,CAACH,EAAKqB,EAAY,CAAElB,SAAUH,EAAKsB,EAAM,CAAEC,KAAM3D,MAAyC,iBAAhBE,EAA2BkC,EAAKwB,EAAY,CAAErB,SAAUrC,IAAiBA,EAAakC,EAAK,QAAS,CAAEyB,IAAKxD,EAAUyD,QAAQ,EAAMvC,KAAM,OAAQwC,SAAU9D,EAAW,EAAGE,OAAQA,EAAQ6D,SAAU/B,QAA8B"}

package/components/upload/UploadPreview.d.ts

@@ -9,7 +9,7 @@ export type UploadPreviewProps = {
      * ...
      * <UploadPreview ... actions={
      *  <IconButton onClick={...}>
-     *    <Icon className="trash"/>
+     *    <Icon name="trashcan"/>
      *  </IconButton
      * }/>
      */

package/components/upload/UploadPreviewList.d.ts

@@ -18,7 +18,7 @@ export type UploadPreviewListProps = {
      *  actions={
      *    (file) =>
      *      <IconButton onClick={...}>
-     *        <Icon className="trash"/>
+     *        <Icon name="trashcan"/>
      *      </IconButton>
      *  }
      * />

package/components/upload/UploadPreviewList.js

@@ -1,2 +1,2 @@
-import{jsx as i,jsxs as e,Fragment as o}from"react/jsx-runtime";import{Box as r,List as t,ListItem as n,ListItemIcon as l,ListItemText as a,Typography as d,Divider as c}from"@mui/material";import{Icon as m}from"../icon/icon.js";import{UploadBox as s}from"./UploadBox.js";import{formatFileSize as h}from"../../utils/formatFileSize/formatFileSize.js";const p=({files:p,actions:f})=>i(s,{color:"white",children:i(r,{sx:{width:"100%",height:"100%",padding:"0 16px",overflow:"auto"},children:i(t,{children:p.map(((r,t)=>e(o,{children:[e(n,{secondaryAction:null==f?void 0:f(r),children:[i(l,{sx:{fontSize:"30px"},children:i(m,{fontSize:"inherit",className:"document"})}),i(a,{primary:i(d,{sx:{whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis",paddingRight:"15px"},children:r.name}),secondary:i(d,{color:"disabled.tertiary",children:h(r.size)})})]},r.name),t<p.length-1&&i(c,{})]})))})})});export{p as UploadPreviewList};
+import{jsx as i,jsxs as e,Fragment as o}from"react/jsx-runtime";import{Box as r,List as n,ListItem as t,ListItemIcon as l,ListItemText as d,Typography as a,Divider as c}from"@mui/material";import{Icon as m}from"../icon/icon.js";import"../icon/icon.definitions.js";import{UploadBox as s}from"./UploadBox.js";import{formatFileSize as p}from"../../utils/formatFileSize/formatFileSize.js";const h=({files:h,actions:f})=>i(s,{color:"white",children:i(r,{sx:{width:"100%",height:"100%",padding:"0 16px",overflow:"auto"},children:i(n,{children:h.map(((r,n)=>e(o,{children:[e(t,{secondaryAction:null==f?void 0:f(r),children:[i(l,{sx:{fontSize:"30px"},children:i(m,{fontSize:"inherit",name:"file"})}),i(d,{primary:i(a,{sx:{whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis",paddingRight:"15px"},children:r.name}),secondary:i(a,{color:"disabled.tertiary",children:p(r.size)})})]},r.name),n<h.length-1&&i(c,{})]})))})})});export{h as UploadPreviewList};
 //# sourceMappingURL=UploadPreviewList.js.map