synapse-react-client 4.0.4 → 4.0.5-b

package/dist/components/styled/HoverPopover.js.map

@@ -1 +1 @@
-{"version":3,"file":"HoverPopover.js","sources":["../../../src/components/styled/HoverPopover.tsx"],"sourcesContent":["import {\n  Box,\n  Button,\n  ButtonProps,\n  DialogActions,\n  DialogContent,\n  DialogTitle,\n  Popover,\n  PopoverOrigin,\n} from '@mui/material'\nimport { PropsWithChildren, ReactNode, useRef, useState } from 'react'\nimport styles from './HoverPopover.module.scss'\n\nexport type HoverPopoverPlacement = 'top' | 'bottom' | 'left' | 'right'\n\nfunction getOrigins(placement: HoverPopoverPlacement): {\n  anchorOrigin: PopoverOrigin\n  transformOrigin: PopoverOrigin\n} {\n  switch (placement) {\n    case 'top':\n      return {\n        anchorOrigin: { vertical: 'top', horizontal: 'center' },\n        transformOrigin: { vertical: 'bottom', horizontal: 'center' },\n      }\n    case 'bottom':\n      return {\n        anchorOrigin: { vertical: 'bottom', horizontal: 'center' },\n        transformOrigin: { vertical: 'top', horizontal: 'center' },\n      }\n    case 'left':\n      return {\n        anchorOrigin: { vertical: 'center', horizontal: 'left' },\n        transformOrigin: { vertical: 'center', horizontal: 'right' },\n      }\n    case 'right':\n      return {\n        anchorOrigin: { vertical: 'center', horizontal: 'right' },\n        transformOrigin: { vertical: 'center', horizontal: 'left' },\n      }\n  }\n}\n\n/** Delay in ms before the popover closes after the mouse leaves the trigger or popover */\nconst CLOSE_DELAY_MS = 150\n\nexport type HoverPopoverProps = PropsWithChildren<{\n  popoverContent: ReactNode\n  /** Optional title rendered as a sticky header above the scrollable content */\n  title?: string\n  placement?: HoverPopoverPlacement\n\n  maxWidth?: string | number\n  minWidth?: string | number\n  /** Max height of the scrollable content area. Default 400px. */\n  maxHeight?: string | number\n  actionButton?: {\n    content: ReactNode\n    color?: ButtonProps['color']\n    variant?: ButtonProps['variant']\n    onClick: () => void\n    /** If true, closes the popover after the button is clicked */\n    closeOnClick?: boolean\n  }\n}>\n\n/**\n * A popover that opens when the user hovers over the trigger child and remains\n * open as long as the mouse is over either the trigger or the popover itself.\n * The content area is scrollable, avoiding any interaction with browser scroll.\n */\nexport function HoverPopover({\n  children,\n  popoverContent,\n  title,\n  placement = 'right',\n  maxWidth = 500,\n  minWidth = 300,\n  maxHeight = 400,\n  actionButton,\n}: HoverPopoverProps) {\n  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null)\n  const closeTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null)\n\n  const cancelClose = () => {\n    if (closeTimeoutRef.current !== null) {\n      clearTimeout(closeTimeoutRef.current)\n      closeTimeoutRef.current = null\n    }\n  }\n\n  const scheduleClose = () => {\n    cancelClose()\n    closeTimeoutRef.current = setTimeout(() => {\n      setAnchorEl(null)\n    }, CLOSE_DELAY_MS)\n  }\n\n  const { anchorOrigin, transformOrigin } = getOrigins(placement)\n\n  return (\n    <>\n      <Box\n        component=\"span\"\n        onMouseEnter={e => {\n          cancelClose()\n          setAnchorEl(e.currentTarget)\n        }}\n        onMouseLeave={scheduleClose}\n        className={styles.triggerWrapper}\n      >\n        {children}\n      </Box>\n      <Popover\n        open={anchorEl !== null}\n        anchorEl={anchorEl}\n        anchorOrigin={anchorOrigin}\n        transformOrigin={transformOrigin}\n        onClose={() => setAnchorEl(null)}\n        disableAutoFocus\n        disableEnforceFocus\n        disableScrollLock\n        slotProps={{\n          backdrop: { sx: { pointerEvents: 'none' } },\n          paper: {\n            onMouseEnter: cancelClose,\n            onMouseLeave: scheduleClose,\n            className: styles.paper,\n            sx: { maxWidth, minWidth },\n          },\n        }}\n      >\n        {title && (\n          <DialogTitle sx={{ fontSize: '18px', padding: '16px 10px' }}>\n            {title}\n          </DialogTitle>\n        )}\n        <DialogContent sx={{ maxHeight, padding: '10px' }}>\n          {popoverContent}\n        </DialogContent>\n        {actionButton && (\n          <DialogActions sx={{ paddingX: '10px' }}>\n            <Button\n              color={actionButton.color ?? 'primary'}\n              variant={actionButton.variant ?? 'contained'}\n              fullWidth\n              onClick={() => {\n                actionButton.onClick()\n                if (actionButton.closeOnClick) {\n                  setAnchorEl(null)\n                }\n              }}\n            >\n              {actionButton.content}\n            </Button>\n          </DialogActions>\n        )}\n      </Popover>\n    </>\n  )\n}\n"],"names":["getOrigins","placement","CLOSE_DELAY_MS","HoverPopover","children","popoverContent","title","maxWidth","minWidth","maxHeight","actionButton","anchorEl","setAnchorEl","useState","closeTimeoutRef","useRef","cancelClose","scheduleClose","anchorOrigin","transformOrigin","jsxs","Fragment","jsx","Box","e","styles","Popover","DialogTitle","DialogContent","DialogActions","Button"],"mappings":"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"}
+{"version":3,"file":"HoverPopover.js","sources":["../../../src/components/styled/HoverPopover.tsx"],"sourcesContent":["import {\n  Box,\n  Button,\n  ButtonProps,\n  DialogActions,\n  DialogContent,\n  DialogTitle,\n  Popover,\n  PopoverOrigin,\n} from '@mui/material'\nimport { PropsWithChildren, ReactNode, useRef, useState } from 'react'\nimport styles from './HoverPopover.module.scss'\n\nexport type HoverPopoverPlacement = 'top' | 'bottom' | 'left' | 'right'\n\nfunction getOrigins(placement: HoverPopoverPlacement): {\n  anchorOrigin: PopoverOrigin\n  transformOrigin: PopoverOrigin\n} {\n  switch (placement) {\n    case 'top':\n      return {\n        anchorOrigin: { vertical: 'top', horizontal: 'center' },\n        transformOrigin: { vertical: 'bottom', horizontal: 'center' },\n      }\n    case 'bottom':\n      return {\n        anchorOrigin: { vertical: 'bottom', horizontal: 'center' },\n        transformOrigin: { vertical: 'top', horizontal: 'center' },\n      }\n    case 'left':\n      return {\n        anchorOrigin: { vertical: 'center', horizontal: 'left' },\n        transformOrigin: { vertical: 'center', horizontal: 'right' },\n      }\n    case 'right':\n      return {\n        anchorOrigin: { vertical: 'center', horizontal: 'right' },\n        transformOrigin: { vertical: 'center', horizontal: 'left' },\n      }\n  }\n}\n\n/** Delay in ms before the popover closes after the mouse leaves the trigger or popover */\nconst CLOSE_DELAY_MS = 150\n\nexport type HoverPopoverProps = PropsWithChildren<{\n  popoverContent: ReactNode\n  /** Optional title rendered as a sticky header above the scrollable content */\n  title?: string\n  placement?: HoverPopoverPlacement\n\n  maxWidth?: string | number\n  minWidth?: string | number\n  /** Max height of the scrollable content area. Default 400px. */\n  maxHeight?: string | number\n  actionButton?: {\n    content: ReactNode\n    color?: ButtonProps['color']\n    variant?: ButtonProps['variant']\n    onClick: () => void\n    /** If true, closes the popover after the button is clicked */\n    closeOnClick?: boolean\n  }\n}>\n\n/**\n * A popover that opens when the user hovers over the trigger child and remains\n * open as long as the mouse is over either the trigger or the popover itself.\n * The content area is scrollable, avoiding any interaction with browser scroll.\n */\nexport function HoverPopover({\n  children,\n  popoverContent,\n  title,\n  placement = 'right',\n  maxWidth = 500,\n  minWidth = 300,\n  maxHeight = 400,\n  actionButton,\n}: HoverPopoverProps) {\n  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null)\n  const closeTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null)\n\n  const cancelClose = () => {\n    if (closeTimeoutRef.current !== null) {\n      clearTimeout(closeTimeoutRef.current)\n      closeTimeoutRef.current = null\n    }\n  }\n\n  const scheduleClose = () => {\n    cancelClose()\n    closeTimeoutRef.current = setTimeout(() => {\n      setAnchorEl(null)\n    }, CLOSE_DELAY_MS)\n  }\n\n  const { anchorOrigin, transformOrigin } = getOrigins(placement)\n\n  return (\n    <>\n      <Box\n        component=\"span\"\n        onMouseEnter={e => {\n          cancelClose()\n          setAnchorEl(e.currentTarget)\n        }}\n        onMouseLeave={scheduleClose}\n        className={styles.triggerWrapper}\n      >\n        {children}\n      </Box>\n      <Popover\n        open={anchorEl !== null}\n        anchorEl={anchorEl}\n        anchorOrigin={anchorOrigin}\n        transformOrigin={transformOrigin}\n        onClose={() => setAnchorEl(null)}\n        disableAutoFocus\n        disableEnforceFocus\n        disableScrollLock\n        sx={{ pointerEvents: 'none' }}\n        slotProps={{\n          backdrop: { sx: { pointerEvents: 'none' } },\n          paper: {\n            onMouseEnter: cancelClose,\n            onMouseLeave: scheduleClose,\n            className: styles.paper,\n            sx: { maxWidth, minWidth, pointerEvents: 'auto' },\n          },\n        }}\n      >\n        {title && (\n          <DialogTitle sx={{ fontSize: '18px', padding: '16px 10px' }}>\n            {title}\n          </DialogTitle>\n        )}\n        <DialogContent sx={{ maxHeight, padding: '10px' }}>\n          {popoverContent}\n        </DialogContent>\n        {actionButton && (\n          <DialogActions sx={{ paddingX: '10px' }}>\n            <Button\n              color={actionButton.color ?? 'primary'}\n              variant={actionButton.variant ?? 'contained'}\n              fullWidth\n              onClick={() => {\n                actionButton.onClick()\n                if (actionButton.closeOnClick) {\n                  setAnchorEl(null)\n                }\n              }}\n            >\n              {actionButton.content}\n            </Button>\n          </DialogActions>\n        )}\n      </Popover>\n    </>\n  )\n}\n"],"names":["getOrigins","placement","CLOSE_DELAY_MS","HoverPopover","children","popoverContent","title","maxWidth","minWidth","maxHeight","actionButton","anchorEl","setAnchorEl","useState","closeTimeoutRef","useRef","cancelClose","scheduleClose","anchorOrigin","transformOrigin","jsxs","Fragment","jsx","Box","e","styles","Popover","DialogTitle","DialogContent","DialogActions","Button"],"mappings":";;;;AAeA,SAASA,EAAWC,GAGlB;AACA,UAAQA,GAAA;AAAA,IACN,KAAK;AACH,aAAO;AAAA,QACL,cAAc,EAAE,UAAU,OAAO,YAAY,SAAA;AAAA,QAC7C,iBAAiB,EAAE,UAAU,UAAU,YAAY,SAAA;AAAA,MAAS;AAAA,IAEhE,KAAK;AACH,aAAO;AAAA,QACL,cAAc,EAAE,UAAU,UAAU,YAAY,SAAA;AAAA,QAChD,iBAAiB,EAAE,UAAU,OAAO,YAAY,SAAA;AAAA,MAAS;AAAA,IAE7D,KAAK;AACH,aAAO;AAAA,QACL,cAAc,EAAE,UAAU,UAAU,YAAY,OAAA;AAAA,QAChD,iBAAiB,EAAE,UAAU,UAAU,YAAY,QAAA;AAAA,MAAQ;AAAA,IAE/D,KAAK;AACH,aAAO;AAAA,QACL,cAAc,EAAE,UAAU,UAAU,YAAY,QAAA;AAAA,QAChD,iBAAiB,EAAE,UAAU,UAAU,YAAY,OAAA;AAAA,MAAO;AAAA,EAC5D;AAEN;AAGA,MAAMC,IAAiB;AA2BhB,SAASC,EAAa;AAAA,EAC3B,UAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,OAAAC;AAAA,EACA,WAAAL,IAAY;AAAA,EACZ,UAAAM,IAAW;AAAA,EACX,UAAAC,IAAW;AAAA,EACX,WAAAC,IAAY;AAAA,EACZ,cAAAC;AACF,GAAsB;AACpB,QAAM,CAACC,GAAUC,CAAW,IAAIC,EAA6B,IAAI,GAC3DC,IAAkBC,EAA6C,IAAI,GAEnEC,IAAc,MAAM;AACxB,IAAIF,EAAgB,YAAY,SAC9B,aAAaA,EAAgB,OAAO,GACpCA,EAAgB,UAAU;AAAA,EAE9B,GAEMG,IAAgB,MAAM;AAC1B,IAAAD,EAAA,GACAF,EAAgB,UAAU,WAAW,MAAM;AACzC,MAAAF,EAAY,IAAI;AAAA,IAClB,GAAGV,CAAc;AAAA,EACnB,GAEM,EAAE,cAAAgB,GAAc,iBAAAC,MAAoBnB,EAAWC,CAAS;AAE9D,SACE,gBAAAmB,EAAAC,GAAA,EACE,UAAA;AAAA,IAAA,gBAAAC;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,WAAU;AAAA,QACV,cAAc,CAAAC,MAAK;AACjB,UAAAR,EAAA,GACAJ,EAAYY,EAAE,aAAa;AAAA,QAC7B;AAAA,QACA,cAAcP;AAAA,QACd,WAAWQ,EAAO;AAAA,QAEjB,UAAArB;AAAA,MAAA;AAAA,IAAA;AAAA,IAEH,gBAAAgB;AAAA,MAACM;AAAA,MAAA;AAAA,QACC,MAAMf,MAAa;AAAA,QACnB,UAAAA;AAAA,QACA,cAAAO;AAAA,QACA,iBAAAC;AAAA,QACA,SAAS,MAAMP,EAAY,IAAI;AAAA,QAC/B,kBAAgB;AAAA,QAChB,qBAAmB;AAAA,QACnB,mBAAiB;AAAA,QACjB,IAAI,EAAE,eAAe,OAAA;AAAA,QACrB,WAAW;AAAA,UACT,UAAU,EAAE,IAAI,EAAE,eAAe,SAAO;AAAA,UACxC,OAAO;AAAA,YACL,cAAcI;AAAA,YACd,cAAcC;AAAA,YACd,WAAWQ,EAAO;AAAA,YAClB,IAAI,EAAE,UAAAlB,GAAU,UAAAC,GAAU,eAAe,OAAA;AAAA,UAAO;AAAA,QAClD;AAAA,QAGD,UAAA;AAAA,UAAAF,KACC,gBAAAgB,EAACK,KAAY,IAAI,EAAE,UAAU,QAAQ,SAAS,YAAA,GAC3C,UAAArB,EAAA,CACH;AAAA,UAEF,gBAAAgB,EAACM,KAAc,IAAI,EAAE,WAAAnB,GAAW,SAAS,OAAA,GACtC,UAAAJ,GACH;AAAA,UACCK,KACC,gBAAAY,EAACO,GAAA,EAAc,IAAI,EAAE,UAAU,UAC7B,UAAA,gBAAAP;AAAA,YAACQ;AAAA,YAAA;AAAA,cACC,OAAOpB,EAAa,SAAS;AAAA,cAC7B,SAASA,EAAa,WAAW;AAAA,cACjC,WAAS;AAAA,cACT,SAAS,MAAM;AACb,gBAAAA,EAAa,QAAA,GACTA,EAAa,gBACfE,EAAY,IAAI;AAAA,cAEpB;AAAA,cAEC,UAAAF,EAAa;AAAA,YAAA;AAAA,UAAA,EAChB,CACF;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAEJ,GACF;AAEJ;"}

package/dist/components/styled/HoverPopover.module.scss

@@ -1,5 +1,6 @@
 .triggerWrapper {
-  display: inline-block;
+  display: inline-flex;
+  align-items: center;
 }
 
 .paper {

package/dist/components/styled/HoverPopover.module.scss.js

@@ -1,4 +1,4 @@
-import './HoverPopover.css';const r = "_triggerWrapper_9prk2_1", p = "_paper_9prk2_5", e = {
+import './HoverPopover.css';const r = "_triggerWrapper_5sipe_1", p = "_paper_5sipe_6", e = {
   triggerWrapper: r,
   paper: p
 };