synapse-react-client 4.0.18 → 4.0.20

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

@@ -1 +1 @@
-{"version":3,"file":"InlineBadge.js","names":[],"sources":["../../../src/components/styled/InlineBadge.tsx"],"sourcesContent":["import { Badge, BadgeProps, styled } from '@mui/material'\nimport { StyledComponent } from '@emotion/styled'\n\n/**\n * Renders a badge component in-line with other content, instead of as an overlay.\n */\nexport const InlineBadge: StyledComponent<BadgeProps> = styled(Badge, {\n  label: 'InlineBadge',\n})(({ theme }) => ({\n  position: 'static',\n  justifyContent: 'flex-end',\n  alignItems: 'center',\n  '.MuiBadge-badge': {\n    minWidth: 'unset',\n    position: 'relative',\n    transform: 'none',\n  },\n}))\n\nexport default InlineBadge\n"],"mappings":";;AAMA,IAAa,IAA2C,EAAO,GAAO,EACpE,OAAO,eACR,CAAC,EAAE,EAAE,gBAAa;CACjB,UAAU;CACV,gBAAgB;CAChB,YAAY;CACZ,mBAAmB;EACjB,UAAU;EACV,UAAU;EACV,WAAW;EACZ;CACF,EAAE"}
+{"version":3,"file":"InlineBadge.js","names":[],"sources":["../../../src/components/styled/InlineBadge.tsx"],"sourcesContent":["import { Badge, BadgeProps, styled } from '@mui/material'\nimport { StyledComponent } from '@emotion/styled'\n\n/**\n * Renders a badge component in-line with other content, instead of as an overlay.\n */\nexport const InlineBadge: StyledComponent<BadgeProps> = styled(Badge, {\n  label: 'InlineBadge',\n})(({ theme }) => ({\n  position: 'static',\n  justifyContent: 'flex-end',\n  alignItems: 'center',\n  '.MuiBadge-badge': {\n    minWidth: 'unset',\n    position: 'relative',\n    transform: 'none',\n  },\n}))\n\nexport default InlineBadge\n"],"mappings":";;AAMA,IAAa,IAA2C,EAAO,GAAO,EACpE,OAAO,cACT,CAAC,GAAG,EAAE,gBAAa;CACjB,UAAU;CACV,gBAAgB;CAChB,YAAY;CACZ,mBAAmB;EACjB,UAAU;EACV,UAAU;EACV,WAAW;CACb;AACF,EAAE"}

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

@@ -1 +1 @@
-{"version":3,"file":"InputSizedButton.js","names":[],"sources":["../../../src/components/styled/InputSizedButton.tsx"],"sourcesContent":["import { Button, ButtonProps, styled } from '@mui/material'\nimport { StyledComponent } from '@emotion/styled'\n\nexport const InputSizedButton: StyledComponent<ButtonProps> = styled(Button, {\n  label: 'InputSizedButton',\n})(({ theme }) => ({\n  height: 'calc(1.4375em + 33px)',\n  marginTop: theme.spacing(3),\n  marginBottom: theme.spacing(1.5),\n}))\n\nexport default InputSizedButton\n"],"mappings":";;AAGA,IAAa,IAAiD,EAAO,GAAQ,EAC3E,OAAO,oBACR,CAAC,EAAE,EAAE,gBAAa;CACjB,QAAQ;CACR,WAAW,EAAM,QAAQ,EAAE;CAC3B,cAAc,EAAM,QAAQ,IAAI;CACjC,EAAE"}
+{"version":3,"file":"InputSizedButton.js","names":[],"sources":["../../../src/components/styled/InputSizedButton.tsx"],"sourcesContent":["import { Button, ButtonProps, styled } from '@mui/material'\nimport { StyledComponent } from '@emotion/styled'\n\nexport const InputSizedButton: StyledComponent<ButtonProps> = styled(Button, {\n  label: 'InputSizedButton',\n})(({ theme }) => ({\n  height: 'calc(1.4375em + 33px)',\n  marginTop: theme.spacing(3),\n  marginBottom: theme.spacing(1.5),\n}))\n\nexport default InputSizedButton\n"],"mappings":";;AAGA,IAAa,IAAiD,EAAO,GAAQ,EAC3E,OAAO,mBACT,CAAC,GAAG,EAAE,gBAAa;CACjB,QAAQ;CACR,WAAW,EAAM,QAAQ,CAAC;CAC1B,cAAc,EAAM,QAAQ,GAAG;AACjC,EAAE"}

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

@@ -1 +1 @@
-{"version":3,"file":"LargeButton.js","names":[],"sources":["../../../src/components/styled/LargeButton.tsx"],"sourcesContent":["import { Button, ButtonProps, styled } from '@mui/material'\nimport { StyledComponent } from '@emotion/styled'\n\nexport const LargeButton: StyledComponent<ButtonProps> = styled(Button, {\n  label: 'LargeButton',\n})(({ theme }) => ({\n  padding: '10px 24px',\n  fontSize: '16px',\n}))\n\nexport default LargeButton\n"],"mappings":";;AAGA,IAAa,IAA4C,EAAO,GAAQ,EACtE,OAAO,eACR,CAAC,EAAE,EAAE,gBAAa;CACjB,SAAS;CACT,UAAU;CACX,EAAE"}
+{"version":3,"file":"LargeButton.js","names":[],"sources":["../../../src/components/styled/LargeButton.tsx"],"sourcesContent":["import { Button, ButtonProps, styled } from '@mui/material'\nimport { StyledComponent } from '@emotion/styled'\n\nexport const LargeButton: StyledComponent<ButtonProps> = styled(Button, {\n  label: 'LargeButton',\n})(({ theme }) => ({\n  padding: '10px 24px',\n  fontSize: '16px',\n}))\n\nexport default LargeButton\n"],"mappings":";;AAGA,IAAa,IAA4C,EAAO,GAAQ,EACtE,OAAO,cACT,CAAC,GAAG,EAAE,gBAAa;CACjB,SAAS;CACT,UAAU;AACZ,EAAE"}

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

@@ -1 +1 @@
-{"version":3,"file":"LeftRightPanel.js","names":[],"sources":["../../../src/components/styled/LeftRightPanel.tsx"],"sourcesContent":["import { Box, BoxProps, Paper, PaperProps, styled } from '@mui/material'\nimport { StyledComponent } from '@emotion/styled'\nimport { ReactNode } from 'react'\n\nexport const StyledOuterContainer: StyledComponent<BoxProps> = styled(Box, {\n  label: 'StyledOuterContainer',\n})(({ theme }) => ({\n  minHeight: '100vh',\n  paddingTop: '50px',\n  paddingBottom: '50px',\n  background: theme.styledBackground,\n  backgroundSize: 'cover',\n  [theme.breakpoints.down('md')]: {\n    padding: 0,\n  },\n}))\n\nexport const StyledInnerContainer: StyledComponent<PaperProps> = styled(Paper, {\n  label: 'StyledInnerContainer',\n})(({ theme }) => ({\n  width: '900px',\n  minHeight: '675px',\n  margin: '0 auto',\n  display: 'flex',\n  '& > div:nth-of-type(1), & > div:nth-of-type(2)': {\n    borderRadius: 'inherit',\n    width: '450px',\n  },\n  '& > div:nth-of-type(1)': {\n    backgroundColor: theme.palette.background.paper,\n  },\n  '& > div:nth-of-type(2)': {\n    backgroundColor: theme.palette.grey[200],\n  },\n}))\n\ntype LeftRightPanelProps = {\n  leftContent: ReactNode\n  rightContent: ReactNode\n  className?: string\n}\n\nexport function LeftRightPanel({\n  leftContent,\n  rightContent,\n  className,\n}: LeftRightPanelProps) {\n  return (\n    <StyledOuterContainer className={className}>\n      <StyledInnerContainer>\n        <Box>{leftContent}</Box>\n        <Box>{rightContent}</Box>\n      </StyledInnerContainer>\n    </StyledOuterContainer>\n  )\n}\n"],"mappings":";;;AAIA,IAAa,IAAkD,EAAO,GAAK,EACzE,OAAO,wBACR,CAAC,EAAE,EAAE,gBAAa;CACjB,WAAW;CACX,YAAY;CACZ,eAAe;CACf,YAAY,EAAM;CAClB,gBAAgB;EACf,EAAM,YAAY,KAAK,KAAK,GAAG,EAC9B,SAAS,GACV;CACF,EAAE,EAEU,IAAoD,EAAO,GAAO,EAC7E,OAAO,wBACR,CAAC,EAAE,EAAE,gBAAa;CACjB,OAAO;CACP,WAAW;CACX,QAAQ;CACR,SAAS;CACT,kDAAkD;EAChD,cAAc;EACd,OAAO;EACR;CACD,0BAA0B,EACxB,iBAAiB,EAAM,QAAQ,WAAW,OAC3C;CACD,0BAA0B,EACxB,iBAAiB,EAAM,QAAQ,KAAK,MACrC;CACF,EAAE;AAQH,SAAgB,EAAe,EAC7B,gBACA,iBACA,gBACsB;AACtB,QACE,kBAAC,GAAD;EAAiC;YAC/B,kBAAC,GAAD,EAAA,UAAA,CACE,kBAAC,GAAD,EAAA,UAAM,GAAkB,CAAA,EACxB,kBAAC,GAAD,EAAA,UAAM,GAAmB,CAAA,CACJ,EAAA,CAAA;EACF,CAAA"}
+{"version":3,"file":"LeftRightPanel.js","names":[],"sources":["../../../src/components/styled/LeftRightPanel.tsx"],"sourcesContent":["import { Box, BoxProps, Paper, PaperProps, styled } from '@mui/material'\nimport { StyledComponent } from '@emotion/styled'\nimport { ReactNode } from 'react'\n\nexport const StyledOuterContainer: StyledComponent<BoxProps> = styled(Box, {\n  label: 'StyledOuterContainer',\n})(({ theme }) => ({\n  minHeight: '100vh',\n  paddingTop: '50px',\n  paddingBottom: '50px',\n  background: theme.styledBackground,\n  backgroundSize: 'cover',\n  [theme.breakpoints.down('md')]: {\n    padding: 0,\n  },\n}))\n\nexport const StyledInnerContainer: StyledComponent<PaperProps> = styled(Paper, {\n  label: 'StyledInnerContainer',\n})(({ theme }) => ({\n  width: '900px',\n  minHeight: '675px',\n  margin: '0 auto',\n  display: 'flex',\n  '& > div:nth-of-type(1), & > div:nth-of-type(2)': {\n    borderRadius: 'inherit',\n    width: '450px',\n  },\n  '& > div:nth-of-type(1)': {\n    backgroundColor: theme.palette.background.paper,\n  },\n  '& > div:nth-of-type(2)': {\n    backgroundColor: theme.palette.grey[200],\n  },\n}))\n\ntype LeftRightPanelProps = {\n  leftContent: ReactNode\n  rightContent: ReactNode\n  className?: string\n}\n\nexport function LeftRightPanel({\n  leftContent,\n  rightContent,\n  className,\n}: LeftRightPanelProps) {\n  return (\n    <StyledOuterContainer className={className}>\n      <StyledInnerContainer>\n        <Box>{leftContent}</Box>\n        <Box>{rightContent}</Box>\n      </StyledInnerContainer>\n    </StyledOuterContainer>\n  )\n}\n"],"mappings":";;;AAIA,IAAa,IAAkD,EAAO,GAAK,EACzE,OAAO,uBACT,CAAC,GAAG,EAAE,gBAAa;CACjB,WAAW;CACX,YAAY;CACZ,eAAe;CACf,YAAY,EAAM;CAClB,gBAAgB;EACf,EAAM,YAAY,KAAK,IAAI,IAAI,EAC9B,SAAS,EACX;AACF,EAAE,GAEW,IAAoD,EAAO,GAAO,EAC7E,OAAO,uBACT,CAAC,GAAG,EAAE,gBAAa;CACjB,OAAO;CACP,WAAW;CACX,QAAQ;CACR,SAAS;CACT,kDAAkD;EAChD,cAAc;EACd,OAAO;CACT;CACA,0BAA0B,EACxB,iBAAiB,EAAM,QAAQ,WAAW,MAC5C;CACA,0BAA0B,EACxB,iBAAiB,EAAM,QAAQ,KAAK,KACtC;AACF,EAAE;AAQF,SAAgB,EAAe,EAC7B,gBACA,iBACA,gBACsB;CACtB,OACE,kBAAC,GAAD;EAAiC;YAC/B,kBAAC,GAAD,EAAA,UAAA,CACE,kBAAC,GAAD,EAAA,UAAM,EAAiB,CAAA,GACvB,kBAAC,GAAD,EAAA,UAAM,EAAkB,CAAA,CACJ,EAAA,CAAA;CACF,CAAA;AAE1B"}

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

@@ -1 +1 @@
-{"version":3,"file":"LightTooltip.js","names":[],"sources":["../../../src/components/styled/LightTooltip.tsx"],"sourcesContent":["import {\n  Tooltip,\n  TooltipProps,\n  tooltipClasses,\n  styled,\n  linkClasses,\n} from '@mui/material'\nimport { StyledComponent } from '@emotion/styled'\n\nexport const LightTooltip: StyledComponent<TooltipProps> = styled(\n  ({ className, ...props }: TooltipProps) => (\n    <Tooltip {...props} classes={{ popper: className }} />\n  ),\n)(({ theme }) => ({\n  [`& .${tooltipClasses.tooltip}`]: {\n    backgroundColor: theme.palette.background.paper,\n    color: theme.palette.grey[1000],\n    boxShadow: theme.shadows[1],\n    border: `1px solid ${theme.palette.grey[500]}`,\n  },\n  [`& .${tooltipClasses.arrow}`]: {\n    '&:before': {\n      boxShadow: theme.shadows[1],\n      border: `1px solid ${theme.palette.grey[500]}`,\n    },\n    color: theme.palette.background.paper,\n  },\n  [`& .${tooltipClasses.tooltip} .${linkClasses.root}`]: {\n    color: `${theme.palette.primary.main}`,\n  },\n}))\n\nexport default LightTooltip\n"],"mappings":";;;AASA,IAAa,IAA8C,GACxD,EAAE,cAAW,GAAG,QACf,kBAAC,GAAD;CAAS,GAAI;CAAO,SAAS,EAAE,QAAQ,GAAW;CAAI,CAAA,CAEzD,EAAE,EAAE,gBAAa;EACf,MAAM,EAAe,YAAY;EAChC,iBAAiB,EAAM,QAAQ,WAAW;EAC1C,OAAO,EAAM,QAAQ,KAAK;EAC1B,WAAW,EAAM,QAAQ;EACzB,QAAQ,aAAa,EAAM,QAAQ,KAAK;EACzC;EACA,MAAM,EAAe,UAAU;EAC9B,YAAY;GACV,WAAW,EAAM,QAAQ;GACzB,QAAQ,aAAa,EAAM,QAAQ,KAAK;GACzC;EACD,OAAO,EAAM,QAAQ,WAAW;EACjC;EACA,MAAM,EAAe,QAAQ,IAAI,EAAY,SAAS,EACrD,OAAO,GAAG,EAAM,QAAQ,QAAQ,QACjC;CACF,EAAE"}
+{"version":3,"file":"LightTooltip.js","names":[],"sources":["../../../src/components/styled/LightTooltip.tsx"],"sourcesContent":["import {\n  Tooltip,\n  TooltipProps,\n  tooltipClasses,\n  styled,\n  linkClasses,\n} from '@mui/material'\nimport { StyledComponent } from '@emotion/styled'\n\nexport const LightTooltip: StyledComponent<TooltipProps> = styled(\n  ({ className, ...props }: TooltipProps) => (\n    <Tooltip {...props} classes={{ popper: className }} />\n  ),\n)(({ theme }) => ({\n  [`& .${tooltipClasses.tooltip}`]: {\n    backgroundColor: theme.palette.background.paper,\n    color: theme.palette.grey[1000],\n    boxShadow: theme.shadows[1],\n    border: `1px solid ${theme.palette.grey[500]}`,\n  },\n  [`& .${tooltipClasses.arrow}`]: {\n    '&:before': {\n      boxShadow: theme.shadows[1],\n      border: `1px solid ${theme.palette.grey[500]}`,\n    },\n    color: theme.palette.background.paper,\n  },\n  [`& .${tooltipClasses.tooltip} .${linkClasses.root}`]: {\n    color: `${theme.palette.primary.main}`,\n  },\n}))\n\nexport default LightTooltip\n"],"mappings":";;;AASA,IAAa,IAA8C,GACxD,EAAE,cAAW,GAAG,QACf,kBAAC,GAAD;CAAS,GAAI;CAAO,SAAS,EAAE,QAAQ,EAAU;AAAI,CAAA,CAEzD,GAAG,EAAE,gBAAa;EACf,MAAM,EAAe,YAAY;EAChC,iBAAiB,EAAM,QAAQ,WAAW;EAC1C,OAAO,EAAM,QAAQ,KAAK;EAC1B,WAAW,EAAM,QAAQ;EACzB,QAAQ,aAAa,EAAM,QAAQ,KAAK;CAC1C;EACC,MAAM,EAAe,UAAU;EAC9B,YAAY;GACV,WAAW,EAAM,QAAQ;GACzB,QAAQ,aAAa,EAAM,QAAQ,KAAK;EAC1C;EACA,OAAO,EAAM,QAAQ,WAAW;CAClC;EACC,MAAM,EAAe,QAAQ,IAAI,EAAY,SAAS,EACrD,OAAO,GAAG,EAAM,QAAQ,QAAQ,OAClC;AACF,EAAE"}

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

@@ -1 +1 @@
-{"version":3,"file":"StyledFormControl.js","names":[],"sources":["../../../src/components/styled/StyledFormControl.tsx"],"sourcesContent":["import {\n  FormControl,\n  FormControlProps,\n  formHelperTextClasses,\n  inputBaseClasses,\n  styled,\n} from '@mui/material'\nimport { StyledComponent } from '@emotion/styled'\n\n/**\n * Provides bootstrap-like label/text inputs for a MUI FormControl.\n *\n * This should not be used with components that provide their own FormControl, such as TextField.\n *\n * @example\n * ```tsx\n *       <StyledFormControl fullWidth variant=\"standard\" margin=\"normal\">\n *         <InputLabel shrink htmlFor=\"someinput\">\n *           labelText\n *         </InputLabel>\n *         <InputBase id=\"someinput\"/>\n *       </StyledFormControl>\n * ```\n */\nexport const StyledFormControl: StyledComponent<FormControlProps> = styled(\n  FormControl,\n  {\n    label: 'StyledFormControl',\n  },\n)(({ theme }) => ({\n  '& label': {\n    position: 'static',\n    fontSize: '14px',\n    transform: 'none',\n  },\n  [`& .${formHelperTextClasses.root}`]: {\n    marginLeft: '0',\n    [`&.Mui-error`]: {\n      color: '#c13415',\n    },\n  },\n\n  [`& .${inputBaseClasses.root}`]: {\n    marginTop: theme.spacing(0.5),\n  },\n  '& .MuiInputBase-multiline': {\n    padding: '0px',\n  },\n  '& fieldset': {\n    border: 'none',\n  },\n}))\n\nexport default StyledFormControl\n"],"mappings":";;AAwBA,IAAa,IAAuD,EAClE,GACA,EACE,OAAO,qBACR,CACF,EAAE,EAAE,gBAAa;CAChB,WAAW;EACT,UAAU;EACV,UAAU;EACV,WAAW;EACZ;EACA,MAAM,EAAsB,SAAS;EACpC,YAAY;EACX,eAAgB,EACf,OAAO,WACR;EACF;EAEA,MAAM,EAAiB,SAAS,EAC/B,WAAW,EAAM,QAAQ,GAAI,EAC9B;CACD,6BAA6B,EAC3B,SAAS,OACV;CACD,cAAc,EACZ,QAAQ,QACT;CACF,EAAE"}
+{"version":3,"file":"StyledFormControl.js","names":[],"sources":["../../../src/components/styled/StyledFormControl.tsx"],"sourcesContent":["import {\n  FormControl,\n  FormControlProps,\n  formHelperTextClasses,\n  inputBaseClasses,\n  styled,\n} from '@mui/material'\nimport { StyledComponent } from '@emotion/styled'\n\n/**\n * Provides bootstrap-like label/text inputs for a MUI FormControl.\n *\n * This should not be used with components that provide their own FormControl, such as TextField.\n *\n * @example\n * ```tsx\n *       <StyledFormControl fullWidth variant=\"standard\" margin=\"normal\">\n *         <InputLabel shrink htmlFor=\"someinput\">\n *           labelText\n *         </InputLabel>\n *         <InputBase id=\"someinput\"/>\n *       </StyledFormControl>\n * ```\n */\nexport const StyledFormControl: StyledComponent<FormControlProps> = styled(\n  FormControl,\n  {\n    label: 'StyledFormControl',\n  },\n)(({ theme }) => ({\n  '& label': {\n    position: 'static',\n    fontSize: '14px',\n    transform: 'none',\n  },\n  [`& .${formHelperTextClasses.root}`]: {\n    marginLeft: '0',\n    [`&.Mui-error`]: {\n      color: '#c13415',\n    },\n  },\n\n  [`& .${inputBaseClasses.root}`]: {\n    marginTop: theme.spacing(0.5),\n  },\n  '& .MuiInputBase-multiline': {\n    padding: '0px',\n  },\n  '& fieldset': {\n    border: 'none',\n  },\n}))\n\nexport default StyledFormControl\n"],"mappings":";;AAwBA,IAAa,IAAuD,EAClE,GACA,EACE,OAAO,oBACT,CACF,GAAG,EAAE,gBAAa;CAChB,WAAW;EACT,UAAU;EACV,UAAU;EACV,WAAW;CACb;EACC,MAAM,EAAsB,SAAS;EACpC,YAAY;EACX,eAAgB,EACf,OAAO,UACT;CACF;EAEC,MAAM,EAAiB,SAAS,EAC/B,WAAW,EAAM,QAAQ,EAAG,EAC9B;CACA,6BAA6B,EAC3B,SAAS,MACX;CACA,cAAc,EACZ,QAAQ,OACV;AACF,EAAE"}

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

@@ -1 +1 @@
-{"version":3,"file":"StyledPopover.js","names":[],"sources":["../../../src/components/styled/StyledPopover.tsx"],"sourcesContent":["import LightTooltip from '@/components/styled/LightTooltip'\nimport { spreadSx } from '@/theme/spreadSx'\nimport {\n  Box,\n  Button,\n  ButtonProps,\n  SxProps,\n  tooltipClasses,\n  TooltipProps,\n} from '@mui/material'\nimport { atom, useAtom } from 'jotai'\nimport { PropsWithChildren, ReactNode, useId } from 'react'\n\nexport type StyledPopoverProps = PropsWithChildren<{\n  popoverContent: React.ReactNode\n  sx?: TooltipProps['sx']\n  placement?: TooltipProps['placement']\n  showCloseButton?: boolean\n  actionButton?: {\n    content: ReactNode\n    color?: ButtonProps['color']\n    variant?: ButtonProps['variant']\n    onClick: () => void\n    closePopoverOnClick?: boolean\n  }\n  maxWidth?: string\n  minWidth?: string\n  containerSx?: SxProps\n}>\n\nconst buttonBoxSx: SxProps = {\n  mt: 2,\n  display: 'flex',\n  justifyContent: 'space-between',\n  flexDirection: 'row-reverse',\n  '> button': {\n    flexGrow: 1,\n    maxWidth: '45%',\n  },\n}\n\n// Register a global atom to track which popover is open, to ensure only one is shown at any given time\nconst openMarkdownPopoverAtom = atom<string | null>(null)\n\nexport function StyledPopover({\n  children,\n  popoverContent,\n  placement = 'bottom-start',\n  showCloseButton = true,\n  actionButton,\n  sx,\n  maxWidth = '500px',\n  minWidth = '300px',\n  containerSx,\n}: StyledPopoverProps) {\n  const id = useId()\n  const [openMarkdownPopoverId, setOpenMarkdownPopoverId] = useAtom(\n    openMarkdownPopoverAtom,\n  )\n\n  const show = openMarkdownPopoverId === id\n\n  const content = (\n    <Box sx={{ padding: '20px' }}>\n      {popoverContent}\n      <Box sx={buttonBoxSx}>\n        {actionButton && (\n          <Button\n            color={actionButton.color || 'primary'}\n            variant={actionButton.variant || 'contained'}\n            onClick={() => {\n              actionButton.onClick()\n              if (actionButton.closePopoverOnClick) {\n                setOpenMarkdownPopoverId(null)\n              }\n            }}\n          >\n            {actionButton.content}\n          </Button>\n        )}\n        {showCloseButton && (\n          <Button\n            variant=\"outlined\"\n            onClick={() => setOpenMarkdownPopoverId(null)}\n          >\n            Close\n          </Button>\n        )}\n      </Box>\n    </Box>\n  )\n\n  return (\n    <LightTooltip\n      title={content}\n      placement={placement}\n      open={show}\n      sx={spreadSx(sx, {\n        [`& .${tooltipClasses.tooltip}`]: {\n          maxWidth: { maxWidth },\n          minWidth: { minWidth },\n        },\n      })}\n    >\n      <Box\n        role=\"button\"\n        className={'PopoverContainer'}\n        onClick={e => {\n          // Prevent the default action of the click event -- for example, if this is in a `label` tag for a checkbox,\n          // prevent the click from toggling the checkbox value\n          e.preventDefault()\n          // Prevent the click from propagating to the parent container\n          e.stopPropagation()\n          setOpenMarkdownPopoverId(currentId => (currentId == id ? null : id))\n        }}\n        sx={{ display: 'inline-block', cursor: 'pointer', ...containerSx }}\n      >\n        {children}\n      </Box>\n    </LightTooltip>\n  )\n}\n"],"mappings":";;;;;;;AA8BA,IAAM,IAAuB;CAC3B,IAAI;CACJ,SAAS;CACT,gBAAgB;CAChB,eAAe;CACf,YAAY;EACV,UAAU;EACV,UAAU;EACX;CACF,EAGK,IAA0B,EAAoB,KAAK;AAEzD,SAAgB,EAAc,EAC5B,aACA,mBACA,eAAY,gBACZ,qBAAkB,IAClB,iBACA,OACA,cAAW,SACX,cAAW,SACX,kBACqB;CACrB,IAAM,IAAK,GAAO,EACZ,CAAC,GAAuB,KAA4B,EACxD,EACD,EAEK,IAAO,MAA0B;AAgCvC,QACE,kBAAC,GAAD;EACE,OA/BF,kBAAC,GAAD;GAAK,IAAI,EAAE,SAAS,QAAQ;aAA5B,CACG,GACD,kBAAC,GAAD;IAAK,IAAI;cAAT,CACG,KACC,kBAAC,GAAD;KACE,OAAO,EAAa,SAAS;KAC7B,SAAS,EAAa,WAAW;KACjC,eAAe;AAEb,MADA,EAAa,SAAS,EAClB,EAAa,uBACf,EAAyB,KAAK;;eAIjC,EAAa;KACP,CAAA,EAEV,KACC,kBAAC,GAAD;KACE,SAAQ;KACR,eAAe,EAAyB,KAAK;eAC9C;KAEQ,CAAA,CAEP;MACF;IAKG;EACI;EACX,MAAM;EACN,IAAI,EAAS,GAAI,GACd,MAAM,EAAe,YAAY;GAChC,UAAU,EAAE,aAAU;GACtB,UAAU,EAAE,aAAU;GACvB,EACF,CAAC;YAEF,kBAAC,GAAD;GACE,MAAK;GACL,WAAW;GACX,UAAS,MAAK;AAMZ,IAHA,EAAE,gBAAgB,EAElB,EAAE,iBAAiB,EACnB,GAAyB,MAAc,KAAa,IAAK,OAAO,EAAI;;GAEtE,IAAI;IAAE,SAAS;IAAgB,QAAQ;IAAW,GAAG;IAAa;GAEjE;GACG,CAAA;EACO,CAAA"}
+{"version":3,"file":"StyledPopover.js","names":[],"sources":["../../../src/components/styled/StyledPopover.tsx"],"sourcesContent":["import LightTooltip from '@/components/styled/LightTooltip'\nimport { spreadSx } from '@/theme/spreadSx'\nimport {\n  Box,\n  Button,\n  ButtonProps,\n  SxProps,\n  tooltipClasses,\n  TooltipProps,\n} from '@mui/material'\nimport { atom, useAtom } from 'jotai'\nimport { PropsWithChildren, ReactNode, useId } from 'react'\n\nexport type StyledPopoverProps = PropsWithChildren<{\n  popoverContent: React.ReactNode\n  sx?: TooltipProps['sx']\n  placement?: TooltipProps['placement']\n  showCloseButton?: boolean\n  actionButton?: {\n    content: ReactNode\n    color?: ButtonProps['color']\n    variant?: ButtonProps['variant']\n    onClick: () => void\n    closePopoverOnClick?: boolean\n  }\n  maxWidth?: string\n  minWidth?: string\n  containerSx?: SxProps\n}>\n\nconst buttonBoxSx: SxProps = {\n  mt: 2,\n  display: 'flex',\n  justifyContent: 'space-between',\n  flexDirection: 'row-reverse',\n  '> button': {\n    flexGrow: 1,\n    maxWidth: '45%',\n  },\n}\n\n// Register a global atom to track which popover is open, to ensure only one is shown at any given time\nconst openMarkdownPopoverAtom = atom<string | null>(null)\n\nexport function StyledPopover({\n  children,\n  popoverContent,\n  placement = 'bottom-start',\n  showCloseButton = true,\n  actionButton,\n  sx,\n  maxWidth = '500px',\n  minWidth = '300px',\n  containerSx,\n}: StyledPopoverProps) {\n  const id = useId()\n  const [openMarkdownPopoverId, setOpenMarkdownPopoverId] = useAtom(\n    openMarkdownPopoverAtom,\n  )\n\n  const show = openMarkdownPopoverId === id\n\n  const content = (\n    <Box sx={{ padding: '20px' }}>\n      {popoverContent}\n      <Box sx={buttonBoxSx}>\n        {actionButton && (\n          <Button\n            color={actionButton.color || 'primary'}\n            variant={actionButton.variant || 'contained'}\n            onClick={() => {\n              actionButton.onClick()\n              if (actionButton.closePopoverOnClick) {\n                setOpenMarkdownPopoverId(null)\n              }\n            }}\n          >\n            {actionButton.content}\n          </Button>\n        )}\n        {showCloseButton && (\n          <Button\n            variant=\"outlined\"\n            onClick={() => setOpenMarkdownPopoverId(null)}\n          >\n            Close\n          </Button>\n        )}\n      </Box>\n    </Box>\n  )\n\n  return (\n    <LightTooltip\n      title={content}\n      placement={placement}\n      open={show}\n      sx={spreadSx(sx, {\n        [`& .${tooltipClasses.tooltip}`]: {\n          maxWidth: { maxWidth },\n          minWidth: { minWidth },\n        },\n      })}\n    >\n      <Box\n        role=\"button\"\n        className={'PopoverContainer'}\n        onClick={e => {\n          // Prevent the default action of the click event -- for example, if this is in a `label` tag for a checkbox,\n          // prevent the click from toggling the checkbox value\n          e.preventDefault()\n          // Prevent the click from propagating to the parent container\n          e.stopPropagation()\n          setOpenMarkdownPopoverId(currentId => (currentId == id ? null : id))\n        }}\n        sx={{ display: 'inline-block', cursor: 'pointer', ...containerSx }}\n      >\n        {children}\n      </Box>\n    </LightTooltip>\n  )\n}\n"],"mappings":";;;;;;;AA8BA,IAAM,IAAuB;CAC3B,IAAI;CACJ,SAAS;CACT,gBAAgB;CAChB,eAAe;CACf,YAAY;EACV,UAAU;EACV,UAAU;CACZ;AACF,GAGM,IAA0B,EAAoB,IAAI;AAExD,SAAgB,EAAc,EAC5B,aACA,mBACA,eAAY,gBACZ,qBAAkB,IAClB,iBACA,OACA,cAAW,SACX,cAAW,SACX,kBACqB;CACrB,IAAM,IAAK,EAAM,GACX,CAAC,GAAuB,KAA4B,EACxD,CACF,GAEM,IAAO,MAA0B;CAgCvC,OACE,kBAAC,GAAD;EACE,OA/BF,kBAAC,GAAD;GAAK,IAAI,EAAE,SAAS,OAAO;aAA3B,CACG,GACD,kBAAC,GAAD;IAAK,IAAI;cAAT,CACG,KACC,kBAAC,GAAD;KACE,OAAO,EAAa,SAAS;KAC7B,SAAS,EAAa,WAAW;KACjC,eAAe;MAEb,AADA,EAAa,QAAQ,GACjB,EAAa,uBACf,EAAyB,IAAI;KAEjC;eAEC,EAAa;IACR,CAAA,GAET,KACC,kBAAC,GAAD;KACE,SAAQ;KACR,eAAe,EAAyB,IAAI;eAC7C;IAEO,CAAA,CAEP;KACF;GAKI;EACI;EACX,MAAM;EACN,IAAI,EAAS,GAAI,GACd,MAAM,EAAe,YAAY;GAChC,UAAU,EAAE,YAAS;GACrB,UAAU,EAAE,YAAS;EACvB,EACF,CAAC;YAED,kBAAC,GAAD;GACE,MAAK;GACL,WAAW;GACX,UAAS,MAAK;IAMZ,AAHA,EAAE,eAAe,GAEjB,EAAE,gBAAgB,GAClB,GAAyB,MAAc,KAAa,IAAK,OAAO,CAAG;GACrE;GACA,IAAI;IAAE,SAAS;IAAgB,QAAQ;IAAW,GAAG;GAAY;GAEhE;EACE,CAAA;CACO,CAAA;AAElB"}

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

@@ -1 +1 @@
-{"version":3,"file":"StyledTableContainer.js","names":[],"sources":["../../../src/components/styled/StyledTableContainer.tsx"],"sourcesContent":["import { StyledComponent } from '@emotion/styled'\nimport { Box, BoxProps, styled } from '@mui/material'\n\nexport type StyledTableContainerProps = BoxProps & {\n  /**\n   * Controls the padding of the table cells\n   * @default 'default'\n   */\n  density?: 'default' | 'compact'\n  /**\n   * Controls whether the rows of the table are striped using CSS. For virtualized tables, this should be set to false, since the\n   * row even/oddness is not guaranteed to be consistent as DOM nodes are loaded and unloaded.\n   * @default false\n   */\n  noStripedRows?: boolean\n  ['data-testid']?: string\n}\n\nexport const StyledTableContainer: StyledComponent<StyledTableContainerProps> =\n  styled(Box, {\n    shouldForwardProp: prop => prop !== 'density' && prop !== 'noStripedRows',\n  })<StyledTableContainerProps>(\n    ({ theme, density = 'default', noStripedRows = false }) => ({\n      overflow: 'auto',\n      paddingLeft: '2px',\n      ['thead > tr']: {\n        backgroundColor: theme.palette.grey[200],\n      },\n      th: {\n        height: '38px',\n        backgroundColor: theme.palette.grey[200],\n        borderRight: '1px solid',\n        borderColor: theme.palette.grey[400],\n      },\n      ['th:first-of-type']: {\n        paddingLeft: '10px',\n      },\n      ['td:first-of-type']: {\n        paddingLeft: '10px',\n      },\n      ['tr:nth-of-type(2n)']: noStripedRows\n        ? undefined\n        : {\n            backgroundColor: theme.palette.grey[100],\n          },\n      ['tr']: {\n        backgroundColor: theme.palette.background.default,\n      },\n      ['tr:nth-of-type(even)']: noStripedRows\n        ? undefined\n        : {\n            backgroundColor: theme.palette.grey[100],\n          },\n      ['th,td']: {\n        position: 'relative',\n        paddingLeft: theme.spacing(density === 'compact' ? 0 : 1),\n        paddingRight: theme.spacing(density === 'compact' ? 0 : 1),\n      },\n      td: {\n        paddingTop: theme.spacing(density === 'compact' ? 0 : 1),\n        paddingBottom: theme.spacing(density === 'compact' ? 0 : 1),\n        textOverflow: 'ellipsis',\n        overflow: 'hidden',\n      },\n      '.resizer': {\n        position: 'absolute',\n        right: 0,\n        top: 0,\n        height: '100%',\n        width: '3px',\n        padding: 0,\n        background: 'rgba(0,0,0,0.25)',\n        cursor: 'col-resize',\n        userSelect: 'none',\n        touchAction: 'none',\n      },\n      '.resizer.isResizing': {\n        background: theme.palette.primary.main,\n        opacity: 1,\n      },\n      '@media (hover: hover)': {\n        '.resizer': {\n          opacity: 0,\n        },\n        '*:hover > .resizer': {\n          opacity: 0.75,\n        },\n      },\n      '.MuiButton-root': {\n        whiteSpace: 'nowrap',\n      },\n    }),\n  )\n"],"mappings":";;AAkBA,IAAa,IACX,EAAO,GAAK,EACV,oBAAmB,MAAQ,MAAS,aAAa,MAAS,iBAC3D,CAAC,EACC,EAAE,UAAO,aAAU,WAAW,mBAAgB,UAAa;CAC1D,UAAU;CACV,aAAa;CACZ,cAAe,EACd,iBAAiB,EAAM,QAAQ,KAAK,MACrC;CACD,IAAI;EACF,QAAQ;EACR,iBAAiB,EAAM,QAAQ,KAAK;EACpC,aAAa;EACb,aAAa,EAAM,QAAQ,KAAK;EACjC;CACA,oBAAqB,EACpB,aAAa,QACd;CACA,oBAAqB,EACpB,aAAa,QACd;CACA,sBAAuB,IACpB,KAAA,IACA,EACE,iBAAiB,EAAM,QAAQ,KAAK,MACrC;CACJ,IAAO,EACN,iBAAiB,EAAM,QAAQ,WAAW,SAC3C;CACA,wBAAyB,IACtB,KAAA,IACA,EACE,iBAAiB,EAAM,QAAQ,KAAK,MACrC;CACJ,SAAU;EACT,UAAU;EACV,aAAa,EAAM,QAAQ,MAAY,YAAY,IAAI,EAAE;EACzD,cAAc,EAAM,QAAQ,MAAY,YAAY,IAAI,EAAE;EAC3D;CACD,IAAI;EACF,YAAY,EAAM,QAAQ,MAAY,YAAY,IAAI,EAAE;EACxD,eAAe,EAAM,QAAQ,MAAY,YAAY,IAAI,EAAE;EAC3D,cAAc;EACd,UAAU;EACX;CACD,YAAY;EACV,UAAU;EACV,OAAO;EACP,KAAK;EACL,QAAQ;EACR,OAAO;EACP,SAAS;EACT,YAAY;EACZ,QAAQ;EACR,YAAY;EACZ,aAAa;EACd;CACD,uBAAuB;EACrB,YAAY,EAAM,QAAQ,QAAQ;EAClC,SAAS;EACV;CACD,yBAAyB;EACvB,YAAY,EACV,SAAS,GACV;EACD,sBAAsB,EACpB,SAAS,KACV;EACF;CACD,mBAAmB,EACjB,YAAY,UACb;CACF,EACF"}
+{"version":3,"file":"StyledTableContainer.js","names":[],"sources":["../../../src/components/styled/StyledTableContainer.tsx"],"sourcesContent":["import { StyledComponent } from '@emotion/styled'\nimport { Box, BoxProps, styled } from '@mui/material'\n\nexport type StyledTableContainerProps = BoxProps & {\n  /**\n   * Controls the padding of the table cells\n   * @default 'default'\n   */\n  density?: 'default' | 'compact'\n  /**\n   * Controls whether the rows of the table are striped using CSS. For virtualized tables, this should be set to false, since the\n   * row even/oddness is not guaranteed to be consistent as DOM nodes are loaded and unloaded.\n   * @default false\n   */\n  noStripedRows?: boolean\n  ['data-testid']?: string\n}\n\nexport const StyledTableContainer: StyledComponent<StyledTableContainerProps> =\n  styled(Box, {\n    shouldForwardProp: prop => prop !== 'density' && prop !== 'noStripedRows',\n  })<StyledTableContainerProps>(\n    ({ theme, density = 'default', noStripedRows = false }) => ({\n      overflow: 'auto',\n      paddingLeft: '2px',\n      ['thead > tr']: {\n        backgroundColor: theme.palette.grey[200],\n      },\n      th: {\n        height: '38px',\n        backgroundColor: theme.palette.grey[200],\n        borderRight: '1px solid',\n        borderColor: theme.palette.grey[400],\n      },\n      ['th:first-of-type']: {\n        paddingLeft: '10px',\n      },\n      ['td:first-of-type']: {\n        paddingLeft: '10px',\n      },\n      ['tr:nth-of-type(2n)']: noStripedRows\n        ? undefined\n        : {\n            backgroundColor: theme.palette.grey[100],\n          },\n      ['tr']: {\n        backgroundColor: theme.palette.background.default,\n      },\n      ['tr:nth-of-type(even)']: noStripedRows\n        ? undefined\n        : {\n            backgroundColor: theme.palette.grey[100],\n          },\n      ['th,td']: {\n        position: 'relative',\n        paddingLeft: theme.spacing(density === 'compact' ? 0 : 1),\n        paddingRight: theme.spacing(density === 'compact' ? 0 : 1),\n      },\n      td: {\n        paddingTop: theme.spacing(density === 'compact' ? 0 : 1),\n        paddingBottom: theme.spacing(density === 'compact' ? 0 : 1),\n        textOverflow: 'ellipsis',\n        overflow: 'hidden',\n      },\n      '.resizer': {\n        position: 'absolute',\n        right: 0,\n        top: 0,\n        height: '100%',\n        width: '3px',\n        padding: 0,\n        background: 'rgba(0,0,0,0.25)',\n        cursor: 'col-resize',\n        userSelect: 'none',\n        touchAction: 'none',\n      },\n      '.resizer.isResizing': {\n        background: theme.palette.primary.main,\n        opacity: 1,\n      },\n      '@media (hover: hover)': {\n        '.resizer': {\n          opacity: 0,\n        },\n        '*:hover > .resizer': {\n          opacity: 0.75,\n        },\n      },\n      '.MuiButton-root': {\n        whiteSpace: 'nowrap',\n      },\n    }),\n  )\n"],"mappings":";;AAkBA,IAAa,IACX,EAAO,GAAK,EACV,oBAAmB,MAAQ,MAAS,aAAa,MAAS,gBAC5D,CAAC,GACE,EAAE,UAAO,aAAU,WAAW,mBAAgB,UAAa;CAC1D,UAAU;CACV,aAAa;CACZ,cAAe,EACd,iBAAiB,EAAM,QAAQ,KAAK,KACtC;CACA,IAAI;EACF,QAAQ;EACR,iBAAiB,EAAM,QAAQ,KAAK;EACpC,aAAa;EACb,aAAa,EAAM,QAAQ,KAAK;CAClC;CACC,oBAAqB,EACpB,aAAa,OACf;CACC,oBAAqB,EACpB,aAAa,OACf;CACC,sBAAuB,IACpB,KAAA,IACA,EACE,iBAAiB,EAAM,QAAQ,KAAK,KACtC;CACH,IAAO,EACN,iBAAiB,EAAM,QAAQ,WAAW,QAC5C;CACC,wBAAyB,IACtB,KAAA,IACA,EACE,iBAAiB,EAAM,QAAQ,KAAK,KACtC;CACH,SAAU;EACT,UAAU;EACV,aAAa,EAAM,QAAQ,MAAY,YAAY,IAAI,CAAC;EACxD,cAAc,EAAM,QAAQ,MAAY,YAAY,IAAI,CAAC;CAC3D;CACA,IAAI;EACF,YAAY,EAAM,QAAQ,MAAY,YAAY,IAAI,CAAC;EACvD,eAAe,EAAM,QAAQ,MAAY,YAAY,IAAI,CAAC;EAC1D,cAAc;EACd,UAAU;CACZ;CACA,YAAY;EACV,UAAU;EACV,OAAO;EACP,KAAK;EACL,QAAQ;EACR,OAAO;EACP,SAAS;EACT,YAAY;EACZ,QAAQ;EACR,YAAY;EACZ,aAAa;CACf;CACA,uBAAuB;EACrB,YAAY,EAAM,QAAQ,QAAQ;EAClC,SAAS;CACX;CACA,yBAAyB;EACvB,YAAY,EACV,SAAS,EACX;EACA,sBAAsB,EACpB,SAAS,IACX;CACF;CACA,mBAAmB,EACjB,YAAY,SACd;AACF,EACF"}

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

@@ -1 +1 @@
-{"version":3,"file":"WideButton.js","names":[],"sources":["../../../src/components/styled/WideButton.tsx"],"sourcesContent":["import { Button, ButtonProps, styled } from '@mui/material'\nimport { StyledComponent } from '@emotion/styled'\n\nexport const WideButton: StyledComponent<ButtonProps> = styled(Button, {\n  label: 'WideButton',\n})(({ theme }) => ({\n  minWidth: '168px',\n  padding: '10px',\n  fontSize: '16px',\n}))\n\nexport default WideButton\n"],"mappings":";;AAGA,IAAa,IAA2C,EAAO,GAAQ,EACrE,OAAO,cACR,CAAC,EAAE,EAAE,gBAAa;CACjB,UAAU;CACV,SAAS;CACT,UAAU;CACX,EAAE"}
+{"version":3,"file":"WideButton.js","names":[],"sources":["../../../src/components/styled/WideButton.tsx"],"sourcesContent":["import { Button, ButtonProps, styled } from '@mui/material'\nimport { StyledComponent } from '@emotion/styled'\n\nexport const WideButton: StyledComponent<ButtonProps> = styled(Button, {\n  label: 'WideButton',\n})(({ theme }) => ({\n  minWidth: '168px',\n  padding: '10px',\n  fontSize: '16px',\n}))\n\nexport default WideButton\n"],"mappings":";;AAGA,IAAa,IAA2C,EAAO,GAAQ,EACrE,OAAO,aACT,CAAC,GAAG,EAAE,gBAAa;CACjB,UAAU;CACV,SAAS;CACT,UAAU;AACZ,EAAE"}

package/dist/components/table/CsvPreview/CreateTableFromCsvDialog.d.ts

@@ -0,0 +1,18 @@
+export type CreateTableFromCsvDialogProps = {
+    /** Whether the dialog is open */
+    open: boolean;
+    /** Callback when the dialog is closed */
+    onClose: () => void;
+    /** Destination project/folder to upload to */
+    parentId: string;
+    /** Invoked after all backend operations successfully complete */
+    onSuccess?: () => void;
+};
+/**
+ * A multi-step modal wizard used to create a Synapse Table entity from an uploaded CSV file.
+ * It manages two primary phases:
+ * 1. CSV Upload & Preview: Displays data preview and infers suggested column models.
+ * 2. Table Configuration: Sets table name and allows schema customization.
+ */
+export default function CreateTableFromCsvDialog(props: CreateTableFromCsvDialogProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=CreateTableFromCsvDialog.d.ts.map

package/dist/components/table/CsvPreview/CreateTableFromCsvDialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CreateTableFromCsvDialog.d.ts","sourceRoot":"","sources":["../../../../src/components/table/CsvPreview/CreateTableFromCsvDialog.tsx"],"names":[],"mappings":"AAwBA,MAAM,MAAM,6BAA6B,GAAG;IAC1C,iCAAiC;IACjC,IAAI,EAAE,OAAO,CAAA;IACb,yCAAyC;IACzC,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,8CAA8C;IAC9C,QAAQ,EAAE,MAAM,CAAA;IAChB,iEAAiE;IACjE,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;CACvB,CAAA;AAOD;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,wBAAwB,CAC9C,KAAK,EAAE,6BAA6B,2CAyJrC"}

package/dist/components/table/CsvPreview/CreateTableFromCsvDialog.js

@@ -0,0 +1,113 @@
+import { displayToast as e } from "../../ToastMessage/ToastMessage.js";
+import { DialogBase as t } from "../../DialogBase.js";
+import n, { CsvUploadPreviewStep as r } from "./useCsvUploadPreview.js";
+import i from "./CsvUploadPreviewContent.js";
+import a from "./useCreateTableFromCsv.js";
+import o from "../../TableColumnSchemaEditor/TableColumnSchemaForm.js";
+import { useCallback as s, useRef as c, useState as l } from "react";
+import { isUndefined as u, omitBy as d } from "lodash-es";
+import { Fragment as f, jsx as p, jsxs as m } from "react/jsx-runtime";
+import { EntityType as h } from "@sage-bionetworks/synapse-client";
+import g from "@mui/material/Typography";
+import _ from "@mui/material/TextField";
+import v from "@mui/material/Stack";
+import y from "@mui/material/Button";
+import b from "@mui/icons-material/ExpandMore";
+import x from "@mui/material/Accordion";
+import S from "@mui/material/AccordionDetails";
+import C from "@mui/material/AccordionSummary";
+//#region src/components/table/CsvPreview/CreateTableFromCsvDialog.tsx
+function w(w) {
+	let { open: T, onClose: E, parentId: D, onSuccess: O } = w, k = n(), [A, j] = l(0), [M, N] = l(""), [P, F] = l([]), I = c(null), { mutate: L, isPending: R } = a({
+		onSuccess() {
+			O?.();
+		},
+		onError(t) {
+			e(t.message, "danger");
+		}
+	}), z = s((e = []) => {
+		L({
+			parentId: D,
+			tableName: M,
+			columnModels: e,
+			csvTableDescriptor: k.csvTableDescriptor,
+			fileHandleId: k.uploadedFileHandleId
+		});
+	}, [
+		L,
+		D,
+		M,
+		k.csvTableDescriptor,
+		k.uploadedFileHandleId
+	]), B = s((e) => {
+		z(e);
+	}, [z]), V = s(() => {
+		let e = k.csvPreviewData?.suggestedColumns;
+		e && (F(e.map((e) => d(e, u))), j(1));
+	}, [k.csvPreviewData, j]), H = /* @__PURE__ */ m(v, {
+		spacing: 2,
+		children: [
+			/* @__PURE__ */ p(_, {
+				required: !0,
+				label: "Table Name",
+				value: M,
+				onChange: (e) => N(e.target.value),
+				fullWidth: !0
+			}),
+			/* @__PURE__ */ p(g, {
+				variant: "body1",
+				children: "Use the schema options button to make changes to the columns of the table. Use the create button to finish building the table."
+			}),
+			/* @__PURE__ */ m(x, { children: [/* @__PURE__ */ p(C, {
+				expandIcon: /* @__PURE__ */ p(b, {}),
+				children: /* @__PURE__ */ p(g, {
+					variant: "headline3",
+					children: "Schema Options"
+				})
+			}), /* @__PURE__ */ p(S, { children: /* @__PURE__ */ p(o, {
+				initialData: P,
+				entityType: h.table,
+				ref: I,
+				onSubmit: B
+			}) })] })
+		]
+	});
+	return /* @__PURE__ */ p(t, {
+		maxWidth: "lg",
+		title: "Upload CSV",
+		onCancel: E,
+		open: T,
+		content: /* @__PURE__ */ m(f, { children: [A === 0 && /* @__PURE__ */ p(i, { workflow: k }), A === 1 && H] }),
+		actions: /* @__PURE__ */ m(f, { children: [
+			/* @__PURE__ */ p(y, {
+				variant: "outlined",
+				disabled: k.isLoadingPreview,
+				onClick: () => {
+					E();
+				},
+				children: "Cancel"
+			}),
+			A === 0 && k.step === r.COLUMN_PREVIEW && /* @__PURE__ */ p(y, {
+				disabled: k.isLoadingPreview,
+				variant: "contained",
+				onClick: V,
+				children: "Next"
+			}),
+			A === 1 && /* @__PURE__ */ m(f, { children: [/* @__PURE__ */ p(y, {
+				variant: "outlined",
+				onClick: () => j(0),
+				children: "Back"
+			}), /* @__PURE__ */ p(y, {
+				variant: "contained",
+				onClick: () => I.current?.submit(),
+				loading: R,
+				disabled: !M,
+				children: "Create"
+			})] })
+		] })
+	});
+}
+//#endregion
+export { w as default };
+
+//# sourceMappingURL=CreateTableFromCsvDialog.js.map

package/dist/components/table/CsvPreview/CreateTableFromCsvDialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CreateTableFromCsvDialog.js","names":[],"sources":["../../../../src/components/table/CsvPreview/CreateTableFromCsvDialog.tsx"],"sourcesContent":["import TableColumnSchemaForm, {\n  SubmitHandle,\n} from '@/components/TableColumnSchemaEditor/TableColumnSchemaForm'\nimport { DialogBase } from '@/components/DialogBase'\nimport { displayToast } from '@/components/ToastMessage/ToastMessage'\nimport useCsvUploadPreview, {\n  CsvUploadPreviewStep,\n} from '@/components/table/CsvPreview/useCsvUploadPreview'\nimport ExpandMoreIcon from '@mui/icons-material/ExpandMore'\nimport Accordion from '@mui/material/Accordion'\nimport AccordionDetails from '@mui/material/AccordionDetails'\nimport AccordionSummary from '@mui/material/AccordionSummary'\nimport Button from '@mui/material/Button'\nimport Stack from '@mui/material/Stack'\nimport TextField from '@mui/material/TextField'\nimport Typography from '@mui/material/Typography'\nimport { EntityType } from '@sage-bionetworks/synapse-client'\nimport { isUndefined, omitBy } from 'lodash-es'\nimport { useCallback, useRef, useState } from 'react'\nimport { SetOptional } from 'type-fest'\nimport { ColumnModel as SynapseTypesColumnModel } from '@sage-bionetworks/synapse-types'\nimport useCreateTableFromCsv from './useCreateTableFromCsv'\nimport CsvUploadPreviewContent from './CsvUploadPreviewContent'\n\nexport type CreateTableFromCsvDialogProps = {\n  /** Whether the dialog is open */\n  open: boolean\n  /** Callback when the dialog is closed */\n  onClose: () => void\n  /** Destination project/folder to upload to */\n  parentId: string\n  /** Invoked after all backend operations successfully complete */\n  onSuccess?: () => void\n}\n\nenum CreateTableFromCsvStep {\n  CSV_UPLOAD_PREVIEW = 0,\n  TABLE_NAME = 1,\n}\n\n/**\n * A multi-step modal wizard used to create a Synapse Table entity from an uploaded CSV file.\n * It manages two primary phases:\n * 1. CSV Upload & Preview: Displays data preview and infers suggested column models.\n * 2. Table Configuration: Sets table name and allows schema customization.\n */\nexport default function CreateTableFromCsvDialog(\n  props: CreateTableFromCsvDialogProps,\n) {\n  const { open, onClose, parentId, onSuccess } = props\n  const csvUploadPreviewWorkflow = useCsvUploadPreview()\n  const [step, setStep] = useState(CreateTableFromCsvStep.CSV_UPLOAD_PREVIEW)\n  const [tableName, setTableName] = useState('')\n  const [columnModels, setColumnModels] = useState<\n    SetOptional<SynapseTypesColumnModel, 'id'>[]\n  >([])\n  const columnSchemaFormRef = useRef<SubmitHandle>(null)\n\n  const { mutate: createTableFromCsv, isPending: isUploading } =\n    useCreateTableFromCsv({\n      onSuccess() {\n        onSuccess?.()\n      },\n      onError(error) {\n        displayToast(error.message, 'danger')\n      },\n    })\n\n  const handleFinish = useCallback(\n    (columnModelsParam: SetOptional<SynapseTypesColumnModel, 'id'>[] = []) => {\n      createTableFromCsv({\n        parentId,\n        tableName,\n        columnModels: columnModelsParam,\n        csvTableDescriptor: csvUploadPreviewWorkflow.csvTableDescriptor,\n        fileHandleId: csvUploadPreviewWorkflow.uploadedFileHandleId!,\n      })\n    },\n    [\n      createTableFromCsv,\n      parentId,\n      tableName,\n      csvUploadPreviewWorkflow.csvTableDescriptor,\n      csvUploadPreviewWorkflow.uploadedFileHandleId,\n    ],\n  )\n\n  const onColumnSchemaSubmit = useCallback(\n    (editedColumnModels: SetOptional<SynapseTypesColumnModel, 'id'>[]) => {\n      void handleFinish(editedColumnModels)\n    },\n    [handleFinish],\n  )\n\n  const handlePreviewConfirm = useCallback(() => {\n    const suggestedColumns =\n      csvUploadPreviewWorkflow.csvPreviewData?.suggestedColumns\n    if (!suggestedColumns) {\n      return\n    }\n\n    // create new table; initialize schema editor with suggestions and proceed to naming.\n    setColumnModels(\n      suggestedColumns.map(cm => omitBy(cm, isUndefined)) as SetOptional<\n        SynapseTypesColumnModel,\n        'id'\n      >[],\n    )\n    setStep(CreateTableFromCsvStep.TABLE_NAME)\n  }, [csvUploadPreviewWorkflow.csvPreviewData, setStep])\n\n  const tableNameStepContent = (\n    <Stack spacing={2}>\n      <TextField\n        required\n        label={'Table Name'}\n        value={tableName}\n        onChange={e => setTableName(e.target.value)}\n        fullWidth\n      />\n      <Typography variant={'body1'}>\n        Use the schema options button to make changes to the columns of the\n        table. Use the create button to finish building the table.\n      </Typography>\n      <Accordion>\n        <AccordionSummary expandIcon={<ExpandMoreIcon />}>\n          <Typography variant={'headline3'}>Schema Options</Typography>\n        </AccordionSummary>\n        <AccordionDetails>\n          <TableColumnSchemaForm\n            initialData={columnModels}\n            entityType={EntityType.table}\n            ref={columnSchemaFormRef}\n            onSubmit={onColumnSchemaSubmit}\n          />\n        </AccordionDetails>\n      </Accordion>\n    </Stack>\n  )\n\n  return (\n    <DialogBase\n      maxWidth={'lg'}\n      title={'Upload CSV'}\n      onCancel={onClose}\n      open={open}\n      content={\n        <>\n          {step === CreateTableFromCsvStep.CSV_UPLOAD_PREVIEW && (\n            <CsvUploadPreviewContent workflow={csvUploadPreviewWorkflow} />\n          )}\n          {step === CreateTableFromCsvStep.TABLE_NAME && tableNameStepContent}\n        </>\n      }\n      actions={\n        <>\n          <Button\n            variant={'outlined'}\n            disabled={csvUploadPreviewWorkflow.isLoadingPreview}\n            onClick={() => {\n              onClose()\n            }}\n          >\n            Cancel\n          </Button>\n          {step === CreateTableFromCsvStep.CSV_UPLOAD_PREVIEW &&\n            csvUploadPreviewWorkflow.step ===\n              CsvUploadPreviewStep.COLUMN_PREVIEW && (\n              <Button\n                disabled={csvUploadPreviewWorkflow.isLoadingPreview}\n                variant={'contained'}\n                onClick={handlePreviewConfirm}\n              >\n                Next\n              </Button>\n            )}\n          {step === CreateTableFromCsvStep.TABLE_NAME && (\n            <>\n              <Button\n                variant={'outlined'}\n                onClick={() =>\n                  setStep(CreateTableFromCsvStep.CSV_UPLOAD_PREVIEW)\n                }\n              >\n                Back\n              </Button>\n              <Button\n                variant={'contained'}\n                onClick={() => columnSchemaFormRef.current?.submit()}\n                loading={isUploading}\n                disabled={!tableName}\n              >\n                Create\n              </Button>\n            </>\n          )}\n        </>\n      }\n    />\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AA8CA,SAAwB,EACtB,GACA;CACA,IAAM,EAAE,SAAM,YAAS,aAAU,iBAAc,GACzC,IAA2B,EAAoB,GAC/C,CAAC,GAAM,KAAW,EAAA,CAAkD,GACpE,CAAC,GAAW,KAAgB,EAAS,EAAE,GACvC,CAAC,GAAc,KAAmB,EAEtC,CAAC,CAAC,GACE,IAAsB,EAAqB,IAAI,GAE/C,EAAE,QAAQ,GAAoB,WAAW,MAC7C,EAAsB;EACpB,YAAY;GACV,IAAY;EACd;EACA,QAAQ,GAAO;GACb,EAAa,EAAM,SAAS,QAAQ;EACtC;CACF,CAAC,GAEG,IAAe,GAClB,IAAkE,CAAC,MAAM;EACxE,EAAmB;GACjB;GACA;GACA,cAAc;GACd,oBAAoB,EAAyB;GAC7C,cAAc,EAAyB;EACzC,CAAC;CACH,GACA;EACE;EACA;EACA;EACA,EAAyB;EACzB,EAAyB;CAC3B,CACF,GAEM,IAAuB,GAC1B,MAAqE;EACpE,EAAkB,CAAkB;CACtC,GACA,CAAC,CAAY,CACf,GAEM,IAAuB,QAAkB;EAC7C,IAAM,IACJ,EAAyB,gBAAgB;EACtC,MAKL,EACE,EAAiB,KAAI,MAAM,EAAO,GAAI,CAAW,CAAC,CAIpD,GACA,EAAA,CAAyC;CAC3C,GAAG,CAAC,EAAyB,gBAAgB,CAAO,CAAC,GAE/C,IACJ,kBAAC,GAAD;EAAO,SAAS;YAAhB;GACE,kBAAC,GAAD;IACE,UAAA;IACA,OAAO;IACP,OAAO;IACP,WAAU,MAAK,EAAa,EAAE,OAAO,KAAK;IAC1C,WAAA;GACD,CAAA;GACD,kBAAC,GAAD;IAAY,SAAS;cAAS;GAGlB,CAAA;GACZ,kBAAC,GAAD,EAAA,UAAA,CACE,kBAAC,GAAD;IAAkB,YAAY,kBAAC,GAAD,CAAiB,CAAA;cAC7C,kBAAC,GAAD;KAAY,SAAS;eAAa;IAA0B,CAAA;GAC5C,CAAA,GAClB,kBAAC,GAAD,EAAA,UACE,kBAAC,GAAD;IACE,aAAa;IACb,YAAY,EAAW;IACvB,KAAK;IACL,UAAU;GACX,CAAA,EACe,CAAA,CACT,EAAA,CAAA;EACN;;CAGT,OACE,kBAAC,GAAD;EACE,UAAU;EACV,OAAO;EACP,UAAU;EACJ;EACN,SACE,kBAAA,GAAA,EAAA,UAAA,CACG,MAAA,KACC,kBAAC,GAAD,EAAyB,UAAU,EAA2B,CAAA,GAE/D,MAAA,KAA8C,CAC/C,EAAA,CAAA;EAEJ,SACE,kBAAA,GAAA,EAAA,UAAA;GACE,kBAAC,GAAD;IACE,SAAS;IACT,UAAU,EAAyB;IACnC,eAAe;KACb,EAAQ;IACV;cACD;GAEO,CAAA;GACP,MAAA,KACC,EAAyB,SACvB,EAAqB,kBACrB,kBAAC,GAAD;IACE,UAAU,EAAyB;IACnC,SAAS;IACT,SAAS;cACV;GAEO,CAAA;GAEX,MAAA,KACC,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,GAAD;IACE,SAAS;IACT,eACE,EAAA,CAAiD;cAEpD;GAEO,CAAA,GACR,kBAAC,GAAD;IACE,SAAS;IACT,eAAe,EAAoB,SAAS,OAAO;IACnD,SAAS;IACT,UAAU,CAAC;cACZ;GAEO,CAAA,CACR,EAAA,CAAA;EAEJ,EAAA,CAAA;CAEL,CAAA;AAEL"}

package/dist/components/table/CsvPreview/CsvPreview.js.map

@@ -1 +1 @@
-{"version":3,"file":"CsvPreview.js","names":[],"sources":["../../../../src/components/table/CsvPreview/CsvPreview.tsx"],"sourcesContent":["import { ErrorBanner } from '@/components/index'\nimport ColumnHeader from '@/components/TanStackTable/ColumnHeader'\nimport StyledTanStackTable from '@/components/TanStackTable/StyledTanStackTable'\nimport { useGetCsvPreview } from '@/synapse-queries/table/useGetCsvPreview'\nimport Typography from '@mui/material/Typography'\nimport {\n  ColumnModel,\n  CsvTableDescriptor,\n  TableRow,\n  UploadToTablePreviewResult,\n} from '@sage-bionetworks/synapse-client'\nimport {\n  createColumnHelper,\n  getCoreRowModel,\n  useReactTable,\n} from '@tanstack/react-table'\nimport noop from 'lodash-es/noop'\nimport { useEffect, useMemo } from 'react'\n\nexport type CsvPreviewProps = {\n  fileHandleId: string\n  csvTableDescriptor: CsvTableDescriptor\n  onCsvPreviewDataChange?: (data: UploadToTablePreviewResult) => void\n  onIsLoadingChange?: (isLoading: boolean) => void\n}\n\n/**\n * Given a file handle ID and CSV Table Descriptor, fetches and displays a preview of the CSV file as it would be parsed into a table.\n */\nexport default function CsvPreview(props: CsvPreviewProps) {\n  const {\n    fileHandleId,\n    csvTableDescriptor,\n    onCsvPreviewDataChange = noop,\n    onIsLoadingChange = noop,\n  } = props\n\n  const {\n    data: csvPreviewData,\n    isLoading,\n    error,\n  } = useGetCsvPreview({\n    concreteType:\n      'org.sagebionetworks.repo.model.table.UploadToTablePreviewRequest',\n    uploadFileHandleId: fileHandleId,\n    csvTableDescriptor,\n  })\n\n  useEffect(() => {\n    if (csvPreviewData) {\n      onCsvPreviewDataChange(csvPreviewData)\n    }\n  }, [csvPreviewData, onCsvPreviewDataChange])\n\n  useEffect(() => {\n    onIsLoadingChange(isLoading)\n  }, [isLoading, onIsLoadingChange])\n\n  const tableData = useMemo(\n    () => csvPreviewData?.sampleRows ?? [],\n    [csvPreviewData?.sampleRows],\n  )\n\n  const columns = useMemo(\n    () => getPreviewColumns(csvPreviewData?.suggestedColumns ?? []),\n    [csvPreviewData?.suggestedColumns],\n  )\n\n  const table = useReactTable({\n    getCoreRowModel: getCoreRowModel(),\n    data: tableData,\n    columns: columns,\n  })\n\n  if (error) {\n    return <ErrorBanner error={error} />\n  }\n\n  return (\n    <>\n      {isLoading && <div>Loading preview...</div>}\n      {!isLoading && csvPreviewData && table && (\n        <>\n          <Typography variant={'body1'}>\n            Scanned {csvPreviewData?.rowsScanned?.toLocaleString()} rows to\n            generate preview:\n          </Typography>\n          <StyledTanStackTable table={table} />\n        </>\n      )}\n    </>\n  )\n}\n\nfunction getPreviewColumns(columnModels: ColumnModel[]) {\n  const columnHelper = createColumnHelper<TableRow>()\n  return columnModels.map((columnModel, index) => {\n    return columnHelper.accessor(tr => tr.values![index], {\n      id: `column-${index}`,\n      header: props => (\n        <ColumnHeader\n          {...props}\n          wrap={true}\n          title={`${columnModel.name}\\n(${columnModel.columnType})`}\n        />\n      ),\n      enableColumnFilter: false,\n      enableSorting: false,\n    })\n  })\n}\n"],"mappings":";;;;;;;;;;;AA6BA,SAAwB,EAAW,GAAwB;CACzD,IAAM,EACJ,iBACA,uBACA,4BAAyB,GACzB,uBAAoB,MAClB,GAEE,EACJ,MAAM,GACN,cACA,aACE,EAAiB;EACnB,cACE;EACF,oBAAoB;EACpB;EACD,CAAC;AAQF,CANA,QAAgB;AACd,EAAI,KACF,EAAuB,EAAe;IAEvC,CAAC,GAAgB,EAAuB,CAAC,EAE5C,QAAgB;AACd,IAAkB,EAAU;IAC3B,CAAC,GAAW,EAAkB,CAAC;CAElC,IAAM,IAAY,QACV,GAAgB,cAAc,EAAE,EACtC,CAAC,GAAgB,WAAW,CAC7B,EAEK,IAAU,QACR,EAAkB,GAAgB,oBAAoB,EAAE,CAAC,EAC/D,CAAC,GAAgB,iBAAiB,CACnC,EAEK,IAAQ,EAAc;EAC1B,iBAAiB,GAAiB;EAClC,MAAM;EACG;EACV,CAAC;AAMF,QAJI,IACK,kBAAC,GAAD,EAAoB,UAAS,CAAA,GAIpC,kBAAA,GAAA,EAAA,UAAA,CACG,KAAa,kBAAC,OAAD,EAAA,UAAK,sBAAwB,CAAA,EAC1C,CAAC,KAAa,KAAkB,KAC/B,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,GAAD;EAAY,SAAS;YAArB;GAA8B;GACnB,GAAgB,aAAa,gBAAgB;GAAC;GAE5C;KACb,kBAAC,GAAD,EAA4B,UAAS,CAAA,CACpC,EAAA,CAAA,CAEJ,EAAA,CAAA;;AAIP,SAAS,EAAkB,GAA6B;CACtD,IAAM,IAAe,GAA8B;AACnD,QAAO,EAAa,KAAK,GAAa,MAC7B,EAAa,UAAS,MAAM,EAAG,OAAQ,IAAQ;EACpD,IAAI,UAAU;EACd,SAAQ,MACN,kBAAC,GAAD;GACE,GAAI;GACJ,MAAM;GACN,OAAO,GAAG,EAAY,KAAK,KAAK,EAAY,WAAW;GACvD,CAAA;EAEJ,oBAAoB;EACpB,eAAe;EAChB,CAAC,CACF"}
+{"version":3,"file":"CsvPreview.js","names":[],"sources":["../../../../src/components/table/CsvPreview/CsvPreview.tsx"],"sourcesContent":["import { ErrorBanner } from '@/components/index'\nimport ColumnHeader from '@/components/TanStackTable/ColumnHeader'\nimport StyledTanStackTable from '@/components/TanStackTable/StyledTanStackTable'\nimport { useGetCsvPreview } from '@/synapse-queries/table/useGetCsvPreview'\nimport Typography from '@mui/material/Typography'\nimport {\n  ColumnModel,\n  CsvTableDescriptor,\n  TableRow,\n  UploadToTablePreviewResult,\n} from '@sage-bionetworks/synapse-client'\nimport {\n  createColumnHelper,\n  getCoreRowModel,\n  useReactTable,\n} from '@tanstack/react-table'\nimport noop from 'lodash-es/noop'\nimport { useEffect, useMemo } from 'react'\n\nexport type CsvPreviewProps = {\n  fileHandleId: string\n  csvTableDescriptor: CsvTableDescriptor\n  onCsvPreviewDataChange?: (data: UploadToTablePreviewResult) => void\n  onIsLoadingChange?: (isLoading: boolean) => void\n}\n\n/**\n * Given a file handle ID and CSV Table Descriptor, fetches and displays a preview of the CSV file as it would be parsed into a table.\n */\nexport default function CsvPreview(props: CsvPreviewProps) {\n  const {\n    fileHandleId,\n    csvTableDescriptor,\n    onCsvPreviewDataChange = noop,\n    onIsLoadingChange = noop,\n  } = props\n\n  const {\n    data: csvPreviewData,\n    isLoading,\n    error,\n  } = useGetCsvPreview({\n    concreteType:\n      'org.sagebionetworks.repo.model.table.UploadToTablePreviewRequest',\n    uploadFileHandleId: fileHandleId,\n    csvTableDescriptor,\n  })\n\n  useEffect(() => {\n    if (csvPreviewData) {\n      onCsvPreviewDataChange(csvPreviewData)\n    }\n  }, [csvPreviewData, onCsvPreviewDataChange])\n\n  useEffect(() => {\n    onIsLoadingChange(isLoading)\n  }, [isLoading, onIsLoadingChange])\n\n  const tableData = useMemo(\n    () => csvPreviewData?.sampleRows ?? [],\n    [csvPreviewData?.sampleRows],\n  )\n\n  const columns = useMemo(\n    () => getPreviewColumns(csvPreviewData?.suggestedColumns ?? []),\n    [csvPreviewData?.suggestedColumns],\n  )\n\n  const table = useReactTable({\n    getCoreRowModel: getCoreRowModel(),\n    data: tableData,\n    columns: columns,\n  })\n\n  if (error) {\n    return <ErrorBanner error={error} />\n  }\n\n  return (\n    <>\n      {isLoading && <div>Loading preview...</div>}\n      {!isLoading && csvPreviewData && table && (\n        <>\n          <Typography variant={'body1'}>\n            Scanned {csvPreviewData?.rowsScanned?.toLocaleString()} rows to\n            generate preview:\n          </Typography>\n          <StyledTanStackTable table={table} />\n        </>\n      )}\n    </>\n  )\n}\n\nfunction getPreviewColumns(columnModels: ColumnModel[]) {\n  const columnHelper = createColumnHelper<TableRow>()\n  return columnModels.map((columnModel, index) => {\n    return columnHelper.accessor(tr => tr.values![index], {\n      id: `column-${index}`,\n      header: props => (\n        <ColumnHeader\n          {...props}\n          wrap={true}\n          title={`${columnModel.name}\\n(${columnModel.columnType})`}\n        />\n      ),\n      enableColumnFilter: false,\n      enableSorting: false,\n    })\n  })\n}\n"],"mappings":";;;;;;;;;;;AA6BA,SAAwB,EAAW,GAAwB;CACzD,IAAM,EACJ,iBACA,uBACA,4BAAyB,GACzB,uBAAoB,MAClB,GAEE,EACJ,MAAM,GACN,cACA,aACE,EAAiB;EACnB,cACE;EACF,oBAAoB;EACpB;CACF,CAAC;CAQD,AANA,QAAgB;EACd,AAAI,KACF,EAAuB,CAAc;CAEzC,GAAG,CAAC,GAAgB,CAAsB,CAAC,GAE3C,QAAgB;EACd,EAAkB,CAAS;CAC7B,GAAG,CAAC,GAAW,CAAiB,CAAC;CAEjC,IAAM,IAAY,QACV,GAAgB,cAAc,CAAC,GACrC,CAAC,GAAgB,UAAU,CAC7B,GAEM,IAAU,QACR,EAAkB,GAAgB,oBAAoB,CAAC,CAAC,GAC9D,CAAC,GAAgB,gBAAgB,CACnC,GAEM,IAAQ,EAAc;EAC1B,iBAAiB,EAAgB;EACjC,MAAM;EACG;CACX,CAAC;CAMD,OAJI,IACK,kBAAC,GAAD,EAAoB,SAAQ,CAAA,IAInC,kBAAA,GAAA,EAAA,UAAA,CACG,KAAa,kBAAC,OAAD,EAAA,UAAK,qBAAuB,CAAA,GACzC,CAAC,KAAa,KAAkB,KAC/B,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,GAAD;EAAY,SAAS;YAArB;GAA8B;GACnB,GAAgB,aAAa,eAAe;GAAE;EAE7C;KACZ,kBAAC,GAAD,EAA4B,SAAQ,CAAA,CACpC,EAAA,CAAA,CAEJ,EAAA,CAAA;AAEN;AAEA,SAAS,EAAkB,GAA6B;CACtD,IAAM,IAAe,EAA6B;CAClD,OAAO,EAAa,KAAK,GAAa,MAC7B,EAAa,UAAS,MAAM,EAAG,OAAQ,IAAQ;EACpD,IAAI,UAAU;EACd,SAAQ,MACN,kBAAC,GAAD;GACE,GAAI;GACJ,MAAM;GACN,OAAO,GAAG,EAAY,KAAK,KAAK,EAAY,WAAW;EACxD,CAAA;EAEH,oBAAoB;EACpB,eAAe;CACjB,CAAC,CACF;AACH"}

package/dist/components/table/CsvPreview/CsvPreviewDialog.d.ts

@@ -4,15 +4,15 @@ export type CsvPreviewDialogProps = {
     open: boolean;
     /** Callback when the dialog is closed */
     onClose: () => void;
-    /** Callback when the user confirms the column models
-     * @param dataFileHandleId - The file handle ID of the uploaded CSV
-     * @param columnModels - The confirmed column models
-     * */
-    onConfirm: (dataFileHandleId: string, columnModels: ColumnModel[], csvTableDescriptor: CsvTableDescriptor) => void;
     /** Whether the confirm action is pending */
     confirmIsPending?: boolean;
     /** An optional error message to display */
     errorMessage?: string;
+    /** Callback when the user confirms the column models
+     * @param dataFileHandleId - The file handle ID of the uploaded CSV
+     * @param columnModels - The confirmed column models
+     */
+    onConfirm: (dataFileHandleId: string, columnModels: ColumnModel[], csvTableDescriptor: CsvTableDescriptor) => void;
 };
 export default function CsvPreviewDialog(props: CsvPreviewDialogProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=CsvPreviewDialog.d.ts.map

package/dist/components/table/CsvPreview/CsvPreviewDialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CsvPreviewDialog.d.ts","sourceRoot":"","sources":["../../../../src/components/table/CsvPreview/CsvPreviewDialog.tsx"],"names":[],"mappings":"AAkBA,OAAO,EACL,WAAW,EACX,kBAAkB,EAEnB,MAAM,kCAAkC,CAAA;AAQzC,MAAM,MAAM,qBAAqB,GAAG;IAClC,iCAAiC;IACjC,IAAI,EAAE,OAAO,CAAA;IACb,yCAAyC;IACzC,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB;;;SAGK;IACL,SAAS,EAAE,CACT,gBAAgB,EAAE,MAAM,EACxB,YAAY,EAAE,WAAW,EAAE,EAC3B,kBAAkB,EAAE,kBAAkB,KACnC,IAAI,CAAA;IACT,4CAA4C;IAC5C,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B,2CAA2C;IAC3C,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB,CAAA;AAED,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,2CAyHpE"}
+{"version":3,"file":"CsvPreviewDialog.d.ts","sourceRoot":"","sources":["../../../../src/components/table/CsvPreview/CsvPreviewDialog.tsx"],"names":[],"mappings":"AAOA,OAAO,EACL,WAAW,EACX,kBAAkB,EACnB,MAAM,kCAAkC,CAAA;AAGzC,MAAM,MAAM,qBAAqB,GAAG;IAClC,iCAAiC;IACjC,IAAI,EAAE,OAAO,CAAA;IACb,yCAAyC;IACzC,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,4CAA4C;IAC5C,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B,2CAA2C;IAC3C,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB;;;OAGG;IACH,SAAS,EAAE,CACT,gBAAgB,EAAE,MAAM,EACxB,YAAY,EAAE,WAAW,EAAE,EAC3B,kBAAkB,EAAE,kBAAkB,KACnC,IAAI,CAAA;CACV,CAAA;AAED,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,2CAgEpE"}

package/dist/components/table/CsvPreview/CsvPreviewDialog.js

@@ -1,94 +1,45 @@
 import { ErrorBanner as e } from "../../error/ErrorBanner.js";
 import { DialogBase as t } from "../../DialogBase.js";
 import "../../index.js";
-import { BasicFileHandleUpload as n } from "../../file/upload/BasicFileHandleUpload.js";
-import r from "./CsvPreview.js";
-import i from "../CsvTableDescriptorForm/CsvTableDescriptorForm.js";
-import { useCallback as a, useRef as o, useState as s } from "react";
-import { Fragment as c, jsx as l, jsxs as u } from "react/jsx-runtime";
-import { RefreshTwoTone as d } from "@mui/icons-material";
-import f from "@mui/material/Typography";
-import p from "@mui/material/Stack";
-import m from "@mui/material/Button";
-import h from "@mui/icons-material/ExpandMore";
-import g from "@mui/material/Accordion";
-import _ from "@mui/material/AccordionDetails";
-import v from "@mui/material/AccordionSummary";
+import n, { CsvUploadPreviewStep as r } from "./useCsvUploadPreview.js";
+import i from "./CsvUploadPreviewContent.js";
+import { useCallback as a } from "react";
+import { Fragment as o, jsx as s, jsxs as c } from "react/jsx-runtime";
+import l from "@mui/material/Button";
 //#region src/components/table/CsvPreview/CsvPreviewDialog.tsx
-var y = /* @__PURE__ */ function(e) {
-	return e[e.UPLOAD_CSV = 0] = "UPLOAD_CSV", e[e.COLUMN_PREVIEW = 1] = "COLUMN_PREVIEW", e;
-}(y || {});
-function b(b) {
-	let { open: x, onClose: S, onConfirm: C, confirmIsPending: w, errorMessage: T } = b, [E, D] = s(y.UPLOAD_CSV), [O, k] = s({
-		separator: ",",
-		quoteCharacter: "\"",
-		escapeCharacter: "\\",
-		lineEnd: "\n",
-		isFirstLineHeader: !0
-	}), [A, j] = s(null), [M, N] = s(!1), [P, F] = s(null), I = a((e) => {
-		F(e), D(y.COLUMN_PREVIEW);
-	}, []), L = o(null), R = o(null), z = /* @__PURE__ */ l(n, {
-		ref: L,
-		allowMultipleUpload: !1,
-		onFileUploadComplete: (e) => {
-			I(e);
-		},
-		disableDragAndDrop: !0
-	}), B = /* @__PURE__ */ u(p, {
-		spacing: 2,
-		children: [P && /* @__PURE__ */ l(r, {
-			fileHandleId: P,
-			csvTableDescriptor: O,
-			onCsvPreviewDataChange: j,
-			onIsLoadingChange: N
-		}), /* @__PURE__ */ u(g, { children: [/* @__PURE__ */ l(v, {
-			expandIcon: /* @__PURE__ */ l(h, {}),
-			children: /* @__PURE__ */ l(f, {
-				variant: "headline3",
-				children: "Show Options"
-			})
-		}), /* @__PURE__ */ u(_, { children: [/* @__PURE__ */ l(i, {
-			defaultValue: O,
-			ref: R
-		}), /* @__PURE__ */ l(m, {
-			variant: "outlined",
-			startIcon: /* @__PURE__ */ l(d, {}),
-			sx: { mt: 2 },
-			onClick: () => {
-				R.current && k(R.current.getFormData());
-			},
-			children: "Refresh Preview"
-		})] })] })]
-	});
-	return /* @__PURE__ */ l(t, {
+function u(u) {
+	let { open: d, onClose: f, onConfirm: p, confirmIsPending: m, errorMessage: h } = u, g = n(), _ = a(() => {
+		let e = g.csvPreviewData?.suggestedColumns;
+		e && g.uploadedFileHandleId != null && p(g.uploadedFileHandleId, e, g.csvTableDescriptor);
+	}, [
+		g.csvPreviewData,
+		g.uploadedFileHandleId,
+		g.csvTableDescriptor,
+		p
+	]);
+	return /* @__PURE__ */ s(t, {
 		maxWidth: "lg",
 		title: "Upload CSV",
-		onCancel: S,
-		open: x,
-		content: /* @__PURE__ */ u(c, { children: [
-			E === y.UPLOAD_CSV && z,
-			E === y.COLUMN_PREVIEW && B,
-			T && /* @__PURE__ */ l(e, { error: T })
-		] }),
-		actions: /* @__PURE__ */ u(c, { children: [/* @__PURE__ */ l(m, {
+		onCancel: f,
+		open: d,
+		content: /* @__PURE__ */ c(o, { children: [/* @__PURE__ */ s(i, { workflow: g }), h && /* @__PURE__ */ s(e, { error: h })] }),
+		actions: /* @__PURE__ */ c(o, { children: [/* @__PURE__ */ s(l, {
 			variant: "outlined",
-			disabled: M,
+			disabled: g.isLoadingPreview,
 			onClick: () => {
-				S();
+				f();
 			},
 			children: "Cancel"
-		}), E === y.COLUMN_PREVIEW && /* @__PURE__ */ l(m, {
-			disabled: M,
+		}), g.step === r.COLUMN_PREVIEW && /* @__PURE__ */ s(l, {
+			disabled: g.isLoadingPreview,
 			variant: "contained",
-			onClick: () => {
-				C(P, A.suggestedColumns, O);
-			},
-			loading: w,
+			onClick: _,
+			loading: m,
 			children: "Confirm"
 		})] })
 	});
 }
 //#endregion
-export { b as default };
+export { u as default };
 
 //# sourceMappingURL=CsvPreviewDialog.js.map

package/dist/components/table/CsvPreview/CsvPreviewDialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"CsvPreviewDialog.js","names":[],"sources":["../../../../src/components/table/CsvPreview/CsvPreviewDialog.tsx"],"sourcesContent":["import { DialogBase } from '@/components/DialogBase'\nimport {\n  BasicFileHandleUpload,\n  FileUploadHandle,\n} from '@/components/file/upload/BasicFileHandleUpload'\nimport { ErrorBanner } from '@/components/index'\nimport CsvPreview from '@/components/table/CsvPreview/CsvPreview'\nimport CsvTableDescriptorForm, {\n  CsvTableDescriptorFormHandle,\n} from '@/components/table/CsvTableDescriptorForm/CsvTableDescriptorForm'\nimport { RefreshTwoTone } from '@mui/icons-material'\nimport ExpandMoreIcon from '@mui/icons-material/ExpandMore'\nimport Accordion from '@mui/material/Accordion'\nimport AccordionDetails from '@mui/material/AccordionDetails'\nimport AccordionSummary from '@mui/material/AccordionSummary'\nimport Button from '@mui/material/Button'\nimport Stack from '@mui/material/Stack'\nimport Typography from '@mui/material/Typography'\nimport {\n  ColumnModel,\n  CsvTableDescriptor,\n  UploadToTablePreviewResult,\n} from '@sage-bionetworks/synapse-client'\nimport { useCallback, useRef, useState } from 'react'\n\nenum CsvPreviewDialogStep {\n  UPLOAD_CSV = 0,\n  COLUMN_PREVIEW = 1,\n}\n\nexport type CsvPreviewDialogProps = {\n  /** Whether the dialog is open */\n  open: boolean\n  /** Callback when the dialog is closed */\n  onClose: () => void\n  /** Callback when the user confirms the column models\n   * @param dataFileHandleId - The file handle ID of the uploaded CSV\n   * @param columnModels - The confirmed column models\n   * */\n  onConfirm: (\n    dataFileHandleId: string,\n    columnModels: ColumnModel[],\n    csvTableDescriptor: CsvTableDescriptor,\n  ) => void\n  /** Whether the confirm action is pending */\n  confirmIsPending?: boolean\n  /** An optional error message to display */\n  errorMessage?: string\n}\n\nexport default function CsvPreviewDialog(props: CsvPreviewDialogProps) {\n  const { open, onClose, onConfirm, confirmIsPending, errorMessage } = props\n  const [step, setStep] = useState(CsvPreviewDialogStep.UPLOAD_CSV)\n  const [csvTableDescriptor, setCsvTableDescriptor] =\n    useState<CsvTableDescriptor>({\n      separator: ',',\n      quoteCharacter: '\"',\n      escapeCharacter: '\\\\',\n      lineEnd: '\\n',\n      isFirstLineHeader: true,\n    })\n  const [csvPreviewData, setCsvPreviewData] =\n    useState<UploadToTablePreviewResult | null>(null)\n  const [isLoadingPreview, setIsLoadingPreview] = useState(false)\n\n  const [uploadedFileHandleId, setUploadedFileHandleId] = useState<\n    string | null\n  >(null)\n\n  const onFileUploaded = useCallback((fileHandleId: string) => {\n    setUploadedFileHandleId(fileHandleId)\n    setStep(CsvPreviewDialogStep.COLUMN_PREVIEW)\n  }, [])\n\n  const uploadRef = useRef<FileUploadHandle | null>(null)\n  const csvDescriptorFormRef = useRef<CsvTableDescriptorFormHandle | null>(null)\n\n  const uploadStepContent = (\n    <BasicFileHandleUpload\n      ref={uploadRef}\n      allowMultipleUpload={false}\n      onFileUploadComplete={fileHandleId => {\n        onFileUploaded(fileHandleId)\n      }}\n      disableDragAndDrop={true}\n    />\n  )\n\n  const previewStepContent = (\n    <Stack spacing={2}>\n      {uploadedFileHandleId && (\n        <CsvPreview\n          fileHandleId={uploadedFileHandleId}\n          csvTableDescriptor={csvTableDescriptor}\n          onCsvPreviewDataChange={setCsvPreviewData}\n          onIsLoadingChange={setIsLoadingPreview}\n        />\n      )}\n      <Accordion>\n        <AccordionSummary expandIcon={<ExpandMoreIcon />}>\n          <Typography variant={'headline3'}>Show Options</Typography>\n        </AccordionSummary>\n        <AccordionDetails>\n          <CsvTableDescriptorForm\n            defaultValue={csvTableDescriptor}\n            ref={csvDescriptorFormRef}\n          />\n          <Button\n            variant={'outlined'}\n            startIcon={<RefreshTwoTone />}\n            sx={{ mt: 2 }}\n            onClick={() => {\n              // Get the state from the form and update local state, which will re-render the preview\n              if (csvDescriptorFormRef.current) {\n                setCsvTableDescriptor(\n                  csvDescriptorFormRef.current.getFormData(),\n                )\n              }\n            }}\n          >\n            Refresh Preview\n          </Button>\n        </AccordionDetails>\n      </Accordion>\n    </Stack>\n  )\n\n  return (\n    <DialogBase\n      maxWidth={'lg'}\n      title={'Upload CSV'}\n      onCancel={onClose}\n      open={open}\n      content={\n        <>\n          {step === CsvPreviewDialogStep.UPLOAD_CSV && uploadStepContent}\n          {step === CsvPreviewDialogStep.COLUMN_PREVIEW && previewStepContent}\n          {errorMessage && <ErrorBanner error={errorMessage} />}\n        </>\n      }\n      actions={\n        <>\n          <Button\n            variant={'outlined'}\n            disabled={isLoadingPreview}\n            onClick={() => {\n              onClose()\n            }}\n          >\n            Cancel\n          </Button>\n          {step === CsvPreviewDialogStep.COLUMN_PREVIEW && (\n            <Button\n              disabled={isLoadingPreview}\n              variant={'contained'}\n              onClick={() => {\n                onConfirm(\n                  uploadedFileHandleId!,\n                  csvPreviewData!.suggestedColumns!,\n                  csvTableDescriptor,\n                )\n              }}\n              loading={confirmIsPending}\n            >\n              Confirm\n            </Button>\n          )}\n        </>\n      }\n    />\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAyBA,IAAK,IAAL,yBAAA,GAAA;QACE,EAAA,EAAA,aAAa,KAAA,cACb,EAAA,EAAA,iBAAiB,KAAA;EAFd,KAAA,EAAA,CAGJ;AAsBD,SAAwB,EAAiB,GAA8B;CACrE,IAAM,EAAE,SAAM,YAAS,cAAW,qBAAkB,oBAAiB,GAC/D,CAAC,GAAM,KAAW,EAAS,EAAqB,WAAW,EAC3D,CAAC,GAAoB,KACzB,EAA6B;EAC3B,WAAW;EACX,gBAAgB;EAChB,iBAAiB;EACjB,SAAS;EACT,mBAAmB;EACpB,CAAC,EACE,CAAC,GAAgB,KACrB,EAA4C,KAAK,EAC7C,CAAC,GAAkB,KAAuB,EAAS,GAAM,EAEzD,CAAC,GAAsB,KAA2B,EAEtD,KAAK,EAED,IAAiB,GAAa,MAAyB;AAE3D,EADA,EAAwB,EAAa,EACrC,EAAQ,EAAqB,eAAe;IAC3C,EAAE,CAAC,EAEA,IAAY,EAAgC,KAAK,EACjD,IAAuB,EAA4C,KAAK,EAExE,IACJ,kBAAC,GAAD;EACE,KAAK;EACL,qBAAqB;EACrB,uBAAsB,MAAgB;AACpC,KAAe,EAAa;;EAE9B,oBAAoB;EACpB,CAAA,EAGE,IACJ,kBAAC,GAAD;EAAO,SAAS;YAAhB,CACG,KACC,kBAAC,GAAD;GACE,cAAc;GACM;GACpB,wBAAwB;GACxB,mBAAmB;GACnB,CAAA,EAEJ,kBAAC,GAAD,EAAA,UAAA,CACE,kBAAC,GAAD;GAAkB,YAAY,kBAAC,GAAD,EAAkB,CAAA;aAC9C,kBAAC,GAAD;IAAY,SAAS;cAAa;IAAyB,CAAA;GAC1C,CAAA,EACnB,kBAAC,GAAD,EAAA,UAAA,CACE,kBAAC,GAAD;GACE,cAAc;GACd,KAAK;GACL,CAAA,EACF,kBAAC,GAAD;GACE,SAAS;GACT,WAAW,kBAAC,GAAD,EAAkB,CAAA;GAC7B,IAAI,EAAE,IAAI,GAAG;GACb,eAAe;AAEb,IAAI,EAAqB,WACvB,EACE,EAAqB,QAAQ,aAAa,CAC3C;;aAGN;GAEQ,CAAA,CACQ,EAAA,CAAA,CACT,EAAA,CAAA,CACN;;AAGV,QACE,kBAAC,GAAD;EACE,UAAU;EACV,OAAO;EACP,UAAU;EACJ;EACN,SACE,kBAAA,GAAA,EAAA,UAAA;GACG,MAAS,EAAqB,cAAc;GAC5C,MAAS,EAAqB,kBAAkB;GAChD,KAAgB,kBAAC,GAAD,EAAa,OAAO,GAAgB,CAAA;GACpD,EAAA,CAAA;EAEL,SACE,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,GAAD;GACE,SAAS;GACT,UAAU;GACV,eAAe;AACb,OAAS;;aAEZ;GAEQ,CAAA,EACR,MAAS,EAAqB,kBAC7B,kBAAC,GAAD;GACE,UAAU;GACV,SAAS;GACT,eAAe;AACb,MACE,GACA,EAAgB,kBAChB,EACD;;GAEH,SAAS;aACV;GAEQ,CAAA,CAEV,EAAA,CAAA;EAEL,CAAA"}
+{"version":3,"file":"CsvPreviewDialog.js","names":[],"sources":["../../../../src/components/table/CsvPreview/CsvPreviewDialog.tsx"],"sourcesContent":["import { DialogBase } from '@/components/DialogBase'\nimport { ErrorBanner } from '@/components/index'\nimport CsvUploadPreviewContent from '@/components/table/CsvPreview/CsvUploadPreviewContent'\nimport useCsvUploadPreview, {\n  CsvUploadPreviewStep,\n} from '@/components/table/CsvPreview/useCsvUploadPreview'\nimport Button from '@mui/material/Button'\nimport {\n  ColumnModel,\n  CsvTableDescriptor,\n} from '@sage-bionetworks/synapse-client'\nimport { useCallback } from 'react'\n\nexport type CsvPreviewDialogProps = {\n  /** Whether the dialog is open */\n  open: boolean\n  /** Callback when the dialog is closed */\n  onClose: () => void\n  /** Whether the confirm action is pending */\n  confirmIsPending?: boolean\n  /** An optional error message to display */\n  errorMessage?: string\n  /** Callback when the user confirms the column models\n   * @param dataFileHandleId - The file handle ID of the uploaded CSV\n   * @param columnModels - The confirmed column models\n   */\n  onConfirm: (\n    dataFileHandleId: string,\n    columnModels: ColumnModel[],\n    csvTableDescriptor: CsvTableDescriptor,\n  ) => void\n}\n\nexport default function CsvPreviewDialog(props: CsvPreviewDialogProps) {\n  const { open, onClose, onConfirm, confirmIsPending, errorMessage } = props\n\n  const csvUploadPreviewWorkflow = useCsvUploadPreview()\n\n  const handlePreviewConfirm = useCallback(() => {\n    const suggestedColumns =\n      csvUploadPreviewWorkflow.csvPreviewData?.suggestedColumns\n    if (!suggestedColumns) {\n      return\n    }\n\n    if (csvUploadPreviewWorkflow.uploadedFileHandleId != null) {\n      onConfirm(\n        csvUploadPreviewWorkflow.uploadedFileHandleId,\n        suggestedColumns,\n        csvUploadPreviewWorkflow.csvTableDescriptor,\n      )\n    }\n  }, [\n    csvUploadPreviewWorkflow.csvPreviewData,\n    csvUploadPreviewWorkflow.uploadedFileHandleId,\n    csvUploadPreviewWorkflow.csvTableDescriptor,\n    onConfirm,\n  ])\n\n  return (\n    <DialogBase\n      maxWidth={'lg'}\n      title={'Upload CSV'}\n      onCancel={onClose}\n      open={open}\n      content={\n        <>\n          <CsvUploadPreviewContent workflow={csvUploadPreviewWorkflow} />\n          {errorMessage && <ErrorBanner error={errorMessage} />}\n        </>\n      }\n      actions={\n        <>\n          <Button\n            variant={'outlined'}\n            disabled={csvUploadPreviewWorkflow.isLoadingPreview}\n            onClick={() => {\n              onClose()\n            }}\n          >\n            Cancel\n          </Button>\n          {csvUploadPreviewWorkflow.step ===\n            CsvUploadPreviewStep.COLUMN_PREVIEW && (\n            <Button\n              disabled={csvUploadPreviewWorkflow.isLoadingPreview}\n              variant={'contained'}\n              onClick={handlePreviewConfirm}\n              loading={confirmIsPending}\n            >\n              Confirm\n            </Button>\n          )}\n        </>\n      }\n    />\n  )\n}\n"],"mappings":";;;;;;;;;AAiCA,SAAwB,EAAiB,GAA8B;CACrE,IAAM,EAAE,SAAM,YAAS,cAAW,qBAAkB,oBAAiB,GAE/D,IAA2B,EAAoB,GAE/C,IAAuB,QAAkB;EAC7C,IAAM,IACJ,EAAyB,gBAAgB;EACtC,KAID,EAAyB,wBAAwB,QACnD,EACE,EAAyB,sBACzB,GACA,EAAyB,kBAC3B;CAEJ,GAAG;EACD,EAAyB;EACzB,EAAyB;EACzB,EAAyB;EACzB;CACF,CAAC;CAED,OACE,kBAAC,GAAD;EACE,UAAU;EACV,OAAO;EACP,UAAU;EACJ;EACN,SACE,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,GAAD,EAAyB,UAAU,EAA2B,CAAA,GAC7D,KAAgB,kBAAC,GAAD,EAAa,OAAO,EAAe,CAAA,CACpD,EAAA,CAAA;EAEJ,SACE,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,GAAD;GACE,SAAS;GACT,UAAU,EAAyB;GACnC,eAAe;IACb,EAAQ;GACV;aACD;EAEO,CAAA,GACP,EAAyB,SACxB,EAAqB,kBACrB,kBAAC,GAAD;GACE,UAAU,EAAyB;GACnC,SAAS;GACT,SAAS;GACT,SAAS;aACV;EAEO,CAAA,CAEV,EAAA,CAAA;CAEL,CAAA;AAEL"}

package/dist/components/table/CsvPreview/CsvPreviewWithOptions.d.ts

@@ -0,0 +1,19 @@
+import { CsvTableDescriptor, UploadToTablePreviewResult } from '@sage-bionetworks/synapse-client';
+export type CsvPreviewWithOptionsProps = {
+    /** File handle ID of the uploaded CSV, or null if not yet uploaded */
+    fileHandleId: string | null;
+    /** Current CSV parsing configuration */
+    csvTableDescriptor: CsvTableDescriptor;
+    /** Called when the user clicks "Refresh Preview" with the form's current values */
+    onCsvTableDescriptorChange: (descriptor: CsvTableDescriptor) => void;
+    /** Called when the CSV preview data is fetched */
+    onCsvPreviewDataChange?: (data: UploadToTablePreviewResult) => void;
+    /** Called when the preview load state changes */
+    onIsLoadingChange?: (isLoading: boolean) => void;
+};
+/**
+ * Displays a CSV preview table with expandable parsing options.
+ * For upload/preview flows, prefer useCsvUploadPreview with CsvUploadPreviewContent.
+ */
+export default function CsvPreviewWithOptions({ fileHandleId, csvTableDescriptor, onCsvTableDescriptorChange, onCsvPreviewDataChange, onIsLoadingChange, }: CsvPreviewWithOptionsProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=CsvPreviewWithOptions.d.ts.map

package/dist/components/table/CsvPreview/CsvPreviewWithOptions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CsvPreviewWithOptions.d.ts","sourceRoot":"","sources":["../../../../src/components/table/CsvPreview/CsvPreviewWithOptions.tsx"],"names":[],"mappings":"AAUA,OAAO,EACL,kBAAkB,EAClB,0BAA0B,EAC3B,MAAM,kCAAkC,CAAA;AAOzC,MAAM,MAAM,0BAA0B,GAAG;IACvC,sEAAsE;IACtE,YAAY,EAAE,MAAM,GAAG,IAAI,CAAA;IAC3B,wCAAwC;IACxC,kBAAkB,EAAE,kBAAkB,CAAA;IACtC,mFAAmF;IACnF,0BAA0B,EAAE,CAAC,UAAU,EAAE,kBAAkB,KAAK,IAAI,CAAA;IACpE,kDAAkD;IAClD,sBAAsB,CAAC,EAAE,CAAC,IAAI,EAAE,0BAA0B,KAAK,IAAI,CAAA;IACnE,iDAAiD;IACjD,iBAAiB,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAA;CACjD,CAAA;AAED;;;GAGG;AACH,MAAM,CAAC,OAAO,UAAU,qBAAqB,CAAC,EAC5C,YAAY,EACZ,kBAAkB,EAClB,0BAA0B,EAC1B,sBAAsB,EACtB,iBAAiB,GAClB,EAAE,0BAA0B,2CAwC5B"}

package/dist/components/table/CsvPreview/CsvPreviewWithOptions.js

@@ -0,0 +1,41 @@
+import e from "../CsvTableDescriptorForm/CsvTableDescriptorForm.js";
+import t from "./CsvPreview.js";
+import { useRef as n } from "react";
+import { Accordion as r, AccordionDetails as i, AccordionSummary as a, Button as o, Stack as s, Typography as c } from "@mui/material";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+import { RefreshTwoTone as d } from "@mui/icons-material";
+import f from "@mui/icons-material/ExpandMore";
+//#region src/components/table/CsvPreview/CsvPreviewWithOptions.tsx
+function p({ fileHandleId: p, csvTableDescriptor: m, onCsvTableDescriptorChange: h, onCsvPreviewDataChange: g, onIsLoadingChange: _ }) {
+	let v = n(null);
+	return /* @__PURE__ */ u(s, {
+		spacing: 2,
+		children: [p && /* @__PURE__ */ l(t, {
+			fileHandleId: p,
+			csvTableDescriptor: m,
+			onCsvPreviewDataChange: g,
+			onIsLoadingChange: _
+		}), /* @__PURE__ */ u(r, { children: [/* @__PURE__ */ l(a, {
+			expandIcon: /* @__PURE__ */ l(f, {}),
+			children: /* @__PURE__ */ l(c, {
+				variant: "headline3",
+				children: "Show Options"
+			})
+		}), /* @__PURE__ */ u(i, { children: [/* @__PURE__ */ l(e, {
+			defaultValue: m,
+			ref: v
+		}), /* @__PURE__ */ l(o, {
+			variant: "outlined",
+			startIcon: /* @__PURE__ */ l(d, {}),
+			sx: { mt: 2 },
+			onClick: () => {
+				v.current && h(v.current.getFormData());
+			},
+			children: "Refresh Preview"
+		})] })] })]
+	});
+}
+//#endregion
+export { p as default };
+
+//# sourceMappingURL=CsvPreviewWithOptions.js.map

package/dist/components/table/CsvPreview/CsvPreviewWithOptions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CsvPreviewWithOptions.js","names":[],"sources":["../../../../src/components/table/CsvPreview/CsvPreviewWithOptions.tsx"],"sourcesContent":["import { RefreshTwoTone } from '@mui/icons-material'\nimport ExpandMoreIcon from '@mui/icons-material/ExpandMore'\nimport {\n  Accordion,\n  AccordionDetails,\n  AccordionSummary,\n  Button,\n  Stack,\n  Typography,\n} from '@mui/material'\nimport {\n  CsvTableDescriptor,\n  UploadToTablePreviewResult,\n} from '@sage-bionetworks/synapse-client'\nimport CsvTableDescriptorForm, {\n  CsvTableDescriptorFormHandle,\n} from '@/components/table/CsvTableDescriptorForm/CsvTableDescriptorForm'\nimport { useRef } from 'react'\nimport CsvPreview from '@/components/table/CsvPreview/CsvPreview'\n\nexport type CsvPreviewWithOptionsProps = {\n  /** File handle ID of the uploaded CSV, or null if not yet uploaded */\n  fileHandleId: string | null\n  /** Current CSV parsing configuration */\n  csvTableDescriptor: CsvTableDescriptor\n  /** Called when the user clicks \"Refresh Preview\" with the form's current values */\n  onCsvTableDescriptorChange: (descriptor: CsvTableDescriptor) => void\n  /** Called when the CSV preview data is fetched */\n  onCsvPreviewDataChange?: (data: UploadToTablePreviewResult) => void\n  /** Called when the preview load state changes */\n  onIsLoadingChange?: (isLoading: boolean) => void\n}\n\n/**\n * Displays a CSV preview table with expandable parsing options.\n * For upload/preview flows, prefer useCsvUploadPreview with CsvUploadPreviewContent.\n */\nexport default function CsvPreviewWithOptions({\n  fileHandleId,\n  csvTableDescriptor,\n  onCsvTableDescriptorChange,\n  onCsvPreviewDataChange,\n  onIsLoadingChange,\n}: CsvPreviewWithOptionsProps) {\n  const csvDescriptorFormRef = useRef<CsvTableDescriptorFormHandle | null>(null)\n\n  return (\n    <Stack spacing={2}>\n      {fileHandleId && (\n        <CsvPreview\n          fileHandleId={fileHandleId}\n          csvTableDescriptor={csvTableDescriptor}\n          onCsvPreviewDataChange={onCsvPreviewDataChange}\n          onIsLoadingChange={onIsLoadingChange}\n        />\n      )}\n      <Accordion>\n        <AccordionSummary expandIcon={<ExpandMoreIcon />}>\n          <Typography variant={'headline3'}>Show Options</Typography>\n        </AccordionSummary>\n        <AccordionDetails>\n          <CsvTableDescriptorForm\n            defaultValue={csvTableDescriptor}\n            ref={csvDescriptorFormRef}\n          />\n          <Button\n            variant={'outlined'}\n            startIcon={<RefreshTwoTone />}\n            sx={{ mt: 2 }}\n            onClick={() => {\n              if (csvDescriptorFormRef.current) {\n                onCsvTableDescriptorChange(\n                  csvDescriptorFormRef.current.getFormData(),\n                )\n              }\n            }}\n          >\n            Refresh Preview\n          </Button>\n        </AccordionDetails>\n      </Accordion>\n    </Stack>\n  )\n}\n"],"mappings":";;;;;;;;AAqCA,SAAwB,EAAsB,EAC5C,iBACA,uBACA,+BACA,2BACA,wBAC6B;CAC7B,IAAM,IAAuB,EAA4C,IAAI;CAE7E,OACE,kBAAC,GAAD;EAAO,SAAS;YAAhB,CACG,KACC,kBAAC,GAAD;GACgB;GACM;GACI;GACL;EACpB,CAAA,GAEH,kBAAC,GAAD,EAAA,UAAA,CACE,kBAAC,GAAD;GAAkB,YAAY,kBAAC,GAAD,CAAiB,CAAA;aAC7C,kBAAC,GAAD;IAAY,SAAS;cAAa;GAAwB,CAAA;EAC1C,CAAA,GAClB,kBAAC,GAAD,EAAA,UAAA,CACE,kBAAC,GAAD;GACE,cAAc;GACd,KAAK;EACN,CAAA,GACD,kBAAC,GAAD;GACE,SAAS;GACT,WAAW,kBAAC,GAAD,CAAiB,CAAA;GAC5B,IAAI,EAAE,IAAI,EAAE;GACZ,eAAe;IACb,AAAI,EAAqB,WACvB,EACE,EAAqB,QAAQ,YAAY,CAC3C;GAEJ;aACD;EAEO,CAAA,CACQ,EAAA,CAAA,CACT,EAAA,CAAA,CACN;;AAEX"}

package/dist/components/table/CsvPreview/CsvUploadPreviewContent.d.ts

@@ -0,0 +1,12 @@
+import useCsvUploadPreview from './useCsvUploadPreview';
+export type CsvUploadPreviewContentProps = {
+    /**
+     * Shared upload/preview workflow state and callbacks from useCsvUploadPreview.
+     */
+    workflow: ReturnType<typeof useCsvUploadPreview>;
+};
+/**
+ * Renders the active CSV upload workflow step: file upload first, then preview/options.
+ */
+export default function CsvUploadPreviewContent({ workflow, }: CsvUploadPreviewContentProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=CsvUploadPreviewContent.d.ts.map

package/dist/components/table/CsvPreview/CsvUploadPreviewContent.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CsvUploadPreviewContent.d.ts","sourceRoot":"","sources":["../../../../src/components/table/CsvPreview/CsvUploadPreviewContent.tsx"],"names":[],"mappings":"AACA,OAAO,mBAAmB,MAAM,uBAAuB,CAAA;AAQvD,MAAM,MAAM,4BAA4B,GAAG;IACzC;;OAEG;IACH,QAAQ,EAAE,UAAU,CAAC,OAAO,mBAAmB,CAAC,CAAA;CACjD,CAAA;AAED;;GAEG;AACH,MAAM,CAAC,OAAO,UAAU,uBAAuB,CAAC,EAC9C,QAAQ,GACT,EAAE,4BAA4B,2CAmC9B"}