@pautena/react-design-system 0.14.4 → 0.14.6

package/header/cjs/index.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("@mui/material/styles"),t=require("@mui/material/Breadcrumbs"),i=require("@mui/material/Container"),a=require("@mui/material/Box"),n=require("@mui/material/Tabs"),l=require("@mui/material/Tab"),o=require("@mui/material/Button"),s=require("react-router-dom"),d=require("react"),u=require("@mui/material/Link"),c=require("@mui/material"),h=require("@mui/material/CircularProgress"),m=require("@mui/material/Typography");function f(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var x=f(t),p=f(i),b=f(a),g=f(n),y=f(l),j=f(o),q=f(u),v=f(h),T=f(m);const C=d.forwardRef(((r,t)=>{const{href:i,...a}=r;return e.jsx(s.Link,{ref:t,to:i,...a})})),k=d.forwardRef(((r,t)=>e.jsx(q.default,{...r,component:C}))),z=d.createContext([0,()=>null]);z.Provider;const w=({loading:t,children:i})=>{const{typography:a}=r.useTheme();return t?e.jsx(v.default,{color:"inherit",size:a.h4.fontSize,"aria-label":"title loading"}):"string"==typeof i?e.jsx(T.default,{variant:"h4",role:"heading","aria-level":1,children:i}):e.jsx(e.Fragment,{children:i})},B=({loading:t,children:i})=>{const{typography:a}=r.useTheme();return t?e.jsx(v.default,{color:"inherit",size:a.body1.fontSize,"aria-label":"subtitle loading"}):"string"==typeof i?e.jsx(T.default,{variant:"body1",role:"heading","aria-level":2,children:i}):e.jsx(e.Fragment,{children:i})};exports.Header=({title:t="",loadingTitle:i,subtitle:a,loadingSubtitle:n,preset:l="default",actionsVariant:o="outlined",breadcrumbs:u,actions:h,tabs:m,tabsMode:f="panel",navigationButton:q})=>{const v=s.useLocation(),{palette:T}=r.useTheme(),C=(({lightWeight:e=100,darkWeight:r=900}={})=>{const{palette:t}=c.useTheme();return"light"===t.mode?t.grey[e]:t.grey[r]})(),[L,S]=d.useContext(z),H={default:C,primary:T.primary.main,secondary:T.secondary.main,inherit:"inherit",transparent:"transparent"},P=H[l],F={default:T.getContrastText(H.default),primary:T.primary.contrastText,secondary:T.secondary.contrastText,inherit:"inherit",transparent:T.text.primary}[l],I="panel"===f?L:m?.findIndex((e=>e.href===v.pathname));return e.jsx(b.default,{bgcolor:P,color:F,children:e.jsxs(p.default,{children:[e.jsxs(b.default,{sx:{py:3,display:"flex",flexDirection:"row",justifyContent:"space-between"},children:[e.jsxs(b.default,{children:[q&&e.jsx(j.default,{href:q.href,size:"small",color:"inherit",LinkComponent:k,startIcon:q.icon,sx:{mb:1},children:q.text}),u?.length&&e.jsx(x.default,{color:"inherit",separator:"›","aria-label":"breadcrumb",sx:{marginTop:1},children:u.map((({id:r,link:t,text:i})=>e.jsx(k,{underline:"hover",color:"inherit",href:t,variant:"body2",role:"link",children:i},r)))}),e.jsx(w,{loading:i,children:t}),(a||n)&&e.jsx(B,{loading:n,children:a})]}),h&&e.jsx(b.default,{children:h.map((({disabled:r,id:t,href:i,onClick:a,text:n},l)=>e.jsx(j.default,{component:i?k:"button",role:"button",color:"inherit",disabled:r,variant:o,size:"small",href:i,onClick:a,sx:{mr:l!=h.length-1?1:0},children:n},t)))})]}),m&&e.jsx(g.default,{value:I,textColor:"inherit",onChange:"panel"===f?(e,r)=>S(r):void 0,children:m.map((({id:r,label:t,disabled:i,href:a})=>{const n={label:t,disabled:i};return"panel"===f?e.jsx(y.default,{...n},r):e.jsx(y.default,{...n,component:k,href:a},r)}))})]})})},exports.HeaderSubtitle=B,exports.HeaderTitle=w;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("@mui/material/styles"),t=require("@mui/material/Breadcrumbs"),a=require("@mui/material/Container"),i=require("@mui/material/Box"),n=require("@mui/material/Tabs"),l=require("@mui/material/Tab"),o=require("@mui/material/Button"),s=require("react-router-dom"),u=require("react"),d=require("@mui/material/Link"),c=require("@mui/material"),h=require("@mui/material/CircularProgress"),m=require("@mui/material/Typography");function f(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var p=f(t),x=f(a),b=f(i),g=f(n),y=f(l),j=f(o),v=f(d),q=f(h),T=f(m);const C=u.forwardRef(((r,t)=>{const{href:a,...i}=r;return e.jsx(s.Link,{ref:t,to:a,...i})})),k=u.forwardRef(((r,t)=>e.jsx(v.default,{...r,component:C}))),z=u.createContext([0,()=>null]);z.Provider;const B=({loading:t,children:a})=>{const{typography:i}=r.useTheme();return t?e.jsx(q.default,{color:"inherit",size:i.h4.fontSize,"aria-label":"title loading"}):"string"==typeof a?e.jsx(T.default,{variant:"h4",role:"heading","aria-level":1,children:a}):e.jsx(e.Fragment,{children:a})},w=({loading:t,children:a})=>{const{typography:i}=r.useTheme();return t?e.jsx(q.default,{color:"inherit",size:i.body1.fontSize,"aria-label":"subtitle loading"}):"string"==typeof a?e.jsx(T.default,{variant:"body1",role:"heading","aria-level":2,children:a}):e.jsx(e.Fragment,{children:a})};exports.Header=({title:t="",loadingTitle:a,subtitle:i,loadingSubtitle:n,preset:l="default",actionsVariant:o="outlined",breadcrumbs:d,actions:h,tabs:m,tabsMode:f="panel",navigationButton:v})=>{const q=(m||[]).map((e=>e.path)).filter(Boolean),{palette:T}=r.useTheme(),C=(({lightWeight:e=100,darkWeight:r=900}={})=>{const{palette:t}=c.useTheme();return"light"===t.mode?t.grey[e]:t.grey[r]})(),[L,P]=u.useContext(z),S=(e=>{const{pathname:r}=s.useLocation();for(let t=0;t<e.length;t+=1){const a=e[t],i=s.matchPath(a,r);if(null!==i)return i}return null})(q),H={default:C,primary:T.primary.main,secondary:T.secondary.main,inherit:"inherit",transparent:"transparent"},F=H[l],M={default:T.getContrastText(H.default),primary:T.primary.contrastText,secondary:T.secondary.contrastText,inherit:"inherit",transparent:T.text.primary}[l],R="panel"===f?L:S?.pattern?.path;return e.jsx(b.default,{bgcolor:F,color:M,children:e.jsxs(x.default,{children:[e.jsxs(b.default,{sx:{py:3,display:"flex",flexDirection:"row",justifyContent:"space-between"},children:[e.jsxs(b.default,{children:[v&&e.jsx(j.default,{href:v.href,size:"small",color:"inherit",LinkComponent:k,startIcon:v.icon,sx:{mb:1},children:v.text}),d?.length&&e.jsx(p.default,{color:"inherit",separator:"›","aria-label":"breadcrumb",sx:{marginTop:1},children:d.map((({id:r,link:t,text:a})=>e.jsx(k,{underline:"hover",color:"inherit",href:t,variant:"body2",role:"link",children:a},r)))}),e.jsx(B,{loading:a,children:t}),(i||n)&&e.jsx(w,{loading:n,children:i})]}),h&&e.jsx(b.default,{children:h.map((({disabled:r,id:t,href:a,onClick:i,text:n},l)=>e.jsx(j.default,{component:a?k:"button",role:"button",color:"inherit",disabled:r,variant:o,size:"small",href:a,onClick:i,sx:{mr:l!=h.length-1?1:0},children:n},t)))})]}),m&&e.jsx(g.default,{value:R,textColor:"inherit",onChange:"panel"===f?(e,r)=>P(r):void 0,children:m.map((({id:r,label:t,disabled:a,path:i,href:n})=>{const l={label:t,disabled:a};return"panel"===f?e.jsx(y.default,{...l},r):e.jsx(y.default,{...l,component:k,href:n,value:i},r)}))})]})})},exports.HeaderSubtitle=w,exports.HeaderTitle=B;
 //# sourceMappingURL=index.js.map

package/header/cjs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/link/link.tsx","../../../src/tab-provider/tab-provider.context.ts","../../../src/header/header-title.tsx","../../../src/header/header.tsx","../../../src/utils/theme.ts"],"sourcesContent":["import { Link as RouterLink, LinkProps as RouterLinkProps } from \"react-router-dom\";\nimport { forwardRef } from \"react\";\nimport MuiLink, { LinkProps } from \"@mui/material/Link\";\n\n/* eslint-disable react/display-name, @typescript-eslint/no-explicit-any */\nexport const LinkBehaviour = forwardRef<\n  any,\n  Omit<RouterLinkProps, \"to\"> & { href: RouterLinkProps[\"to\"] }\n>((props, ref) => {\n  const { href, ...other } = props;\n  return <RouterLink ref={ref} to={href} {...other} />;\n});\n\nexport const Link = forwardRef<any, LinkProps>((props, _1) => {\n  return <MuiLink {...(props as any)} component={LinkBehaviour} />;\n});\n","import { createContext, Dispatch, SetStateAction, useContext } from \"react\";\n\nexport const TabContext = createContext<[number, Dispatch<SetStateAction<number>>]>([\n  0,\n  () => null,\n]);\nexport const TabContextProvider = TabContext.Provider;\nexport const useTab = () => useContext(TabContext);\n","import CircularProgress from \"@mui/material/CircularProgress\";\nimport Typography from \"@mui/material/Typography\";\nimport { useTheme } from \"@mui/material/styles\";\nimport { PropsWithChildren } from \"react\";\n\nexport type HeaderTitleProps = PropsWithChildren<{ loading?: boolean }>;\n\nexport const HeaderTitle = ({ loading, children }: HeaderTitleProps) => {\n  const { typography } = useTheme();\n\n  if (loading) {\n    return (\n      <CircularProgress color=\"inherit\" size={typography.h4.fontSize} aria-label=\"title loading\" />\n    );\n  }\n\n  if (typeof children === \"string\") {\n    return (\n      <Typography variant=\"h4\" role=\"heading\" aria-level={1}>\n        {children}\n      </Typography>\n    );\n  }\n\n  return <>{children}</>;\n};\n\nexport type HeaderSubtitleProps = PropsWithChildren<{ loading?: boolean }>;\n\nexport const HeaderSubtitle = ({ loading, children }: HeaderSubtitleProps) => {\n  const { typography } = useTheme();\n\n  if (loading) {\n    return (\n      <CircularProgress\n        color=\"inherit\"\n        size={typography.body1.fontSize}\n        aria-label=\"subtitle loading\"\n      />\n    );\n  }\n\n  if (typeof children === \"string\") {\n    return (\n      <Typography variant=\"body1\" role=\"heading\" aria-level={2}>\n        {children}\n      </Typography>\n    );\n  }\n\n  return <>{children}</>;\n};\n","import { useTheme } from \"@mui/material/styles\";\nimport Breadcrumbs from \"@mui/material/Breadcrumbs\";\nimport Container from \"@mui/material/Container\";\nimport Box from \"@mui/material/Box\";\nimport Tabs from \"@mui/material/Tabs\";\nimport Tab from \"@mui/material/Tab\";\nimport Button from \"@mui/material/Button\";\nimport { Link } from \"../link\";\nimport { useGetDefaultThemeColor } from \"../utils\";\nimport { HeaderComponent, HeaderPreset, HeaderProps } from \"./header.types\";\nimport { useTab } from \"../tab-provider\";\nimport { useLocation } from \"react-router-dom\";\nimport { HeaderSubtitle, HeaderTitle } from \"./header-title\";\n\n/**\n * Section used to explain give basic information about the page\n * and put the main actions\n */\nexport const Header: HeaderComponent = ({\n  title = \"\",\n  loadingTitle,\n  subtitle,\n  loadingSubtitle,\n  preset = \"default\",\n  actionsVariant = \"outlined\",\n  breadcrumbs,\n  actions,\n  tabs,\n  tabsMode = \"panel\",\n  navigationButton,\n}: HeaderProps) => {\n  const location = useLocation();\n  const { palette } = useTheme();\n  const defaultColor = useGetDefaultThemeColor();\n  const [selectedTab, setSelectedTab] = useTab();\n\n  const bgColorPresets: Record<HeaderPreset, string> = {\n    default: defaultColor,\n    primary: palette.primary.main,\n    secondary: palette.secondary.main,\n    inherit: \"inherit\",\n    transparent: \"transparent\",\n  };\n  const bgColor = bgColorPresets[preset];\n  const textColorPresets: Record<HeaderPreset, string> = {\n    default: palette.getContrastText(bgColorPresets.default),\n    primary: palette.primary.contrastText,\n    secondary: palette.secondary.contrastText,\n    inherit: \"inherit\",\n    transparent: palette.text.primary,\n  };\n  const textColor = textColorPresets[preset];\n\n  const modedSelectedTab =\n    tabsMode === \"panel\" ? selectedTab : tabs?.findIndex((tab) => tab.href === location.pathname);\n\n  return (\n    <Box bgcolor={bgColor} color={textColor}>\n      <Container>\n        <Box sx={{ py: 3, display: \"flex\", flexDirection: \"row\", justifyContent: \"space-between\" }}>\n          <Box>\n            {navigationButton && (\n              <Button\n                href={navigationButton.href}\n                size=\"small\"\n                color=\"inherit\"\n                LinkComponent={Link}\n                startIcon={navigationButton.icon}\n                sx={{ mb: 1 }}\n              >\n                {navigationButton.text}\n              </Button>\n            )}\n            {breadcrumbs?.length && (\n              <Breadcrumbs\n                color=\"inherit\"\n                separator=\"›\"\n                aria-label=\"breadcrumb\"\n                sx={{ marginTop: 1 }}\n              >\n                {breadcrumbs.map(({ id, link, text }) => (\n                  <Link\n                    key={id}\n                    underline=\"hover\"\n                    color=\"inherit\"\n                    href={link}\n                    variant=\"body2\"\n                    role=\"link\"\n                  >\n                    {text}\n                  </Link>\n                ))}\n              </Breadcrumbs>\n            )}\n            <HeaderTitle loading={loadingTitle}>{title}</HeaderTitle>\n            {(subtitle || loadingSubtitle) && (\n              <HeaderSubtitle loading={loadingSubtitle}>{subtitle}</HeaderSubtitle>\n            )}\n          </Box>\n          {actions && (\n            <Box>\n              {actions.map(({ disabled, id, href, onClick, text }, i) => (\n                <Button\n                  component={href ? Link : \"button\"}\n                  role=\"button\"\n                  color=\"inherit\"\n                  disabled={disabled}\n                  key={id}\n                  variant={actionsVariant}\n                  size=\"small\"\n                  href={href}\n                  onClick={onClick}\n                  sx={{ mr: i != actions.length - 1 ? 1 : 0 }}\n                >\n                  {text}\n                </Button>\n              ))}\n            </Box>\n          )}\n        </Box>\n        {tabs && (\n          <Tabs\n            value={modedSelectedTab}\n            textColor=\"inherit\"\n            onChange={tabsMode === \"panel\" ? (_, index) => setSelectedTab(index) : undefined}\n          >\n            {tabs.map(({ id, label, disabled, href }) => {\n              const tabProps = { label, disabled };\n              if (tabsMode === \"panel\") {\n                return <Tab key={id} {...tabProps} />;\n              } else {\n                return <Tab key={id} {...tabProps} component={Link} href={href} />;\n              }\n            })}\n          </Tabs>\n        )}\n      </Container>\n    </Box>\n  );\n};\n","import { Color, useTheme } from \"@mui/material\";\n\ntype KeyColor = keyof Color;\n\nexport const useGetDefaultThemeColor = ({\n  lightWeight = 100,\n  darkWeight = 900,\n}: { lightWeight?: KeyColor; darkWeight?: KeyColor } = {}) => {\n  const { palette } = useTheme();\n  return palette.mode === \"light\" ? palette.grey[lightWeight] : palette.grey[darkWeight];\n};\n"],"names":["LinkBehaviour","forwardRef","props","ref","href","other","_jsx","jsx","RouterLink","to","Link","_1","MuiLink","component","TabContext","createContext","Provider","HeaderTitle","loading","children","typography","useTheme","CircularProgress","color","size","h4","fontSize","Typography","variant","role","_Fragment","Fragment","HeaderSubtitle","body1","title","loadingTitle","subtitle","loadingSubtitle","preset","actionsVariant","breadcrumbs","actions","tabs","tabsMode","navigationButton","location","useLocation","palette","defaultColor","lightWeight","darkWeight","mode","grey","useGetDefaultThemeColor","selectedTab","setSelectedTab","useContext","bgColorPresets","default","primary","main","secondary","inherit","transparent","bgColor","textColor","getContrastText","contrastText","text","modedSelectedTab","findIndex","tab","pathname","Box","bgcolor","_jsxs","Container","sx","py","display","flexDirection","justifyContent","Button","LinkComponent","startIcon","icon","mb","length","Breadcrumbs","separator","marginTop","map","id","link","underline","disabled","onClick","i","mr","Tabs","value","onChange","_","index","undefined","label","tabProps","Tab"],"mappings":"8pBAKO,MAAMA,EAAgBC,EAAUA,YAGrC,CAACC,EAAOC,KACR,MAAMC,KAAEA,KAASC,GAAUH,EAC3B,OAAOI,EAACC,IAAAC,OAAW,CAAAL,IAAKA,EAAKM,GAAIL,KAAUC,GAAS,IAGzCK,EAAOT,EAAUA,YAAiB,CAACC,EAAOS,IAC9CL,EAAAA,IAACM,EAAAA,QAAa,IAAAV,EAAeW,UAAWb,MCZpCc,EAAaC,EAAAA,cAA0D,CAClF,EACA,IAAM,OAE0BD,EAAWE,SACtC,MCAMC,EAAc,EAAGC,UAASC,eACrC,MAAMC,WAAEA,GAAeC,EAAAA,WAEvB,OAAIH,EAEAZ,MAACgB,EAAAA,SAAiBC,MAAM,UAAUC,KAAMJ,EAAWK,GAAGC,sBAAqB,kBAIvD,iBAAbP,EAEPb,MAACqB,EAAAA,QAAW,CAAAC,QAAQ,KAAKC,KAAK,UAAsB,aAAA,WACjDV,IAKAb,EAAAC,IAAAuB,EAAAC,SAAA,CAAAZ,SAAGA,GAAY,EAKXa,EAAiB,EAAGd,UAASC,eACxC,MAAMC,WAAEA,GAAeC,EAAAA,WAEvB,OAAIH,EAEAZ,MAACgB,EAAAA,SACCC,MAAM,UACNC,KAAMJ,EAAWa,MAAMP,sBACZ,qBAKO,iBAAbP,EAEPb,MAACqB,EAAAA,QAAW,CAAAC,QAAQ,QAAQC,KAAK,UAAsB,aAAA,WACpDV,IAKAb,EAAAC,IAAAuB,EAAAC,SAAA,CAAAZ,SAAGA,GAAY,iBChCe,EACrCe,QAAQ,GACRC,eACAC,WACAC,kBACAC,SAAS,UACTC,iBAAiB,WACjBC,cACAC,UACAC,OACAC,WAAW,QACXC,uBAEA,MAAMC,EAAWC,EAAAA,eACXC,QAAEA,GAAY1B,EAAAA,WACd2B,EC7B+B,GACrCC,cAAc,IACdC,aAAa,KACwC,MACrD,MAAMH,QAAEA,GAAY1B,EAAAA,WACpB,MAAwB,UAAjB0B,EAAQI,KAAmBJ,EAAQK,KAAKH,GAAeF,EAAQK,KAAKF,EAAW,EDwBjEG,IACdC,EAAaC,GF3BMC,EAAUA,WAAC1C,GE6B/B2C,EAA+C,CACnDC,QAASV,EACTW,QAASZ,EAAQY,QAAQC,KACzBC,UAAWd,EAAQc,UAAUD,KAC7BE,QAAS,UACTC,YAAa,eAETC,EAAUP,EAAenB,GAQzB2B,EAPiD,CACrDP,QAASX,EAAQmB,gBAAgBT,EAAeC,SAChDC,QAASZ,EAAQY,QAAQQ,aACzBN,UAAWd,EAAQc,UAAUM,aAC7BL,QAAS,UACTC,YAAahB,EAAQqB,KAAKT,SAEOrB,GAE7B+B,EACS,UAAb1B,EAAuBW,EAAcZ,GAAM4B,WAAWC,GAAQA,EAAInE,OAASyC,EAAS2B,WAEtF,OACElE,MAACmE,EAAAA,QAAI,CAAAC,QAASV,EAASzC,MAAO0C,EAC5B9C,SAAAwD,OAACC,EAAAA,QACC,CAAAzD,SAAA,CAAAwD,EAAAA,KAACF,EAAG,QAAC,CAAAI,GAAI,CAAEC,GAAI,EAAGC,QAAS,OAAQC,cAAe,MAAOC,eAAgB,iBAAiB9D,SAAA,CACxFwD,OAACF,EAAAA,QAAG,CAAAtD,SAAA,CACDyB,GACCtC,EAACC,IAAA2E,WACC9E,KAAMwC,EAAiBxC,KACvBoB,KAAK,QACLD,MAAM,UACN4D,cAAezE,EACf0E,UAAWxC,EAAiByC,KAC5BR,GAAI,CAAES,GAAI,GAAGnE,SAEZyB,EAAiBwB,OAGrB5B,GAAa+C,QACZjF,MAACkF,EAAAA,SACCjE,MAAM,UACNkE,UAAU,iBACC,aACXZ,GAAI,CAAEa,UAAW,GAAGvE,SAEnBqB,EAAYmD,KAAI,EAAGC,KAAIC,OAAMzB,UAC5B9D,EAAAC,IAACG,EAAI,CAEHoF,UAAU,QACVvE,MAAM,UACNnB,KAAMyF,EACNjE,QAAQ,QACRC,KAAK,OAAMV,SAEViD,GAPIwB,OAYbtF,MAACW,EAAY,CAAAC,QAASiB,EAAYhB,SAAGe,KACnCE,GAAYC,IACZ/B,EAAAA,IAAC0B,EAAc,CAACd,QAASmB,EAAkBlB,SAAAiB,OAG9CK,GACCnC,EAAAA,IAACmE,EAAG,QACD,CAAAtD,SAAAsB,EAAQkD,KAAI,EAAGI,WAAUH,KAAIxF,OAAM4F,UAAS5B,QAAQ6B,IACnD3F,EAAAC,IAAC2E,UACC,CAAArE,UAAWT,EAAOM,EAAO,SACzBmB,KAAK,SACLN,MAAM,UACNwE,SAAUA,EAEVnE,QAASW,EACTf,KAAK,QACLpB,KAAMA,EACN4F,QAASA,EACTnB,GAAI,CAAEqB,GAAID,GAAKxD,EAAQ8C,OAAS,EAAI,EAAI,GAEvCpE,SAAAiD,GAPIwB,UAadlD,GACCpC,MAAC6F,EAAAA,SACCC,MAAO/B,EACPJ,UAAU,UACVoC,SAAuB,UAAb1D,EAAuB,CAAC2D,EAAGC,IAAUhD,EAAegD,QAASC,EAASrF,SAE/EuB,EAAKiD,KAAI,EAAGC,KAAIa,QAAOV,WAAU3F,WAChC,MAAMsG,EAAW,CAAED,QAAOV,YAC1B,MAAiB,UAAbpD,EACKrC,EAAAA,IAACqG,EAAAA,QAAG,IAAcD,GAARd,GAEVtF,MAACqG,EAAAA,QAAiB,IAAAD,EAAU7F,UAAWH,EAAMN,KAAMA,GAAzCwF,EAClB,UAMX"}
+{"version":3,"file":"index.js","sources":["../../../src/link/link.tsx","../../../src/tab-provider/tab-provider.context.ts","../../../src/header/header-title.tsx","../../../src/header/header.tsx","../../../src/utils/theme.ts","../../../src/hooks/routing/routing.hooks.ts"],"sourcesContent":["import { Link as RouterLink, LinkProps as RouterLinkProps } from \"react-router-dom\";\nimport { forwardRef } from \"react\";\nimport MuiLink, { LinkProps } from \"@mui/material/Link\";\n\n/* eslint-disable react/display-name, @typescript-eslint/no-explicit-any */\nexport const LinkBehaviour = forwardRef<\n  any,\n  Omit<RouterLinkProps, \"to\"> & { href: RouterLinkProps[\"to\"] }\n>((props, ref) => {\n  const { href, ...other } = props;\n  return <RouterLink ref={ref} to={href} {...other} />;\n});\n\nexport const Link = forwardRef<any, LinkProps>((props, _1) => {\n  return <MuiLink {...(props as any)} component={LinkBehaviour} />;\n});\n","import { createContext, Dispatch, SetStateAction, useContext } from \"react\";\n\nexport const TabContext = createContext<[number, Dispatch<SetStateAction<number>>]>([\n  0,\n  () => null,\n]);\nexport const TabContextProvider = TabContext.Provider;\nexport const useTab = () => useContext(TabContext);\n","import CircularProgress from \"@mui/material/CircularProgress\";\nimport Typography from \"@mui/material/Typography\";\nimport { useTheme } from \"@mui/material/styles\";\nimport { PropsWithChildren } from \"react\";\n\nexport type HeaderTitleProps = PropsWithChildren<{ loading?: boolean }>;\n\nexport const HeaderTitle = ({ loading, children }: HeaderTitleProps) => {\n  const { typography } = useTheme();\n\n  if (loading) {\n    return (\n      <CircularProgress color=\"inherit\" size={typography.h4.fontSize} aria-label=\"title loading\" />\n    );\n  }\n\n  if (typeof children === \"string\") {\n    return (\n      <Typography variant=\"h4\" role=\"heading\" aria-level={1}>\n        {children}\n      </Typography>\n    );\n  }\n\n  return <>{children}</>;\n};\n\nexport type HeaderSubtitleProps = PropsWithChildren<{ loading?: boolean }>;\n\nexport const HeaderSubtitle = ({ loading, children }: HeaderSubtitleProps) => {\n  const { typography } = useTheme();\n\n  if (loading) {\n    return (\n      <CircularProgress\n        color=\"inherit\"\n        size={typography.body1.fontSize}\n        aria-label=\"subtitle loading\"\n      />\n    );\n  }\n\n  if (typeof children === \"string\") {\n    return (\n      <Typography variant=\"body1\" role=\"heading\" aria-level={2}>\n        {children}\n      </Typography>\n    );\n  }\n\n  return <>{children}</>;\n};\n","import { useTheme } from \"@mui/material/styles\";\nimport Breadcrumbs from \"@mui/material/Breadcrumbs\";\nimport Container from \"@mui/material/Container\";\nimport Box from \"@mui/material/Box\";\nimport Tabs from \"@mui/material/Tabs\";\nimport Tab from \"@mui/material/Tab\";\nimport Button from \"@mui/material/Button\";\nimport { Link } from \"../link\";\nimport { useGetDefaultThemeColor } from \"../utils\";\nimport { HeaderComponent, HeaderPreset, HeaderProps } from \"./header.types\";\nimport { useTab } from \"../tab-provider\";\nimport { useLocation } from \"react-router-dom\";\nimport { HeaderSubtitle, HeaderTitle } from \"./header-title\";\nimport { useRouteMatch } from \"../hooks\";\n\n/**\n * Section used to explain give basic information about the page\n * and put the main actions\n */\nexport const Header: HeaderComponent = ({\n  title = \"\",\n  loadingTitle,\n  subtitle,\n  loadingSubtitle,\n  preset = \"default\",\n  actionsVariant = \"outlined\",\n  breadcrumbs,\n  actions,\n  tabs,\n  tabsMode = \"panel\", // TODO remove tabs mode and calculate it\n  navigationButton,\n}: HeaderProps) => {\n  const paths = (tabs || []).map((tab) => tab.path).filter(Boolean) as string[];\n\n  const { palette } = useTheme();\n  const defaultColor = useGetDefaultThemeColor();\n  const [selectedTab, setSelectedTab] = useTab();\n  const routeMatch = useRouteMatch(paths);\n\n  const bgColorPresets: Record<HeaderPreset, string> = {\n    default: defaultColor,\n    primary: palette.primary.main,\n    secondary: palette.secondary.main,\n    inherit: \"inherit\",\n    transparent: \"transparent\",\n  };\n  const bgColor = bgColorPresets[preset];\n  const textColorPresets: Record<HeaderPreset, string> = {\n    default: palette.getContrastText(bgColorPresets.default),\n    primary: palette.primary.contrastText,\n    secondary: palette.secondary.contrastText,\n    inherit: \"inherit\",\n    transparent: palette.text.primary,\n  };\n  const textColor = textColorPresets[preset];\n\n  const modedSelectedTab = tabsMode === \"panel\" ? selectedTab : routeMatch?.pattern?.path;\n\n  return (\n    <Box bgcolor={bgColor} color={textColor}>\n      <Container>\n        <Box sx={{ py: 3, display: \"flex\", flexDirection: \"row\", justifyContent: \"space-between\" }}>\n          <Box>\n            {navigationButton && (\n              <Button\n                href={navigationButton.href}\n                size=\"small\"\n                color=\"inherit\"\n                LinkComponent={Link}\n                startIcon={navigationButton.icon}\n                sx={{ mb: 1 }}\n              >\n                {navigationButton.text}\n              </Button>\n            )}\n            {breadcrumbs?.length && (\n              <Breadcrumbs\n                color=\"inherit\"\n                separator=\"›\"\n                aria-label=\"breadcrumb\"\n                sx={{ marginTop: 1 }}\n              >\n                {breadcrumbs.map(({ id, link, text }) => (\n                  <Link\n                    key={id}\n                    underline=\"hover\"\n                    color=\"inherit\"\n                    href={link}\n                    variant=\"body2\"\n                    role=\"link\"\n                  >\n                    {text}\n                  </Link>\n                ))}\n              </Breadcrumbs>\n            )}\n            <HeaderTitle loading={loadingTitle}>{title}</HeaderTitle>\n            {(subtitle || loadingSubtitle) && (\n              <HeaderSubtitle loading={loadingSubtitle}>{subtitle}</HeaderSubtitle>\n            )}\n          </Box>\n          {actions && (\n            <Box>\n              {actions.map(({ disabled, id, href, onClick, text }, i) => (\n                <Button\n                  component={href ? Link : \"button\"}\n                  role=\"button\"\n                  color=\"inherit\"\n                  disabled={disabled}\n                  key={id}\n                  variant={actionsVariant}\n                  size=\"small\"\n                  href={href}\n                  onClick={onClick}\n                  sx={{ mr: i != actions.length - 1 ? 1 : 0 }}\n                >\n                  {text}\n                </Button>\n              ))}\n            </Box>\n          )}\n        </Box>\n        {tabs && (\n          <Tabs\n            value={modedSelectedTab}\n            textColor=\"inherit\"\n            onChange={tabsMode === \"panel\" ? (_, index) => setSelectedTab(index) : undefined}\n          >\n            {tabs.map(({ id, label, disabled, path, href }) => {\n              const tabProps = { label, disabled };\n              if (tabsMode === \"panel\") {\n                return <Tab key={id} {...tabProps} />;\n              } else {\n                return <Tab key={id} {...tabProps} component={Link} href={href} value={path} />;\n              }\n            })}\n          </Tabs>\n        )}\n      </Container>\n    </Box>\n  );\n};\n","import { Color, useTheme } from \"@mui/material\";\n\ntype KeyColor = keyof Color;\n\nexport const useGetDefaultThemeColor = ({\n  lightWeight = 100,\n  darkWeight = 900,\n}: { lightWeight?: KeyColor; darkWeight?: KeyColor } = {}) => {\n  const { palette } = useTheme();\n  return palette.mode === \"light\" ? palette.grey[lightWeight] : palette.grey[darkWeight];\n};\n","import { useEffect, useRef } from \"react\";\nimport { matchPath, useLocation, useNavigate } from \"react-router-dom\";\n\nexport interface NavigateWhenValueChangesOptions<T> {\n  from: T;\n  to: T;\n}\n\nexport const useNavigateWhenValueChanges = <T>(\n  path: string,\n  value: T | undefined,\n  { from, to }: NavigateWhenValueChangesOptions<T>,\n) => {\n  const prevRef = useRef<T>();\n  const navigate = useNavigate();\n\n  useEffect(() => {\n    if (prevRef.current === from && value === to) {\n      navigate(path);\n    }\n    prevRef.current = value;\n  }, [value]);\n};\n\nexport const useRouteMatch = (patterns: string[]) => {\n  const { pathname } = useLocation();\n\n  for (let i = 0; i < patterns.length; i += 1) {\n    const pattern = patterns[i];\n    const possibleMatch = matchPath(pattern, pathname);\n    if (possibleMatch !== null) {\n      return possibleMatch;\n    }\n  }\n\n  return null;\n};\n"],"names":["LinkBehaviour","forwardRef","props","ref","href","other","_jsx","jsx","RouterLink","to","Link","_1","MuiLink","component","TabContext","createContext","Provider","HeaderTitle","loading","children","typography","useTheme","CircularProgress","color","size","h4","fontSize","Typography","variant","role","_Fragment","Fragment","HeaderSubtitle","body1","title","loadingTitle","subtitle","loadingSubtitle","preset","actionsVariant","breadcrumbs","actions","tabs","tabsMode","navigationButton","paths","map","tab","path","filter","Boolean","palette","defaultColor","lightWeight","darkWeight","mode","grey","useGetDefaultThemeColor","selectedTab","setSelectedTab","useContext","routeMatch","patterns","pathname","useLocation","i","length","pattern","possibleMatch","matchPath","useRouteMatch","bgColorPresets","default","primary","main","secondary","inherit","transparent","bgColor","textColor","getContrastText","contrastText","text","modedSelectedTab","Box","bgcolor","_jsxs","Container","sx","py","display","flexDirection","justifyContent","Button","LinkComponent","startIcon","icon","mb","Breadcrumbs","separator","marginTop","id","link","underline","disabled","onClick","mr","Tabs","value","onChange","_","index","undefined","label","tabProps","Tab"],"mappings":"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"}

package/header/header.dummy.d.ts

@@ -2,9 +2,4 @@ import { HeaderBreadcrumb, HeaderAction, HeaderTab } from "./header.types";
 export declare const breadcrumbs: HeaderBreadcrumb[];
 export declare const actions: HeaderAction[];
 export declare const tabs: HeaderTab[];
-export declare const linkedTabs: {
-    href: string;
-    id: string;
-    label: string;
-    disabled?: boolean | undefined;
-}[];
+export declare const linkedTabs: HeaderTab[];

package/header/header.types.d.ts

@@ -19,6 +19,7 @@ export interface HeaderTab {
     label: string;
     disabled?: boolean;
     href?: string;
+    path?: string;
 }
 export interface HeaderNavigationButton {
     /**

package/header/index.js

@@ -1,2 +1,2 @@
-import{jsx as r,Fragment as e,jsxs as i}from"react/jsx-runtime";import{useTheme as t}from"@mui/material/styles";import a from"@mui/material/Breadcrumbs";import n from"@mui/material/Container";import o from"@mui/material/Box";import l from"@mui/material/Tabs";import m from"@mui/material/Tab";import d from"@mui/material/Button";import{Link as c,useLocation as s}from"react-router-dom";import{forwardRef as h,createContext as p,useContext as u}from"react";import f from"@mui/material/Link";import{useTheme as b}from"@mui/material";import g from"@mui/material/CircularProgress";import y from"@mui/material/Typography";const x=h(((e,i)=>{const{href:t,...a}=e;return r(c,{ref:i,to:t,...a})})),v=h(((e,i)=>r(f,{...e,component:x}))),C=p([0,()=>null]);C.Provider;const T=({loading:i,children:a})=>{const{typography:n}=t();return i?r(g,{color:"inherit",size:n.h4.fontSize,"aria-label":"title loading"}):"string"==typeof a?r(y,{variant:"h4",role:"heading","aria-level":1,children:a}):r(e,{children:a})},k=({loading:i,children:a})=>{const{typography:n}=t();return i?r(g,{color:"inherit",size:n.body1.fontSize,"aria-label":"subtitle loading"}):"string"==typeof a?r(y,{variant:"body1",role:"heading","aria-level":2,children:a}):r(e,{children:a})},z=({title:e="",loadingTitle:c,subtitle:h,loadingSubtitle:p,preset:f="default",actionsVariant:g="outlined",breadcrumbs:y,actions:x,tabs:z,tabsMode:B="panel",navigationButton:L})=>{const S=s(),{palette:j}=t(),w=(({lightWeight:r=100,darkWeight:e=900}={})=>{const{palette:i}=b();return"light"===i.mode?i.grey[r]:i.grey[e]})(),[I,P]=u(C),W={default:w,primary:j.primary.main,secondary:j.secondary.main,inherit:"inherit",transparent:"transparent"},D=W[f],M={default:j.getContrastText(W.default),primary:j.primary.contrastText,secondary:j.secondary.contrastText,inherit:"inherit",transparent:j.text.primary}[f],V="panel"===B?I:z?.findIndex((r=>r.href===S.pathname));return r(o,{bgcolor:D,color:M,children:i(n,{children:[i(o,{sx:{py:3,display:"flex",flexDirection:"row",justifyContent:"space-between"},children:[i(o,{children:[L&&r(d,{href:L.href,size:"small",color:"inherit",LinkComponent:v,startIcon:L.icon,sx:{mb:1},children:L.text}),y?.length&&r(a,{color:"inherit",separator:"›","aria-label":"breadcrumb",sx:{marginTop:1},children:y.map((({id:e,link:i,text:t})=>r(v,{underline:"hover",color:"inherit",href:i,variant:"body2",role:"link",children:t},e)))}),r(T,{loading:c,children:e}),(h||p)&&r(k,{loading:p,children:h})]}),x&&r(o,{children:x.map((({disabled:e,id:i,href:t,onClick:a,text:n},o)=>r(d,{component:t?v:"button",role:"button",color:"inherit",disabled:e,variant:g,size:"small",href:t,onClick:a,sx:{mr:o!=x.length-1?1:0},children:n},i)))})]}),z&&r(l,{value:V,textColor:"inherit",onChange:"panel"===B?(r,e)=>P(e):void 0,children:z.map((({id:e,label:i,disabled:t,href:a})=>{const n={label:i,disabled:t};return r(m,"panel"===B?{...n}:{...n,component:v,href:a},e)}))})]})})};export{z as Header,k as HeaderSubtitle,T as HeaderTitle};
+import{jsx as r,Fragment as e,jsxs as t}from"react/jsx-runtime";import{useTheme as i}from"@mui/material/styles";import a from"@mui/material/Breadcrumbs";import n from"@mui/material/Container";import o from"@mui/material/Box";import l from"@mui/material/Tabs";import m from"@mui/material/Tab";import d from"@mui/material/Button";import{Link as c,useLocation as s,matchPath as h}from"react-router-dom";import{forwardRef as p,createContext as u,useContext as f}from"react";import g from"@mui/material/Link";import{useTheme as b}from"@mui/material";import y from"@mui/material/CircularProgress";import x from"@mui/material/Typography";const v=p(((e,t)=>{const{href:i,...a}=e;return r(c,{ref:t,to:i,...a})})),C=p(((e,t)=>r(g,{...e,component:v}))),T=u([0,()=>null]);T.Provider;const k=({loading:t,children:a})=>{const{typography:n}=i();return t?r(y,{color:"inherit",size:n.h4.fontSize,"aria-label":"title loading"}):"string"==typeof a?r(x,{variant:"h4",role:"heading","aria-level":1,children:a}):r(e,{children:a})},z=({loading:t,children:a})=>{const{typography:n}=i();return t?r(y,{color:"inherit",size:n.body1.fontSize,"aria-label":"subtitle loading"}):"string"==typeof a?r(x,{variant:"body1",role:"heading","aria-level":2,children:a}):r(e,{children:a})},B=({title:e="",loadingTitle:c,subtitle:p,loadingSubtitle:u,preset:g="default",actionsVariant:y="outlined",breadcrumbs:x,actions:v,tabs:B,tabsMode:L="panel",navigationButton:S})=>{const j=(B||[]).map((r=>r.path)).filter(Boolean),{palette:w}=i(),P=(({lightWeight:r=100,darkWeight:e=900}={})=>{const{palette:t}=b();return"light"===t.mode?t.grey[r]:t.grey[e]})(),[W,D]=f(T),I=(r=>{const{pathname:e}=s();for(let t=0;t<r.length;t+=1){const i=r[t],a=h(i,e);if(null!==a)return a}return null})(j),M={default:P,primary:w.primary.main,secondary:w.secondary.main,inherit:"inherit",transparent:"transparent"},V=M[g],q={default:w.getContrastText(M.default),primary:w.primary.contrastText,secondary:w.secondary.contrastText,inherit:"inherit",transparent:w.text.primary}[g],A="panel"===L?W:I?.pattern?.path;return r(o,{bgcolor:V,color:q,children:t(n,{children:[t(o,{sx:{py:3,display:"flex",flexDirection:"row",justifyContent:"space-between"},children:[t(o,{children:[S&&r(d,{href:S.href,size:"small",color:"inherit",LinkComponent:C,startIcon:S.icon,sx:{mb:1},children:S.text}),x?.length&&r(a,{color:"inherit",separator:"›","aria-label":"breadcrumb",sx:{marginTop:1},children:x.map((({id:e,link:t,text:i})=>r(C,{underline:"hover",color:"inherit",href:t,variant:"body2",role:"link",children:i},e)))}),r(k,{loading:c,children:e}),(p||u)&&r(z,{loading:u,children:p})]}),v&&r(o,{children:v.map((({disabled:e,id:t,href:i,onClick:a,text:n},o)=>r(d,{component:i?C:"button",role:"button",color:"inherit",disabled:e,variant:y,size:"small",href:i,onClick:a,sx:{mr:o!=v.length-1?1:0},children:n},t)))})]}),B&&r(l,{value:A,textColor:"inherit",onChange:"panel"===L?(r,e)=>D(e):void 0,children:B.map((({id:e,label:t,disabled:i,path:a,href:n})=>{const o={label:t,disabled:i};return r(m,"panel"===L?{...o}:{...o,component:C,href:n,value:a},e)}))})]})})};export{B as Header,z as HeaderSubtitle,k as HeaderTitle};
 //# sourceMappingURL=index.js.map

package/header/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/link/link.tsx","../../src/tab-provider/tab-provider.context.ts","../../src/header/header-title.tsx","../../src/header/header.tsx","../../src/utils/theme.ts"],"sourcesContent":["import { Link as RouterLink, LinkProps as RouterLinkProps } from \"react-router-dom\";\nimport { forwardRef } from \"react\";\nimport MuiLink, { LinkProps } from \"@mui/material/Link\";\n\n/* eslint-disable react/display-name, @typescript-eslint/no-explicit-any */\nexport const LinkBehaviour = forwardRef<\n  any,\n  Omit<RouterLinkProps, \"to\"> & { href: RouterLinkProps[\"to\"] }\n>((props, ref) => {\n  const { href, ...other } = props;\n  return <RouterLink ref={ref} to={href} {...other} />;\n});\n\nexport const Link = forwardRef<any, LinkProps>((props, _1) => {\n  return <MuiLink {...(props as any)} component={LinkBehaviour} />;\n});\n","import { createContext, Dispatch, SetStateAction, useContext } from \"react\";\n\nexport const TabContext = createContext<[number, Dispatch<SetStateAction<number>>]>([\n  0,\n  () => null,\n]);\nexport const TabContextProvider = TabContext.Provider;\nexport const useTab = () => useContext(TabContext);\n","import CircularProgress from \"@mui/material/CircularProgress\";\nimport Typography from \"@mui/material/Typography\";\nimport { useTheme } from \"@mui/material/styles\";\nimport { PropsWithChildren } from \"react\";\n\nexport type HeaderTitleProps = PropsWithChildren<{ loading?: boolean }>;\n\nexport const HeaderTitle = ({ loading, children }: HeaderTitleProps) => {\n  const { typography } = useTheme();\n\n  if (loading) {\n    return (\n      <CircularProgress color=\"inherit\" size={typography.h4.fontSize} aria-label=\"title loading\" />\n    );\n  }\n\n  if (typeof children === \"string\") {\n    return (\n      <Typography variant=\"h4\" role=\"heading\" aria-level={1}>\n        {children}\n      </Typography>\n    );\n  }\n\n  return <>{children}</>;\n};\n\nexport type HeaderSubtitleProps = PropsWithChildren<{ loading?: boolean }>;\n\nexport const HeaderSubtitle = ({ loading, children }: HeaderSubtitleProps) => {\n  const { typography } = useTheme();\n\n  if (loading) {\n    return (\n      <CircularProgress\n        color=\"inherit\"\n        size={typography.body1.fontSize}\n        aria-label=\"subtitle loading\"\n      />\n    );\n  }\n\n  if (typeof children === \"string\") {\n    return (\n      <Typography variant=\"body1\" role=\"heading\" aria-level={2}>\n        {children}\n      </Typography>\n    );\n  }\n\n  return <>{children}</>;\n};\n","import { useTheme } from \"@mui/material/styles\";\nimport Breadcrumbs from \"@mui/material/Breadcrumbs\";\nimport Container from \"@mui/material/Container\";\nimport Box from \"@mui/material/Box\";\nimport Tabs from \"@mui/material/Tabs\";\nimport Tab from \"@mui/material/Tab\";\nimport Button from \"@mui/material/Button\";\nimport { Link } from \"../link\";\nimport { useGetDefaultThemeColor } from \"../utils\";\nimport { HeaderComponent, HeaderPreset, HeaderProps } from \"./header.types\";\nimport { useTab } from \"../tab-provider\";\nimport { useLocation } from \"react-router-dom\";\nimport { HeaderSubtitle, HeaderTitle } from \"./header-title\";\n\n/**\n * Section used to explain give basic information about the page\n * and put the main actions\n */\nexport const Header: HeaderComponent = ({\n  title = \"\",\n  loadingTitle,\n  subtitle,\n  loadingSubtitle,\n  preset = \"default\",\n  actionsVariant = \"outlined\",\n  breadcrumbs,\n  actions,\n  tabs,\n  tabsMode = \"panel\",\n  navigationButton,\n}: HeaderProps) => {\n  const location = useLocation();\n  const { palette } = useTheme();\n  const defaultColor = useGetDefaultThemeColor();\n  const [selectedTab, setSelectedTab] = useTab();\n\n  const bgColorPresets: Record<HeaderPreset, string> = {\n    default: defaultColor,\n    primary: palette.primary.main,\n    secondary: palette.secondary.main,\n    inherit: \"inherit\",\n    transparent: \"transparent\",\n  };\n  const bgColor = bgColorPresets[preset];\n  const textColorPresets: Record<HeaderPreset, string> = {\n    default: palette.getContrastText(bgColorPresets.default),\n    primary: palette.primary.contrastText,\n    secondary: palette.secondary.contrastText,\n    inherit: \"inherit\",\n    transparent: palette.text.primary,\n  };\n  const textColor = textColorPresets[preset];\n\n  const modedSelectedTab =\n    tabsMode === \"panel\" ? selectedTab : tabs?.findIndex((tab) => tab.href === location.pathname);\n\n  return (\n    <Box bgcolor={bgColor} color={textColor}>\n      <Container>\n        <Box sx={{ py: 3, display: \"flex\", flexDirection: \"row\", justifyContent: \"space-between\" }}>\n          <Box>\n            {navigationButton && (\n              <Button\n                href={navigationButton.href}\n                size=\"small\"\n                color=\"inherit\"\n                LinkComponent={Link}\n                startIcon={navigationButton.icon}\n                sx={{ mb: 1 }}\n              >\n                {navigationButton.text}\n              </Button>\n            )}\n            {breadcrumbs?.length && (\n              <Breadcrumbs\n                color=\"inherit\"\n                separator=\"›\"\n                aria-label=\"breadcrumb\"\n                sx={{ marginTop: 1 }}\n              >\n                {breadcrumbs.map(({ id, link, text }) => (\n                  <Link\n                    key={id}\n                    underline=\"hover\"\n                    color=\"inherit\"\n                    href={link}\n                    variant=\"body2\"\n                    role=\"link\"\n                  >\n                    {text}\n                  </Link>\n                ))}\n              </Breadcrumbs>\n            )}\n            <HeaderTitle loading={loadingTitle}>{title}</HeaderTitle>\n            {(subtitle || loadingSubtitle) && (\n              <HeaderSubtitle loading={loadingSubtitle}>{subtitle}</HeaderSubtitle>\n            )}\n          </Box>\n          {actions && (\n            <Box>\n              {actions.map(({ disabled, id, href, onClick, text }, i) => (\n                <Button\n                  component={href ? Link : \"button\"}\n                  role=\"button\"\n                  color=\"inherit\"\n                  disabled={disabled}\n                  key={id}\n                  variant={actionsVariant}\n                  size=\"small\"\n                  href={href}\n                  onClick={onClick}\n                  sx={{ mr: i != actions.length - 1 ? 1 : 0 }}\n                >\n                  {text}\n                </Button>\n              ))}\n            </Box>\n          )}\n        </Box>\n        {tabs && (\n          <Tabs\n            value={modedSelectedTab}\n            textColor=\"inherit\"\n            onChange={tabsMode === \"panel\" ? (_, index) => setSelectedTab(index) : undefined}\n          >\n            {tabs.map(({ id, label, disabled, href }) => {\n              const tabProps = { label, disabled };\n              if (tabsMode === \"panel\") {\n                return <Tab key={id} {...tabProps} />;\n              } else {\n                return <Tab key={id} {...tabProps} component={Link} href={href} />;\n              }\n            })}\n          </Tabs>\n        )}\n      </Container>\n    </Box>\n  );\n};\n","import { Color, useTheme } from \"@mui/material\";\n\ntype KeyColor = keyof Color;\n\nexport const useGetDefaultThemeColor = ({\n  lightWeight = 100,\n  darkWeight = 900,\n}: { lightWeight?: KeyColor; darkWeight?: KeyColor } = {}) => {\n  const { palette } = useTheme();\n  return palette.mode === \"light\" ? palette.grey[lightWeight] : palette.grey[darkWeight];\n};\n"],"names":["LinkBehaviour","forwardRef","props","ref","href","other","_jsx","RouterLink","to","Link","_1","MuiLink","component","TabContext","createContext","Provider","HeaderTitle","loading","children","typography","useTheme","CircularProgress","color","size","h4","fontSize","Typography","variant","role","_Fragment","HeaderSubtitle","body1","Header","title","loadingTitle","subtitle","loadingSubtitle","preset","actionsVariant","breadcrumbs","actions","tabs","tabsMode","navigationButton","location","useLocation","palette","defaultColor","lightWeight","darkWeight","mode","grey","useGetDefaultThemeColor","selectedTab","setSelectedTab","useContext","bgColorPresets","default","primary","main","secondary","inherit","transparent","bgColor","textColor","getContrastText","contrastText","text","modedSelectedTab","findIndex","tab","pathname","Box","bgcolor","_jsxs","Container","sx","py","display","flexDirection","justifyContent","Button","LinkComponent","startIcon","icon","mb","length","Breadcrumbs","separator","marginTop","map","id","link","underline","disabled","onClick","i","mr","Tabs","value","onChange","_","index","undefined","label","tabProps","Tab"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../src/link/link.tsx","../../src/tab-provider/tab-provider.context.ts","../../src/header/header-title.tsx","../../src/header/header.tsx","../../src/utils/theme.ts","../../src/hooks/routing/routing.hooks.ts"],"sourcesContent":["import { Link as RouterLink, LinkProps as RouterLinkProps } from \"react-router-dom\";\nimport { forwardRef } from \"react\";\nimport MuiLink, { LinkProps } from \"@mui/material/Link\";\n\n/* eslint-disable react/display-name, @typescript-eslint/no-explicit-any */\nexport const LinkBehaviour = forwardRef<\n  any,\n  Omit<RouterLinkProps, \"to\"> & { href: RouterLinkProps[\"to\"] }\n>((props, ref) => {\n  const { href, ...other } = props;\n  return <RouterLink ref={ref} to={href} {...other} />;\n});\n\nexport const Link = forwardRef<any, LinkProps>((props, _1) => {\n  return <MuiLink {...(props as any)} component={LinkBehaviour} />;\n});\n","import { createContext, Dispatch, SetStateAction, useContext } from \"react\";\n\nexport const TabContext = createContext<[number, Dispatch<SetStateAction<number>>]>([\n  0,\n  () => null,\n]);\nexport const TabContextProvider = TabContext.Provider;\nexport const useTab = () => useContext(TabContext);\n","import CircularProgress from \"@mui/material/CircularProgress\";\nimport Typography from \"@mui/material/Typography\";\nimport { useTheme } from \"@mui/material/styles\";\nimport { PropsWithChildren } from \"react\";\n\nexport type HeaderTitleProps = PropsWithChildren<{ loading?: boolean }>;\n\nexport const HeaderTitle = ({ loading, children }: HeaderTitleProps) => {\n  const { typography } = useTheme();\n\n  if (loading) {\n    return (\n      <CircularProgress color=\"inherit\" size={typography.h4.fontSize} aria-label=\"title loading\" />\n    );\n  }\n\n  if (typeof children === \"string\") {\n    return (\n      <Typography variant=\"h4\" role=\"heading\" aria-level={1}>\n        {children}\n      </Typography>\n    );\n  }\n\n  return <>{children}</>;\n};\n\nexport type HeaderSubtitleProps = PropsWithChildren<{ loading?: boolean }>;\n\nexport const HeaderSubtitle = ({ loading, children }: HeaderSubtitleProps) => {\n  const { typography } = useTheme();\n\n  if (loading) {\n    return (\n      <CircularProgress\n        color=\"inherit\"\n        size={typography.body1.fontSize}\n        aria-label=\"subtitle loading\"\n      />\n    );\n  }\n\n  if (typeof children === \"string\") {\n    return (\n      <Typography variant=\"body1\" role=\"heading\" aria-level={2}>\n        {children}\n      </Typography>\n    );\n  }\n\n  return <>{children}</>;\n};\n","import { useTheme } from \"@mui/material/styles\";\nimport Breadcrumbs from \"@mui/material/Breadcrumbs\";\nimport Container from \"@mui/material/Container\";\nimport Box from \"@mui/material/Box\";\nimport Tabs from \"@mui/material/Tabs\";\nimport Tab from \"@mui/material/Tab\";\nimport Button from \"@mui/material/Button\";\nimport { Link } from \"../link\";\nimport { useGetDefaultThemeColor } from \"../utils\";\nimport { HeaderComponent, HeaderPreset, HeaderProps } from \"./header.types\";\nimport { useTab } from \"../tab-provider\";\nimport { useLocation } from \"react-router-dom\";\nimport { HeaderSubtitle, HeaderTitle } from \"./header-title\";\nimport { useRouteMatch } from \"../hooks\";\n\n/**\n * Section used to explain give basic information about the page\n * and put the main actions\n */\nexport const Header: HeaderComponent = ({\n  title = \"\",\n  loadingTitle,\n  subtitle,\n  loadingSubtitle,\n  preset = \"default\",\n  actionsVariant = \"outlined\",\n  breadcrumbs,\n  actions,\n  tabs,\n  tabsMode = \"panel\", // TODO remove tabs mode and calculate it\n  navigationButton,\n}: HeaderProps) => {\n  const paths = (tabs || []).map((tab) => tab.path).filter(Boolean) as string[];\n\n  const { palette } = useTheme();\n  const defaultColor = useGetDefaultThemeColor();\n  const [selectedTab, setSelectedTab] = useTab();\n  const routeMatch = useRouteMatch(paths);\n\n  const bgColorPresets: Record<HeaderPreset, string> = {\n    default: defaultColor,\n    primary: palette.primary.main,\n    secondary: palette.secondary.main,\n    inherit: \"inherit\",\n    transparent: \"transparent\",\n  };\n  const bgColor = bgColorPresets[preset];\n  const textColorPresets: Record<HeaderPreset, string> = {\n    default: palette.getContrastText(bgColorPresets.default),\n    primary: palette.primary.contrastText,\n    secondary: palette.secondary.contrastText,\n    inherit: \"inherit\",\n    transparent: palette.text.primary,\n  };\n  const textColor = textColorPresets[preset];\n\n  const modedSelectedTab = tabsMode === \"panel\" ? selectedTab : routeMatch?.pattern?.path;\n\n  return (\n    <Box bgcolor={bgColor} color={textColor}>\n      <Container>\n        <Box sx={{ py: 3, display: \"flex\", flexDirection: \"row\", justifyContent: \"space-between\" }}>\n          <Box>\n            {navigationButton && (\n              <Button\n                href={navigationButton.href}\n                size=\"small\"\n                color=\"inherit\"\n                LinkComponent={Link}\n                startIcon={navigationButton.icon}\n                sx={{ mb: 1 }}\n              >\n                {navigationButton.text}\n              </Button>\n            )}\n            {breadcrumbs?.length && (\n              <Breadcrumbs\n                color=\"inherit\"\n                separator=\"›\"\n                aria-label=\"breadcrumb\"\n                sx={{ marginTop: 1 }}\n              >\n                {breadcrumbs.map(({ id, link, text }) => (\n                  <Link\n                    key={id}\n                    underline=\"hover\"\n                    color=\"inherit\"\n                    href={link}\n                    variant=\"body2\"\n                    role=\"link\"\n                  >\n                    {text}\n                  </Link>\n                ))}\n              </Breadcrumbs>\n            )}\n            <HeaderTitle loading={loadingTitle}>{title}</HeaderTitle>\n            {(subtitle || loadingSubtitle) && (\n              <HeaderSubtitle loading={loadingSubtitle}>{subtitle}</HeaderSubtitle>\n            )}\n          </Box>\n          {actions && (\n            <Box>\n              {actions.map(({ disabled, id, href, onClick, text }, i) => (\n                <Button\n                  component={href ? Link : \"button\"}\n                  role=\"button\"\n                  color=\"inherit\"\n                  disabled={disabled}\n                  key={id}\n                  variant={actionsVariant}\n                  size=\"small\"\n                  href={href}\n                  onClick={onClick}\n                  sx={{ mr: i != actions.length - 1 ? 1 : 0 }}\n                >\n                  {text}\n                </Button>\n              ))}\n            </Box>\n          )}\n        </Box>\n        {tabs && (\n          <Tabs\n            value={modedSelectedTab}\n            textColor=\"inherit\"\n            onChange={tabsMode === \"panel\" ? (_, index) => setSelectedTab(index) : undefined}\n          >\n            {tabs.map(({ id, label, disabled, path, href }) => {\n              const tabProps = { label, disabled };\n              if (tabsMode === \"panel\") {\n                return <Tab key={id} {...tabProps} />;\n              } else {\n                return <Tab key={id} {...tabProps} component={Link} href={href} value={path} />;\n              }\n            })}\n          </Tabs>\n        )}\n      </Container>\n    </Box>\n  );\n};\n","import { Color, useTheme } from \"@mui/material\";\n\ntype KeyColor = keyof Color;\n\nexport const useGetDefaultThemeColor = ({\n  lightWeight = 100,\n  darkWeight = 900,\n}: { lightWeight?: KeyColor; darkWeight?: KeyColor } = {}) => {\n  const { palette } = useTheme();\n  return palette.mode === \"light\" ? palette.grey[lightWeight] : palette.grey[darkWeight];\n};\n","import { useEffect, useRef } from \"react\";\nimport { matchPath, useLocation, useNavigate } from \"react-router-dom\";\n\nexport interface NavigateWhenValueChangesOptions<T> {\n  from: T;\n  to: T;\n}\n\nexport const useNavigateWhenValueChanges = <T>(\n  path: string,\n  value: T | undefined,\n  { from, to }: NavigateWhenValueChangesOptions<T>,\n) => {\n  const prevRef = useRef<T>();\n  const navigate = useNavigate();\n\n  useEffect(() => {\n    if (prevRef.current === from && value === to) {\n      navigate(path);\n    }\n    prevRef.current = value;\n  }, [value]);\n};\n\nexport const useRouteMatch = (patterns: string[]) => {\n  const { pathname } = useLocation();\n\n  for (let i = 0; i < patterns.length; i += 1) {\n    const pattern = patterns[i];\n    const possibleMatch = matchPath(pattern, pathname);\n    if (possibleMatch !== null) {\n      return possibleMatch;\n    }\n  }\n\n  return null;\n};\n"],"names":["LinkBehaviour","forwardRef","props","ref","href","other","_jsx","RouterLink","to","Link","_1","MuiLink","component","TabContext","createContext","Provider","HeaderTitle","loading","children","typography","useTheme","CircularProgress","color","size","h4","fontSize","Typography","variant","role","_Fragment","HeaderSubtitle","body1","Header","title","loadingTitle","subtitle","loadingSubtitle","preset","actionsVariant","breadcrumbs","actions","tabs","tabsMode","navigationButton","paths","map","tab","path","filter","Boolean","palette","defaultColor","lightWeight","darkWeight","mode","grey","useGetDefaultThemeColor","selectedTab","setSelectedTab","useContext","routeMatch","patterns","pathname","useLocation","i","length","pattern","possibleMatch","matchPath","useRouteMatch","bgColorPresets","default","primary","main","secondary","inherit","transparent","bgColor","textColor","getContrastText","contrastText","text","modedSelectedTab","Box","bgcolor","_jsxs","Container","sx","py","display","flexDirection","justifyContent","Button","LinkComponent","startIcon","icon","mb","Breadcrumbs","separator","marginTop","id","link","underline","disabled","onClick","mr","Tabs","value","onChange","_","index","undefined","label","tabProps","Tab"],"mappings":"unBAKO,MAAMA,EAAgBC,GAG3B,CAACC,EAAOC,KACR,MAAMC,KAAEA,KAASC,GAAUH,EAC3B,OAAOI,EAACC,EAAW,CAAAJ,IAAKA,EAAKK,GAAIJ,KAAUC,GAAS,IAGzCI,EAAOR,GAA2B,CAACC,EAAOQ,IAC9CJ,EAACK,EAAa,IAAAT,EAAeU,UAAWZ,MCZpCa,EAAaC,EAA0D,CAClF,EACA,IAAM,OAE0BD,EAAWE,SACtC,MCAMC,EAAc,EAAGC,UAASC,eACrC,MAAMC,WAAEA,GAAeC,IAEvB,OAAIH,EAEAX,EAACe,GAAiBC,MAAM,UAAUC,KAAMJ,EAAWK,GAAGC,sBAAqB,kBAIvD,iBAAbP,EAEPZ,EAACoB,EAAW,CAAAC,QAAQ,KAAKC,KAAK,UAAsB,aAAA,WACjDV,IAKAZ,EAAAuB,EAAA,CAAAX,SAAGA,GAAY,EAKXY,EAAiB,EAAGb,UAASC,eACxC,MAAMC,WAAEA,GAAeC,IAEvB,OAAIH,EAEAX,EAACe,GACCC,MAAM,UACNC,KAAMJ,EAAWY,MAAMN,sBACZ,qBAKO,iBAAbP,EAEPZ,EAACoB,EAAW,CAAAC,QAAQ,QAAQC,KAAK,UAAsB,aAAA,WACpDV,IAKAZ,EAAAuB,EAAA,CAAAX,SAAGA,GAAY,EC/BXc,EAA0B,EACrCC,QAAQ,GACRC,eACAC,WACAC,kBACAC,SAAS,UACTC,iBAAiB,WACjBC,cACAC,UACAC,OACAC,WAAW,QACXC,uBAEA,MAAMC,GAASH,GAAQ,IAAII,KAAKC,GAAQA,EAAIC,OAAMC,OAAOC,UAEnDC,QAAEA,GAAY9B,IACd+B,EC/B+B,GACrCC,cAAc,IACdC,aAAa,KACwC,MACrD,MAAMH,QAAEA,GAAY9B,IACpB,MAAwB,UAAjB8B,EAAQI,KAAmBJ,EAAQK,KAAKH,GAAeF,EAAQK,KAAKF,EAAW,ED0BjEG,IACdC,EAAaC,GF7BMC,EAAW9C,GE8B/B+C,EEbqB,CAACC,IAC5B,MAAMC,SAAEA,GAAaC,IAErB,IAAK,IAAIC,EAAI,EAAGA,EAAIH,EAASI,OAAQD,GAAK,EAAG,CAC3C,MAAME,EAAUL,EAASG,GACnBG,EAAgBC,EAAUF,EAASJ,GACzC,GAAsB,OAAlBK,EACF,OAAOA,CAEV,CAED,OAAO,IAAI,EFEQE,CAAczB,GAE3B0B,EAA+C,CACnDC,QAASpB,EACTqB,QAAStB,EAAQsB,QAAQC,KACzBC,UAAWxB,EAAQwB,UAAUD,KAC7BE,QAAS,UACTC,YAAa,eAETC,EAAUP,EAAejC,GAQzByC,EAPiD,CACrDP,QAASrB,EAAQ6B,gBAAgBT,EAAeC,SAChDC,QAAStB,EAAQsB,QAAQQ,aACzBN,UAAWxB,EAAQwB,UAAUM,aAC7BL,QAAS,UACTC,YAAa1B,EAAQ+B,KAAKT,SAEOnC,GAE7B6C,EAAgC,UAAbxC,EAAuBe,EAAcG,GAAYM,SAASnB,KAEnF,OACEzC,EAAC6E,EAAI,CAAAC,QAASP,EAASvD,MAAOwD,EAC5B5D,SAAAmE,EAACC,EACC,CAAApE,SAAA,CAAAmE,EAACF,EAAI,CAAAI,GAAI,CAAEC,GAAI,EAAGC,QAAS,OAAQC,cAAe,MAAOC,eAAgB,iBAAiBzE,SAAA,CACxFmE,EAACF,EAAG,CAAAjE,SAAA,CACDyB,GACCrC,EAACsF,GACCxF,KAAMuC,EAAiBvC,KACvBmB,KAAK,QACLD,MAAM,UACNuE,cAAepF,EACfqF,UAAWnD,EAAiBoD,KAC5BR,GAAI,CAAES,GAAI,GAAG9E,SAEZyB,EAAiBsC,OAGrB1C,GAAa0B,QACZ3D,EAAC2F,EAAW,CACV3E,MAAM,UACN4E,UAAU,IAAG,aACF,aACXX,GAAI,CAAEY,UAAW,GAEhBjF,SAAAqB,EAAYM,KAAI,EAAGuD,KAAIC,OAAMpB,UAC5B3E,EAACG,EAEC,CAAA6F,UAAU,QACVhF,MAAM,UACNlB,KAAMiG,EACN1E,QAAQ,QACRC,KAAK,OAEJV,SAAA+D,GAPImB,OAYb9F,EAACU,EAAW,CAACC,QAASiB,EAAehB,SAAAe,KACnCE,GAAYC,IACZ9B,EAACwB,EAAe,CAAAb,QAASmB,EAAelB,SAAGiB,OAG9CK,GACClC,EAAC6E,EAAG,CAAAjE,SACDsB,EAAQK,KAAI,EAAG0D,WAAUH,KAAIhG,OAAMoG,UAASvB,QAAQjB,IACnD1D,EAACsF,GACChF,UAAWR,EAAOK,EAAO,SACzBmB,KAAK,SACLN,MAAM,UACNiF,SAAUA,EAEV5E,QAASW,EACTf,KAAK,QACLnB,KAAMA,EACNoG,QAASA,EACTjB,GAAI,CAAEkB,GAAIzC,GAAKxB,EAAQyB,OAAS,EAAI,EAAI,GAEvC/C,SAAA+D,GAPImB,UAad3D,GACCnC,EAACoG,EACC,CAAAC,MAAOzB,EACPJ,UAAU,UACV8B,SAAuB,UAAblE,EAAuB,CAACmE,EAAGC,IAAUpD,EAAeoD,QAASC,WAEtEtE,EAAKI,KAAI,EAAGuD,KAAIY,QAAOT,WAAUxD,OAAM3C,WACtC,MAAM6G,EAAW,CAAED,QAAOT,YAC1B,OACSjG,EAAC4G,EADO,UAAbxE,EACS,IAAcuE,GAEd,IAAcA,EAAUrG,UAAWH,EAAML,KAAMA,EAAMuG,MAAO5D,GAFtDqD,EAGlB,UAMX"}

package/hooks/cjs/index.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),r=require("react-router-dom");exports.useNavigateWhenValueChanges=(t,u,{from:s,to:a})=>{const o=e.useRef(),c=r.useNavigate();e.useEffect((()=>{o.current===s&&u===a&&c(t),o.current=u}),[u])};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("react-router-dom");exports.useNavigateWhenValueChanges=(r,u,{from:a,to:o})=>{const s=e.useRef(),n=t.useNavigate();e.useEffect((()=>{s.current===a&&u===o&&n(r),s.current=u}),[u])},exports.useRouteMatch=e=>{const{pathname:r}=t.useLocation();for(let u=0;u<e.length;u+=1){const a=e[u],o=t.matchPath(a,r);if(null!==o)return o}return null};
 //# sourceMappingURL=index.js.map

package/hooks/cjs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/hooks/routing/routing.hooks.ts"],"sourcesContent":["import { useEffect, useRef } from \"react\";\nimport { useNavigate } from \"react-router-dom\";\n\nexport interface NavigateWhenValueChangesOptions<T> {\n  from: T;\n  to: T;\n}\n\nexport const useNavigateWhenValueChanges = <T>(\n  path: string,\n  value: T | undefined,\n  { from, to }: NavigateWhenValueChangesOptions<T>,\n) => {\n  const prevRef = useRef<T>();\n  const navigate = useNavigate();\n\n  useEffect(() => {\n    if (prevRef.current === from && value === to) {\n      navigate(path);\n    }\n    prevRef.current = value;\n  }, [value]);\n};\n"],"names":["path","value","from","to","prevRef","useRef","navigate","useNavigate","useEffect","current"],"mappings":"6JAQ2C,CACzCA,EACAC,GACEC,OAAMC,SAER,MAAMC,EAAUC,EAAAA,SACVC,EAAWC,EAAAA,cAEjBC,EAAAA,WAAU,KACJJ,EAAQK,UAAYP,GAAQD,IAAUE,GACxCG,EAASN,GAEXI,EAAQK,QAAUR,CAAK,GACtB,CAACA,GAAO"}
+{"version":3,"file":"index.js","sources":["../../../src/hooks/routing/routing.hooks.ts"],"sourcesContent":["import { useEffect, useRef } from \"react\";\nimport { matchPath, useLocation, useNavigate } from \"react-router-dom\";\n\nexport interface NavigateWhenValueChangesOptions<T> {\n  from: T;\n  to: T;\n}\n\nexport const useNavigateWhenValueChanges = <T>(\n  path: string,\n  value: T | undefined,\n  { from, to }: NavigateWhenValueChangesOptions<T>,\n) => {\n  const prevRef = useRef<T>();\n  const navigate = useNavigate();\n\n  useEffect(() => {\n    if (prevRef.current === from && value === to) {\n      navigate(path);\n    }\n    prevRef.current = value;\n  }, [value]);\n};\n\nexport const useRouteMatch = (patterns: string[]) => {\n  const { pathname } = useLocation();\n\n  for (let i = 0; i < patterns.length; i += 1) {\n    const pattern = patterns[i];\n    const possibleMatch = matchPath(pattern, pathname);\n    if (possibleMatch !== null) {\n      return possibleMatch;\n    }\n  }\n\n  return null;\n};\n"],"names":["path","value","from","to","prevRef","useRef","navigate","useNavigate","useEffect","current","patterns","pathname","useLocation","i","length","pattern","possibleMatch","matchPath"],"mappings":"6JAQ2C,CACzCA,EACAC,GACEC,OAAMC,SAER,MAAMC,EAAUC,EAAAA,SACVC,EAAWC,EAAAA,cAEjBC,EAAAA,WAAU,KACJJ,EAAQK,UAAYP,GAAQD,IAAUE,GACxCG,EAASN,GAEXI,EAAQK,QAAUR,CAAK,GACtB,CAACA,GAAO,wBAGiBS,IAC5B,MAAMC,SAAEA,GAAaC,EAAAA,cAErB,IAAK,IAAIC,EAAI,EAAGA,EAAIH,EAASI,OAAQD,GAAK,EAAG,CAC3C,MAAME,EAAUL,EAASG,GACnBG,EAAgBC,EAAAA,UAAUF,EAASJ,GACzC,GAAsB,OAAlBK,EACF,OAAOA,CAEV,CAED,OAAO,IAAI"}

package/hooks/index.js

@@ -1,2 +1,2 @@
-import{useRef as r,useEffect as o}from"react";import{useNavigate as t}from"react-router-dom";const c=(c,e,{from:m,to:n})=>{const f=r(),p=t();o((()=>{f.current===m&&e===n&&p(c),f.current=e}),[e])};export{c as useNavigateWhenValueChanges};
+import{useRef as r,useEffect as t}from"react";import{useNavigate as o,useLocation as n,matchPath as e}from"react-router-dom";const c=(n,e,{from:c,to:m})=>{const u=r(),l=o();t((()=>{u.current===c&&e===m&&l(n),u.current=e}),[e])},m=r=>{const{pathname:t}=n();for(let o=0;o<r.length;o+=1){const n=r[o],c=e(n,t);if(null!==c)return c}return null};export{c as useNavigateWhenValueChanges,m as useRouteMatch};
 //# sourceMappingURL=index.js.map

package/hooks/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/hooks/routing/routing.hooks.ts"],"sourcesContent":["import { useEffect, useRef } from \"react\";\nimport { useNavigate } from \"react-router-dom\";\n\nexport interface NavigateWhenValueChangesOptions<T> {\n  from: T;\n  to: T;\n}\n\nexport const useNavigateWhenValueChanges = <T>(\n  path: string,\n  value: T | undefined,\n  { from, to }: NavigateWhenValueChangesOptions<T>,\n) => {\n  const prevRef = useRef<T>();\n  const navigate = useNavigate();\n\n  useEffect(() => {\n    if (prevRef.current === from && value === to) {\n      navigate(path);\n    }\n    prevRef.current = value;\n  }, [value]);\n};\n"],"names":["useNavigateWhenValueChanges","path","value","from","to","prevRef","useRef","navigate","useNavigate","useEffect","current"],"mappings":"6FAQO,MAAMA,EAA8B,CACzCC,EACAC,GACEC,OAAMC,SAER,MAAMC,EAAUC,IACVC,EAAWC,IAEjBC,GAAU,KACJJ,EAAQK,UAAYP,GAAQD,IAAUE,GACxCG,EAASN,GAEXI,EAAQK,QAAUR,CAAK,GACtB,CAACA,GAAO"}
+{"version":3,"file":"index.js","sources":["../../src/hooks/routing/routing.hooks.ts"],"sourcesContent":["import { useEffect, useRef } from \"react\";\nimport { matchPath, useLocation, useNavigate } from \"react-router-dom\";\n\nexport interface NavigateWhenValueChangesOptions<T> {\n  from: T;\n  to: T;\n}\n\nexport const useNavigateWhenValueChanges = <T>(\n  path: string,\n  value: T | undefined,\n  { from, to }: NavigateWhenValueChangesOptions<T>,\n) => {\n  const prevRef = useRef<T>();\n  const navigate = useNavigate();\n\n  useEffect(() => {\n    if (prevRef.current === from && value === to) {\n      navigate(path);\n    }\n    prevRef.current = value;\n  }, [value]);\n};\n\nexport const useRouteMatch = (patterns: string[]) => {\n  const { pathname } = useLocation();\n\n  for (let i = 0; i < patterns.length; i += 1) {\n    const pattern = patterns[i];\n    const possibleMatch = matchPath(pattern, pathname);\n    if (possibleMatch !== null) {\n      return possibleMatch;\n    }\n  }\n\n  return null;\n};\n"],"names":["useNavigateWhenValueChanges","path","value","from","to","prevRef","useRef","navigate","useNavigate","useEffect","current","useRouteMatch","patterns","pathname","useLocation","i","length","pattern","possibleMatch","matchPath"],"mappings":"6HAQO,MAAMA,EAA8B,CACzCC,EACAC,GACEC,OAAMC,SAER,MAAMC,EAAUC,IACVC,EAAWC,IAEjBC,GAAU,KACJJ,EAAQK,UAAYP,GAAQD,IAAUE,GACxCG,EAASN,GAEXI,EAAQK,QAAUR,CAAK,GACtB,CAACA,GAAO,EAGAS,EAAiBC,IAC5B,MAAMC,SAAEA,GAAaC,IAErB,IAAK,IAAIC,EAAI,EAAGA,EAAIH,EAASI,OAAQD,GAAK,EAAG,CAC3C,MAAME,EAAUL,EAASG,GACnBG,EAAgBC,EAAUF,EAASJ,GACzC,GAAsB,OAAlBK,EACF,OAAOA,CAEV,CAED,OAAO,IAAI"}

package/hooks/routing/routing.hooks.d.ts

@@ -3,3 +3,4 @@ export interface NavigateWhenValueChangesOptions<T> {
     to: T;
 }
 export declare const useNavigateWhenValueChanges: <T>(path: string, value: T | undefined, { from, to }: NavigateWhenValueChangesOptions<T>) => void;
+export declare const useRouteMatch: (patterns: string[]) => import("react-router-dom").PathMatch<string> | null;