@skodaflow/web-library 7.16.0 → 7.16.1

package/components/hotspotCard/hotspotCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"hotspotCard.js","sources":["../../../src/components/hotspotCard/hotspotCard.tsx"],"sourcesContent":["import React, { ElementType, isValidElement, ReactNode, useRef, useState, useCallback } from 'react';\nimport {\n  Box,\n  Stack,\n  BoxProps,\n  Card,\n  CardProps,\n  ClickAwayListener,\n  ClickAwayListenerProps,\n  Fade,\n  FadeProps,\n  IconButton,\n  IconButtonProps,\n  Popper,\n  PopperProps,\n  Typography,\n  useMediaQuery,\n  useTheme,\n  SvgIconProps,\n} from '@mui/material';\nimport { PlusIcon } from '@/src/components/icon/stroke/PlusIcon';\nimport { Label } from '@/src/components/label/label';\nimport { ResponsiveType } from '@/src/utils/ResponsiveType';\n\nexport interface HotspotCardProps extends Omit<IconButtonProps, 'color' | 'size'> {\n  /**\n   * top position of hotspot card\n   */\n  top?: ResponsiveType<string | number>;\n  /**\n   * left position of hotspot card\n   */\n  left?: ResponsiveType<string | number>;\n  /**\n   * bottom position of hotspot card\n   */\n  bottom?: ResponsiveType<string | number>;\n  /**\n   * right position of hotspot card\n   */\n  right?: ResponsiveType<string | number>;\n  /**\n   * Boolean that defines different design whether a HotspotCardIconButton is placed on background inside the Card, (instead of image)\n   */\n  onBackground?: boolean;\n  /**\n   * Make sure to center IconButton, helpful with left or right properties set to 50%\n   */\n  center?: boolean;\n  /**\n   * Boolean that defines whether a HotspotCard is opened.\n   *\n   * @see setOpen\n   */\n  open?: boolean;\n  /**\n   * Function that can be used to control a state of card popup\n   *\n   * @param open new open value\n   * @see open\n   */\n  setOpen?: (open: boolean) => void;\n  /**\n   * Properties that will be passed to Fade component\n   *\n   * @see Fade\n   */\n  fadeProps?: Omit<FadeProps, 'children'>;\n  /**\n   * Properties that will be passed to Popper component\n   *\n   * @see Popper\n   */\n  popperProps?: Omit<PopperProps, 'open'>;\n  /**\n   * Properties applied to ClickAwayListener\n   */\n  clickAwayListenerProps?: ClickAwayListenerProps;\n  /**\n   * Custom icon component to use instead of the default PlusIcon\n   */\n  icon?: ReactNode;\n  /**\n   * Properties that will be passed to the icon component\n   */\n  iconProps?: SvgIconProps;\n  /**\n   * Custom icon component to use instead of the default PlusIcon\n   */\n  insideIcon?: ReactNode;\n  /**\n   * Properties for a cose icon inside HotspotCard\n   */\n  insideIconProps?: SvgIconProps;\n  /**\n   * Properties for a IconButton inside HotspotCard\n   */\n  insideIconButtonProps?: IconButtonProps<ElementType>;\n  /**\n   * Properties for a Box element that wraps button and popper\n   */\n  wrapperProps?: BoxProps<ElementType>;\n  /**\n   * Properties for Card inside the Popper element.\n   */\n  cardProps?: CardProps<ElementType>;\n  /**\n   * @deprecated use Card component as a children instead\n   */\n  headline?: string;\n  /**\n   * @deprecated use Card component as a children instead\n   */\n  img?: ReactNode;\n  /**\n   * @deprecated use Card component as a children instead\n   */\n  label?: string;\n  /**\n   * @deprecated use Card component as a children instead\n   */\n  description?: ReactNode;\n  /**\n   * @deprecated use Card component as a children instead\n   */\n  buttons?: ReactNode;\n}\n\n/**\n * A card component that is toggled on and off with IconButton.\n * The card is fullscreen on mobile-size devices.\n */\nexport const HotspotCard: React.FC<HotspotCardProps> = ({\n  sx,\n  children,\n  top,\n  left,\n  bottom,\n  right,\n  onBackground = false,\n  center = false,\n  open,\n  setOpen,\n  fadeProps = {},\n  popperProps = {},\n  clickAwayListenerProps = {},\n  icon,\n  iconProps = {},\n  insideIcon,\n  insideIconProps = {},\n  insideIconButtonProps = {},\n  wrapperProps = {},\n  cardProps = {},\n  headline,\n  img,\n  label,\n  description,\n  buttons,\n  ...restProps\n}) => {\n  const { sx: cardSx, ...restCard } = cardProps;\n  const { sx: popperSx, ...restPopperProps } = popperProps;\n  const { sx: iconSx, ...restIconProps } = iconProps;\n  const { sx: insideIconSx, ...restInsideIconProps } = insideIconProps;\n  const { sx: insideIconButtonSx, ...restInsideIconButtonProps } = insideIconButtonProps;\n\n  const FWLTheme = useTheme();\n  const isSmallScreen = useMediaQuery(FWLTheme.breakpoints.down('md'));\n  const btnRef = useRef(null);\n  const popperRef = useRef<HTMLDivElement>(null);\n  const [_open, _setOpen] = useState(open ?? false);\n  const [currentPlacement, setCurrentPlacement] = useState<string>('left-start');\n\n  const isOpen = open ?? _open;\n  const handleClick = useCallback(open !== undefined ? () => setOpen(!open) : () => _setOpen((prev) => !prev), [\n    open,\n    setOpen,\n  ]);\n  const handleClickAway = useCallback(open !== undefined ? () => setOpen(false) : () => _setOpen(false), [\n    open,\n    setOpen,\n  ]);\n\n  return (\n    <ClickAwayListener onClickAway={handleClickAway} {...clickAwayListenerProps}>\n      <Box {...wrapperProps}>\n        <IconButton\n          ref={btnRef}\n          onClick={handleClick}\n          aria-label=\"Open or Close the card\"\n          {...(isOpen && { ['aria-controls']: 'hotspot-card' })}\n          size=\"small\"\n          color=\"surface\"\n          sx={{\n            position: 'absolute',\n            zIndex: '10',\n            ...(top != undefined && { top: top, ...(center && { mt: '-16px' }) }),\n            ...(left != undefined && { left: left, ...(center && { ml: '-16px' }) }),\n            ...(bottom != undefined && { bottom: bottom, ...(center && { mb: '-16px' }) }),\n            ...(right != undefined && { right: right, ...(center && { mr: '-16px' }) }),\n            // Fallback to top-left if no position is specified\n            ...(top == undefined &&\n              left == undefined &&\n              bottom == undefined &&\n              right == undefined && {\n                top: '0%',\n                left: '0%',\n                ...(center && { mt: '-16px', ml: '-16px' }),\n              }),\n            ...sx,\n          }}\n          {...restProps}\n        >\n          {icon || (\n            <PlusIcon\n              sx={{\n                transform: isOpen ? 'rotate(45deg)' : 'rotate(0deg)',\n                transition: 'transform .3s ease',\n                ...iconSx,\n              }}\n              {...restIconProps}\n            />\n          )}\n        </IconButton>\n        <Popper\n          key={isSmallScreen ? 'popper-mobile' : 'popper-desktop'}\n          open={isOpen}\n          anchorEl={isSmallScreen ? null : btnRef.current}\n          transition\n          placement=\"left-start\"\n          disablePortal\n          ref={popperRef}\n          modifiers={[\n            {\n              name: 'flip',\n              enabled: true,\n              options: {\n                fallbackPlacements: ['right-start'],\n              },\n            },\n            {\n              name: 'preventOverflow',\n              enabled: true,\n              options: {\n                boundary: 'viewport',\n              },\n            },\n            {\n              name: 'updatePlacement',\n              enabled: true,\n              phase: 'afterWrite',\n              fn: ({ state }) => {\n                setCurrentPlacement(state.placement);\n              },\n            },\n          ]}\n          sx={{\n            position: 'fixed',\n            top: { xs: 0, md: 'auto' },\n            left: { xs: 0, md: 'auto' },\n            width: { xs: '100%', md: '400px' },\n            height: { xs: '100%', md: 'auto' },\n            minHeight: { xs: '100vh', md: 'auto' },\n            zIndex: (theme) => theme.zIndex.modal,\n            ...popperSx,\n          }}\n          {...restPopperProps}\n        >\n          {({ TransitionProps }) => (\n            <Fade {...TransitionProps} timeout={350} {...fadeProps}>\n              <Card\n                id=\"hotspot-card\"\n                sx={{\n                  '&:after': { border: 0, boxShadow: (theme) => theme.flowShadows.xl },\n                  '& > .MuiBox-root': {\n                    overflow: 'auto',\n                    paddingTop: '0',\n                  },\n                  '& .MuiCardContent-root, &.MuiCardContent-root:last-child': {\n                    padding: 3,\n                  },\n                  '& .MuiCardMedia-root': {\n                    height: {\n                      xs: '300px',\n                      md: '232px',\n                    },\n                  },\n                  '& .MuiBox-root > .MuiCardMedia-img:first-of-type': {\n                    marginTop: '0',\n                  },\n                  position: 'relative',\n                  width: { xs: '100%', md: '400px' },\n                  height: { xs: '100%', md: 'auto' },\n                  top: { xs: '0', md: '-9px' },\n                  left: currentPlacement.startsWith('right') ? { xs: '0', md: '-41px' } : undefined,\n                  right: currentPlacement.startsWith('left') ? { xs: '0', md: '-41px' } : undefined,\n                  ...cardSx,\n                }}\n                {...restCard}\n              >\n                <IconButton\n                  onClick={handleClick}\n                  aria-label=\"Close the card\"\n                  size=\"small\"\n                  color={onBackground ? 'inherit' : 'surface'}\n                  sx={{\n                    position: 'absolute',\n                    zIndex: '20',\n                    top: '8px',\n                    right: '8px',\n                    ...insideIconButtonSx,\n                  }}\n                  {...restInsideIconButtonProps}\n                >\n                  {insideIcon || (\n                    <PlusIcon\n                      sx={{\n                        transform: isOpen ? 'rotate(45deg)' : 'rotate(0deg)',\n                        transition: 'transform .3s ease',\n                        ...insideIconSx,\n                      }}\n                      {...restInsideIconProps}\n                    />\n                  )}\n                </IconButton>\n                {img && (\n                  <Box\n                    sx={{\n                      display: 'block',\n                      width: '100%',\n                    }}\n                    {...(typeof img === 'string' && {\n                      component: 'img',\n                      src: img,\n                    })}\n                  >\n                    {isValidElement(img) && img}\n                  </Box>\n                )}\n                {(label || headline || description || buttons) && (\n                  <Stack direction=\"column\" spacing={1} padding={2}>\n                    {label && <Label label={label} />}\n                    {headline && <Typography variant=\"h3\">{headline}</Typography>}\n                    {description && <Typography>{description}</Typography>}\n                    {buttons && (\n                      <Stack direction=\"row\" spacing={2} overflow=\"auto\">\n                        {buttons}\n                      </Stack>\n                    )}\n                  </Stack>\n                )}\n                {children}\n              </Card>\n            </Fade>\n          )}\n        </Popper>\n      </Box>\n    </ClickAwayListener>\n  );\n};\n"],"names":["HotspotCard","_a","sx","children","top","left","bottom","right","onBackground","center","open","setOpen","fadeProps","popperProps","clickAwayListenerProps","icon","iconProps","insideIcon","insideIconProps","insideIconButtonProps","wrapperProps","cardProps","headline","img","label","description","buttons","restProps","__rest","cardSx","restCard","popperSx","restPopperProps","iconSx","restIconProps","insideIconSx","restInsideIconProps","insideIconButtonSx","restInsideIconButtonProps","FWLTheme","useTheme","isSmallScreen","useMediaQuery","breakpoints","down","btnRef","useRef","popperRef","_open","_setOpen","useState","currentPlacement","setCurrentPlacement","isOpen","handleClick","useCallback","undefined","prev","handleClickAway","_jsx","ClickAwayListener","Object","assign","onClickAway","_jsxs","Box","IconButton","ref","onClick","size","color","position","zIndex","mt","ml","mb","mr","PlusIcon","transform","transition","Popper","anchorEl","current","placement","disablePortal","modifiers","name","enabled","options","fallbackPlacements","boundary","phase","fn","state","xs","md","width","height","minHeight","theme","modal","TransitionProps","Fade","timeout","Card","id","border","boxShadow","flowShadows","xl","overflow","paddingTop","padding","marginTop","startsWith","display","component","src","isValidElement","Stack","direction","spacing","Label","Typography","variant"],"mappings":"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"}
+{"version":3,"file":"hotspotCard.js","sources":["../../../src/components/hotspotCard/hotspotCard.tsx"],"sourcesContent":["import React, { ElementType, isValidElement, ReactNode, useRef, useState, useCallback } from 'react';\nimport {\n  Box,\n  Stack,\n  BoxProps,\n  Card,\n  CardProps,\n  ClickAwayListener,\n  ClickAwayListenerProps,\n  Fade,\n  FadeProps,\n  IconButton,\n  IconButtonProps,\n  Popper,\n  PopperProps,\n  Typography,\n  useMediaQuery,\n  useTheme,\n  SvgIconProps,\n} from '@mui/material';\nimport { PlusIcon } from '@/src/components/icon/stroke/PlusIcon';\nimport { Label } from '@/src/components/label/label';\nimport { ResponsiveType } from '@/src/utils/ResponsiveType';\n\nexport interface HotspotCardProps extends Omit<IconButtonProps, 'color' | 'size'> {\n  /**\n   * top position of hotspot card\n   */\n  top?: ResponsiveType<string | number>;\n  /**\n   * left position of hotspot card\n   */\n  left?: ResponsiveType<string | number>;\n  /**\n   * bottom position of hotspot card\n   */\n  bottom?: ResponsiveType<string | number>;\n  /**\n   * right position of hotspot card\n   */\n  right?: ResponsiveType<string | number>;\n  /**\n   * Boolean that defines different design whether a HotspotCardIconButton is placed on background inside the Card, (instead of image)\n   */\n  onBackground?: boolean;\n  /**\n   * Make sure to center IconButton, helpful with left or right properties set to 50%\n   */\n  center?: boolean;\n  /**\n   * Boolean that defines whether a HotspotCard is opened.\n   *\n   * @see setOpen\n   */\n  open?: boolean;\n  /**\n   * Function that can be used to control a state of card popup\n   *\n   * @param open new open value\n   * @see open\n   */\n  setOpen?: (open: boolean) => void;\n  /**\n   * Properties that will be passed to Fade component\n   *\n   * @see Fade\n   */\n  fadeProps?: Omit<FadeProps, 'children'>;\n  /**\n   * Properties that will be passed to Popper component\n   *\n   * @see Popper\n   */\n  popperProps?: Omit<PopperProps, 'open'>;\n  /**\n   * Properties applied to ClickAwayListener\n   */\n  clickAwayListenerProps?: Omit<ClickAwayListenerProps, 'children'>;\n  /**\n   * Custom icon component to use instead of the default PlusIcon\n   */\n  icon?: ReactNode;\n  /**\n   * Properties that will be passed to the icon component\n   */\n  iconProps?: SvgIconProps;\n  /**\n   * Custom icon component to use instead of the default PlusIcon\n   */\n  insideIcon?: ReactNode;\n  /**\n   * Properties for a cose icon inside HotspotCard\n   */\n  insideIconProps?: SvgIconProps;\n  /**\n   * Properties for a IconButton inside HotspotCard\n   */\n  insideIconButtonProps?: IconButtonProps<ElementType>;\n  /**\n   * Properties for a Box element that wraps button and popper\n   */\n  wrapperProps?: BoxProps<ElementType>;\n  /**\n   * Properties for Card inside the Popper element.\n   */\n  cardProps?: CardProps<ElementType>;\n  /**\n   * @deprecated use Card component as a children instead\n   */\n  headline?: string;\n  /**\n   * @deprecated use Card component as a children instead\n   */\n  img?: ReactNode;\n  /**\n   * @deprecated use Card component as a children instead\n   */\n  label?: string;\n  /**\n   * @deprecated use Card component as a children instead\n   */\n  description?: ReactNode;\n  /**\n   * @deprecated use Card component as a children instead\n   */\n  buttons?: ReactNode;\n}\n\n/**\n * A card component that is toggled on and off with IconButton.\n * The card is fullscreen on mobile-size devices.\n */\nexport const HotspotCard: React.FC<HotspotCardProps> = ({\n  sx,\n  children,\n  top,\n  left,\n  bottom,\n  right,\n  onBackground = false,\n  center = false,\n  open,\n  setOpen,\n  fadeProps = {},\n  popperProps = {},\n  clickAwayListenerProps = {},\n  icon,\n  iconProps = {},\n  insideIcon,\n  insideIconProps = {},\n  insideIconButtonProps = {},\n  wrapperProps = {},\n  cardProps = {},\n  headline,\n  img,\n  label,\n  description,\n  buttons,\n  ...restProps\n}) => {\n  const { sx: cardSx, ...restCard } = cardProps;\n  const { sx: popperSx, ...restPopperProps } = popperProps;\n  const { sx: iconSx, ...restIconProps } = iconProps;\n  const { sx: insideIconSx, ...restInsideIconProps } = insideIconProps;\n  const { sx: insideIconButtonSx, ...restInsideIconButtonProps } = insideIconButtonProps;\n\n  const FWLTheme = useTheme();\n  const isSmallScreen = useMediaQuery(FWLTheme.breakpoints.down('md'));\n  const btnRef = useRef(null);\n  const popperRef = useRef<HTMLDivElement>(null);\n  const [_open, _setOpen] = useState(open ?? false);\n  const [currentPlacement, setCurrentPlacement] = useState<string>('left-start');\n\n  const isOpen = open ?? _open;\n  const handleClick = useCallback(open !== undefined ? () => setOpen(!open) : () => _setOpen((prev) => !prev), [\n    open,\n    setOpen,\n  ]);\n  const handleClickAway = useCallback(open !== undefined ? () => setOpen(false) : () => _setOpen(false), [\n    open,\n    setOpen,\n  ]);\n\n  return (\n    <ClickAwayListener onClickAway={handleClickAway} {...clickAwayListenerProps}>\n      <Box {...wrapperProps}>\n        <IconButton\n          ref={btnRef}\n          onClick={handleClick}\n          aria-label=\"Open or Close the card\"\n          {...(isOpen && { ['aria-controls']: 'hotspot-card' })}\n          size=\"small\"\n          color=\"surface\"\n          sx={{\n            position: 'absolute',\n            zIndex: '10',\n            ...(top != undefined && { top: top, ...(center && { mt: '-16px' }) }),\n            ...(left != undefined && { left: left, ...(center && { ml: '-16px' }) }),\n            ...(bottom != undefined && { bottom: bottom, ...(center && { mb: '-16px' }) }),\n            ...(right != undefined && { right: right, ...(center && { mr: '-16px' }) }),\n            // Fallback to top-left if no position is specified\n            ...(top == undefined &&\n              left == undefined &&\n              bottom == undefined &&\n              right == undefined && {\n                top: '0%',\n                left: '0%',\n                ...(center && { mt: '-16px', ml: '-16px' }),\n              }),\n            ...sx,\n          }}\n          {...restProps}\n        >\n          {icon || (\n            <PlusIcon\n              sx={{\n                transform: isOpen ? 'rotate(45deg)' : 'rotate(0deg)',\n                transition: 'transform .3s ease',\n                ...iconSx,\n              }}\n              {...restIconProps}\n            />\n          )}\n        </IconButton>\n        <Popper\n          key={isSmallScreen ? 'popper-mobile' : 'popper-desktop'}\n          open={isOpen}\n          anchorEl={isSmallScreen ? null : btnRef.current}\n          transition\n          placement=\"left-start\"\n          disablePortal\n          ref={popperRef}\n          modifiers={[\n            {\n              name: 'flip',\n              enabled: true,\n              options: {\n                fallbackPlacements: ['right-start'],\n              },\n            },\n            {\n              name: 'preventOverflow',\n              enabled: true,\n              options: {\n                boundary: 'viewport',\n              },\n            },\n            {\n              name: 'updatePlacement',\n              enabled: true,\n              phase: 'afterWrite',\n              fn: ({ state }) => {\n                setCurrentPlacement(state.placement);\n              },\n            },\n          ]}\n          sx={{\n            position: 'fixed',\n            top: { xs: 0, md: 'auto' },\n            left: { xs: 0, md: 'auto' },\n            width: { xs: '100%', md: '400px' },\n            height: { xs: '100%', md: 'auto' },\n            minHeight: { xs: '100vh', md: 'auto' },\n            zIndex: (theme) => theme.zIndex.modal,\n            ...popperSx,\n          }}\n          {...restPopperProps}\n        >\n          {({ TransitionProps }) => (\n            <Fade {...TransitionProps} timeout={350} {...fadeProps}>\n              <Card\n                id=\"hotspot-card\"\n                sx={{\n                  '&:after': { border: 0, boxShadow: (theme) => theme.flowShadows.xl },\n                  '& > .MuiBox-root': {\n                    overflow: 'auto',\n                    paddingTop: '0',\n                  },\n                  '& .MuiCardContent-root, &.MuiCardContent-root:last-child': {\n                    padding: 3,\n                  },\n                  '& .MuiCardMedia-root': {\n                    height: {\n                      xs: '300px',\n                      md: '232px',\n                    },\n                  },\n                  '& .MuiBox-root > .MuiCardMedia-img:first-of-type': {\n                    marginTop: '0',\n                  },\n                  position: 'relative',\n                  width: { xs: '100%', md: '400px' },\n                  height: { xs: '100%', md: 'auto' },\n                  top: { xs: '0', md: '-9px' },\n                  left: currentPlacement.startsWith('right') ? { xs: '0', md: '-41px' } : undefined,\n                  right: currentPlacement.startsWith('left') ? { xs: '0', md: '-41px' } : undefined,\n                  ...cardSx,\n                }}\n                {...restCard}\n              >\n                <IconButton\n                  onClick={handleClick}\n                  aria-label=\"Close the card\"\n                  size=\"small\"\n                  color={onBackground ? 'inherit' : 'surface'}\n                  sx={{\n                    position: 'absolute',\n                    zIndex: '20',\n                    top: '8px',\n                    right: '8px',\n                    ...insideIconButtonSx,\n                  }}\n                  {...restInsideIconButtonProps}\n                >\n                  {insideIcon || (\n                    <PlusIcon\n                      sx={{\n                        transform: isOpen ? 'rotate(45deg)' : 'rotate(0deg)',\n                        transition: 'transform .3s ease',\n                        ...insideIconSx,\n                      }}\n                      {...restInsideIconProps}\n                    />\n                  )}\n                </IconButton>\n                {img && (\n                  <Box\n                    sx={{\n                      display: 'block',\n                      width: '100%',\n                    }}\n                    {...(typeof img === 'string' && {\n                      component: 'img',\n                      src: img,\n                    })}\n                  >\n                    {isValidElement(img) && img}\n                  </Box>\n                )}\n                {(label || headline || description || buttons) && (\n                  <Stack direction=\"column\" spacing={1} padding={2}>\n                    {label && <Label label={label} />}\n                    {headline && <Typography variant=\"h3\">{headline}</Typography>}\n                    {description && <Typography>{description}</Typography>}\n                    {buttons && (\n                      <Stack direction=\"row\" spacing={2} overflow=\"auto\">\n                        {buttons}\n                      </Stack>\n                    )}\n                  </Stack>\n                )}\n                {children}\n              </Card>\n            </Fade>\n          )}\n        </Popper>\n      </Box>\n    </ClickAwayListener>\n  );\n};\n"],"names":["HotspotCard","_a","sx","children","top","left","bottom","right","onBackground","center","open","setOpen","fadeProps","popperProps","clickAwayListenerProps","icon","iconProps","insideIcon","insideIconProps","insideIconButtonProps","wrapperProps","cardProps","headline","img","label","description","buttons","restProps","__rest","cardSx","restCard","popperSx","restPopperProps","iconSx","restIconProps","insideIconSx","restInsideIconProps","insideIconButtonSx","restInsideIconButtonProps","FWLTheme","useTheme","isSmallScreen","useMediaQuery","breakpoints","down","btnRef","useRef","popperRef","_open","_setOpen","useState","currentPlacement","setCurrentPlacement","isOpen","handleClick","useCallback","undefined","prev","handleClickAway","_jsx","ClickAwayListener","Object","assign","onClickAway","_jsxs","Box","IconButton","ref","onClick","size","color","position","zIndex","mt","ml","mb","mr","PlusIcon","transform","transition","Popper","anchorEl","current","placement","disablePortal","modifiers","name","enabled","options","fallbackPlacements","boundary","phase","fn","state","xs","md","width","height","minHeight","theme","modal","TransitionProps","Fade","timeout","Card","id","border","boxShadow","flowShadows","xl","overflow","paddingTop","padding","marginTop","startsWith","display","component","src","isValidElement","Stack","direction","spacing","Label","Typography","variant"],"mappings":"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"}

package/components/notification/NotificationCenterHeaderButton.d.ts

@@ -39,11 +39,11 @@ export interface NotificationCenterHeaderButtonProps extends NotificationCenterP
     /**
      * Props applied to ClickAwayListener
      */
-    clickAwayListenerProps?: ClickAwayListenerProps;
+    clickAwayListenerProps?: Omit<ClickAwayListenerProps, 'children'>;
     /**
      * Props applied to Fade
      */
-    fadeProps?: FadeProps;
+    fadeProps?: Omit<FadeProps, 'children'>;
 }
 /**
  * HeaderButton that opens NotificationCenter

package/components/notification/NotificationCenterHeaderButton.js.map

@@ -1 +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","Fade","NotificationCenter","undefined"],"mappings":"oYAqDO,MAAMA,EAA0EC,EACrF,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,EAAIC,EAAAd,EAZT,CAAA,cAAA,yBAAA,YAAA,QAAA,SAAA,eAAA,aAAA,YAAA,oBAAA,OAAA,YAgBA,MAAOe,EAAQC,GAAaC,EAAS,MAC/BC,EAAkChB,QAAAA,EAAe,IAA/CiB,GAAIC,GAAQF,EAAKG,EAAUP,EAAAI,EAA7B,CAAA,OAEN,OACEI,eACEC,EAACC,iBACCnB,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,gBAEd5B,IAAKA,gBACO,kCACRS,EAAiB,CAAAoB,SAEpBnB,GAAQY,EAACQ,EAAQ,CAAA,MAEpBR,EAACS,EAAMP,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,EAACqB,EAAiBnB,OAAAC,OAAA,CAACmB,YAAa,IAAM7B,EAAU,OAAWb,EAAsB,CAAA2B,SAC/EP,EAACuB,EAAIrB,OAAAC,OAAA,CAAA,EAAKiB,EAAqBvC,EAAS,CAAA0B,SACtCP,EAACwB,EAAkBtB,OAAAC,OAAA,CAAA,EAAKb,EAAI,CAAEZ,SAAK+C"}
+{"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?: Omit<ClickAwayListenerProps, 'children'>;\n  /**\n   * Props applied to Fade\n   */\n  fadeProps?: Omit<FadeProps, 'children'>;\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","Fade","NotificationCenter","undefined"],"mappings":"oYAqDO,MAAMA,EAA0EC,EACrF,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,EAAIC,EAAAd,EAZT,CAAA,cAAA,yBAAA,YAAA,QAAA,SAAA,eAAA,aAAA,YAAA,oBAAA,OAAA,YAgBA,MAAOe,EAAQC,GAAaC,EAAS,MAC/BC,EAAkChB,QAAAA,EAAe,IAA/CiB,GAAIC,GAAQF,EAAKG,EAAUP,EAAAI,EAA7B,CAAA,OAEN,OACEI,eACEC,EAACC,iBACCnB,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,gBAEd5B,IAAKA,gBACO,kCACRS,EAAiB,CAAAoB,SAEpBnB,GAAQY,EAACQ,EAAQ,CAAA,MAEpBR,EAACS,EAAMP,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,EAACqB,EAAiBnB,OAAAC,OAAA,CAACmB,YAAa,IAAM7B,EAAU,OAAWb,EAAsB,CAAA2B,SAC/EP,EAACuB,EAAIrB,OAAAC,OAAA,CAAA,EAAKiB,EAAqBvC,EAAS,CAAA0B,SACtCP,EAACwB,EAAkBtB,OAAAC,OAAA,CAAA,EAAKb,EAAI,CAAEZ,SAAK+C"}

package/components/pageLayout/PageLayout.js

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

package/components/pageLayout/PageLayout.js.map

@@ -1 +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","Container","maxWidth"],"mappings":"qPAoDO,MAAMA,EAAwCC,EACnD,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,GAAWb,EACRc,EAAIC,EAAAf,EAbT,kLAiBA,MAAMgB,EAAQC,IACRC,EAAgDP,QAAAA,EAAsB,IAApER,GAAIgB,GAAeD,EAAKE,EAAiBL,EAAAG,EAA3C,CAAA,OACAG,EAIFX,QAAAA,EAAwB,IAH1BP,GAAImB,EACJC,UAAWC,GAAwBH,EAChCI,EAAmBV,EAAAM,EAHlB,CAAA,KAAA,eAMCK,EAAcC,GAAmBC,EAAiBC,WAAWC,OAAOd,EAAMe,OAAOC,QAAQC,aAC1FC,EAAqBC,EACxBC,IACwB,WAAnB9B,GAAgC8B,GAGpC,IAAIC,eAAe,KACjBV,EAAgBS,EAAQE,gBACvBC,QAAQH,IAEb,CAAoB,WAAnB9B,IAGGkC,EAAeC,EAAiB,CACpCC,OAAQC,OACRC,UAAWrC,IAGb,OACEsC,EAACC,iBACC3C,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,EAAI,CAAAZ,SAAA,CAEPE,GACCoD,EAACV,EAAGC,OAAAC,OAAA,CACF7C,kCACyB,WAAnBG,GAA+BoB,GAAgB,CAAE+B,OAAQ/B,IAC1DP,GAAe,cAER,4BACRC,EAAiB,CAAAlB,SAErBsD,EAACV,EAAGC,OAAAC,OAAA,CAAA,EACsB,UAAnB1C,GAA8B,CACjCoD,UAAWC,EACXC,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,EAACV,EAAGC,OAAAC,OAAA,CAAC/C,IAAKiC,EAAkB,cAAc,qBAAwBzB,EAAW,CAAAP,SAC1EE,WAKToD,EAACV,EAAGC,OAAAC,OAAA,CAAA,EAAMxC,GAAe,CAAEkD,UAAWU,EAAWC,SAAU,MAAO,CAAA,cAAc,aAAgBzD,EAAY,CAAAV,SACzGA,KAEFG,GACCmD,EAACV,EAAGC,OAAAC,OAAA,CAAA,cAAa,qBAAwBnC,EAAW,CAAAX,SACjDG"}
+{"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","Container","maxWidth"],"mappings":"qPAoDO,MAAMA,EAAwCC,EACnD,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,GAAWb,EACRc,EAAIC,EAAAf,EAbT,kLAiBA,MAAMgB,EAAQC,IACRC,EAAgDP,QAAAA,EAAsB,IAApER,GAAIgB,GAAeD,EAAKE,EAAiBL,EAAAG,EAA3C,CAAA,OACAG,EAIFX,QAAAA,EAAwB,IAH1BP,GAAImB,EACJC,UAAWC,GAAwBH,EAChCI,EAAmBV,EAAAM,EAHlB,CAAA,KAAA,eAMCK,EAAcC,GAAmBC,EAAiBC,WAAWC,OAAOd,EAAMe,OAAOC,QAAQC,aAC1FC,EAAqBC,EACxBC,IACwB,WAAnB9B,GAAgC8B,GAGpC,IAAIC,eAAe,KACjBV,EAAgBS,EAAQE,gBACvBC,QAAQH,IAEb,CAAoB,WAAnB9B,IAGGkC,EAAeC,EAAiB,CACpCC,OAAQC,OACRC,UAAWrC,IAGb,OACEsC,EAACC,iBACC3C,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,EAAI,CAAAZ,SAAA,CAEPE,GACCoD,EAACV,EAAGC,OAAAC,OAAA,CACF7C,kCACyB,WAAnBG,GAA+BoB,GAAgB,CAAE+B,OAAQ/B,IAC1DP,GAAe,cAER,4BACRC,EAAiB,CAAAlB,SAErBsD,EAACV,EAAGC,OAAAC,OAAA,CAAA,EACsB,UAAnB1C,GAA8B,CACjCoD,UAAWC,EACXC,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,MACJ9B,EAAmB,CAAAvB,SAEvBsD,EAACV,EAAGC,OAAAC,OAAA,CAAC/C,IAAKiC,EAAkB,cAAc,qBAAwBzB,EAAW,CAAAP,SAC1EE,WAKToD,EAACV,EAAGC,OAAAC,OAAA,CAAA,EAAMxC,GAAe,CAAEkD,UAAWU,EAAWC,SAAU,MAAO,CAAA,cAAc,aAAgBzD,EAAY,CAAAV,SACzGA,KAEFG,GACCmD,EAACV,EAAGC,OAAAC,OAAA,CAAA,cAAa,qBAAwBnC,EAAW,CAAAX,SACjDG"}

package/components/progress/Loader.js

@@ -1,2 +1,2 @@
-import{__rest as a}from"tslib";import{jsxs as e,jsx as r}from"react/jsx-runtime";import{forwardRef as o,useMemo as i}from"react";import{Box as s,LinearProgress as t}from"@mui/material";import{LoadingText as l}from"./LoadingText.js";const m=o((o,m)=>{var{className:n,value:p,size:d,loaderSize:b,barProps:u,label:c,loadingTextProps:g,barWrapperProps:v}=o,x=a(o,["className","value","size","loaderSize","barProps","label","loadingTextProps","barWrapperProps"]);const f=null!=u?u:{},{sx:j}=f,P=a(f,["sx"]),z=i(()=>d||{small:"small",large:"medium"}[null!=b?b:"large"],[d,b]);return e(s,Object.assign({"data-testid":"Loader",className:["FlowLoader-root",n].filter(Boolean).join(", "),ref:m},x,{children:[void 0!==p&&r(l,Object.assign({"data-testid":"Loader.percentage",value:p,label:c},g)),r(t,Object.assign({value:p,sx:Object.assign(Object.assign({},"number"==typeof d&&{height:`${d}px`}),j)},"number"!=typeof d&&{size:z},void 0!==p&&{variant:"determinate","aria-valuenow":p,"aria-valuemin":0,"aria-valuemax":100},P))]}))});export{m as Loader};
+import{__rest as a}from"tslib";import{jsxs as e,jsx as r}from"react/jsx-runtime";import{forwardRef as o,useMemo as i}from"react";import{Box as s,LinearProgress as t}from"@mui/material";import{LoadingText as l}from"./LoadingText.js";const m=o((o,m)=>{var{className:n,value:p,size:d,loaderSize:b,barProps:u,label:c,loadingTextProps:g,barWrapperProps:v}=o,x=a(o,["className","value","size","loaderSize","barProps","label","loadingTextProps","barWrapperProps"]);const f=null!=u?u:{},{sx:j}=f,P=a(f,["sx"]),z=i(()=>d||{small:"small",large:"medium"}[null!=b?b:"large"],[d,b]);return e(s,Object.assign({"data-testid":"Loader",className:["FlowLoader-root",n].filter(Boolean).join(" "),ref:m},x,{children:[void 0!==p&&r(l,Object.assign({"data-testid":"Loader.percentage",value:p,label:c},g)),r(t,Object.assign({value:p,sx:Object.assign(Object.assign({},"number"==typeof d&&{height:`${d}px`}),j)},"number"!=typeof d&&{size:z},void 0!==p&&{variant:"determinate","aria-valuenow":p,"aria-valuemin":0,"aria-valuemax":100},P))]}))});export{m as Loader};
 //# sourceMappingURL=Loader.js.map

package/components/progress/Loader.js.map

@@ -1 +1 @@
-{"version":3,"file":"Loader.js","sources":["../../../src/components/progress/Loader.tsx"],"sourcesContent":["import React, { useMemo, ElementType, forwardRef, ReactNode } from 'react';\nimport { Box, BoxProps, LinearProgress, LinearProgressProps } from '@mui/material';\nimport { LoadingText, LoadingTextProps } from './LoadingText';\n\nexport interface LoaderProps extends BoxProps<ElementType> {\n  /**\n   * Value of progress\n   */\n  value?: number;\n  /**\n   * Affects component size\n   */\n  size?: LinearProgressProps['size'] | number;\n  /**\n   * Additional label before LoaderText\n   */\n  label?: ReactNode;\n  /**\n   * Optional custom bar props.\n   */\n  barProps?: LinearProgressProps;\n  /**\n   * Properties applied to LoaderText\n   */\n  loadingTextProps?: LoadingTextProps;\n  /**\n   * @deprecated rename to size, change large to medium\n   */\n  loaderSize?: 'small' | 'large';\n  /**\n   * @deprecated remove, no longer has any effect\n   */\n  barWrapperProps?: BoxProps<ElementType>;\n}\n\n/**\n * Wrapper of LinearProgress, automatically selecting the appropriate variant and appending LoaderText\n */\nexport const Loader: React.FC<LoaderProps> = forwardRef(\n  ({ className, value, size, loaderSize, barProps, label, loadingTextProps, barWrapperProps: _, ...rest }, ref) => {\n    const { sx: barSx, ...restBar } = barProps ?? {};\n    const mappedSize = useMemo(\n      () => size || { small: 'small', large: 'medium' }[loaderSize ?? 'large'],\n      [size, loaderSize],\n    );\n\n    return (\n      <Box\n        data-testid=\"Loader\"\n        className={['FlowLoader-root', className].filter(Boolean).join(', ')}\n        ref={ref}\n        {...rest}\n      >\n        {value !== undefined && (\n          <LoadingText data-testid=\"Loader.percentage\" value={value} label={label} {...loadingTextProps} />\n        )}\n        <LinearProgress\n          value={value}\n          sx={{\n            ...(typeof size === 'number' && { height: `${size}px` }),\n            ...barSx,\n          }}\n          {...(typeof size !== 'number' && { size: mappedSize as LinearProgressProps['size'] })}\n          {...(value !== undefined && {\n            variant: 'determinate',\n            ['aria-valuenow']: value,\n            ['aria-valuemin']: 0,\n            ['aria-valuemax']: 100,\n          })}\n          {...restBar}\n        />\n      </Box>\n    );\n  },\n);\n"],"names":["Loader","forwardRef","_a","ref","className","value","size","loaderSize","barProps","label","loadingTextProps","barWrapperProps","_","rest","__rest","_b","sx","barSx","restBar","mappedSize","useMemo","small","large","_jsxs","Box","Object","assign","filter","Boolean","join","children","undefined","_jsx","LoadingText","LinearProgress","height","variant"],"mappings":"wOAsCO,MAAMA,EAAgCC,EAC3C,CAACC,EAAwGC,SAAxGC,UAAEA,EAASC,MAAEA,EAAKC,KAAEA,EAAIC,WAAEA,EAAUC,SAAEA,EAAQC,MAAEA,EAAKC,iBAAEA,EAAkBC,gBAAiBC,KAAMC,EAAIC,EAAAZ,EAApG,CAAA,YAAA,QAAA,OAAA,aAAA,WAAA,QAAA,mBAAA,oBACC,MAAMa,EAA4BP,QAAAA,EAAY,IAAtCQ,GAAIC,GAAKF,EAAKG,EAAOJ,EAAAC,EAAvB,CAAA,OACAI,EAAaC,EACjB,IAAMd,GAAQ,CAAEe,MAAO,QAASC,MAAO,UAAWf,QAAAA,EAAc,SAChE,CAACD,EAAMC,IAGT,OACEgB,EAACC,EAAGC,OAAAC,OAAA,CAAA,cACU,SACZtB,UAAW,CAAC,kBAAmBA,GAAWuB,OAAOC,SAASC,KAAK,MAC/D1B,IAAKA,GACDU,EAAI,CAAAiB,SAAA,MAEGC,IAAV1B,GACC2B,EAACC,+BAAwB,oBAAoB5B,MAAOA,EAAOI,MAAOA,GAAWC,IAE/EsB,EAACE,EAAcT,OAAAC,OAAA,CACbrB,MAAOA,EACPW,GAAES,OAAAC,OAAAD,OAAAC,OAAA,CAAA,EACoB,iBAATpB,GAAqB,CAAE6B,OAAQ,GAAG7B,QAC1CW,IAEgB,iBAATX,GAAqB,CAAEA,KAAMa,QAC1BY,IAAV1B,GAAuB,CAC1B+B,QAAS,cACT,gBAAmB/B,EACnB,gBAAmB,EACnB,gBAAmB,KAEjBa"}
+{"version":3,"file":"Loader.js","sources":["../../../src/components/progress/Loader.tsx"],"sourcesContent":["import React, { useMemo, ElementType, forwardRef, ReactNode } from 'react';\nimport { Box, BoxProps, LinearProgress, LinearProgressProps } from '@mui/material';\nimport { LoadingText, LoadingTextProps } from './LoadingText';\n\nexport interface LoaderProps extends BoxProps<ElementType> {\n  /**\n   * Value of progress\n   */\n  value?: number;\n  /**\n   * Affects component size\n   */\n  size?: LinearProgressProps['size'] | number;\n  /**\n   * Additional label before LoaderText\n   */\n  label?: ReactNode;\n  /**\n   * Optional custom bar props.\n   */\n  barProps?: LinearProgressProps;\n  /**\n   * Properties applied to LoaderText\n   */\n  loadingTextProps?: LoadingTextProps;\n  /**\n   * @deprecated rename to size, change large to medium\n   */\n  loaderSize?: 'small' | 'large';\n  /**\n   * @deprecated remove, no longer has any effect\n   */\n  barWrapperProps?: BoxProps<ElementType>;\n}\n\n/**\n * Wrapper of LinearProgress, automatically selecting the appropriate variant and appending LoaderText\n */\nexport const Loader: React.FC<LoaderProps> = forwardRef(\n  ({ className, value, size, loaderSize, barProps, label, loadingTextProps, barWrapperProps: _, ...rest }, ref) => {\n    const { sx: barSx, ...restBar } = barProps ?? {};\n    const mappedSize = useMemo(\n      () => size || { small: 'small', large: 'medium' }[loaderSize ?? 'large'],\n      [size, loaderSize],\n    );\n\n    return (\n      <Box\n        data-testid=\"Loader\"\n        className={['FlowLoader-root', className].filter(Boolean).join(' ')}\n        ref={ref}\n        {...rest}\n      >\n        {value !== undefined && (\n          <LoadingText data-testid=\"Loader.percentage\" value={value} label={label} {...loadingTextProps} />\n        )}\n        <LinearProgress\n          value={value}\n          sx={{\n            ...(typeof size === 'number' && { height: `${size}px` }),\n            ...barSx,\n          }}\n          {...(typeof size !== 'number' && { size: mappedSize as LinearProgressProps['size'] })}\n          {...(value !== undefined && {\n            variant: 'determinate',\n            ['aria-valuenow']: value,\n            ['aria-valuemin']: 0,\n            ['aria-valuemax']: 100,\n          })}\n          {...restBar}\n        />\n      </Box>\n    );\n  },\n);\n"],"names":["Loader","forwardRef","_a","ref","className","value","size","loaderSize","barProps","label","loadingTextProps","barWrapperProps","_","rest","__rest","_b","sx","barSx","restBar","mappedSize","useMemo","small","large","_jsxs","Box","Object","assign","filter","Boolean","join","children","undefined","_jsx","LoadingText","LinearProgress","height","variant"],"mappings":"wOAsCO,MAAMA,EAAgCC,EAC3C,CAACC,EAAwGC,SAAxGC,UAAEA,EAASC,MAAEA,EAAKC,KAAEA,EAAIC,WAAEA,EAAUC,SAAEA,EAAQC,MAAEA,EAAKC,iBAAEA,EAAkBC,gBAAiBC,KAAMC,EAAIC,EAAAZ,EAApG,CAAA,YAAA,QAAA,OAAA,aAAA,WAAA,QAAA,mBAAA,oBACC,MAAMa,EAA4BP,QAAAA,EAAY,IAAtCQ,GAAIC,GAAKF,EAAKG,EAAOJ,EAAAC,EAAvB,CAAA,OACAI,EAAaC,EACjB,IAAMd,GAAQ,CAAEe,MAAO,QAASC,MAAO,UAAWf,QAAAA,EAAc,SAChE,CAACD,EAAMC,IAGT,OACEgB,EAACC,EAAGC,OAAAC,OAAA,CAAA,cACU,SACZtB,UAAW,CAAC,kBAAmBA,GAAWuB,OAAOC,SAASC,KAAK,KAC/D1B,IAAKA,GACDU,EAAI,CAAAiB,SAAA,MAEGC,IAAV1B,GACC2B,EAACC,+BAAwB,oBAAoB5B,MAAOA,EAAOI,MAAOA,GAAWC,IAE/EsB,EAACE,EAAcT,OAAAC,OAAA,CACbrB,MAAOA,EACPW,GAAES,OAAAC,OAAAD,OAAAC,OAAA,CAAA,EACoB,iBAATpB,GAAqB,CAAE6B,OAAQ,GAAG7B,QAC1CW,IAEgB,iBAATX,GAAqB,CAAEA,KAAMa,QAC1BY,IAAV1B,GAAuB,CAC1B+B,QAAS,cACT,gBAAmB/B,EACnB,gBAAmB,EACnB,gBAAmB,KAEjBa"}

package/components/progress/Spinner.js

@@ -1,2 +1,2 @@
-import{__rest as e}from"tslib";import{jsx as r,jsxs as s}from"react/jsx-runtime";import{forwardRef as t,useState as a,useRef as n,useEffect as i,useMemo as o,useCallback as c}from"react";import{useTheme as l,Box as m,SvgIcon as d}from"@mui/material";import{LoadingText as f}from"./LoadingText.js";import{ProgressState as p}from"./ProgressState.js";const h=t((t,h)=>{var{sx:g,className:u,children:x,size:k="medium",thickness:b=16,value:y,svgIconProps:O,loaderTextProps:v,label:j,state:D="loading",successMessage:w,errorMessage:$,progressStateProps:L,textBoxProps:P,labelProps:M,spinnerControlledAnimation:N}=t,S=e(t,["sx","className","children","size","thickness","value","svgIconProps","loaderTextProps","label","state","successMessage","errorMessage","progressStateProps","textBoxProps","labelProps","spinnerControlledAnimation"]);const F=l(),C=null!=O?O:{},{sx:A}=C,Z=e(C,["sx"]),z=null!=M?M:{},{sx:B}=z,I=e(z,["sx"]),R=null!=P?P:{},{sx:T}=R,q=e(R,["sx"]),G=null!=v?v:{},{sx:W}=G,E=e(G,["sx"]),[H,J]=a(Number.isNaN(y)?0:null!=y?y:15),K=n(),Q=n();i(()=>{K.current=Number.isNaN(y)?0:null!=y?y:15;const e=()=>{J(r=>{const s=K.current-r,t=r+.5*s;return Math.abs(s)<.1||0===K.current?K.current:(Q.current=requestAnimationFrame(e),t)})};return Q.current=requestAnimationFrame(e),()=>cancelAnimationFrame(Q.current)},[y]);const{radius:U,circumference:V,lineCap:X,gap:Y,minSegmentPercentForFullGap:_}=o(()=>{const e=50-b/2,r=2*Math.PI*e,s=b/2;return{radius:e,circumference:r,lineCap:s,gap:s,minSegmentPercentForFullGap:(b+s)/r*100}},[b]),ee=c(e=>{const r=100-e,s=e/100*360,t=Y*Math.max(0,Math.min(1,Math.min(e,r)/_));return{reversedRotation:s,dashLength:Math.max(e/100*V-b-t,0),dashOffset:-(X+t/2),reversedDashLength:Math.max(r/100*V-b-t,0)}},[b]),re=ee(H),[se,te]=void 0===y?[ee(15),ee(75)]:[re,re];return"loading"!==D?r(p,Object.assign({ref:h,size:k,state:D,successMessage:w,errorMessage:$},L)):s(m,Object.assign({"data-testid":"Spinner",role:"progressbar",className:["FlowSpinner-root",u].filter(Boolean).join(", "),ref:h,sx:Object.assign({display:"inline-flex",alignItems:"center",justifyContent:"center",gap:1},g)},void 0!==y&&{"aria-valuenow":y,"aria-valuemin":0,"aria-valuemax":100},S,{children:[r(d,Object.assign({"aria-live":"polite",viewBox:"0 0 100 100",sx:Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({},"small"===k&&{width:"16px",height:"16px"}),"medium"===k&&{width:"24px",height:"24px"}),"number"==typeof k&&{width:`${k}px`,height:`${k}px`}),{color:"dark"===F.palette.mode?"brand.secondary":"brand.primary"}),void 0===y&&{"@keyframes flow-spinner-indeterminate":{"0%":{transform:"rotateZ(0)"},"100%":{transform:"rotateZ(360deg)"}},"@keyframes flow-spinner-indeterminate-group":{"0%, 25%":{transform:"rotateZ(0)"},"70%":{transform:"rotateZ(45deg)"},"100%":{transform:"rotateZ(360deg)"}},"@keyframes flow-spinner-indeterminate-circle-primary":{"0%, 25%, 100%":{strokeDasharray:`${se.dashLength} ${V}`,strokeDashOffset:se.dashOffset},"70%":{strokeDasharray:`${te.dashLength} ${V}`,strokeDashOffset:te.dashOffset}},"@keyframes flow-spinner-indeterminate-circle-secondary":{"0%, 25%, 100%":{strokeDasharray:`${se.reversedDashLength} ${V}`,strokeDashOffset:se.dashOffset},"70%":{strokeDasharray:`${te.reversedDashLength} ${V}`,strokeDashOffset:te.dashOffset}},"@keyframes flow-spinner-indeterminate-group-secondary":{"0%, 25%, 100%":{transform:`rotate(${se.reversedRotation}deg)`},"70%":{transform:`rotate(${te.reversedRotation}deg)`}},animation:"2s linear infinite flow-spinner-indeterminate","& > g":{animation:"2s ease-in-out infinite flow-spinner-indeterminate-group",transformOrigin:"50% 50%","& circle":{animation:"2s ease-in-out infinite flow-spinner-indeterminate-circle-primary"},"& g":{animation:"2s ease-in-out infinite flow-spinner-indeterminate-group-secondary","& circle":{animation:"2s ease-in-out infinite flow-spinner-indeterminate-circle-secondary"}}}}),A)},Z,{children:s("g",{children:[(re.reversedDashLength>0||0===H)&&r("g",{style:{transform:`rotate(${re.reversedRotation}deg)`,transformOrigin:"50% 50%"},children:r("circle",Object.assign({className:"FlowSpinner-circle-secondary",cx:"50",cy:"50",r:U,fill:"none",stroke:"dark"===F.palette.mode?F.palette.onSurface.os700:F.palette.transparent.secondary,strokeWidth:b,strokeLinecap:"round",strokeDasharray:`${re.reversedDashLength} ${V}`,strokeDashoffset:re.dashOffset},0===H&&{strokeLinecap:"butt",strokeDasharray:"none",strokeDashoffset:"none"}))}),(re.dashLength>0||100===H)&&r("circle",Object.assign({className:"FlowSpinner-circle-primary",cx:"50",cy:"50",r:U,fill:"none",stroke:"currentColor",strokeWidth:b,strokeLinecap:"round",strokeDasharray:`${re.dashLength} ${V}`,strokeDashoffset:re.dashOffset},100===H&&{strokeLinecap:"butt",strokeDasharray:"none",strokeDashoffset:"none"}))]})})),j&&void 0!==y&&r(f,Object.assign({"data-testid":"Spinner.percentage"},"number"!=typeof k&&{size:k},{value:y,label:!0!==j?j:void 0,sx:Object.assign(Object.assign(Object.assign({},B),T),W)},I,q,E))]}))});export{h as Spinner};
+import{__rest as e}from"tslib";import{jsx as r,jsxs as s}from"react/jsx-runtime";import{forwardRef as t,useState as a,useRef as n,useEffect as i,useMemo as o,useCallback as c}from"react";import{useTheme as l,Box as m,SvgIcon as d}from"@mui/material";import{LoadingText as f}from"./LoadingText.js";import{ProgressState as p}from"./ProgressState.js";const h=t((t,h)=>{var{sx:g,className:u,children:x,size:k="medium",thickness:b=16,value:y,svgIconProps:O,loaderTextProps:v,label:j,state:D="loading",successMessage:w,errorMessage:$,progressStateProps:L,textBoxProps:P,labelProps:M,spinnerControlledAnimation:N}=t,S=e(t,["sx","className","children","size","thickness","value","svgIconProps","loaderTextProps","label","state","successMessage","errorMessage","progressStateProps","textBoxProps","labelProps","spinnerControlledAnimation"]);const F=l(),C=null!=O?O:{},{sx:A}=C,Z=e(C,["sx"]),z=null!=M?M:{},{sx:B}=z,I=e(z,["sx"]),R=null!=P?P:{},{sx:T}=R,q=e(R,["sx"]),G=null!=v?v:{},{sx:W}=G,E=e(G,["sx"]),[H,J]=a(Number.isNaN(y)?0:null!=y?y:15),K=n(),Q=n();i(()=>{K.current=Number.isNaN(y)?0:null!=y?y:15;const e=()=>{J(r=>{const s=K.current-r,t=r+.5*s;return Math.abs(s)<.1||0===K.current?K.current:(Q.current=requestAnimationFrame(e),t)})};return Q.current=requestAnimationFrame(e),()=>cancelAnimationFrame(Q.current)},[y]);const{radius:U,circumference:V,lineCap:X,gap:Y,minSegmentPercentForFullGap:_}=o(()=>{const e=50-b/2,r=2*Math.PI*e,s=b/2;return{radius:e,circumference:r,lineCap:s,gap:s,minSegmentPercentForFullGap:(b+s)/r*100}},[b]),ee=c(e=>{const r=100-e,s=e/100*360,t=Y*Math.max(0,Math.min(1,Math.min(e,r)/_));return{reversedRotation:s,dashLength:Math.max(e/100*V-b-t,0),dashOffset:-(X+t/2),reversedDashLength:Math.max(r/100*V-b-t,0)}},[b]),re=ee(H),[se,te]=void 0===y?[ee(15),ee(75)]:[re,re];return"loading"!==D?r(p,Object.assign({ref:h,size:k,state:D,successMessage:w,errorMessage:$},L)):s(m,Object.assign({"data-testid":"Spinner",role:"progressbar",className:["FlowSpinner-root",u].filter(Boolean).join(" "),ref:h,sx:Object.assign({display:"inline-flex",alignItems:"center",justifyContent:"center",gap:1},g)},void 0!==y&&{"aria-valuenow":y,"aria-valuemin":0,"aria-valuemax":100},S,{children:[r(d,Object.assign({"aria-live":"polite",viewBox:"0 0 100 100",sx:Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({},"small"===k&&{width:"16px",height:"16px"}),"medium"===k&&{width:"24px",height:"24px"}),"number"==typeof k&&{width:`${k}px`,height:`${k}px`}),{color:"dark"===F.palette.mode?"brand.secondary":"brand.primary"}),void 0===y&&{"@keyframes flow-spinner-indeterminate":{"0%":{transform:"rotateZ(0)"},"100%":{transform:"rotateZ(360deg)"}},"@keyframes flow-spinner-indeterminate-group":{"0%, 25%":{transform:"rotateZ(0)"},"70%":{transform:"rotateZ(45deg)"},"100%":{transform:"rotateZ(360deg)"}},"@keyframes flow-spinner-indeterminate-circle-primary":{"0%, 25%, 100%":{strokeDasharray:`${se.dashLength} ${V}`,strokeDashOffset:se.dashOffset},"70%":{strokeDasharray:`${te.dashLength} ${V}`,strokeDashOffset:te.dashOffset}},"@keyframes flow-spinner-indeterminate-circle-secondary":{"0%, 25%, 100%":{strokeDasharray:`${se.reversedDashLength} ${V}`,strokeDashOffset:se.dashOffset},"70%":{strokeDasharray:`${te.reversedDashLength} ${V}`,strokeDashOffset:te.dashOffset}},"@keyframes flow-spinner-indeterminate-group-secondary":{"0%, 25%, 100%":{transform:`rotate(${se.reversedRotation}deg)`},"70%":{transform:`rotate(${te.reversedRotation}deg)`}},animation:"2s linear infinite flow-spinner-indeterminate","& > g":{animation:"2s ease-in-out infinite flow-spinner-indeterminate-group",transformOrigin:"50% 50%","& circle":{animation:"2s ease-in-out infinite flow-spinner-indeterminate-circle-primary"},"& g":{animation:"2s ease-in-out infinite flow-spinner-indeterminate-group-secondary","& circle":{animation:"2s ease-in-out infinite flow-spinner-indeterminate-circle-secondary"}}}}),A)},Z,{children:s("g",{children:[(re.reversedDashLength>0||0===H)&&r("g",{style:{transform:`rotate(${re.reversedRotation}deg)`,transformOrigin:"50% 50%"},children:r("circle",Object.assign({className:"FlowSpinner-circle-secondary",cx:"50",cy:"50",r:U,fill:"none",stroke:"dark"===F.palette.mode?F.palette.onSurface.os700:F.palette.transparent.secondary,strokeWidth:b,strokeLinecap:"round",strokeDasharray:`${re.reversedDashLength} ${V}`,strokeDashoffset:re.dashOffset},0===H&&{strokeLinecap:"butt",strokeDasharray:"none",strokeDashoffset:"none"}))}),(re.dashLength>0||100===H)&&r("circle",Object.assign({className:"FlowSpinner-circle-primary",cx:"50",cy:"50",r:U,fill:"none",stroke:"currentColor",strokeWidth:b,strokeLinecap:"round",strokeDasharray:`${re.dashLength} ${V}`,strokeDashoffset:re.dashOffset},100===H&&{strokeLinecap:"butt",strokeDasharray:"none",strokeDashoffset:"none"}))]})})),j&&void 0!==y&&r(f,Object.assign({"data-testid":"Spinner.percentage"},"number"!=typeof k&&{size:k},{value:y,label:!0!==j?j:void 0,sx:Object.assign(Object.assign(Object.assign({},B),T),W)},I,q,E))]}))});export{h as Spinner};
 //# sourceMappingURL=Spinner.js.map

package/components/progress/Spinner.js.map

@@ -1 +1 @@
-{"version":3,"file":"Spinner.js","sources":["../../../src/components/progress/Spinner.tsx"],"sourcesContent":["import React, {\n  ElementType,\n  ReactNode,\n  forwardRef,\n  useMemo,\n  useState,\n  useEffect,\n  useRef,\n  CSSProperties,\n  useCallback,\n} from 'react';\nimport { Box, BoxProps, SvgIcon, SvgIconProps, useTheme } from '@mui/material';\nimport { LoadingText, LoadingTextProps } from './LoadingText';\nimport { ProgressState, ProgressStateProps } from './ProgressState';\n\nexport interface SpinnerProps extends BoxProps<ElementType> {\n  /**\n   * Value of progress\n   */\n  value?: number;\n  /**\n   * Affects component size\n   * @default medium\n   */\n  size?: 'small' | 'medium' | number;\n  /**\n   * Stroke width of circle\n   * @default 16\n   */\n  thickness?: number;\n  /**\n   * State indicates whether the component should display loader or spinner for the loading state or message with a icon\n   * @default loading\n   */\n  state?: 'loading' | ProgressStateProps['state'];\n  /**\n   * Message when success appears\n   */\n  successMessage?: ProgressStateProps['successMessage'];\n  /**\n   * Message when error appears\n   */\n  errorMessage?: ProgressStateProps['errorMessage'];\n  /**\n   * Properties applied to ProgressState\n   */\n  progressStateProps?: Omit<ProgressStateProps, 'successMessage' | 'errorMessage' | 'state'>;\n  /**\n   * Properties applied to SVG\n   */\n  svgIconProps?: SvgIconProps;\n  /**\n   * Additional label before LoadingText\n   */\n  label?: boolean | ReactNode;\n  /**\n   * Properties applied to LoadingText\n   */\n  loadingTextProps?: LoadingTextProps;\n  /**\n   * @deprecated use loadingTextProps instead\n   */\n  labelProps?: BoxProps<ElementType>;\n  /**\n   * @deprecated rename to loadingTextProps\n   */\n  textBoxProps?: BoxProps<ElementType>;\n  /**\n   * @deprecated no longer has any effect\n   */\n  spinnerControlledAnimation?: 'controlled' | 'infinite';\n}\n\n/**\n * A styled loader component that displays animated svg circle\n */\nexport const Spinner: React.FC<SpinnerProps> = forwardRef(\n  (\n    {\n      sx,\n      className,\n      children,\n      size = 'medium',\n      thickness = 16,\n      value,\n      svgIconProps,\n      loaderTextProps,\n      label,\n      state = 'loading',\n      successMessage,\n      errorMessage,\n      progressStateProps,\n      textBoxProps,\n      labelProps,\n      spinnerControlledAnimation: _,\n      ...rest\n    },\n    ref,\n  ) => {\n    const theme = useTheme();\n    const { sx: svgIconSx, ...restSvgIcon } = svgIconProps ?? {};\n    const { sx: labelSx, ...restLabel } = labelProps ?? {};\n    const { sx: textBoxSx, ...restTextBox } = textBoxProps ?? {};\n    const { sx: loaderTextSx, ...restLoaderText } = loaderTextProps ?? {};\n\n    // smooth js transition between values\n    const [displayValue, setDisplayValue] = useState(Number.isNaN(value) ? 0 : (value ?? 15));\n    const targetValueRef = useRef<number>();\n    const rafRef = useRef<number>();\n    useEffect(() => {\n      targetValueRef.current = Number.isNaN(value) ? 0 : (value ?? 15);\n\n      const animate = () => {\n        setDisplayValue((prev) => {\n          const diff = targetValueRef.current - prev;\n          const step = diff * 0.5;\n          const next = prev + step;\n\n          // small diff or reset happens immediately\n          if (Math.abs(diff) < 0.1 || targetValueRef.current === 0) {\n            return targetValueRef.current;\n          } else {\n            rafRef.current = requestAnimationFrame(animate);\n            return next;\n          }\n        });\n      };\n      rafRef.current = requestAnimationFrame(animate);\n      return () => cancelAnimationFrame(rafRef.current!);\n    }, [value]);\n\n    const { radius, circumference, lineCap, gap, minSegmentPercentForFullGap } = useMemo(() => {\n      const _radius = 50 - thickness / 2;\n      const _circumference = 2 * Math.PI * _radius;\n      const _lineCap = thickness / 2;\n      const _gap = _lineCap;\n      const _minSegmentPercentForFullGap = ((thickness + _gap) / _circumference) * 100;\n\n      return {\n        radius: _radius,\n        circumference: _circumference,\n        lineCap: _lineCap,\n        gap: _gap,\n        minSegmentPercentForFullGap: _minSegmentPercentForFullGap,\n      };\n    }, [thickness]);\n    const obtainValues = useCallback(\n      (v: number) => {\n        const _reversedValue = 100 - v;\n        const _reversedRotation = 360 * (v / 100);\n        const _effectiveGap = gap * Math.max(0, Math.min(1, Math.min(v, _reversedValue) / minSegmentPercentForFullGap));\n        const _dashLength = Math.max((v / 100) * circumference - thickness - _effectiveGap, 0);\n        const _dashOffset = -(lineCap + _effectiveGap / 2);\n        const _reversedDashLength = Math.max((_reversedValue / 100) * circumference - thickness - _effectiveGap, 0);\n\n        return {\n          reversedRotation: _reversedRotation,\n          dashLength: _dashLength,\n          dashOffset: _dashOffset,\n          reversedDashLength: _reversedDashLength,\n        };\n      },\n      [thickness],\n    );\n    const values = obtainValues(displayValue);\n    const [valuesSmall, valuesLarge] = value === undefined ? [obtainValues(15), obtainValues(75)] : [values, values];\n\n    if (state !== 'loading') {\n      return (\n        <ProgressState\n          ref={ref}\n          size={size}\n          state={state}\n          successMessage={successMessage}\n          errorMessage={errorMessage}\n          {...progressStateProps}\n        />\n      );\n    }\n\n    return (\n      <Box\n        data-testid=\"Spinner\"\n        role=\"progressbar\"\n        className={['FlowSpinner-root', className].filter(Boolean).join(', ')}\n        ref={ref}\n        sx={{\n          display: 'inline-flex',\n          alignItems: 'center',\n          justifyContent: 'center',\n          gap: 1,\n          ...sx,\n        }}\n        {...(value !== undefined && {\n          ['aria-valuenow']: value,\n          ['aria-valuemin']: 0,\n          ['aria-valuemax']: 100,\n        })}\n        {...rest}\n      >\n        <SvgIcon\n          aria-live=\"polite\"\n          viewBox=\"0 0 100 100\"\n          sx={{\n            // size is also applied in ProgressState and LoadingText\n            ...(size === 'small' && {\n              width: `16px`,\n              height: `16px`,\n            }),\n            ...(size === 'medium' && {\n              width: `24px`,\n              height: `24px`,\n            }),\n            ...(typeof size === 'number' && {\n              width: `${size}px`,\n              height: `${size}px`,\n            }),\n            color: theme.palette.mode === 'dark' ? 'brand.secondary' : 'brand.primary',\n            // extra animation if value is not provided\n            ...(value === undefined && {\n              '@keyframes flow-spinner-indeterminate': {\n                '0%': { transform: 'rotateZ(0)' },\n                '100%': { transform: 'rotateZ(360deg)' },\n              },\n              '@keyframes flow-spinner-indeterminate-group': {\n                '0%, 25%': { transform: 'rotateZ(0)' },\n                '70%': { transform: 'rotateZ(45deg)' },\n                '100%': { transform: 'rotateZ(360deg)' },\n              },\n              '@keyframes flow-spinner-indeterminate-circle-primary': {\n                '0%, 25%, 100%': {\n                  strokeDasharray: `${valuesSmall.dashLength} ${circumference}`,\n                  strokeDashOffset: valuesSmall.dashOffset,\n                },\n                '70%': {\n                  strokeDasharray: `${valuesLarge.dashLength} ${circumference}`,\n                  strokeDashOffset: valuesLarge.dashOffset,\n                },\n              },\n              '@keyframes flow-spinner-indeterminate-circle-secondary': {\n                '0%, 25%, 100%': {\n                  strokeDasharray: `${valuesSmall.reversedDashLength} ${circumference}`,\n                  strokeDashOffset: valuesSmall.dashOffset,\n                },\n                '70%': {\n                  strokeDasharray: `${valuesLarge.reversedDashLength} ${circumference}`,\n                  strokeDashOffset: valuesLarge.dashOffset,\n                },\n              },\n              '@keyframes flow-spinner-indeterminate-group-secondary': {\n                '0%, 25%, 100%': { transform: `rotate(${valuesSmall.reversedRotation}deg)` },\n                '70%': { transform: `rotate(${valuesLarge.reversedRotation}deg)` },\n              },\n              // assign animation to elements\n              animation: '2s linear infinite flow-spinner-indeterminate',\n              '& > g': {\n                animation: '2s ease-in-out infinite flow-spinner-indeterminate-group',\n                transformOrigin: '50% 50%',\n                '& circle': {\n                  animation: '2s ease-in-out infinite flow-spinner-indeterminate-circle-primary',\n                },\n                '& g': {\n                  animation: '2s ease-in-out infinite flow-spinner-indeterminate-group-secondary',\n                  '& circle': {\n                    animation: '2s ease-in-out infinite flow-spinner-indeterminate-circle-secondary',\n                  },\n                },\n              },\n            }),\n            ...svgIconSx,\n          }}\n          {...restSvgIcon}\n        >\n          <g>\n            {(values.reversedDashLength > 0 || displayValue === 0) && (\n              <g style={{ transform: `rotate(${values.reversedRotation}deg)`, transformOrigin: '50% 50%' }}>\n                <circle\n                  className=\"FlowSpinner-circle-secondary\"\n                  cx=\"50\"\n                  cy=\"50\"\n                  r={radius}\n                  fill=\"none\"\n                  stroke={\n                    theme.palette.mode === 'dark' ? theme.palette.onSurface.os700 : theme.palette.transparent.secondary\n                  }\n                  strokeWidth={thickness}\n                  strokeLinecap=\"round\"\n                  strokeDasharray={`${values.reversedDashLength} ${circumference}`}\n                  strokeDashoffset={values.dashOffset}\n                  {...(displayValue === 0 && {\n                    strokeLinecap: 'butt',\n                    strokeDasharray: 'none',\n                    strokeDashoffset: 'none',\n                  })}\n                />\n              </g>\n            )}\n            {(values.dashLength > 0 || displayValue === 100) && (\n              <circle\n                className=\"FlowSpinner-circle-primary\"\n                cx=\"50\"\n                cy=\"50\"\n                r={radius}\n                fill=\"none\"\n                stroke=\"currentColor\"\n                strokeWidth={thickness}\n                strokeLinecap=\"round\"\n                strokeDasharray={`${values.dashLength} ${circumference}`}\n                strokeDashoffset={values.dashOffset}\n                {...(displayValue === 100 && {\n                  strokeLinecap: 'butt',\n                  strokeDasharray: 'none',\n                  strokeDashoffset: 'none',\n                })}\n              />\n            )}\n          </g>\n        </SvgIcon>\n        {label && value !== undefined && (\n          <LoadingText\n            data-testid=\"Spinner.percentage\"\n            {...(typeof size !== 'number' && { size: size })}\n            value={value}\n            label={label !== true ? label : undefined}\n            sx={{\n              // deprecated overwrites\n              ...(labelSx as CSSProperties),\n              ...(textBoxSx as CSSProperties),\n              // custom overwrites\n              ...loaderTextSx,\n            }}\n            {...restLabel}\n            {...restTextBox}\n            {...restLoaderText}\n          />\n        )}\n      </Box>\n    );\n  },\n);\n"],"names":["Spinner","forwardRef","_a","ref","sx","className","children","size","thickness","value","svgIconProps","loaderTextProps","label","state","successMessage","errorMessage","progressStateProps","textBoxProps","labelProps","spinnerControlledAnimation","_","rest","__rest","theme","useTheme","_b","svgIconSx","restSvgIcon","_c","labelSx","restLabel","_d","textBoxSx","restTextBox","_e","loaderTextSx","restLoaderText","displayValue","setDisplayValue","useState","Number","isNaN","targetValueRef","useRef","rafRef","useEffect","current","animate","prev","diff","next","Math","abs","requestAnimationFrame","cancelAnimationFrame","radius","circumference","lineCap","gap","minSegmentPercentForFullGap","useMemo","_radius","_circumference","PI","_lineCap","obtainValues","useCallback","v","_reversedValue","_reversedRotation","_effectiveGap","max","min","reversedRotation","dashLength","dashOffset","reversedDashLength","values","valuesSmall","valuesLarge","undefined","_jsx","ProgressState","Object","assign","_jsxs","Box","role","filter","Boolean","join","display","alignItems","justifyContent","SvgIcon","viewBox","width","height","color","palette","mode","transform","strokeDasharray","strokeDashOffset","animation","transformOrigin","style","cx","cy","r","fill","stroke","onSurface","os700","transparent","secondary","strokeWidth","strokeLinecap","strokeDashoffset","LoadingText"],"mappings":"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"}
+{"version":3,"file":"Spinner.js","sources":["../../../src/components/progress/Spinner.tsx"],"sourcesContent":["import React, {\n  ElementType,\n  ReactNode,\n  forwardRef,\n  useMemo,\n  useState,\n  useEffect,\n  useRef,\n  CSSProperties,\n  useCallback,\n} from 'react';\nimport { Box, BoxProps, SvgIcon, SvgIconProps, useTheme } from '@mui/material';\nimport { LoadingText, LoadingTextProps } from './LoadingText';\nimport { ProgressState, ProgressStateProps } from './ProgressState';\n\nexport interface SpinnerProps extends BoxProps<ElementType> {\n  /**\n   * Value of progress\n   */\n  value?: number;\n  /**\n   * Affects component size\n   * @default medium\n   */\n  size?: 'small' | 'medium' | number;\n  /**\n   * Stroke width of circle\n   * @default 16\n   */\n  thickness?: number;\n  /**\n   * State indicates whether the component should display loader or spinner for the loading state or message with a icon\n   * @default loading\n   */\n  state?: 'loading' | ProgressStateProps['state'];\n  /**\n   * Message when success appears\n   */\n  successMessage?: ProgressStateProps['successMessage'];\n  /**\n   * Message when error appears\n   */\n  errorMessage?: ProgressStateProps['errorMessage'];\n  /**\n   * Properties applied to ProgressState\n   */\n  progressStateProps?: Omit<ProgressStateProps, 'successMessage' | 'errorMessage' | 'state'>;\n  /**\n   * Properties applied to SVG\n   */\n  svgIconProps?: SvgIconProps;\n  /**\n   * Additional label before LoadingText\n   */\n  label?: boolean | ReactNode;\n  /**\n   * Properties applied to LoadingText\n   */\n  loadingTextProps?: LoadingTextProps;\n  /**\n   * @deprecated use loadingTextProps instead\n   */\n  labelProps?: BoxProps<ElementType>;\n  /**\n   * @deprecated rename to loadingTextProps\n   */\n  textBoxProps?: BoxProps<ElementType>;\n  /**\n   * @deprecated no longer has any effect\n   */\n  spinnerControlledAnimation?: 'controlled' | 'infinite';\n}\n\n/**\n * A styled loader component that displays animated svg circle\n */\nexport const Spinner: React.FC<SpinnerProps> = forwardRef(\n  (\n    {\n      sx,\n      className,\n      children,\n      size = 'medium',\n      thickness = 16,\n      value,\n      svgIconProps,\n      loaderTextProps,\n      label,\n      state = 'loading',\n      successMessage,\n      errorMessage,\n      progressStateProps,\n      textBoxProps,\n      labelProps,\n      spinnerControlledAnimation: _,\n      ...rest\n    },\n    ref,\n  ) => {\n    const theme = useTheme();\n    const { sx: svgIconSx, ...restSvgIcon } = svgIconProps ?? {};\n    const { sx: labelSx, ...restLabel } = labelProps ?? {};\n    const { sx: textBoxSx, ...restTextBox } = textBoxProps ?? {};\n    const { sx: loaderTextSx, ...restLoaderText } = loaderTextProps ?? {};\n\n    // smooth js transition between values\n    const [displayValue, setDisplayValue] = useState(Number.isNaN(value) ? 0 : (value ?? 15));\n    const targetValueRef = useRef<number>();\n    const rafRef = useRef<number>();\n    useEffect(() => {\n      targetValueRef.current = Number.isNaN(value) ? 0 : (value ?? 15);\n\n      const animate = () => {\n        setDisplayValue((prev) => {\n          const diff = targetValueRef.current - prev;\n          const step = diff * 0.5;\n          const next = prev + step;\n\n          // small diff or reset happens immediately\n          if (Math.abs(diff) < 0.1 || targetValueRef.current === 0) {\n            return targetValueRef.current;\n          } else {\n            rafRef.current = requestAnimationFrame(animate);\n            return next;\n          }\n        });\n      };\n      rafRef.current = requestAnimationFrame(animate);\n      return () => cancelAnimationFrame(rafRef.current!);\n    }, [value]);\n\n    const { radius, circumference, lineCap, gap, minSegmentPercentForFullGap } = useMemo(() => {\n      const _radius = 50 - thickness / 2;\n      const _circumference = 2 * Math.PI * _radius;\n      const _lineCap = thickness / 2;\n      const _gap = _lineCap;\n      const _minSegmentPercentForFullGap = ((thickness + _gap) / _circumference) * 100;\n\n      return {\n        radius: _radius,\n        circumference: _circumference,\n        lineCap: _lineCap,\n        gap: _gap,\n        minSegmentPercentForFullGap: _minSegmentPercentForFullGap,\n      };\n    }, [thickness]);\n    const obtainValues = useCallback(\n      (v: number) => {\n        const _reversedValue = 100 - v;\n        const _reversedRotation = 360 * (v / 100);\n        const _effectiveGap = gap * Math.max(0, Math.min(1, Math.min(v, _reversedValue) / minSegmentPercentForFullGap));\n        const _dashLength = Math.max((v / 100) * circumference - thickness - _effectiveGap, 0);\n        const _dashOffset = -(lineCap + _effectiveGap / 2);\n        const _reversedDashLength = Math.max((_reversedValue / 100) * circumference - thickness - _effectiveGap, 0);\n\n        return {\n          reversedRotation: _reversedRotation,\n          dashLength: _dashLength,\n          dashOffset: _dashOffset,\n          reversedDashLength: _reversedDashLength,\n        };\n      },\n      [thickness],\n    );\n    const values = obtainValues(displayValue);\n    const [valuesSmall, valuesLarge] = value === undefined ? [obtainValues(15), obtainValues(75)] : [values, values];\n\n    if (state !== 'loading') {\n      return (\n        <ProgressState\n          ref={ref}\n          size={size}\n          state={state}\n          successMessage={successMessage}\n          errorMessage={errorMessage}\n          {...progressStateProps}\n        />\n      );\n    }\n\n    return (\n      <Box\n        data-testid=\"Spinner\"\n        role=\"progressbar\"\n        className={['FlowSpinner-root', className].filter(Boolean).join(' ')}\n        ref={ref}\n        sx={{\n          display: 'inline-flex',\n          alignItems: 'center',\n          justifyContent: 'center',\n          gap: 1,\n          ...sx,\n        }}\n        {...(value !== undefined && {\n          ['aria-valuenow']: value,\n          ['aria-valuemin']: 0,\n          ['aria-valuemax']: 100,\n        })}\n        {...rest}\n      >\n        <SvgIcon\n          aria-live=\"polite\"\n          viewBox=\"0 0 100 100\"\n          sx={{\n            // size is also applied in ProgressState and LoadingText\n            ...(size === 'small' && {\n              width: `16px`,\n              height: `16px`,\n            }),\n            ...(size === 'medium' && {\n              width: `24px`,\n              height: `24px`,\n            }),\n            ...(typeof size === 'number' && {\n              width: `${size}px`,\n              height: `${size}px`,\n            }),\n            color: theme.palette.mode === 'dark' ? 'brand.secondary' : 'brand.primary',\n            // extra animation if value is not provided\n            ...(value === undefined && {\n              '@keyframes flow-spinner-indeterminate': {\n                '0%': { transform: 'rotateZ(0)' },\n                '100%': { transform: 'rotateZ(360deg)' },\n              },\n              '@keyframes flow-spinner-indeterminate-group': {\n                '0%, 25%': { transform: 'rotateZ(0)' },\n                '70%': { transform: 'rotateZ(45deg)' },\n                '100%': { transform: 'rotateZ(360deg)' },\n              },\n              '@keyframes flow-spinner-indeterminate-circle-primary': {\n                '0%, 25%, 100%': {\n                  strokeDasharray: `${valuesSmall.dashLength} ${circumference}`,\n                  strokeDashOffset: valuesSmall.dashOffset,\n                },\n                '70%': {\n                  strokeDasharray: `${valuesLarge.dashLength} ${circumference}`,\n                  strokeDashOffset: valuesLarge.dashOffset,\n                },\n              },\n              '@keyframes flow-spinner-indeterminate-circle-secondary': {\n                '0%, 25%, 100%': {\n                  strokeDasharray: `${valuesSmall.reversedDashLength} ${circumference}`,\n                  strokeDashOffset: valuesSmall.dashOffset,\n                },\n                '70%': {\n                  strokeDasharray: `${valuesLarge.reversedDashLength} ${circumference}`,\n                  strokeDashOffset: valuesLarge.dashOffset,\n                },\n              },\n              '@keyframes flow-spinner-indeterminate-group-secondary': {\n                '0%, 25%, 100%': { transform: `rotate(${valuesSmall.reversedRotation}deg)` },\n                '70%': { transform: `rotate(${valuesLarge.reversedRotation}deg)` },\n              },\n              // assign animation to elements\n              animation: '2s linear infinite flow-spinner-indeterminate',\n              '& > g': {\n                animation: '2s ease-in-out infinite flow-spinner-indeterminate-group',\n                transformOrigin: '50% 50%',\n                '& circle': {\n                  animation: '2s ease-in-out infinite flow-spinner-indeterminate-circle-primary',\n                },\n                '& g': {\n                  animation: '2s ease-in-out infinite flow-spinner-indeterminate-group-secondary',\n                  '& circle': {\n                    animation: '2s ease-in-out infinite flow-spinner-indeterminate-circle-secondary',\n                  },\n                },\n              },\n            }),\n            ...svgIconSx,\n          }}\n          {...restSvgIcon}\n        >\n          <g>\n            {(values.reversedDashLength > 0 || displayValue === 0) && (\n              <g style={{ transform: `rotate(${values.reversedRotation}deg)`, transformOrigin: '50% 50%' }}>\n                <circle\n                  className=\"FlowSpinner-circle-secondary\"\n                  cx=\"50\"\n                  cy=\"50\"\n                  r={radius}\n                  fill=\"none\"\n                  stroke={\n                    theme.palette.mode === 'dark' ? theme.palette.onSurface.os700 : theme.palette.transparent.secondary\n                  }\n                  strokeWidth={thickness}\n                  strokeLinecap=\"round\"\n                  strokeDasharray={`${values.reversedDashLength} ${circumference}`}\n                  strokeDashoffset={values.dashOffset}\n                  {...(displayValue === 0 && {\n                    strokeLinecap: 'butt',\n                    strokeDasharray: 'none',\n                    strokeDashoffset: 'none',\n                  })}\n                />\n              </g>\n            )}\n            {(values.dashLength > 0 || displayValue === 100) && (\n              <circle\n                className=\"FlowSpinner-circle-primary\"\n                cx=\"50\"\n                cy=\"50\"\n                r={radius}\n                fill=\"none\"\n                stroke=\"currentColor\"\n                strokeWidth={thickness}\n                strokeLinecap=\"round\"\n                strokeDasharray={`${values.dashLength} ${circumference}`}\n                strokeDashoffset={values.dashOffset}\n                {...(displayValue === 100 && {\n                  strokeLinecap: 'butt',\n                  strokeDasharray: 'none',\n                  strokeDashoffset: 'none',\n                })}\n              />\n            )}\n          </g>\n        </SvgIcon>\n        {label && value !== undefined && (\n          <LoadingText\n            data-testid=\"Spinner.percentage\"\n            {...(typeof size !== 'number' && { size: size })}\n            value={value}\n            label={label !== true ? label : undefined}\n            sx={{\n              // deprecated overwrites\n              ...(labelSx as CSSProperties),\n              ...(textBoxSx as CSSProperties),\n              // custom overwrites\n              ...loaderTextSx,\n            }}\n            {...restLabel}\n            {...restTextBox}\n            {...restLoaderText}\n          />\n        )}\n      </Box>\n    );\n  },\n);\n"],"names":["Spinner","forwardRef","_a","ref","sx","className","children","size","thickness","value","svgIconProps","loaderTextProps","label","state","successMessage","errorMessage","progressStateProps","textBoxProps","labelProps","spinnerControlledAnimation","_","rest","__rest","theme","useTheme","_b","svgIconSx","restSvgIcon","_c","labelSx","restLabel","_d","textBoxSx","restTextBox","_e","loaderTextSx","restLoaderText","displayValue","setDisplayValue","useState","Number","isNaN","targetValueRef","useRef","rafRef","useEffect","current","animate","prev","diff","next","Math","abs","requestAnimationFrame","cancelAnimationFrame","radius","circumference","lineCap","gap","minSegmentPercentForFullGap","useMemo","_radius","_circumference","PI","_lineCap","obtainValues","useCallback","v","_reversedValue","_reversedRotation","_effectiveGap","max","min","reversedRotation","dashLength","dashOffset","reversedDashLength","values","valuesSmall","valuesLarge","undefined","_jsx","ProgressState","Object","assign","_jsxs","Box","role","filter","Boolean","join","display","alignItems","justifyContent","SvgIcon","viewBox","width","height","color","palette","mode","transform","strokeDasharray","strokeDashOffset","animation","transformOrigin","style","cx","cy","r","fill","stroke","onSurface","os700","transparent","secondary","strokeWidth","strokeLinecap","strokeDashoffset","LoadingText"],"mappings":"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"}

package/components/quickLink/quickLink.d.ts

@@ -1,15 +1,19 @@
 import React, { ReactNode, ElementType } from 'react';
-import { StackProps, TypographyProps, ButtonProps, BoxProps } from '@mui/material';
+import { StackProps, TypographyProps, ButtonProps, BoxProps, SvgIconProps } from '@mui/material';
 import { IconProps } from '@/src/components/icon';
 export interface QuickLinkProps extends Omit<StackProps<ElementType>, 'title'> {
     /**
-     * Name of the icon from icon set
+     * Icon node to be used
+     */
+    IconComponent?: ElementType<SvgIconProps>;
+    /**
+     * @deprecated use IconComponent instead with specific icon instead, e.g. IconComponent={HeartIcon}
      */
     iconName?: IconProps['name'];
     /**
      * Props applied to Icon component
      */
-    iconProps?: IconProps;
+    iconProps?: IconProps | SvgIconProps;
     /**
      * Title text
      */