npm - @skodaflow/web-library - Versions diffs - 4.2.0 → 6.0.0 - Mend

@skodaflow/web-library 4.2.0 → 6.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (651) hide show

package/cjs/components/snackbar/snackbarMessage.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"snackbarMessage.js","sources":["../../../../src/components/snackbar/snackbarMessage.tsx"],"sourcesContent":["import { __rest } from \"tslib\";\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport { ~~useMemo } from 'react';\nimport {~~ Icon } from '../icon';\nimport { styled } from '@mui/material/styles';\nimport { checkForIcon } from './snackbar';\nexport const SnackbarMessage = ({ header, icon, message }) => {\n const IconComponent = useMemo(() => ({ icon: _icon }) => {\n let iconToReturn = null;\n switch (_icon) {\n case 'alert':\n iconToReturn = _jsx(Icon, { className: \"triangle-up-exclamation\", fontSize: \"inherit\", iconStyle: \"filled\" });\n break;\n case 'success':\n iconToReturn = _jsx(Icon, { className: \"circle-check\", fontSize: \"inherit\", iconStyle: \"filled\" });\n break;\n case 'warning':\n iconToReturn = _jsx(Icon, { className: \"circle-exclamation\", fontSize: \"inherit\", iconStyle: \"filled\" });\n break;\n }\n return ~~iconToReturn ? _jsx~~(~~\"span\", { className: \"snackbar-icon-wrapper\", children: iconToReturn }) : iconToReturn;\n }, []);\n return (~~_jsxs(SnackbarMessageStyled, { header: header, icon: icon, children: [icon && _jsx(IconComponent, { icon: icon }), _jsxs(\"div\", { className: \"styled-message-header-message-container\", children: [header && _jsxs(\"h3\", { children: [\" \", header] }), _jsxs(\"p\", { children: [\" \", message, \" \"] })] }), _jsx(\"div\", { className: \"custom-snackbar-divider\", children: _jsx(\"div\", {}) })] }));\n};\n/*\n @description SnackbarMessageStyled styling defintion based on props\n */\nexport const SnackbarMessageStyled = styled('div')((_a) => {\n var args = __rest(_a, []);\n return {\n '& .styled-message-header-message-container': {\n display: args.header ? 'block' : 'flex',\n },\n '& p': {\n display: args.header ? 'block' : 'inline',\n paddingBottom: args.header ? '0px' : '2px',\n },\n '& .snackbar-icon-wrapper': {\n '& span': {\n lineHeight: args.header ? '20px' : 'unset',\n },\n },\n '& .custom-snackbar-divider': {\n paddingLeft: checkForIcon(args.icon) ? '24px' : '56px',\n '& > div': {\n borderLeft: `1px solid ${args.theme.palette.onSurface.os600}`,\n height: args.header ? '48px' : '32px',\n },\n },\n };\n});\n//# sourceMappingURL=snackbarMessage.js.map"],"names":["SnackbarMessageStyled","styled","_a","args","__rest","display","header","paddingBottom","lineHeight","paddingLeft","checkForIcon","icon","borderLeft","theme","palette","onSurface","os600","height","~~message","~~IconComponent","~~useMemo","_icon","~~iconToReturn","_jsx","jsx","Icon","~~className~~","fontSize","iconStyle","children","_jsxs","jsxs"],"mappings":"~~gLAMY~~,~~MAqBCA~~,EAAwBC,EAAMA,OAAC,MAAPA,EAAeC,IAChD,IAAIC,EAAOC,EAAAA,OAAOF,EAAI,IACtB,MAAO,CACH,6CAA8C,CAC1CG,QAASF,EAAKG,OAAS,QAAU,QAErC,MAAO,CACHD,QAASF,EAAKG,OAAS,QAAU,SACjCC,cAAeJ,EAAKG,OAAS,MAAQ,OAEzC,2BAA4B,CACxB,SAAU,CACNE,WAAYL,EAAKG,OAAS,OAAS,UAG3C,6BAA8B,CAC1BG,YAAaC,EAAAA,aAAaP,EAAKQ,MAAQ,OAAS,OAChD,UAAW,CACPC,WAAY,aAAaT,EAAKU,MAAMC,QAAQC,UAAUC,QACtDC,OAAQd,EAAKG,OAAS,OAAS,SAG1C,~~4BA3C0B~~,~~EAAGA~~,~~cAAQK~~,~~EAAMO~~,~~cAC5C~~,~~MAAMC~~,~~EAAgBC,EAAAA,SAAQ,IAAM,EAAGT,KAAMU,MACzC,IAAIC,~~EAAe,KACnB,~~OAAQD~~,GACJ,IAAK,~~QACDC~~,EAAeC,EAAIC,IAACC,OAAM,CAAEC,~~UAAW~~,~~0BAA2BC~~,SAAU,UAAWC,UAAW,~~WAClG~~,MACJ,IAAK,UACDN,EAAeC,EAAIC,IAACC,OAAM,CAAEC,~~UAAW~~,eAAgBC,SAAU,UAAWC,UAAW,~~WACvF~~,MACJ,IAAK,UACDN,EAAeC,EAAIC,IAACC,OAAM,CAAEC,~~UAAW~~,qBAAsBC,SAAU,UAAWC,UAAW,~~WAGrG~~,OAAON,EAAeC,MAAK,OAAQ,~~CAAEG~~,UAAW,~~wBAAyBG~~,~~SAAUP~~,IAAkBA,CAAY,~~GAClH~~,~~IACH~~,~~OAAQQ~~,~~OAAM9B~~,EAAuB,CAAEM,OAAQA,EAAQK,KAAMA,~~EAAMkB~~,SAAU,~~CAAClB~~,~~GAAQY~~,EAAAA,~~IAAKJ~~,EAAe,~~CAAER~~,KAAMA,~~IAASmB~~,OAAM,MAAO,~~CAAEJ~~,UAAW,~~0CAA2CG~~,SAAU,~~CAACvB~~,~~GAAUwB~~,EAAKC,KAAC,KAAM,~~CAAEF~~,SAAU,CAAC,~~IAAKvB~~,~~KAAYwB~~,EAAKC,KAAC,IAAK,~~CAAEF~~,SAAU,CAAC,~~IAAKX~~,EAAS,~~UAAaK~~,MAAK,MAAO,~~CAAEG~~,UAAW,~~0BAA2BG~~,~~SAAUN~~,EAAIC,IAAC,MAAO,CAAE~~,OAAU~~"}
1	+ {"version":3,"file":"snackbarMessage.js","sources":["../../../../src/components/snackbar/snackbarMessage.tsx"],"sourcesContent":["import { __rest } from \"tslib\";\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport { Icon } from '../icon';\nimport { styled } from '@mui/material/styles';\nimport { checkForIcon } from './snackbar';\nexport const SnackbarMessage = ({ header, icon, message }) => {\n return (_jsxs(SnackbarMessageStyled, { header: header, icon: icon, children: [icon && _jsx(IconComponent, { icon: icon }), _jsxs(\"div\", { className: \"styled-message-header-message-container\", children: [header && _jsxs(\"h3\", { children: [\" \", header] }), _jsxs(\"p\", { children: [\" \", message, \" \"] })] }), _jsx(\"div\", { className: \"custom-snackbar-divider\", children: _jsx(\"div\", {}) })] }));\n};\n/*\n @description SnackbarMessageStyled styling defintion based on props\n */\nexport const SnackbarMessageStyled = styled('div')((_a) => {\n var args = __rest(_a, []);\n return {\n '& .styled-message-header-message-container': {\n display: args.header ? 'block' : 'flex',\n },\n '& p': {\n display: args.header ? 'block' : 'inline',\n paddingBottom: args.header ? '0px' : '2px',\n },\n '& .snackbar-icon-wrapper': {\n '& span': {\n lineHeight: args.header ? '20px' : 'unset',\n },\n },\n '& .custom-snackbar-divider': {\n paddingLeft: checkForIcon(args.icon) ? '24px' : '56px',\n '& > div': {\n borderLeft: `1px solid ${args.theme.palette.onSurface.os600}`,\n height: args.header ? '48px' : '32px',\n },\n },\n };\n});\nconst IconComponent = ({ icon }) => {\n let iconToReturn = null;\n switch (icon) {\n case 'alert':\n iconToReturn = _jsx(Icon, { name: \"warning\", fontSize: \"inherit\", iconStyle: \"filled\" });\n break;\n case 'success':\n iconToReturn = _jsx(Icon, { name: \"circle-check\", fontSize: \"inherit\", iconStyle: \"filled\" });\n break;\n case 'warning':\n iconToReturn = _jsx(Icon, { name: \"circle-exclamation\", fontSize: \"inherit\", iconStyle: \"filled\" });\n break;\n }\n return iconToReturn ? _jsx(\"span\", { className: \"snackbar-icon-wrapper\", children: iconToReturn }) : iconToReturn;\n};\n//# sourceMappingURL=snackbarMessage.js.map"],"names":["SnackbarMessageStyled","styled","_a","args","__rest","display","header","paddingBottom","lineHeight","paddingLeft","checkForIcon","icon","borderLeft","theme","palette","onSurface","os600","height","IconComponent","iconToReturn","_jsx","jsx","Icon","name","fontSize","iconStyle","className","children","message","_jsxs","jsxs"],"mappings":"wMAKY,MAMCA,EAAwBC,EAAMA,OAAC,MAAPA,EAAeC,IAChD,IAAIC,EAAOC,EAAAA,OAAOF,EAAI,IACtB,MAAO,CACH,6CAA8C,CAC1CG,QAASF,EAAKG,OAAS,QAAU,QAErC,MAAO,CACHD,QAASF,EAAKG,OAAS,QAAU,SACjCC,cAAeJ,EAAKG,OAAS,MAAQ,OAEzC,2BAA4B,CACxB,SAAU,CACNE,WAAYL,EAAKG,OAAS,OAAS,UAG3C,6BAA8B,CAC1BG,YAAaC,EAAAA,aAAaP,EAAKQ,MAAQ,OAAS,OAChD,UAAW,CACPC,WAAY,aAAaT,EAAKU,MAAMC,QAAQC,UAAUC,QACtDC,OAAQd,EAAKG,OAAS,OAAS,SAG1C,IAECY,EAAgB,EAAGP,KAAAA,MACrB,IAAIQ,EAAe,KACnB,OAAQR,GACJ,IAAK,QACDQ,EAAeC,EAAIC,IAACC,OAAM,CAAEC,KAAM,UAAWC,SAAU,UAAWC,UAAW,WAC7E,MACJ,IAAK,UACDN,EAAeC,EAAIC,IAACC,OAAM,CAAEC,KAAM,eAAgBC,SAAU,UAAWC,UAAW,WAClF,MACJ,IAAK,UACDN,EAAeC,EAAIC,IAACC,OAAM,CAAEC,KAAM,qBAAsBC,SAAU,UAAWC,UAAW,WAGhG,OAAON,EAAeC,MAAK,OAAQ,CAAEM,UAAW,wBAAyBC,SAAUR,IAAkBA,CAAY,0BA3CtF,EAAGb,SAAQK,OAAMiB,aACpCC,OAAM7B,EAAuB,CAAEM,OAAQA,EAAQK,KAAMA,EAAMgB,SAAU,CAAChB,GAAQS,EAAAA,IAAKF,EAAe,CAAEP,KAAMA,IAASkB,OAAM,MAAO,CAAEH,UAAW,0CAA2CC,SAAU,CAACrB,GAAUuB,EAAKC,KAAC,KAAM,CAAEH,SAAU,CAAC,IAAKrB,KAAYuB,EAAKC,KAAC,IAAK,CAAEH,SAAU,CAAC,IAAKC,EAAS,UAAaR,MAAK,MAAO,CAAEM,UAAW,0BAA2BC,SAAUP,EAAIC,IAAC,MAAO,CAAE"}

package/cjs/components/stepper/stepper.d.ts CHANGED Viewed

@@ -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/cjs/components/stepper/stepper.js CHANGED Viewed

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

package/cjs/components/stepper/stepper.js.map CHANGED Viewed

	@@ -1 +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":["QontoStepIcon","props","active","completed","className","_jsx","QontoStepIconRoot","children","jsx","styled","theme","style","color","palette","mode","grey","display","height","alignItems","flowColors","onSurface","os700","width","borderRadius","backgroundColor","border","brand","secondary","marginRight","marginLeft","cursor","disabled","tertiary","QontoConnector","StepConnector","stepConnectorClasses","alternativeLabel","top","left","right","line","borderColor","primary","borderTopWidth","StepperStyled","fontFamily","fontStyle","fontWeight","fontSize","lineHeight","_a","activeStep","classes","connector","nonLinear","orientation","step","__rest","styles","MuiStepper","Object","assign","sx","maxWidth","spacing","map","label","Step","StepLabel","StepIconComponent"],"mappings":"kRAqBA,SAASA,EAAcC,GACnB,MAAMC,OAAEA,EAAMC,UAAEA,EAASC,UAAEA,GAAcH,EACzC,OAAQI,MAAKC,EAAmB,CAAEF,UAAWA,EAAWG,SAAUL,EAAUG,EAAIG,IAAC,MAAO,CAAEJ,UAAW,yBAA6BD,EAAaE,EAAAA,IAAK,MAAO,CAAED,UAAW,gCAAqCC,EAAAA,IAAK,MAAO,CAAED,UAAW,0BAC1O,CACA,MAAME,EAAoBG,EAAAA,OAAO,MAAPA,EAAc,EAAGC,YACvC,IAAIC,EAAQ,CAAA,EA8CZ,OA7CAA,EAAQ,CACJC,MAA8B,SAAvBF,EAAMG,QAAQC,KAAkBJ,EAAMG,QAAQE,KAAK,KAAO,UACjEC,QAAS,OACTC,OAAQ,GACRC,WAAY,SACZ,iCAAkC,CAC9BN,MAAOO,EAAAA,WAAWC,UAAUC,MAC5BC,MAAO,GACPL,OAAQ,GACRM,aAAc,MACdC,gBAAiB,eACjB,UAAW,CACPD,aAAc,MACdE,OAAQ,eAAeN,EAAUA,WAACC,UAAUC,QAC5CT,MAAOO,EAAAA,WAAWO,MAAMC,YAGhC,0BAA2B,CACvBf,MAAOO,EAAAA,WAAWC,UAAUC,MAC5BC,MAAO,GACPL,OAAQ,GACRM,aAAc,MACdK,YAAa,SACbC,WAAY,MACZL,gBAAiB,eACjB,UAAW,CACPD,aAAc,MACdE,OAAQ,eAAeN,EAAUA,WAACC,UAAUC,QAC5CT,MAAOO,EAAAA,WAAWO,MAAMC,YAGhC,0BAA2B,CACvBL,MAAO,GACPL,OAAQ,GACRM,aAAc,MACdE,OAAQ,sBACRb,MAAO,cACP,UAAW,CACPkB,OAAQ,UACRP,aAAc,MACdE,OAAQ,eAAeN,EAAUA,WAACY,SAASC,WAC3CR,gBAAiBL,EAAAA,WAAWY,SAASJ,aAI1ChB,CAAK,IAEVsB,EAAiBxB,EAAAA,OAAOyB,EAAAA,cAAPzB,EAAsB,EAAGC,YAAa,CACzD,CAAC,KAAKyB,uBAAqBC,oBAAqB,CAC5CC,IAAK,GACLC,KAAM,mBACNC,MAAO,mBAEX,CAAC,KAAKJ,uBAAqBjC,UAAW,CAClC,CAAC,MAAMiC,uBAAqBK,QAAS,CACjCC,YAAatB,EAAAA,WAAWC,UAAUC,MAClCC,MAAO,SAGf,CAAC,KAAKa,uBAAqBhC,aAAc,CACrC,CAAC,MAAMgC,uBAAqBK,QAAS,CACjCC,YAAatB,EAAAA,WAAWC,UAAUC,QAG1C,CAAC,MAAMc,uBAAqBK,QAAS,CACjCC,YAAoC,SAAvB/B,EAAMG,QAAQC,KAAkBJ,EAAMG,QAAQE,KAAK,KAAOI,EAAUA,WAACY,SAASW,QAC3FC,eAAgB,EAChBpB,aAAc,OAGhBqB,EAAgBnC,EAAAA,OAAO,MAAPA,EAAc,KAChC,IAAIE,EAAQ,CAAA,EAaZ,OAXAA,EAAQ,CACJ,yBAA0B,CACtBK,QAAS,OACTE,WAAY,SACZ2B,WALW,aAMXC,UAAW,SACXC,WAAY,MACZC,SAAU,OACVC,WAAY,SAGbtC,CAAK,oBAzGQuC,IACpB,IAAIC,WAAEA,EAAUf,iBAAEA,EAAgB7B,SAAEA,EAAQ6C,QAAEA,EAAOC,UAAEA,EAASC,UAAEA,EAASC,YAAEA,EAAWC,KAAEA,GAASN,EAAIjD,EAAQwD,EAAMA,OAACP,EAAI,CAAC,aAAc,mBAAoB,WAAY,UAAW,YAAa,YAAa,cAAe,SAC7N,MAAMQ,EAAS,CACXT,WAAY,OACZD,SAAU,OACVD,WAAY,OAQhB,OAAO1C,EAAAA,IAAKuC,EAAe,CAAErC,SANCF,MAAK,MAAO,CAAEE,SAAUF,EAAIG,IAACmD,UAAYC,OAAOC,OAAO,CAAEzD,UAAW,uBAAyBH,EAAO,CAAEkD,WAAYA,EAAYW,GAAI,CACpJC,SAAU,IACV/C,QAAS,OACTE,WAAY,SACZ8C,QAAS,GACV5B,iBAAkBA,EAAkBiB,UAAWhD,EAAAA,IAAK4B,EAAgB,CAAA,GAAK1B,SAAUiD,EAAKS,KAAKC,GAAW7D,EAAAA,IAAK8D,EAAAA,KAAM,CAAE5D,SAAUF,EAAIG,IAAC4D,EAASA,UAAE,CAAEzD,MAAO+C,EAAQW,kBAAmBrE,EAAeO,SAAU2D,KAAYA,WACzK"}
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 { 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":["QontoStepIcon","props","active","completed","className","_jsx","QontoStepIconRoot","children","jsx","styled","theme","style","color","palette","mode","grey","display","height","alignItems","flowColors","onSurface","os700","width","borderRadius","backgroundColor","border","brand","secondary","marginRight","marginLeft","cursor","disabled","tertiary","QontoConnector","StepConnector","stepConnectorClasses","alternativeLabel","top","left","right","line","borderColor","primary","borderTopWidth","StepperStyled","fontFamily","fontStyle","fontWeight","fontSize","lineHeight","_a","activeStep","classes","connector","nonLinear","orientation","step","__rest","styles","MuiStepper","Object","assign","sx","maxWidth","spacing","map","label","Step","StepLabel","StepIconComponent"],"mappings":"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"}

package/cjs/components/tab/hook/useTabs.d.ts CHANGED Viewed

@@ -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/cjs/components/tab/hook/useTabs.js.map CHANGED Viewed

	@@ -1 +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":["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","default","Children","toArray","child","props","value","breakpoints","values","lg","handleIsMobileView","variantSecondaryNavigation","isMobileView","setIsMobileView","setWindowWidth","window","innerWidth","md","a11yProps","index"],"mappings":"~~oMAEgB~~,KACZ,MAAMA,EAAQC,EAAAA,WAwDd,MAAO,CACHC,sBAvD0BC,EAAAA,aAAY,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,EAAKC,QAACC,SAASC,QAAQ5B,GAAUQ,MAAMqB,GAAUpB,IAAS,cAAgBoB,EAAMC,MAAMC,QAC3GP,GACAD,EAAIF,KAAKG,EACZ,IAELvB,EAAgBsB,EACnB,MAXGhB,EAAQK,MAAMC,QAAU,MAW3B,GACF,CAACnB,EAAMsC,YAAYC,OAAOC,KAqBzBC,mBApBuBtC,EAAAA,aAAY,CAACuC,EAA4BC,EAAcC,EAAiBC,KAC/FA,EAAeC,OAAOC,YAClBL,IACII,OAAOC,YAAc/C,EAAMsC,YAAYC,OAAOS,KAAOL,EACrDC,GAAgB,GAEXE,OAAOC,WAAa/C,EAAMsC,YAAYC,OAAOS,IAClDJ,GAAgB,GAEvB,GACF,CAAC5C,EAAMsC,YAAYC,OAAOS,KAWzBC,UATc9C,eAAa+C,IACpB,CACHlC,GAAI,cAAckC,IAClB,gBAAiB,mBAAmBA,OAEzC,IAKF"}
1	+ {"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":["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","default","Children","toArray","child","props","value","breakpoints","values","lg","handleIsMobileView","variantSecondaryNavigation","isMobileView","setIsMobileView","setWindowWidth","window","innerWidth","md","a11yProps","index"],"mappings":"oMAGgB,KACZ,MAAMA,EAAQC,EAAAA,WAwDd,MAAO,CACHC,sBAvD0BC,EAAAA,aAAY,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,EAAKC,QAACC,SAASC,QAAQ5B,GAAUQ,MAAMqB,GAAUpB,IAAS,cAAgBoB,EAAMC,MAAMC,QAC3GP,GACAD,EAAIF,KAAKG,EACZ,IAELvB,EAAgBsB,EACnB,MAXGhB,EAAQK,MAAMC,QAAU,MAW3B,GACF,CAACnB,EAAMsC,YAAYC,OAAOC,KAqBzBC,mBApBuBtC,EAAAA,aAAY,CAACuC,EAA4BC,EAAcC,EAAiBC,KAC/FA,EAAeC,OAAOC,YAClBL,IACII,OAAOC,YAAc/C,EAAMsC,YAAYC,OAAOS,KAAOL,EACrDC,GAAgB,GAEXE,OAAOC,WAAa/C,EAAMsC,YAAYC,OAAOS,IAClDJ,GAAgB,GAEvB,GACF,CAAC5C,EAAMsC,YAAYC,OAAOS,KAWzBC,UATc9C,eAAa+C,IACpB,CACHlC,GAAI,cAAckC,IAClB,gBAAiB,mBAAmBA,OAEzC,IAKF"}

package/cjs/components/tab/menuTab.d.ts CHANGED Viewed

@@ -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/cjs/components/tab/menuTab.js CHANGED Viewed

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

package/cjs/components/tab/menuTab.js.map CHANGED Viewed

	@@ -1 +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","default","Children","map","child","_jsx","MenuItem","style","fontSize","props","useEffect","_jsxs","jsxs","_Fragment","jsx","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":"~~2QAYY~~,MAACA,EAAUC,EAAUA,YAAC,EAAGC,QAAOC,QAAOC,YAAYC,KAC3D,MAAMC,UAAEA,EAASC,gBAAEA,EAAeC,UAAEA,GAAcC,EAAAA,WAAWC,EAAAA,cACtDC,EAAUC,GAAeC,EAAQA,UAAC,IAClCC,EAAMC,GAAWF,EAAQA,UAAC,IAC1BG,EAAUC,GAAeJ,EAAQA,SAAC,OAClCK,EAAeC,GAAoBN,EAAQA,SAAC,OAC7CO,UAAEA,GAAcC,EAAAA,UAIhBC,EAAgBC,eAAaC,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,eAAaQ,IAChChB,GAASD,GACTG,EAAYc,EAAEC,cAAc,GAC7B,CAAClB,IAEEmB,EAAkBV,EAAAA,aAAY,IACzBW,EAAKC,QAACC,SAASC,IAAIjC,GAAWkC,GACzBC,EAAAA,IAAKC,EAAAA,SAAU,CAAEC,MAAO,CAAEC,SAAU,QAAUd,QAAS,IAAMN,EAAcgB,EAAMK,OAAQvC,SAAUkC,EAAMK,MAAMzC,WAE5H,CAACE,EAAUkB,IAUd,OARAsB,EAAAA,WAAU,KAEFhC,EADAN,IAAcH,EAKjB,GACF,CAACG,EAAWK,EAAUR,IACjB0C,EAAKC,KAACC,WAAW,CAAE3C,SAAU,CAACmC,EAAIS,IAACC,UAAWC,OAAOC,OAAO,CAAE9C,IAAKA,EAAK+C,SAAS,EAAMxB,QAASE,EAAgBtB,UAAWA,EAAWG,SAAUA,EAAUR,MAAOA,EAAOkD,SAAU,EAAGnD,MAAOgB,GAAiBhB,GAASkB,EAAUjB,GAAQ,CAAEmD,KAAMf,MAAKgB,EAAAA,KAAM,CAAEC,~~UAAW1C~~,EAAO,aAAe,iBAAmB2C,aAAc,~~MAAOD~~,UAAW,~~iBAAmBjB~~,EAAIS,~~IAACU~~,SAAQ,~~CAAE5C~~,KAAMA,EAAME,SAAUA,~~EAAU2C~~,UAAW,SAAUC,YAAY,~~EAAMxD~~,SAAU,~~EAAGyD~~,~~qBAAuBtB~~,EAAIS,~~IAACc~~,oBAAmB,CAAEC,YAAa,~~IAAMhD~~,GAAQ,GAAQX,SAAUmC,EAAIS,~~IAACgB~~,EAAIA,~~KAAEd~~,OAAOC,OAAO,CAAE,~~EAAEU~~,EAAiB,CAAEI,QAAS,~~IAAK7D~~,SAAUmC,EAAIS,~~IAACkB~~,EAAY,CAAEC,GAAI,~~iBAAkB/D~~,SAAU6B,eAAqC,~~IAE3sBiC~~,EAAaE,EAAAA,OAAOC,EAAQA,SAAfD,EAAiB,KACzB,CACHE,IAAK,OACLC,KAAM,OACNC,UAAW,+BACXC,aAAc,MACdC,QAAS,MACTC,MAAO,QACPC,UAAW,QACXC,SAAU"}
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 * @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","default","Children","map","child","_jsx","MenuItem","style","fontSize","props","useEffect","_jsxs","jsxs","_Fragment","jsx","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":"sTAaY,MAACA,EAAUC,EAAUA,YAAC,EAAGC,QAAOC,QAAOC,YAAYC,KAC3D,MAAMC,UAAEA,EAASC,gBAAEA,EAAeC,UAAEA,GAAcC,EAAAA,WAAWC,EAAAA,cACtDC,EAAUC,GAAeC,EAAQA,UAAC,IAClCC,EAAMC,GAAWF,EAAQA,UAAC,IAC1BG,EAAUC,GAAeJ,EAAQA,SAAC,OAClCK,EAAeC,GAAoBN,EAAQA,SAAC,OAC7CO,UAAEA,GAAcC,EAAAA,UAIhBC,EAAgBC,eAAaC,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,eAAaQ,IAChChB,GAASD,GACTG,EAAYc,EAAEC,cAAc,GAC7B,CAAClB,IAEEmB,EAAkBV,EAAAA,aAAY,IACzBW,EAAKC,QAACC,SAASC,IAAIjC,GAAWkC,GACzBC,EAAAA,IAAKC,EAAAA,SAAU,CAAEC,MAAO,CAAEC,SAAU,QAAUd,QAAS,IAAMN,EAAcgB,EAAMK,OAAQvC,SAAUkC,EAAMK,MAAMzC,WAE5H,CAACE,EAAUkB,IAUd,OARAsB,EAAAA,WAAU,KAEFhC,EADAN,IAAcH,EAKjB,GACF,CAACG,EAAWK,EAAUR,IACjB0C,EAAKC,KAACC,WAAW,CAAE3C,SAAU,CAACmC,EAAIS,IAACC,UAAWC,OAAOC,OAAO,CAAE9C,IAAKA,EAAK+C,SAAS,EAAMxB,QAASE,EAAgBtB,UAAWA,EAAWG,SAAUA,EAAUR,MAAOA,EAAOkD,SAAU,EAAGnD,MAAOgB,GAAiBhB,GAASkB,EAAUjB,GAAQ,CAAEmD,KAAMf,MAAKgB,EAAAA,KAAM,CAAEC,KAAM1C,EAAO,aAAe,iBAAmB2C,aAAc,MAAOC,UAAW,iBAAmBnB,EAAIS,IAACW,SAAQ,CAAE7C,KAAMA,EAAME,SAAUA,EAAU4C,UAAW,SAAUC,YAAY,EAAMzD,SAAU,EAAG0D,qBAAuBvB,EAAIS,IAACe,oBAAmB,CAAEC,YAAa,IAAMjD,GAAQ,GAAQX,SAAUmC,EAAIS,IAACiB,EAAIA,KAAEf,OAAOC,OAAO,CAAE,EAAEW,EAAiB,CAAEI,QAAS,IAAK9D,SAAUmC,EAAIS,IAACmB,EAAY,CAAEC,GAAI,iBAAkBhE,SAAU6B,eAAqC,IAEtsBkC,EAAaE,EAAAA,OAAOC,EAAQA,SAAfD,EAAiB,KACzB,CACHE,IAAK,OACLC,KAAM,OACNC,UAAW,+BACXC,aAAc,MACdC,QAAS,MACTC,MAAO,QACPC,UAAW,QACXC,SAAU"}

package/cjs/components/tab/secondaryNavigation/secondaryNavigationTabs.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime"),r=require("react"),o=require("@mui/material/AppBar"),i=require("@mui/material/Toolbar"),t=require("../../icon/icon.js"),a=require("./secondaryTabStyled.js"),n=require("@mui/material"),s=require("../../divider/divider.js"),l=require("../../../design/skoda/palette.theme.js");function d(e){return e&&e.__esModule?e:{default:e}}var p=d(r),c=d(o),u=d(i);const x=n.styled(n.Backdrop)((()=>({zIndex:2e3}))),b=n.styled(n.Popper)((()=>({transform:"unset !important",position:"static !important",zIndex:2e3}))),h=n.styled(n.MenuList)((({theme:e})=>({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:e.palette.onSurface.os900,paddingTop:"11px",paddingBottom:"11px"}}))),m=n.styled(c.default)((()=>({maxHeigth:"56px",padding:"0px",top:"auto",bottom:0,boxShadow:"none",borderTop:`1px solid ${l.flowColors.transparent.secondary}`,backgroundColor:l.flowColors.background.primary,"& > div.MuiToolbar-root":{maxHeight:"56px",padding:"0px","& > div":{width:"100%",justifyContent:"space-evenly","& > div":{"&> a":{padding:0,textDecoration:"none"}}}}})));exports.SecondaryNavigationTabs=({currentActiveTab:o,setCurrentActiveTab:i,children:l})=>{const[d,c]=r.useState(null),[g,j]=r.useState(null),[f,v]=r.useState(!1),[k,C]=r.useState(null),y=r.useCallback((e=>{i(e.value),e.onClick&&e.onClick()}),[i]),T=r.useCallback((e=>{v(!f),j(e.currentTarget)}),[f]),A=r.useCallback((r=>r.href?e.jsxs("a",{href:r.href,target:r.target||null,children:[e.jsx(t.Icon,{color:"inherit",className:r.icon||"more-horizontal"}),r.label]}):e.jsxs(e.Fragment,{children:[e.jsx(t.Icon,{color:"inherit",className:r.icon||"more-horizontal"}),r.label]})),[]),w=r.useCallback((e=>{C(e.label),e.href?window.open(e.href,e.target):i(e.value),v(!1),e.onClick&&e.onClick(e.value)}),[i]),S=r.useCallback((()=>d.slice(3).map(((r,o)=>e.jsxs("div",{children:[e.jsx(n.MenuItem,{onClick:()=>w(r.props),children:r.props.label},o),e.jsx(s.Divider,{orientation:"horizontal",textAlign:"center",variant:"middle"})]},r.props.label)))),[d,w]);return r.useEffect((()=>{c(p.default.Children.toArray(l))}),[l]),e.jsx(m,{position:"fixed",color:"transparent",children:e.jsx(u.default,{children:e.jsx(n.Box,{sx:{display:"flex"},children:d&&e.jsxs(e.Fragment,{children:[e.jsx(a.default,Object.assign({},d[0].props,{isActive:o===d[0].props.value,onClick:()=>{y(d[0].props)},children:A(d[0].props)}),"secondary-tab-0"),e.jsx(a.default,Object.assign({},d[1].props,{isActive:o===d[1].props.value,onClick:()=>{y(d[1].props)},children:A(d[1].props)}),"secondary-tab-1"),e.jsx(a.default,Object.assign({},d[2].props,{isActive:o===d[2].props.value,onClick:()=>{y(d[2].props)},children:A(d[2].props)}),"secondary-tab-2"),d.length>4&&e.jsxs(e.Fragment,{children:[e.jsxs(a.default,{isActive:f,moreTab:!0,selectedMenuLabel:k,onClick:T,children:[e.jsx(t.Icon,{color:"inherit",className:"more-vertical"}),k]},"secondary-tab-more"),e.jsx(b,{open:f,anchorEl:g,placement:"top",transition:!0,disablePortal:!1,children:({TransitionProps:r})=>e.jsx(n.ClickAwayListener,{onClickAway:()=>v(!1),children:e.jsx(x,{open:f,onClick:()=>v(!1),children:e.jsx(n.Fade,Object.assign({},r,{timeout:350,children:e.jsx(h,{id:"more-tabs-menu",children:S()})}))})})})]}),d.length<=4&&e.jsx(a.default,Object.assign({},d[3].props,{isActive:o===d[3].props.value,onClick:()=>{y(d[3].props)},children:A(d[3].props)}),"secondary-tab-3")]})})})})};
+"use strict";var e=require("react/jsx-runtime"),r=require("react"),o=require("@mui/material/AppBar"),i=require("@mui/material/Toolbar"),t=require("../../icon/icon.js");require("../../icon/icon.definitions.js");var a=require("./secondaryTabStyled.js"),n=require("@mui/material"),s=require("../../../design/skoda/palette.theme.js");function l(e){return e&&e.__esModule?e:{default:e}}var p=l(r),d=l(o),c=l(i);const u=n.styled(n.Backdrop)((()=>({zIndex:2e3}))),x=n.styled(n.Popper)((()=>({transform:"unset !important",position:"static !important",zIndex:2e3}))),b=n.styled(n.MenuList)((({theme:e})=>({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:e.palette.onSurface.os900,paddingTop:"11px",paddingBottom:"11px"}}))),h=n.styled(d.default)((()=>({maxHeigth:"56px",padding:"0px",top:"auto",bottom:0,boxShadow:"none",borderTop:`1px solid ${s.flowColors.transparent.secondary}`,backgroundColor:s.flowColors.background.primary,"& > div.MuiToolbar-root":{maxHeight:"56px",padding:"0px","& > div":{width:"100%",justifyContent:"space-evenly","& > div":{"&> a":{padding:0,textDecoration:"none"}}}}})));exports.SecondaryNavigationTabs=({currentActiveTab:o,setCurrentActiveTab:i,children:s})=>{const[l,d]=r.useState(null),[m,g]=r.useState(null),[j,f]=r.useState(!1),[v,k]=r.useState(null),C=r.useCallback((e=>{i(e.value),e.onClick&&e.onClick()}),[i]),y=r.useCallback((e=>{f(!j),g(e.currentTarget)}),[j]),T=r.useCallback((r=>r.href?e.jsxs("a",{href:r.href,target:r.target||null,children:[e.jsx(t.Icon,{color:"inherit",name:r.icon||"more-horizontal"}),r.label]}):e.jsxs(e.Fragment,{children:[e.jsx(t.Icon,{color:"inherit",name:r.icon||"more-horizontal"}),r.label]})),[]),A=r.useCallback((e=>{k(e.label),e.href?window.open(e.href,e.target):i(e.value),f(!1),e.onClick&&e.onClick(e.value)}),[i]),w=r.useCallback((()=>l.slice(3).map(((r,o)=>e.jsxs("div",{children:[e.jsx(n.MenuItem,{onClick:()=>A(r.props),children:r.props.label},o),e.jsx(n.Divider,{orientation:"horizontal",textAlign:"center",variant:"middle"})]},r.props.label)))),[l,A]);return r.useEffect((()=>{d(p.default.Children.toArray(s))}),[s]),e.jsx(h,{position:"fixed",color:"transparent",children:e.jsx(c.default,{children:e.jsx(n.Box,{sx:{display:"flex"},children:l&&e.jsxs(e.Fragment,{children:[e.jsx(a.default,Object.assign({},l[0].props,{isActive:o===l[0].props.value,onClick:()=>{C(l[0].props)},children:T(l[0].props)}),"secondary-tab-0"),e.jsx(a.default,Object.assign({},l[1].props,{isActive:o===l[1].props.value,onClick:()=>{C(l[1].props)},children:T(l[1].props)}),"secondary-tab-1"),e.jsx(a.default,Object.assign({},l[2].props,{isActive:o===l[2].props.value,onClick:()=>{C(l[2].props)},children:T(l[2].props)}),"secondary-tab-2"),l.length>4&&e.jsxs(e.Fragment,{children:[e.jsxs(a.default,{isActive:j,moreTab:!0,selectedMenuLabel:v,onClick:y,children:[e.jsx(t.Icon,{color:"inherit",name:"vertical"}),v]},"secondary-tab-more"),e.jsx(x,{open:j,anchorEl:m,placement:"top",transition:!0,disablePortal:!1,children:({TransitionProps:r})=>e.jsx(n.ClickAwayListener,{onClickAway:()=>f(!1),children:e.jsx(u,{open:j,onClick:()=>f(!1),children:e.jsx(n.Fade,Object.assign({},r,{timeout:350,children:e.jsx(b,{id:"more-tabs-menu",children:w()})}))})})})]}),l.length<=4&&e.jsx(a.default,Object.assign({},l[3].props,{isActive:o===l[3].props.value,onClick:()=>{C(l[3].props)},children:T(l[3].props)}),"secondary-tab-3")]})})})})};
 //# sourceMappingURL=secondaryNavigationTabs.js.map

package/cjs/components/tab/secondaryNavigation/secondaryNavigationTabs.js.map CHANGED Viewed

	@@ -1 +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":["BackdropStyled","styled","Backdrop","zIndex","PopperStyled","Popper","transform","position","MenuStyled","MenuList","theme","bottom","left","width","padding","background","boxSizing","borderTopLeftRadius","borderTopRightRadius","boxShadow","display","marginTop","marginBottom","fontSize","fontWeight","color","palette","onSurface","os900","paddingTop","paddingBottom","AppBarStyled","MuiAppBar","default","maxHeigth","top","borderTop","flowColors","transparent","secondary","backgroundColor","primary","maxHeight","justifyContent","textDecoration","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","className","icon","label","_Fragment","onClickMenuItem","window","handleMenuItems","slice","map","item","i","MenuItem","props","Divider","orientation","textAlign","variant","useEffect","React","Children","toArray","jsx","Toolbar","Box","sx","jsxs","SecondaryTabStyled","Object","assign","isActive","length","moreTab","placement","transition","disablePortal","TransitionProps","ClickAwayListener","onClickAway","Fade","timeout","id"],"mappings":"8YAeY,MAwDNA,EAAiBC,EAAAA,OAAOC,EAAQA,SAAfD,EAAiB,KAC7B,CACHE,OAAQ,QAGVC,EAAeH,EAAAA,OAAOI,EAAMA,OAAbJ,EAAe,KAClB,CACVK,UAAW,mBACXC,SAAU,oBACVJ,OAAQ,QAIVK,EAAaP,EAAAA,OAAOQ,EAAAA,SAAPR,EAAiB,EAAGS,YAC5B,CACHH,SAAU,WACVI,OAAQ,IACRC,KAAM,EACNC,MAAO,OACPC,QAAS,oBACTC,WAAY,QACZC,UAAW,aACXC,oBAAqB,OACrBC,qBAAsB,OACtBf,OAAQ,IACRgB,UAAW,+BACX,qBAAsB,CAClBC,QAAS,QACTC,UAAW,iBACXC,aAAc,kBAElB,sBAAuB,CACnB,SAAU,CACNL,oBAAqB,OACrBC,qBAAsB,SAG9B,eAAgB,CACZK,SAAU,OACVC,WAAY,MACZC,MAAOf,EAAMgB,QAAQC,UAAUC,MAC/BC,WAAY,OACZC,cAAe,YAOrBC,EAAe9B,EAAAA,OAAO+B,EAASC,QAAhBhC,EAAkB,KAC5B,CACHiC,UAAW,OACXpB,QAAS,MACTqB,IAAK,OACLxB,OAAQ,EACRQ,UAAW,OACXiB,UAAW,aAAaC,EAAUA,WAACC,YAAYC,YAC/CC,gBAAiBH,EAAAA,WAAWtB,WAAW0B,QACvC,0BAA2B,CACvBC,UAAW,OACX5B,QAAS,MACT,UAAW,CACPD,MAAO,OACP8B,eAAgB,eAChB,UAAW,CACP,OAAQ,CACJ7B,QAAS,EACT8B,eAAgB,+CA3HD,EAAGC,mBAAkBC,sBAAqBC,eAC7E,MAAOC,EAAaC,GAAkBC,EAAQA,SAAC,OACxCC,EAAUC,GAAeF,EAAQA,SAAC,OAClCG,EAAMC,GAAWJ,EAAQA,UAAC,IAC1BK,EAAmBC,GAAwBN,EAAQA,SAAC,MAErDO,EAAkBC,eAAaC,IACjCb,EAAoBa,EAAOC,OAC3BD,EAAOE,SAAWF,EAAOE,SAAS,GACnC,CAACf,IAEEgB,EAAqBJ,eAAaK,IACpCT,GAASD,GACTD,EAAYW,EAAEC,cAAc,GAC7B,CAACX,IAEEY,EAAsBP,eAAaC,GACjCA,EAAOO,KACCC,OAAM,IAAK,CAAED,KAAMP,EAAOO,KAAME,OAAQT,EAAOS,QAAU,KAAMrB,SAAU,CAACsB,EAAAA,IAAKC,EAAIA,KAAE,CAAE7C,MAAO,UAAW8C,UAAWZ,EAAOa,MAAQ,oBAAsBb,EAAOc,SAGhKN,EAAAA,KAAMO,EAAAA,SAAW,CAAE3B,SAAU,CAACsB,MAAKC,EAAAA,KAAM,CAAE7C,MAAO,UAAW8C,UAAWZ,EAAOa,MAAQ,oBAAsBb,EAAOc,UAEjI,IAEGE,EAAkBjB,eAAaC,IACjCH,EAAqBG,EAAOc,OACvBd,EAAOO,KAIRU,OAAOvB,KAAKM,EAAOO,KAAMP,EAAOS,QAHhCtB,EAAoBa,EAAOC,OAK/BN,GAAQ,GACRK,EAAOE,SAAWF,EAAOE,QAAQF,EAAOC,MAAM,GAC/C,CAACd,IAEE+B,EAAkBnB,EAAAA,aAAY,IACdV,EAAY8B,MAAM,GACnBC,KAAI,CAACC,EAAMC,IAChBd,EAAAA,KAAM,MAAO,CAAEpB,SAAU,CAACsB,EAAAA,IAAKa,EAAAA,SAAU,CAAErB,QAAS,IAAMc,EAAgBK,EAAKG,OAAQpC,SAAUiC,EAAKG,MAAMV,OAASQ,GAAIZ,EAAAA,IAAKe,EAAAA,QAAS,CAAEC,YAAa,aAAcC,UAAW,SAAUC,QAAS,aAAgBP,EAAKG,MAAMV,UAE1O,CAACzB,EAAa2B,IAIjB,OAHAa,EAAAA,WAAU,KACNvC,EAAewC,EAAAA,QAAMC,SAASC,QAAQ5C,GAAU,GACjD,CAACA,IACIsB,EAAIuB,IAAC7D,EAAc,CAAExB,SAAU,QAASkB,MAAO,cAAesB,SAAUsB,MAAKwB,EAAAA,QAAS,CAAE9C,SAAUsB,EAAAA,IAAKyB,EAAAA,IAAK,CAAEC,GAAI,CAAE3E,QAAS,QAAU2B,SAAUC,GAAgBmB,EAAK6B,KAACtB,WAAW,CAAE3B,SAAU,CAACsB,EAAIuB,IAACK,EAAkBhE,QAAEiE,OAAOC,OAAO,CAAE,EAAEnD,EAAY,GAAGmC,MAAO,CAAEiB,SAAUvD,IAAqBG,EAAY,GAAGmC,MAAMvB,MAAOC,QAAS,KAClTJ,EAAgBT,EAAY,GAAGmC,MAAM,EACtCpC,SAAUkB,EAAoBjB,EAAY,GAAGmC,SAAW,mBAAoBd,EAAIuB,IAACK,EAAkBhE,QAAEiE,OAAOC,OAAO,CAAA,EAAInD,EAAY,GAAGmC,MAAO,CAAEiB,SAAUvD,IAAqBG,EAAY,GAAGmC,MAAMvB,MAAOC,QAAS,KAClNJ,EAAgBT,EAAY,GAAGmC,MAAM,EACtCpC,SAAUkB,EAAoBjB,EAAY,GAAGmC,SAAW,mBAAoBd,EAAIuB,IAACK,EAAkBhE,QAAEiE,OAAOC,OAAO,CAAA,EAAInD,EAAY,GAAGmC,MAAO,CAAEiB,SAAUvD,IAAqBG,EAAY,GAAGmC,MAAMvB,MAAOC,QAAS,KAClNJ,EAAgBT,EAAY,GAAGmC,MAAM,EACtCpC,SAAUkB,EAAoBjB,EAAY,GAAGmC,SAAW,mBAAoBnC,EAAYqD,OAAS,GAAMlC,EAAK6B,KAACtB,WAAW,CAAE3B,SAAU,CAACoB,EAAAA,KAAM8B,EAAAA,QAAoB,CAAEG,SAAU/C,EAAMiD,SAAS,EAAM/C,kBAAmBA,EAAmBM,QAASC,EAAoBf,SAAU,CAACsB,MAAKC,EAAAA,KAAM,CAAE7C,MAAO,UAAW8C,UAAW,kBAAoBhB,IAAsB,sBAAuBc,EAAIuB,IAACxF,EAAc,CAAEiD,KAAMA,EAAMF,SAAUA,EAAUoD,UAAW,MAAOC,YAAY,EAAMC,eAAe,EAAO1D,SAAU,EAAG2D,qBAAuBrC,EAAIuB,IAACe,EAAiBA,kBAAE,CAAEC,YAAa,IAAMtD,GAAQ,GAAQP,SAAUsB,EAAIuB,IAAC5F,EAAgB,CAAEqD,KAAMA,EAAMQ,QAAS,IAAMP,GAAQ,GAAQP,SAAUsB,MAAKwC,EAAAA,KAAMX,OAAOC,OAAO,CAAA,EAAIO,EAAiB,CAAEI,QAAS,IAAK/D,SAAUsB,EAAAA,IAAK7D,EAAY,CAAEuG,GAAI,iBAAkBhE,SAAU8B,kBAAyC7B,EAAYqD,QAAU,GAAMhC,EAAAA,IAAK4B,EAAAA,QAAoBC,OAAOC,OAAO,CAAE,EAAEnD,EAAY,GAAGmC,MAAO,CAAEiB,SAAUvD,IAAqBG,EAAY,GAAGmC,MAAMvB,MAAOC,QAAS,KACr+BJ,EAAgBT,EAAY,GAAGmC,MAAM,EACtCpC,SAAUkB,EAAoBjB,EAAY,GAAGmC,SAAW,2BAAmC"}
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, 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":["BackdropStyled","styled","Backdrop","zIndex","PopperStyled","Popper","transform","position","MenuStyled","MenuList","theme","bottom","left","width","padding","background","boxSizing","borderTopLeftRadius","borderTopRightRadius","boxShadow","display","marginTop","marginBottom","fontSize","fontWeight","color","palette","onSurface","os900","paddingTop","paddingBottom","AppBarStyled","MuiAppBar","default","maxHeigth","top","borderTop","flowColors","transparent","secondary","backgroundColor","primary","maxHeight","justifyContent","textDecoration","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","name","icon","label","_Fragment","onClickMenuItem","window","handleMenuItems","slice","map","item","i","MenuItem","props","Divider","orientation","textAlign","variant","useEffect","React","Children","toArray","jsx","Toolbar","Box","sx","jsxs","SecondaryTabStyled","Object","assign","isActive","length","moreTab","placement","transition","disablePortal","TransitionProps","ClickAwayListener","onClickAway","Fade","timeout","id"],"mappings":"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"}

package/cjs/components/tab/tab.d.ts CHANGED Viewed

@@ -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/cjs/components/tab/tab.js.map CHANGED Viewed

	@@ -1 +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","jsx","TabStyled","default","Object","assign","wrapped","tabIndex","component","useEffect","_Fragment","children"],"mappings":"~~qJAUY~~,MAACA,EAAMC,EAAUA,YAAC,EAAGC,QAAOC,QAAOC,UAASC,oBAAmBC,OAAMC,SAAQC,aAAaC,KAClG,MAAMC,UAAEA,EAASC,gBAAEA,EAAeC,UAAEA,GAAcC,EAAAA,WAAWC,EAAAA,cACtDC,EAAUC,GAAeC,EAAQA,UAAC,IACnCC,UAAEA,GAAcC,EAAAA,UAIhBC,EAAgBC,eAAaC,IAC/BX,EAAgBR,GAAO,GACvBE,GAAqBA,EAAkBiB,GACvClB,GAAWA,EAAQkB,EAAE,GACtB,CAACnB,EAAOC,EAASO,EAAiBN,IAG/BkB,EAAgBF,EAAAA,aAAY,IAC1Bf,EACQkB,EAAIC,IAACC,EAASC,QAAEC,OAAOC,OAAO,CAAEC,SAAS,EAAMrB,IAAKA,EAAKG,UAAWA,EAAWG,SAAUA,EAAU,aAAcP,EAAWL,MAAOA,EAAOD,MAAOA,EAAO6B,SAAUhB,EAAW,GAAK,GAAKG,EAAUf,GAAQ,CAAE6B,UAAW,IAAK1B,KAAMA,EAAMC,OAAQA,EAAQH,QAAUkB,GAAMF,EAAcE,MAGrRE,EAAAA,IAAKE,EAAAA,QAAWE,OAAOC,OAAO,CAAEC,SAAS,EAAMrB,IAAKA,EAAK,aAAcD,EAAWuB,SAAUhB,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,OARAwB,EAAAA,WAAU,KAEFjB,EADAN,IAAcP,EAKjB,GACF,CAACO,EAAWP,IACRqB,EAAAA,IAAKU,EAAAA,SAAW,CAAEC,SAAUZ,KAAkB"}
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 * @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","jsx","TabStyled","default","Object","assign","wrapped","tabIndex","component","useEffect","_Fragment","children"],"mappings":"qJAWY,MAACA,EAAMC,EAAUA,YAAC,EAAGC,QAAOC,QAAOC,UAASC,oBAAmBC,OAAMC,SAAQC,aAAaC,KAClG,MAAMC,UAAEA,EAASC,gBAAEA,EAAeC,UAAEA,GAAcC,EAAAA,WAAWC,EAAAA,cACtDC,EAAUC,GAAeC,EAAQA,UAAC,IACnCC,UAAEA,GAAcC,EAAAA,UAIhBC,EAAgBC,eAAaC,IAC/BX,EAAgBR,GAAO,GACvBE,GAAqBA,EAAkBiB,GACvClB,GAAWA,EAAQkB,EAAE,GACtB,CAACnB,EAAOC,EAASO,EAAiBN,IAG/BkB,EAAgBF,EAAAA,aAAY,IAC1Bf,EACQkB,EAAIC,IAACC,EAASC,QAAEC,OAAOC,OAAO,CAAEC,SAAS,EAAMrB,IAAKA,EAAKG,UAAWA,EAAWG,SAAUA,EAAU,aAAcP,EAAWL,MAAOA,EAAOD,MAAOA,EAAO6B,SAAUhB,EAAW,GAAK,GAAKG,EAAUf,GAAQ,CAAE6B,UAAW,IAAK1B,KAAMA,EAAMC,OAAQA,EAAQH,QAAUkB,GAAMF,EAAcE,MAGrRE,EAAAA,IAAKE,EAAAA,QAAWE,OAAOC,OAAO,CAAEC,SAAS,EAAMrB,IAAKA,EAAK,aAAcD,EAAWuB,SAAUhB,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,OARAwB,EAAAA,WAAU,KAEFjB,EADAN,IAAcP,EAKjB,GACF,CAACO,EAAWP,IACRqB,EAAAA,IAAKU,EAAAA,SAAW,CAAEC,SAAUZ,KAAkB"}

package/cjs/components/tab/tabPanel.d.ts CHANGED Viewed

@@ -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/cjs/components/tab/tabPanel.js.map CHANGED Viewed

	@@ -1 +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":["props","children","value","index","other","__rest","_jsx","jsx","Object","assign","role","hidden","id"],"mappings":"~~oFAEyBA~~,IACrB,MAAMC,SAAEA,EAAQC,MAAEA,EAAKC,MAAEA,GAAUH,EAAOI,EAAQC,EAAMA,OAACL,EAAO,CAAC,WAAY,QAAS,UACtF,OAAQM,EAAIC,IAAC,MAAOC,OAAOC,OAAO,CAAEC,KAAM,WAAYC,OAAQT,IAAUC,EAAOS,GAAI,mBAAmBT,IAAS,kBAAmB,cAAcA,KAAWC,EAAO,CAAEH,SAAUC,IAAUC,GAASF,IAAc"}
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\";\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":["props","children","value","index","other","__rest","_jsx","jsx","Object","assign","role","hidden","id"],"mappings":"oFAGyBA,IACrB,MAAMC,SAAEA,EAAQC,MAAEA,EAAKC,MAAEA,GAAUH,EAAOI,EAAQC,EAAMA,OAACL,EAAO,CAAC,WAAY,QAAS,UACtF,OAAQM,EAAIC,IAAC,MAAOC,OAAOC,OAAO,CAAEC,KAAM,WAAYC,OAAQT,IAAUC,EAAOS,GAAI,mBAAmBT,IAAS,kBAAmB,cAAcA,KAAWC,EAAO,CAAEH,SAAUC,IAAUC,GAASF,IAAc"}

package/cjs/components/tab/tabStyled.d.ts CHANGED Viewed

@@ -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/cjs/components/tab/tabStyled.js.map CHANGED Viewed

	@@ -1 +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","default","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":"~~yMAKK~~,MAACA,EAAYC,EAAMC,QAACC,UAAQ,CAC7BC,kBAAoBC,GAAkB,aAATA,GAAgC,cAATA,GAAiC,QAATA,GAD9DJ,EAEf,EAAGK,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"}
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 * @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","default","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":"yMAMK,MAACA,EAAYC,EAAMC,QAACC,UAAQ,CAC7BC,kBAAoBC,GAAkB,aAATA,GAAgC,cAATA,GAAiC,QAATA,GAD9DJ,EAEf,EAAGK,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/cjs/components/tab/tabs.d.ts CHANGED Viewed

@@ -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/cjs/components/tab/tabs.js.map CHANGED Viewed

	@@ -1 +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","default","createContext","activeTab","updateActiveTab","noop","smallSize","TabsStyled","styled","MuiTabs","shouldForwardProp","prop","_a","props","__rest","styles","Object","assign","boxSizing","marginRight","marginLeft","width","height","backgroundColor","flowColors","brand","primary","bottom","mouseDown","border","paddingLeft","paddingRight","handleChange","defaultActiveTab","variantSecondaryNavigation","children","sx","classes","labelMoreItem","currentActiveTab","setCurrentActiveTab","useState","windowWidth","setWindowWidth","isMobileView","setIsMobileView","menuChildren","setMenuChildren","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","jsx","SecondaryNavigationTabs","val","Provider","_jsxs","ref","variant","breakpoints","values","lg","scrollButtons","MenuTab","label"],"mappings":"gcAWY,MAACA,EAAcC,EAAKC,QAACC,cAAc,CAC3CC,UAAW,KACXC,gBAAiBC,EAAIJ,QACrBK,WAAW,IAgETC,EAAaC,EAAMA,OAACC,UAAS,CAC/BC,kBAAoBC,GAAkB,+BAATA,GAAkD,cAATA,GAAiC,cAATA,GAD/EH,EAEfI,IACG,IAA2BC,EAAQC,EAAAA,OAAOF,EAAI,CAAC,WAAY,UAC9D,IAAIG,EAAS,CAAA,EA4Cb,OA3CAA,EAASC,OAAOC,OAAOD,OAAOC,OAAO,GAAIF,GAAS,CAAEG,UAAW,aAAc,MAAO,CAC5EA,UAAW,cACZ,UAAW,CACV,oCAAqC,CACjCC,YAAa,QAEjB,UAAW,CACPC,WAAY,MACZC,MAAO,QAEX,yBAA0B,CACtBC,OAAQ,MACRC,gBAAiBC,EAAAA,WAAWC,MAAMC,SAEtC,yBAA0B,CACtBN,WAAY,WAGpBP,EAAMP,YACNS,EAASC,OAAOC,OAAOD,OAAOC,OAAO,GAAIF,GAAS,CAAE,UAAW,CACvD,oCAAqC,CACjCI,YAAa,QAEjB,UAAW,CACPC,WAAY,OAEhB,yBAA0B,CACtBA,WAAY,OACZ,UAAW,CACPO,OAAQ,WAGjB,uBAAwB,CACvBJ,gBAAiBC,EAAAA,WAAWC,MAAMC,YAG1Cb,EAAMe,YACNb,EAASC,OAAOC,OAAOD,OAAOC,OAAO,CAAA,EAAIF,GAAS,CAAE,UAAWC,OAAOC,OAAOD,OAAOC,OAAO,CAAA,EAAIF,EAAO,YAAa,CAAE,yBAA0BC,OAAOC,OAAOD,OAAOC,OAAO,CAAA,EAAIF,EAAO,WAAW,2BAA4B,CAAE,UAAW,CAC1Nc,OAAQ,EACRC,YAAa,EACbC,aAAc,UAG3BhB,CAAM,iBAxGIH,IACjB,IAAIoB,aAAEA,EAAYC,iBAAEA,EAAgB3B,UAAEA,EAAS4B,2BAAEA,EAA0BC,SAAEA,EAAQC,GAAEA,EAAEC,QAAEA,EAAOC,cAAEA,EAAgB,OAAMnC,UAAEA,GAAcS,EAAIC,EAAQC,EAAAA,OAAOF,EAAI,CAAC,eAAgB,mBAAoB,YAAa,6BAA8B,WAAY,KAAM,UAAW,gBAAiB,cAC/R,MAAO2B,EAAkBC,GAAuBC,EAAQA,SAACtC,QAA6CA,EAAY8B,IAC3GS,EAAaC,GAAkBF,EAAQA,SAAC,OACxCG,EAAcC,GAAmBJ,EAAQA,UAAC,IAC1CK,EAAcC,GAAmBN,EAAQA,SAAC,KAC1Cb,EAAWoB,GAAgBP,EAAQA,UAAC,IACpCQ,EAAgBC,GAAqBT,EAAQA,UAAC,GAC/CU,EAAaC,SAAO,MACpBC,EAAUD,SAAO,OACjBE,sBAAEA,EAAqBC,mBAAEA,GAAuBC,EAAOvD,UACvDwD,EAAQC,EAAAA,WACRtD,EAAkBuD,EAAAA,aAAY,CAACC,EAAOC,KACxCX,EAAkBW,GAClBrB,EAAoBoB,EAAM,GAC3B,IACGE,EAAmBH,EAAAA,aAAY,KACjCJ,EAAmBrB,EAA4BU,EAAcC,EAAiBF,EAAe,GAC9F,CAACY,EAAoBX,EAAcV,IAiCtC,OAhCA6B,EAAAA,WAAU,KACNvB,EAAoBrC,QAA6CA,EAAY8B,EAAiB,GAC/F,CAAC9B,EAAW8B,IACf8B,EAAAA,WAAU,KACND,IACAE,OAAOC,iBAAiB,SAAUH,GAC3B,KACHE,OAAOE,oBAAoB,SAAUJ,EAAiB,KAG9DC,EAAAA,WAAU,KACN/B,GAAgBA,EAAaO,EAAiB,GAC/C,CAACA,EAAkBP,IAEtB+B,EAAAA,WAAU,KACNhB,EAAgB/C,EAAAA,QAAMmE,SAASC,QAAQjC,GAAU,GAClD,CAACA,IAEJ4B,EAAAA,WAAU,KACFZ,GAAcA,EAAWkB,SACzBf,EAAsBD,EAASX,EAAaP,EAAUY,EACzD,GACF,CAACL,EAAaY,EAAuBnB,IACxC4B,EAAAA,WAAU,KACNO,SAASL,iBAAiB,aAAa,WACnCjB,GAAa,EACzB,IACQsB,SAASL,iBAAiB,WAAW,WACjCjB,GAAa,EACzB,GAAU,GACH,IACHe,EAAAA,WAAU,QAAW,CAAClD,IACd0D,EAAAA,IAAKC,EAAAA,SAAW,CAAErC,SAAUD,GAA8BU,EAAgB2B,EAAIE,IAACC,0BAAyB,CAAEpC,cAAeA,EAAeC,iBAAkBA,EAAkBC,oBAAsBmC,GAAQnC,EAAoBmC,GAAMxC,SAAUA,IAAgBoC,EAAAA,IAAKxE,EAAY6E,SAAU,CAAEhB,MAAO,CAAEzD,UAAWoC,EAAkBnC,kBAAiBE,aAAa6B,SAAU0C,OAAMtE,EAAY,CAAEuE,IAAKzB,EAAS0B,QAASrC,GAAee,EAAMuB,YAAYC,OAAOC,GAAK,aAAe,YAAaC,eAAe,EAAO7E,UAAWA,EAAWsD,MAAOX,EAAiB,OAASV,EAAkBX,UAAWA,EAAWQ,GAAIA,EAAIC,QAASA,EAASF,SAAU,CAACA,EAAUoC,EAAIE,IAACW,EAAOA,QAAE,CAAExB,MAAO,OAAQkB,IAAK3B,EAAYkC,MAAO/C,EAAeH,SAAUW,UAA4B"}
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 * @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","default","createContext","activeTab","updateActiveTab","noop","smallSize","TabsStyled","styled","MuiTabs","shouldForwardProp","prop","_a","props","__rest","styles","Object","assign","boxSizing","marginRight","marginLeft","width","height","backgroundColor","flowColors","brand","primary","bottom","mouseDown","border","paddingLeft","paddingRight","handleChange","defaultActiveTab","variantSecondaryNavigation","children","sx","classes","labelMoreItem","currentActiveTab","setCurrentActiveTab","useState","windowWidth","setWindowWidth","isMobileView","setIsMobileView","menuChildren","setMenuChildren","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","jsx","SecondaryNavigationTabs","val","Provider","_jsxs","ref","variant","breakpoints","values","lg","scrollButtons","MenuTab","label"],"mappings":"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"}

package/cjs/components/textInput/textInput.js CHANGED Viewed

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

package/cjs/components/textInput/textInput.js.map CHANGED Viewed

	@@ -1 +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":["_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","default","maxChars","required","_jsx","children","jsx","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":"~~ocAkB0BA~~,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,EAAAA,OAAOb,EAAI,CAAC,OAAQ,KAAM,QAAS,WAAY,SAAU,UAAW,QAAS,cAAe,WAAY,YAAa,iBAC3P,MAAOc,EAAcC,GAAmBC,EAAAA,SAAST,GAAS,KACnDU,EAAUC,GAAeF,EAAQA,UAAC,IAClCG,EAAWC,GAAgBJ,EAAQA,UAAC,IACpCK,EAASC,GAAcN,EAAQA,UAAC,IAChCO,EAAYC,GAAiBR,EAAQA,UAAC,IACvCS,aAAEA,EAAYC,cAAEA,EAAaC,eAAEA,EAAcC,kBAAEA,GAAsBC,eAAa1B,EAAOoB,EAAYf,EAAaI,EAAMkB,MACxHC,EAAWC,SAAO,OAClBC,MAAEA,GAAUC,EAAAA,UAElB,OADAC,EAAkBA,mBAACJ,EAAUK,EAAIC,QAAE3B,EAAWuB,EAAOnB,EAAcP,EAAOK,EAAM0B,SAAU1B,EAAM2B,SAAUrB,EAAaH,EAAiBS,GAChIgB,MAAK,MAAO,CAAEC,SAAUD,EAAIE,IAACC,UAAiBC,OAAOC,OAAO,GAAIjC,EAAO,CAAEkC,UAAW,CAAClC,EAAMmC,KAAO,iBAAmB,GAAI5C,EAAQ,kBAAoB,qBAAqB6C,KAAK,KAAMC,gBAAiB,CAClMC,OAAQjC,GACTkC,WAAYvC,EAAMmC,KACf,CACEK,eAAiBZ,EAAAA,IAAKa,EAAAA,eAAgB,CAAEC,SAAU,QAASb,SAAUD,EAAIE,IAACa,OAAM,CAAEC,MAAO5C,EAAM6C,SAAW,WAAa,~~UAAWX~~,~~UAAWlC~~,EAAMmC,~~UAErJ~~,CAAE,EAAE3C,SAAWsD,GAAU/B,EAAe+B,EAAO9C,EAAM0B,SAAUlC,EAAUW,GAAkBR,MAAOO,EAAcR,QAAUoD,GAAUhC,EAAcgC,EAAOtC,EAAcF,EAAaZ,GAAUqD,aAAc,IAAMrC,GAAW,GAAOsC,aAAc,IAAMtC,GAAW,GAAQD,QAASA,EAAShB,OAASqD,GAAUjC,EAAaiC,EAAOxC,EAAaE,EAAcf,EAAQS,GAAe+C,QAAS1C,EAAWX,YAAaoB,EAAmBzB,MAAOK,EAAc,KAAOL,EAAO2D,cAAetD,EAAaP,KAAMA,EAAM8D,IAAKhC,EAAU7B,GAAIA,EAAI8D,MAAOvD,EAAUC,UAAWA,EAAWuD,UAAYP,IAC7jB9C,EAAMsD,mBACNtD,EAAMsD,kBAAkBR,GACxB/C,GAAgBA,EAAawD,OAAS,GAAKxD,EAAayD,SAASV,EAAMW,MACvEX,EAAMY,gBACT,EACFC,WAAY/B,EAAAA,IAAKgC,EAAAA,QAAY,CAAElC,SAAU1B,EAAM0B,SAAUxB,aAAcA,EAAc2D,SAAU7D,EAAM6D,eAAoB"}
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', 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":["_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","default","maxChars","required","_jsx","children","jsx","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":"+eAkB0BA,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,EAAAA,OAAOb,EAAI,CAAC,OAAQ,KAAM,QAAS,WAAY,SAAU,UAAW,QAAS,cAAe,WAAY,YAAa,iBAC3P,MAAOc,EAAcC,GAAmBC,EAAAA,SAAST,GAAS,KACnDU,EAAUC,GAAeF,EAAQA,UAAC,IAClCG,EAAWC,GAAgBJ,EAAQA,UAAC,IACpCK,EAASC,GAAcN,EAAQA,UAAC,IAChCO,EAAYC,GAAiBR,EAAQA,UAAC,IACvCS,aAAEA,EAAYC,cAAEA,EAAaC,eAAEA,EAAcC,kBAAEA,GAAsBC,eAAa1B,EAAOoB,EAAYf,EAAaI,EAAMkB,MACxHC,EAAWC,SAAO,OAClBC,MAAEA,GAAUC,EAAAA,UAElB,OADAC,EAAkBA,mBAACJ,EAAUK,EAAIC,QAAE3B,EAAWuB,EAAOnB,EAAcP,EAAOK,EAAM0B,SAAU1B,EAAM2B,SAAUrB,EAAaH,EAAiBS,GAChIgB,MAAK,MAAO,CAAEC,SAAUD,EAAIE,IAACC,UAAiBC,OAAOC,OAAO,GAAIjC,EAAO,CAAEkC,UAAW,CAAClC,EAAMmC,KAAO,iBAAmB,GAAI5C,EAAQ,kBAAoB,qBAAqB6C,KAAK,KAAMC,gBAAiB,CAClMC,OAAQjC,GACTkC,WAAYvC,EAAMmC,KACf,CACEK,eAAiBZ,EAAAA,IAAKa,EAAAA,eAAgB,CAAEC,SAAU,QAASb,SAAUD,EAAIE,IAACa,OAAM,CAAEC,MAAO5C,EAAM6C,SAAW,WAAa,UAAWxD,KAAMW,EAAMmC,UAEhJ,CAAE,EAAE3C,SAAWsD,GAAU/B,EAAe+B,EAAO9C,EAAM0B,SAAUlC,EAAUW,GAAkBR,MAAOO,EAAcR,QAAUoD,GAAUhC,EAAcgC,EAAOtC,EAAcF,EAAaZ,GAAUqD,aAAc,IAAMrC,GAAW,GAAOsC,aAAc,IAAMtC,GAAW,GAAQD,QAASA,EAAShB,OAASqD,GAAUjC,EAAaiC,EAAOxC,EAAaE,EAAcf,EAAQS,GAAe+C,QAAS1C,EAAWX,YAAaoB,EAAmBzB,MAAOK,EAAc,KAAOL,EAAO2D,cAAetD,EAAaP,KAAMA,EAAM8D,IAAKhC,EAAU7B,GAAIA,EAAI8D,MAAOvD,EAAUC,UAAWA,EAAWuD,UAAYP,IAC7jB9C,EAAMsD,mBACNtD,EAAMsD,kBAAkBR,GACxB/C,GAAgBA,EAAawD,OAAS,GAAKxD,EAAayD,SAASV,EAAMW,MACvEX,EAAMY,gBACT,EACFC,WAAY/B,EAAAA,IAAKgC,EAAAA,QAAY,CAAElC,SAAU1B,EAAM0B,SAAUxB,aAAcA,EAAc2D,SAAU7D,EAAM6D,eAAoB"}

package/cjs/components/upload/UploadField.d.ts CHANGED Viewed

@@ -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/cjs/components/upload/UploadField.js CHANGED Viewed

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