@skodaflow/web-library 7.14.0 → 7.15.0

package/cjs/{layout/PageLayout → components/pageLayout}/PageLayout.d.ts

@@ -1,18 +1,12 @@
-import React from 'react';
-export type PageLayoutProps = {
-    /**
-     * Content of an page
-     * @requires
-     */
-    children: React.ReactNode;
+import React, { ElementType } from 'react';
+import { BoxProps } from '@mui/material';
+export interface PageLayoutProps extends BoxProps<ElementType> {
     /**
      * React node that renders layout header
-     * @default undefined
      */
     header?: React.ReactNode;
     /**
      * React node that renders layout footer
-     * @default undefined
      */
     footer?: React.ReactNode;
     /**
@@ -24,7 +18,7 @@ export type PageLayoutProps = {
      */
     headerPosition?: 'static' | 'fixed' | 'slide';
     /**
-     * Specifies threshold that is used to hide header
+     * Specifies threshold that is used to hide header for the headerPosition="slide"
      * @default 250
      */
     headerSlideThreshold?: number;
@@ -33,5 +27,25 @@ export type PageLayoutProps = {
      * @default false
      */
     wrapContent?: boolean;
-};
+    /**
+     * Properties applied to header wrapper
+     */
+    headerProps?: BoxProps<ElementType>;
+    /**
+     * Properties applied to header wrapper
+     */
+    headerContainerProps?: BoxProps<ElementType>;
+    /**
+     * Properties applied to root header wrapper
+     */
+    headerWrapperProps?: BoxProps<ElementType>;
+    /**
+     * Properties applied to page content wrapper
+     */
+    contentProps?: BoxProps<ElementType>;
+    /**
+     * Properties applied to footer wrapper
+     */
+    footerProps?: BoxProps<ElementType>;
+}
 export declare const PageLayout: React.FC<PageLayoutProps>;

package/cjs/components/pageLayout/PageLayout.js

@@ -0,0 +1,2 @@
+"use strict";var e=require("tslib"),t=require("react/jsx-runtime"),r=require("react"),a=require("@mui/material");const s=r.forwardRef(((s,i)=>{var{children:o,sx:n,header:d,footer:c,headerPosition:l="static",headerSlideThreshold:h=250,wrapContent:p=!1,headerProps:x,headerContainerProps:g,headerWrapperProps:u,contentProps:j,footerProps:m}=s,b=e.__rest(s,["children","sx","header","footer","headerPosition","headerSlideThreshold","wrapContent","headerProps","headerContainerProps","headerWrapperProps","contentProps","footerProps"]);const f=a.useTheme(),P=null!=u?u:{},{sx:O}=P,B=e.__rest(P,["sx"]),w=null!=g?g:{},{sx:C,className:y}=w,v=e.__rest(w,["sx","className"]),[S,_]=r.useState(parseFloat(String(f.mixins.toolbar.minHeight))),L=r.useCallback((e=>{"static"!==l&&e&&new ResizeObserver((()=>{_(e.offsetHeight)})).observe(e)}),["static"!==l]),T=a.useScrollTrigger({target:window,threshold:h});return t.jsxs(a.Box,Object.assign({sx:Object.assign({position:"relative",minHeight:"100vh",backgroundColor:"surface.primary",display:"grid",gridTemplateRows:[d&&"max-content","auto",c&&"max-content"].filter(Boolean).join(" ")},n),"data-testid":"PageLayout",ref:i},b,{children:[d&&t.jsx(a.Box,Object.assign({sx:Object.assign(Object.assign({},"static"!==l&&S&&{height:S}),O),"data-testid":"PageLayout.headerWrapper"},B,{children:t.jsx(a.Box,Object.assign({},"slide"===l&&{component:a.Slide,appear:!1,direction:"down",in:!T},{sx:Object.assign(Object.assign({},"static"!==l&&{position:"fixed",top:"0",left:"0",right:"0",zIndex:f.zIndex.appBar}),C),className:["static"!==l?"mui-fixed":"",y].filter(Boolean).join(", ")},v,{children:t.jsx(a.Box,Object.assign({ref:L,"data-testid":"PageLayout.header"},x,{children:d}))}))})),t.jsx(a.Box,Object.assign({},p&&{component:a.Container,maxWidth:"xl"},{"data-testid":"Container"},j,{children:o})),c&&t.jsx(a.Box,Object.assign({"data-testid":"PageLayout.footer"},m,{children:c}))]}))}));exports.PageLayout=s;
+//# sourceMappingURL=PageLayout.js.map

package/cjs/components/pageLayout/PageLayout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PageLayout.js","sources":["../../../../../src/components/pageLayout/PageLayout.tsx"],"sourcesContent":["import React, { useCallback, useState, ElementType, forwardRef } from 'react';\nimport { Box, BoxProps, useScrollTrigger, Slide, Container, useTheme } from '@mui/material';\n\nexport interface PageLayoutProps extends BoxProps<ElementType> {\n  /**\n   * React node that renders layout header\n   */\n  header?: React.ReactNode;\n  /**\n   * React node that renders layout footer\n   */\n  footer?: React.ReactNode;\n  /**\n   * Specifies position of header\n   * - static: header is fixed on top of the content\n   * - fixed: header is visible while user scrolls the content\n   * - slide: header is visible until user scrolls down beyond `headerSlideThreshold`, header will reappear when user scrolls up\n   * @default static\n   */\n  headerPosition?: 'static' | 'fixed' | 'slide';\n  /**\n   * Specifies threshold that is used to hide header for the headerPosition=\"slide\"\n   * @default 250\n   */\n  headerSlideThreshold?: number;\n  /**\n   * Specifies if content should be automatically wrapped into container component\n   * @default false\n   */\n  wrapContent?: boolean;\n  /**\n   * Properties applied to header wrapper\n   */\n  headerProps?: BoxProps<ElementType>;\n  /**\n   * Properties applied to header wrapper\n   */\n  headerContainerProps?: BoxProps<ElementType>;\n  /**\n   * Properties applied to root header wrapper\n   */\n  headerWrapperProps?: BoxProps<ElementType>;\n  /**\n   * Properties applied to page content wrapper\n   */\n  contentProps?: BoxProps<ElementType>;\n  /**\n   * Properties applied to footer wrapper\n   */\n  footerProps?: BoxProps<ElementType>;\n}\n\nexport const PageLayout: React.FC<PageLayoutProps> = forwardRef(\n  (\n    {\n      children,\n      sx,\n      header,\n      footer,\n      headerPosition = 'static',\n      headerSlideThreshold = 250,\n      wrapContent = false,\n      headerProps,\n      headerContainerProps,\n      headerWrapperProps,\n      contentProps,\n      footerProps,\n      ...rest\n    },\n    ref,\n  ) => {\n    const theme = useTheme();\n    const { sx: headerWrapperSx, ...restHeaderWrapper } = headerWrapperProps ?? {};\n    const {\n      sx: headerContainerSx,\n      className: headerContainerClassName,\n      ...restHeaderContainer\n    } = headerContainerProps ?? {};\n    // header height to take actual space in dom for the fixed/slide variants\n    const [headerHeight, setHeaderHeight] = useState<number>(parseFloat(String(theme.mixins.toolbar.minHeight)));\n    const headerContainerRef = useCallback(\n      (element: HTMLElement) => {\n        if (headerPosition === 'static' || !element) {\n          return;\n        }\n        new ResizeObserver(() => {\n          setHeaderHeight(element.offsetHeight);\n        }).observe(element);\n      },\n      [headerPosition !== 'static'],\n    );\n    // trigger hide of the header during scroll\n    const slideTrigger = useScrollTrigger({\n      target: window,\n      threshold: headerSlideThreshold,\n    });\n\n    return (\n      <Box\n        sx={{\n          position: 'relative',\n          minHeight: '100vh',\n          backgroundColor: 'surface.primary',\n          display: 'grid',\n          gridTemplateRows: [header && 'max-content', 'auto', footer && 'max-content'].filter(Boolean).join(' '),\n          ...sx,\n        }}\n        data-testid=\"PageLayout\"\n        ref={ref}\n        {...rest}\n      >\n        {header && (\n          <Box\n            sx={{\n              ...(headerPosition !== 'static' && headerHeight && { height: headerHeight }),\n              ...headerWrapperSx,\n            }}\n            data-testid=\"PageLayout.headerWrapper\"\n            {...restHeaderWrapper}\n          >\n            <Box\n              {...(headerPosition === 'slide' && {\n                component: Slide,\n                appear: false,\n                direction: 'down',\n                in: !slideTrigger,\n              })}\n              sx={{\n                ...(headerPosition !== 'static' && {\n                  position: 'fixed',\n                  top: '0',\n                  left: '0',\n                  right: '0',\n                  zIndex: theme.zIndex.appBar,\n                }),\n                ...headerContainerSx,\n              }}\n              className={[headerPosition !== 'static' ? 'mui-fixed' : '', headerContainerClassName]\n                .filter(Boolean)\n                .join(', ')}\n              {...restHeaderContainer}\n            >\n              <Box ref={headerContainerRef} data-testid=\"PageLayout.header\" {...headerProps}>\n                {header}\n              </Box>\n            </Box>\n          </Box>\n        )}\n        <Box {...(wrapContent && { component: Container, maxWidth: 'xl' })} data-testid=\"Container\" {...contentProps}>\n          {children}\n        </Box>\n        {footer && (\n          <Box data-testid=\"PageLayout.footer\" {...footerProps}>\n            {footer}\n          </Box>\n        )}\n      </Box>\n    );\n  },\n);\n"],"names":["PageLayout","forwardRef","_a","ref","children","sx","header","footer","headerPosition","headerSlideThreshold","wrapContent","headerProps","headerContainerProps","headerWrapperProps","contentProps","footerProps","rest","__rest","theme","useTheme","_b","headerWrapperSx","restHeaderWrapper","_c","headerContainerSx","className","headerContainerClassName","restHeaderContainer","headerHeight","setHeaderHeight","useState","parseFloat","String","mixins","toolbar","minHeight","headerContainerRef","useCallback","element","ResizeObserver","offsetHeight","observe","slideTrigger","useScrollTrigger","target","window","threshold","_jsxs","Box","Object","assign","position","backgroundColor","display","gridTemplateRows","filter","Boolean","join","_jsx","height","component","Slide","appear","direction","in","top","left","right","zIndex","appBar","jsx","Container","maxWidth"],"mappings":"iHAoDa,MAAAA,EAAwCC,EAAUA,YAC7D,CACEC,EAeAC,KAfA,IAAAC,SACEA,EAAQC,GACRA,EAAEC,OACFA,EAAMC,OACNA,EAAMC,eACNA,EAAiB,SAAQC,qBACzBA,EAAuB,IAAGC,YAC1BA,GAAc,EAAKC,YACnBA,EAAWC,qBACXA,EAAoBC,mBACpBA,EAAkBC,aAClBA,EAAYC,YACZA,GAEDb,EADIc,EAAIC,EAAAA,OAAAf,EAbT,kLAiBA,MAAMgB,EAAQC,EAAAA,WACRC,EAAgDP,QAAAA,EAAsB,IAApER,GAAIgB,GAAkED,EAA9CE,EAA1BL,EAAAA,OAAAG,EAAA,CAAA,OACAG,EAIFX,QAAAA,EAAwB,IAH1BP,GAAImB,EACJC,UAAWC,GAAwBH,EAChCI,EAAmBV,EAAAA,OAAAM,EAHlB,CAIL,KAAA,eAEMK,EAAcC,GAAmBC,EAAQA,SAASC,WAAWC,OAAOd,EAAMe,OAAOC,QAAQC,aAC1FC,EAAqBC,eACxBC,IACwB,WAAnB9B,GAAgC8B,GAGpC,IAAIC,gBAAe,KACjBV,EAAgBS,EAAQE,aAAa,IACpCC,QAAQH,EAAQ,GAErB,CAAoB,WAAnB9B,IAGGkC,EAAeC,EAAAA,iBAAiB,CACpCC,OAAQC,OACRC,UAAWrC,IAGb,OACEsC,EAAAA,KAACC,EAAAA,mBACC3C,GAAE4C,OAAAC,OAAA,CACAC,SAAU,WACVhB,UAAW,QACXiB,gBAAiB,kBACjBC,QAAS,OACTC,iBAAkB,CAAChD,GAAU,cAAe,OAAQC,GAAU,eAAegD,OAAOC,SAASC,KAAK,MAC/FpD,GAAE,cAEK,aACZF,IAAKA,GACDa,EAEH,CAAAZ,SAAA,CAAAE,GACCoD,EAAAA,IAACV,EAAAA,IACCC,OAAAC,OAAA,CAAA7C,kCACyB,WAAnBG,GAA+BoB,GAAgB,CAAE+B,OAAQ/B,IAC1DP,GAEO,cAAA,4BACRC,EAAiB,CAAAlB,SAErBsD,EAAAA,IAACV,EAAAA,IAAGC,OAAAC,OAAA,CAAA,EACsB,UAAnB1C,GAA8B,CACjCoD,UAAWC,EAAKA,MAChBC,QAAQ,EACRC,UAAW,OACXC,IAAKtB,IAEPrC,GAAE4C,OAAAC,OAAAD,OAAAC,OAAA,CAAA,EACuB,WAAnB1C,GAA+B,CACjC2C,SAAU,QACVc,IAAK,IACLC,KAAM,IACNC,MAAO,IACPC,OAAQlD,EAAMkD,OAAOC,SAEpB7C,GAELC,UAAW,CAAoB,WAAnBjB,EAA8B,YAAc,GAAIkB,GACzD6B,OAAOC,SACPC,KAAK,OACJ9B,EAAmB,CAAAvB,SAEvBsD,EAAAA,IAACV,EAAGA,IAACC,OAAAC,OAAA,CAAA/C,IAAKiC,EAAgC,cAAA,qBAAwBzB,EAC/D,CAAAP,SAAAE,WAKToD,EAAAY,IAACtB,EAAGA,IAAAC,OAAAC,OAAA,CAAA,EAAMxC,GAAe,CAAEkD,UAAWW,EAASA,UAAEC,SAAU,MAAqB,CAAA,cAAA,aAAgB1D,EAC7F,CAAAV,SAAAA,KAEFG,GACCmD,EAAAY,IAACtB,EAAGA,IAAAC,OAAAC,OAAA,CAAA,cAAa,qBAAwBnC,EAAW,CAAAX,SACjDG,QAGD"}

package/cjs/components/pagination/pagination.d.ts

@@ -1,90 +1,43 @@
-import { SxProps, Theme } from '@mui/material';
-import React, { HTMLAttributes } from 'react';
-export interface PaginationProps extends Omit<HTMLAttributes<HTMLButtonElement>, 'color' | 'size'> {
-    /**
-     *  The total number of pages.
-     */
-    count?: number;
-    /**
-       The page selected by default
-       */
-    defaultPage?: number;
+import { PaginationProps as MuiPaginationProps } from '@mui/material';
+import React from 'react';
+export interface PaginationProps extends MuiPaginationProps {
     /**
      *  If true, a pagination will be disabled.
+     *  @deprecated It is recommended to use `disabled` prop instead of `isDisabled`
      */
     isDisabled?: boolean;
-    /**
-     *  Set the current page number controlled from outside.
-     */
-    page?: number;
     /**
      *  The label for previous button.
-     *  @deprecated Previous button label not used by design, will be deleted in future versions
+     *  @deprecated No longer used, property has no effect
      */
     prevButtonLabel?: string;
     /**
      *  The label for next button.
-     *  @deprecated Previous button label not used by design, will be deleted in future versions
+     *  @deprecated No longer used, property has no effect
      */
     nextButtonLabel?: string;
-    /**
-     * If true, hide the next-page button.
-     */
-    hideNextButton?: boolean;
-    /**
-     * If true, hide the previous-page button.
-     */
-    hidePrevButton?: boolean;
     /**
      * If true, hide the first-page button.
+     * @deprecated Use showFirstButton instead
      */
     hideFirstButton?: boolean;
     /**
      * If true, hide the last-page button.
+     * @deprecated Use showLastButton instead
      */
     hideLastButton?: boolean;
-    /**
-     * Number of always visible pages at the beginning and end.
-     */
-    boundaryCount?: number;
-    /**
-     * Override or extend the styles applied to the component.
-     */
-    classes?: object;
-    /**
-     *	Accepts a function which returns a string value that provides a user-friendly name for the current page.
-     */
-    getItemAriaLabel?: (type: string, page: number, selected: boolean) => string;
-    /**
-     * If true, show the first-page button.
-     * @deprecated showFirstButton not working and is deprecated  as first-button should be visible by default according to design. Use hideFirstButton property instead.
-     */
-    showFirstButton?: boolean;
-    /**
-     * If true, show the last-page button.
-     * @deprecated showLastButton not working and is deprecated  as last-button should be visible by default according to design. Use hideLastButton property instead.
-     */
-    showLastButton?: boolean;
-    /**
-     * Number of always visible pages before and after the current page.
-     */
-    siblingCount?: number;
-    /**
-     * The system prop that allows defining system overrides as well as additional CSS styles.
-     */
-    sx?: SxProps<Theme>;
-    /**
-     * On click callback.
-     */
-    onClick?: (e: React.MouseEvent<HTMLElement>) => void;
     /**
      * enable or disable direction label. mobile only
-     * @deprecated hideLabels not used by design, will be deleted in future versions
+     * @deprecated No longer used, property has no effect
      */
     hideLabels?: boolean;
     /**
      * callback for value change handling. takes the new value as its only parameter
+     * @deprecated provide the callback in the onChange function
      **/
     onValueChange?: (payload: number) => void;
 }
-export declare const Pagination: React.ForwardRefExoticComponent<PaginationProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * @mui Pagination that contain props parser for the previous implementation
+ */
+export declare const Pagination: React.ForwardRefExoticComponent<Omit<PaginationProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/cjs/components/pagination/pagination.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("tslib"),t=require("react/jsx-runtime"),n=require("@mui/material"),i=require("react"),a=require("../../utils/utilities.js"),o=require("../icon/icon.js");require("../icon/icon.definitions.js");const r=(e,t)=>""===e||"number"==typeof e&&e-1>0&&e+1<=t||"number"==typeof parseInt(e)&&parseInt(e)>0&&parseInt(e)<=t,s=(e,i,a,r,s,l)=>t.jsxs(n.IconButton,{"aria-label":"Navigate",variant:"standard",onClick:i,disabled:a,children:["forward"===r&&!s&&l,t.jsx(o.Icon,{name:e}),"back"===r&&!s&&l]}),l=i.forwardRef(((l,p)=>{var{count:u,isDisabled:c,page:x,prevButtonLabel:m,nextButtonLabel:h,defaultPage:g,hideNextButton:f,hidePrevButton:b,hideFirstButton:j,hideLastButton:v,hideLabels:B,onValueChange:y}=l,w=e.__rest(l,["count","isDisabled","page","prevButtonLabel","nextButtonLabel","defaultPage","hideNextButton","hidePrevButton","hideFirstButton","hideLastButton","hideLabels","onValueChange"]);const I=g||1,[C,L]=i.useState(I),[P,S]=i.useState(!0),[k,F]=i.useState();i.useEffect((()=>{C&&y&&y(C)}),[C,y]),i.useEffect((()=>{P?S(!1):x&&!c&&L(x)}),[c,P,x]);const N=i.useCallback(((e,t)=>{L(t)}),[]);return t.jsxs(d,{"data-testid":"Pagination-wrapper",children:[t.jsx(n.Pagination,Object.assign({className:"desktopView"},w,{shape:"rounded",count:u,disabled:c,page:C,hideNextButton:f,hidePrevButton:b,showFirstButton:!j,showLastButton:!v,ref:p,onChange:N,renderItem:e=>t.jsx(n.PaginationItem,Object.assign({className:a.ternaryCondition(b,!1,"MuiPagination-prev",""),components:{first:()=>t.jsx(o.Icon,{name:"previous",fontSize:"small"}),last:()=>t.jsx(o.Icon,{name:"next",fontSize:"small"}),previous:()=>t.jsxs(t.Fragment,{children:[t.jsx(o.Icon,{name:"chevron-left",fontSize:"small"}),t.jsx(t.Fragment,{children:m})]}),next:()=>t.jsxs(t.Fragment,{children:[t.jsx(t.Fragment,{children:h}),t.jsx(o.Icon,{name:"chevron-right",fontSize:"small"})]})}},e))}))," ",t.jsx("div",{style:{display:"flex",flexDirection:"column"},className:"mobileView "+(c?"paginationDisabled":""),children:t.jsxs("div",{className:"mobileContainer",children:[s("chevron-previous",(()=>r(C-1,u)&&L(1)),!r(C-1,u)),s("chevron-left",(()=>r(C-1,u)&&L(C-1)),!r(C-1,u),"back",B,m),t.jsx(n.TextField,{className:"textFieldContainer",value:C,inputProps:{inputMode:"numeric",pattern:`[1-${u}]*`},onChange:e=>(e=>{""===e&&(F(C),L(e));const t=parseInt(e);"number"==typeof t&&r(t,u)&&(F(t),L(t))})(e.target.value),onBlur:()=>""===C&&L(k)}),s("chevron-right",(()=>r(C+1,u)&&L(C+1)),!r(C+1,u),"forward",B,h),s("chevron-next",(()=>r(C+1,u)&&L(u)),!r(C+1,u))]})})]})})),d=n.styled("div")((({theme:e})=>{let t={};const n={alignItems:"center",display:"flex",justifyContent:"center",width:"100%"};return t={[e.breakpoints.up("md")]:{"& .mobileView":{display:"none!important"}},[e.breakpoints.down("md")]:{"& .desktopView":{display:"none!important"}},"& .desktopView":{"& .MuiButton-startIcon":{marginRight:"8px",display:"inline-flex"},"& .MuiButton-endIcon":{marginLeft:"8px",display:"inline-flex"}},"& .mobileView":Object.assign(Object.assign({},n),{flexDirection:"column",flexWrap:"nowrap","& .mobileContainer":Object.assign(Object.assign({},n),{flexWrap:"nowrap"}),"& .textFieldContainer":{height:"36px",margin:"0 34px","& input, fieldset":{backgroundColor:e.palette.transparent.primary,border:0,borderRadius:"4px",fontSize:"16px",fontWeight:"400",height:"36px",lineHeight:"36px",minWidth:"44px",maxWidth:"50px",padding:"0 4px",textAlign:"center",color:e.palette.text.primary},"& fieldset":{visibility:"hidden"},"& div":{"&::before":{borderBottom:0},"&::after":{borderBottom:0}}},"& .controllerContainer":{"& .arrowLabel":{color:e.palette.text.primary,fontSize:"16px",fontWeight:"400",lineHeight:"16px"},"& .MuiButton-startIcon":{marginRight:"8px",display:"inline-flex"},"& .MuiButton-endIcon":{marginLeft:"8px",display:"inline-flex"},"& .MuiIcon-root":{fontSize:"16px",width:"20px",height:"20px"}},"& .counter_label":{color:e.palette.text.primary,fontSize:"12px",fontWeight:"400",lineHeight:"24px",marginTop:"4px"},"&.paginationDisabled":{pointerEvents:"none","& .counter_label, .MuiIcon-root,.arrowLabel, input, fieldset":{color:e.palette.disabled.primary}}})},t}));exports.Pagination=l;
+"use strict";var t=require("tslib"),e=require("react/jsx-runtime"),a=require("@mui/material");const n=require("react").forwardRef(((n,s)=>{var{isDisabled:i,page:o,hideFirstButton:r,hideLastButton:u,showFirstButton:l,showLastButton:h,hideLabels:d,onValueChange:B,disabled:b,onChange:g,prevButtonLabel:L,nextButtonLabel:w}=n,p=t.__rest(n,["isDisabled","page","hideFirstButton","hideLastButton","showFirstButton","showLastButton","hideLabels","onValueChange","disabled","onChange","prevButtonLabel","nextButtonLabel"]);return e.jsx(a.Pagination,Object.assign({},p,{ref:s,disabled:b||i,page:o&&g?o:void 0,onChange:(t,e)=>{null==g||g(t,e),null==B||B(e)},showFirstButton:l||!r,showLastButton:h||!u}))}));exports.Pagination=n;
 //# sourceMappingURL=pagination.js.map

package/cjs/components/pagination/pagination.js.map

@@ -1 +1 @@
-{"version":3,"file":"pagination.js","sources":["../../../../../src/components/pagination/pagination.tsx"],"sourcesContent":["import {\n  SxProps,\n  Theme,\n  styled,\n  Pagination as MuiPagination,\n  PaginationItem as MuiPaginationItem,\n  TextField,\n  IconButton,\n} from '@mui/material';\nimport React, { HTMLAttributes, forwardRef, useCallback, useEffect, useState } from 'react';\nimport { ternaryCondition } from '../../utils/utilities';\nimport { Icon, IconNameProp } from '../icon';\n\nexport interface PaginationProps extends Omit<HTMLAttributes<HTMLButtonElement>, 'color' | 'size'> {\n  /**\n   *  The total number of pages.\n   */\n  count?: number;\n\n  /**\n\t The page selected by default\n\t */\n  defaultPage?: number;\n\n  /**\n   *  If true, a pagination will be disabled.\n   */\n\n  isDisabled?: boolean;\n\n  /**\n   *  Set the current page number controlled from outside.\n   */\n\n  page?: number;\n  /**\n   *  The label for previous button.\n   *  @deprecated Previous button label not used by design, will be deleted in future versions\n   */\n  prevButtonLabel?: string;\n\n  /**\n   *  The label for next button.\n   *  @deprecated Previous button label not used by design, will be deleted in future versions\n   */\n  nextButtonLabel?: string;\n  /**\n   * If true, hide the next-page button.\n   */\n  hideNextButton?: boolean;\n\n  /**\n   * If true, hide the previous-page button.\n   */\n  hidePrevButton?: boolean;\n\n  /**\n   * If true, hide the first-page button.\n   */\n  hideFirstButton?: boolean;\n\n  /**\n   * If true, hide the last-page button.\n   */\n  hideLastButton?: boolean;\n\n  /**\n   * Number of always visible pages at the beginning and end.\n   */\n  boundaryCount?: number;\n  /**\n   * Override or extend the styles applied to the component.\n   */\n  classes?: object;\n  /**\n   *\tAccepts a function which returns a string value that provides a user-friendly name for the current page.\n   */\n  getItemAriaLabel?: (type: string, page: number, selected: boolean) => string;\n  /**\n   * If true, show the first-page button.\n   * @deprecated showFirstButton not working and is deprecated  as first-button should be visible by default according to design. Use hideFirstButton property instead.\n   */\n  showFirstButton?: boolean;\n  /**\n   * If true, show the last-page button.\n   * @deprecated showLastButton not working and is deprecated  as last-button should be visible by default according to design. Use hideLastButton property instead.\n   */\n  showLastButton?: boolean;\n  /**\n   * Number of always visible pages before and after the current page.\n   */\n  siblingCount?: number;\n  /**\n   * The system prop that allows defining system overrides as well as additional CSS styles.\n   */\n  sx?: SxProps<Theme>;\n  /**\n   * On click callback.\n   */\n  onClick?: (e: React.MouseEvent<HTMLElement>) => void;\n  /**\n   * enable or disable direction label. mobile only\n   * @deprecated hideLabels not used by design, will be deleted in future versions\n   */\n  hideLabels?: boolean;\n  /**\n   * callback for value change handling. takes the new value as its only parameter\n   **/\n  onValueChange?: (payload: number) => void;\n}\n\n/**\n * @description SkodaFlow Pagination component.\n * Properties are inherited from HTML div Attribetes element.\n * @param props PaginationProps\n * @returns React Functional Component\n */\n\nconst isPageNumberValid = (pageNumber: any, count: number) => {\n  return (\n    pageNumber === '' ||\n    (typeof pageNumber === 'number' && pageNumber - 1 > 0 && pageNumber + 1 <= count) ||\n    (typeof parseInt(pageNumber) === 'number' && parseInt(pageNumber) > 0 && parseInt(pageNumber) <= count)\n  );\n};\n\nconst mobileIconButton = (\n  muiIcon: IconNameProp,\n  onClick: () => void,\n  disabled?: boolean,\n  direction?: 'forward' | 'back',\n  hideLabel?: boolean,\n  label?: string,\n) => (\n  <IconButton aria-label=\"Navigate\" variant=\"standard\" onClick={onClick} disabled={disabled}>\n    {direction === 'forward' && !hideLabel && label}\n    <Icon name={muiIcon}></Icon>\n    {direction === 'back' && !hideLabel && label}\n  </IconButton>\n);\n\nexport const Pagination = forwardRef<HTMLDivElement, PaginationProps>(\n  (\n    {\n      count,\n      isDisabled,\n      page,\n      prevButtonLabel,\n      nextButtonLabel,\n      defaultPage,\n      hideNextButton,\n      hidePrevButton,\n      hideFirstButton,\n      hideLastButton,\n      hideLabels,\n      onValueChange,\n      ...props\n    },\n    ref,\n  ) => {\n    const initialPage = defaultPage || 1;\n    const [currentPageNumber, setCurrentPageNumber] = useState<any>(initialPage);\n    const [isFirstMount, setIsFirstMount] = useState(true);\n    const [prevStatePageNumber, setPrevStatePageNumber] = useState<any>();\n\n    useEffect(() => {\n      currentPageNumber && onValueChange && onValueChange(currentPageNumber);\n    }, [currentPageNumber, onValueChange]);\n\n    useEffect(() => {\n      isFirstMount ? setIsFirstMount(false) : page && !isDisabled && setCurrentPageNumber(page);\n    }, [isDisabled, isFirstMount, page]);\n\n    const handleChange = useCallback((event: React.ChangeEvent<unknown>, pageNumber: number) => {\n      setCurrentPageNumber(pageNumber);\n    }, []);\n\n    const handleValueChange = (payload: string) => {\n      if (payload === '') {\n        setPrevStatePageNumber(currentPageNumber);\n        setCurrentPageNumber(payload);\n      }\n      const castToNum = parseInt(payload);\n      if (typeof castToNum === 'number' && isPageNumberValid(castToNum, count)) {\n        setPrevStatePageNumber(castToNum);\n        setCurrentPageNumber(castToNum);\n      }\n    };\n\n    const mobilePagination = () => (\n      <div\n        style={{ display: 'flex', flexDirection: 'column' }}\n        className={`mobileView ${isDisabled ? 'paginationDisabled' : ''}`}\n      >\n        <div className=\"mobileContainer\">\n          {mobileIconButton(\n            'chevron-previous',\n            () => isPageNumberValid(currentPageNumber - 1, count) && setCurrentPageNumber(1),\n            !isPageNumberValid(currentPageNumber - 1, count),\n          )}\n          {mobileIconButton(\n            'chevron-left',\n            () => isPageNumberValid(currentPageNumber - 1, count) && setCurrentPageNumber(currentPageNumber - 1),\n            !isPageNumberValid(currentPageNumber - 1, count),\n            'back',\n            hideLabels,\n            prevButtonLabel,\n          )}\n          <TextField\n            className=\"textFieldContainer\"\n            value={currentPageNumber}\n            inputProps={{ inputMode: 'numeric', pattern: `[1-${count}]*` }}\n            onChange={(val: any) => handleValueChange(val.target.value)}\n            onBlur={() => currentPageNumber === '' && setCurrentPageNumber(prevStatePageNumber)}\n          />\n          {mobileIconButton(\n            'chevron-right',\n            () => isPageNumberValid(currentPageNumber + 1, count) && setCurrentPageNumber(currentPageNumber + 1),\n            !isPageNumberValid(currentPageNumber + 1, count),\n            'forward',\n            hideLabels,\n            nextButtonLabel,\n          )}\n          {mobileIconButton(\n            'chevron-next',\n            () => isPageNumberValid(currentPageNumber + 1, count) && setCurrentPageNumber(count),\n            !isPageNumberValid(currentPageNumber + 1, count),\n          )}\n        </div>\n      </div>\n    );\n\n    const desktopPagination = () => (\n      <MuiPagination\n        className=\"desktopView\"\n        {...props}\n        shape=\"rounded\"\n        count={count}\n        disabled={isDisabled}\n        page={currentPageNumber}\n        hideNextButton={hideNextButton}\n        hidePrevButton={hidePrevButton}\n        showFirstButton={!hideFirstButton}\n        showLastButton={!hideLastButton}\n        ref={ref}\n        onChange={handleChange}\n        renderItem={(item) => (\n          <MuiPaginationItem\n            className={ternaryCondition(hidePrevButton, false, 'MuiPagination-prev', '')}\n            components={{\n              first: () => <Icon name=\"previous\" fontSize=\"small\" />,\n              last: () => <Icon name=\"next\" fontSize=\"small\" />,\n              previous: () => (\n                <>\n                  <Icon name=\"chevron-left\" fontSize=\"small\" />\n                  <>{prevButtonLabel}</>\n                </>\n              ),\n              next: () => (\n                <>\n                  <>{nextButtonLabel}</>\n                  <Icon name=\"chevron-right\" fontSize=\"small\" />\n                </>\n              ),\n            }}\n            {...item}\n          />\n        )}\n      />\n    );\n\n    return (\n      <PaginationStyled data-testid=\"Pagination-wrapper\">\n        {desktopPagination()} {mobilePagination()}\n      </PaginationStyled>\n    );\n  },\n);\n\n/**\n * @description Pagination styling definition based on props\n */\nconst PaginationStyled = styled('div')<{ theme?: any }>(({ theme }) => {\n  let style = {};\n  const flexStyle = {\n    alignItems: 'center',\n    display: 'flex',\n    justifyContent: 'center',\n    width: '100%',\n  };\n\n  style = {\n    [theme.breakpoints.up('md')]: {\n      '& .mobileView': {\n        display: 'none!important',\n      },\n    },\n    [theme.breakpoints.down('md')]: {\n      '& .desktopView': {\n        display: 'none!important',\n      },\n    },\n    '& .desktopView': {\n      '& .MuiButton-startIcon': {\n        marginRight: '8px',\n        display: 'inline-flex',\n      },\n      '& .MuiButton-endIcon': {\n        marginLeft: '8px',\n        display: 'inline-flex',\n      },\n    },\n    '& .mobileView': {\n      ...flexStyle,\n      flexDirection: 'column',\n      flexWrap: 'nowrap',\n      '& .mobileContainer': {\n        ...flexStyle,\n        flexWrap: 'nowrap',\n      },\n      '& .textFieldContainer': {\n        height: '36px',\n        margin: '0 34px',\n        '& input, fieldset': {\n          backgroundColor: theme.palette.transparent.primary,\n          border: 0,\n          borderRadius: '4px',\n          fontSize: '16px',\n          fontWeight: '400',\n          height: '36px',\n          lineHeight: '36px',\n          minWidth: '44px',\n          maxWidth: '50px',\n          padding: '0 4px',\n          textAlign: 'center',\n          color: theme.palette.text.primary,\n        },\n        '& fieldset': {\n          visibility: 'hidden',\n        },\n        '& div': {\n          '&::before': {\n            borderBottom: 0,\n          },\n          '&::after': {\n            borderBottom: 0,\n          },\n        },\n      },\n      '& .controllerContainer': {\n        '& .arrowLabel': {\n          color: theme.palette.text.primary,\n          fontSize: '16px',\n          fontWeight: '400',\n          lineHeight: '16px',\n        },\n        '& .MuiButton-startIcon': {\n          marginRight: '8px',\n          display: 'inline-flex',\n        },\n        '& .MuiButton-endIcon': {\n          marginLeft: '8px',\n          display: 'inline-flex',\n        },\n        '& .MuiIcon-root': {\n          fontSize: '16px',\n          width: '20px',\n          height: '20px',\n        },\n      },\n      '& .counter_label': {\n        color: theme.palette.text.primary,\n        fontSize: '12px',\n        fontWeight: '400',\n        lineHeight: '24px',\n        marginTop: '4px',\n      },\n      '&.paginationDisabled': {\n        pointerEvents: 'none',\n        '& .counter_label, .MuiIcon-root,.arrowLabel, input, fieldset': {\n          color: theme.palette.disabled.primary,\n        },\n      },\n    },\n  };\n\n  return style;\n});\n"],"names":["isPageNumberValid","pageNumber","count","parseInt","mobileIconButton","muiIcon","onClick","disabled","direction","hideLabel","label","_jsxs","IconButton","variant","children","_jsx","jsx","Icon","name","Pagination","forwardRef","_a","ref","isDisabled","page","prevButtonLabel","nextButtonLabel","defaultPage","hideNextButton","hidePrevButton","hideFirstButton","hideLastButton","hideLabels","onValueChange","props","__rest","initialPage","currentPageNumber","setCurrentPageNumber","useState","isFirstMount","setIsFirstMount","prevStatePageNumber","setPrevStatePageNumber","useEffect","handleChange","useCallback","event","PaginationStyled","MuiPagination","Object","assign","className","shape","showFirstButton","showLastButton","onChange","renderItem","item","MuiPaginationItem","PaginationItem","ternaryCondition","components","first","fontSize","last","previous","jsxs","_Fragment","Fragment","next","style","display","flexDirection","TextField","value","inputProps","inputMode","pattern","val","payload","castToNum","handleValueChange","target","onBlur","styled","theme","flexStyle","alignItems","justifyContent","width","breakpoints","up","down","marginRight","marginLeft","flexWrap","height","margin","backgroundColor","palette","transparent","primary","border","borderRadius","fontWeight","lineHeight","minWidth","maxWidth","padding","textAlign","color","text","visibility","borderBottom","marginTop","pointerEvents"],"mappings":"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"}
+{"version":3,"file":"pagination.js","sources":["../../../../../src/components/pagination/pagination.tsx"],"sourcesContent":["import { Pagination as MuiPagination, PaginationProps as MuiPaginationProps } from '@mui/material';\nimport React, { forwardRef } from 'react';\n\nexport interface PaginationProps extends MuiPaginationProps {\n  /**\n   *  If true, a pagination will be disabled.\n   *  @deprecated It is recommended to use `disabled` prop instead of `isDisabled`\n   */\n  isDisabled?: boolean;\n\n  /**\n   *  The label for previous button.\n   *  @deprecated No longer used, property has no effect\n   */\n  prevButtonLabel?: string;\n\n  /**\n   *  The label for next button.\n   *  @deprecated No longer used, property has no effect\n   */\n  nextButtonLabel?: string;\n\n  /**\n   * If true, hide the first-page button.\n   * @deprecated Use showFirstButton instead\n   */\n  hideFirstButton?: boolean;\n\n  /**\n   * If true, hide the last-page button.\n   * @deprecated Use showLastButton instead\n   */\n  hideLastButton?: boolean;\n\n  /**\n   * enable or disable direction label. mobile only\n   * @deprecated No longer used, property has no effect\n   */\n  hideLabels?: boolean;\n\n  /**\n   * callback for value change handling. takes the new value as its only parameter\n   * @deprecated provide the callback in the onChange function\n   **/\n  onValueChange?: (payload: number) => void;\n}\n\n/**\n * @mui Pagination that contain props parser for the previous implementation\n */\nexport const Pagination = forwardRef<HTMLDivElement, PaginationProps>(\n  (\n    {\n      isDisabled,\n      page,\n      hideFirstButton,\n      hideLastButton,\n      showFirstButton,\n      showLastButton,\n      hideLabels: _,\n      onValueChange,\n      disabled,\n      onChange,\n      prevButtonLabel: __,\n      nextButtonLabel: ___,\n      ...rest\n    },\n    ref,\n  ) => {\n    return (\n      <MuiPagination\n        {...rest}\n        ref={ref}\n        disabled={disabled || isDisabled}\n        page={page && onChange ? page : undefined}\n        onChange={(e, newPage) => {\n          onChange?.(e, newPage);\n          onValueChange?.(newPage);\n        }}\n        showFirstButton={showFirstButton || !hideFirstButton}\n        showLastButton={showLastButton || !hideLastButton}\n      />\n    );\n  },\n);\n"],"names":["Pagination","forwardRef","_a","ref","isDisabled","page","hideFirstButton","hideLastButton","showFirstButton","showLastButton","hideLabels","_","onValueChange","disabled","onChange","prevButtonLabel","__","nextButtonLabel","___","rest","__rest","_jsx","jsx","MuiPagination","Object","assign","undefined","e","newPage"],"mappings":"8FAkDa,MAAAA,mBAAuBC,YAClC,CACEC,EAeAC,KAfA,IAAAC,WACEA,EAAUC,KACVA,EAAIC,gBACJA,EAAeC,eACfA,EAAcC,gBACdA,EAAeC,eACfA,EACAC,WAAYC,EAACC,cACbA,EAAaC,SACbA,EAAQC,SACRA,EACAC,gBAAiBC,EACjBC,gBAAiBC,GAElBhB,EADIiB,EAAIC,EAAAA,OAAAlB,EAbT,oLAiBA,OACEmB,EAACC,IAAAC,aACKC,OAAAC,OAAA,CAAA,EAAAN,GACJhB,IAAKA,EACLU,SAAUA,GAAYT,EACtBC,KAAMA,GAAQS,EAAWT,OAAOqB,EAChCZ,SAAU,CAACa,EAAGC,KACZd,SAAAA,EAAWa,EAAGC,GACdhB,SAAAA,EAAgBgB,EAAQ,EAE1BpB,gBAAiBA,IAAoBF,EACrCG,eAAgBA,IAAmBF,IACnC"}

package/cjs/components/secondaryNavigation/SecondaryNavigation.d.ts

@@ -0,0 +1,51 @@
+import { FC, ReactNode, ElementType } from 'react';
+import { AppBarProps, TabsProps, BoxProps, ToolbarProps, TypographyProps } from '@mui/material';
+export interface SecondaryNavigationProps extends Omit<AppBarProps, 'color' | 'title'> {
+    /**
+     * Headline
+     */
+    title?: ReactNode;
+    /**
+     * Items in the menu
+     * @deprecated place links directly as children
+     */
+    navigationItems?: ReactNode;
+    /**
+     * @deprecated no longer has any effect
+     */
+    color?: 'light' | 'dark';
+    /**
+     * Wrap the navigation into container
+     * @default false
+     */
+    inContainer?: boolean;
+    /**
+     * ActionButtons on the right side
+     */
+    buttons?: ReactNode;
+    /**
+     * ActionButtons on the right side
+     * @deprecated rename property to buttons
+     */
+    cta?: ReactNode;
+    /**
+     * Properties applied to toolbar container
+     */
+    toolbarProps?: ToolbarProps<ElementType>;
+    /**
+     * Properties applied to title
+     */
+    titleProps?: TypographyProps<ElementType>;
+    /**
+     * Properties applied to content wrapper
+     */
+    contentProps?: TabsProps;
+    /**
+     * Properties applied to button wrapper
+     */
+    buttonsProps?: BoxProps<ElementType>;
+}
+/**
+ * Additional navigation intended to be shown bellow the Header
+ */
+export declare const SecondaryNavigation: FC<SecondaryNavigationProps>;

package/cjs/components/secondaryNavigation/SecondaryNavigation.js

@@ -0,0 +1,2 @@
+"use strict";var t=require("tslib"),e=require("react/jsx-runtime"),s=require("react"),a=require("@mui/material");const n=s.forwardRef(((n,r)=>{var{children:i,sx:o,title:l,navigationItems:c,cta:x,buttons:g,color:d,inContainer:p=!1,toolbarProps:u,titleProps:b,contentProps:j,buttonsProps:v}=n,f=t.__rest(n,["children","sx","title","navigationItems","cta","buttons","color","inContainer","toolbarProps","titleProps","contentProps","buttonsProps"]);const h=null!=b?b:{},{sx:y}=h,m=t.__rest(h,["sx"]),O=null!=u?u:{},{sx:S}=O,_=t.__rest(O,["sx"]),P=null!=j?j:{},{sx:w}=P,N=t.__rest(P,["sx"]),C=null!=v?v:{},{sx:B}=C,I=t.__rest(C,["sx"]),[q,G]=s.useState(0),T=s.useMemo((()=>function t(e){const a=[];return s.Children.forEach(e,((e,n)=>{var r;(null==e?void 0:e.type)===s.Fragment?a.push(...t(e.props.children)):(a.push(e),(null===(r=e.props)||void 0===r?void 0:r.isActive)&&G(n))})),a}(i||c)),[i,c]);return e.jsx(a.AppBar,Object.assign({sx:Object.assign({zIndex:t=>t.zIndex.appBar-20},o),ref:r,"data-testid":"SecondaryNavigation","aria-label":"Secondary Navigation",role:"group"},f,{children:e.jsxs(a.Toolbar,Object.assign({sx:Object.assign(Object.assign({},!!(null==T?void 0:T.length)&&{flexWrap:{xs:"wrap",lg:"nowrap"},pt:{xs:2,lg:0}}),S),disableGutters:!p,"data-testid":"SecondaryNavigation.wrapper"},_,{children:[l&&e.jsx(a.Typography,Object.assign({"data-testid":"SecondaryNavigation.title",variant:"subheadline",sx:Object.assign({display:"block",flexGrow:{xs:"1",lg:"0"},flexShrink:"0"},y)},m,{children:l})),!!(null==T?void 0:T.length)&&e.jsx(a.Tabs,Object.assign({value:q,onChange:(t,e)=>G(e),template:"navigation",sx:Object.assign(Object.assign(Object.assign({flexGrow:"1",flexBasis:{xs:"100%",lg:"auto"},order:{xs:"3",lg:"0"},justifyContent:{xs:"center",lg:"flex-start"},alignSelf:{xs:"flex-end",lg:"center"}},l&&{pl:{lg:4}}),{marginTop:{xs:"-10px",lg:"0"},marginBottom:"-1px"}),w),"data-testid":"SecondaryNavigation.items"},N,{children:T})),(g||x)&&e.jsx(a.Box,Object.assign({sx:Object.assign({flexShrink:"0",flexGrow:"1",display:"flex",alignItems:"center",justifyContent:"flex-end",gap:.25},B),"data-testid":"SecondaryNavigation.cta"},I,{children:g||x}))]}))}))}));exports.SecondaryNavigation=n;
+//# sourceMappingURL=SecondaryNavigation.js.map

package/cjs/components/secondaryNavigation/SecondaryNavigation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SecondaryNavigation.js","sources":["../../../../../src/components/secondaryNavigation/SecondaryNavigation.tsx"],"sourcesContent":["import React, { FC, forwardRef, ReactNode, ElementType, Fragment, useMemo, useState, Children } from 'react';\nimport {\n  AppBar,\n  AppBarProps,\n  Tabs,\n  TabsProps,\n  Box,\n  BoxProps,\n  Toolbar,\n  ToolbarProps,\n  Typography,\n  TypographyProps,\n} from '@mui/material';\n\nexport interface SecondaryNavigationProps extends Omit<AppBarProps, 'color' | 'title'> {\n  /**\n   * Headline\n   */\n  title?: ReactNode;\n  /**\n   * Items in the menu\n   * @deprecated place links directly as children\n   */\n  navigationItems?: ReactNode;\n  /**\n   * @deprecated no longer has any effect\n   */\n  color?: 'light' | 'dark';\n  /**\n   * Wrap the navigation into container\n   * @default false\n   */\n  inContainer?: boolean;\n  /**\n   * ActionButtons on the right side\n   */\n  buttons?: ReactNode;\n  /**\n   * ActionButtons on the right side\n   * @deprecated rename property to buttons\n   */\n  cta?: ReactNode;\n  /**\n   * Properties applied to toolbar container\n   */\n  toolbarProps?: ToolbarProps<ElementType>;\n  /**\n   * Properties applied to title\n   */\n  titleProps?: TypographyProps<ElementType>;\n  /**\n   * Properties applied to content wrapper\n   */\n  contentProps?: TabsProps;\n  /**\n   * Properties applied to button wrapper\n   */\n  buttonsProps?: BoxProps<ElementType>;\n}\n\n/**\n * Additional navigation intended to be shown bellow the Header\n */\nexport const SecondaryNavigation: FC<SecondaryNavigationProps> = forwardRef(\n  (\n    {\n      children,\n      sx,\n      title,\n      navigationItems,\n      cta,\n      buttons,\n      color: __,\n      inContainer = false,\n      toolbarProps,\n      titleProps,\n      contentProps,\n      buttonsProps,\n      ...rest\n    },\n    ref,\n  ) => {\n    const { sx: titleSx, ...restTitle } = titleProps ?? {};\n    const { sx: toolbarSx, ...restToolbar } = toolbarProps ?? {};\n    const { sx: contentSx, ...restContent } = contentProps ?? {};\n    const { sx: buttonsSx, ...restButtons } = buttonsProps ?? {};\n    const [activeNav, setActiveNav] = useState(0);\n\n    /**\n     * Process children/navigationItems and remove any React.Fragments as Tabs requires direct elements\n     */\n    const navigation = useMemo(() => {\n      function flatten(nodes) {\n        const result = [];\n        Children.forEach(nodes, (child, idx) => {\n          if (child?.type === Fragment) {\n            result.push(...flatten(child.props.children));\n          } else {\n            result.push(child);\n            // backward compatible api\n            if (child.props?.isActive) {\n              setActiveNav(idx);\n            }\n          }\n        });\n        return result;\n      }\n      return flatten(children || navigationItems);\n    }, [children, navigationItems]);\n\n    return (\n      <AppBar\n        sx={{\n          // bellow Header, also defined in appbar.theme.ts\n          zIndex: (theme) => theme.zIndex.appBar - 20,\n          ...sx,\n        }}\n        ref={ref}\n        data-testid=\"SecondaryNavigation\"\n        aria-label=\"Secondary Navigation\"\n        role=\"group\"\n        {...rest}\n      >\n        <Toolbar\n          sx={{\n            ...(!!navigation?.length && {\n              flexWrap: { xs: 'wrap', lg: 'nowrap' },\n              pt: { xs: 2, lg: 0 },\n            }),\n            ...toolbarSx,\n          }}\n          disableGutters={!inContainer}\n          data-testid=\"SecondaryNavigation.wrapper\"\n          {...restToolbar}\n        >\n          {title && (\n            <Typography\n              data-testid=\"SecondaryNavigation.title\"\n              variant=\"subheadline\"\n              sx={{\n                display: 'block',\n                // on mobile push the button to the right side\n                flexGrow: { xs: '1', lg: '0' },\n                flexShrink: '0',\n                ...titleSx,\n              }}\n              {...restTitle}\n            >\n              {title}\n            </Typography>\n          )}\n          {!!navigation?.length && (\n            <Tabs\n              value={activeNav}\n              onChange={(_, v) => setActiveNav(v)}\n              template=\"navigation\"\n              sx={{\n                flexGrow: '1',\n                // on mobile move to 2nd row\n                flexBasis: { xs: '100%', lg: 'auto' },\n                order: { xs: '3', lg: '0' },\n                // center on mobile\n                justifyContent: { xs: 'center', lg: 'flex-start' },\n                alignSelf: { xs: 'flex-end', lg: 'center' },\n                ...(title && {\n                  // increase size between title and nav\n                  pl: { lg: 4 },\n                }),\n                marginTop: { xs: '-10px', lg: '0' },\n                // move directly into border\n                marginBottom: '-1px',\n                ...contentSx,\n              }}\n              data-testid=\"SecondaryNavigation.items\"\n              {...restContent}\n            >\n              {navigation}\n            </Tabs>\n          )}\n          {(buttons || cta) && (\n            <Box\n              sx={{\n                flexShrink: '0',\n                flexGrow: '1',\n                display: 'flex',\n                alignItems: 'center',\n                justifyContent: 'flex-end',\n                gap: 0.25,\n                ...buttonsSx,\n              }}\n              data-testid=\"SecondaryNavigation.cta\"\n              {...restButtons}\n            >\n              {buttons || cta}\n            </Box>\n          )}\n        </Toolbar>\n      </AppBar>\n    );\n  },\n);\n"],"names":["SecondaryNavigation","forwardRef","_a","ref","children","sx","title","navigationItems","cta","buttons","color","__","inContainer","toolbarProps","titleProps","contentProps","buttonsProps","rest","__rest","_b","titleSx","restTitle","_c","toolbarSx","restToolbar","_d","contentSx","restContent","_e","buttonsSx","restButtons","activeNav","setActiveNav","useState","navigation","useMemo","flatten","nodes","result","Children","forEach","child","idx","type","Fragment","push","props","isActive","_jsx","AppBar","Object","assign","zIndex","theme","appBar","role","_jsxs","Toolbar","length","flexWrap","xs","lg","pt","disableGutters","Typography","variant","display","flexGrow","flexShrink","Tabs","value","onChange","_","v","template","flexBasis","order","justifyContent","alignSelf","pl","marginTop","marginBottom","jsx","Box","alignItems","gap"],"mappings":"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"}

package/cjs/components/secondaryNavigation/SecondaryNavigationCta.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { ButtonProps } from '@mui/material';
+export interface SecondaryNavigationCtaProps extends ButtonProps {
+}
+/**
+ * SecondaryNavigationCtaProps is a proxy component to <Button /> with responsive size
+ */
+export declare const SecondaryNavigationCta: React.FC<SecondaryNavigationCtaProps>;

package/cjs/components/secondaryNavigation/SecondaryNavigationCta.js

@@ -0,0 +1,2 @@
+"use strict";var r=require("react/jsx-runtime"),e=require("react"),a=require("@mui/material");const t=e.forwardRef(((e,t)=>{const i=a.useMediaQuery((r=>r.breakpoints.down("lg")));return r.jsx(a.Button,Object.assign({ref:t,color:e.variant&&"contained"!==e.variant?"secondary":"primary",size:i?"small":"medium"},e))}));exports.SecondaryNavigationCta=t;
+//# sourceMappingURL=SecondaryNavigationCta.js.map

package/cjs/components/secondaryNavigation/SecondaryNavigationCta.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SecondaryNavigationCta.js","sources":["../../../../../src/components/secondaryNavigation/SecondaryNavigationCta.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { Button, ButtonProps, Theme, useMediaQuery } from '@mui/material';\n\nexport interface SecondaryNavigationCtaProps extends ButtonProps {}\n\n/**\n * SecondaryNavigationCtaProps is a proxy component to <Button /> with responsive size\n */\nexport const SecondaryNavigationCta: React.FC<SecondaryNavigationCtaProps> = forwardRef((props, ref) => {\n  const downLg = useMediaQuery<Theme>((theme) => theme.breakpoints.down('lg'));\n\n  return (\n    <Button\n      ref={ref}\n      color={!props.variant || props.variant === 'contained' ? 'primary' : 'secondary'}\n      size={downLg ? 'small' : 'medium'}\n      {...props}\n    />\n  );\n});\n"],"names":["SecondaryNavigationCta","forwardRef","props","ref","downLg","useMediaQuery","theme","breakpoints","down","_jsx","Button","Object","assign","color","variant","size"],"mappings":"8FAQa,MAAAA,EAAgEC,EAAUA,YAAC,CAACC,EAAOC,KAC9F,MAAMC,EAASC,EAAaA,eAASC,GAAUA,EAAMC,YAAYC,KAAK,QAEtE,OACEC,MAACC,SAAMC,OAAAC,OAAA,CACLT,IAAKA,EACLU,MAAQX,EAAMY,SAA6B,cAAlBZ,EAAMY,QAAsC,YAAZ,UACzDC,KAAMX,EAAS,QAAU,UACrBF,GACJ"}

package/cjs/components/secondaryNavigation/SecondaryNavigationItem.d.ts

@@ -0,0 +1,21 @@
+import { FC, ReactNode, ElementType } from 'react';
+import { TabProps } from '@mui/material';
+export interface SecondaryNavigationItemProps extends Omit<TabProps<ElementType>, 'children'> {
+    /**
+     * Displayed navigation text, can be provided as children as well
+     */
+    label?: ReactNode;
+    /**
+     * Displayed navigation text
+     */
+    children?: ReactNode;
+    /**
+     * Marks item currently active
+     * @deprecated
+     */
+    isActive?: boolean;
+}
+/**
+ * Component to render styled button in the header
+ */
+export declare const SecondaryNavigationItem: FC<SecondaryNavigationItemProps>;

package/cjs/components/secondaryNavigation/SecondaryNavigationItem.js

@@ -0,0 +1,2 @@
+"use strict";var e=require("tslib"),r=require("react/jsx-runtime"),i=require("react"),t=require("@mui/material");const a=i.forwardRef(((i,a)=>{var{children:s,label:c,isActive:l}=i,n=e.__rest(i,["children","label","isActive"]);return r.jsx(t.Tab,Object.assign({label:s||c,ref:a,"data-testid":"SecondaryNavigationItem"},n))}));exports.SecondaryNavigationItem=a;
+//# sourceMappingURL=SecondaryNavigationItem.js.map

package/cjs/components/secondaryNavigation/SecondaryNavigationItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SecondaryNavigationItem.js","sources":["../../../../../src/components/secondaryNavigation/SecondaryNavigationItem.tsx"],"sourcesContent":["import React, { FC, forwardRef, ReactNode, ForwardedRef, ElementType } from 'react';\nimport { Tab, TabProps } from '@mui/material';\n\nexport interface SecondaryNavigationItemProps extends Omit<TabProps<ElementType>, 'children'> {\n  /**\n   * Displayed navigation text, can be provided as children as well\n   */\n  label?: ReactNode;\n  /**\n   * Displayed navigation text\n   */\n  children?: ReactNode;\n  /**\n   * Marks item currently active\n   * @deprecated\n   */\n  isActive?: boolean;\n}\n\n/**\n * Component to render styled button in the header\n */\nexport const SecondaryNavigationItem: FC<SecondaryNavigationItemProps> = forwardRef(\n  ({ children, label, isActive: _, ...rest }, ref) => {\n    // isActive is handled in SecondaryNavigation\n\n    return (\n      <Tab\n        label={children || label}\n        ref={ref as ForwardedRef<HTMLDivElement>}\n        data-testid=\"SecondaryNavigationItem\"\n        {...rest}\n      />\n    );\n  },\n);\n"],"names":["SecondaryNavigationItem","forwardRef","_a","ref","children","label","isActive","_","rest","__rest","_jsx","jsx","Tab"],"mappings":"iHAsBa,MAAAA,EAA4DC,EAAUA,YACjF,CAACC,EAA2CC,KAA3C,IAAAC,SAAEA,EAAQC,MAAEA,EAAOC,SAAUC,GAACL,EAAKM,EAAnCC,EAAAA,OAAAP,EAAA,CAAA,WAAA,QAAA,aAGC,OACEQ,EAACC,IAAAC,EAAGA,mBACFP,MAAOD,GAAYC,EACnBF,IAAKA,EACO,cAAA,2BACRK,GACJ"}