@skodaflow/web-library 7.13.1 → 7.15.0

package/cjs/components/notification/Notification.d.ts

@@ -0,0 +1,81 @@
+import React, { ElementType, FC } from 'react';
+import { BoxProps, TypographyProps, StackProps, IconButtonProps, IconProps } from '@mui/material';
+export interface NotificationProps extends BoxProps<ElementType> {
+    /**
+     * headline of the notification
+     */
+    headline?: React.ReactNode;
+    /**
+     * Custom props for the headline
+     */
+    headlineProps?: TypographyProps<ElementType>;
+    /**
+     * Custom props for the title
+     */
+    titleProps?: TypographyProps<ElementType>;
+    /**
+     * Longer description of the notification
+     * @deprecated use prop children instead
+     */
+    description?: React.ReactNode;
+    /**
+     * Custom props for the description container
+     */
+    descriptionProps?: TypographyProps<ElementType>;
+    /**
+     * Custom props for the wrapper container
+     */
+    wrapperProps?: BoxProps<ElementType>;
+    /**
+     * Different color options for the notification
+     */
+    color?: 'white' | 'grey';
+    /**
+     * Indicates if the notification is new
+     */
+    isNew?: boolean;
+    /**
+     * Custom props for the header container
+     */
+    headerProps?: BoxProps<ElementType>;
+    /**
+     * Icon to display in the notification
+     */
+    icon?: React.ReactNode;
+    /**
+     * Custom props for the icon container
+     */
+    iconProps?: BoxProps<ElementType>;
+    /**
+     * Footer text for the notification
+     */
+    footer?: React.ReactNode;
+    /**
+     * Control Buttons to display in the notification
+     */
+    buttons?: React.ReactNode;
+    /**
+     * Custom props for the buttons container
+     */
+    buttonsProps?: StackProps<ElementType>;
+    /**
+     * Custom props for the footer container
+     */
+    footerProps?: TypographyProps<ElementType>;
+    /**
+     * Callback function when the notification is dismissed
+     */
+    onDismiss?: () => void;
+    /**
+     * Custom props for the close icon container
+     */
+    closeIconButtonProps?: IconButtonProps;
+    /**
+     * Custom props for the close icon
+     */
+    closeIconProps?: IconProps<ElementType>;
+}
+/**
+ * Component that renders an notification
+ */
+export declare const Notification: FC<NotificationProps>;

package/cjs/components/notification/Notification.js

@@ -0,0 +1,2 @@
+"use strict";var s=require("tslib"),i=require("react/jsx-runtime"),e=require("react"),t=require("@mui/material"),o=require("../label/label.js"),r=require("../icon/stroke/CloseIcon.js");const n=e.forwardRef(((e,n)=>{var{sx:a,headline:c,titleProps:l,titleWrapperProps:p,description:d,descriptionProps:x,wrapperProps:f,color:b,isNew:g,headerProps:h,icon:u,iconProps:j,footer:m,buttons:y,buttonsProps:w,footerProps:O,onDismiss:P,closeIconButtonProps:v,closeIconProps:_,children:N}=e,k=s.__rest(e,["sx","headline","titleProps","titleWrapperProps","description","descriptionProps","wrapperProps","color","isNew","headerProps","icon","iconProps","footer","buttons","buttonsProps","footerProps","onDismiss","closeIconButtonProps","closeIconProps","children"]);const I=null!=f?f:{},{sx:B}=I,C=s.__rest(I,["sx"]),q=null!=h?h:{},{sx:S}=q,W=s.__rest(q,["sx"]),D=null!=w?w:{},{sx:T}=D,z=s.__rest(D,["sx"]),L=null!=x?x:{},{sx:M}=L,R=s.__rest(L,["sx"]),F=null!=l?l:{},{sx:G}=F,V=s.__rest(F,["sx"]),A=null!=v?v:{},{sx:E}=A,H=s.__rest(A,["sx"]),J=null!=j?j:{},{sx:K}=J,Q=s.__rest(J,["sx"]);return i.jsxs(t.Box,Object.assign({ref:n,sx:Object.assign({backgroundColor:"grey"===b?"surface.primary":"background.primary",padding:"16px 16px 24px",display:"flex",flexDirection:"row",gap:2,position:"relative"},a),"data-testid":"Notification"},k,{children:[u&&i.jsx(t.Box,Object.assign({sx:Object.assign({display:"flex",justifyContent:"center",alignItems:"center",borderRadius:"50%",width:{xs:"32px",md:"56px"},height:{xs:"32px",md:"56px"},backgroundColor:"transparent.backdrop",flexShrink:"0",overflow:"hidden","& img":{width:"100%",height:"100%",objectFit:"cover"},"& .MuiSvgIcon-root":{width:{xs:"22px",md:"32px"},height:{xs:"22px",md:"32px"}}},K),"data-testid":"Notification.icon"},Q,{children:u})),i.jsxs(t.Box,Object.assign({sx:Object.assign({width:"100%",maxWidth:"100%",overflow:"hidden",display:"flex",gap:"4px",flexDirection:"column",padding:"4px","&:hover .notification-dismiss":{opacity:"1"}},B)},C,{children:[i.jsxs(t.Box,Object.assign({sx:Object.assign({display:"flex",alignItems:"center",justifyContent:"flex-start",gap:1},S)},W,{children:[g&&i.jsx(o.Label,{type:"indicator",variant:"neutral"}),i.jsx(t.Typography,Object.assign({variant:"subheadline",sx:Object.assign({whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis",flexGrow:"1",minWidth:"0"},G),"data-testid":"Notification.headline"},V,{children:c})),P&&i.jsx(t.IconButton,Object.assign({"aria-label":"Dismiss notification",onClick:P,size:"small",className:"notification-dismiss",sx:Object.assign({padding:"2px",opacity:{xs:"1",md:"0"},"&.Mui-focusVisible":{opacity:"1"}},E),"data-testid":"Notification.dismiss"},H,{children:i.jsx(r.CloseIcon,Object.assign({fontSize:"small",className:"ballotx",name:"close"},_))}))]})),i.jsx(t.Box,{"data-testid":"Notification.description",children:"string"==typeof N||"string"==typeof d?i.jsx(t.Typography,Object.assign({sx:Object.assign({overflow:"hidden",textOverflow:"ellipsis",display:"-webkit-box",WebkitLineClamp:"2",WebkitBoxOrient:"vertical"},M),variant:"disclaimer1"},R,{children:N||d})):N||d}),m&&i.jsx(t.Typography,Object.assign({variant:"disclaimer1",color:"onSurface.os600","data-testid":"Notification.footer"},O,{children:m})),y&&i.jsx(t.Stack,Object.assign({direction:"row",sx:Object.assign({mt:1.5},T),spacing:1,"data-testid":"Notification.buttons"},z,{children:y}))]}))]}))}));exports.Notification=n;
+//# sourceMappingURL=Notification.js.map

package/cjs/components/notification/Notification.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Notification.js","sources":["../../../../../src/components/notification/Notification.tsx"],"sourcesContent":["import React, { ElementType, FC, forwardRef } from 'react';\nimport {\n  Box,\n  BoxProps,\n  Typography,\n  TypographyProps,\n  Stack,\n  IconButton,\n  StackProps,\n  IconButtonProps,\n  IconProps,\n} from '@mui/material';\nimport { Label } from '@/src/components/label/label';\nimport { CloseIcon } from '@/src/components/icon/stroke/CloseIcon';\n\nexport interface NotificationProps extends BoxProps<ElementType> {\n  /**\n   * headline of the notification\n   */\n  headline?: React.ReactNode;\n  /**\n   * Custom props for the headline\n   */\n  headlineProps?: TypographyProps<ElementType>;\n  /**\n   * Custom props for the title\n   */\n  titleProps?: TypographyProps<ElementType>;\n  /**\n   * Longer description of the notification\n   * @deprecated use prop children instead\n   */\n  description?: React.ReactNode;\n  /**\n   * Custom props for the description container\n   */\n  descriptionProps?: TypographyProps<ElementType>;\n  /**\n   * Custom props for the wrapper container\n   */\n  wrapperProps?: BoxProps<ElementType>;\n  /**\n   * Different color options for the notification\n   */\n  color?: 'white' | 'grey';\n  /**\n   * Indicates if the notification is new\n   */\n  isNew?: boolean;\n  /**\n   * Custom props for the header container\n   */\n  headerProps?: BoxProps<ElementType>;\n  /**\n   * Icon to display in the notification\n   */\n  icon?: React.ReactNode;\n  /**\n   * Custom props for the icon container\n   */\n  iconProps?: BoxProps<ElementType>;\n  /**\n   * Footer text for the notification\n   */\n  footer?: React.ReactNode;\n  /**\n   * Control Buttons to display in the notification\n   */\n  buttons?: React.ReactNode;\n  /**\n   * Custom props for the buttons container\n   */\n  buttonsProps?: StackProps<ElementType>;\n  /**\n   * Custom props for the footer container\n   */\n  footerProps?: TypographyProps<ElementType>;\n  /**\n   * Callback function when the notification is dismissed\n   */\n  onDismiss?: () => void;\n  /**\n   * Custom props for the close icon container\n   */\n  closeIconButtonProps?: IconButtonProps;\n  /**\n   * Custom props for the close icon\n   */\n  closeIconProps?: IconProps<ElementType>;\n}\n\n/**\n * Component that renders an notification\n */\nexport const Notification: FC<NotificationProps> = forwardRef(\n  (\n    {\n      sx,\n      headline,\n      titleProps,\n      titleWrapperProps,\n      description,\n      descriptionProps,\n      wrapperProps,\n      color,\n      isNew,\n      headerProps,\n      icon,\n      iconProps,\n      footer,\n      buttons,\n      buttonsProps,\n      footerProps,\n      onDismiss,\n      closeIconButtonProps,\n      closeIconProps,\n      children,\n      ...rest\n    },\n    ref,\n  ) => {\n    const { sx: wrapperSx, ...restWrapper } = wrapperProps ?? {};\n    const { sx: headerSx, ...restHeader } = headerProps ?? {};\n    const { sx: buttonsSx, ...restButtons } = buttonsProps ?? {};\n    const { sx: descriptionSx, ...restDescription } = descriptionProps ?? {};\n    const { sx: titleSx, ...restTitle } = titleProps ?? {};\n    const { sx: closeIconButtonSx, ...restCloseIconButton } = closeIconButtonProps ?? {};\n\n    const { sx: iconSx, ...restIcon } = iconProps ?? {};\n    return (\n      <Box\n        ref={ref}\n        sx={{\n          backgroundColor: color === 'grey' ? 'surface.primary' : 'background.primary',\n          padding: '16px 16px 24px',\n          display: 'flex',\n          flexDirection: 'row',\n          gap: 2,\n          position: 'relative',\n          ...sx,\n        }}\n        data-testid=\"Notification\"\n        {...rest}\n      >\n        {icon && (\n          <Box\n            sx={{\n              display: 'flex',\n              justifyContent: 'center',\n              alignItems: 'center',\n              borderRadius: '50%',\n              width: { xs: '32px', md: '56px' },\n              height: { xs: '32px', md: '56px' },\n              backgroundColor: 'transparent.backdrop',\n              flexShrink: '0',\n              overflow: 'hidden',\n              '& img': { width: '100%', height: '100%', objectFit: 'cover' },\n              '& .MuiSvgIcon-root': {\n                width: { xs: '22px', md: '32px' },\n                height: { xs: '22px', md: '32px' },\n              },\n              ...iconSx,\n            }}\n            data-testid=\"Notification.icon\"\n            {...restIcon}\n          >\n            {icon}\n          </Box>\n        )}\n        <Box\n          sx={{\n            width: '100%',\n            maxWidth: '100%',\n            overflow: 'hidden',\n            display: 'flex',\n            gap: '4px',\n            flexDirection: 'column',\n            // Small padding to prevent focus ring trimming\n            padding: '4px',\n            // show dismiss button on hover Desktop + Tablet\n            '&:hover .notification-dismiss': {\n              opacity: '1',\n            },\n            ...wrapperSx,\n          }}\n          {...restWrapper}\n        >\n          <Box\n            sx={{ display: 'flex', alignItems: 'center', justifyContent: 'flex-start', gap: 1, ...headerSx }}\n            {...restHeader}\n          >\n            {isNew && <Label type=\"indicator\" variant=\"neutral\" />}\n\n            <Typography\n              variant=\"subheadline\"\n              sx={{\n                whiteSpace: 'nowrap',\n                overflow: 'hidden',\n                textOverflow: 'ellipsis',\n                flexGrow: '1',\n                minWidth: '0',\n                ...titleSx,\n              }}\n              data-testid=\"Notification.headline\"\n              {...restTitle}\n            >\n              {headline}\n            </Typography>\n\n            {onDismiss && (\n              <IconButton\n                aria-label=\"Dismiss notification\"\n                onClick={onDismiss}\n                size=\"small\"\n                className=\"notification-dismiss\"\n                sx={{\n                  padding: '2px',\n                  // hide dismiss button Desktop + Tablet, keep on mobile\n                  opacity: { xs: '1', md: '0' },\n                  // show dismiss button on focus\n                  '&.Mui-focusVisible': {\n                    opacity: '1',\n                  },\n                  ...closeIconButtonSx,\n                }}\n                data-testid=\"Notification.dismiss\"\n                {...restCloseIconButton}\n              >\n                <CloseIcon fontSize=\"small\" className=\"ballotx\" name=\"close\" {...closeIconProps} />\n              </IconButton>\n            )}\n          </Box>\n          <Box data-testid=\"Notification.description\">\n            {typeof children === 'string' || typeof description === 'string' ? (\n              <Typography\n                sx={{\n                  overflow: 'hidden',\n                  textOverflow: 'ellipsis',\n                  display: '-webkit-box',\n                  WebkitLineClamp: '2',\n                  WebkitBoxOrient: 'vertical',\n                  ...descriptionSx,\n                }}\n                variant=\"disclaimer1\"\n                {...restDescription}\n              >\n                {children || description}\n              </Typography>\n            ) : (\n              children || description\n            )}\n          </Box>\n          {footer && (\n            <Typography\n              variant=\"disclaimer1\"\n              color={'onSurface.os600'}\n              data-testid=\"Notification.footer\"\n              {...footerProps}\n            >\n              {footer}\n            </Typography>\n          )}\n          {buttons && (\n            <Stack\n              direction=\"row\"\n              sx={{ mt: 1.5, ...buttonsSx }}\n              spacing={1}\n              data-testid=\"Notification.buttons\"\n              {...restButtons}\n            >\n              {buttons}\n            </Stack>\n          )}\n        </Box>\n      </Box>\n    );\n  },\n);\n"],"names":["Notification","forwardRef","_a","ref","sx","headline","titleProps","titleWrapperProps","description","descriptionProps","wrapperProps","color","isNew","headerProps","icon","iconProps","footer","buttons","buttonsProps","footerProps","onDismiss","closeIconButtonProps","closeIconProps","children","rest","__rest","_b","wrapperSx","restWrapper","_c","headerSx","restHeader","_d","buttonsSx","restButtons","_e","descriptionSx","restDescription","_f","titleSx","restTitle","_g","closeIconButtonSx","restCloseIconButton","_h","iconSx","restIcon","_jsxs","Box","Object","assign","backgroundColor","padding","display","flexDirection","gap","position","_jsx","justifyContent","alignItems","borderRadius","width","xs","md","height","flexShrink","overflow","objectFit","maxWidth","opacity","Label","type","variant","jsx","Typography","whiteSpace","textOverflow","flexGrow","minWidth","IconButton","onClick","size","className","CloseIcon","fontSize","name","WebkitLineClamp","WebkitBoxOrient","Stack","direction","mt","spacing"],"mappings":"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"}

package/cjs/components/notification/NotificationButton.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { ButtonProps } from '@mui/material';
+export interface NotificationButtonProps extends ButtonProps {
+}
+/**
+ * NotificationButton is a proxy component to <Button variant="outline" size="small" color="secondary" />
+ */
+export declare const NotificationButton: React.FC<NotificationButtonProps>;

package/cjs/components/notification/NotificationButton.js

@@ -0,0 +1,2 @@
+"use strict";var r=require("react/jsx-runtime"),e=require("react"),t=require("@mui/material");const i=e.forwardRef(((e,i)=>r.jsx(t.Button,Object.assign({ref:i,variant:"outlined",size:"small",color:"secondary"},e))));exports.NotificationButton=i;
+//# sourceMappingURL=NotificationButton.js.map

package/cjs/components/notification/NotificationButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NotificationButton.js","sources":["../../../../../src/components/notification/NotificationButton.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { Button, ButtonProps } from '@mui/material';\n\nexport interface NotificationButtonProps extends ButtonProps {}\n\n/**\n * NotificationButton is a proxy component to <Button variant=\"outline\" size=\"small\" color=\"secondary\" />\n */\nexport const NotificationButton: React.FC<NotificationButtonProps> = forwardRef((props, ref) => {\n  return <Button ref={ref} variant=\"outlined\" size=\"small\" color=\"secondary\" {...props} />;\n});\n"],"names":["NotificationButton","forwardRef","props","ref","_jsx","Button","Object","assign","variant","size","color"],"mappings":"8FAQa,MAAAA,EAAwDC,EAAUA,YAAC,CAACC,EAAOC,IAC/EC,EAAAA,IAACC,EAAAA,OAAOC,OAAAC,OAAA,CAAAJ,IAAKA,EAAKK,QAAQ,WAAWC,KAAK,QAAQC,MAAM,aAAgBR"}

package/cjs/components/notification/NotificationCenter.d.ts

@@ -0,0 +1,53 @@
+import React, { ElementType, FC } from 'react';
+import { BoxProps, ButtonProps, IconButtonProps, IconProps, TypographyProps } from '@mui/material';
+export interface NotificationCenterProps extends BoxProps<ElementType> {
+    /**
+     * Title of the notification center
+     */
+    title?: React.ReactNode;
+    /**
+     * Custom props for the header
+     */
+    headerProps?: BoxProps<ElementType>;
+    /**
+     * Custom props for the title
+     */
+    titleProps?: TypographyProps<ElementType>;
+    /**
+     * Text for the dismiss all button
+     */
+    dismissAllText?: React.ReactNode;
+    /**
+     * Callback function when the dismiss all button is clicked
+     */
+    onDismissAll?: () => void;
+    /**
+     * Callback function when the close button is clicked
+     */
+    onClose?: () => void;
+    /**
+     * Max Height of the notification center
+     */
+    height?: number | string;
+    /**
+     * Custom props for the icon button
+     */
+    iconButtonProps?: IconButtonProps;
+    /**
+     * Custom props for the close icon
+     */
+    iconProps?: IconProps<ElementType>;
+    /**
+     * Custom props for the container
+     */
+    containerProps?: BoxProps<ElementType>;
+    /**
+     * Custom props for the dismiss box
+     */
+    dismissBoxProps?: BoxProps<ElementType>;
+    /**
+     * Custom props for the dismiss button
+     */
+    dismissButtonProps?: ButtonProps<ElementType>;
+}
+export declare const NotificationCenter: FC<NotificationCenterProps>;

package/cjs/components/notification/NotificationCenter.js

@@ -0,0 +1,2 @@
+"use strict";var s=require("tslib"),t=require("react/jsx-runtime"),i=require("react"),e=require("@mui/material"),o=require("../icon/stroke/CloseIcon.js");const n=i.forwardRef(((i,n)=>{var{children:r,sx:a,title:l="Notifications",headerProps:x,titleProps:c,dismissAllText:d="Dismiss All",onDismissAll:p,onClose:u,iconButtonProps:m,iconProps:b,containerProps:f,dismissBoxProps:g,dismissButtonProps:j,height:h=556}=i,C=s.__rest(i,["children","sx","title","headerProps","titleProps","dismissAllText","onDismissAll","onClose","iconButtonProps","iconProps","containerProps","dismissBoxProps","dismissButtonProps","height"]);const P=null!=x?x:{},{sx:B}=P,O=s.__rest(P,["sx"]),y=null!=f?f:{},{sx:N}=y,_=s.__rest(y,["sx"]),v=null!=g?g:{},{sx:w}=v,k=s.__rest(v,["sx"]),q=null!=m?m:{},{sx:A}=q,D=s.__rest(q,["sx"]);return t.jsxs(e.Box,Object.assign({ref:n,sx:Object.assign({display:"flex",flexDirection:"column",width:{xs:"100%",sm:"360px",md:"440px"},borderRadius:{xs:"0px",sm:"8px"},backgroundColor:"background.primary",color:"text.primary",boxShadow:"0px 5px 6px 1px rgba(0, 0, 0, 0.18), 0px -1px 4px 0px rgba(0, 0, 0, 0.1)",overflow:"hidden",maxHeight:(z=h,"string"==typeof z&&z.includes("px")?z:`${z}px`)},a),"data-testid":"NotificationCenter"},C,{children:[t.jsxs(e.Box,Object.assign({sx:Object.assign({padding:"16px 8px 16px 16px",display:"flex",justifyContent:"space-between"},B)},O,{children:[t.jsx(e.Typography,Object.assign({variant:"h4",component:"span","data-testid":"NotificationCenter.title"},c,{children:l})),u&&t.jsx(e.IconButton,Object.assign({"aria-label":"onClose notificationCenter",onClick:u,size:"medium",className:"notificationCenter-onClose",sx:Object.assign({padding:"4px"},A),"data-testid":"NotificationCenter.onClose"},D,{children:t.jsx(o.CloseIcon,Object.assign({fontSize:"medium",className:"ballotx"},b))}))]})),p&&t.jsx(e.Box,Object.assign({sx:Object.assign({padding:"0 8px 4px 16px",display:"flex",justifyContent:"flex-end"},w)},k,{children:t.jsx(e.Button,Object.assign({onClick:p,size:"small",color:"secondary",variant:"text","data-testid":"NotificationCenter.dismiss"},j,{children:d}))})),t.jsx(e.Box,Object.assign({sx:Object.assign({overflowY:"auto",'& [data-testid="Notification"]:not(:last-child)':{borderBottom:1,borderColor:"surface.secondary"}},N),"data-testid":"NotificationCenter.content"},_,{children:r}))]}));var z}));exports.NotificationCenter=n;
+//# sourceMappingURL=NotificationCenter.js.map

package/cjs/components/notification/NotificationCenter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NotificationCenter.js","sources":["../../../../../src/components/notification/NotificationCenter.tsx"],"sourcesContent":["import React, { ElementType, forwardRef, FC } from 'react';\nimport {\n  Box,\n  Button,\n  BoxProps,\n  ButtonProps,\n  IconButton,\n  IconButtonProps,\n  IconProps,\n  Typography,\n  TypographyProps,\n} from '@mui/material';\nimport { CloseIcon } from '@/src/components/icon/stroke/CloseIcon';\n\nexport interface NotificationCenterProps extends BoxProps<ElementType> {\n  /**\n   * Title of the notification center\n   */\n  title?: React.ReactNode;\n  /**\n   * Custom props for the header\n   */\n  headerProps?: BoxProps<ElementType>;\n  /**\n   * Custom props for the title\n   */\n  titleProps?: TypographyProps<ElementType>;\n  /**\n   * Text for the dismiss all button\n   */\n  dismissAllText?: React.ReactNode;\n  /**\n   * Callback function when the dismiss all button is clicked\n   */\n  onDismissAll?: () => void;\n  /**\n   * Callback function when the close button is clicked\n   */\n  onClose?: () => void;\n  /**\n   * Max Height of the notification center\n   */\n  height?: number | string;\n  /**\n   * Custom props for the icon button\n   */\n  iconButtonProps?: IconButtonProps;\n  /**\n   * Custom props for the close icon\n   */\n  iconProps?: IconProps<ElementType>;\n  /**\n   * Custom props for the container\n   */\n  containerProps?: BoxProps<ElementType>;\n  /**\n   * Custom props for the dismiss box\n   */\n  dismissBoxProps?: BoxProps<ElementType>;\n  /**\n   * Custom props for the dismiss button\n   */\n  dismissButtonProps?: ButtonProps<ElementType>;\n}\n\nexport const NotificationCenter: FC<NotificationCenterProps> = forwardRef(\n  (\n    {\n      children,\n      sx,\n      title = 'Notifications',\n      headerProps,\n      titleProps,\n      dismissAllText = 'Dismiss All',\n      onDismissAll,\n      onClose,\n      iconButtonProps,\n      iconProps,\n      containerProps,\n      dismissBoxProps,\n      dismissButtonProps,\n      height = 556,\n      ...rest\n    },\n    ref,\n  ) => {\n    const { sx: headerSx, ...restHeader } = headerProps ?? {};\n    const { sx: containerSx, ...restContainer } = containerProps ?? {};\n    const { sx: dismissBoxSx, ...restDismissBox } = dismissBoxProps ?? {};\n    const { sx: iconButtonSx, ...restIconButton } = iconButtonProps ?? {};\n\n    const formatHeight = (heightValue: number | string) => {\n      if (typeof heightValue === 'string' && heightValue.includes('px')) {\n        return heightValue;\n      }\n      // if typeof heightValue === 'number', or string without 'px'\n      return `${heightValue}px`;\n    };\n\n    return (\n      <Box\n        ref={ref}\n        sx={{\n          display: 'flex',\n          flexDirection: 'column',\n          width: { xs: '100%', sm: '360px', md: '440px' },\n          borderRadius: { xs: '0px', sm: '8px' },\n          backgroundColor: 'background.primary',\n          color: 'text.primary',\n          boxShadow: '0px 5px 6px 1px rgba(0, 0, 0, 0.18), 0px -1px 4px 0px rgba(0, 0, 0, 0.1)',\n          overflow: 'hidden',\n          maxHeight: formatHeight(height),\n          ...sx,\n        }}\n        data-testid=\"NotificationCenter\"\n        {...rest}\n      >\n        <Box\n          sx={{\n            padding: '16px 8px 16px 16px',\n            display: 'flex',\n            justifyContent: 'space-between',\n            ...headerSx,\n          }}\n          {...restHeader}\n        >\n          <Typography variant=\"h4\" component=\"span\" data-testid=\"NotificationCenter.title\" {...titleProps}>\n            {title}\n          </Typography>\n          {onClose && (\n            <IconButton\n              aria-label=\"onClose notificationCenter\"\n              onClick={onClose}\n              size=\"medium\"\n              className=\"notificationCenter-onClose\"\n              sx={{\n                padding: '4px',\n                ...iconButtonSx,\n              }}\n              data-testid=\"NotificationCenter.onClose\"\n              {...restIconButton}\n            >\n              <CloseIcon fontSize=\"medium\" className=\"ballotx\" {...iconProps} />\n            </IconButton>\n          )}\n        </Box>\n\n        {onDismissAll && (\n          <Box\n            sx={{\n              padding: '0 8px 4px 16px',\n              display: 'flex',\n              justifyContent: 'flex-end',\n              ...dismissBoxSx,\n            }}\n            {...restDismissBox}\n          >\n            <Button\n              onClick={onDismissAll}\n              size=\"small\"\n              color=\"secondary\"\n              variant=\"text\"\n              data-testid=\"NotificationCenter.dismiss\"\n              {...dismissButtonProps}\n            >\n              {dismissAllText}\n            </Button>\n          </Box>\n        )}\n        <Box\n          sx={{\n            overflowY: 'auto',\n            // add divider between notifications\n            '& [data-testid=\"Notification\"]:not(:last-child)': {\n              borderBottom: 1,\n              borderColor: 'surface.secondary',\n            },\n            ...containerSx,\n          }}\n          data-testid=\"NotificationCenter.content\"\n          {...restContainer}\n        >\n          {children}\n        </Box>\n      </Box>\n    );\n  },\n);\n"],"names":["NotificationCenter","forwardRef","_a","ref","children","sx","title","headerProps","titleProps","dismissAllText","onDismissAll","onClose","iconButtonProps","iconProps","containerProps","dismissBoxProps","dismissButtonProps","height","rest","__rest","_b","headerSx","restHeader","_c","containerSx","restContainer","_d","dismissBoxSx","restDismissBox","_e","iconButtonSx","restIconButton","_jsxs","jsxs","Box","Object","assign","display","flexDirection","width","xs","sm","md","borderRadius","backgroundColor","color","boxShadow","overflow","maxHeight","heightValue","includes","padding","justifyContent","_jsx","Typography","variant","component","IconButton","onClick","size","className","CloseIcon","fontSize","jsx","Button","overflowY","borderBottom","borderColor"],"mappings":"0JAiEa,MAAAA,EAAkDC,EAAUA,YACvE,CACEC,EAiBAC,KAjBA,IAAAC,SACEA,EAAQC,GACRA,EAAEC,MACFA,EAAQ,gBAAeC,YACvBA,EAAWC,WACXA,EAAUC,eACVA,EAAiB,cAAaC,aAC9BA,EAAYC,QACZA,EAAOC,gBACPA,EAAeC,UACfA,EAASC,eACTA,EAAcC,gBACdA,EAAeC,mBACfA,EAAkBC,OAClBA,EAAS,KAAGf,EACTgB,EAAIC,EAAAA,OAAAjB,EAfT,+LAmBA,MAAMkB,EAAkCb,QAAAA,EAAe,IAA/CF,GAAIgB,GAA6CD,EAAhCE,EAAnBH,EAAAA,OAAAC,EAAA,CAAA,OACAG,EAAwCT,QAAAA,EAAkB,IAAxDT,GAAImB,GAAsDD,EAAtCE,EAAtBN,EAAAA,OAAAI,EAAA,CAAA,OACAG,EAA0CX,QAAAA,EAAmB,IAA3DV,GAAIsB,GAAyDD,EAAxCE,EAAvBT,EAAAA,OAAAO,EAAA,CAAA,OACAG,EAA0CjB,QAAAA,EAAmB,IAA3DP,GAAIyB,GAAyDD,EAAxCE,EAAvBZ,EAAAA,OAAAU,EAAA,CAAA,OAUN,OACEG,EAACC,KAAAC,MACCC,OAAAC,OAAA,CAAAjC,IAAKA,EACLE,GAAE8B,OAAAC,OAAA,CACAC,QAAS,OACTC,cAAe,SACfC,MAAO,CAAEC,GAAI,OAAQC,GAAI,QAASC,GAAI,SACtCC,aAAc,CAAEH,GAAI,MAAOC,GAAI,OAC/BG,gBAAiB,qBACjBC,MAAO,eACPC,UAAW,2EACXC,SAAU,SACVC,WApBgBC,EAoBQhC,EAnBD,iBAAhBgC,GAA4BA,EAAYC,SAAS,MACnDD,EAGF,GAAGA,QAgBH5C,GAAE,cAEK,sBACRa,EAAI,CAAAd,SAAA,CAER4B,OAACE,EAAGA,IAAAC,OAAAC,OAAA,CACF/B,GAAE8B,OAAAC,OAAA,CACAe,QAAS,qBACTd,QAAS,OACTe,eAAgB,iBACb/B,IAEDC,EAAU,CAAAlB,SAAA,CAEdiD,EAAAA,IAACC,EAAUA,WAAAnB,OAAAC,OAAA,CAACmB,QAAQ,KAAKC,UAAU,OAAM,cAAa,4BAA+BhD,EAAU,CAAAJ,SAC5FE,KAEFK,GACC0C,EAAAA,IAACI,EAAUA,WACEtB,OAAAC,OAAA,CAAA,aAAA,6BACXsB,QAAS/C,EACTgD,KAAK,SACLC,UAAU,6BACVvD,GACE8B,OAAAC,OAAA,CAAAe,QAAS,OACNrB,GAAY,cAEL,8BACRC,EAAc,CAAA3B,SAElBiD,EAAAA,IAACQ,EAAAA,UAAS1B,OAAAC,OAAA,CAAC0B,SAAS,SAASF,UAAU,WAAc/C,WAK1DH,GACC2C,EAAAU,IAAC7B,EAAGA,IACFC,OAAAC,OAAA,CAAA/B,GACE8B,OAAAC,OAAA,CAAAe,QAAS,iBACTd,QAAS,OACTe,eAAgB,YACbzB,IAEDC,EAEJ,CAAAxB,SAAAiD,EAAAU,IAACC,SACC7B,OAAAC,OAAA,CAAAsB,QAAShD,EACTiD,KAAK,QACLd,MAAM,YACNU,QAAQ,OACI,cAAA,8BACRvC,YAEHP,QAIP4C,EAAAU,IAAC7B,MAAGC,OAAAC,OAAA,CACF/B,GAAE8B,OAAAC,OAAA,CACA6B,UAAW,OAEX,kDAAmD,CACjDC,aAAc,EACdC,YAAa,sBAEZ3C,GAEO,cAAA,8BACRC,YAEHrB,SA3Fc,IAAC6C,CA6Fd"}

package/cjs/components/notification/NotificationCenterCategory.d.ts

@@ -0,0 +1,24 @@
+import React, { ElementType, FC } from 'react';
+import { BoxProps, TypographyProps } from '@mui/material';
+export interface NotificationCenterCategoryProps extends BoxProps<ElementType> {
+    /**
+     * Title of the notification
+     */
+    title: React.ReactNode;
+    /**
+     * Custom props for the header
+     */
+    headerProps?: BoxProps<ElementType>;
+    /**
+     * Custom props for the title
+     */
+    titleProps?: TypographyProps<ElementType>;
+    /**
+     * Custom props for the container
+     */
+    containerProps?: BoxProps<ElementType>;
+}
+/**
+ * Component that renders a category in the Notification Center
+ */
+export declare const NotificationCenterCategory: FC<NotificationCenterCategoryProps>;

package/cjs/components/notification/NotificationCenterCategory.js

@@ -0,0 +1,2 @@
+"use strict";var t=require("tslib"),e=require("react/jsx-runtime"),r=require("react"),i=require("@mui/material");const o=r.forwardRef(((r,o)=>{var{title:a,headerProps:s,titleProps:n,containerProps:c,children:d}=r,l=t.__rest(r,["title","headerProps","titleProps","containerProps","children"]);const p=null!=n?n:{},{sx:u}=p,x=t.__rest(p,["sx"]);return e.jsxs(i.Box,Object.assign({"data-testid":"NotificationCenterCategory"},l,{ref:o,children:[e.jsx(i.Typography,Object.assign({variant:"caption2",sx:Object.assign({pl:1,pt:2,pb:1,display:"block",borderBottom:1,borderColor:"surface.secondary"},u),"data-testid":"NotificationCenterCategory.title"},x,{children:a})),e.jsx(i.Box,Object.assign({"data-testid":"NotificationCenterCategory.content"},c,{children:d}))]}))}));exports.NotificationCenterCategory=o;
+//# sourceMappingURL=NotificationCenterCategory.js.map

package/cjs/components/notification/NotificationCenterCategory.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NotificationCenterCategory.js","sources":["../../../../../src/components/notification/NotificationCenterCategory.tsx"],"sourcesContent":["import React, { ElementType, forwardRef, FC } from 'react';\nimport { Box, BoxProps, Typography, TypographyProps } from '@mui/material';\n\nexport interface NotificationCenterCategoryProps extends BoxProps<ElementType> {\n  /**\n   * Title of the notification\n   */\n  title: React.ReactNode;\n  /**\n   * Custom props for the header\n   */\n  headerProps?: BoxProps<ElementType>;\n  /**\n   * Custom props for the title\n   */\n  titleProps?: TypographyProps<ElementType>;\n  /**\n   * Custom props for the container\n   */\n  containerProps?: BoxProps<ElementType>;\n}\n\n/**\n * Component that renders a category in the Notification Center\n */\nexport const NotificationCenterCategory: FC<NotificationCenterCategoryProps> = forwardRef(\n  ({ title, headerProps, titleProps, containerProps, children, ...rest }, ref) => {\n    const { sx: titleSx, ...restTitle } = titleProps ?? {};\n\n    return (\n      <Box data-testid=\"NotificationCenterCategory\" {...rest} ref={ref}>\n        <Typography\n          variant=\"caption2\"\n          sx={{\n            pl: 1,\n            pt: 2,\n            pb: 1,\n            display: 'block',\n            borderBottom: 1,\n            borderColor: 'surface.secondary',\n            ...titleSx,\n          }}\n          data-testid=\"NotificationCenterCategory.title\"\n          {...restTitle}\n        >\n          {title}\n        </Typography>\n        <Box data-testid=\"NotificationCenterCategory.content\" {...containerProps}>\n          {children}\n        </Box>\n      </Box>\n    );\n  },\n);\n"],"names":["NotificationCenterCategory","forwardRef","_a","ref","title","headerProps","titleProps","containerProps","children","rest","__rest","_b","sx","titleSx","restTitle","_jsxs","jsxs","Box","Object","assign","_jsx","Typography","variant","pl","pt","pb","display","borderBottom","borderColor"],"mappings":"iHAyBa,MAAAA,EAAkEC,EAAUA,YACvF,CAACC,EAAuEC,KAAvE,IAAAC,MAAEA,EAAKC,YAAEA,EAAWC,WAAEA,EAAUC,eAAEA,EAAcC,SAAEA,GAAmBN,EAANO,EAAIC,EAAAA,OAAAR,EAAnE,kEACC,MAAMS,EAAgCL,QAAAA,EAAc,IAA5CM,GAAIC,GAA0CF,EAA9BG,EAAlBJ,EAAAA,OAAAC,EAAA,CAAA,OAEN,OACEI,EAAAC,KAACC,EAAGA,IAAAC,OAAAC,OAAA,CAAA,cAAa,8BAAiCV,EAAI,CAAEN,IAAKA,EAAGK,SAAA,CAC9DY,MAACC,aAAUH,OAAAC,OAAA,CACTG,QAAQ,WACRV,GAAEM,OAAAC,OAAA,CACAI,GAAI,EACJC,GAAI,EACJC,GAAI,EACJC,QAAS,QACTC,aAAc,EACdC,YAAa,qBACVf,iBAEO,oCACRC,EAAS,CAAAN,SAEZJ,KAEHgB,EAAAA,IAACH,EAAAA,IAAgBC,OAAAC,OAAA,CAAA,cAAA,sCAAyCZ,EACvD,CAAAC,SAAAA,QAEC"}

package/cjs/components/notification/NotificationCenterHeaderButton.d.ts

@@ -0,0 +1,51 @@
+import { FC, ReactNode } from 'react';
+import { HeaderButtonProps } from '@/src/components/header/HeaderButton';
+import { ClickAwayListenerProps, PopperProps, FadeProps } from '@mui/material';
+import { NotificationCenterProps } from './NotificationCenter';
+export interface NotificationCenterHeaderButtonProps extends NotificationCenterProps {
+    /**
+     * Label for the tooltip or the text button
+     */
+    label?: HeaderButtonProps['label'];
+    /**
+     * Change icon button with tooltip into button
+     */
+    extend?: boolean;
+    /**
+     * Properties applied to tooltip
+     */
+    tooltipProps?: HeaderButtonProps['tooltipProps'];
+    /**
+     * Properties applied to badge
+     */
+    badgeProps?: HeaderButtonProps['badgeProps'];
+    /**
+     * @deprecated use badgeProps instead
+     */
+    indicator?: HeaderButtonProps['indicator'];
+    /**
+     * Props applied to HeaderButton
+     */
+    headerButtonProps?: HeaderButtonProps;
+    /**
+     * Icon for the HeaderButton
+     * @default BellIcon
+     */
+    icon?: ReactNode;
+    /**
+     * Props for the Popper component
+     */
+    popperProps?: PopperProps;
+    /**
+     * Props applied to ClickAwayListener
+     */
+    clickAwayListenerProps?: ClickAwayListenerProps;
+    /**
+     * Props applied to Fade
+     */
+    fadeProps?: FadeProps;
+}
+/**
+ * HeaderButton that opens NotificationCenter
+ */
+export declare const NotificationCenterHeaderButton: FC<NotificationCenterHeaderButtonProps>;

package/cjs/components/notification/NotificationCenterHeaderButton.js

@@ -0,0 +1,2 @@
+"use strict";var e=require("tslib"),r=require("react/jsx-runtime"),t=require("react"),i=require("../header/HeaderButton.js"),n=require("../icon/stroke/BellIcon.js"),o=require("@mui/material"),s=require("./NotificationCenter.js");const a=t.forwardRef(((a,c)=>{var{popperProps:l,clickAwayListenerProps:p,fadeProps:d,label:u="Notifications",extend:j,tooltipProps:x,badgeProps:b,indicator:f,headerButtonProps:P,icon:g,onClick:h}=a,B=e.__rest(a,["popperProps","clickAwayListenerProps","fadeProps","label","extend","tooltipProps","badgeProps","indicator","headerButtonProps","icon","onClick"]);const[C,k]=t.useState(null),m=null!=l?l:{},{sx:O}=m,q=e.__rest(m,["sx"]);return r.jsxs(r.Fragment,{children:[r.jsx(i.HeaderButton,Object.assign({label:u,extend:null!=j&&j,tooltipProps:Object.assign(Object.assign({},C&&{open:!1}),x),badgeProps:b,indicator:f,onClick:e=>{null==h||h(e),k(e.currentTarget)},ref:c,"data-testid":"NotificationCenterHeaderButton"},P,{children:g||r.jsx(n.BellIcon,{})})),r.jsx(o.Popper,Object.assign({open:!!C,anchorEl:C,placement:"bottom-end",modifiers:[{name:"offset",options:{offset:[0,18]}}],transition:!0,sx:Object.assign({zIndex:e=>e.zIndex.appBar+10},O)},q,{children:({TransitionProps:e})=>r.jsx(o.ClickAwayListener,Object.assign({onClickAway:()=>k(null)},p,{children:r.jsx(o.Fade,Object.assign({},e,d,{children:r.jsx(s.NotificationCenter,Object.assign({},B,{ref:void 0}))}))}))}))]})}));exports.NotificationCenterHeaderButton=a;
+//# sourceMappingURL=NotificationCenterHeaderButton.js.map

package/cjs/components/notification/NotificationCenterHeaderButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NotificationCenterHeaderButton.js","sources":["../../../../../src/components/notification/NotificationCenterHeaderButton.tsx"],"sourcesContent":["import React, { FC, forwardRef, ReactNode, useState } from 'react';\nimport { HeaderButton, HeaderButtonProps } from '@/src/components/header/HeaderButton';\nimport { BellIcon } from '@/src/components/icon/stroke/BellIcon';\nimport { Fade, ClickAwayListener, ClickAwayListenerProps, Popper, PopperProps, FadeProps } from '@mui/material';\nimport { NotificationCenter, NotificationCenterProps } from './NotificationCenter';\n\nexport interface NotificationCenterHeaderButtonProps extends NotificationCenterProps {\n  /**\n   * Label for the tooltip or the text button\n   */\n  label?: HeaderButtonProps['label'];\n  /**\n   * Change icon button with tooltip into button\n   */\n  extend?: boolean;\n  /**\n   * Properties applied to tooltip\n   */\n  tooltipProps?: HeaderButtonProps['tooltipProps'];\n  /**\n   * Properties applied to badge\n   */\n  badgeProps?: HeaderButtonProps['badgeProps'];\n  /**\n   * @deprecated use badgeProps instead\n   */\n  indicator?: HeaderButtonProps['indicator'];\n  /**\n   * Props applied to HeaderButton\n   */\n  headerButtonProps?: HeaderButtonProps;\n  /**\n   * Icon for the HeaderButton\n   * @default BellIcon\n   */\n  icon?: ReactNode;\n  /**\n   * Props for the Popper component\n   */\n  popperProps?: PopperProps;\n  /**\n   * Props applied to ClickAwayListener\n   */\n  clickAwayListenerProps?: ClickAwayListenerProps;\n  /**\n   * Props applied to Fade\n   */\n  fadeProps?: FadeProps;\n}\n\n/**\n * HeaderButton that opens NotificationCenter\n */\nexport const NotificationCenterHeaderButton: FC<NotificationCenterHeaderButtonProps> = forwardRef(\n  (\n    {\n      popperProps,\n      clickAwayListenerProps,\n      fadeProps,\n      label = 'Notifications',\n      extend,\n      tooltipProps,\n      badgeProps,\n      indicator,\n      headerButtonProps,\n      icon,\n      onClick,\n      ...rest\n    },\n    ref,\n  ) => {\n    const [anchor, setAnchor] = useState(null);\n    const { sx: popperSx, ...restPopper } = popperProps ?? {};\n\n    return (\n      <>\n        <HeaderButton\n          label={label}\n          extend={extend ?? false}\n          tooltipProps={{\n            ...(anchor && { open: false }),\n            ...tooltipProps,\n          }}\n          badgeProps={badgeProps}\n          indicator={indicator}\n          onClick={(e) => {\n            onClick?.(e);\n            setAnchor(e.currentTarget);\n          }}\n          ref={ref}\n          data-testid=\"NotificationCenterHeaderButton\"\n          {...headerButtonProps}\n        >\n          {icon || <BellIcon />}\n        </HeaderButton>\n        <Popper\n          open={!!anchor}\n          anchorEl={anchor}\n          placement=\"bottom-end\"\n          modifiers={[\n            {\n              name: 'offset',\n              options: {\n                offset: [0, 18],\n              },\n            },\n          ]}\n          transition\n          sx={{\n            zIndex: (theme) => theme.zIndex.appBar + 10,\n            ...popperSx,\n          }}\n          {...restPopper}\n        >\n          {({ TransitionProps }) => (\n            <ClickAwayListener onClickAway={() => setAnchor(null)} {...clickAwayListenerProps}>\n              <Fade {...TransitionProps} {...fadeProps}>\n                <NotificationCenter {...rest} ref={undefined} />\n              </Fade>\n            </ClickAwayListener>\n          )}\n        </Popper>\n      </>\n    );\n  },\n);\n"],"names":["NotificationCenterHeaderButton","forwardRef","_a","ref","popperProps","clickAwayListenerProps","fadeProps","label","extend","tooltipProps","badgeProps","indicator","headerButtonProps","icon","onClick","rest","__rest","anchor","setAnchor","useState","_b","sx","popperSx","restPopper","_jsxs","_jsx","HeaderButton","Object","assign","open","e","currentTarget","children","BellIcon","Popper","anchorEl","placement","modifiers","name","options","offset","transition","zIndex","theme","appBar","TransitionProps","ClickAwayListener","onClickAway","jsx","Fade","NotificationCenter","undefined"],"mappings":"qOAqDa,MAAAA,EAA0EC,EAAUA,YAC/F,CACEC,EAcAC,KAdA,IAAAC,YACEA,EAAWC,uBACXA,EAAsBC,UACtBA,EAASC,MACTA,EAAQ,gBAAeC,OACvBA,EAAMC,aACNA,EAAYC,WACZA,EAAUC,UACVA,EAASC,kBACTA,EAAiBC,KACjBA,EAAIC,QACJA,GAAOZ,EACJa,EAZLC,EAAAA,OAAAd,EAAA,CAAA,cAAA,yBAAA,YAAA,QAAA,SAAA,eAAA,aAAA,YAAA,oBAAA,OAAA,YAgBA,MAAOe,EAAQC,GAAaC,EAAAA,SAAS,MAC/BC,EAAkChB,QAAAA,EAAe,IAA/CiB,GAAIC,GAA6CF,EAAhCG,EAAnBP,EAAAA,OAAAI,EAAA,CAAA,OAEN,OACEI,EAAAA,2BACEC,MAACC,EAAAA,4BACCnB,MAAOA,EACPC,OAAQA,SAAAA,EACRC,aAAYkB,OAAAC,OAAAD,OAAAC,OAAA,CAAA,EACNX,GAAU,CAAEY,MAAM,IACnBpB,GAELC,WAAYA,EACZC,UAAWA,EACXG,QAAUgB,IACRhB,SAAAA,EAAUgB,GACVZ,EAAUY,EAAEC,cAAc,EAE5B5B,IAAKA,gBACO,kCACRS,EAAiB,CAAAoB,SAEpBnB,GAAQY,EAAAA,IAACQ,EAAQA,SAAA,CAAA,MAEpBR,EAAAA,IAACS,EAAAA,OAAMP,OAAAC,OAAA,CACLC,OAAQZ,EACRkB,SAAUlB,EACVmB,UAAU,aACVC,UAAW,CACT,CACEC,KAAM,SACNC,QAAS,CACPC,OAAQ,CAAC,EAAG,OAIlBC,YAAU,EACVpB,GAAEM,OAAAC,OAAA,CACAc,OAASC,GAAUA,EAAMD,OAAOE,OAAS,IACtCtB,IAEDC,YAEH,EAAGsB,qBACFpB,MAACqB,EAAAA,kBAAiBnB,OAAAC,OAAA,CAACmB,YAAa,IAAM7B,EAAU,OAAWb,EACzD,CAAA2B,SAAAP,EAAAuB,IAACC,EAAIA,KAAAtB,OAAAC,OAAA,CAAA,EAAKiB,EAAqBvC,EAC7B,CAAA0B,SAAAP,EAAAuB,IAACE,EAAkBA,mBAAAvB,OAAAC,OAAA,CAAA,EAAKb,EAAI,CAAEZ,SAAKgD,gBAK1C"}

package/cjs/{organisms → components}/notification/index.d.ts

@@ -1,4 +1,5 @@
 export * from './Notification';
+export * from './NotificationButton';
 export * from './NotificationCenter';
 export * from './NotificationCenterCategory';
 export * from './NotificationCenterHeaderButton';

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