synapse-react-client 4.0.18 → 4.0.20

package/dist/components/GoogleAnalytics/GoogleAnalytics.js.map

@@ -1 +1 @@
-{"version":3,"file":"GoogleAnalytics.js","names":[],"sources":["../../../src/components/GoogleAnalytics/GoogleAnalytics.tsx"],"sourcesContent":["import { useGoogleAnalytics } from '@/utils/hooks'\n\nexport type GoogleAnalyticsProps = {\n  measurementId?: string\n}\n/**\n * GoogleAnalytics is a component wrapper for the useGoogleAnalytics() hook.\n * This is exported for use in the Synapse.org GWT codebase.\n * @param props\n */\nexport function GoogleAnalytics(props: GoogleAnalyticsProps) {\n  const { measurementId } = props\n  useGoogleAnalytics(measurementId)\n  return <></>\n}\nexport default GoogleAnalytics\n"],"mappings":";;;;AAUA,SAAgB,EAAgB,GAA6B;CAC3D,IAAM,EAAE,qBAAkB;AAE1B,QADA,EAAmB,EAAc,EAC1B,kBAAA,GAAA,EAAK,CAAA"}
+{"version":3,"file":"GoogleAnalytics.js","names":[],"sources":["../../../src/components/GoogleAnalytics/GoogleAnalytics.tsx"],"sourcesContent":["import { useGoogleAnalytics } from '@/utils/hooks'\n\nexport type GoogleAnalyticsProps = {\n  measurementId?: string\n}\n/**\n * GoogleAnalytics is a component wrapper for the useGoogleAnalytics() hook.\n * This is exported for use in the Synapse.org GWT codebase.\n * @param props\n */\nexport function GoogleAnalytics(props: GoogleAnalyticsProps) {\n  const { measurementId } = props\n  useGoogleAnalytics(measurementId)\n  return <></>\n}\nexport default GoogleAnalytics\n"],"mappings":";;;;AAUA,SAAgB,EAAgB,GAA6B;CAC3D,IAAM,EAAE,qBAAkB;CAE1B,OADA,EAAmB,CAAa,GACzB,kBAAA,GAAA,CAAI,CAAA;AACb"}

package/dist/components/GoogleMap/GoogleMap.js.map

@@ -1 +1 @@
-{"version":3,"file":"GoogleMap.js","names":[],"sources":["../../../src/components/GoogleMap/GoogleMap.tsx"],"sourcesContent":["import {\n  GeoData,\n  getAllSynapseUserGeoData,\n  getGoogleMapsApiKey,\n  getSynapseTeamGeoData,\n} from '@/synapse-client'\nimport { GoogleMap, LoadScript } from '@react-google-maps/api'\nimport { useQuery } from '@tanstack/react-query'\nimport { useCallback, useMemo, useState } from 'react'\nimport { SynapseSpinner } from '../LoadingScreen/LoadingScreen'\nimport { SynapseUserMarker } from './SynapseUserMarker'\n\n// Load the google maps types -- note that the script is dynamically loaded, so the module will not be immediately available\n/// <reference types=\"google.maps\" />\n\nexport type MapProps = {\n  /** If selected, then the map will only show locations for users in a particular team. */\n  teamId?: string\n  /** Override the Google Maps API key used by the component. Useful for Storybook. */\n  apiKeyOverride?: string\n}\n\n/**\n * Returns a map component showing the locations of Synapse users. Note that this component must be wrapped in a container with defined size, or else the map will not appear.\n * Note that the geolocation data is updated via a cron job, so the map will not update in real time.\n * @param props\n * @returns\n */\nfunction Map(props: MapProps) {\n  const { teamId, apiKeyOverride } = props\n\n  const { data: apiKey } = useQuery({\n    queryKey: ['googleMapsApiKey'],\n    queryFn: getGoogleMapsApiKey,\n    throwOnError: true,\n  })\n\n  /** Tracks the currently selected marker on click */\n  const [currentOpenGeoData, setCurrentOpenGeoData] = useState<GeoData | null>(\n    null,\n  )\n\n  const { data: geoData, isLoading: isLoadingGeoData } = useQuery({\n    queryKey: ['synapseGeoData', teamId],\n\n    queryFn: () => {\n      if (teamId) {\n        return getSynapseTeamGeoData(teamId)\n      } else {\n        return getAllSynapseUserGeoData()\n      }\n    },\n\n    throwOnError: true,\n  })\n\n  const onLoad = useCallback(\n    function callback(map: google.maps.Map) {\n      if (geoData) {\n        const bounds = new google.maps.LatLngBounds()\n        geoData.forEach(gd => {\n          bounds.extend({ lat: gd.latLng[0], lng: gd.latLng[1] })\n        })\n        map.fitBounds(bounds)\n      }\n    },\n    [geoData],\n  )\n\n  const initialOptions = useMemo(\n    () => ({\n      zoom: 1,\n      scrollwheel: true,\n      mapTypeControl: false,\n      streetViewControl: false,\n      draggable: true,\n      maxZoom: 12,\n      controlSize: 22,\n    }),\n    [],\n  )\n  if (!(apiKeyOverride || apiKey) || isLoadingGeoData) {\n    return <SynapseSpinner />\n  }\n\n  return (\n    <LoadScript\n      googleMapsApiKey={(apiKeyOverride || apiKey)!}\n      loadingElement={<SynapseSpinner />}\n    >\n      <GoogleMap\n        mapContainerStyle={{ height: '100%', width: '100%' }}\n        onLoad={onLoad}\n        options={initialOptions}\n      >\n        {geoData!.map(gd => {\n          return (\n            <SynapseUserMarker\n              key={gd.location}\n              geoData={gd}\n              onClick={() => setCurrentOpenGeoData(gd)}\n              onInfoWindowCloseClick={() => setCurrentOpenGeoData(null)}\n              showInfoWindow={gd === currentOpenGeoData}\n            />\n          )\n        })}\n      </GoogleMap>\n    </LoadScript>\n  )\n}\n\nexport default Map\n"],"mappings":";;;;;;;;;AA4BA,SAAS,EAAI,GAAiB;CAC5B,IAAM,EAAE,WAAQ,sBAAmB,GAE7B,EAAE,MAAM,MAAW,EAAS;EAChC,UAAU,CAAC,mBAAmB;EAC9B,SAAS;EACT,cAAc;EACf,CAAC,EAGI,CAAC,GAAoB,KAAyB,EAClD,KACD,EAEK,EAAE,MAAM,GAAS,WAAW,MAAqB,EAAS;EAC9D,UAAU,CAAC,kBAAkB,EAAO;EAEpC,eACM,IACK,EAAsB,EAAO,GAE7B,GAA0B;EAIrC,cAAc;EACf,CAAC,EAEI,IAAS,EACb,SAAkB,GAAsB;AACtC,MAAI,GAAS;GACX,IAAM,IAAS,IAAI,OAAO,KAAK,cAAc;AAI7C,GAHA,EAAQ,SAAQ,MAAM;AACpB,MAAO,OAAO;KAAE,KAAK,EAAG,OAAO;KAAI,KAAK,EAAG,OAAO;KAAI,CAAC;KACvD,EACF,EAAI,UAAU,EAAO;;IAGzB,CAAC,EAAQ,CACV,EAEK,IAAiB,SACd;EACL,MAAM;EACN,aAAa;EACb,gBAAgB;EAChB,mBAAmB;EACnB,WAAW;EACX,SAAS;EACT,aAAa;EACd,GACD,EAAE,CACH;AAKD,QAJI,EAAE,KAAkB,MAAW,IAC1B,kBAAC,GAAD,EAAkB,CAAA,GAIzB,kBAAC,GAAD;EACE,kBAAmB,KAAkB;EACrC,gBAAgB,kBAAC,GAAD,EAAkB,CAAA;YAElC,kBAAC,GAAD;GACE,mBAAmB;IAAE,QAAQ;IAAQ,OAAO;IAAQ;GAC5C;GACR,SAAS;aAER,EAAS,KAAI,MAEV,kBAAC,GAAD;IAEE,SAAS;IACT,eAAe,EAAsB,EAAG;IACxC,8BAA8B,EAAsB,KAAK;IACzD,gBAAgB,MAAO;IACvB,EALK,EAAG,SAKR,CAEJ;GACQ,CAAA;EACD,CAAA"}
+{"version":3,"file":"GoogleMap.js","names":[],"sources":["../../../src/components/GoogleMap/GoogleMap.tsx"],"sourcesContent":["import {\n  GeoData,\n  getAllSynapseUserGeoData,\n  getGoogleMapsApiKey,\n  getSynapseTeamGeoData,\n} from '@/synapse-client'\nimport { GoogleMap, LoadScript } from '@react-google-maps/api'\nimport { useQuery } from '@tanstack/react-query'\nimport { useCallback, useMemo, useState } from 'react'\nimport { SynapseSpinner } from '../LoadingScreen/LoadingScreen'\nimport { SynapseUserMarker } from './SynapseUserMarker'\n\n// Load the google maps types -- note that the script is dynamically loaded, so the module will not be immediately available\n/// <reference types=\"google.maps\" />\n\nexport type MapProps = {\n  /** If selected, then the map will only show locations for users in a particular team. */\n  teamId?: string\n  /** Override the Google Maps API key used by the component. Useful for Storybook. */\n  apiKeyOverride?: string\n}\n\n/**\n * Returns a map component showing the locations of Synapse users. Note that this component must be wrapped in a container with defined size, or else the map will not appear.\n * Note that the geolocation data is updated via a cron job, so the map will not update in real time.\n * @param props\n * @returns\n */\nfunction Map(props: MapProps) {\n  const { teamId, apiKeyOverride } = props\n\n  const { data: apiKey } = useQuery({\n    queryKey: ['googleMapsApiKey'],\n    queryFn: getGoogleMapsApiKey,\n    throwOnError: true,\n  })\n\n  /** Tracks the currently selected marker on click */\n  const [currentOpenGeoData, setCurrentOpenGeoData] = useState<GeoData | null>(\n    null,\n  )\n\n  const { data: geoData, isLoading: isLoadingGeoData } = useQuery({\n    queryKey: ['synapseGeoData', teamId],\n\n    queryFn: () => {\n      if (teamId) {\n        return getSynapseTeamGeoData(teamId)\n      } else {\n        return getAllSynapseUserGeoData()\n      }\n    },\n\n    throwOnError: true,\n  })\n\n  const onLoad = useCallback(\n    function callback(map: google.maps.Map) {\n      if (geoData) {\n        const bounds = new google.maps.LatLngBounds()\n        geoData.forEach(gd => {\n          bounds.extend({ lat: gd.latLng[0], lng: gd.latLng[1] })\n        })\n        map.fitBounds(bounds)\n      }\n    },\n    [geoData],\n  )\n\n  const initialOptions = useMemo(\n    () => ({\n      zoom: 1,\n      scrollwheel: true,\n      mapTypeControl: false,\n      streetViewControl: false,\n      draggable: true,\n      maxZoom: 12,\n      controlSize: 22,\n    }),\n    [],\n  )\n  if (!(apiKeyOverride || apiKey) || isLoadingGeoData) {\n    return <SynapseSpinner />\n  }\n\n  return (\n    <LoadScript\n      googleMapsApiKey={(apiKeyOverride || apiKey)!}\n      loadingElement={<SynapseSpinner />}\n    >\n      <GoogleMap\n        mapContainerStyle={{ height: '100%', width: '100%' }}\n        onLoad={onLoad}\n        options={initialOptions}\n      >\n        {geoData!.map(gd => {\n          return (\n            <SynapseUserMarker\n              key={gd.location}\n              geoData={gd}\n              onClick={() => setCurrentOpenGeoData(gd)}\n              onInfoWindowCloseClick={() => setCurrentOpenGeoData(null)}\n              showInfoWindow={gd === currentOpenGeoData}\n            />\n          )\n        })}\n      </GoogleMap>\n    </LoadScript>\n  )\n}\n\nexport default Map\n"],"mappings":";;;;;;;;;AA4BA,SAAS,EAAI,GAAiB;CAC5B,IAAM,EAAE,WAAQ,sBAAmB,GAE7B,EAAE,MAAM,MAAW,EAAS;EAChC,UAAU,CAAC,kBAAkB;EAC7B,SAAS;EACT,cAAc;CAChB,CAAC,GAGK,CAAC,GAAoB,KAAyB,EAClD,IACF,GAEM,EAAE,MAAM,GAAS,WAAW,MAAqB,EAAS;EAC9D,UAAU,CAAC,kBAAkB,CAAM;EAEnC,eACM,IACK,EAAsB,CAAM,IAE5B,EAAyB;EAIpC,cAAc;CAChB,CAAC,GAEK,IAAS,EACb,SAAkB,GAAsB;EACtC,IAAI,GAAS;GACX,IAAM,IAAS,IAAI,OAAO,KAAK,aAAa;GAI5C,AAHA,EAAQ,SAAQ,MAAM;IACpB,EAAO,OAAO;KAAE,KAAK,EAAG,OAAO;KAAI,KAAK,EAAG,OAAO;IAAG,CAAC;GACxD,CAAC,GACD,EAAI,UAAU,CAAM;EACtB;CACF,GACA,CAAC,CAAO,CACV,GAEM,IAAiB,SACd;EACL,MAAM;EACN,aAAa;EACb,gBAAgB;EAChB,mBAAmB;EACnB,WAAW;EACX,SAAS;EACT,aAAa;CACf,IACA,CAAC,CACH;CAKA,OAJI,EAAE,KAAkB,MAAW,IAC1B,kBAAC,GAAD,CAAiB,CAAA,IAIxB,kBAAC,GAAD;EACE,kBAAmB,KAAkB;EACrC,gBAAgB,kBAAC,GAAD,CAAiB,CAAA;YAEjC,kBAAC,GAAD;GACE,mBAAmB;IAAE,QAAQ;IAAQ,OAAO;GAAO;GAC3C;GACR,SAAS;aAER,EAAS,KAAI,MAEV,kBAAC,GAAD;IAEE,SAAS;IACT,eAAe,EAAsB,CAAE;IACvC,8BAA8B,EAAsB,IAAI;IACxD,gBAAgB,MAAO;GACxB,GALM,EAAG,QAKT,CAEJ;EACQ,CAAA;CACD,CAAA;AAEhB"}

package/dist/components/GoogleMap/SynapseUserMarker.js.map

@@ -1 +1 @@
-{"version":3,"file":"SynapseUserMarker.js","names":[],"sources":["../../../src/components/GoogleMap/SynapseUserMarker.tsx"],"sourcesContent":["import { GeoData } from '@/synapse-client'\nimport { Divider, Typography } from '@mui/material'\nimport { InfoWindow, Marker } from '@react-google-maps/api'\nimport { Fragment, useMemo } from 'react'\nimport { UserBadge } from '../UserCard/UserBadge'\n\nconst MAP_MARKER_IMAGE_URL =\n  'https://s3.amazonaws.com/static.synapse.org/images/synapse-map-marker.png'\n\ntype SynapseUserMarkerProps = {\n  /** The location and users that this point represents */\n  geoData: GeoData\n  /** Whether to show the list of users in a pop-up modal */\n  showInfoWindow: boolean\n  /** Invoked when the marker is clicked */\n  onClick: () => void\n  /** Invoked when the InfoWindow close button is clicked */\n  onInfoWindowCloseClick: () => void\n}\n\n/**\n * A Google Maps marker that represents a particular location for one or more Synapse users.\n * @param props\n * @returns\n */\nexport function SynapseUserMarker(props: SynapseUserMarkerProps) {\n  const { geoData, showInfoWindow, onClick, onInfoWindowCloseClick } = props\n  const position = useMemo(\n    () => ({\n      lat: geoData.latLng[0],\n      lng: geoData.latLng[1],\n    }),\n    [geoData.latLng],\n  )\n\n  const options = useMemo(\n    () => ({\n      icon: {\n        url: MAP_MARKER_IMAGE_URL,\n        size: new google.maps.Size(20, 32),\n        origin: new google.maps.Point(0, 0),\n        anchor: new google.maps.Point(0, 32),\n      },\n    }),\n    [],\n  )\n  return (\n    <Marker onClick={onClick} position={position} options={options}>\n      {showInfoWindow && (\n        <InfoWindow onCloseClick={onInfoWindowCloseClick}>\n          <>\n            <Typography variant=\"body1\" component={'span'}>\n              {geoData.location}\n            </Typography>\n            <Divider />\n            {geoData.userIds.map(id => (\n              <Fragment key={id}>\n                <br />\n                <UserBadge userId={id} openLinkInNewTab={true} />\n              </Fragment>\n            ))}\n          </>\n        </InfoWindow>\n      )}\n    </Marker>\n  )\n}\n\nexport default SynapseUserMarker\n"],"mappings":";;;;;;AAMA,IAAM,IACJ;AAkBF,SAAgB,EAAkB,GAA+B;CAC/D,IAAM,EAAE,YAAS,mBAAgB,YAAS,8BAA2B;AAoBrE,QACE,kBAAC,GAAD;EAAiB;EAAmB,UApBrB,SACR;GACL,KAAK,EAAQ,OAAO;GACpB,KAAK,EAAQ,OAAO;GACrB,GACD,CAAC,EAAQ,OAAO,CAeoB;EAAmB,SAZzC,SACP,EACL,MAAM;GACJ,KAAK;GACL,MAAM,IAAI,OAAO,KAAK,KAAK,IAAI,GAAG;GAClC,QAAQ,IAAI,OAAO,KAAK,MAAM,GAAG,EAAE;GACnC,QAAQ,IAAI,OAAO,KAAK,MAAM,GAAG,GAAG;GACrC,EACF,GACD,EAAE,CAGqD;YACpD,KACC,kBAAC,GAAD;GAAY,cAAc;aACxB,kBAAA,GAAA,EAAA,UAAA;IACE,kBAAC,GAAD;KAAY,SAAQ;KAAQ,WAAW;eACpC,EAAQ;KACE,CAAA;IACb,kBAAC,GAAD,EAAW,CAAA;IACV,EAAQ,QAAQ,KAAI,MACnB,kBAAC,GAAD,EAAA,UAAA,CACE,kBAAC,MAAD,EAAM,CAAA,EACN,kBAAC,GAAD;KAAW,QAAQ;KAAI,kBAAkB;KAAQ,CAAA,CACxC,EAAA,EAHI,EAGJ,CACX;IACD,EAAA,CAAA;GACQ,CAAA;EAER,CAAA"}
+{"version":3,"file":"SynapseUserMarker.js","names":[],"sources":["../../../src/components/GoogleMap/SynapseUserMarker.tsx"],"sourcesContent":["import { GeoData } from '@/synapse-client'\nimport { Divider, Typography } from '@mui/material'\nimport { InfoWindow, Marker } from '@react-google-maps/api'\nimport { Fragment, useMemo } from 'react'\nimport { UserBadge } from '../UserCard/UserBadge'\n\nconst MAP_MARKER_IMAGE_URL =\n  'https://s3.amazonaws.com/static.synapse.org/images/synapse-map-marker.png'\n\ntype SynapseUserMarkerProps = {\n  /** The location and users that this point represents */\n  geoData: GeoData\n  /** Whether to show the list of users in a pop-up modal */\n  showInfoWindow: boolean\n  /** Invoked when the marker is clicked */\n  onClick: () => void\n  /** Invoked when the InfoWindow close button is clicked */\n  onInfoWindowCloseClick: () => void\n}\n\n/**\n * A Google Maps marker that represents a particular location for one or more Synapse users.\n * @param props\n * @returns\n */\nexport function SynapseUserMarker(props: SynapseUserMarkerProps) {\n  const { geoData, showInfoWindow, onClick, onInfoWindowCloseClick } = props\n  const position = useMemo(\n    () => ({\n      lat: geoData.latLng[0],\n      lng: geoData.latLng[1],\n    }),\n    [geoData.latLng],\n  )\n\n  const options = useMemo(\n    () => ({\n      icon: {\n        url: MAP_MARKER_IMAGE_URL,\n        size: new google.maps.Size(20, 32),\n        origin: new google.maps.Point(0, 0),\n        anchor: new google.maps.Point(0, 32),\n      },\n    }),\n    [],\n  )\n  return (\n    <Marker onClick={onClick} position={position} options={options}>\n      {showInfoWindow && (\n        <InfoWindow onCloseClick={onInfoWindowCloseClick}>\n          <>\n            <Typography variant=\"body1\" component={'span'}>\n              {geoData.location}\n            </Typography>\n            <Divider />\n            {geoData.userIds.map(id => (\n              <Fragment key={id}>\n                <br />\n                <UserBadge userId={id} openLinkInNewTab={true} />\n              </Fragment>\n            ))}\n          </>\n        </InfoWindow>\n      )}\n    </Marker>\n  )\n}\n\nexport default SynapseUserMarker\n"],"mappings":";;;;;;AAMA,IAAM,IACJ;AAkBF,SAAgB,EAAkB,GAA+B;CAC/D,IAAM,EAAE,YAAS,mBAAgB,YAAS,8BAA2B;CAoBrE,OACE,kBAAC,GAAD;EAAiB;EAAmB,UApBrB,SACR;GACL,KAAK,EAAQ,OAAO;GACpB,KAAK,EAAQ,OAAO;EACtB,IACA,CAAC,EAAQ,MAAM,CAeqB;EAAmB,SAZzC,SACP,EACL,MAAM;GACJ,KAAK;GACL,MAAM,IAAI,OAAO,KAAK,KAAK,IAAI,EAAE;GACjC,QAAQ,IAAI,OAAO,KAAK,MAAM,GAAG,CAAC;GAClC,QAAQ,IAAI,OAAO,KAAK,MAAM,GAAG,EAAE;EACrC,EACF,IACA,CAAC,CAGsD;YACpD,KACC,kBAAC,GAAD;GAAY,cAAc;aACxB,kBAAA,GAAA,EAAA,UAAA;IACE,kBAAC,GAAD;KAAY,SAAQ;KAAQ,WAAW;eACpC,EAAQ;IACC,CAAA;IACZ,kBAAC,GAAD,CAAU,CAAA;IACT,EAAQ,QAAQ,KAAI,MACnB,kBAAC,GAAD,EAAA,UAAA,CACE,kBAAC,MAAD,CAAK,CAAA,GACL,kBAAC,GAAD;KAAW,QAAQ;KAAI,kBAAkB;IAAO,CAAA,CACxC,EAAA,GAHK,CAGL,CACX;GACD,EAAA,CAAA;EACQ,CAAA;CAER,CAAA;AAEZ"}

package/dist/components/HasAccess/AccessIcon.js

@@ -5,52 +5,52 @@ import { Fragment as n, jsx as r } from "react/jsx-runtime";
 var i = /* @__PURE__ */ function(e) {
 	return e.Accessible = "Accessible", e.AccessibleWithTerms = "AccessibleWithTerms", e.AccessBlockedByRestriction = "AccessBlockedByRestriction", e.AccessBlockedByRestrictionWithPendingRequest = "AccessBlockedByRestrictionWithPendingRequest", e.AccessBlockedByRestrictionWithPendingExternalRequest = "AccessBlockedByRestrictionWithPendingExternalRequest", e.AccessBlockedByRestrictionWithPendingRDCADAPRequest = "AccessBlockedByRestrictionWithPendingRDCADAPRequest", e.AccessBlockedByRestrictionWithRejectedRDCADAPRequest = "AccessBlockedByRestrictionWithRejectedRDCADAPRequest", e.AccessBlockedByACL = "AccessBlockedByACL", e.AccessBlockedToAnonymous = "AccessBlockedToAnonymous", e.AccessibleExternalFileHandle = "AccessibleExternalFileHandle", e;
 }({}), a = {
-	[i.AccessBlockedToAnonymous]: {
+	AccessBlockedToAnonymous: {
 		icon: "accessClosed",
 		color: (e) => e.palette.warning.main,
 		tooltipText: "You must sign in to access this item."
 	},
-	[i.AccessBlockedByRestriction]: {
+	AccessBlockedByRestriction: {
 		icon: "accessClosed",
 		color: (e) => e.palette.warning.main,
 		tooltipText: "You must request access to this restricted item."
 	},
-	[i.AccessBlockedByRestrictionWithPendingRequest]: {
+	AccessBlockedByRestrictionWithPendingRequest: {
 		icon: "accessPending",
 		color: (e) => e.palette.warning.main,
 		tooltipText: "Your access request is pending approval."
 	},
-	[i.AccessBlockedByRestrictionWithPendingExternalRequest]: {
+	AccessBlockedByRestrictionWithPendingExternalRequest: {
 		icon: "accessPendingCloud",
 		color: (e) => e.palette.warning.main,
 		tooltipText: "Your access request is pending approval from an external system."
 	},
-	[i.AccessBlockedByRestrictionWithPendingRDCADAPRequest]: {
+	AccessBlockedByRestrictionWithPendingRDCADAPRequest: {
 		icon: "accessPendingCloud",
 		color: (e) => e.palette.warning.main,
 		tooltipText: "Your access request is pending approval by RDCA-DAP."
 	},
-	[i.AccessBlockedByRestrictionWithRejectedRDCADAPRequest]: {
+	AccessBlockedByRestrictionWithRejectedRDCADAPRequest: {
 		icon: "accessClosed",
 		color: (e) => e.palette.warning.main,
 		tooltipText: "Your access request has been denied by RDCA-DAP."
 	},
-	[i.AccessBlockedByACL]: {
+	AccessBlockedByACL: {
 		icon: "accessClosed",
 		color: (e) => e.palette.warning.main,
 		tooltipText: "You do not have download access for this item."
 	},
-	[i.AccessibleWithTerms]: {
+	AccessibleWithTerms: {
 		icon: "accessOpen",
 		color: (e) => e.palette.success.main,
 		tooltipText: "View Terms"
 	},
-	[i.Accessible]: {
+	Accessible: {
 		icon: "accessOpen",
 		color: (e) => e.palette.success.main,
 		tooltipText: "You have access to this item."
 	},
-	[i.AccessibleExternalFileHandle]: {
+	AccessibleExternalFileHandle: {
 		icon: "linkOff",
 		color: (e) => e.palette.grey[700],
 		tooltipText: "Access may be controlled by an external system."

package/dist/components/HasAccess/AccessIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"AccessIcon.js","names":[],"sources":["../../../src/components/HasAccess/AccessIcon.tsx"],"sourcesContent":["import { SxProps, Theme, useTheme } from '@mui/material'\nimport IconSvg, { IconName } from '../IconSvg/IconSvg'\n\nexport enum RestrictionUiType {\n  Accessible = 'Accessible',\n  AccessibleWithTerms = 'AccessibleWithTerms',\n  AccessBlockedByRestriction = 'AccessBlockedByRestriction',\n  AccessBlockedByRestrictionWithPendingRequest = 'AccessBlockedByRestrictionWithPendingRequest',\n  AccessBlockedByRestrictionWithPendingExternalRequest = 'AccessBlockedByRestrictionWithPendingExternalRequest',\n  AccessBlockedByRestrictionWithPendingRDCADAPRequest = 'AccessBlockedByRestrictionWithPendingRDCADAPRequest',\n  AccessBlockedByRestrictionWithRejectedRDCADAPRequest = 'AccessBlockedByRestrictionWithRejectedRDCADAPRequest',\n  AccessBlockedByACL = 'AccessBlockedByACL',\n  AccessBlockedToAnonymous = 'AccessBlockedToAnonymous',\n  AccessibleExternalFileHandle = 'AccessibleExternalFileHandle',\n}\n\nconst iconConfiguration: Record<\n  RestrictionUiType,\n  { icon: IconName; color: (theme: Theme) => string; tooltipText: string }\n> = {\n  [RestrictionUiType.AccessBlockedToAnonymous]: {\n    icon: 'accessClosed',\n    color: theme => theme.palette.warning.main,\n    tooltipText: 'You must sign in to access this item.',\n  },\n  [RestrictionUiType.AccessBlockedByRestriction]: {\n    icon: 'accessClosed',\n    color: theme => theme.palette.warning.main,\n    tooltipText: 'You must request access to this restricted item.',\n  },\n  [RestrictionUiType.AccessBlockedByRestrictionWithPendingRequest]: {\n    icon: 'accessPending',\n    color: theme => theme.palette.warning.main,\n    tooltipText: 'Your access request is pending approval.',\n  },\n  [RestrictionUiType.AccessBlockedByRestrictionWithPendingExternalRequest]: {\n    icon: 'accessPendingCloud',\n    color: theme => theme.palette.warning.main,\n    tooltipText:\n      'Your access request is pending approval from an external system.',\n  },\n  [RestrictionUiType.AccessBlockedByRestrictionWithPendingRDCADAPRequest]: {\n    icon: 'accessPendingCloud',\n    color: theme => theme.palette.warning.main,\n    tooltipText: 'Your access request is pending approval by RDCA-DAP.',\n  },\n  [RestrictionUiType.AccessBlockedByRestrictionWithRejectedRDCADAPRequest]: {\n    icon: 'accessClosed',\n    color: theme => theme.palette.warning.main,\n    tooltipText: 'Your access request has been denied by RDCA-DAP.',\n  },\n  [RestrictionUiType.AccessBlockedByACL]: {\n    icon: 'accessClosed',\n    color: theme => theme.palette.warning.main,\n    tooltipText: 'You do not have download access for this item.',\n  },\n  [RestrictionUiType.AccessibleWithTerms]: {\n    icon: 'accessOpen',\n    color: theme => theme.palette.success.main,\n    tooltipText: 'View Terms',\n  },\n  [RestrictionUiType.Accessible]: {\n    icon: 'accessOpen',\n    color: theme => theme.palette.success.main,\n    tooltipText: 'You have access to this item.',\n  },\n  [RestrictionUiType.AccessibleExternalFileHandle]: {\n    icon: 'linkOff',\n    color: theme => theme.palette.grey[700],\n    tooltipText: 'Access may be controlled by an external system.',\n  },\n}\n\nfunction AccessIcon(props: {\n  restrictionUiType: RestrictionUiType\n  wrap?: boolean\n  sx?: SxProps<Theme>\n}) {\n  const { restrictionUiType, wrap = true, sx } = props\n  const theme = useTheme()\n  if (restrictionUiType) {\n    const configuration = iconConfiguration[restrictionUiType]\n    return (\n      <IconSvg\n        icon={configuration.icon}\n        label={configuration.tooltipText}\n        wrap={wrap}\n        sx={{\n          color: configuration.color(theme),\n          height: '16px',\n          verticalAlign: 'text-top',\n          ...sx,\n        }}\n      />\n    )\n  }\n  // nothing is rendered until downloadType is determined\n  return <></>\n}\n\nexport default AccessIcon\n"],"mappings":";;;;AAGA,IAAY,IAAL,yBAAA,GAAA;QACL,EAAA,aAAa,cACb,EAAA,sBAAsB,uBACtB,EAAA,6BAA6B,8BAC7B,EAAA,+CAA+C,gDAC/C,EAAA,uDAAuD,wDACvD,EAAA,sDAAsD,uDACtD,EAAA,uDAAuD,wDACvD,EAAA,qBAAqB,sBACrB,EAAA,2BAA2B,4BAC3B,EAAA,+BAA+B;KAChC,EAEK,IAGF;EACD,EAAkB,2BAA2B;EAC5C,MAAM;EACN,QAAO,MAAS,EAAM,QAAQ,QAAQ;EACtC,aAAa;EACd;EACA,EAAkB,6BAA6B;EAC9C,MAAM;EACN,QAAO,MAAS,EAAM,QAAQ,QAAQ;EACtC,aAAa;EACd;EACA,EAAkB,+CAA+C;EAChE,MAAM;EACN,QAAO,MAAS,EAAM,QAAQ,QAAQ;EACtC,aAAa;EACd;EACA,EAAkB,uDAAuD;EACxE,MAAM;EACN,QAAO,MAAS,EAAM,QAAQ,QAAQ;EACtC,aACE;EACH;EACA,EAAkB,sDAAsD;EACvE,MAAM;EACN,QAAO,MAAS,EAAM,QAAQ,QAAQ;EACtC,aAAa;EACd;EACA,EAAkB,uDAAuD;EACxE,MAAM;EACN,QAAO,MAAS,EAAM,QAAQ,QAAQ;EACtC,aAAa;EACd;EACA,EAAkB,qBAAqB;EACtC,MAAM;EACN,QAAO,MAAS,EAAM,QAAQ,QAAQ;EACtC,aAAa;EACd;EACA,EAAkB,sBAAsB;EACvC,MAAM;EACN,QAAO,MAAS,EAAM,QAAQ,QAAQ;EACtC,aAAa;EACd;EACA,EAAkB,aAAa;EAC9B,MAAM;EACN,QAAO,MAAS,EAAM,QAAQ,QAAQ;EACtC,aAAa;EACd;EACA,EAAkB,+BAA+B;EAChD,MAAM;EACN,QAAO,MAAS,EAAM,QAAQ,KAAK;EACnC,aAAa;EACd;CACF;AAED,SAAS,EAAW,GAIjB;CACD,IAAM,EAAE,sBAAmB,UAAO,IAAM,UAAO,GACzC,IAAQ,GAAU;AACxB,KAAI,GAAmB;EACrB,IAAM,IAAgB,EAAkB;AACxC,SACE,kBAAC,GAAD;GACE,MAAM,EAAc;GACpB,OAAO,EAAc;GACf;GACN,IAAI;IACF,OAAO,EAAc,MAAM,EAAM;IACjC,QAAQ;IACR,eAAe;IACf,GAAG;IACJ;GACD,CAAA;;AAIN,QAAO,kBAAA,GAAA,EAAK,CAAA"}
+{"version":3,"file":"AccessIcon.js","names":[],"sources":["../../../src/components/HasAccess/AccessIcon.tsx"],"sourcesContent":["import { SxProps, Theme, useTheme } from '@mui/material'\nimport IconSvg, { IconName } from '../IconSvg/IconSvg'\n\nexport enum RestrictionUiType {\n  Accessible = 'Accessible',\n  AccessibleWithTerms = 'AccessibleWithTerms',\n  AccessBlockedByRestriction = 'AccessBlockedByRestriction',\n  AccessBlockedByRestrictionWithPendingRequest = 'AccessBlockedByRestrictionWithPendingRequest',\n  AccessBlockedByRestrictionWithPendingExternalRequest = 'AccessBlockedByRestrictionWithPendingExternalRequest',\n  AccessBlockedByRestrictionWithPendingRDCADAPRequest = 'AccessBlockedByRestrictionWithPendingRDCADAPRequest',\n  AccessBlockedByRestrictionWithRejectedRDCADAPRequest = 'AccessBlockedByRestrictionWithRejectedRDCADAPRequest',\n  AccessBlockedByACL = 'AccessBlockedByACL',\n  AccessBlockedToAnonymous = 'AccessBlockedToAnonymous',\n  AccessibleExternalFileHandle = 'AccessibleExternalFileHandle',\n}\n\nconst iconConfiguration: Record<\n  RestrictionUiType,\n  { icon: IconName; color: (theme: Theme) => string; tooltipText: string }\n> = {\n  [RestrictionUiType.AccessBlockedToAnonymous]: {\n    icon: 'accessClosed',\n    color: theme => theme.palette.warning.main,\n    tooltipText: 'You must sign in to access this item.',\n  },\n  [RestrictionUiType.AccessBlockedByRestriction]: {\n    icon: 'accessClosed',\n    color: theme => theme.palette.warning.main,\n    tooltipText: 'You must request access to this restricted item.',\n  },\n  [RestrictionUiType.AccessBlockedByRestrictionWithPendingRequest]: {\n    icon: 'accessPending',\n    color: theme => theme.palette.warning.main,\n    tooltipText: 'Your access request is pending approval.',\n  },\n  [RestrictionUiType.AccessBlockedByRestrictionWithPendingExternalRequest]: {\n    icon: 'accessPendingCloud',\n    color: theme => theme.palette.warning.main,\n    tooltipText:\n      'Your access request is pending approval from an external system.',\n  },\n  [RestrictionUiType.AccessBlockedByRestrictionWithPendingRDCADAPRequest]: {\n    icon: 'accessPendingCloud',\n    color: theme => theme.palette.warning.main,\n    tooltipText: 'Your access request is pending approval by RDCA-DAP.',\n  },\n  [RestrictionUiType.AccessBlockedByRestrictionWithRejectedRDCADAPRequest]: {\n    icon: 'accessClosed',\n    color: theme => theme.palette.warning.main,\n    tooltipText: 'Your access request has been denied by RDCA-DAP.',\n  },\n  [RestrictionUiType.AccessBlockedByACL]: {\n    icon: 'accessClosed',\n    color: theme => theme.palette.warning.main,\n    tooltipText: 'You do not have download access for this item.',\n  },\n  [RestrictionUiType.AccessibleWithTerms]: {\n    icon: 'accessOpen',\n    color: theme => theme.palette.success.main,\n    tooltipText: 'View Terms',\n  },\n  [RestrictionUiType.Accessible]: {\n    icon: 'accessOpen',\n    color: theme => theme.palette.success.main,\n    tooltipText: 'You have access to this item.',\n  },\n  [RestrictionUiType.AccessibleExternalFileHandle]: {\n    icon: 'linkOff',\n    color: theme => theme.palette.grey[700],\n    tooltipText: 'Access may be controlled by an external system.',\n  },\n}\n\nfunction AccessIcon(props: {\n  restrictionUiType: RestrictionUiType\n  wrap?: boolean\n  sx?: SxProps<Theme>\n}) {\n  const { restrictionUiType, wrap = true, sx } = props\n  const theme = useTheme()\n  if (restrictionUiType) {\n    const configuration = iconConfiguration[restrictionUiType]\n    return (\n      <IconSvg\n        icon={configuration.icon}\n        label={configuration.tooltipText}\n        wrap={wrap}\n        sx={{\n          color: configuration.color(theme),\n          height: '16px',\n          verticalAlign: 'text-top',\n          ...sx,\n        }}\n      />\n    )\n  }\n  // nothing is rendered until downloadType is determined\n  return <></>\n}\n\nexport default AccessIcon\n"],"mappings":";;;;AAGA,IAAY,IAAL,yBAAA,GAAA;QACL,EAAA,aAAA,cACA,EAAA,sBAAA,uBACA,EAAA,6BAAA,8BACA,EAAA,+CAAA,gDACA,EAAA,uDAAA,wDACA,EAAA,sDAAA,uDACA,EAAA,uDAAA,wDACA,EAAA,qBAAA,sBACA,EAAA,2BAAA,4BACA,EAAA,+BAAA;AACF,EAAA,CAAA,CAAA,GAEM,IAGF;2BAC4C;EAC5C,MAAM;EACN,QAAO,MAAS,EAAM,QAAQ,QAAQ;EACtC,aAAa;CACf;6BACgD;EAC9C,MAAM;EACN,QAAO,MAAS,EAAM,QAAQ,QAAQ;EACtC,aAAa;CACf;+CACkE;EAChE,MAAM;EACN,QAAO,MAAS,EAAM,QAAQ,QAAQ;EACtC,aAAa;CACf;uDAC0E;EACxE,MAAM;EACN,QAAO,MAAS,EAAM,QAAQ,QAAQ;EACtC,aACE;CACJ;sDACyE;EACvE,MAAM;EACN,QAAO,MAAS,EAAM,QAAQ,QAAQ;EACtC,aAAa;CACf;uDAC0E;EACxE,MAAM;EACN,QAAO,MAAS,EAAM,QAAQ,QAAQ;EACtC,aAAa;CACf;qBACwC;EACtC,MAAM;EACN,QAAO,MAAS,EAAM,QAAQ,QAAQ;EACtC,aAAa;CACf;sBACyC;EACvC,MAAM;EACN,QAAO,MAAS,EAAM,QAAQ,QAAQ;EACtC,aAAa;CACf;aACgC;EAC9B,MAAM;EACN,QAAO,MAAS,EAAM,QAAQ,QAAQ;EACtC,aAAa;CACf;+BACkD;EAChD,MAAM;EACN,QAAO,MAAS,EAAM,QAAQ,KAAK;EACnC,aAAa;CACf;AACF;AAEA,SAAS,EAAW,GAIjB;CACD,IAAM,EAAE,sBAAmB,UAAO,IAAM,UAAO,GACzC,IAAQ,EAAS;CACvB,IAAI,GAAmB;EACrB,IAAM,IAAgB,EAAkB;EACxC,OACE,kBAAC,GAAD;GACE,MAAM,EAAc;GACpB,OAAO,EAAc;GACf;GACN,IAAI;IACF,OAAO,EAAc,MAAM,CAAK;IAChC,QAAQ;IACR,eAAe;IACf,GAAG;GACL;EACD,CAAA;CAEL;CAEA,OAAO,kBAAA,GAAA,CAAI,CAAA;AACb"}

package/dist/components/HasAccess/HasAccessV2.js.map

@@ -1 +1 @@
-{"version":3,"file":"HasAccessV2.js","names":[],"sources":["../../../src/components/HasAccess/HasAccessV2.tsx"],"sourcesContent":["import { useGetRestrictionInformation } from '@/synapse-queries'\nimport { SRC_SIGN_IN_CLASS } from '@/utils/SynapseConstants'\nimport { Box, Button, SxProps, Theme } from '@mui/material'\nimport {\n  RestrictableObjectType,\n  RestrictionLevel,\n} from '@sage-bionetworks/synapse-types'\nimport { useMemo } from 'react'\nimport { RestrictionUiType } from './AccessIcon'\nimport { useHasAccess } from './useHasAccess'\n\nexport type HasAccessProps = {\n  onHide?: () => void\n  entityId: string\n  className?: string\n  showButtonText?: boolean\n  wrap?: boolean\n  /**\n   * If true, the component will show enhanced UI for the case where\n   * - the entity is a FileEntity, AND\n   * - the caller has permission to fetch the dataFileHandle, AND\n   * - the dataFileHandle is an instance of ExternalFileHandleInterface (i.e. the file is not controlled by Synapse)\n   * Note that this requires an additional API call that cannot be batched, so it should be avoided in bulk  contexts if possible.\n   * @default false\n   */\n  showExternalAccessIcon?: boolean\n  sx?: SxProps<Theme>\n}\n\nconst buttonSx = { p: '0px', minWidth: 'unset' }\n\n/**\n * HasAccess shows if the user has access to the file or not. If the user doesn't have access due to a restriction,\n * then a link will be shown that opens a modal with steps to request access.\n */\nexport function HasAccessV2(props: HasAccessProps) {\n  const {\n    entityId,\n    showButtonText = true,\n    showExternalAccessIcon = false,\n  } = props\n\n  const {\n    restrictionUiType: restrictionUiTypeValue,\n    accessText,\n    icon,\n    handleGetAccess,\n    accessRequirementDialog,\n  } = useHasAccess(entityId, true, undefined, { showExternalAccessIcon })\n\n  const { data: restrictionInformation } = useGetRestrictionInformation({\n    restrictableObjectType: RestrictableObjectType.ENTITY,\n    objectId: entityId,\n  })\n\n  // Sign-in wrapped icon or icon alone\n  const iconContainer = useMemo(() => {\n    return restrictionUiTypeValue ===\n      RestrictionUiType.AccessBlockedToAnonymous ? (\n      <Button\n        sx={buttonSx}\n        className={SRC_SIGN_IN_CLASS}\n        onClick={ev => {\n          if (ev.isTrusted) {\n            /*\n                There is a tricky problem - \n                The portals listens to click events for buttons with the class SRC_SIGN_IN_CLASS set, it listens to this event\n                so that it can display the login modal.\n\n                This button has an svg inside of it which is problematic because more often than not clicking this button will \n                instead click that svg. The event listener in the portals will break as a result.\n\n                Though the svg may get the actual click event, because of event bubbling this button will get its onClick called.\n                Once onClick is called we can manually dispatch an event off of this button. This does pose a problem, we end up in a \n                infinite loop because this button keeps dispatching click events, so we can use the isTrusted to recognize if onClick was\n                triggered programmatically or by user click. Lastly, using { bubbles: true } ensures the event bubbles up to the document level.\n\n              */\n            const clickEvent = new MouseEvent('click', { bubbles: true })\n            ev.currentTarget.dispatchEvent(clickEvent)\n          }\n        }}\n      >\n        {icon}\n      </Button>\n    ) : (\n      icon\n    )\n  }, [restrictionUiTypeValue])\n\n  // Access Requirements icon or Icon Container\n  const accessRequirementsJsxOrIconContainer = useMemo(() => {\n    if (!restrictionInformation || !restrictionUiTypeValue) {\n      // loading\n      return <></>\n    }\n    const hasUnmetAccessRequirement =\n      restrictionInformation?.hasUnmetAccessRequirement\n    const restrictionLevel = restrictionInformation?.restrictionLevel\n    let linkText = ''\n\n    if (hasUnmetAccessRequirement) {\n      linkText = 'Request Access'\n    } else if (RestrictionLevel.OPEN === restrictionLevel) {\n      // they need to sign in\n      return iconContainer\n    } else {\n      linkText = 'View Terms'\n    }\n    return (\n      <>\n        <Button\n          sx={buttonSx}\n          className={props.className}\n          onClick={handleGetAccess}\n        >\n          {icon}\n          {showButtonText && (\n            <Box\n              sx={{\n                ml: '5px',\n              }}\n            >\n              {linkText}\n            </Box>\n          )}\n        </Button>\n        {accessRequirementDialog}\n      </>\n    )\n  }, [\n    restrictionInformation,\n    restrictionUiTypeValue,\n    iconContainer,\n    handleGetAccess,\n    props.className,\n    showButtonText,\n    accessRequirementDialog,\n    accessText,\n    icon,\n  ])\n\n  if (!restrictionUiTypeValue) {\n    // loading\n    return <></>\n  }\n\n  return (\n    <span style={{ whiteSpace: 'nowrap' }}>\n      {accessRequirementsJsxOrIconContainer}\n    </span>\n  )\n  return accessRequirementsJsxOrIconContainer\n}\n\nexport default HasAccessV2\n"],"mappings":";;;;;;;;;;AA6BA,IAAM,IAAW;CAAE,GAAG;CAAO,UAAU;CAAS;AAMhD,SAAgB,EAAY,GAAuB;CACjD,IAAM,EACJ,aACA,oBAAiB,IACjB,4BAAyB,OACvB,GAEE,EACJ,mBAAmB,GACnB,eACA,SACA,oBACA,+BACE,EAAa,GAAU,IAAM,KAAA,GAAW,EAAE,2BAAwB,CAAC,EAEjE,EAAE,MAAM,MAA2B,EAA6B;EACpE,wBAAwB,EAAuB;EAC/C,UAAU;EACX,CAAC,EAGI,IAAgB,QACb,MACL,EAAkB,2BAClB,kBAAC,GAAD;EACE,IAAI;EACJ,WAAW;EACX,UAAS,MAAM;AACb,OAAI,EAAG,WAAW;IAehB,IAAM,IAAa,IAAI,WAAW,SAAS,EAAE,SAAS,IAAM,CAAC;AAC7D,MAAG,cAAc,cAAc,EAAW;;;YAI7C;EACM,CAAA,GAET,GAED,CAAC,EAAuB,CAAC,EAGtB,IAAuC,QAAc;AACzD,MAAI,CAAC,KAA0B,CAAC,EAE9B,QAAO,kBAAA,GAAA,EAAK,CAAA;EAEd,IAAM,IACJ,GAAwB,2BACpB,IAAmB,GAAwB,kBAC7C,IAAW;AAEf,MAAI,EACF,KAAW;WACF,EAAiB,SAAS,EAEnC,QAAO;MAEP,KAAW;AAEb,SACE,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,GAAD;GACE,IAAI;GACJ,WAAW,EAAM;GACjB,SAAS;aAHX,CAKG,GACA,KACC,kBAAC,GAAD;IACE,IAAI,EACF,IAAI,OACL;cAEA;IACG,CAAA,CAED;MACR,EACA,EAAA,CAAA;IAEJ;EACD;EACA;EACA;EACA;EACA,EAAM;EACN;EACA;EACA;EACA;EACD,CAAC;AAOF,QALK,IAMH,kBAAC,QAAD;EAAM,OAAO,EAAE,YAAY,UAAU;YAClC;EACI,CAAA,GANA,kBAAA,GAAA,EAAK,CAAA"}
+{"version":3,"file":"HasAccessV2.js","names":[],"sources":["../../../src/components/HasAccess/HasAccessV2.tsx"],"sourcesContent":["import { useGetRestrictionInformation } from '@/synapse-queries'\nimport { SRC_SIGN_IN_CLASS } from '@/utils/SynapseConstants'\nimport { Box, Button, SxProps, Theme } from '@mui/material'\nimport {\n  RestrictableObjectType,\n  RestrictionLevel,\n} from '@sage-bionetworks/synapse-types'\nimport { useMemo } from 'react'\nimport { RestrictionUiType } from './AccessIcon'\nimport { useHasAccess } from './useHasAccess'\n\nexport type HasAccessProps = {\n  onHide?: () => void\n  entityId: string\n  className?: string\n  showButtonText?: boolean\n  wrap?: boolean\n  /**\n   * If true, the component will show enhanced UI for the case where\n   * - the entity is a FileEntity, AND\n   * - the caller has permission to fetch the dataFileHandle, AND\n   * - the dataFileHandle is an instance of ExternalFileHandleInterface (i.e. the file is not controlled by Synapse)\n   * Note that this requires an additional API call that cannot be batched, so it should be avoided in bulk  contexts if possible.\n   * @default false\n   */\n  showExternalAccessIcon?: boolean\n  sx?: SxProps<Theme>\n}\n\nconst buttonSx = { p: '0px', minWidth: 'unset' }\n\n/**\n * HasAccess shows if the user has access to the file or not. If the user doesn't have access due to a restriction,\n * then a link will be shown that opens a modal with steps to request access.\n */\nexport function HasAccessV2(props: HasAccessProps) {\n  const {\n    entityId,\n    showButtonText = true,\n    showExternalAccessIcon = false,\n  } = props\n\n  const {\n    restrictionUiType: restrictionUiTypeValue,\n    accessText,\n    icon,\n    handleGetAccess,\n    accessRequirementDialog,\n  } = useHasAccess(entityId, true, undefined, { showExternalAccessIcon })\n\n  const { data: restrictionInformation } = useGetRestrictionInformation({\n    restrictableObjectType: RestrictableObjectType.ENTITY,\n    objectId: entityId,\n  })\n\n  // Sign-in wrapped icon or icon alone\n  const iconContainer = useMemo(() => {\n    return restrictionUiTypeValue ===\n      RestrictionUiType.AccessBlockedToAnonymous ? (\n      <Button\n        sx={buttonSx}\n        className={SRC_SIGN_IN_CLASS}\n        onClick={ev => {\n          if (ev.isTrusted) {\n            /*\n                There is a tricky problem - \n                The portals listens to click events for buttons with the class SRC_SIGN_IN_CLASS set, it listens to this event\n                so that it can display the login modal.\n\n                This button has an svg inside of it which is problematic because more often than not clicking this button will \n                instead click that svg. The event listener in the portals will break as a result.\n\n                Though the svg may get the actual click event, because of event bubbling this button will get its onClick called.\n                Once onClick is called we can manually dispatch an event off of this button. This does pose a problem, we end up in a \n                infinite loop because this button keeps dispatching click events, so we can use the isTrusted to recognize if onClick was\n                triggered programmatically or by user click. Lastly, using { bubbles: true } ensures the event bubbles up to the document level.\n\n              */\n            const clickEvent = new MouseEvent('click', { bubbles: true })\n            ev.currentTarget.dispatchEvent(clickEvent)\n          }\n        }}\n      >\n        {icon}\n      </Button>\n    ) : (\n      icon\n    )\n  }, [restrictionUiTypeValue])\n\n  // Access Requirements icon or Icon Container\n  const accessRequirementsJsxOrIconContainer = useMemo(() => {\n    if (!restrictionInformation || !restrictionUiTypeValue) {\n      // loading\n      return <></>\n    }\n    const hasUnmetAccessRequirement =\n      restrictionInformation?.hasUnmetAccessRequirement\n    const restrictionLevel = restrictionInformation?.restrictionLevel\n    let linkText = ''\n\n    if (hasUnmetAccessRequirement) {\n      linkText = 'Request Access'\n    } else if (RestrictionLevel.OPEN === restrictionLevel) {\n      // they need to sign in\n      return iconContainer\n    } else {\n      linkText = 'View Terms'\n    }\n    return (\n      <>\n        <Button\n          sx={buttonSx}\n          className={props.className}\n          onClick={handleGetAccess}\n        >\n          {icon}\n          {showButtonText && (\n            <Box\n              sx={{\n                ml: '5px',\n              }}\n            >\n              {linkText}\n            </Box>\n          )}\n        </Button>\n        {accessRequirementDialog}\n      </>\n    )\n  }, [\n    restrictionInformation,\n    restrictionUiTypeValue,\n    iconContainer,\n    handleGetAccess,\n    props.className,\n    showButtonText,\n    accessRequirementDialog,\n    accessText,\n    icon,\n  ])\n\n  if (!restrictionUiTypeValue) {\n    // loading\n    return <></>\n  }\n\n  return (\n    <span style={{ whiteSpace: 'nowrap' }}>\n      {accessRequirementsJsxOrIconContainer}\n    </span>\n  )\n  return accessRequirementsJsxOrIconContainer\n}\n\nexport default HasAccessV2\n"],"mappings":";;;;;;;;;;AA6BA,IAAM,IAAW;CAAE,GAAG;CAAO,UAAU;AAAQ;AAM/C,SAAgB,EAAY,GAAuB;CACjD,IAAM,EACJ,aACA,oBAAiB,IACjB,4BAAyB,OACvB,GAEE,EACJ,mBAAmB,GACnB,eACA,SACA,oBACA,+BACE,EAAa,GAAU,IAAM,KAAA,GAAW,EAAE,0BAAuB,CAAC,GAEhE,EAAE,MAAM,MAA2B,EAA6B;EACpE,wBAAwB,EAAuB;EAC/C,UAAU;CACZ,CAAC,GAGK,IAAgB,QACb,MACL,EAAkB,2BAClB,kBAAC,GAAD;EACE,IAAI;EACJ,WAAW;EACX,UAAS,MAAM;GACb,IAAI,EAAG,WAAW;IAehB,IAAM,IAAa,IAAI,WAAW,SAAS,EAAE,SAAS,GAAK,CAAC;IAC5D,EAAG,cAAc,cAAc,CAAU;GAC3C;EACF;YAEC;CACK,CAAA,IAER,GAED,CAAC,CAAsB,CAAC,GAGrB,IAAuC,QAAc;EACzD,IAAI,CAAC,KAA0B,CAAC,GAE9B,OAAO,kBAAA,GAAA,CAAI,CAAA;EAEb,IAAM,IACJ,GAAwB,2BACpB,IAAmB,GAAwB,kBAC7C,IAAW;EAEf,IAAI,GACF,IAAW;OACN,IAAI,EAAiB,SAAS,GAEnC,OAAO;OAEP,IAAW;EAEb,OACE,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,GAAD;GACE,IAAI;GACJ,WAAW,EAAM;GACjB,SAAS;aAHX,CAKG,GACA,KACC,kBAAC,GAAD;IACE,IAAI,EACF,IAAI,MACN;cAEC;GACE,CAAA,CAED;MACP,CACD,EAAA,CAAA;CAEN,GAAG;EACD;EACA;EACA;EACA;EACA,EAAM;EACN;EACA;EACA;EACA;CACF,CAAC;CAOD,OALK,IAMH,kBAAC,QAAD;EAAM,OAAO,EAAE,YAAY,SAAS;YACjC;CACG,CAAA,IANC,kBAAA,GAAA,CAAI,CAAA;AASf"}

package/dist/components/HasAccess/useHasAccess.js.map

@@ -1 +1 @@
-{"version":3,"file":"useHasAccess.js","names":[],"sources":["../../../src/components/HasAccess/useHasAccess.tsx"],"sourcesContent":["import { useCallback, useMemo, useState } from 'react'\nimport AccessIcon, { RestrictionUiType } from './AccessIcon'\nimport {\n  AccessRequirement,\n  EntityBundle,\n  FileHandle,\n  RestrictableObjectType,\n  RestrictionLevel,\n} from '@sage-bionetworks/synapse-types'\nimport {\n  implementsExternalFileHandleInterface,\n  isFileEntity,\n  SynapseClientError,\n  useSynapseContext,\n} from '@/utils'\nimport {\n  useGetEntityBundle,\n  useGetRestrictionInformation,\n} from '@/synapse-queries'\nimport SynapseClient from '@/synapse-client'\nimport AccessRequirementList, {\n  checkHasUnsupportedRequirement,\n} from '../AccessRequirementList/AccessRequirementList'\nimport { BackendDestinationEnum, getEndpoint } from '@/utils/functions'\nimport { UseQueryOptions } from '@tanstack/react-query'\nimport { SxProps, Theme } from '@mui/material'\n\n/**\n * This hook determines if\n * - the entity is a FileEntity, AND\n * - the caller has permission to fetch the dataFileHandle, AND\n * - the dataFileHandle is an instance of ExternalFileHandleInterface (i.e. the file is not controlled by Synapse)\n * Note that this requires an additional API call that cannot be batched, so it should be avoided in bulk contexts if possible.\n */\nfunction useGetIsExternalFileHandle(\n  entityId: string,\n  options: Partial<UseQueryOptions<EntityBundle, SynapseClientError, boolean>>,\n) {\n  return useGetEntityBundle(entityId, undefined, undefined, {\n    ...options,\n    select: bundle => {\n      if (!isFileEntity(bundle.entity)) {\n        return false\n      }\n      const fileEntity = bundle.entity\n      const fileHandles = bundle.fileHandles\n      const fileHandle: FileHandle | undefined = fileHandles?.find(\n        fileHandle => fileHandle.id === fileEntity.dataFileHandleId,\n      )\n      return fileHandle && implementsExternalFileHandleInterface(fileHandle)\n    },\n  })\n}\n\n/**\n * Determines whether an Entity is accessible for download, or if it is blocked by the ACL or unmet Access Requirements.\n *\n * To make download available, and determine if the file is downloadable via the web, see {@link DirectDownload.tsx}\n * @param entityId\n * @returns\n */\nexport function useGetRestrictionUiType(\n  entityId: string,\n  useGetIsExternalFileHandleOptions: Partial<\n    UseQueryOptions<EntityBundle, SynapseClientError, boolean>\n  >,\n): RestrictionUiType | undefined {\n  const { isAuthenticated } = useSynapseContext()\n\n  const { data: restrictionInformation } = useGetRestrictionInformation({\n    restrictableObjectType: RestrictableObjectType.ENTITY,\n    objectId: entityId,\n  })\n\n  const { data: isExternalFileHandle, isLoading: isLoadingExternalFile } =\n    useGetIsExternalFileHandle(entityId, {\n      enabled: useGetIsExternalFileHandleOptions.enabled,\n    })\n\n  if (!restrictionInformation) {\n    return undefined\n  }\n\n  // Only check for external file handle if the feature is enabled\n  if (useGetIsExternalFileHandleOptions.enabled) {\n    if (isLoadingExternalFile) {\n      return undefined\n    }\n    if (isExternalFileHandle) {\n      return RestrictionUiType.AccessibleExternalFileHandle\n    }\n  }\n\n  if (restrictionInformation.hasUnmetAccessRequirement) {\n    return RestrictionUiType.AccessBlockedByRestriction\n  }\n  if (restrictionInformation.userEntityPermissions!.canDownload) {\n    if (restrictionInformation.restrictionLevel !== RestrictionLevel.OPEN) {\n      // Indicate that there are requirements, but they have been met\n      return RestrictionUiType.AccessibleWithTerms\n    } else {\n      return RestrictionUiType.Accessible\n    }\n  }\n\n  if (isAuthenticated) {\n    return RestrictionUiType.AccessBlockedByACL\n  }\n  return RestrictionUiType.AccessBlockedToAnonymous\n}\n\n//* Get the access level text */\nfunction getAccessText(props: RestrictionUiType | undefined) {\n  switch (props) {\n    case RestrictionUiType.Accessible:\n      return 'Open Access'\n    case RestrictionUiType.AccessibleWithTerms:\n      return 'View Terms'\n    case RestrictionUiType.AccessBlockedByRestriction:\n      return 'Request Access'\n    case RestrictionUiType.AccessBlockedByACL:\n      return 'Access Denied'\n    case RestrictionUiType.AccessBlockedToAnonymous:\n      return 'Sign In Required'\n    case RestrictionUiType.AccessibleExternalFileHandle:\n      return 'External Access'\n    case undefined:\n      return 'Loading...'\n    default:\n      return ''\n  }\n}\n\n// A hook that handles the logic for computing the correct access level, getting the text, and the icon\nexport function useHasAccess(\n  entityId: string,\n  iconWrap: boolean = false,\n  iconSx?: SxProps<Theme>,\n  options: { showExternalAccessIcon?: boolean } = {},\n) {\n  const [displayAccessRequirement, setDisplayAccessRequirement] =\n    useState(false)\n  const [accessRequirements, setAccessRequirements] = useState<\n    AccessRequirement[]\n  >([])\n\n  const { accessToken } = useSynapseContext()\n  const { showExternalAccessIcon = false } = options\n\n  // get access level\n  const restrictionUiType = useGetRestrictionUiType(entityId, {\n    enabled: showExternalAccessIcon,\n  })\n\n  const { data: restrictionInformation } = useGetRestrictionInformation({\n    restrictableObjectType: RestrictableObjectType.ENTITY,\n    objectId: entityId,\n  })\n\n  // get access level text\n  const accessText = getAccessText(restrictionUiType)\n\n  // get access level icon\n  const icon = (\n    <AccessIcon\n      restrictionUiType={restrictionUiType!}\n      wrap={iconWrap}\n      sx={{ ...iconSx }}\n    />\n  )\n\n  const handleGetAccess = useCallback(() => {\n    // TODO: The fetch should really happen in the AR List component.\n    // If we need to open the AR page in synapse, the logic should be in the modal and it should just close itself right away\n    SynapseClient.getAllAccessRequirements(accessToken, entityId).then(\n      requirements => {\n        if (checkHasUnsupportedRequirement(requirements)) {\n          window.open(\n            `${getEndpoint(\n              BackendDestinationEnum.PORTAL_ENDPOINT,\n            )}AccessRequirements:ID=${entityId}&TYPE=ENTITY`,\n            '_blank',\n          )\n        } else {\n          setAccessRequirements(requirements)\n          setDisplayAccessRequirement(true)\n        }\n      },\n    )\n  }, [accessToken, entityId])\n\n  // Determine if this access type should show a clickable button\n  const isClickable = useMemo(() => {\n    if (!restrictionInformation || !restrictionUiType) {\n      return false\n    }\n\n    const hasUnmetAccessRequirement =\n      restrictionInformation.hasUnmetAccessRequirement\n    const restrictionLevel = restrictionInformation.restrictionLevel\n\n    // Clickable if there are unmet requirements or if there are terms to view\n    return (\n      hasUnmetAccessRequirement ||\n      restrictionLevel !== RestrictionLevel.OPEN ||\n      restrictionUiType === RestrictionUiType.AccessBlockedToAnonymous\n    )\n  }, [restrictionInformation, restrictionUiType])\n\n  const accessRequirementDialog = displayAccessRequirement ? (\n    <AccessRequirementList\n      subjectId={entityId}\n      subjectType={RestrictableObjectType.ENTITY}\n      accessRequirementFromProps={accessRequirements}\n      renderAsModal={true}\n      onHide={() => {\n        setDisplayAccessRequirement(false)\n      }}\n    />\n  ) : null\n\n  return {\n    restrictionUiType,\n    accessText,\n    icon,\n    handleGetAccess,\n    isClickable,\n    accessRequirementDialog,\n    setDisplayAccessRequirement,\n  }\n}\n\nexport default useHasAccess\n"],"mappings":";;;;;;;;;;;;;;;AAkCA,SAAS,EACP,GACA,GACA;AACA,QAAO,EAAmB,GAAU,KAAA,GAAW,KAAA,GAAW;EACxD,GAAG;EACH,SAAQ,MAAU;AAChB,OAAI,CAAC,EAAa,EAAO,OAAO,CAC9B,QAAO;GAET,IAAM,IAAa,EAAO,QAEpB,IADc,EAAO,aAC6B,MACtD,MAAc,EAAW,OAAO,EAAW,iBAC5C;AACD,UAAO,KAAc,EAAsC,EAAW;;EAEzE,CAAC;;AAUJ,SAAgB,EACd,GACA,GAG+B;CAC/B,IAAM,EAAE,uBAAoB,GAAmB,EAEzC,EAAE,MAAM,MAA2B,EAA6B;EACpE,wBAAwB,EAAuB;EAC/C,UAAU;EACX,CAAC,EAEI,EAAE,MAAM,GAAsB,WAAW,MAC7C,EAA2B,GAAU,EACnC,SAAS,EAAkC,SAC5C,CAAC;AAEC,QAKL;MAAI,EAAkC,SAAS;AAC7C,OAAI,EACF;AAEF,OAAI,EACF,QAAO,EAAkB;;AAmB7B,SAfI,EAAuB,4BAClB,EAAkB,6BAEvB,EAAuB,sBAAuB,cAC5C,EAAuB,qBAAqB,EAAiB,OAIxD,EAAkB,aAFlB,EAAkB,sBAMzB,IACK,EAAkB,qBAEpB,EAAkB;;;AAI3B,SAAS,EAAc,GAAsC;AAC3D,SAAQ,GAAR;EACE,KAAK,EAAkB,WACrB,QAAO;EACT,KAAK,EAAkB,oBACrB,QAAO;EACT,KAAK,EAAkB,2BACrB,QAAO;EACT,KAAK,EAAkB,mBACrB,QAAO;EACT,KAAK,EAAkB,yBACrB,QAAO;EACT,KAAK,EAAkB,6BACrB,QAAO;EACT,KAAK,KAAA,EACH,QAAO;EACT,QACE,QAAO;;;AAKb,SAAgB,EACd,GACA,IAAoB,IACpB,GACA,IAAgD,EAAE,EAClD;CACA,IAAM,CAAC,GAA0B,KAC/B,EAAS,GAAM,EACX,CAAC,GAAoB,KAAyB,EAElD,EAAE,CAAC,EAEC,EAAE,mBAAgB,GAAmB,EACrC,EAAE,4BAAyB,OAAU,GAGrC,IAAoB,EAAwB,GAAU,EAC1D,SAAS,GACV,CAAC,EAEI,EAAE,MAAM,MAA2B,EAA6B;EACpE,wBAAwB,EAAuB;EAC/C,UAAU;EACX,CAAC;AAgEF,QAAO;EACL;EACA,YA/DiB,EAAc,EA+D/B;EACA,MA5DA,kBAAC,GAAD;GACqB;GACnB,MAAM;GACN,IAAI,EAAE,GAAG,GAAQ;GACjB,CAwDF;EACA,iBAtDsB,QAAkB;AAGxC,KAAc,yBAAyB,GAAa,EAAS,CAAC,MAC5D,MAAgB;AACd,IAAI,EAA+B,EAAa,GAC9C,OAAO,KACL,GAAG,EACD,EAAuB,gBACxB,CAAC,wBAAwB,EAAS,eACnC,SACD,IAED,EAAsB,EAAa,EACnC,EAA4B,GAAK;KAGtC;KACA,CAAC,GAAa,EAAS,CAoCxB;EACA,aAlCkB,QAAc;AAChC,OAAI,CAAC,KAA0B,CAAC,EAC9B,QAAO;GAGT,IAAM,IACJ,EAAuB,2BACnB,IAAmB,EAAuB;AAGhD,UACE,KACA,MAAqB,EAAiB,QACtC,MAAsB,EAAkB;KAEzC,CAAC,GAAwB,EAAkB,CAmB5C;EACA,yBAlB8B,IAC9B,kBAAC,GAAD;GACE,WAAW;GACX,aAAa,EAAuB;GACpC,4BAA4B;GAC5B,eAAe;GACf,cAAc;AACZ,MAA4B,GAAM;;GAEpC,CAAA,GACA;EASF;EACD"}
+{"version":3,"file":"useHasAccess.js","names":[],"sources":["../../../src/components/HasAccess/useHasAccess.tsx"],"sourcesContent":["import { useCallback, useMemo, useState } from 'react'\nimport AccessIcon, { RestrictionUiType } from './AccessIcon'\nimport {\n  AccessRequirement,\n  EntityBundle,\n  FileHandle,\n  RestrictableObjectType,\n  RestrictionLevel,\n} from '@sage-bionetworks/synapse-types'\nimport {\n  implementsExternalFileHandleInterface,\n  isFileEntity,\n  SynapseClientError,\n  useSynapseContext,\n} from '@/utils'\nimport {\n  useGetEntityBundle,\n  useGetRestrictionInformation,\n} from '@/synapse-queries'\nimport SynapseClient from '@/synapse-client'\nimport AccessRequirementList, {\n  checkHasUnsupportedRequirement,\n} from '../AccessRequirementList/AccessRequirementList'\nimport { BackendDestinationEnum, getEndpoint } from '@/utils/functions'\nimport { UseQueryOptions } from '@tanstack/react-query'\nimport { SxProps, Theme } from '@mui/material'\n\n/**\n * This hook determines if\n * - the entity is a FileEntity, AND\n * - the caller has permission to fetch the dataFileHandle, AND\n * - the dataFileHandle is an instance of ExternalFileHandleInterface (i.e. the file is not controlled by Synapse)\n * Note that this requires an additional API call that cannot be batched, so it should be avoided in bulk contexts if possible.\n */\nfunction useGetIsExternalFileHandle(\n  entityId: string,\n  options: Partial<UseQueryOptions<EntityBundle, SynapseClientError, boolean>>,\n) {\n  return useGetEntityBundle(entityId, undefined, undefined, {\n    ...options,\n    select: bundle => {\n      if (!isFileEntity(bundle.entity)) {\n        return false\n      }\n      const fileEntity = bundle.entity\n      const fileHandles = bundle.fileHandles\n      const fileHandle: FileHandle | undefined = fileHandles?.find(\n        fileHandle => fileHandle.id === fileEntity.dataFileHandleId,\n      )\n      return fileHandle && implementsExternalFileHandleInterface(fileHandle)\n    },\n  })\n}\n\n/**\n * Determines whether an Entity is accessible for download, or if it is blocked by the ACL or unmet Access Requirements.\n *\n * To make download available, and determine if the file is downloadable via the web, see {@link DirectDownload.tsx}\n * @param entityId\n * @returns\n */\nexport function useGetRestrictionUiType(\n  entityId: string,\n  useGetIsExternalFileHandleOptions: Partial<\n    UseQueryOptions<EntityBundle, SynapseClientError, boolean>\n  >,\n): RestrictionUiType | undefined {\n  const { isAuthenticated } = useSynapseContext()\n\n  const { data: restrictionInformation } = useGetRestrictionInformation({\n    restrictableObjectType: RestrictableObjectType.ENTITY,\n    objectId: entityId,\n  })\n\n  const { data: isExternalFileHandle, isLoading: isLoadingExternalFile } =\n    useGetIsExternalFileHandle(entityId, {\n      enabled: useGetIsExternalFileHandleOptions.enabled,\n    })\n\n  if (!restrictionInformation) {\n    return undefined\n  }\n\n  // Only check for external file handle if the feature is enabled\n  if (useGetIsExternalFileHandleOptions.enabled) {\n    if (isLoadingExternalFile) {\n      return undefined\n    }\n    if (isExternalFileHandle) {\n      return RestrictionUiType.AccessibleExternalFileHandle\n    }\n  }\n\n  if (restrictionInformation.hasUnmetAccessRequirement) {\n    return RestrictionUiType.AccessBlockedByRestriction\n  }\n  if (restrictionInformation.userEntityPermissions!.canDownload) {\n    if (restrictionInformation.restrictionLevel !== RestrictionLevel.OPEN) {\n      // Indicate that there are requirements, but they have been met\n      return RestrictionUiType.AccessibleWithTerms\n    } else {\n      return RestrictionUiType.Accessible\n    }\n  }\n\n  if (isAuthenticated) {\n    return RestrictionUiType.AccessBlockedByACL\n  }\n  return RestrictionUiType.AccessBlockedToAnonymous\n}\n\n//* Get the access level text */\nfunction getAccessText(props: RestrictionUiType | undefined) {\n  switch (props) {\n    case RestrictionUiType.Accessible:\n      return 'Open Access'\n    case RestrictionUiType.AccessibleWithTerms:\n      return 'View Terms'\n    case RestrictionUiType.AccessBlockedByRestriction:\n      return 'Request Access'\n    case RestrictionUiType.AccessBlockedByACL:\n      return 'Access Denied'\n    case RestrictionUiType.AccessBlockedToAnonymous:\n      return 'Sign In Required'\n    case RestrictionUiType.AccessibleExternalFileHandle:\n      return 'External Access'\n    case undefined:\n      return 'Loading...'\n    default:\n      return ''\n  }\n}\n\n// A hook that handles the logic for computing the correct access level, getting the text, and the icon\nexport function useHasAccess(\n  entityId: string,\n  iconWrap: boolean = false,\n  iconSx?: SxProps<Theme>,\n  options: { showExternalAccessIcon?: boolean } = {},\n) {\n  const [displayAccessRequirement, setDisplayAccessRequirement] =\n    useState(false)\n  const [accessRequirements, setAccessRequirements] = useState<\n    AccessRequirement[]\n  >([])\n\n  const { accessToken } = useSynapseContext()\n  const { showExternalAccessIcon = false } = options\n\n  // get access level\n  const restrictionUiType = useGetRestrictionUiType(entityId, {\n    enabled: showExternalAccessIcon,\n  })\n\n  const { data: restrictionInformation } = useGetRestrictionInformation({\n    restrictableObjectType: RestrictableObjectType.ENTITY,\n    objectId: entityId,\n  })\n\n  // get access level text\n  const accessText = getAccessText(restrictionUiType)\n\n  // get access level icon\n  const icon = (\n    <AccessIcon\n      restrictionUiType={restrictionUiType!}\n      wrap={iconWrap}\n      sx={{ ...iconSx }}\n    />\n  )\n\n  const handleGetAccess = useCallback(() => {\n    // TODO: The fetch should really happen in the AR List component.\n    // If we need to open the AR page in synapse, the logic should be in the modal and it should just close itself right away\n    SynapseClient.getAllAccessRequirements(accessToken, entityId).then(\n      requirements => {\n        if (checkHasUnsupportedRequirement(requirements)) {\n          window.open(\n            `${getEndpoint(\n              BackendDestinationEnum.PORTAL_ENDPOINT,\n            )}AccessRequirements:ID=${entityId}&TYPE=ENTITY`,\n            '_blank',\n          )\n        } else {\n          setAccessRequirements(requirements)\n          setDisplayAccessRequirement(true)\n        }\n      },\n    )\n  }, [accessToken, entityId])\n\n  // Determine if this access type should show a clickable button\n  const isClickable = useMemo(() => {\n    if (!restrictionInformation || !restrictionUiType) {\n      return false\n    }\n\n    const hasUnmetAccessRequirement =\n      restrictionInformation.hasUnmetAccessRequirement\n    const restrictionLevel = restrictionInformation.restrictionLevel\n\n    // Clickable if there are unmet requirements or if there are terms to view\n    return (\n      hasUnmetAccessRequirement ||\n      restrictionLevel !== RestrictionLevel.OPEN ||\n      restrictionUiType === RestrictionUiType.AccessBlockedToAnonymous\n    )\n  }, [restrictionInformation, restrictionUiType])\n\n  const accessRequirementDialog = displayAccessRequirement ? (\n    <AccessRequirementList\n      subjectId={entityId}\n      subjectType={RestrictableObjectType.ENTITY}\n      accessRequirementFromProps={accessRequirements}\n      renderAsModal={true}\n      onHide={() => {\n        setDisplayAccessRequirement(false)\n      }}\n    />\n  ) : null\n\n  return {\n    restrictionUiType,\n    accessText,\n    icon,\n    handleGetAccess,\n    isClickable,\n    accessRequirementDialog,\n    setDisplayAccessRequirement,\n  }\n}\n\nexport default useHasAccess\n"],"mappings":";;;;;;;;;;;;;;;AAkCA,SAAS,EACP,GACA,GACA;CACA,OAAO,EAAmB,GAAU,KAAA,GAAW,KAAA,GAAW;EACxD,GAAG;EACH,SAAQ,MAAU;GAChB,IAAI,CAAC,EAAa,EAAO,MAAM,GAC7B,OAAO;GAET,IAAM,IAAa,EAAO,QAEpB,IADc,EAAO,aAC6B,MACtD,MAAc,EAAW,OAAO,EAAW,gBAC7C;GACA,OAAO,KAAc,EAAsC,CAAU;EACvE;CACF,CAAC;AACH;AASA,SAAgB,EACd,GACA,GAG+B;CAC/B,IAAM,EAAE,uBAAoB,EAAkB,GAExC,EAAE,MAAM,MAA2B,EAA6B;EACpE,wBAAwB,EAAuB;EAC/C,UAAU;CACZ,CAAC,GAEK,EAAE,MAAM,GAAsB,WAAW,MAC7C,EAA2B,GAAU,EACnC,SAAS,EAAkC,QAC7C,CAAC;CAEE,OAKL;MAAI,EAAkC,SAAS;GAC7C,IAAI,GACF;GAEF,IAAI,GACF,OAAO,EAAkB;EAE7B;EAiBA,OAfI,EAAuB,4BAClB,EAAkB,6BAEvB,EAAuB,sBAAuB,cAC5C,EAAuB,qBAAqB,EAAiB,OAIxD,EAAkB,aAFlB,EAAkB,sBAMzB,IACK,EAAkB,qBAEpB,EAAkB;CAjBzB;AAkBF;AAGA,SAAS,EAAc,GAAsC;CAC3D,QAAQ,GAAR;EACE,KAAK,EAAkB,YACrB,OAAO;EACT,KAAK,EAAkB,qBACrB,OAAO;EACT,KAAK,EAAkB,4BACrB,OAAO;EACT,KAAK,EAAkB,oBACrB,OAAO;EACT,KAAK,EAAkB,0BACrB,OAAO;EACT,KAAK,EAAkB,8BACrB,OAAO;EACT,KAAK,KAAA,GACH,OAAO;EACT,SACE,OAAO;CACX;AACF;AAGA,SAAgB,EACd,GACA,IAAoB,IACpB,GACA,IAAgD,CAAC,GACjD;CACA,IAAM,CAAC,GAA0B,KAC/B,EAAS,EAAK,GACV,CAAC,GAAoB,KAAyB,EAElD,CAAC,CAAC,GAEE,EAAE,mBAAgB,EAAkB,GACpC,EAAE,4BAAyB,OAAU,GAGrC,IAAoB,EAAwB,GAAU,EAC1D,SAAS,EACX,CAAC,GAEK,EAAE,MAAM,MAA2B,EAA6B;EACpE,wBAAwB,EAAuB;EAC/C,UAAU;CACZ,CAAC;CAgED,OAAO;EACL;EACA,YA/DiB,EAAc,CA+D/B;EACA,MA5DA,kBAAC,GAAD;GACqB;GACnB,MAAM;GACN,IAAI,EAAE,GAAG,EAAO;EACjB,CAwDD;EACA,iBAtDsB,QAAkB;GAGxC,EAAc,yBAAyB,GAAa,CAAQ,EAAE,MAC5D,MAAgB;IACd,AAAI,EAA+B,CAAY,IAC7C,OAAO,KACL,GAAG,EACD,EAAuB,eACzB,EAAE,wBAAwB,EAAS,eACnC,QACF,KAEA,EAAsB,CAAY,GAClC,EAA4B,EAAI;GAEpC,CACF;EACF,GAAG,CAAC,GAAa,CAAQ,CAoCvB;EACA,aAlCkB,QAAc;GAChC,IAAI,CAAC,KAA0B,CAAC,GAC9B,OAAO;GAGT,IAAM,IACJ,EAAuB,2BACnB,IAAmB,EAAuB;GAGhD,OACE,KACA,MAAqB,EAAiB,QACtC,MAAsB,EAAkB;EAE5C,GAAG,CAAC,GAAwB,CAAiB,CAmB3C;EACA,yBAlB8B,IAC9B,kBAAC,GAAD;GACE,WAAW;GACX,aAAa,EAAuB;GACpC,4BAA4B;GAC5B,eAAe;GACf,cAAc;IACZ,EAA4B,EAAK;GACnC;EACD,CAAA,IACC;EASF;CACF;AACF"}

package/dist/components/HeaderCard/HeaderCardV2.js.map

@@ -1 +1 @@
-{"version":3,"file":"HeaderCardV2.js","names":[],"sources":["../../../src/components/HeaderCard/HeaderCardV2.tsx"],"sourcesContent":["import { CardLabel } from '@/components/row_renderers/utils/CardFooter'\nimport React, { forwardRef, ForwardedRef } from 'react'\nimport {\n  Box,\n  Card,\n  Typography,\n  // Stack,\n  // ButtonProps,\n  useTheme,\n  useMediaQuery,\n} from '@mui/material'\nimport { DescriptionConfig } from '../CardContainerLogic'\nimport { CollapsibleDescription } from '../GenericCard/CollapsibleDescription'\nimport { GenericCardProps } from '@/components/GenericCard/GenericCard'\nimport { useDocumentMetadata } from '@/utils/context/DocumentMetadataContext'\nimport { SmartButton } from '../SmartLink/SmartButton'\nimport { SmartLink } from '../SmartLink/SmartLink'\n\nexport type HeaderCardV2Props = {\n  /** Type label displayed at the top of the card */\n  type: string\n  /** Main title of the card */\n  title: string\n  /** Optional subtitle, often used for author or additional context */\n  subTitle?: string\n  /** Main description text */\n  description: string\n  /** Maximum number of secondary labels to show before \"Show More\" */\n  secondaryLabelLimit?: number\n  /** Array of label-value pairs to display in the card footer */\n  values?: CardLabel[]\n  /** Whether to align the card to the left navigation */\n  isAlignToLeftNav?: boolean\n  /** Configuration for the collapsible description */\n  descriptionConfig?: DescriptionConfig\n  /** Character count threshold for truncating description (default 400) */\n  charCountCutoff?: number\n  /** Optional URL for making the title clickable */\n  href?: string\n  /** Target attribute for the title link */\n  target?: string\n  /** Icon element to display */\n  icon: React.ReactNode\n  /** Optional background image URL */\n  backgroundImage?: string\n  /** Force values section to appear below main content */\n  forceStackedLayout?: boolean\n  /** Optional CTA link(s) to display below description. Accepts a single config or an array. */\n  ctaLinkConfig?: GenericCardProps['ctaLinkConfig']\n}\n\n/**\n * HeaderCardV2 Component   OUT OF DATE COMMENTS\n *\n * A material-UI based card component for displaying detailed information with metadata.\n * This component supports responsive layouts, background images, and dynamic content\n * organization.\n *\n * Layout Structure:\n\n  ```\n┌───────────────────────────────────────────────────────────────┐\n│ ┌─────┐  Type Label                                           │\n│ │Icon │  Title                                                │\n│ │     │  Subtitle                                             │\n│ └─────┘                                                       │\n│         Description                     Metadata              │\n│         [Show More/Less]                --------              │\n│                                         Label 1    Value 1    │\n│         [External Site Button]          Label 2    Value 2    │\n└───────────────────────────────────────────────────────────────┘\n ```\n *\n * Features:\n * - Responsive layout with configurable breakpoints\n * - Optional background image with overlay\n * - Collapsible description text\n * - Right-aligned or stacked metadata section\n * - Call-to-action buttons\n * - SEO-friendly meta tags management\n *\n * Meta Tags Handling:\n * - Updates document title with card title\n * - Sets meta description from card description/subtitle\n * - Restores original meta data on component cleanup\n *\n * Layout Modes:\n * - Default: Icon + Content | Metadata (on desktop)\n * - Stacked: Full width content with metadata below\n * - Mobile: All sections stack vertically\n *\n * @component\n * @example\n * ```tsx\n * <HeaderCardV2\n *   type=\"Study\"\n *   title=\"Example Study\"\n *   description=\"Study description\"\n *   values={[['Status', 'Active'], ['Access', 'Public']]}\n *   icon={<StudyIcon />}\n *   ctaLinkConfig={{text: \"View Standard on External Website\", link: \"url\"}}\n * />\n * ```\n\n * Core component logic:\n * 1. Responsive Layout:\n *    - Uses MUI Grid for flexible layouts\n *    - Switches to stacked layout on mobile, when forceStackedLayout is true,\n *\n * 2. Meta Tags:\n *    - Manages document title and meta description\n *    - Preserves original values for cleanup\n *\n * 3. Content Sections:\n *    - Icon: Optional, maintains aspect ratio\n *    - Main Content: Type, title, subtitle, description\n *    - Metadata: Right-aligned or stacked key-value pairs\n *    - CTA Button: Optional button link to external site\n *\n * 4. Styling:\n *    - Background image support with overlay\n *    - Consistent spacing using MUI theme\n *    - Responsive typography\n *    - Optional left-nav alignment\n */\nconst HeaderCardV2 = forwardRef(function HeaderCardV2(\n  props: HeaderCardV2Props,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const {\n    // type,\n    title,\n    subTitle = '',\n    description,\n    values,\n    // secondaryLabelLimit,\n    isAlignToLeftNav,\n    descriptionConfig,\n    charCountCutoff,\n    href,\n    target,\n    icon,\n    backgroundImage,\n    forceStackedLayout = false,\n    ctaLinkConfig,\n  } = props\n\n  const theme = useTheme()\n  const isMobile = useMediaQuery(theme.breakpoints.down('md'))\n\n  let useStackedLayout = false\n  if (forceStackedLayout || isMobile) {\n    useStackedLayout = true\n  } else {\n    // useStackedLayout = metadataHeight > descriptionHeight\n    // as per https://github.com/bridge2ai/b2ai-standards-registry/issues/210#issuecomment-2773706202,\n    // constrain metadata to 5-line expandable block\n  }\n\n  const descriptionConfiguration: DescriptionConfig = {\n    ...descriptionConfig,\n    showFullDescriptionByDefault:\n      descriptionConfig?.showFullDescriptionByDefault ?? false,\n  }\n  const metadataDescription = description || subTitle || undefined\n  useDocumentMetadata({\n    title,\n    description: metadataDescription,\n    priority: 100,\n  })\n\n  // ctaLink stuff - normalize to array\n  const ctaLinkConfigs = ctaLinkConfig\n    ? Array.isArray(ctaLinkConfig)\n      ? ctaLinkConfig\n      : [ctaLinkConfig]\n    : []\n  const ctaLinkBox =\n    ctaLinkConfigs.length > 0 ? (\n      <Box\n        sx={{ display: 'flex', gap: 2, flexWrap: 'wrap', marginTop: '22px' }}\n      >\n        {ctaLinkConfigs.map((config, index) => (\n          <SmartButton\n            key={index}\n            variant=\"outlined\"\n            href={config?.href}\n            target={config?.target}\n            size=\"large\"\n            sx={{\n              color: '#FFF',\n              '&:hover': {\n                color: '#FFF',\n                textDecorationColor: '#FFF',\n                border: '2px solid white',\n              },\n              '&:focus': { color: '#FFF' },\n              textDecorationColor: '#FFF',\n              padding: '6px 24px',\n              border: '1px solid white',\n            }}\n          >\n            {config?.text}\n          </SmartButton>\n        ))}\n      </Box>\n    ) : null\n\n  return (\n    <Card\n      component={'div'}\n      ref={ref}\n      sx={{\n        borderRadius: 0,\n        boxShadow: 'none',\n        position: 'relative',\n        ...(backgroundImage && {\n          '&::before': {\n            content: '\"\"',\n            position: 'absolute',\n            top: 0,\n            left: 0,\n            right: 0,\n            bottom: 0,\n            backgroundImage: `url(${backgroundImage})`,\n            backgroundSize: 'cover',\n            backgroundPosition: 'center',\n            opacity: 0.1,\n            zIndex: 0,\n          },\n        }),\n        ...(isAlignToLeftNav &&\n          {\n            // Add any special styles for aligned cards\n          }),\n      }}\n      className={`SRC-portalCard SRC-portalCardHeader ${\n        isAlignToLeftNav ? 'isAlignToLeftNav' : ''\n      }`}\n    >\n      <Box\n        sx={{\n          marginLeft: 'auto',\n          marginRight: 'auto',\n          maxWidth: '1400px',\n          display: 'grid',\n          gridTemplateColumns: '1fr 12fr 1fr',\n          '& > *': {\n            gridColumn: 2,\n          },\n          paddingBottom: '25px',\n        }}\n      >\n        <Box\n          sx={{\n            display: 'flex',\n            flexDirection: 'row',\n            alignItems: 'center',\n            minHeight: '64px', // Set minimum height to ensure proper centering space\n            gap: 1,\n          }}\n        >\n          {icon && (\n            <Box\n              sx={{\n                height: '120px',\n              }}\n            >\n              {icon}\n            </Box>\n          )}\n\n          <Box sx={{}}>\n            {/* Title */}\n            <Typography\n              sx={{\n                mb: 1,\n                fontSize: '2.5rem',\n                letterSpacing: '0.1em', // Add letter spacing\n                marginBottom: '0.6em',\n              }}\n            >\n              {href ? (\n                <SmartLink\n                  href={href}\n                  target={target}\n                  underline=\"hover\"\n                  color=\"inherit\"\n                >\n                  {title}\n                </SmartLink>\n              ) : (\n                title\n              )}\n            </Typography>\n            {/* Subtitle */}\n            {subTitle && (\n              <Typography\n                variant=\"body1\"\n                color=\"inherit\"\n                sx={{\n                  fontStyle: 'italic',\n                  fontSize: '1.5rem',\n                }}\n              >\n                {subTitle}\n              </Typography>\n            )}\n          </Box>\n        </Box>\n\n        <Box\n          sx={{\n            display: 'flex',\n            flexDirection: useStackedLayout ? 'column' : 'row',\n            flexWrap: useStackedLayout ? 'nowrap' : 'wrap',\n            justifyContent: 'space-between',\n            alignItems: 'flex-start',\n            gap: 2,\n          }}\n        >\n          <Box\n            style={{\n              flexBasis: useStackedLayout ? '100%' : 'min(65ch, 100%)',\n              width: useStackedLayout ? '100%' : 'auto',\n            }}\n          >\n            <CollapsibleDescription\n              description={description}\n              descriptionSubTitle=\"\"\n              descriptionConfig={descriptionConfiguration}\n              charCountCutoff={charCountCutoff}\n            />\n            {ctaLinkBox}\n          </Box>\n          {values && (\n            <Box\n              sx={{\n                width: useStackedLayout ? '100%' : '30%',\n                marginTop: useStackedLayout ? 2 : 0,\n                alignItems: 'flex-start',\n              }}\n            >\n              <MetadataTable data={values} />\n            </Box>\n          )}\n        </Box>\n      </Box>\n    </Card>\n  )\n})\n\ntype MetadataTableProps = {\n  data: CardLabel[]\n}\n\nfunction MetadataTable({ data }: MetadataTableProps) {\n  return (\n    <table\n      style={{\n        width: '100%',\n        borderCollapse: 'collapse',\n      }}\n    >\n      <tbody>\n        {data.map((item, index) => (\n          <tr key={item.columnName || index}>\n            <td\n              style={{\n                width: '1%',\n                whiteSpace: 'nowrap',\n                padding: '0px 16px 8px 0',\n                verticalAlign: 'top',\n                fontWeight: 'bold',\n              }}\n            >\n              {item.columnDisplayName}\n            </td>\n            <td\n              style={{\n                width: 'auto',\n                paddingBottom: '12px',\n                verticalAlign: 'top',\n                wordBreak: 'break-word',\n              }}\n            >\n              {item.value}\n            </td>\n          </tr>\n        ))}\n      </tbody>\n    </table>\n  )\n}\n\nexport default HeaderCardV2\n"],"mappings":"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"}
+{"version":3,"file":"HeaderCardV2.js","names":[],"sources":["../../../src/components/HeaderCard/HeaderCardV2.tsx"],"sourcesContent":["import { CardLabel } from '@/components/row_renderers/utils/CardFooter'\nimport React, { forwardRef, ForwardedRef } from 'react'\nimport {\n  Box,\n  Card,\n  Typography,\n  // Stack,\n  // ButtonProps,\n  useTheme,\n  useMediaQuery,\n} from '@mui/material'\nimport { DescriptionConfig } from '../CardContainerLogic'\nimport { CollapsibleDescription } from '../GenericCard/CollapsibleDescription'\nimport { GenericCardProps } from '@/components/GenericCard/GenericCard'\nimport { useDocumentMetadata } from '@/utils/context/DocumentMetadataContext'\nimport { SmartButton } from '../SmartLink/SmartButton'\nimport { SmartLink } from '../SmartLink/SmartLink'\n\nexport type HeaderCardV2Props = {\n  /** Type label displayed at the top of the card */\n  type: string\n  /** Main title of the card */\n  title: string\n  /** Optional subtitle, often used for author or additional context */\n  subTitle?: string\n  /** Main description text */\n  description: string\n  /** Maximum number of secondary labels to show before \"Show More\" */\n  secondaryLabelLimit?: number\n  /** Array of label-value pairs to display in the card footer */\n  values?: CardLabel[]\n  /** Whether to align the card to the left navigation */\n  isAlignToLeftNav?: boolean\n  /** Configuration for the collapsible description */\n  descriptionConfig?: DescriptionConfig\n  /** Character count threshold for truncating description (default 400) */\n  charCountCutoff?: number\n  /** Optional URL for making the title clickable */\n  href?: string\n  /** Target attribute for the title link */\n  target?: string\n  /** Icon element to display */\n  icon: React.ReactNode\n  /** Optional background image URL */\n  backgroundImage?: string\n  /** Force values section to appear below main content */\n  forceStackedLayout?: boolean\n  /** Optional CTA link(s) to display below description. Accepts a single config or an array. */\n  ctaLinkConfig?: GenericCardProps['ctaLinkConfig']\n}\n\n/**\n * HeaderCardV2 Component   OUT OF DATE COMMENTS\n *\n * A material-UI based card component for displaying detailed information with metadata.\n * This component supports responsive layouts, background images, and dynamic content\n * organization.\n *\n * Layout Structure:\n\n  ```\n┌───────────────────────────────────────────────────────────────┐\n│ ┌─────┐  Type Label                                           │\n│ │Icon │  Title                                                │\n│ │     │  Subtitle                                             │\n│ └─────┘                                                       │\n│         Description                     Metadata              │\n│         [Show More/Less]                --------              │\n│                                         Label 1    Value 1    │\n│         [External Site Button]          Label 2    Value 2    │\n└───────────────────────────────────────────────────────────────┘\n ```\n *\n * Features:\n * - Responsive layout with configurable breakpoints\n * - Optional background image with overlay\n * - Collapsible description text\n * - Right-aligned or stacked metadata section\n * - Call-to-action buttons\n * - SEO-friendly meta tags management\n *\n * Meta Tags Handling:\n * - Updates document title with card title\n * - Sets meta description from card description/subtitle\n * - Restores original meta data on component cleanup\n *\n * Layout Modes:\n * - Default: Icon + Content | Metadata (on desktop)\n * - Stacked: Full width content with metadata below\n * - Mobile: All sections stack vertically\n *\n * @component\n * @example\n * ```tsx\n * <HeaderCardV2\n *   type=\"Study\"\n *   title=\"Example Study\"\n *   description=\"Study description\"\n *   values={[['Status', 'Active'], ['Access', 'Public']]}\n *   icon={<StudyIcon />}\n *   ctaLinkConfig={{text: \"View Standard on External Website\", link: \"url\"}}\n * />\n * ```\n\n * Core component logic:\n * 1. Responsive Layout:\n *    - Uses MUI Grid for flexible layouts\n *    - Switches to stacked layout on mobile, when forceStackedLayout is true,\n *\n * 2. Meta Tags:\n *    - Manages document title and meta description\n *    - Preserves original values for cleanup\n *\n * 3. Content Sections:\n *    - Icon: Optional, maintains aspect ratio\n *    - Main Content: Type, title, subtitle, description\n *    - Metadata: Right-aligned or stacked key-value pairs\n *    - CTA Button: Optional button link to external site\n *\n * 4. Styling:\n *    - Background image support with overlay\n *    - Consistent spacing using MUI theme\n *    - Responsive typography\n *    - Optional left-nav alignment\n */\nconst HeaderCardV2 = forwardRef(function HeaderCardV2(\n  props: HeaderCardV2Props,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const {\n    // type,\n    title,\n    subTitle = '',\n    description,\n    values,\n    // secondaryLabelLimit,\n    isAlignToLeftNav,\n    descriptionConfig,\n    charCountCutoff,\n    href,\n    target,\n    icon,\n    backgroundImage,\n    forceStackedLayout = false,\n    ctaLinkConfig,\n  } = props\n\n  const theme = useTheme()\n  const isMobile = useMediaQuery(theme.breakpoints.down('md'))\n\n  let useStackedLayout = false\n  if (forceStackedLayout || isMobile) {\n    useStackedLayout = true\n  } else {\n    // useStackedLayout = metadataHeight > descriptionHeight\n    // as per https://github.com/bridge2ai/b2ai-standards-registry/issues/210#issuecomment-2773706202,\n    // constrain metadata to 5-line expandable block\n  }\n\n  const descriptionConfiguration: DescriptionConfig = {\n    ...descriptionConfig,\n    showFullDescriptionByDefault:\n      descriptionConfig?.showFullDescriptionByDefault ?? false,\n  }\n  const metadataDescription = description || subTitle || undefined\n  useDocumentMetadata({\n    title,\n    description: metadataDescription,\n    priority: 100,\n  })\n\n  // ctaLink stuff - normalize to array\n  const ctaLinkConfigs = ctaLinkConfig\n    ? Array.isArray(ctaLinkConfig)\n      ? ctaLinkConfig\n      : [ctaLinkConfig]\n    : []\n  const ctaLinkBox =\n    ctaLinkConfigs.length > 0 ? (\n      <Box\n        sx={{ display: 'flex', gap: 2, flexWrap: 'wrap', marginTop: '22px' }}\n      >\n        {ctaLinkConfigs.map((config, index) => (\n          <SmartButton\n            key={index}\n            variant=\"outlined\"\n            href={config?.href}\n            target={config?.target}\n            size=\"large\"\n            sx={{\n              color: '#FFF',\n              '&:hover': {\n                color: '#FFF',\n                textDecorationColor: '#FFF',\n                border: '2px solid white',\n              },\n              '&:focus': { color: '#FFF' },\n              textDecorationColor: '#FFF',\n              padding: '6px 24px',\n              border: '1px solid white',\n            }}\n          >\n            {config?.text}\n          </SmartButton>\n        ))}\n      </Box>\n    ) : null\n\n  return (\n    <Card\n      component={'div'}\n      ref={ref}\n      sx={{\n        borderRadius: 0,\n        boxShadow: 'none',\n        position: 'relative',\n        ...(backgroundImage && {\n          '&::before': {\n            content: '\"\"',\n            position: 'absolute',\n            top: 0,\n            left: 0,\n            right: 0,\n            bottom: 0,\n            backgroundImage: `url(${backgroundImage})`,\n            backgroundSize: 'cover',\n            backgroundPosition: 'center',\n            opacity: 0.1,\n            zIndex: 0,\n          },\n        }),\n        ...(isAlignToLeftNav &&\n          {\n            // Add any special styles for aligned cards\n          }),\n      }}\n      className={`SRC-portalCard SRC-portalCardHeader ${\n        isAlignToLeftNav ? 'isAlignToLeftNav' : ''\n      }`}\n    >\n      <Box\n        sx={{\n          marginLeft: 'auto',\n          marginRight: 'auto',\n          maxWidth: '1400px',\n          display: 'grid',\n          gridTemplateColumns: '1fr 12fr 1fr',\n          '& > *': {\n            gridColumn: 2,\n          },\n          paddingBottom: '25px',\n        }}\n      >\n        <Box\n          sx={{\n            display: 'flex',\n            flexDirection: 'row',\n            alignItems: 'center',\n            minHeight: '64px', // Set minimum height to ensure proper centering space\n            gap: 1,\n          }}\n        >\n          {icon && (\n            <Box\n              sx={{\n                height: '120px',\n              }}\n            >\n              {icon}\n            </Box>\n          )}\n\n          <Box sx={{}}>\n            {/* Title */}\n            <Typography\n              sx={{\n                mb: 1,\n                fontSize: '2.5rem',\n                letterSpacing: '0.1em', // Add letter spacing\n                marginBottom: '0.6em',\n              }}\n            >\n              {href ? (\n                <SmartLink\n                  href={href}\n                  target={target}\n                  underline=\"hover\"\n                  color=\"inherit\"\n                >\n                  {title}\n                </SmartLink>\n              ) : (\n                title\n              )}\n            </Typography>\n            {/* Subtitle */}\n            {subTitle && (\n              <Typography\n                variant=\"body1\"\n                color=\"inherit\"\n                sx={{\n                  fontStyle: 'italic',\n                  fontSize: '1.5rem',\n                }}\n              >\n                {subTitle}\n              </Typography>\n            )}\n          </Box>\n        </Box>\n\n        <Box\n          sx={{\n            display: 'flex',\n            flexDirection: useStackedLayout ? 'column' : 'row',\n            flexWrap: useStackedLayout ? 'nowrap' : 'wrap',\n            justifyContent: 'space-between',\n            alignItems: 'flex-start',\n            gap: 2,\n          }}\n        >\n          <Box\n            style={{\n              flexBasis: useStackedLayout ? '100%' : 'min(65ch, 100%)',\n              width: useStackedLayout ? '100%' : 'auto',\n            }}\n          >\n            <CollapsibleDescription\n              description={description}\n              descriptionSubTitle=\"\"\n              descriptionConfig={descriptionConfiguration}\n              charCountCutoff={charCountCutoff}\n            />\n            {ctaLinkBox}\n          </Box>\n          {values && (\n            <Box\n              sx={{\n                width: useStackedLayout ? '100%' : '30%',\n                marginTop: useStackedLayout ? 2 : 0,\n                alignItems: 'flex-start',\n              }}\n            >\n              <MetadataTable data={values} />\n            </Box>\n          )}\n        </Box>\n      </Box>\n    </Card>\n  )\n})\n\ntype MetadataTableProps = {\n  data: CardLabel[]\n}\n\nfunction MetadataTable({ data }: MetadataTableProps) {\n  return (\n    <table\n      style={{\n        width: '100%',\n        borderCollapse: 'collapse',\n      }}\n    >\n      <tbody>\n        {data.map((item, index) => (\n          <tr key={item.columnName || index}>\n            <td\n              style={{\n                width: '1%',\n                whiteSpace: 'nowrap',\n                padding: '0px 16px 8px 0',\n                verticalAlign: 'top',\n                fontWeight: 'bold',\n              }}\n            >\n              {item.columnDisplayName}\n            </td>\n            <td\n              style={{\n                width: 'auto',\n                paddingBottom: '12px',\n                verticalAlign: 'top',\n                wordBreak: 'break-word',\n              }}\n            >\n              {item.value}\n            </td>\n          </tr>\n        ))}\n      </tbody>\n    </table>\n  )\n}\n\nexport default HeaderCardV2\n"],"mappings":"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"}

package/dist/components/HeaderCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"HeaderCard.js","names":[],"sources":["../../src/components/HeaderCard.tsx"],"sourcesContent":["import { CardLabel } from '@/components/row_renderers/utils/CardFooter'\nimport { Box, Container, SxProps } from '@mui/material'\nimport { SmartLink } from './SmartLink/SmartLink'\nimport { ForwardedRef, forwardRef } from 'react'\nimport { FileHandleLink } from './widgets/FileHandleLink'\nimport { GenericCardProps } from '@/components/GenericCard/GenericCard'\nimport { CardFooter } from './row_renderers/utils'\nimport { DescriptionConfig } from './CardContainerLogic'\nimport { CollapsibleDescription } from './GenericCard/CollapsibleDescription'\nimport HeaderCardV2 from './HeaderCard/HeaderCardV2'\nimport SustainabilityScorecard, {\n  SustainabilityScorecardProps,\n} from './SustainabilityScorecard/SustainabilityScorecard'\nimport { useDocumentMetadata } from '@/utils/context/DocumentMetadataContext'\nimport { AdaptiveTwoColumnLayout } from './AdaptiveTwoColumnLayout/AdaptiveTwoColumnLayout'\n\nexport type HeaderCardVariant = 'HeaderCard' | 'HeaderCardV2'\n\nexport type HeaderCardProps = {\n  type: string\n  title: string\n  subTitle?: string\n  description: string\n  secondaryLabelLimit?: number\n  values?: CardLabel[]\n  isAlignToLeftNav?: boolean\n  descriptionConfig?: DescriptionConfig\n  charCountCutoff?: number\n  href?: string\n  target?: string\n  titleAsFileHandleLinkConfiguration?: GenericCardProps['titleAsFileHandleLinkConfiguration']\n  titleAreaRightContent?: React.ReactNode\n  descriptionSubTitle?: string\n  icon: React.ReactNode\n  headerCardVariant?: HeaderCardVariant\n  cardTopContent?: React.ReactNode\n  ctaLinkConfig?: GenericCardProps['ctaLinkConfig']\n  cardTopButtons?: React.ReactNode\n  sustainabilityScorecard?: SustainabilityScorecardProps\n  renderedIconList?: React.ReactNode\n  cardTypeAdornment?: React.ReactNode\n  doiUri?: string\n  sx?: SxProps\n}\n\nconst HeaderCardClassic = forwardRef(function HeaderCardClassic(\n  props: HeaderCardProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const {\n    type,\n    title,\n    subTitle = '',\n    description,\n    values,\n    secondaryLabelLimit,\n    isAlignToLeftNav,\n    descriptionConfig,\n    descriptionSubTitle = '',\n    href,\n    target,\n    titleAsFileHandleLinkConfiguration,\n    titleAreaRightContent,\n    icon,\n    cardTopContent,\n    cardTopButtons,\n    sustainabilityScorecard,\n    renderedIconList,\n    cardTypeAdornment,\n    sx,\n  } = props\n\n  const descriptionConfiguration: DescriptionConfig = {\n    ...descriptionConfig,\n    showFullDescriptionByDefault:\n      descriptionConfig?.showFullDescriptionByDefault ?? false,\n  }\n\n  const metadataDescription = description || subTitle || undefined\n  useDocumentMetadata({\n    title,\n    description: metadataDescription,\n    priority: 100,\n  })\n\n  return (\n    <Box\n      ref={ref}\n      className={`SRC-portalCard SRC-portalCardHeader ${\n        isAlignToLeftNav ? 'isAlignToLeftNav' : ''\n      }`}\n      sx={{\n        // Break out of any constrained parent (e.g. margin:auto containers)\n        // so the background stretches full-viewport width.\n        width: '100vw',\n        marginLeft: 'calc(50% - 50vw)',\n        ...sx,\n      }}\n    >\n      <Container maxWidth=\"lg\">\n        {/* Row 1: type, cardTypeAdornment, cardTopButtons */}\n        <Box\n          sx={{\n            display: 'flex',\n            flexDirection: 'row',\n            alignItems: 'center',\n            gap: '10px',\n          }}\n        >\n          <div className=\"SRC-type\">{type}</div>\n          {cardTypeAdornment}\n          <Box sx={{ flex: 1 }} />\n          {cardTopButtons && (\n            <Box sx={{ display: 'flex', gap: '10px' }}>{cardTopButtons}</Box>\n          )}\n        </Box>\n\n        {/* Row 2: Title */}\n        <Box>\n          <h3 className=\"SRC-boldText\" style={{ margin: 'none' }}>\n            {titleAsFileHandleLinkConfiguration ? (\n              <FileHandleLink\n                fileHandleAssociation={\n                  titleAsFileHandleLinkConfiguration.fileHandleAssociation\n                }\n                showDownloadIcon={\n                  titleAsFileHandleLinkConfiguration.showDownloadIcon\n                }\n                displayValue={title}\n              />\n            ) : href ? (\n              <SmartLink\n                href={href ?? ''}\n                className=\"highlight-link\"\n                target={target}\n              >\n                {title}\n              </SmartLink>\n            ) : (\n              <span>{title}</span>\n            )}\n          </h3>\n        </Box>\n\n        {/* Row 3: renderedIconList */}\n        {renderedIconList && (\n          <Box\n            sx={{\n              '& .icon-list.themed path, & .icon-list.themed circle': {\n                fill: 'white',\n              },\n            }}\n          >\n            {renderedIconList}\n          </Box>\n        )}\n\n        {/* Row 4: left content, optionally alongside right content in an adaptive two-column layout */}\n        {(() => {\n          const leftContent = (\n            <>\n              {/* Column 1: icon (floated left) with subTitle and description flowing around */}\n              {icon && (\n                <Box\n                  sx={{\n                    width: '120px',\n                    float: 'left',\n                    paddingRight: '24px',\n                    paddingBottom: '24px',\n                    display: 'flex',\n                    justifyContent: 'center',\n                  }}\n                >\n                  {icon}\n                </Box>\n              )}\n              {subTitle && <div className=\"SRC-author\">{subTitle}</div>}\n              <CollapsibleDescription\n                description={description}\n                descriptionSubTitle={descriptionSubTitle}\n                descriptionConfig={descriptionConfiguration}\n              />\n              {sustainabilityScorecard && (\n                <SustainabilityScorecard\n                  metricsConfig={sustainabilityScorecard.metricsConfig}\n                  searchParamKey={sustainabilityScorecard.searchParamKey}\n                  filterColumn={sustainabilityScorecard.filterColumn}\n                  scoreDescriptorColumnName={\n                    sustainabilityScorecard.scoreDescriptorColumnName\n                  }\n                  queryRequest={sustainabilityScorecard.queryRequest}\n                  sustainabilityReportLink={\n                    sustainabilityScorecard.sustainabilityReportLink\n                  }\n                  sx={{\n                    background: 'rgba(0, 0, 0, 0.10)',\n                    marginTop: '30px',\n                    ...sustainabilityScorecard.sx,\n                  }}\n                />\n              )}\n              <Box sx={{ clear: 'both', pb: 'var(--baseline-grid)' }} />\n            </>\n          )\n\n          const rightContent =\n            titleAreaRightContent || cardTopContent || values?.length ? (\n              /* Column 2: titleAreaRightContent, cardTopContent, CardFooter */\n              <>\n                {titleAreaRightContent && (\n                  <div className=\"SRC-cardTitleAreaDetails\">\n                    {titleAreaRightContent}\n                  </div>\n                )}\n                {cardTopContent && (\n                  <div className=\"SRC-cardContent\">{cardTopContent}</div>\n                )}\n                {values && (\n                  <Box sx={{ '&& .SRC-cardMetadata': { paddingTop: 0 } }}>\n                    <CardFooter\n                      isHeader={true}\n                      secondaryLabelLimit={secondaryLabelLimit}\n                      values={values}\n                    />\n                  </Box>\n                )}\n              </>\n            ) : undefined\n\n          return rightContent ? (\n            <AdaptiveTwoColumnLayout\n              stackRatioThreshold={0.45}\n              sx={{ marginTop: '24px' }}\n              leftContent={leftContent}\n              rightContent={rightContent}\n            />\n          ) : (\n            <Box sx={{ marginTop: '24px' }}>{leftContent}</Box>\n          )\n        })()}\n      </Container>\n    </Box>\n  )\n})\n\nconst HeaderCard = forwardRef(function HeaderCard(\n  props: HeaderCardProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const { headerCardVariant = 'HeaderCard' } = props\n  if (headerCardVariant === 'HeaderCardV2') {\n    return <HeaderCardV2 {...props} ref={ref} />\n  }\n  return <HeaderCardClassic {...props} ref={ref} />\n})\n\nexport default HeaderCard\n"],"mappings":"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"}
+{"version":3,"file":"HeaderCard.js","names":[],"sources":["../../src/components/HeaderCard.tsx"],"sourcesContent":["import { CardLabel } from '@/components/row_renderers/utils/CardFooter'\nimport { Box, Container, SxProps } from '@mui/material'\nimport { SmartLink } from './SmartLink/SmartLink'\nimport { ForwardedRef, forwardRef } from 'react'\nimport { FileHandleLink } from './widgets/FileHandleLink'\nimport { GenericCardProps } from '@/components/GenericCard/GenericCard'\nimport { CardFooter } from './row_renderers/utils'\nimport { DescriptionConfig } from './CardContainerLogic'\nimport { CollapsibleDescription } from './GenericCard/CollapsibleDescription'\nimport HeaderCardV2 from './HeaderCard/HeaderCardV2'\nimport SustainabilityScorecard, {\n  SustainabilityScorecardProps,\n} from './SustainabilityScorecard/SustainabilityScorecard'\nimport { useDocumentMetadata } from '@/utils/context/DocumentMetadataContext'\nimport { AdaptiveTwoColumnLayout } from './AdaptiveTwoColumnLayout/AdaptiveTwoColumnLayout'\n\nexport type HeaderCardVariant = 'HeaderCard' | 'HeaderCardV2'\n\nexport type HeaderCardProps = {\n  type: string\n  title: string\n  subTitle?: string\n  description: string\n  secondaryLabelLimit?: number\n  values?: CardLabel[]\n  isAlignToLeftNav?: boolean\n  descriptionConfig?: DescriptionConfig\n  charCountCutoff?: number\n  href?: string\n  target?: string\n  titleAsFileHandleLinkConfiguration?: GenericCardProps['titleAsFileHandleLinkConfiguration']\n  titleAreaRightContent?: React.ReactNode\n  descriptionSubTitle?: string\n  icon: React.ReactNode\n  headerCardVariant?: HeaderCardVariant\n  cardTopContent?: React.ReactNode\n  ctaLinkConfig?: GenericCardProps['ctaLinkConfig']\n  cardTopButtons?: React.ReactNode\n  sustainabilityScorecard?: SustainabilityScorecardProps\n  renderedIconList?: React.ReactNode\n  cardTypeAdornment?: React.ReactNode\n  doiUri?: string\n  sx?: SxProps\n}\n\nconst HeaderCardClassic = forwardRef(function HeaderCardClassic(\n  props: HeaderCardProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const {\n    type,\n    title,\n    subTitle = '',\n    description,\n    values,\n    secondaryLabelLimit,\n    isAlignToLeftNav,\n    descriptionConfig,\n    descriptionSubTitle = '',\n    href,\n    target,\n    titleAsFileHandleLinkConfiguration,\n    titleAreaRightContent,\n    icon,\n    cardTopContent,\n    cardTopButtons,\n    sustainabilityScorecard,\n    renderedIconList,\n    cardTypeAdornment,\n    sx,\n  } = props\n\n  const descriptionConfiguration: DescriptionConfig = {\n    ...descriptionConfig,\n    showFullDescriptionByDefault:\n      descriptionConfig?.showFullDescriptionByDefault ?? false,\n  }\n\n  const metadataDescription = description || subTitle || undefined\n  useDocumentMetadata({\n    title,\n    description: metadataDescription,\n    priority: 100,\n  })\n\n  return (\n    <Box\n      ref={ref}\n      className={`SRC-portalCard SRC-portalCardHeader ${\n        isAlignToLeftNav ? 'isAlignToLeftNav' : ''\n      }`}\n      sx={{\n        // Break out of any constrained parent (e.g. margin:auto containers)\n        // so the background stretches full-viewport width.\n        width: '100vw',\n        marginLeft: 'calc(50% - 50vw)',\n        ...sx,\n      }}\n    >\n      <Container maxWidth=\"lg\">\n        {/* Row 1: type, cardTypeAdornment, cardTopButtons */}\n        <Box\n          sx={{\n            display: 'flex',\n            flexDirection: 'row',\n            alignItems: 'center',\n            gap: '10px',\n          }}\n        >\n          <div className=\"SRC-type\">{type}</div>\n          {cardTypeAdornment}\n          <Box sx={{ flex: 1 }} />\n          {cardTopButtons && (\n            <Box sx={{ display: 'flex', gap: '10px' }}>{cardTopButtons}</Box>\n          )}\n        </Box>\n\n        {/* Row 2: Title */}\n        <Box>\n          <h3 className=\"SRC-boldText\" style={{ margin: 'none' }}>\n            {titleAsFileHandleLinkConfiguration ? (\n              <FileHandleLink\n                fileHandleAssociation={\n                  titleAsFileHandleLinkConfiguration.fileHandleAssociation\n                }\n                showDownloadIcon={\n                  titleAsFileHandleLinkConfiguration.showDownloadIcon\n                }\n                displayValue={title}\n              />\n            ) : href ? (\n              <SmartLink\n                href={href ?? ''}\n                className=\"highlight-link\"\n                target={target}\n              >\n                {title}\n              </SmartLink>\n            ) : (\n              <span>{title}</span>\n            )}\n          </h3>\n        </Box>\n\n        {/* Row 3: renderedIconList */}\n        {renderedIconList && (\n          <Box\n            sx={{\n              '& .icon-list.themed path, & .icon-list.themed circle': {\n                fill: 'white',\n              },\n            }}\n          >\n            {renderedIconList}\n          </Box>\n        )}\n\n        {/* Row 4: left content, optionally alongside right content in an adaptive two-column layout */}\n        {(() => {\n          const leftContent = (\n            <>\n              {/* Column 1: icon (floated left) with subTitle and description flowing around */}\n              {icon && (\n                <Box\n                  sx={{\n                    width: '120px',\n                    float: 'left',\n                    paddingRight: '24px',\n                    paddingBottom: '24px',\n                    display: 'flex',\n                    justifyContent: 'center',\n                  }}\n                >\n                  {icon}\n                </Box>\n              )}\n              {subTitle && <div className=\"SRC-author\">{subTitle}</div>}\n              <CollapsibleDescription\n                description={description}\n                descriptionSubTitle={descriptionSubTitle}\n                descriptionConfig={descriptionConfiguration}\n              />\n              {sustainabilityScorecard && (\n                <SustainabilityScorecard\n                  metricsConfig={sustainabilityScorecard.metricsConfig}\n                  searchParamKey={sustainabilityScorecard.searchParamKey}\n                  filterColumn={sustainabilityScorecard.filterColumn}\n                  scoreDescriptorColumnName={\n                    sustainabilityScorecard.scoreDescriptorColumnName\n                  }\n                  queryRequest={sustainabilityScorecard.queryRequest}\n                  sustainabilityReportLink={\n                    sustainabilityScorecard.sustainabilityReportLink\n                  }\n                  sx={{\n                    background: 'rgba(0, 0, 0, 0.10)',\n                    marginTop: '30px',\n                    ...sustainabilityScorecard.sx,\n                  }}\n                />\n              )}\n              <Box sx={{ clear: 'both', pb: 'var(--baseline-grid)' }} />\n            </>\n          )\n\n          const rightContent =\n            titleAreaRightContent || cardTopContent || values?.length ? (\n              /* Column 2: titleAreaRightContent, cardTopContent, CardFooter */\n              <>\n                {titleAreaRightContent && (\n                  <div className=\"SRC-cardTitleAreaDetails\">\n                    {titleAreaRightContent}\n                  </div>\n                )}\n                {cardTopContent && (\n                  <div className=\"SRC-cardContent\">{cardTopContent}</div>\n                )}\n                {values && (\n                  <Box sx={{ '&& .SRC-cardMetadata': { paddingTop: 0 } }}>\n                    <CardFooter\n                      isHeader={true}\n                      secondaryLabelLimit={secondaryLabelLimit}\n                      values={values}\n                    />\n                  </Box>\n                )}\n              </>\n            ) : undefined\n\n          return rightContent ? (\n            <AdaptiveTwoColumnLayout\n              stackRatioThreshold={0.45}\n              sx={{ marginTop: '24px' }}\n              leftContent={leftContent}\n              rightContent={rightContent}\n            />\n          ) : (\n            <Box sx={{ marginTop: '24px' }}>{leftContent}</Box>\n          )\n        })()}\n      </Container>\n    </Box>\n  )\n})\n\nconst HeaderCard = forwardRef(function HeaderCard(\n  props: HeaderCardProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const { headerCardVariant = 'HeaderCard' } = props\n  if (headerCardVariant === 'HeaderCardV2') {\n    return <HeaderCardV2 {...props} ref={ref} />\n  }\n  return <HeaderCardClassic {...props} ref={ref} />\n})\n\nexport default HeaderCard\n"],"mappings":"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"}

package/dist/components/HelpPopover/HelpPopover.js.map

@@ -1 +1 @@
-{"version":3,"file":"HelpPopover.js","names":[],"sources":["../../../src/components/HelpPopover/HelpPopover.tsx"],"sourcesContent":["import { MarkdownPopover } from '../Markdown/MarkdownPopover'\nimport { ButtonProps, SxProps, TooltipProps } from '@mui/material'\nimport { HelpOutlineTwoTone } from '@mui/icons-material'\n\nexport type HelpPopoverProps = {\n  markdownText: string\n  helpUrl?: string\n  placement?: TooltipProps['placement']\n  showCloseButton?: boolean\n  className?: string\n  containerSx?: SxProps\n  iconSx?: SxProps\n  Icon?: React.ComponentType<{ className?: string; sx?: SxProps }>\n}\n\nexport function HelpPopover({\n  markdownText,\n  helpUrl,\n  placement = 'bottom',\n  showCloseButton = true,\n  className = '',\n  iconSx,\n  containerSx,\n  Icon = HelpOutlineTwoTone,\n}: HelpPopoverProps) {\n  const actionButtonConfig = helpUrl\n    ? {\n        content: <>More info</>,\n        closePopoverOnClick: true,\n        onClick: () => window.open(helpUrl, '_blank'),\n        color: 'primary' as ButtonProps['color'],\n      }\n    : undefined\n  return (\n    <>\n      <MarkdownPopover\n        contentProps={{ markdown: markdownText }}\n        placement={placement}\n        actionButton={actionButtonConfig}\n        showCloseButton={showCloseButton}\n        maxWidth=\"350px\"\n        containerSx={containerSx}\n      >\n        <Icon className={`HelpButton ${className}`} sx={iconSx} />\n      </MarkdownPopover>\n    </>\n  )\n}\n\nexport default HelpPopover\n"],"mappings":";;;;AAeA,SAAgB,EAAY,EAC1B,iBACA,YACA,eAAY,UACZ,qBAAkB,IAClB,eAAY,IACZ,WACA,gBACA,UAAO,KACY;AASnB,QACE,kBAAA,GAAA,EAAA,UACE,kBAAC,GAAD;EACE,cAAc,EAAE,UAAU,GAAc;EAC7B;EACX,cAbqB,IACvB;GACE,SAAS,kBAAA,GAAA,EAAA,UAAE,aAAY,CAAA;GACvB,qBAAqB;GACrB,eAAe,OAAO,KAAK,GAAS,SAAS;GAC7C,OAAO;GACR,GACD,KAAA;EAOmB;EACjB,UAAS;EACI;YAEb,kBAAC,GAAD;GAAM,WAAW,cAAc;GAAa,IAAI;GAAU,CAAA;EAC1C,CAAA,EACjB,CAAA"}
+{"version":3,"file":"HelpPopover.js","names":[],"sources":["../../../src/components/HelpPopover/HelpPopover.tsx"],"sourcesContent":["import { MarkdownPopover } from '../Markdown/MarkdownPopover'\nimport { ButtonProps, SxProps, TooltipProps } from '@mui/material'\nimport { HelpOutlineTwoTone } from '@mui/icons-material'\n\nexport type HelpPopoverProps = {\n  markdownText: string\n  helpUrl?: string\n  placement?: TooltipProps['placement']\n  showCloseButton?: boolean\n  className?: string\n  containerSx?: SxProps\n  iconSx?: SxProps\n  Icon?: React.ComponentType<{ className?: string; sx?: SxProps }>\n}\n\nexport function HelpPopover({\n  markdownText,\n  helpUrl,\n  placement = 'bottom',\n  showCloseButton = true,\n  className = '',\n  iconSx,\n  containerSx,\n  Icon = HelpOutlineTwoTone,\n}: HelpPopoverProps) {\n  const actionButtonConfig = helpUrl\n    ? {\n        content: <>More info</>,\n        closePopoverOnClick: true,\n        onClick: () => window.open(helpUrl, '_blank'),\n        color: 'primary' as ButtonProps['color'],\n      }\n    : undefined\n  return (\n    <>\n      <MarkdownPopover\n        contentProps={{ markdown: markdownText }}\n        placement={placement}\n        actionButton={actionButtonConfig}\n        showCloseButton={showCloseButton}\n        maxWidth=\"350px\"\n        containerSx={containerSx}\n      >\n        <Icon className={`HelpButton ${className}`} sx={iconSx} />\n      </MarkdownPopover>\n    </>\n  )\n}\n\nexport default HelpPopover\n"],"mappings":";;;;AAeA,SAAgB,EAAY,EAC1B,iBACA,YACA,eAAY,UACZ,qBAAkB,IAClB,eAAY,IACZ,WACA,gBACA,UAAO,KACY;CASnB,OACE,kBAAA,GAAA,EAAA,UACE,kBAAC,GAAD;EACE,cAAc,EAAE,UAAU,EAAa;EAC5B;EACX,cAbqB,IACvB;GACE,SAAS,kBAAA,GAAA,EAAA,UAAE,YAAW,CAAA;GACtB,qBAAqB;GACrB,eAAe,OAAO,KAAK,GAAS,QAAQ;GAC5C,OAAO;EACT,IACA,KAAA;EAOmB;EACjB,UAAS;EACI;YAEb,kBAAC,GAAD;GAAM,WAAW,cAAc;GAAa,IAAI;EAAS,CAAA;CAC1C,CAAA,EACjB,CAAA;AAEN"}

package/dist/components/HexGrid/HexGrid.js.map

@@ -1 +1 @@
-{"version":3,"file":"HexGrid.js","names":[],"sources":["../../../src/components/HexGrid/HexGrid.tsx"],"sourcesContent":["import styles from './HexGrid.module.scss'\nimport { parseEntityIdFromSqlStatement } from '@/utils/functions/SqlFunctions'\nimport {\n  FileHandleAssociateType,\n  QueryBundleRequest,\n} from '@sage-bionetworks/synapse-types'\nimport { SynapseConstants } from '@/utils'\nimport { useGetFullTableQueryResults } from '@/synapse-queries/entity/useGetQueryResultBundle'\nimport { ImageFileHandle } from '@/components/widgets/ImageFileHandle'\nimport { getFieldIndex } from '@/utils/functions/queryUtils'\nimport { ButtonBase, Typography } from '@mui/material'\n\n// Column values resolved by name so consumers don't need the indices that are only known inside HexGrid.\nexport type HexRowData = {\n  title: string\n  imageFileHandleId: string | null\n  description: string | null\n  entityId: string\n}\n\ntype HexGridProps = {\n  sql: string\n  titleColName: string\n  imageColName: string\n  descriptionColName: string\n  onRowClick?: (rowData: HexRowData) => void\n}\n\nfunction HexGrid({\n  sql,\n  titleColName,\n  imageColName,\n  descriptionColName,\n  onRowClick,\n}: HexGridProps) {\n  const entityId = parseEntityIdFromSqlStatement(sql)\n  const queryBundleRequest: QueryBundleRequest = {\n    entityId,\n    query: { sql },\n    partMask:\n      SynapseConstants.BUNDLE_MASK_QUERY_SELECT_COLUMNS |\n      SynapseConstants.BUNDLE_MASK_QUERY_RESULTS,\n    concreteType: 'org.sagebionetworks.repo.model.table.QueryBundleRequest',\n  }\n\n  const { data: queryResultBundle } =\n    useGetFullTableQueryResults(queryBundleRequest)\n\n  const dataRows = queryResultBundle?.queryResult?.queryResults.rows ?? []\n\n  const titleColIndex = getFieldIndex(titleColName, queryResultBundle)\n\n  const imageColIndex = getFieldIndex(imageColName, queryResultBundle)\n\n  const descColIndex = getFieldIndex(descriptionColName, queryResultBundle)\n\n  return (\n    <div className={styles.hexSlat}>\n      <div className={styles.gridWrapper}>\n        <ul className={styles.hexGrid}>\n          {dataRows.map(row => (\n            <ButtonBase\n              component=\"li\"\n              key={row.rowId}\n              className={styles.hex}\n              onClick={() =>\n                onRowClick?.({\n                  title: row.values[titleColIndex] ?? '',\n                  imageFileHandleId: row.values[imageColIndex] ?? null,\n                  description: row.values[descColIndex] ?? null,\n                  entityId,\n                })\n              }\n            >\n              <div className={styles.hexIn}>\n                <Typography variant=\"headline3\" className={styles.hexTitle}>\n                  {row.values[titleColIndex]}\n                </Typography>\n                <ImageFileHandle\n                  fileHandleAssociation={{\n                    fileHandleId: row.values[imageColIndex] ?? '',\n                    associateObjectId: entityId,\n                    associateObjectType: FileHandleAssociateType.TableEntity,\n                  }}\n                  imgProps={{ className: styles.hexIcon }}\n                />\n              </div>\n            </ButtonBase>\n          ))}\n        </ul>\n      </div>\n    </div>\n  )\n}\n\nexport default HexGrid\n"],"mappings":";;;;;;;;;;;AA4BA,SAAS,EAAQ,EACf,QACA,iBACA,iBACA,uBACA,iBACe;CACf,IAAM,IAAW,EAA8B,EAAI,EAU7C,EAAE,MAAM,MACZ,EAA4B;EAT5B;EACA,OAAO,EAAE,QAAK;EACd,UACE;EAEF,cAAc;EAIc,CAAmB,EAE3C,IAAW,GAAmB,aAAa,aAAa,QAAQ,EAAE,EAElE,IAAgB,EAAc,GAAc,EAAkB,EAE9D,IAAgB,EAAc,GAAc,EAAkB,EAE9D,IAAe,EAAc,GAAoB,EAAkB;AAEzE,QACE,kBAAC,OAAD;EAAK,WAAW,EAAO;YACrB,kBAAC,OAAD;GAAK,WAAW,EAAO;aACrB,kBAAC,MAAD;IAAI,WAAW,EAAO;cACnB,EAAS,KAAI,MACZ,kBAAC,GAAD;KACE,WAAU;KAEV,WAAW,EAAO;KAClB,eACE,IAAa;MACX,OAAO,EAAI,OAAO,MAAkB;MACpC,mBAAmB,EAAI,OAAO,MAAkB;MAChD,aAAa,EAAI,OAAO,MAAiB;MACzC;MACD,CAAC;eAGJ,kBAAC,OAAD;MAAK,WAAW,EAAO;gBAAvB,CACE,kBAAC,GAAD;OAAY,SAAQ;OAAY,WAAW,EAAO;iBAC/C,EAAI,OAAO;OACD,CAAA,EACb,kBAAC,GAAD;OACE,uBAAuB;QACrB,cAAc,EAAI,OAAO,MAAkB;QAC3C,mBAAmB;QACnB,qBAAqB,EAAwB;QAC9C;OACD,UAAU,EAAE,WAAW,EAAO,SAAS;OACvC,CAAA,CACE;;KACK,EAxBN,EAAI,MAwBE,CACb;IACC,CAAA;GACD,CAAA;EACF,CAAA"}
+{"version":3,"file":"HexGrid.js","names":[],"sources":["../../../src/components/HexGrid/HexGrid.tsx"],"sourcesContent":["import styles from './HexGrid.module.scss'\nimport { parseEntityIdFromSqlStatement } from '@/utils/functions/SqlFunctions'\nimport {\n  FileHandleAssociateType,\n  QueryBundleRequest,\n} from '@sage-bionetworks/synapse-types'\nimport { SynapseConstants } from '@/utils'\nimport { useGetFullTableQueryResults } from '@/synapse-queries/entity/useGetQueryResultBundle'\nimport { ImageFileHandle } from '@/components/widgets/ImageFileHandle'\nimport { getFieldIndex } from '@/utils/functions/queryUtils'\nimport { ButtonBase, Typography } from '@mui/material'\n\n// Column values resolved by name so consumers don't need the indices that are only known inside HexGrid.\nexport type HexRowData = {\n  title: string\n  imageFileHandleId: string | null\n  description: string | null\n  entityId: string\n}\n\ntype HexGridProps = {\n  sql: string\n  titleColName: string\n  imageColName: string\n  descriptionColName: string\n  onRowClick?: (rowData: HexRowData) => void\n}\n\nfunction HexGrid({\n  sql,\n  titleColName,\n  imageColName,\n  descriptionColName,\n  onRowClick,\n}: HexGridProps) {\n  const entityId = parseEntityIdFromSqlStatement(sql)\n  const queryBundleRequest: QueryBundleRequest = {\n    entityId,\n    query: { sql },\n    partMask:\n      SynapseConstants.BUNDLE_MASK_QUERY_SELECT_COLUMNS |\n      SynapseConstants.BUNDLE_MASK_QUERY_RESULTS,\n    concreteType: 'org.sagebionetworks.repo.model.table.QueryBundleRequest',\n  }\n\n  const { data: queryResultBundle } =\n    useGetFullTableQueryResults(queryBundleRequest)\n\n  const dataRows = queryResultBundle?.queryResult?.queryResults.rows ?? []\n\n  const titleColIndex = getFieldIndex(titleColName, queryResultBundle)\n\n  const imageColIndex = getFieldIndex(imageColName, queryResultBundle)\n\n  const descColIndex = getFieldIndex(descriptionColName, queryResultBundle)\n\n  return (\n    <div className={styles.hexSlat}>\n      <div className={styles.gridWrapper}>\n        <ul className={styles.hexGrid}>\n          {dataRows.map(row => (\n            <ButtonBase\n              component=\"li\"\n              key={row.rowId}\n              className={styles.hex}\n              onClick={() =>\n                onRowClick?.({\n                  title: row.values[titleColIndex] ?? '',\n                  imageFileHandleId: row.values[imageColIndex] ?? null,\n                  description: row.values[descColIndex] ?? null,\n                  entityId,\n                })\n              }\n            >\n              <div className={styles.hexIn}>\n                <Typography variant=\"headline3\" className={styles.hexTitle}>\n                  {row.values[titleColIndex]}\n                </Typography>\n                <ImageFileHandle\n                  fileHandleAssociation={{\n                    fileHandleId: row.values[imageColIndex] ?? '',\n                    associateObjectId: entityId,\n                    associateObjectType: FileHandleAssociateType.TableEntity,\n                  }}\n                  imgProps={{ className: styles.hexIcon }}\n                />\n              </div>\n            </ButtonBase>\n          ))}\n        </ul>\n      </div>\n    </div>\n  )\n}\n\nexport default HexGrid\n"],"mappings":";;;;;;;;;;;AA4BA,SAAS,EAAQ,EACf,QACA,iBACA,iBACA,uBACA,iBACe;CACf,IAAM,IAAW,EAA8B,CAAG,GAU5C,EAAE,MAAM,MACZ,EAA4B;EAT5B;EACA,OAAO,EAAE,OAAI;EACb,UACE;EAEF,cAAc;CAIc,CAAkB,GAE1C,IAAW,GAAmB,aAAa,aAAa,QAAQ,CAAC,GAEjE,IAAgB,EAAc,GAAc,CAAiB,GAE7D,IAAgB,EAAc,GAAc,CAAiB,GAE7D,IAAe,EAAc,GAAoB,CAAiB;CAExE,OACE,kBAAC,OAAD;EAAK,WAAW,EAAO;YACrB,kBAAC,OAAD;GAAK,WAAW,EAAO;aACrB,kBAAC,MAAD;IAAI,WAAW,EAAO;cACnB,EAAS,KAAI,MACZ,kBAAC,GAAD;KACE,WAAU;KAEV,WAAW,EAAO;KAClB,eACE,IAAa;MACX,OAAO,EAAI,OAAO,MAAkB;MACpC,mBAAmB,EAAI,OAAO,MAAkB;MAChD,aAAa,EAAI,OAAO,MAAiB;MACzC;KACF,CAAC;eAGH,kBAAC,OAAD;MAAK,WAAW,EAAO;gBAAvB,CACE,kBAAC,GAAD;OAAY,SAAQ;OAAY,WAAW,EAAO;iBAC/C,EAAI,OAAO;MACF,CAAA,GACZ,kBAAC,GAAD;OACE,uBAAuB;QACrB,cAAc,EAAI,OAAO,MAAkB;QAC3C,mBAAmB;QACnB,qBAAqB,EAAwB;OAC/C;OACA,UAAU,EAAE,WAAW,EAAO,QAAQ;MACvC,CAAA,CACE;;IACK,GAxBL,EAAI,KAwBC,CACb;GACC,CAAA;EACD,CAAA;CACF,CAAA;AAET"}

package/dist/components/IDUReport/IDUReport.js.map

@@ -1 +1 @@
-{"version":3,"file":"IDUReport.js","names":[],"sources":["../../../src/components/IDUReport/IDUReport.tsx"],"sourcesContent":["import { useGetApprovedSubmissionInfoInfinite } from '@/synapse-queries'\nimport { SubmissionInfo } from '@sage-bionetworks/synapse-types'\nimport { Fragment, useEffect } from 'react'\nimport { useInView } from 'react-intersection-observer'\nimport {\n  LoadingSubmissionInfoCard,\n  SubmissionInfoCard,\n} from './IDUReportSubmissionInfo'\n\nexport type IDUReportProps = {\n  accessRequirementId: string\n}\n\nexport function IDUReport(props: IDUReportProps): React.ReactNode {\n  const { accessRequirementId } = props\n  // Load the next page when this ref comes into view.\n  const { ref, inView } = useInView()\n\n  const {\n    data,\n    status,\n    isLoading,\n    hasNextPage,\n    isFetchingNextPage,\n    fetchNextPage,\n  } = useGetApprovedSubmissionInfoInfinite(accessRequirementId, {\n    throwOnError: true,\n  })\n  useEffect(() => {\n    if (\n      status === 'success' &&\n      !isFetchingNextPage &&\n      hasNextPage &&\n      fetchNextPage &&\n      inView\n    ) {\n      fetchNextPage()\n    }\n  }, [status, hasNextPage, isFetchingNextPage, fetchNextPage, inView])\n\n  const allRows = data?.pages.flatMap(page => page.results) ?? []\n\n  return (\n    <>\n      {allRows.length > 0 && (\n        <div className=\"IDUReport\">\n          {allRows.map((item: SubmissionInfo) => {\n            return (\n              <Fragment key={JSON.stringify(item)}>\n                <SubmissionInfoCard info={item} />\n                <hr />\n              </Fragment>\n            )\n          })}\n          {/* To trigger loading the next page */}\n          <div ref={ref} />\n        </div>\n      )}\n      {(isLoading || isFetchingNextPage) && (\n        <>\n          <LoadingSubmissionInfoCard />\n          <LoadingSubmissionInfoCard />\n        </>\n      )}\n    </>\n  )\n}\nexport default IDUReport\n"],"mappings":";;;;;;;AAaA,SAAgB,EAAU,GAAwC;CAChE,IAAM,EAAE,2BAAwB,GAE1B,EAAE,QAAK,cAAW,GAAW,EAE7B,EACJ,SACA,WACA,cACA,gBACA,uBACA,qBACE,EAAqC,GAAqB,EAC5D,cAAc,IACf,CAAC;AACF,SAAgB;AACd,EACE,MAAW,aACX,CAAC,KACD,KACA,KACA,KAEA,GAAe;IAEhB;EAAC;EAAQ;EAAa;EAAoB;EAAe;EAAO,CAAC;CAEpE,IAAM,IAAU,GAAM,MAAM,SAAQ,MAAQ,EAAK,QAAQ,IAAI,EAAE;AAE/D,QACE,kBAAA,GAAA,EAAA,UAAA,CACG,EAAQ,SAAS,KAChB,kBAAC,OAAD;EAAK,WAAU;YAAf,CACG,EAAQ,KAAK,MAEV,kBAAC,GAAD,EAAA,UAAA,CACE,kBAAC,GAAD,EAAoB,MAAM,GAAQ,CAAA,EAClC,kBAAC,MAAD,EAAM,CAAA,CACG,EAAA,EAHI,KAAK,UAAU,EAAK,CAGxB,CAEb,EAEF,kBAAC,OAAD,EAAU,QAAO,CAAA,CACb;MAEN,KAAa,MACb,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,GAAD,EAA6B,CAAA,EAC7B,kBAAC,GAAD,EAA6B,CAAA,CAC5B,EAAA,CAAA,CAEJ,EAAA,CAAA"}
+{"version":3,"file":"IDUReport.js","names":[],"sources":["../../../src/components/IDUReport/IDUReport.tsx"],"sourcesContent":["import { useGetApprovedSubmissionInfoInfinite } from '@/synapse-queries'\nimport { SubmissionInfo } from '@sage-bionetworks/synapse-types'\nimport { Fragment, useEffect } from 'react'\nimport { useInView } from 'react-intersection-observer'\nimport {\n  LoadingSubmissionInfoCard,\n  SubmissionInfoCard,\n} from './IDUReportSubmissionInfo'\n\nexport type IDUReportProps = {\n  accessRequirementId: string\n}\n\nexport function IDUReport(props: IDUReportProps): React.ReactNode {\n  const { accessRequirementId } = props\n  // Load the next page when this ref comes into view.\n  const { ref, inView } = useInView()\n\n  const {\n    data,\n    status,\n    isLoading,\n    hasNextPage,\n    isFetchingNextPage,\n    fetchNextPage,\n  } = useGetApprovedSubmissionInfoInfinite(accessRequirementId, {\n    throwOnError: true,\n  })\n  useEffect(() => {\n    if (\n      status === 'success' &&\n      !isFetchingNextPage &&\n      hasNextPage &&\n      fetchNextPage &&\n      inView\n    ) {\n      fetchNextPage()\n    }\n  }, [status, hasNextPage, isFetchingNextPage, fetchNextPage, inView])\n\n  const allRows = data?.pages.flatMap(page => page.results) ?? []\n\n  return (\n    <>\n      {allRows.length > 0 && (\n        <div className=\"IDUReport\">\n          {allRows.map((item: SubmissionInfo) => {\n            return (\n              <Fragment key={JSON.stringify(item)}>\n                <SubmissionInfoCard info={item} />\n                <hr />\n              </Fragment>\n            )\n          })}\n          {/* To trigger loading the next page */}\n          <div ref={ref} />\n        </div>\n      )}\n      {(isLoading || isFetchingNextPage) && (\n        <>\n          <LoadingSubmissionInfoCard />\n          <LoadingSubmissionInfoCard />\n        </>\n      )}\n    </>\n  )\n}\nexport default IDUReport\n"],"mappings":";;;;;;;AAaA,SAAgB,EAAU,GAAwC;CAChE,IAAM,EAAE,2BAAwB,GAE1B,EAAE,QAAK,cAAW,EAAU,GAE5B,EACJ,SACA,WACA,cACA,gBACA,uBACA,qBACE,EAAqC,GAAqB,EAC5D,cAAc,GAChB,CAAC;CACD,QAAgB;EACd,AACE,MAAW,aACX,CAAC,KACD,KACA,KACA,KAEA,EAAc;CAElB,GAAG;EAAC;EAAQ;EAAa;EAAoB;EAAe;CAAM,CAAC;CAEnE,IAAM,IAAU,GAAM,MAAM,SAAQ,MAAQ,EAAK,OAAO,KAAK,CAAC;CAE9D,OACE,kBAAA,GAAA,EAAA,UAAA,CACG,EAAQ,SAAS,KAChB,kBAAC,OAAD;EAAK,WAAU;YAAf,CACG,EAAQ,KAAK,MAEV,kBAAC,GAAD,EAAA,UAAA,CACE,kBAAC,GAAD,EAAoB,MAAM,EAAO,CAAA,GACjC,kBAAC,MAAD,CAAK,CAAA,CACG,EAAA,GAHK,KAAK,UAAU,CAAI,CAGxB,CAEb,GAED,kBAAC,OAAD,EAAU,OAAM,CAAA,CACb;MAEL,KAAa,MACb,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,GAAD,CAA4B,CAAA,GAC5B,kBAAC,GAAD,CAA4B,CAAA,CAC5B,EAAA,CAAA,CAEJ,EAAA,CAAA;AAEN"}

package/dist/components/IDUReport/IDUReportSubmissionInfo.js.map

@@ -1 +1 @@
-{"version":3,"file":"IDUReportSubmissionInfo.js","names":[],"sources":["../../../src/components/IDUReport/IDUReportSubmissionInfo.tsx"],"sourcesContent":["import { formatDate } from '@/utils/functions/DateFormatter'\nimport { Skeleton } from '@mui/material'\nimport { SubmissionInfo } from '@sage-bionetworks/synapse-types'\nimport dayjs from 'dayjs'\nimport MarkdownSynapse from '../Markdown/MarkdownSynapse'\nimport { SkeletonTable } from '../Skeleton/SkeletonTable'\nimport { UserBadge } from '../UserCard/UserBadge'\n\nexport type SubmissionInfoCardProps = {\n  info: SubmissionInfo\n}\n\nexport function SubmissionInfoCard({ info }: SubmissionInfoCardProps) {\n  return (\n    <>\n      {info && (\n        <div className=\"SubmissionInfoCard\">\n          <strong> Project Lead: </strong> <span>{info.projectLead}</span>{' '}\n          <br />\n          <strong> Institution: </strong> <span>{info.institution}</span> <br />\n          <strong> Data Access Request Submitted By: </strong>{' '}\n          <UserBadge userId={info.submittedBy} /> <br />\n          <strong>\n            {' '}\n            Intended Data Use Statement &#40;accepted on{' '}\n            {formatDate(dayjs(info.modifiedOn), 'M/D/YYYY')}&#41;:\n          </strong>\n          <MarkdownSynapse markdown={info.intendedDataUseStatement} />\n          {info.accessorChanges &&\n            info.accessorChanges.map(accessorChange => (\n              <div key={`${accessorChange.userId}-${accessorChange.type}`}>\n                <UserBadge userId={accessorChange.userId} />{' '}\n                {accessorChange.type}\n              </div>\n            ))}\n        </div>\n      )}\n    </>\n  )\n}\n\nexport function LoadingSubmissionInfoCard() {\n  return (\n    <div className=\"SubmissionInfoCard\">\n      <SkeletonTable numCols={1} numRows={4} />\n      <Skeleton variant=\"rectangular\" width={'100%'} height={80} />\n    </div>\n  )\n}\n"],"mappings":";;;;;;;;AAYA,SAAgB,EAAmB,EAAE,WAAiC;AACpE,QACE,kBAAA,GAAA,EAAA,UACG,KACC,kBAAC,OAAD;EAAK,WAAU;YAAf;GACE,kBAAC,UAAD,EAAA,UAAQ,mBAAwB,CAAA;;GAAC,kBAAC,QAAD,EAAA,UAAO,EAAK,aAAmB,CAAA;GAAC;GACjE,kBAAC,MAAD,EAAM,CAAA;GACN,kBAAC,UAAD,EAAA,UAAQ,kBAAuB,CAAA;;GAAC,kBAAC,QAAD,EAAA,UAAO,EAAK,aAAmB,CAAA;;GAAC,kBAAC,MAAD,EAAM,CAAA;GACtE,kBAAC,UAAD,EAAA,UAAQ,uCAA4C,CAAA;GAAC;GACrD,kBAAC,GAAD,EAAW,QAAQ,EAAK,aAAe,CAAA;;GAAC,kBAAC,MAAD,EAAM,CAAA;GAC9C,kBAAC,UAAD,EAAA,UAAA;IACG;IAAI;IACwC;IAC5C,EAAW,EAAM,EAAK,WAAW,EAAE,WAAW;IAAC;IACzC,EAAA,CAAA;GACT,kBAAC,GAAD,EAAiB,UAAU,EAAK,0BAA4B,CAAA;GAC3D,EAAK,mBACJ,EAAK,gBAAgB,KAAI,MACvB,kBAAC,OAAD,EAAA,UAAA;IACE,kBAAC,GAAD,EAAW,QAAQ,EAAe,QAAU,CAAA;IAAC;IAC5C,EAAe;IACZ,EAAA,EAHI,GAAG,EAAe,OAAO,GAAG,EAAe,OAG/C,CACN;GACA;KAEP,CAAA;;AAIP,SAAgB,IAA4B;AAC1C,QACE,kBAAC,OAAD;EAAK,WAAU;YAAf,CACE,kBAAC,GAAD;GAAe,SAAS;GAAG,SAAS;GAAK,CAAA,EACzC,kBAAC,GAAD;GAAU,SAAQ;GAAc,OAAO;GAAQ,QAAQ;GAAM,CAAA,CACzD"}
+{"version":3,"file":"IDUReportSubmissionInfo.js","names":[],"sources":["../../../src/components/IDUReport/IDUReportSubmissionInfo.tsx"],"sourcesContent":["import { formatDate } from '@/utils/functions/DateFormatter'\nimport { Skeleton } from '@mui/material'\nimport { SubmissionInfo } from '@sage-bionetworks/synapse-types'\nimport dayjs from 'dayjs'\nimport MarkdownSynapse from '../Markdown/MarkdownSynapse'\nimport { SkeletonTable } from '../Skeleton/SkeletonTable'\nimport { UserBadge } from '../UserCard/UserBadge'\n\nexport type SubmissionInfoCardProps = {\n  info: SubmissionInfo\n}\n\nexport function SubmissionInfoCard({ info }: SubmissionInfoCardProps) {\n  return (\n    <>\n      {info && (\n        <div className=\"SubmissionInfoCard\">\n          <strong> Project Lead: </strong> <span>{info.projectLead}</span>{' '}\n          <br />\n          <strong> Institution: </strong> <span>{info.institution}</span> <br />\n          <strong> Data Access Request Submitted By: </strong>{' '}\n          <UserBadge userId={info.submittedBy} /> <br />\n          <strong>\n            {' '}\n            Intended Data Use Statement &#40;accepted on{' '}\n            {formatDate(dayjs(info.modifiedOn), 'M/D/YYYY')}&#41;:\n          </strong>\n          <MarkdownSynapse markdown={info.intendedDataUseStatement} />\n          {info.accessorChanges &&\n            info.accessorChanges.map(accessorChange => (\n              <div key={`${accessorChange.userId}-${accessorChange.type}`}>\n                <UserBadge userId={accessorChange.userId} />{' '}\n                {accessorChange.type}\n              </div>\n            ))}\n        </div>\n      )}\n    </>\n  )\n}\n\nexport function LoadingSubmissionInfoCard() {\n  return (\n    <div className=\"SubmissionInfoCard\">\n      <SkeletonTable numCols={1} numRows={4} />\n      <Skeleton variant=\"rectangular\" width={'100%'} height={80} />\n    </div>\n  )\n}\n"],"mappings":";;;;;;;;AAYA,SAAgB,EAAmB,EAAE,WAAiC;CACpE,OACE,kBAAA,GAAA,EAAA,UACG,KACC,kBAAC,OAAD;EAAK,WAAU;YAAf;GACE,kBAAC,UAAD,EAAA,UAAQ,kBAAuB,CAAA;GAAC;GAAC,kBAAC,QAAD,EAAA,UAAO,EAAK,YAAkB,CAAA;GAAE;GACjE,kBAAC,MAAD,CAAK,CAAA;GACL,kBAAC,UAAD,EAAA,UAAQ,iBAAsB,CAAA;GAAC;GAAC,kBAAC,QAAD,EAAA,UAAO,EAAK,YAAkB,CAAA;GAAC;GAAC,kBAAC,MAAD,CAAK,CAAA;GACrE,kBAAC,UAAD,EAAA,UAAQ,sCAA2C,CAAA;GAAE;GACrD,kBAAC,GAAD,EAAW,QAAQ,EAAK,YAAc,CAAA;GAAC;GAAC,kBAAC,MAAD,CAAK,CAAA;GAC7C,kBAAC,UAAD,EAAA,UAAA;IACG;IAAI;IACwC;IAC5C,EAAW,EAAM,EAAK,UAAU,GAAG,UAAU;IAAE;GAC1C,EAAA,CAAA;GACR,kBAAC,GAAD,EAAiB,UAAU,EAAK,yBAA2B,CAAA;GAC1D,EAAK,mBACJ,EAAK,gBAAgB,KAAI,MACvB,kBAAC,OAAD,EAAA,UAAA;IACE,kBAAC,GAAD,EAAW,QAAQ,EAAe,OAAS,CAAA;IAAE;IAC5C,EAAe;GACb,EAAA,GAHK,GAAG,EAAe,OAAO,GAAG,EAAe,MAGhD,CACN;EACA;IAEP,CAAA;AAEN;AAEA,SAAgB,IAA4B;CAC1C,OACE,kBAAC,OAAD;EAAK,WAAU;YAAf,CACE,kBAAC,GAAD;GAAe,SAAS;GAAG,SAAS;EAAI,CAAA,GACxC,kBAAC,GAAD;GAAU,SAAQ;GAAc,OAAO;GAAQ,QAAQ;EAAK,CAAA,CACzD;;AAET"}

package/dist/components/Icon/Icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.js","names":[],"sources":["../../../src/components/Icon/Icon.tsx"],"sourcesContent":["import { ReactComponent as chart2Svg } from '@/assets/icons/chart2.svg'\nimport { ReactComponent as Data2Svg } from '@/assets/icons/Data2.svg'\nimport { ReactComponent as DNA_TwoSvg } from '@/assets/icons/DNA_Two.svg'\nimport { ReactComponent as fileSvg } from '@/assets/icons/file.svg'\nimport { ReactComponent as institutionSvg } from '@/assets/icons/institution.svg'\nimport { ReactComponent as mouseSvg } from '@/assets/icons/mouse.svg'\nimport { ReactComponent as organizationsSvg } from '@/assets/icons/organizations.svg'\nimport { ReactComponent as personSvg } from '@/assets/icons/person.svg'\nimport { ReactComponent as studyActiveSvg } from '@/assets/icons/study-active.svg'\nimport { ReactComponent as studyCompleteSvg } from '@/assets/icons/study-complete.svg'\nimport { ReactComponent as translationalSvg } from '@/assets/icons/translational.svg'\nimport { ReactComponent as treeHorizontalSvg } from '@/assets/icons/tree_horizontal.svg'\nimport { ReactComponent as standardDataModelSvg } from '@/assets/icons/standardDataModel.svg'\nimport { ReactComponent as Challenge } from '@/assets/icons/Challenge.svg'\nimport {\n  Chart,\n  Close,\n  Collapse,\n  Columns,\n  ColumnsDark,\n  Database,\n  Download,\n  Expand,\n  Explore,\n  ExternalLink,\n  Filter,\n  Program,\n  Project,\n  Publication,\n  Search,\n  Settings,\n  SortDown,\n  SortUp,\n  SqlEditorIcon,\n  Study,\n  ToolClinical,\n  ToolComputational,\n  ToolExperimental,\n  VerticalDots,\n} from '@/assets/themed_icons'\nimport {\n  CHALLENGE,\n  CHART,\n  CHART2,\n  CLINICAL,\n  CLOSE,\n  COLLAPSE,\n  COLUMNS,\n  COLUMNSDARK,\n  COMPUTATIONAL,\n  COMPUTATIONAL_TOOL,\n  CONTRIBUTOR,\n  DATABASE,\n  DATASET,\n  DOWNLOAD,\n  DOWNLOAD_PERMISSION_REQUIRED,\n  EASY_DIFFICULTY,\n  EXPAND,\n  EXPERIMENTAL,\n  EXPERIMENTAL_TOOL,\n  EXPLORE,\n  EXTERNAL_RESOURCE,\n  EXTERNALLINK,\n  FILE,\n  FILTER,\n  FUNDER,\n  GRANT,\n  MEDIUM_DIFFICULTY,\n  MOUSE,\n  ORGANIZATION,\n  PERSON,\n  PROGRAM,\n  PROJECT,\n  PUBLICATION,\n  SEARCH,\n  SETTINGS,\n  SORTDOWN,\n  SORTUP,\n  SQL_EDITOR,\n  STANDARD_DATA_MODEL,\n  STUDY,\n  STUDY_ACTIVE,\n  STUDY_COMPLETE,\n  TOOL,\n  TRANSLATIONAL,\n  TREE_HORIZONTAL,\n  VARIABLE_DIFFICULTY,\n  VERTICAL_DOTS,\n} from '@/utils/SynapseConstants'\nimport { ComponentType } from 'react'\nimport IconSvg from '../IconSvg/IconSvg'\n\nexport type IconOptions = Record<string, string | ComponentType<any>>\n\nexport type IconProps = {\n  type: string\n  iconOptions?: IconOptions\n  value?: string\n  isHeader?: boolean\n  cssClass?: string\n}\n\nconst iconSvgMapping = {\n  clipboard: <IconSvg icon=\"clipboard\" />,\n  [DATASET]: <IconSvg icon=\"dataset\" />,\n  [EXTERNAL_RESOURCE]: <IconSvg icon=\"link\" />,\n}\n\nconst defaultIcons = {\n  [DATABASE]: Database, // this returns svg tag\n  [FUNDER]: Data2Svg,\n  [TOOL]: DNA_TwoSvg,\n  [STUDY_ACTIVE]: studyActiveSvg,\n  [STUDY_COMPLETE]: studyCompleteSvg,\n  // new icons\n  [PUBLICATION]: Publication,\n  [STUDY]: Study,\n  [EXPERIMENTAL]: ToolExperimental,\n  [EXPERIMENTAL_TOOL]: ToolExperimental,\n  [COMPUTATIONAL]: ToolComputational,\n  [COMPUTATIONAL_TOOL]: ToolComputational,\n  [CLINICAL]: ToolClinical,\n  [PROGRAM]: Program,\n  [PROJECT]: Project,\n  [GRANT]: Project,\n  [ORGANIZATION]: organizationsSvg,\n  [PERSON]: personSvg,\n  [MOUSE]: mouseSvg,\n  [TRANSLATIONAL]: translationalSvg,\n  [EXPLORE]: Explore,\n  [SEARCH]: Search,\n  [CHART]: Chart,\n  [FILTER]: Filter,\n  [SQL_EDITOR]: SqlEditorIcon,\n  [DOWNLOAD]: Download,\n  [EXPAND]: Expand,\n  [COLLAPSE]: Collapse,\n  [CLOSE]: Close,\n  [SORTUP]: SortUp,\n  [SORTDOWN]: SortDown,\n  [SETTINGS]: Settings,\n  [COLUMNS]: Columns,\n  [COLUMNSDARK]: ColumnsDark,\n  [CHALLENGE]: Challenge,\n  [VERTICAL_DOTS]: VerticalDots,\n  [CHART2]: chart2Svg,\n  [FILE]: fileSvg,\n  [EXTERNALLINK]: ExternalLink,\n  [CONTRIBUTOR]: institutionSvg,\n  [TREE_HORIZONTAL]: treeHorizontalSvg,\n  [STANDARD_DATA_MODEL]: standardDataModelSvg,\n  [EASY_DIFFICULTY]:\n    'https://s3.amazonaws.com/static.synapse.org/images/easy.svg',\n  [MEDIUM_DIFFICULTY]:\n    'https://s3.amazonaws.com/static.synapse.org/images/medium.svg',\n  [VARIABLE_DIFFICULTY]:\n    'https://s3.amazonaws.com/static.synapse.org/images/variable.svg',\n  [DOWNLOAD_PERMISSION_REQUIRED]:\n    'https://s3.amazonaws.com/static.synapse.org/images/downloadPermissionRequired.svg',\n}\nfunction Icon({ type, value = '', iconOptions, cssClass }: IconProps) {\n  const IconSvg = iconSvgMapping[value] || iconSvgMapping[type]\n  if (IconSvg) return IconSvg\n\n  const iconSet = { ...defaultIcons, ...iconOptions }\n  // see if the value has a corresponding icon, e.g. 'Active' in a studies table\n  // or if the type of card has a corresponding icon, e.g. 'Publication'\n  const IconDefinition = iconSet[value] || iconSet[type]\n  const className = `iconImg ${cssClass ?? ''}`\n  if (IconDefinition == null) {\n    console.warn('Icon type not found:', type)\n    return <></>\n  }\n  if (typeof IconDefinition === 'string') {\n    return <img src={IconDefinition} className={className} />\n  }\n  return (\n    <span>\n      <IconDefinition className={className} />\n    </span>\n  )\n}\nexport default Icon\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsGA,IAAM,IAAiB;CACrB,WAAW,kBAAC,GAAD,EAAS,MAAK,aAAc,CAAA;EACtC,KAAU,kBAAC,GAAD,EAAS,MAAK,WAAY,CAAA;EACpC,IAAoB,kBAAC,GAAD,EAAS,MAAK,QAAS,CAAA;CAC7C,EAEK,KAAe;EAClB,KAAW;EACX,IAAS;EACT,IAAO;EACP,IAAe;EACf,IAAiB;EAEjB,IAAc;EACd,IAAQ;EACR,IAAe;EACf,IAAoB;EACpB,IAAgB;EAChB,KAAqB;EACrB,IAAW;EACX,IAAU;EACV,IAAU;EACV,IAAQ;EACR,IAAe;EACf,IAAS;EACT,IAAQ;EACR,IAAgB;EAChB,IAAU;EACV,IAAS;EACT,IAAQ;EACR,IAAS;EACT,IAAa;EACb,KAAW;EACX,IAAS;EACT,IAAW;EACX,IAAQ;EACR,IAAS;EACT,IAAW;EACX,IAAW;EACX,IAAU;EACV,IAAc;EACd,IAAY;EACZ,IAAgB;EAChB,IAAS;EACT,IAAO;EACP,IAAe;EACf,KAAc;EACd,IAAkB;EAClB,IAAsB;EACtB,KACC;EACD,IACC;EACD,IACC;EACD,KACC;CACH;AACD,SAAS,GAAK,EAAE,SAAM,WAAQ,IAAI,gBAAa,eAAuB;CACpE,IAAM,IAAU,EAAe,MAAU,EAAe;AACxD,KAAI,EAAS,QAAO;CAEpB,IAAM,IAAU;EAAE,GAAG;EAAc,GAAG;EAAa,EAG7C,IAAiB,EAAQ,MAAU,EAAQ,IAC3C,IAAY,WAAW,KAAY;AAQzC,QAPI,KAAkB,QACpB,QAAQ,KAAK,wBAAwB,EAAK,EACnC,kBAAA,IAAA,EAAK,CAAA,IAEV,OAAO,KAAmB,WACrB,kBAAC,OAAD;EAAK,KAAK;EAA2B;EAAa,CAAA,GAGzD,kBAAC,QAAD,EAAA,UACE,kBAAC,GAAD,EAA2B,cAAa,CAAA,EACnC,CAAA"}
+{"version":3,"file":"Icon.js","names":[],"sources":["../../../src/components/Icon/Icon.tsx"],"sourcesContent":["import { ReactComponent as chart2Svg } from '@/assets/icons/chart2.svg'\nimport { ReactComponent as Data2Svg } from '@/assets/icons/Data2.svg'\nimport { ReactComponent as DNA_TwoSvg } from '@/assets/icons/DNA_Two.svg'\nimport { ReactComponent as fileSvg } from '@/assets/icons/file.svg'\nimport { ReactComponent as institutionSvg } from '@/assets/icons/institution.svg'\nimport { ReactComponent as mouseSvg } from '@/assets/icons/mouse.svg'\nimport { ReactComponent as organizationsSvg } from '@/assets/icons/organizations.svg'\nimport { ReactComponent as personSvg } from '@/assets/icons/person.svg'\nimport { ReactComponent as studyActiveSvg } from '@/assets/icons/study-active.svg'\nimport { ReactComponent as studyCompleteSvg } from '@/assets/icons/study-complete.svg'\nimport { ReactComponent as translationalSvg } from '@/assets/icons/translational.svg'\nimport { ReactComponent as treeHorizontalSvg } from '@/assets/icons/tree_horizontal.svg'\nimport { ReactComponent as standardDataModelSvg } from '@/assets/icons/standardDataModel.svg'\nimport { ReactComponent as Challenge } from '@/assets/icons/Challenge.svg'\nimport {\n  Chart,\n  Close,\n  Collapse,\n  Columns,\n  ColumnsDark,\n  Database,\n  Download,\n  Expand,\n  Explore,\n  ExternalLink,\n  Filter,\n  Program,\n  Project,\n  Publication,\n  Search,\n  Settings,\n  SortDown,\n  SortUp,\n  SqlEditorIcon,\n  Study,\n  ToolClinical,\n  ToolComputational,\n  ToolExperimental,\n  VerticalDots,\n} from '@/assets/themed_icons'\nimport {\n  CHALLENGE,\n  CHART,\n  CHART2,\n  CLINICAL,\n  CLOSE,\n  COLLAPSE,\n  COLUMNS,\n  COLUMNSDARK,\n  COMPUTATIONAL,\n  COMPUTATIONAL_TOOL,\n  CONTRIBUTOR,\n  DATABASE,\n  DATASET,\n  DOWNLOAD,\n  DOWNLOAD_PERMISSION_REQUIRED,\n  EASY_DIFFICULTY,\n  EXPAND,\n  EXPERIMENTAL,\n  EXPERIMENTAL_TOOL,\n  EXPLORE,\n  EXTERNAL_RESOURCE,\n  EXTERNALLINK,\n  FILE,\n  FILTER,\n  FUNDER,\n  GRANT,\n  MEDIUM_DIFFICULTY,\n  MOUSE,\n  ORGANIZATION,\n  PERSON,\n  PROGRAM,\n  PROJECT,\n  PUBLICATION,\n  SEARCH,\n  SETTINGS,\n  SORTDOWN,\n  SORTUP,\n  SQL_EDITOR,\n  STANDARD_DATA_MODEL,\n  STUDY,\n  STUDY_ACTIVE,\n  STUDY_COMPLETE,\n  TOOL,\n  TRANSLATIONAL,\n  TREE_HORIZONTAL,\n  VARIABLE_DIFFICULTY,\n  VERTICAL_DOTS,\n} from '@/utils/SynapseConstants'\nimport { ComponentType } from 'react'\nimport IconSvg from '../IconSvg/IconSvg'\n\nexport type IconOptions = Record<string, string | ComponentType<any>>\n\nexport type IconProps = {\n  type: string\n  iconOptions?: IconOptions\n  value?: string\n  isHeader?: boolean\n  cssClass?: string\n}\n\nconst iconSvgMapping = {\n  clipboard: <IconSvg icon=\"clipboard\" />,\n  [DATASET]: <IconSvg icon=\"dataset\" />,\n  [EXTERNAL_RESOURCE]: <IconSvg icon=\"link\" />,\n}\n\nconst defaultIcons = {\n  [DATABASE]: Database, // this returns svg tag\n  [FUNDER]: Data2Svg,\n  [TOOL]: DNA_TwoSvg,\n  [STUDY_ACTIVE]: studyActiveSvg,\n  [STUDY_COMPLETE]: studyCompleteSvg,\n  // new icons\n  [PUBLICATION]: Publication,\n  [STUDY]: Study,\n  [EXPERIMENTAL]: ToolExperimental,\n  [EXPERIMENTAL_TOOL]: ToolExperimental,\n  [COMPUTATIONAL]: ToolComputational,\n  [COMPUTATIONAL_TOOL]: ToolComputational,\n  [CLINICAL]: ToolClinical,\n  [PROGRAM]: Program,\n  [PROJECT]: Project,\n  [GRANT]: Project,\n  [ORGANIZATION]: organizationsSvg,\n  [PERSON]: personSvg,\n  [MOUSE]: mouseSvg,\n  [TRANSLATIONAL]: translationalSvg,\n  [EXPLORE]: Explore,\n  [SEARCH]: Search,\n  [CHART]: Chart,\n  [FILTER]: Filter,\n  [SQL_EDITOR]: SqlEditorIcon,\n  [DOWNLOAD]: Download,\n  [EXPAND]: Expand,\n  [COLLAPSE]: Collapse,\n  [CLOSE]: Close,\n  [SORTUP]: SortUp,\n  [SORTDOWN]: SortDown,\n  [SETTINGS]: Settings,\n  [COLUMNS]: Columns,\n  [COLUMNSDARK]: ColumnsDark,\n  [CHALLENGE]: Challenge,\n  [VERTICAL_DOTS]: VerticalDots,\n  [CHART2]: chart2Svg,\n  [FILE]: fileSvg,\n  [EXTERNALLINK]: ExternalLink,\n  [CONTRIBUTOR]: institutionSvg,\n  [TREE_HORIZONTAL]: treeHorizontalSvg,\n  [STANDARD_DATA_MODEL]: standardDataModelSvg,\n  [EASY_DIFFICULTY]:\n    'https://s3.amazonaws.com/static.synapse.org/images/easy.svg',\n  [MEDIUM_DIFFICULTY]:\n    'https://s3.amazonaws.com/static.synapse.org/images/medium.svg',\n  [VARIABLE_DIFFICULTY]:\n    'https://s3.amazonaws.com/static.synapse.org/images/variable.svg',\n  [DOWNLOAD_PERMISSION_REQUIRED]:\n    'https://s3.amazonaws.com/static.synapse.org/images/downloadPermissionRequired.svg',\n}\nfunction Icon({ type, value = '', iconOptions, cssClass }: IconProps) {\n  const IconSvg = iconSvgMapping[value] || iconSvgMapping[type]\n  if (IconSvg) return IconSvg\n\n  const iconSet = { ...defaultIcons, ...iconOptions }\n  // see if the value has a corresponding icon, e.g. 'Active' in a studies table\n  // or if the type of card has a corresponding icon, e.g. 'Publication'\n  const IconDefinition = iconSet[value] || iconSet[type]\n  const className = `iconImg ${cssClass ?? ''}`\n  if (IconDefinition == null) {\n    console.warn('Icon type not found:', type)\n    return <></>\n  }\n  if (typeof IconDefinition === 'string') {\n    return <img src={IconDefinition} className={className} />\n  }\n  return (\n    <span>\n      <IconDefinition className={className} />\n    </span>\n  )\n}\nexport default Icon\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsGA,IAAM,IAAiB;CACrB,WAAW,kBAAC,GAAD,EAAS,MAAK,YAAa,CAAA;EACrC,KAAU,kBAAC,GAAD,EAAS,MAAK,UAAW,CAAA;EACnC,IAAoB,kBAAC,GAAD,EAAS,MAAK,OAAQ,CAAA;AAC7C,GAEM,KAAe;EAClB,KAAW;EACX,IAAS;EACT,IAAO;EACP,IAAe;EACf,IAAiB;EAEjB,IAAc;EACd,IAAQ;EACR,IAAe;EACf,IAAoB;EACpB,IAAgB;EAChB,KAAqB;EACrB,IAAW;EACX,IAAU;EACV,IAAU;EACV,IAAQ;EACR,IAAe;EACf,IAAS;EACT,IAAQ;EACR,IAAgB;EAChB,IAAU;EACV,IAAS;EACT,IAAQ;EACR,IAAS;EACT,IAAa;EACb,KAAW;EACX,IAAS;EACT,IAAW;EACX,IAAQ;EACR,IAAS;EACT,IAAW;EACX,IAAW;EACX,IAAU;EACV,IAAc;EACd,IAAY;EACZ,IAAgB;EAChB,IAAS;EACT,IAAO;EACP,IAAe;EACf,KAAc;EACd,IAAkB;EAClB,IAAsB;EACtB,KACC;EACD,IACC;EACD,IACC;EACD,KACC;AACJ;AACA,SAAS,GAAK,EAAE,SAAM,WAAQ,IAAI,gBAAa,eAAuB;CACpE,IAAM,IAAU,EAAe,MAAU,EAAe;CACxD,IAAI,GAAS,OAAO;CAEpB,IAAM,IAAU;EAAE,GAAG;EAAc,GAAG;CAAY,GAG5C,IAAiB,EAAQ,MAAU,EAAQ,IAC3C,IAAY,WAAW,KAAY;CAQzC,OAPI,KAAkB,QACpB,QAAQ,KAAK,wBAAwB,CAAI,GAClC,kBAAA,IAAA,CAAI,CAAA,KAET,OAAO,KAAmB,WACrB,kBAAC,OAAD;EAAK,KAAK;EAA2B;CAAY,CAAA,IAGxD,kBAAC,QAAD,EAAA,UACE,kBAAC,GAAD,EAA2B,aAAY,CAAA,EACnC,CAAA;AAEV"}

package/dist/components/IconList.js.map

@@ -1 +1 @@
-{"version":3,"file":"IconList.js","names":[],"sources":["../../src/components/IconList.tsx"],"sourcesContent":["import { UniqueFacetIdentifier } from '@/utils'\nimport { merge } from 'lodash-es'\nimport { useCallback, useMemo } from 'react'\nimport IconSvg, { IconSvgProps } from './IconSvg/IconSvg'\nimport { useQueryContext } from './QueryContext'\n\ntype IconConfigs = {\n  [index: string]: IconSvgProps // if the icon option has the \"label\" set, it will show tooltip in IconSvg\n}\n\nexport type IconListProps = {\n  iconConfigs: IconConfigs\n  iconNames: string[]\n  commonIconProps?: Omit<IconSvgProps, 'icon'>\n  useTheme?: boolean\n  useBackground?: boolean\n}\n\nconst defaultCommonIconProps: IconListProps['commonIconProps'] = {\n  sx: { fontSize: '24px' },\n}\n\nfunction IconList(props: IconListProps) {\n  const {\n    iconConfigs,\n    iconNames,\n    commonIconProps = defaultCommonIconProps,\n    useTheme,\n    useBackground,\n  } = props\n  let noMatch: boolean = false\n  const css = useTheme ? 'icon-list themed' : 'icon-list'\n  const componentCss = useBackground ? `${css} bg-circle` : css\n  const queryContext = useQueryContext()\n  const { addValueToSelectedFacet } = queryContext\n\n  const handleIconClick = useCallback(\n    (dataType: 'string') => {\n      const facet: UniqueFacetIdentifier = {\n        columnName: 'dataType',\n      }\n      addValueToSelectedFacet(facet, dataType)\n    },\n    [addValueToSelectedFacet],\n  )\n\n  const mergedIconConfigs: IconConfigs = useMemo(() => {\n    const mergedIconConfigs: IconConfigs = {}\n    for (const [key, iconProps] of Object.entries(iconConfigs)) {\n      mergedIconConfigs[key] = merge({}, commonIconProps, iconProps)\n    }\n    return mergedIconConfigs\n  }, [iconConfigs, commonIconProps])\n\n  const buildIconList = () => {\n    const unique = Array.from(new Set(iconNames))\n    return unique.map((el: any) => {\n      const iconConfig = mergedIconConfigs[el]\n      // if this data type value doesn't have a matching icon, we use the \"other\" icon\n      if (!iconConfig) {\n        noMatch = true\n        return\n      } else {\n        return (\n          <IconSvg\n            key={el}\n            {...iconConfig}\n            onClick={() => handleIconClick(el)}\n          />\n        )\n      }\n    })\n  }\n\n  return (\n    <span className={componentCss}>\n      {buildIconList()}\n      {noMatch && mergedIconConfigs['other'] ? (\n        <IconSvg {...mergedIconConfigs['other']} />\n      ) : (\n        <></>\n      )}\n    </span>\n  )\n}\n\nexport default IconList\n"],"mappings":";;;;;;;AAkBA,IAAM,IAA2D,EAC/D,IAAI,EAAE,UAAU,QAAQ,EACzB;AAED,SAAS,EAAS,GAAsB;CACtC,IAAM,EACJ,gBACA,cACA,qBAAkB,GAClB,aACA,qBACE,GACA,IAAmB,IACjB,IAAM,IAAW,qBAAqB,aACtC,IAAe,IAAgB,GAAG,EAAI,cAAc,GAEpD,EAAE,+BADa,GACe,EAE9B,IAAkB,GACrB,MAAuB;AAItB,IAAwB,EAFtB,YAAY,YAEU,EAAO,EAAS;IAE1C,CAAC,EAAwB,CAC1B,EAEK,IAAiC,QAAc;EACnD,IAAM,IAAiC,EAAE;AACzC,OAAK,IAAM,CAAC,GAAK,MAAc,OAAO,QAAQ,EAAY,CACxD,GAAkB,KAAO,EAAM,EAAE,EAAE,GAAiB,EAAU;AAEhE,SAAO;IACN,CAAC,GAAa,EAAgB,CAAC;AAsBlC,QACE,kBAAC,QAAD;EAAM,WAAW;YAAjB,CApBe,MAAM,KAAK,IAAI,IAAI,EAAU,CACrC,CAAO,KAAK,MAAY;GAC7B,IAAM,IAAa,EAAkB;AAErC,OAAK,EAIH,QACE,kBAAC,GAAD;IAEE,GAAI;IACJ,eAAe,EAAgB,EAAG;IAClC,EAHK,EAGL;AARJ,OAAU;IAWZ,EAMC,KAAW,EAAkB,QAC5B,kBAAC,GAAD,EAAS,GAAI,EAAkB,OAAY,CAAA,GAE3C,kBAAA,GAAA,EAAK,CAAA,CAEF"}
+{"version":3,"file":"IconList.js","names":[],"sources":["../../src/components/IconList.tsx"],"sourcesContent":["import { UniqueFacetIdentifier } from '@/utils'\nimport { merge } from 'lodash-es'\nimport { useCallback, useMemo } from 'react'\nimport IconSvg, { IconSvgProps } from './IconSvg/IconSvg'\nimport { useQueryContext } from './QueryContext'\n\ntype IconConfigs = {\n  [index: string]: IconSvgProps // if the icon option has the \"label\" set, it will show tooltip in IconSvg\n}\n\nexport type IconListProps = {\n  iconConfigs: IconConfigs\n  iconNames: string[]\n  commonIconProps?: Omit<IconSvgProps, 'icon'>\n  useTheme?: boolean\n  useBackground?: boolean\n}\n\nconst defaultCommonIconProps: IconListProps['commonIconProps'] = {\n  sx: { fontSize: '24px' },\n}\n\nfunction IconList(props: IconListProps) {\n  const {\n    iconConfigs,\n    iconNames,\n    commonIconProps = defaultCommonIconProps,\n    useTheme,\n    useBackground,\n  } = props\n  let noMatch: boolean = false\n  const css = useTheme ? 'icon-list themed' : 'icon-list'\n  const componentCss = useBackground ? `${css} bg-circle` : css\n  const queryContext = useQueryContext()\n  const { addValueToSelectedFacet } = queryContext\n\n  const handleIconClick = useCallback(\n    (dataType: 'string') => {\n      const facet: UniqueFacetIdentifier = {\n        columnName: 'dataType',\n      }\n      addValueToSelectedFacet(facet, dataType)\n    },\n    [addValueToSelectedFacet],\n  )\n\n  const mergedIconConfigs: IconConfigs = useMemo(() => {\n    const mergedIconConfigs: IconConfigs = {}\n    for (const [key, iconProps] of Object.entries(iconConfigs)) {\n      mergedIconConfigs[key] = merge({}, commonIconProps, iconProps)\n    }\n    return mergedIconConfigs\n  }, [iconConfigs, commonIconProps])\n\n  const buildIconList = () => {\n    const unique = Array.from(new Set(iconNames))\n    return unique.map((el: any) => {\n      const iconConfig = mergedIconConfigs[el]\n      // if this data type value doesn't have a matching icon, we use the \"other\" icon\n      if (!iconConfig) {\n        noMatch = true\n        return\n      } else {\n        return (\n          <IconSvg\n            key={el}\n            {...iconConfig}\n            onClick={() => handleIconClick(el)}\n          />\n        )\n      }\n    })\n  }\n\n  return (\n    <span className={componentCss}>\n      {buildIconList()}\n      {noMatch && mergedIconConfigs['other'] ? (\n        <IconSvg {...mergedIconConfigs['other']} />\n      ) : (\n        <></>\n      )}\n    </span>\n  )\n}\n\nexport default IconList\n"],"mappings":";;;;;;;AAkBA,IAAM,IAA2D,EAC/D,IAAI,EAAE,UAAU,OAAO,EACzB;AAEA,SAAS,EAAS,GAAsB;CACtC,IAAM,EACJ,gBACA,cACA,qBAAkB,GAClB,aACA,qBACE,GACA,IAAmB,IACjB,IAAM,IAAW,qBAAqB,aACtC,IAAe,IAAgB,GAAG,EAAI,cAAc,GAEpD,EAAE,+BADa,EACe,GAE9B,IAAkB,GACrB,MAAuB;EAItB,EAAwB,EAFtB,YAAY,WAEU,GAAO,CAAQ;CACzC,GACA,CAAC,CAAuB,CAC1B,GAEM,IAAiC,QAAc;EACnD,IAAM,IAAiC,CAAC;EACxC,KAAK,IAAM,CAAC,GAAK,MAAc,OAAO,QAAQ,CAAW,GACvD,EAAkB,KAAO,EAAM,CAAC,GAAG,GAAiB,CAAS;EAE/D,OAAO;CACT,GAAG,CAAC,GAAa,CAAe,CAAC;CAsBjC,OACE,kBAAC,QAAD;EAAM,WAAW;YAAjB,CApBe,MAAM,KAAK,IAAI,IAAI,CAAS,CACpC,EAAO,KAAK,MAAY;GAC7B,IAAM,IAAa,EAAkB;GAErC,IAAK,GAIH,OACE,kBAAC,GAAD;IAEE,GAAI;IACJ,eAAe,EAAgB,CAAE;GAClC,GAHM,CAGN;GARH,IAAU;EAWd,CAAC,GAME,KAAW,EAAkB,QAC5B,kBAAC,GAAD,EAAS,GAAI,EAAkB,MAAW,CAAA,IAE1C,kBAAA,GAAA,CAAI,CAAA,CAEF;;AAEV"}