synapse-react-client 4.0.17 → 4.0.19

package/dist/components/DataExplorer/DataExplorer.js

@@ -0,0 +1,119 @@
+import "../../utils/SynapseConstants.js";
+import { parseEntityIdFromSqlStatement as e } from "../../utils/functions/SqlFunctions.js";
+import "../../utils/functions/index.js";
+import "../../utils/index.js";
+import { getFieldIndex as t } from "../../utils/functions/queryUtils.js";
+import n from "../../synapse-queries/entity/useGetQueryResultBundle.js";
+import { useSmartLink as r } from "../SmartLink/useSmartLink.js";
+import { generateEncodedPathAndQueryForSelectedFacetURL as i } from "../QueryWrapper/generateEncodedPathAndQueryForSelectedFacetURL.js";
+import "../QueryWrapper/index.js";
+import a from "../ImageFromSynapseTable.js";
+import o from "./DataExplorer.module.js";
+import { useEffect as s, useMemo as c, useState as l } from "react";
+import { Button as u, Stack as d, Typography as f } from "@mui/material";
+import { jsx as p, jsxs as m } from "react/jsx-runtime";
+import h from "@mui/icons-material/ArrowForward";
+//#region src/components/DataExplorer/DataExplorer.tsx
+var g = /* @__PURE__ */ function(e) {
+	return e.DATATYPE = "datatype", e.ICON = "icon", e.HEX_COLOR = "hexColor", e.FILE_COUNT = "fileCount", e;
+}(g || {});
+function _({ sql: _, title: v, subtitle: y, buttonText: b, buttonLink: x, explorePath: S, exploreQuerySql: C, filterColumnName: w }) {
+	let T = v || y || b, E = r(x), D = e(_), { data: O } = n({
+		partMask: 5,
+		concreteType: "org.sagebionetworks.repo.model.table.QueryBundleRequest",
+		entityId: D,
+		query: {
+			sql: _,
+			sort: [{
+				column: "order",
+				direction: "ASC"
+			}]
+		}
+	}), k = c(() => O?.queryResult?.queryResults.rows ?? [], [O]), A = t(g.DATATYPE, O), j = t(g.ICON, O), M = t(g.HEX_COLOR, O), N = t(g.FILE_COUNT, O), [P, F] = l([]);
+	return s(() => {
+		!S || !w || !C || Promise.all(k.map((e) => {
+			let t = e.values[A]?.trim();
+			return t ? i(S, C, [{
+				facet: w,
+				facetValue: t
+			}]) : Promise.resolve(S);
+		})).then(F);
+	}, [
+		k,
+		A,
+		S,
+		C,
+		w
+	]), /* @__PURE__ */ m("div", {
+		className: o.dataExplorerContainer,
+		children: [T && /* @__PURE__ */ m(d, {
+			className: o.dataExplorerTextContainer,
+			children: [
+				v && /* @__PURE__ */ p(f, {
+					variant: "headline1",
+					className: o.dataExplorerTitle,
+					children: v
+				}),
+				y && /* @__PURE__ */ p(f, {
+					variant: "body1",
+					component: "div",
+					className: o.dataExplorerSubtitle,
+					children: y
+				}),
+				b && /* @__PURE__ */ p(u, {
+					variant: "contained",
+					className: o.dataExplorerButton,
+					...E,
+					children: b
+				})
+			]
+		}), /* @__PURE__ */ p("div", {
+			className: o.dataContainer,
+			children: k.map((e, t) => {
+				let n = e.values[A] ?? "", r = e.values[M] ?? void 0, i = P[t], s = e.values[N] ?? "";
+				return /* @__PURE__ */ p("a", {
+					className: o.dataRow,
+					href: i,
+					children: /* @__PURE__ */ m("div", {
+						className: o.dataRowInner,
+						children: [/* @__PURE__ */ m("div", {
+							className: o.dataRowLeft,
+							children: [/* @__PURE__ */ p("div", {
+								className: o.iconContainer,
+								style: r ? { backgroundColor: r } : void 0,
+								children: /* @__PURE__ */ p(a, {
+									tableId: D,
+									fileHandleId: e.values[j],
+									alt: e.values[A] ?? "",
+									style: {
+										width: 49,
+										height: 49
+									}
+								})
+							}), /* @__PURE__ */ m("div", {
+								className: o.dataRowNamePill,
+								children: [/* @__PURE__ */ p(f, {
+									className: o.dataRowTitle,
+									children: n
+								}), s && /* @__PURE__ */ p("div", {
+									className: o.fileCount,
+									children: s
+								})]
+							})]
+						}), i && /* @__PURE__ */ m("div", {
+							className: o.viewCta,
+							children: [/* @__PURE__ */ p("span", {
+								className: o.viewCtaText,
+								children: "View"
+							}), /* @__PURE__ */ p(h, { className: o.viewCtaIcon })]
+						})]
+					})
+				}, e.rowId);
+			})
+		})]
+	});
+}
+//#endregion
+export { _ as default };
+
+//# sourceMappingURL=DataExplorer.js.map

package/dist/components/DataExplorer/DataExplorer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataExplorer.js","names":[],"sources":["../../../src/components/DataExplorer/DataExplorer.tsx"],"sourcesContent":["import { Button, Typography, Stack } from '@mui/material'\nimport { useEffect, useMemo, useState } from 'react'\nimport styles from './DataExplorer.module.scss'\nimport { useSmartLink } from '../SmartLink/useSmartLink'\nimport { parseEntityIdFromSqlStatement } from '@/utils/functions'\nimport { QueryBundleRequest } from '@sage-bionetworks/synapse-types'\nimport { SynapseConstants } from '@/utils'\nimport useGetQueryResultBundle from '@/synapse-queries/entity/useGetQueryResultBundle'\nimport { getFieldIndex } from '@/utils/functions/queryUtils'\nimport { generateEncodedPathAndQueryForSelectedFacetURL } from '../QueryWrapper'\nimport ImageFromSynapseTable from '../ImageFromSynapseTable'\nimport ArrowForwardIcon from '@mui/icons-material/ArrowForward'\n\ntype DataExplorerProps = {\n  title?: React.ReactNode\n  subtitle?: React.ReactNode\n  buttonText?: string\n  buttonLink?: string\n  sql: string\n  explorePath?: string\n  exploreQuerySql?: string\n  filterColumnName?: string\n}\n\nenum ExpectedColumns {\n  DATATYPE = 'datatype',\n  ICON = 'icon',\n  HEX_COLOR = 'hexColor',\n  FILE_COUNT = 'fileCount',\n}\n\nexport default function DataExplorer({\n  sql,\n  title,\n  subtitle,\n  buttonText,\n  buttonLink,\n  explorePath,\n  exploreQuerySql,\n  filterColumnName,\n}: DataExplorerProps) {\n  const hasTextSection = title || subtitle || buttonText\n  const smartLinkProps = useSmartLink(buttonLink)\n\n  const entityId = parseEntityIdFromSqlStatement(sql)\n\n  const queryBundleRequest: QueryBundleRequest = {\n    partMask:\n      SynapseConstants.BUNDLE_MASK_QUERY_SELECT_COLUMNS |\n      SynapseConstants.BUNDLE_MASK_QUERY_RESULTS,\n    concreteType: 'org.sagebionetworks.repo.model.table.QueryBundleRequest',\n    entityId,\n    query: {\n      sql,\n      sort: [{ column: 'order', direction: 'ASC' }],\n    },\n  }\n\n  const { data: queryResultBundle } =\n    useGetQueryResultBundle(queryBundleRequest)\n\n  const dataRows = useMemo(\n    () => queryResultBundle?.queryResult?.queryResults.rows ?? [],\n    [queryResultBundle],\n  )\n\n  const datatypeColIndex = getFieldIndex(\n    ExpectedColumns.DATATYPE,\n    queryResultBundle,\n  )\n\n  const iconColIndex = getFieldIndex(ExpectedColumns.ICON, queryResultBundle)\n\n  const hexColorColIndex = getFieldIndex(\n    ExpectedColumns.HEX_COLOR,\n    queryResultBundle,\n  )\n\n  const fileCountColIndex = getFieldIndex(\n    ExpectedColumns.FILE_COUNT,\n    queryResultBundle,\n  )\n\n  const [rowUrls, setRowUrls] = useState<string[]>([])\n\n  useEffect(() => {\n    if (!explorePath || !filterColumnName || !exploreQuerySql) return\n\n    Promise.all(\n      dataRows.map(row => {\n        const dataType = row.values[datatypeColIndex]?.trim()\n        if (!dataType) return Promise.resolve(explorePath)\n        return generateEncodedPathAndQueryForSelectedFacetURL(\n          explorePath,\n          exploreQuerySql,\n          [{ facet: filterColumnName, facetValue: dataType }],\n        )\n      }),\n    ).then(setRowUrls)\n  }, [\n    dataRows,\n    datatypeColIndex,\n    explorePath,\n    exploreQuerySql,\n    filterColumnName,\n  ])\n\n  return (\n    <div className={styles.dataExplorerContainer}>\n      {hasTextSection && (\n        <Stack className={styles.dataExplorerTextContainer}>\n          {title && (\n            <Typography\n              variant=\"headline1\"\n              className={styles.dataExplorerTitle}\n            >\n              {title}\n            </Typography>\n          )}\n          {subtitle && (\n            <Typography\n              variant=\"body1\"\n              component=\"div\"\n              className={styles.dataExplorerSubtitle}\n            >\n              {subtitle}\n            </Typography>\n          )}\n          {buttonText && (\n            <Button\n              variant=\"contained\"\n              className={styles.dataExplorerButton}\n              {...smartLinkProps}\n            >\n              {buttonText}\n            </Button>\n          )}\n        </Stack>\n      )}\n      <div className={styles.dataContainer}>\n        {dataRows.map((row, index) => {\n          const dataType = row.values[datatypeColIndex] ?? ''\n          const hexColor = row.values[hexColorColIndex] ?? undefined\n          const rowUrl = rowUrls[index]\n          const fileCount = row.values[fileCountColIndex] ?? ''\n          return (\n            <a key={row.rowId} className={styles.dataRow} href={rowUrl}>\n              <div className={styles.dataRowInner}>\n                <div className={styles.dataRowLeft}>\n                  <div\n                    className={styles.iconContainer}\n                    style={hexColor ? { backgroundColor: hexColor } : undefined}\n                  >\n                    <ImageFromSynapseTable\n                      tableId={entityId}\n                      fileHandleId={row.values[iconColIndex]}\n                      alt={row.values[datatypeColIndex] ?? ''}\n                      style={{ width: 49, height: 49 }}\n                    />\n                  </div>\n                  <div className={styles.dataRowNamePill}>\n                    <Typography className={styles.dataRowTitle}>\n                      {dataType}\n                    </Typography>\n                    {fileCount && (\n                      <div className={styles.fileCount}>{fileCount}</div>\n                    )}\n                  </div>\n                </div>\n                {rowUrl && (\n                  <div className={styles.viewCta}>\n                    <span className={styles.viewCtaText}>View</span>\n                    <ArrowForwardIcon className={styles.viewCtaIcon} />\n                  </div>\n                )}\n              </div>\n            </a>\n          )\n        })}\n      </div>\n    </div>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAwBA,IAAK,IAAL,yBAAA,GAAA;QACE,EAAA,WAAW,YACX,EAAA,OAAO,QACP,EAAA,YAAY,YACZ,EAAA,aAAa;EAJV,KAAA,EAAA,CAKJ;AAED,SAAwB,EAAa,EACnC,QACA,UACA,aACA,eACA,eACA,gBACA,oBACA,uBACoB;CACpB,IAAM,IAAiB,KAAS,KAAY,GACtC,IAAiB,EAAa,EAAW,EAEzC,IAAW,EAA8B,EAAI,EAc7C,EAAE,MAAM,MACZ,EAAwB;EAZxB,UACE;EAEF,cAAc;EACd;EACA,OAAO;GACL;GACA,MAAM,CAAC;IAAE,QAAQ;IAAS,WAAW;IAAO,CAAC;GAC9C;EAIuB,CAAmB,EAEvC,IAAW,QACT,GAAmB,aAAa,aAAa,QAAQ,EAAE,EAC7D,CAAC,EAAkB,CACpB,EAEK,IAAmB,EACvB,EAAgB,UAChB,EACD,EAEK,IAAe,EAAc,EAAgB,MAAM,EAAkB,EAErE,IAAmB,EACvB,EAAgB,WAChB,EACD,EAEK,IAAoB,EACxB,EAAgB,YAChB,EACD,EAEK,CAAC,GAAS,KAAc,EAAmB,EAAE,CAAC;AAwBpD,QAtBA,QAAgB;AACV,GAAC,KAAe,CAAC,KAAoB,CAAC,KAE1C,QAAQ,IACN,EAAS,KAAI,MAAO;GAClB,IAAM,IAAW,EAAI,OAAO,IAAmB,MAAM;AAErD,UADK,IACE,EACL,GACA,GACA,CAAC;IAAE,OAAO;IAAkB,YAAY;IAAU,CAAC,CACpD,GALqB,QAAQ,QAAQ,EAAY;IAMlD,CACH,CAAC,KAAK,EAAW;IACjB;EACD;EACA;EACA;EACA;EACA;EACD,CAAC,EAGA,kBAAC,OAAD;EAAK,WAAW,EAAO;YAAvB,CACG,KACC,kBAAC,GAAD;GAAO,WAAW,EAAO;aAAzB;IACG,KACC,kBAAC,GAAD;KACE,SAAQ;KACR,WAAW,EAAO;eAEjB;KACU,CAAA;IAEd,KACC,kBAAC,GAAD;KACE,SAAQ;KACR,WAAU;KACV,WAAW,EAAO;eAEjB;KACU,CAAA;IAEd,KACC,kBAAC,GAAD;KACE,SAAQ;KACR,WAAW,EAAO;KAClB,GAAI;eAEH;KACM,CAAA;IAEL;MAEV,kBAAC,OAAD;GAAK,WAAW,EAAO;aACpB,EAAS,KAAK,GAAK,MAAU;IAC5B,IAAM,IAAW,EAAI,OAAO,MAAqB,IAC3C,IAAW,EAAI,OAAO,MAAqB,KAAA,GAC3C,IAAS,EAAQ,IACjB,IAAY,EAAI,OAAO,MAAsB;AACnD,WACE,kBAAC,KAAD;KAAmB,WAAW,EAAO;KAAS,MAAM;eAClD,kBAAC,OAAD;MAAK,WAAW,EAAO;gBAAvB,CACE,kBAAC,OAAD;OAAK,WAAW,EAAO;iBAAvB,CACE,kBAAC,OAAD;QACE,WAAW,EAAO;QAClB,OAAO,IAAW,EAAE,iBAAiB,GAAU,GAAG,KAAA;kBAElD,kBAAC,GAAD;SACE,SAAS;SACT,cAAc,EAAI,OAAO;SACzB,KAAK,EAAI,OAAO,MAAqB;SACrC,OAAO;UAAE,OAAO;UAAI,QAAQ;UAAI;SAChC,CAAA;QACE,CAAA,EACN,kBAAC,OAAD;QAAK,WAAW,EAAO;kBAAvB,CACE,kBAAC,GAAD;SAAY,WAAW,EAAO;mBAC3B;SACU,CAAA,EACZ,KACC,kBAAC,OAAD;SAAK,WAAW,EAAO;mBAAY;SAAgB,CAAA,CAEjD;UACF;UACL,KACC,kBAAC,OAAD;OAAK,WAAW,EAAO;iBAAvB,CACE,kBAAC,QAAD;QAAM,WAAW,EAAO;kBAAa;QAAW,CAAA,EAChD,kBAAC,GAAD,EAAkB,WAAW,EAAO,aAAe,CAAA,CAC/C;SAEJ;;KACJ,EA9BI,EAAI,MA8BR;KAEN;GACE,CAAA,CACF"}

package/dist/components/DataExplorer/DataExplorer.module.js

@@ -0,0 +1,22 @@
+import './DataExplorer.css';var e = {
+	dataExplorerTitle: "_dataExplorerTitle_q328i_1",
+	dataExplorerSubtitle: "_dataExplorerSubtitle_q328i_8",
+	dataExplorerButton: "_dataExplorerButton_q328i_12",
+	dataExplorerTextContainer: "_dataExplorerTextContainer_q328i_16",
+	dataExplorerContainer: "_dataExplorerContainer_q328i_22",
+	dataContainer: "_dataContainer_q328i_30",
+	dataRowTitle: "_dataRowTitle_q328i_40",
+	dataRowInner: "_dataRowInner_q328i_51",
+	dataRow: "_dataRow_q328i_40",
+	viewCta: "_viewCta_q328i_80",
+	dataRowLeft: "_dataRowLeft_q328i_85",
+	iconContainer: "_iconContainer_q328i_93",
+	dataRowNamePill: "_dataRowNamePill_q328i_103",
+	fileCount: "_fileCount_q328i_111",
+	viewCtaText: "_viewCtaText_q328i_144",
+	viewCtaIcon: "_viewCtaIcon_q328i_151"
+};
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=DataExplorer.module.js.map

package/dist/components/DataExplorer/DataExplorer.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataExplorer.module.js","names":[],"sources":["../../../src/components/DataExplorer/DataExplorer.module.scss"],"sourcesContent":[".dataExplorerTitle:global(.MuiTypography-root) {\n  color: var(--data-explorer-title-color, var(--synapse-primary-action-color));\n  font-size: 36px;\n  line-height: 40px; /* 111.111% */\n  margin-bottom: 10px;\n}\n\n.dataExplorerSubtitle:global(.MuiTypography-root) {\n  line-height: 140%;\n}\n\n.dataExplorerButton {\n  width: fit-content;\n}\n\n.dataExplorerTextContainer {\n  gap: 16px;\n  flex: 0 0 30%;\n  max-width: 30%;\n}\n\n.dataExplorerContainer {\n  display: flex;\n  padding: 40px 0;\n  align-items: flex-start;\n  gap: 60px;\n  flex: 1 0 0;\n}\n\n.dataContainer {\n  display: inline-grid;\n  row-gap: 8px;\n  column-gap: 8px;\n  flex: 1 1 60%;\n  min-width: 0;\n  grid-template-rows: repeat(9, fit-content(100%));\n  grid-template-columns: repeat(2, minmax(0, 1fr));\n}\n\n.dataRowTitle {\n  color: var(--synapse-primary-action-color, #4d558d);\n  font-size: 19.8px;\n  font-weight: 400;\n  line-height: 26.4px;\n  flex: 0 1 auto;\n  min-width: 0;\n  overflow-wrap: break-word;\n  word-break: break-word;\n}\n\n.dataRowInner {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  flex: 1;\n  min-width: 0;\n}\n\n.dataRow {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 8.8px 26.4px;\n  min-height: 66.6px;\n  gap: 17.6px;\n  justify-self: stretch;\n  position: relative;\n  border-radius: 3.3px;\n  border: 1px solid transparent;\n  text-decoration: none !important;\n  transition: background-color 200ms ease, border-color 200ms ease,\n    box-shadow 200ms ease, transform 200ms ease;\n\n  &:hover {\n    background-color: #fff;\n    border-color: #e1e1e1;\n    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1);\n    transform: scale(1.1);\n    z-index: 1;\n    .viewCta {\n      opacity: 1;\n      pointer-events: auto;\n    }\n  }\n}\n\n.dataRowLeft {\n  display: inline-flex;\n  align-items: center;\n  gap: 16px;\n  min-width: 0;\n  flex: 1;\n}\n\n.iconContainer {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 49px;\n  height: 49px;\n  border-radius: 50%;\n  flex-shrink: 0;\n}\n\n.dataRowNamePill {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  flex: 1 1 0;\n  min-width: 0;\n}\n\n.fileCount {\n  display: flex;\n  padding: 4px 8px;\n  justify-content: center;\n  align-items: center;\n  gap: 10px;\n  border-radius: 80px;\n  border: 1px solid #d8d5e0;\n  color: #787090;\n  font-size: 14px;\n  font-weight: 400;\n  line-height: 24px; /* 171.429% */\n  flex-shrink: 0;\n}\n\n.viewCta {\n  position: absolute;\n  right: 0;\n  top: 0;\n  bottom: 0;\n  display: inline-flex;\n  align-items: center;\n  padding-right: 26.4px;\n  padding-left: 40px;\n  gap: 4px;\n  opacity: 0;\n  white-space: nowrap;\n  color: var(--synapse-primary-action-color, #4d558d);\n  background: linear-gradient(to right, transparent, #fff 25%, #fff 100%);\n  border-radius: 0 2px 2px 0;\n  transition: opacity 200ms ease;\n}\n\n.viewCtaText {\n  color: var(--synapse-primary-action-color, #4d558d);\n  font-size: 16px;\n  font-weight: 400;\n  line-height: 26.4px; /* 165% */\n}\n\n.viewCtaIcon:global(.MuiSvgIcon-root) {\n  font-size: 24px;\n  color: var(--synapse-primary-action-color, #5a488f);\n}\n"],"mappings":""}

package/dist/components/DataExplorer/DataExplorer.module.scss

@@ -0,0 +1,156 @@
+.dataExplorerTitle:global(.MuiTypography-root) {
+  color: var(--data-explorer-title-color, var(--synapse-primary-action-color));
+  font-size: 36px;
+  line-height: 40px; /* 111.111% */
+  margin-bottom: 10px;
+}
+
+.dataExplorerSubtitle:global(.MuiTypography-root) {
+  line-height: 140%;
+}
+
+.dataExplorerButton {
+  width: fit-content;
+}
+
+.dataExplorerTextContainer {
+  gap: 16px;
+  flex: 0 0 30%;
+  max-width: 30%;
+}
+
+.dataExplorerContainer {
+  display: flex;
+  padding: 40px 0;
+  align-items: flex-start;
+  gap: 60px;
+  flex: 1 0 0;
+}
+
+.dataContainer {
+  display: inline-grid;
+  row-gap: 8px;
+  column-gap: 8px;
+  flex: 1 1 60%;
+  min-width: 0;
+  grid-template-rows: repeat(9, fit-content(100%));
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.dataRowTitle {
+  color: var(--synapse-primary-action-color, #4d558d);
+  font-size: 19.8px;
+  font-weight: 400;
+  line-height: 26.4px;
+  flex: 0 1 auto;
+  min-width: 0;
+  overflow-wrap: break-word;
+  word-break: break-word;
+}
+
+.dataRowInner {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex: 1;
+  min-width: 0;
+}
+
+.dataRow {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8.8px 26.4px;
+  min-height: 66.6px;
+  gap: 17.6px;
+  justify-self: stretch;
+  position: relative;
+  border-radius: 3.3px;
+  border: 1px solid transparent;
+  text-decoration: none !important;
+  transition: background-color 200ms ease, border-color 200ms ease,
+    box-shadow 200ms ease, transform 200ms ease;
+
+  &:hover {
+    background-color: #fff;
+    border-color: #e1e1e1;
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1);
+    transform: scale(1.1);
+    z-index: 1;
+    .viewCta {
+      opacity: 1;
+      pointer-events: auto;
+    }
+  }
+}
+
+.dataRowLeft {
+  display: inline-flex;
+  align-items: center;
+  gap: 16px;
+  min-width: 0;
+  flex: 1;
+}
+
+.iconContainer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 49px;
+  height: 49px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+
+.dataRowNamePill {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex: 1 1 0;
+  min-width: 0;
+}
+
+.fileCount {
+  display: flex;
+  padding: 4px 8px;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+  border-radius: 80px;
+  border: 1px solid #d8d5e0;
+  color: #787090;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 24px; /* 171.429% */
+  flex-shrink: 0;
+}
+
+.viewCta {
+  position: absolute;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  display: inline-flex;
+  align-items: center;
+  padding-right: 26.4px;
+  padding-left: 40px;
+  gap: 4px;
+  opacity: 0;
+  white-space: nowrap;
+  color: var(--synapse-primary-action-color, #4d558d);
+  background: linear-gradient(to right, transparent, #fff 25%, #fff 100%);
+  border-radius: 0 2px 2px 0;
+  transition: opacity 200ms ease;
+}
+
+.viewCtaText {
+  color: var(--synapse-primary-action-color, #4d558d);
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 26.4px; /* 165% */
+}
+
+.viewCtaIcon:global(.MuiSvgIcon-root) {
+  font-size: 24px;
+  color: var(--synapse-primary-action-color, #5a488f);
+}

package/dist/components/DataGrid/columns/AutocompleteColumn.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AutocompleteColumn.d.ts","sourceRoot":"","sources":["../../../../src/components/DataGrid/columns/AutocompleteColumn.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAA;AAW7C,OAAO,EAEL,SAAS,EACT,MAAM,EACP,MAAM,wCAAwC,CAAA;AAoB/C,MAAM,MAAM,kBAAkB,GAC1B,MAAM,GACN,MAAM,GACN,OAAO,GACP,IAAI,GACJ,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GACvB,KAAK,CAAC,OAAO,CAAC,CAAA;AAElB,MAAM,MAAM,qBAAqB,GAAG,SAAS,GAAG;IAC9C,OAAO,EAAE,kBAAkB,CAAA;IAC3B,UAAU,EAAE,CAAC,KAAK,EAAE,kBAAkB,KAAK,IAAI,CAAA;IAC/C,OAAO,EAAE,kBAAkB,EAAE,CAAA;IAC7B,OAAO,CAAC,EAAE,eAAe,CAAA;IACzB,UAAU,CAAC,EAAE,SAAS,GAAG,IAAI,CAAA;CAC9B,CAAA;AAED,wBAAgB,qBAAqB,CAAC,MAAM,EAAE,GAAG,GAAG,MAAM,CAQzD;AAqBD,wBAAgB,gBAAgB,CAAC,EAC/B,OAAO,EACP,UAAU,EACV,OAAO,EACP,OAAO,EACP,KAAK,EACL,WAAW,EACX,MAAM,EACN,UAAsB,GACvB,EAAE,qBAAqB,2CA8IvB;AAMD,wBAAgB,6BAA6B,CAC3C,SAAS,EAAE,qBAAqB,EAChC,SAAS,EAAE,qBAAqB,WAUjC;AAED,eAAO,MAAM,wBAAwB,6DAGpC,CAAA;AACD,MAAM,MAAM,uBAAuB,GAAG;IACpC,OAAO,EAAE,kBAAkB,EAAE,CAAA;IAC7B,OAAO,CAAC,EAAE,eAAe,CAAA;IACzB,UAAU,EAAE,SAAS,GAAG,IAAI,CAAA;CAC7B,CAAA;AAED,wBAAgB,kBAAkB,CAAC,EACjC,OAAO,EACP,OAAO,EACP,UAAU,GACX,EAAE,uBAAuB,GAAG,OAAO,CAAC,MAAM,CAAC,CAgB3C"}
+{"version":3,"file":"AutocompleteColumn.d.ts","sourceRoot":"","sources":["../../../../src/components/DataGrid/columns/AutocompleteColumn.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAA;AAW7C,OAAO,EAEL,SAAS,EACT,MAAM,EACP,MAAM,wCAAwC,CAAA;AAoB/C,MAAM,MAAM,kBAAkB,GAC1B,MAAM,GACN,MAAM,GACN,OAAO,GACP,IAAI,GACJ,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GACvB,KAAK,CAAC,OAAO,CAAC,CAAA;AAElB,MAAM,MAAM,qBAAqB,GAAG,SAAS,GAAG;IAC9C,OAAO,EAAE,kBAAkB,CAAA;IAC3B,UAAU,EAAE,CAAC,KAAK,EAAE,kBAAkB,KAAK,IAAI,CAAA;IAC/C,OAAO,EAAE,kBAAkB,EAAE,CAAA;IAC7B,OAAO,CAAC,EAAE,eAAe,CAAA;IACzB,UAAU,CAAC,EAAE,SAAS,GAAG,IAAI,CAAA;CAC9B,CAAA;AAED,wBAAgB,qBAAqB,CAAC,MAAM,EAAE,GAAG,GAAG,MAAM,CAQzD;AAqBD,wBAAgB,gBAAgB,CAAC,EAC/B,OAAO,EACP,UAAU,EACV,OAAO,EACP,OAAO,EACP,KAAK,EACL,WAAW,EACX,MAAM,EACN,UAAsB,GACvB,EAAE,qBAAqB,2CAoJvB;AAMD,wBAAgB,6BAA6B,CAC3C,SAAS,EAAE,qBAAqB,EAChC,SAAS,EAAE,qBAAqB,WAUjC;AAED,eAAO,MAAM,wBAAwB,6DAGpC,CAAA;AACD,MAAM,MAAM,uBAAuB,GAAG;IACpC,OAAO,EAAE,kBAAkB,EAAE,CAAA;IAC7B,OAAO,CAAC,EAAE,eAAe,CAAA;IACzB,UAAU,EAAE,SAAS,GAAG,IAAI,CAAA;CAC7B,CAAA;AAED,wBAAgB,kBAAkB,CAAC,EACjC,OAAO,EACP,OAAO,EACP,UAAU,GACX,EAAE,uBAAuB,GAAG,OAAO,CAAC,MAAM,CAAC,CAgB3C"}

package/dist/components/DataGrid/columns/AutocompleteColumn.js

@@ -3,10 +3,10 @@ import { useGridAutocompleteState as t } from "./useGridAutocompleteState.js";
 import { memo as n, useEffect as r, useLayoutEffect as ee, useRef as te, useState as ne } from "react";
 import { isNil as re } from "lodash-es";
 import { Autocomplete as ie, TextField as ae } from "@mui/material";
-import { jsx as i } from "react/jsx-runtime";
-import { c as oe } from "react/compiler-runtime";
+import { jsx as oe } from "react/jsx-runtime";
+import { c as se } from "react/compiler-runtime";
 //#region src/components/DataGrid/columns/AutocompleteColumn.tsx
-var se = {
+var ce = {
 	width: "100%",
 	height: "100%",
 	"& .MuiTextField-root .MuiInputBase-root": {
@@ -21,132 +21,136 @@ var se = {
 	},
 	"& .MuiFormControl-root": { height: "100%" }
 };
-function a(e) {
+function i(e) {
 	return re(e) ? "" : typeof e == "object" ? JSON.stringify(e) : String(e);
 }
-function o(e, t) {
+function le(e, t) {
 	return e == null || typeof e == "string" && e.trim() === "" ? t : e;
 }
-function s(n) {
-	let s = oe(56), { rowData: c, setRowData: l, choices: u, colType: d, focus: f, stopEditing: p, active: m, clearValue: h } = n, g = h === void 0 ? void 0 : h, _ = te(l), v;
-	s[0] === l ? v = s[1] : (v = () => {
-		_.current = l;
-	}, s[0] = l, s[1] = v), ee(v);
-	let y = te(p), b;
-	s[2] === p ? b = s[3] : (b = () => {
-		y.current = p;
-	}, s[2] = p, s[3] = b), ee(b);
-	let x;
-	s[4] === c ? x = s[5] : (x = a(c), s[4] = c, s[5] = x);
-	let S = x, [C, le] = ne(S), w;
-	s[6] !== g || s[7] !== d || s[8] !== C || s[9] !== S ? (w = () => {
-		if (C !== S) {
-			let t = e(C, d);
-			_.current(o(t, g));
+function a(n) {
+	let a = se(61), { rowData: o, setRowData: s, choices: c, colType: l, focus: u, stopEditing: d, active: f, clearValue: de } = n, p = de === void 0 ? void 0 : de, m = te(s), h;
+	a[0] === s ? h = a[1] : (h = () => {
+		m.current = s;
+	}, a[0] = s, a[1] = h), ee(h);
+	let g = te(d), _;
+	a[2] === d ? _ = a[3] : (_ = () => {
+		g.current = d;
+	}, a[2] = d, a[3] = _), ee(_);
+	let v;
+	a[4] === o ? v = a[5] : (v = i(o), a[4] = o, a[5] = v);
+	let y = v, [b, fe] = ne(y), x;
+	a[6] !== p || a[7] !== l || a[8] !== b || a[9] !== y ? (x = () => {
+		if (b !== y) {
+			let t = e(b, l);
+			m.current(le(t, p));
 		}
-	}, s[6] = g, s[7] = d, s[8] = C, s[9] = S, s[10] = w) : w = s[10];
-	let T;
-	s[11] !== m || s[12] !== p || s[13] !== w ? (T = {
-		active: m,
-		stopEditing: p,
-		onDeactivate: w
-	}, s[11] = m, s[12] = p, s[13] = w, s[14] = T) : T = s[14];
-	let { menuIsOpen: E, inputRef: D, handleListboxMouseDown: O, notifyOptionCommitted: k, handleMenuOpen: A, handleClose: j } = t(T), M, N;
-	s[15] !== m || s[16] !== f || s[17] !== S ? (M = () => {
-		!f && !m && le(S);
-	}, N = [
-		f,
-		m,
-		S
-	], s[15] = m, s[16] = f, s[17] = S, s[18] = M, s[19] = N) : (M = s[18], N = s[19]), r(M, N);
-	let P;
-	s[20] === c ? P = s[21] : (P = !re(c) && c !== "", s[20] = c, s[21] = P);
-	let ue = P, F = f ? void 0 : "none", I;
-	s[22] === F ? I = s[23] : (I = {
+	}, a[6] = p, a[7] = l, a[8] = b, a[9] = y, a[10] = x) : x = a[10];
+	let S;
+	a[11] !== f || a[12] !== u || a[13] !== d || a[14] !== x ? (S = {
+		active: f,
+		focus: u,
+		stopEditing: d,
+		onDeactivate: x
+	}, a[11] = f, a[12] = u, a[13] = d, a[14] = x, a[15] = S) : S = a[15];
+	let { menuIsOpen: C, inputRef: w, handleListboxMouseDown: T, notifyOptionCommitted: E, handleMenuOpen: D, handleClose: O, handlePopupIndicatorMouseDown: k } = t(S), A, j;
+	a[16] !== u || a[17] !== y ? (A = () => {
+		u || fe(y);
+	}, j = [u, y], a[16] = u, a[17] = y, a[18] = A, a[19] = j) : (A = a[18], j = a[19]), r(A, j);
+	let M;
+	a[20] === o ? M = a[21] : (M = !re(o) && o !== "", a[20] = o, a[21] = M);
+	let pe = M, N = u ? void 0 : "none", P;
+	a[22] === N ? P = a[23] : (P = {
 		padding: "0 10px",
 		backgroundColor: "inherit",
-		pointerEvents: F
-	}, s[22] = F, s[23] = I);
-	let L = m ? "visible" : "hidden", R;
-	s[24] === L ? R = s[25] : (R = {
-		visibility: L,
+		pointerEvents: N
+	}, a[22] = N, a[23] = P);
+	let F = f ? "visible" : "hidden", I;
+	a[24] === F ? I = a[25] : (I = {
+		visibility: F,
 		pointerEvents: "auto"
-	}, s[24] = L, s[25] = R);
-	let z = m ? "visible" : "hidden", B;
-	s[26] === z ? B = s[27] : (B = {
-		visibility: z,
+	}, a[24] = F, a[25] = I);
+	let L = f ? "visible" : "hidden", R;
+	a[26] === L ? R = a[27] : (R = {
+		visibility: L,
 		pointerEvents: "auto"
-	}, s[26] = z, s[27] = B);
-	let V, H;
-	s[28] === Symbol.for("react.memo_cache_sentinel") ? (V = { visibility: "visible" }, H = { visibility: "visible" }, s[28] = V, s[29] = H) : (V = s[28], H = s[29]);
-	let U;
-	s[30] !== I || s[31] !== R || s[32] !== B ? (U = {
-		...se,
-		"& .MuiAutocomplete-inputRoot": I,
-		"& .MuiAutocomplete-clearIndicator": R,
-		"& .MuiAutocomplete-popupIndicator": B,
-		"&:hover .MuiAutocomplete-clearIndicator": V,
-		"&:hover .MuiAutocomplete-popupIndicator": H
-	}, s[30] = I, s[31] = R, s[32] = B, s[33] = U) : U = s[33];
-	let W = U, G;
-	s[34] === Symbol.for("react.memo_cache_sentinel") ? (G = (e) => {
-		e.key === "Tab" ? (e.preventDefault(), y.current({ nextRow: !1 })) : e.key === "Enter" && (e.preventDefault(), y.current({ nextRow: !0 }));
-	}, s[34] = G) : G = s[34];
-	let de = G, K;
-	s[35] !== g || s[36] !== d || s[37] !== k ? (K = (t, n, r) => {
-		if (k(), r === "clear") _.current(g);
+	}, a[26] = L, a[27] = R);
+	let z, B;
+	a[28] === Symbol.for("react.memo_cache_sentinel") ? (z = { visibility: "visible" }, B = { visibility: "visible" }, a[28] = z, a[29] = B) : (z = a[28], B = a[29]);
+	let V;
+	a[30] !== P || a[31] !== I || a[32] !== R ? (V = {
+		...ce,
+		"& .MuiAutocomplete-inputRoot": P,
+		"& .MuiAutocomplete-clearIndicator": I,
+		"& .MuiAutocomplete-popupIndicator": R,
+		"&:hover .MuiAutocomplete-clearIndicator": z,
+		"&:hover .MuiAutocomplete-popupIndicator": B
+	}, a[30] = P, a[31] = I, a[32] = R, a[33] = V) : V = a[33];
+	let H = V, U;
+	a[34] === Symbol.for("react.memo_cache_sentinel") ? (U = (e) => {
+		e.key === "Tab" ? (e.preventDefault(), g.current({ nextRow: !1 })) : e.key === "Enter" && (e.preventDefault(), g.current({ nextRow: !0 }));
+	}, a[34] = U) : U = a[34];
+	let me = U, W;
+	a[35] !== p || a[36] !== l || a[37] !== E ? (W = (t, n, r) => {
+		if (E(), r === "clear") m.current(p);
 		else if (r === "createOption") {
-			let t = e(n, d);
-			_.current(o(t, g));
-		} else _.current(n);
+			let t = e(n, l);
+			m.current(le(t, p));
+		} else m.current(n);
 		setTimeout(() => {
-			y.current({ nextRow: !1 });
+			g.current({ nextRow: !1 });
 		}, 0);
-	}, s[35] = g, s[36] = d, s[37] = k, s[38] = K) : K = s[38];
-	let q = K, J = !ue, Y = c, X;
-	s[39] === Symbol.for("react.memo_cache_sentinel") ? (X = (e, t) => {
-		le(t);
-	}, s[39] = X) : X = s[39];
+	}, a[35] = p, a[36] = l, a[37] = E, a[38] = W) : W = a[38];
+	let G = W, K = !pe, q = o, J;
+	a[39] === Symbol.for("react.memo_cache_sentinel") ? (J = (e, t) => {
+		fe(t);
+	}, a[39] = J) : J = a[39];
+	let Y;
+	a[40] === T ? Y = a[41] : (Y = { onMouseDown: T }, a[40] = T, a[41] = Y);
+	let X;
+	a[42] === k ? X = a[43] : (X = { onMouseDown: k }, a[42] = k, a[43] = X);
 	let Z;
-	s[40] === O ? Z = s[41] : (Z = { listbox: { onMouseDown: O } }, s[40] = O, s[41] = Z);
+	a[44] !== Y || a[45] !== X ? (Z = {
+		listbox: Y,
+		popupIndicator: X
+	}, a[44] = Y, a[45] = X, a[46] = Z) : Z = a[46];
 	let Q;
-	s[42] === D ? Q = s[43] : (Q = (e) => /* @__PURE__ */ i(ae, {
+	a[47] === w ? Q = a[48] : (Q = (e) => /* @__PURE__ */ oe(ae, {
 		...e,
-		inputRef: D
-	}), s[42] = D, s[43] = Q);
+		inputRef: w
+	}), a[47] = w, a[48] = Q);
 	let $;
-	return s[44] !== W || s[45] !== u || s[46] !== q || s[47] !== j || s[48] !== A || s[49] !== C || s[50] !== E || s[51] !== J || s[52] !== Y || s[53] !== Z || s[54] !== Q ? ($ = /* @__PURE__ */ i(ie, {
-		open: E,
-		onOpen: A,
+	return a[49] !== H || a[50] !== c || a[51] !== G || a[52] !== O || a[53] !== D || a[54] !== b || a[55] !== C || a[56] !== K || a[57] !== q || a[58] !== Z || a[59] !== Q ? ($ = /* @__PURE__ */ oe(ie, {
+		open: C,
+		onOpen: D,
 		forcePopupIcon: !0,
-		disableClearable: J,
+		disableClearable: K,
 		freeSolo: !0,
 		disablePortal: !1,
-		options: u,
+		options: c,
 		selectOnFocus: !0,
-		getOptionLabel: ce,
-		value: Y,
-		inputValue: C,
-		onInputChange: X,
-		onKeyDown: de,
-		onClose: j,
-		onChange: q,
+		getOptionLabel: ue,
+		value: q,
+		inputValue: b,
+		onInputChange: J,
+		onKeyDown: me,
+		onClose: O,
+		onChange: G,
 		blurOnSelect: !0,
 		slotProps: Z,
 		renderInput: Q,
-		sx: W
-	}), s[44] = W, s[45] = u, s[46] = q, s[47] = j, s[48] = A, s[49] = C, s[50] = E, s[51] = J, s[52] = Y, s[53] = Z, s[54] = Q, s[55] = $) : $ = s[55], $;
+		sx: H
+	}), a[49] = H, a[50] = c, a[51] = G, a[52] = O, a[53] = D, a[54] = b, a[55] = C, a[56] = K, a[57] = q, a[58] = Z, a[59] = Q, a[60] = $) : $ = a[60], $;
 }
-function ce(e) {
-	return a(e);
+function ue(e) {
+	return i(e);
 }
-function c(e, t) {
+function o(e, t) {
 	return e.rowData === t.rowData && e.choices === t.choices && e.colType === t.colType && e.focus === t.focus && e.active === t.active && e.clearValue === t.clearValue;
 }
-var l = n(s, c);
-function u({ choices: e, colType: t, clearValue: n }) {
+var s = n(a, o);
+function c({ choices: e, colType: t, clearValue: n }) {
 	return {
-		component: ((r) => /* @__PURE__ */ i(l, {
+		component: ((r) => /* @__PURE__ */ oe(s, {
 			...r,
 			choices: e,
 			colType: t,
@@ -159,6 +163,6 @@ function u({ choices: e, colType: t, clearValue: n }) {
 	};
 }
 //#endregion
-export { s as AutocompleteCell, l as MemoizedAutocompleteCell, c as areAutocompleteCellPropsEqual, u as autocompleteColumn, a as castCellValueToString };
+export { a as AutocompleteCell, s as MemoizedAutocompleteCell, o as areAutocompleteCellPropsEqual, c as autocompleteColumn, i as castCellValueToString };
 
 //# sourceMappingURL=AutocompleteColumn.js.map