@drodil/backstage-plugin-qeta-react 3.9.3 → 3.10.1

package/dist/components/EntitiesGrid/EntitiesGridContent.esm.js

@@ -1,11 +1,10 @@
-import { Grid, Typography } from '@material-ui/core';
-import React, { useState, useEffect } from 'react';
+import Grid from '@mui/material/Grid';
+import React__default from 'react';
 import { WarningPanel } from '@backstage/core-components';
 import '@backstage/core-plugin-api';
 import '../../api.esm.js';
 import 'react-use';
 import { useTranslation } from '../../hooks/useTranslation.esm.js';
-import '../../hooks/useStyles.esm.js';
 import 'react-use/lib/useAsync';
 import { EntitiesGridItem } from './EntitiesGridItem.esm.js';
 import { NoEntitiesCard } from './NoEntitiesCard.esm.js';
@@ -14,25 +13,16 @@ import { LoadingGrid } from '../LoadingGrid/LoadingGrid.esm.js';
 const EntitiesGridContent = (props) => {
   const { response, loading, error } = props;
   const { t } = useTranslation();
-  const [initialLoad, setInitialLoad] = useState(true);
-  useEffect(() => {
-    if (!loading) {
-      setInitialLoad(false);
-    }
-  }, [initialLoad, loading]);
   if (loading) {
-    if (initialLoad) {
-      return /* @__PURE__ */ React.createElement(LoadingGrid, null);
-    }
-    return null;
+    return /* @__PURE__ */ React__default.createElement(LoadingGrid, null);
   }
   if (error || response === void 0) {
-    return /* @__PURE__ */ React.createElement(WarningPanel, { severity: "error", title: t("entitiesPage.errorLoading") }, error?.message);
+    return /* @__PURE__ */ React__default.createElement(WarningPanel, { severity: "error", title: t("entitiesPage.errorLoading") }, error?.message);
   }
   if (!response?.entities || response.entities.length === 0) {
-    return /* @__PURE__ */ React.createElement(NoEntitiesCard, null);
+    return /* @__PURE__ */ React__default.createElement(NoEntitiesCard, null);
   }
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React.createElement(Typography, { variant: "h6", className: "qetaEntitiesContainerTitle" }, t("entitiesPage.entities", { count: response.total }))), /* @__PURE__ */ React.createElement(Grid, { container: true, item: true, xs: 12, alignItems: "stretch" }, response?.entities.map((entity) => /* @__PURE__ */ React.createElement(EntitiesGridItem, { entity, key: entity.entityRef }))));
+  return /* @__PURE__ */ React__default.createElement(Grid, { container: true, item: true, xs: 12, alignItems: "stretch" }, response?.entities.map((entity) => /* @__PURE__ */ React__default.createElement(EntitiesGridItem, { entity, key: entity.entityRef })));
 };
 
 export { EntitiesGridContent };

package/dist/components/EntitiesGrid/EntitiesGridContent.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"EntitiesGridContent.esm.js","sources":["../../../src/components/EntitiesGrid/EntitiesGridContent.tsx"],"sourcesContent":["import { Grid, Typography } from '@material-ui/core';\nimport React, { useEffect, useState } from 'react';\nimport { EntitiesResponse } from '@drodil/backstage-plugin-qeta-common';\nimport { WarningPanel } from '@backstage/core-components';\nimport { useTranslation } from '../../hooks';\nimport { EntitiesGridItem } from './EntitiesGridItem';\nimport { NoEntitiesCard } from './NoEntitiesCard';\nimport { LoadingGrid } from '../LoadingGrid/LoadingGrid';\n\nexport const EntitiesGridContent = (props: {\n  loading: boolean;\n  error: any;\n  response?: EntitiesResponse;\n}) => {\n  const { response, loading, error } = props;\n  const { t } = useTranslation();\n  const [initialLoad, setInitialLoad] = useState(true);\n  useEffect(() => {\n    if (!loading) {\n      setInitialLoad(false);\n    }\n  }, [initialLoad, loading]);\n\n  if (loading) {\n    if (initialLoad) {\n      return <LoadingGrid />;\n    }\n    return null;\n  }\n\n  if (error || response === undefined) {\n    return (\n      <WarningPanel severity=\"error\" title={t('entitiesPage.errorLoading')}>\n        {error?.message}\n      </WarningPanel>\n    );\n  }\n\n  if (!response?.entities || response.entities.length === 0) {\n    return <NoEntitiesCard />;\n  }\n\n  return (\n    <>\n      <Grid item xs={12}>\n        <Typography variant=\"h6\" className=\"qetaEntitiesContainerTitle\">\n          {t('entitiesPage.entities', { count: response.total })}\n        </Typography>\n      </Grid>\n      <Grid container item xs={12} alignItems=\"stretch\">\n        {response?.entities.map(entity => (\n          <EntitiesGridItem entity={entity} key={entity.entityRef} />\n        ))}\n      </Grid>\n    </>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;AASa,MAAA,mBAAA,GAAsB,CAAC,KAI9B,KAAA;AACJ,EAAA,MAAM,EAAE,QAAA,EAAU,OAAS,EAAA,KAAA,EAAU,GAAA,KAAA,CAAA;AACrC,EAAM,MAAA,EAAE,CAAE,EAAA,GAAI,cAAe,EAAA,CAAA;AAC7B,EAAA,MAAM,CAAC,WAAA,EAAa,cAAc,CAAA,GAAI,SAAS,IAAI,CAAA,CAAA;AACnD,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,CAAC,OAAS,EAAA;AACZ,MAAA,cAAA,CAAe,KAAK,CAAA,CAAA;AAAA,KACtB;AAAA,GACC,EAAA,CAAC,WAAa,EAAA,OAAO,CAAC,CAAA,CAAA;AAEzB,EAAA,IAAI,OAAS,EAAA;AACX,IAAA,IAAI,WAAa,EAAA;AACf,MAAA,2CAAQ,WAAY,EAAA,IAAA,CAAA,CAAA;AAAA,KACtB;AACA,IAAO,OAAA,IAAA,CAAA;AAAA,GACT;AAEA,EAAI,IAAA,KAAA,IAAS,aAAa,KAAW,CAAA,EAAA;AACnC,IACE,uBAAA,KAAA,CAAA,aAAA,CAAC,gBAAa,QAAS,EAAA,OAAA,EAAQ,OAAO,CAAE,CAAA,2BAA2B,CAChE,EAAA,EAAA,KAAA,EAAO,OACV,CAAA,CAAA;AAAA,GAEJ;AAEA,EAAA,IAAI,CAAC,QAAU,EAAA,QAAA,IAAY,QAAS,CAAA,QAAA,CAAS,WAAW,CAAG,EAAA;AACzD,IAAA,2CAAQ,cAAe,EAAA,IAAA,CAAA,CAAA;AAAA,GACzB;AAEA,EACE,uBAAA,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,sCACG,IAAK,EAAA,EAAA,IAAA,EAAI,MAAC,EAAI,EAAA,EAAA,EAAA,sCACZ,UAAW,EAAA,EAAA,OAAA,EAAQ,MAAK,SAAU,EAAA,4BAAA,EAAA,EAChC,EAAE,uBAAyB,EAAA,EAAE,OAAO,QAAS,CAAA,KAAA,EAAO,CACvD,CACF,mBACC,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EAAK,WAAS,IAAC,EAAA,IAAA,EAAI,MAAC,EAAI,EAAA,EAAA,EAAI,YAAW,SACrC,EAAA,EAAA,QAAA,EAAU,SAAS,GAAI,CAAA,CAAA,MAAA,yCACrB,gBAAiB,EAAA,EAAA,MAAA,EAAgB,KAAK,MAAO,CAAA,SAAA,EAAW,CAC1D,CACH,CACF,CAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"EntitiesGridContent.esm.js","sources":["../../../src/components/EntitiesGrid/EntitiesGridContent.tsx"],"sourcesContent":["import Grid from '@mui/material/Grid';\nimport React from 'react';\nimport { EntitiesResponse } from '@drodil/backstage-plugin-qeta-common';\nimport { WarningPanel } from '@backstage/core-components';\nimport { useTranslation } from '../../hooks';\nimport { EntitiesGridItem } from './EntitiesGridItem';\nimport { NoEntitiesCard } from './NoEntitiesCard';\nimport { LoadingGrid } from '../LoadingGrid/LoadingGrid';\n\nexport const EntitiesGridContent = (props: {\n  loading: boolean;\n  error: any;\n  response?: EntitiesResponse;\n}) => {\n  const { response, loading, error } = props;\n  const { t } = useTranslation();\n\n  if (loading) {\n    return <LoadingGrid />;\n  }\n\n  if (error || response === undefined) {\n    return (\n      <WarningPanel severity=\"error\" title={t('entitiesPage.errorLoading')}>\n        {error?.message}\n      </WarningPanel>\n    );\n  }\n\n  if (!response?.entities || response.entities.length === 0) {\n    return <NoEntitiesCard />;\n  }\n\n  return (\n    <Grid container item xs={12} alignItems=\"stretch\">\n      {response?.entities.map(entity => (\n        <EntitiesGridItem entity={entity} key={entity.entityRef} />\n      ))}\n    </Grid>\n  );\n};\n"],"names":["React"],"mappings":";;;;;;;;;;;;AASa,MAAA,mBAAA,GAAsB,CAAC,KAI9B,KAAA;AACJ,EAAA,MAAM,EAAE,QAAA,EAAU,OAAS,EAAA,KAAA,EAAU,GAAA,KAAA,CAAA;AACrC,EAAM,MAAA,EAAE,CAAE,EAAA,GAAI,cAAe,EAAA,CAAA;AAE7B,EAAA,IAAI,OAAS,EAAA;AACX,IAAA,oDAAQ,WAAY,EAAA,IAAA,CAAA,CAAA;AAAA,GACtB;AAEA,EAAI,IAAA,KAAA,IAAS,aAAa,KAAW,CAAA,EAAA;AACnC,IACE,uBAAAA,cAAA,CAAA,aAAA,CAAC,gBAAa,QAAS,EAAA,OAAA,EAAQ,OAAO,CAAE,CAAA,2BAA2B,CAChE,EAAA,EAAA,KAAA,EAAO,OACV,CAAA,CAAA;AAAA,GAEJ;AAEA,EAAA,IAAI,CAAC,QAAU,EAAA,QAAA,IAAY,QAAS,CAAA,QAAA,CAAS,WAAW,CAAG,EAAA;AACzD,IAAA,oDAAQ,cAAe,EAAA,IAAA,CAAA,CAAA;AAAA,GACzB;AAEA,EACE,uBAAAA,cAAA,CAAA,aAAA,CAAC,QAAK,SAAS,EAAA,IAAA,EAAC,MAAI,IAAC,EAAA,EAAA,EAAI,IAAI,UAAW,EAAA,SAAA,EAAA,EACrC,UAAU,QAAS,CAAA,GAAA,CAAI,4BACrBA,cAAA,CAAA,aAAA,CAAA,gBAAA,EAAA,EAAiB,QAAgB,GAAK,EAAA,MAAA,CAAO,SAAW,EAAA,CAC1D,CACH,CAAA,CAAA;AAEJ;;;;"}

package/dist/components/EntitiesGrid/EntitiesGridItem.esm.js

@@ -1,5 +1,14 @@
-import { Grid, Card, CardActionArea, CardHeader, Avatar, CardContent, Typography, CardActions, Tooltip, Button } from '@material-ui/core';
-import React from 'react';
+import Card from '@mui/material/Card';
+import CardContent from '@mui/material/CardContent';
+import CardActionArea from '@mui/material/CardActionArea';
+import CardHeader from '@mui/material/CardHeader';
+import Tooltip from '@mui/material/Tooltip';
+import Typography from '@mui/material/Typography';
+import Avatar from '@mui/material/Avatar';
+import Grid from '@mui/material/Grid';
+import Button from '@mui/material/Button';
+import CardActions from '@mui/material/CardActions';
+import React__default from 'react';
 import { useRouteRef } from '@backstage/core-plugin-api';
 import { useNavigate } from 'react-router-dom';
 import { useEntityPresentation } from '@backstage/plugin-catalog-react';
@@ -9,7 +18,6 @@ import '../../api.esm.js';
 import 'react-use';
 import { useTranslation } from '../../hooks/useTranslation.esm.js';
 import { useEntityFollow } from '../../hooks/useEntityFollow.esm.js';
-import '../../hooks/useStyles.esm.js';
 import 'react-use/lib/useAsync';
 
 const EntitiesGridItem = (props) => {
@@ -20,30 +28,30 @@ const EntitiesGridItem = (props) => {
   const entityFollow = useEntityFollow();
   const compound = parseEntityRef(entity.entityRef);
   const { primaryTitle, Icon } = useEntityPresentation(compound);
-  return /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 3 }, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React__default.createElement(Grid, { item: true, xs: 3 }, /* @__PURE__ */ React__default.createElement(
     Card,
     {
       variant: "outlined",
       style: { height: "100%", display: "flex", flexDirection: "column" }
     },
-    /* @__PURE__ */ React.createElement(
+    /* @__PURE__ */ React__default.createElement(
       CardActionArea,
       {
         onClick: () => navigate(entityRoute({ entityRef: entity.entityRef }))
       },
-      /* @__PURE__ */ React.createElement(
+      /* @__PURE__ */ React__default.createElement(
         CardHeader,
         {
           title: primaryTitle,
-          avatar: Icon ? /* @__PURE__ */ React.createElement(Avatar, null, /* @__PURE__ */ React.createElement(Icon, null)) : null
+          avatar: Icon ? /* @__PURE__ */ React__default.createElement(Avatar, null, /* @__PURE__ */ React__default.createElement(Icon, null)) : null
         }
       ),
-      /* @__PURE__ */ React.createElement(CardContent, null, /* @__PURE__ */ React.createElement(Typography, { variant: "caption" }, t("common.posts", {
+      /* @__PURE__ */ React__default.createElement(CardContent, null, /* @__PURE__ */ React__default.createElement(Typography, { variant: "caption" }, t("common.posts", {
         count: entity.postsCount,
         itemType: "post"
       }), " \xB7 ", t("common.followers", { count: entity.followerCount })))
     ),
-    /* @__PURE__ */ React.createElement(CardActions, { style: { marginTop: "auto" } }, /* @__PURE__ */ React.createElement(Grid, { container: true, justifyContent: "center" }, /* @__PURE__ */ React.createElement(Grid, { item: true }, /* @__PURE__ */ React.createElement(Tooltip, { title: t("entityButton.tooltip") }, /* @__PURE__ */ React.createElement(
+    /* @__PURE__ */ React__default.createElement(CardActions, { style: { marginTop: "auto" } }, /* @__PURE__ */ React__default.createElement(Grid, { container: true, justifyContent: "center" }, /* @__PURE__ */ React__default.createElement(Grid, { item: true }, /* @__PURE__ */ React__default.createElement(Tooltip, { title: t("entityButton.tooltip") }, /* @__PURE__ */ React__default.createElement(
       Button,
       {
         size: "small",

package/dist/components/EntitiesGrid/EntitiesGridItem.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"EntitiesGridItem.esm.js","sources":["../../../src/components/EntitiesGrid/EntitiesGridItem.tsx"],"sourcesContent":["import { EntityResponse } from '@drodil/backstage-plugin-qeta-common';\nimport {\n  Avatar,\n  Button,\n  Card,\n  CardActionArea,\n  CardActions,\n  CardContent,\n  CardHeader,\n  Grid,\n  Tooltip,\n  Typography,\n} from '@material-ui/core';\nimport React from 'react';\nimport { useRouteRef } from '@backstage/core-plugin-api';\nimport { useNavigate } from 'react-router-dom';\nimport { useEntityPresentation } from '@backstage/plugin-catalog-react';\nimport { entityRouteRef } from '../../routes';\nimport { parseEntityRef } from '@backstage/catalog-model';\nimport { useEntityFollow, useTranslation } from '../../hooks';\n\nexport const EntitiesGridItem = (props: { entity: EntityResponse }) => {\n  const { entity } = props;\n  const entityRoute = useRouteRef(entityRouteRef);\n  const navigate = useNavigate();\n  const { t } = useTranslation();\n  const entityFollow = useEntityFollow();\n  const compound = parseEntityRef(entity.entityRef);\n  const { primaryTitle, Icon } = useEntityPresentation(compound);\n\n  return (\n    <Grid item xs={3}>\n      <Card\n        variant=\"outlined\"\n        style={{ height: '100%', display: 'flex', flexDirection: 'column' }}\n      >\n        <CardActionArea\n          onClick={() => navigate(entityRoute({ entityRef: entity.entityRef }))}\n        >\n          <CardHeader\n            title={primaryTitle}\n            avatar={\n              Icon ? (\n                <Avatar>\n                  <Icon />\n                </Avatar>\n              ) : null\n            }\n          />\n          <CardContent>\n            <Typography variant=\"caption\">\n              {t('common.posts', {\n                count: entity.postsCount,\n                itemType: 'post',\n              })}\n              {' · '}\n              {t('common.followers', { count: entity.followerCount })}\n            </Typography>\n          </CardContent>\n        </CardActionArea>\n        <CardActions style={{ marginTop: 'auto' }}>\n          <Grid container justifyContent=\"center\">\n            <Grid item>\n              <Tooltip title={t('entityButton.tooltip')}>\n                <Button\n                  size=\"small\"\n                  variant=\"outlined\"\n                  color={\n                    entityFollow.isFollowingEntity(entity.entityRef)\n                      ? 'secondary'\n                      : 'primary'\n                  }\n                  onClick={() => {\n                    if (entityFollow.isFollowingEntity(entity.entityRef)) {\n                      entityFollow.unfollowEntity(entity.entityRef);\n                    } else {\n                      entityFollow.followEntity(entity.entityRef);\n                    }\n                  }}\n                >\n                  {entityFollow.isFollowingEntity(entity.entityRef)\n                    ? t('entityButton.unfollow')\n                    : t('entityButton.follow')}\n                </Button>\n              </Tooltip>\n            </Grid>\n          </Grid>\n        </CardActions>\n      </Card>\n    </Grid>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"EntitiesGridItem.esm.js","sources":["../../../src/components/EntitiesGrid/EntitiesGridItem.tsx"],"sourcesContent":["import { EntityResponse } from '@drodil/backstage-plugin-qeta-common';\nimport Card from '@mui/material/Card';\nimport CardContent from '@mui/material/CardContent';\nimport CardActionArea from '@mui/material/CardActionArea';\nimport CardHeader from '@mui/material/CardHeader';\nimport Tooltip from '@mui/material/Tooltip';\nimport Typography from '@mui/material/Typography';\nimport Avatar from '@mui/material/Avatar';\nimport Grid from '@mui/material/Grid';\nimport Button from '@mui/material/Button';\nimport CardActions from '@mui/material/CardActions';\nimport React from 'react';\nimport { useRouteRef } from '@backstage/core-plugin-api';\nimport { useNavigate } from 'react-router-dom';\nimport { useEntityPresentation } from '@backstage/plugin-catalog-react';\nimport { entityRouteRef } from '../../routes';\nimport { parseEntityRef } from '@backstage/catalog-model';\nimport { useEntityFollow, useTranslation } from '../../hooks';\n\nexport const EntitiesGridItem = (props: { entity: EntityResponse }) => {\n  const { entity } = props;\n  const entityRoute = useRouteRef(entityRouteRef);\n  const navigate = useNavigate();\n  const { t } = useTranslation();\n  const entityFollow = useEntityFollow();\n  const compound = parseEntityRef(entity.entityRef);\n  const { primaryTitle, Icon } = useEntityPresentation(compound);\n\n  return (\n    <Grid item xs={3}>\n      <Card\n        variant=\"outlined\"\n        style={{ height: '100%', display: 'flex', flexDirection: 'column' }}\n      >\n        <CardActionArea\n          onClick={() => navigate(entityRoute({ entityRef: entity.entityRef }))}\n        >\n          <CardHeader\n            title={primaryTitle}\n            avatar={\n              Icon ? (\n                <Avatar>\n                  <Icon />\n                </Avatar>\n              ) : null\n            }\n          />\n          <CardContent>\n            <Typography variant=\"caption\">\n              {t('common.posts', {\n                count: entity.postsCount,\n                itemType: 'post',\n              })}\n              {' · '}\n              {t('common.followers', { count: entity.followerCount })}\n            </Typography>\n          </CardContent>\n        </CardActionArea>\n        <CardActions style={{ marginTop: 'auto' }}>\n          <Grid container justifyContent=\"center\">\n            <Grid item>\n              <Tooltip title={t('entityButton.tooltip')}>\n                <Button\n                  size=\"small\"\n                  variant=\"outlined\"\n                  color={\n                    entityFollow.isFollowingEntity(entity.entityRef)\n                      ? 'secondary'\n                      : 'primary'\n                  }\n                  onClick={() => {\n                    if (entityFollow.isFollowingEntity(entity.entityRef)) {\n                      entityFollow.unfollowEntity(entity.entityRef);\n                    } else {\n                      entityFollow.followEntity(entity.entityRef);\n                    }\n                  }}\n                >\n                  {entityFollow.isFollowingEntity(entity.entityRef)\n                    ? t('entityButton.unfollow')\n                    : t('entityButton.follow')}\n                </Button>\n              </Tooltip>\n            </Grid>\n          </Grid>\n        </CardActions>\n      </Card>\n    </Grid>\n  );\n};\n"],"names":["React"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAmBa,MAAA,gBAAA,GAAmB,CAAC,KAAsC,KAAA;AACrE,EAAM,MAAA,EAAE,QAAW,GAAA,KAAA,CAAA;AACnB,EAAM,MAAA,WAAA,GAAc,YAAY,cAAc,CAAA,CAAA;AAC9C,EAAA,MAAM,WAAW,WAAY,EAAA,CAAA;AAC7B,EAAM,MAAA,EAAE,CAAE,EAAA,GAAI,cAAe,EAAA,CAAA;AAC7B,EAAA,MAAM,eAAe,eAAgB,EAAA,CAAA;AACrC,EAAM,MAAA,QAAA,GAAW,cAAe,CAAA,MAAA,CAAO,SAAS,CAAA,CAAA;AAChD,EAAA,MAAM,EAAE,YAAA,EAAc,IAAK,EAAA,GAAI,sBAAsB,QAAQ,CAAA,CAAA;AAE7D,EAAA,uBACGA,cAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EAAK,IAAI,EAAA,IAAA,EAAC,IAAI,CACb,EAAA,kBAAAA,cAAA,CAAA,aAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACC,OAAQ,EAAA,UAAA;AAAA,MACR,OAAO,EAAE,MAAA,EAAQ,QAAQ,OAAS,EAAA,MAAA,EAAQ,eAAe,QAAS,EAAA;AAAA,KAAA;AAAA,oBAElEA,cAAA,CAAA,aAAA;AAAA,MAAC,cAAA;AAAA,MAAA;AAAA,QACC,OAAA,EAAS,MAAM,QAAS,CAAA,WAAA,CAAY,EAAE,SAAW,EAAA,MAAA,CAAO,SAAU,EAAC,CAAC,CAAA;AAAA,OAAA;AAAA,sBAEpEA,cAAA,CAAA,aAAA;AAAA,QAAC,UAAA;AAAA,QAAA;AAAA,UACC,KAAO,EAAA,YAAA;AAAA,UACP,QACE,IACE,mBAAAA,cAAA,CAAA,aAAA,CAAC,8BACEA,cAAA,CAAA,aAAA,CAAA,IAAA,EAAA,IAAK,CACR,CACE,GAAA,IAAA;AAAA,SAAA;AAAA,OAER;AAAA,mDACC,WACC,EAAA,IAAA,kBAAAA,cAAA,CAAA,aAAA,CAAC,cAAW,OAAQ,EAAA,SAAA,EAAA,EACjB,EAAE,cAAgB,EAAA;AAAA,QACjB,OAAO,MAAO,CAAA,UAAA;AAAA,QACd,QAAU,EAAA,MAAA;AAAA,OACX,CACA,EAAA,QAAA,EACA,CAAE,CAAA,kBAAA,EAAoB,EAAE,KAAA,EAAO,MAAO,CAAA,aAAA,EAAe,CACxD,CACF,CAAA;AAAA,KACF;AAAA,oBACAA,cAAA,CAAA,aAAA,CAAC,eAAY,KAAO,EAAA,EAAE,WAAW,MAAO,EAAA,EAAA,kBACrCA,cAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EAAK,SAAS,EAAA,IAAA,EAAC,gBAAe,QAC7B,EAAA,kBAAAA,cAAA,CAAA,aAAA,CAAC,QAAK,IAAI,EAAA,IAAA,EAAA,+CACP,OAAQ,EAAA,EAAA,KAAA,EAAO,CAAE,CAAA,sBAAsB,CACtC,EAAA,kBAAAA,cAAA,CAAA,aAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,IAAK,EAAA,OAAA;AAAA,QACL,OAAQ,EAAA,UAAA;AAAA,QACR,OACE,YAAa,CAAA,iBAAA,CAAkB,MAAO,CAAA,SAAS,IAC3C,WACA,GAAA,SAAA;AAAA,QAEN,SAAS,MAAM;AACb,UAAA,IAAI,YAAa,CAAA,iBAAA,CAAkB,MAAO,CAAA,SAAS,CAAG,EAAA;AACpD,YAAa,YAAA,CAAA,cAAA,CAAe,OAAO,SAAS,CAAA,CAAA;AAAA,WACvC,MAAA;AACL,YAAa,YAAA,CAAA,YAAA,CAAa,OAAO,SAAS,CAAA,CAAA;AAAA,WAC5C;AAAA,SACF;AAAA,OAAA;AAAA,MAEC,YAAA,CAAa,kBAAkB,MAAO,CAAA,SAAS,IAC5C,CAAE,CAAA,uBAAuB,CACzB,GAAA,CAAA,CAAE,qBAAqB,CAAA;AAAA,KAE/B,CACF,CACF,CACF,CAAA;AAAA,GAEJ,CAAA,CAAA;AAEJ;;;;"}

package/dist/components/EntitiesGrid/NoEntitiesCard.esm.js

@@ -1,15 +1,17 @@
-import { Card, CardContent, Grid, Typography } from '@material-ui/core';
-import React from 'react';
+import Card from '@mui/material/Card';
+import CardContent from '@mui/material/CardContent';
+import Typography from '@mui/material/Typography';
+import Grid from '@mui/material/Grid';
+import React__default from 'react';
 import '@backstage/core-plugin-api';
 import '../../api.esm.js';
 import 'react-use';
 import { useTranslation } from '../../hooks/useTranslation.esm.js';
-import '../../hooks/useStyles.esm.js';
 import 'react-use/lib/useAsync';
 
 const NoEntitiesCard = () => {
   const { t } = useTranslation();
-  return /* @__PURE__ */ React.createElement(Card, { style: { marginTop: "2rem" } }, /* @__PURE__ */ React.createElement(CardContent, null, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React__default.createElement(Card, { style: { marginTop: "2rem" } }, /* @__PURE__ */ React__default.createElement(CardContent, null, /* @__PURE__ */ React__default.createElement(
     Grid,
     {
       container: true,
@@ -17,7 +19,7 @@ const NoEntitiesCard = () => {
       alignItems: "center",
       direction: "column"
     },
-    /* @__PURE__ */ React.createElement(Grid, { item: true }, /* @__PURE__ */ React.createElement(Typography, { variant: "h6" }, t(`entitiesPage.entities`, { count: 0 })))
+    /* @__PURE__ */ React__default.createElement(Grid, { item: true }, /* @__PURE__ */ React__default.createElement(Typography, { variant: "h6" }, t(`entitiesPage.entities`, { count: 0 })))
   )));
 };
 

package/dist/components/EntitiesGrid/NoEntitiesCard.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"NoEntitiesCard.esm.js","sources":["../../../src/components/EntitiesGrid/NoEntitiesCard.tsx"],"sourcesContent":["import { Card, CardContent, Grid, Typography } from '@material-ui/core';\nimport React from 'react';\nimport { useTranslation } from '../../hooks';\n\nexport const NoEntitiesCard = () => {\n  const { t } = useTranslation();\n\n  return (\n    <Card style={{ marginTop: '2rem' }}>\n      <CardContent>\n        <Grid\n          container\n          justifyContent=\"center\"\n          alignItems=\"center\"\n          direction=\"column\"\n        >\n          <Grid item>\n            <Typography variant=\"h6\">\n              {t(`entitiesPage.entities`, { count: 0 })}\n            </Typography>\n          </Grid>\n        </Grid>\n      </CardContent>\n    </Card>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;AAIO,MAAM,iBAAiB,MAAM;AAClC,EAAM,MAAA,EAAE,CAAE,EAAA,GAAI,cAAe,EAAA,CAAA;AAE7B,EACE,uBAAA,KAAA,CAAA,aAAA,CAAC,QAAK,KAAO,EAAA,EAAE,WAAW,MAAO,EAAA,EAAA,sCAC9B,WACC,EAAA,IAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACC,SAAS,EAAA,IAAA;AAAA,MACT,cAAe,EAAA,QAAA;AAAA,MACf,UAAW,EAAA,QAAA;AAAA,MACX,SAAU,EAAA,QAAA;AAAA,KAAA;AAAA,oBAET,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EAAK,IAAI,EAAA,IAAA,EAAA,sCACP,UAAW,EAAA,EAAA,OAAA,EAAQ,IACjB,EAAA,EAAA,CAAA,CAAE,yBAAyB,EAAE,KAAA,EAAO,CAAE,EAAC,CAC1C,CACF,CAAA;AAAA,GAEJ,CACF,CAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"NoEntitiesCard.esm.js","sources":["../../../src/components/EntitiesGrid/NoEntitiesCard.tsx"],"sourcesContent":["import Card from '@mui/material/Card';\nimport CardContent from '@mui/material/CardContent';\nimport Typography from '@mui/material/Typography';\nimport Grid from '@mui/material/Grid';\nimport React from 'react';\nimport { useTranslation } from '../../hooks';\n\nexport const NoEntitiesCard = () => {\n  const { t } = useTranslation();\n\n  return (\n    <Card style={{ marginTop: '2rem' }}>\n      <CardContent>\n        <Grid\n          container\n          justifyContent=\"center\"\n          alignItems=\"center\"\n          direction=\"column\"\n        >\n          <Grid item>\n            <Typography variant=\"h6\">\n              {t(`entitiesPage.entities`, { count: 0 })}\n            </Typography>\n          </Grid>\n        </Grid>\n      </CardContent>\n    </Card>\n  );\n};\n"],"names":["React"],"mappings":";;;;;;;;;;;AAOO,MAAM,iBAAiB,MAAM;AAClC,EAAM,MAAA,EAAE,CAAE,EAAA,GAAI,cAAe,EAAA,CAAA;AAE7B,EACE,uBAAAA,cAAA,CAAA,aAAA,CAAC,QAAK,KAAO,EAAA,EAAE,WAAW,MAAO,EAAA,EAAA,+CAC9B,WACC,EAAA,IAAA,kBAAAA,cAAA,CAAA,aAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACC,SAAS,EAAA,IAAA;AAAA,MACT,cAAe,EAAA,QAAA;AAAA,MACf,UAAW,EAAA,QAAA;AAAA,MACX,SAAU,EAAA,QAAA;AAAA,KAAA;AAAA,oBAETA,cAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EAAK,IAAI,EAAA,IAAA,EAAA,+CACP,UAAW,EAAA,EAAA,OAAA,EAAQ,IACjB,EAAA,EAAA,CAAA,CAAE,yBAAyB,EAAE,KAAA,EAAO,CAAE,EAAC,CAC1C,CACF,CAAA;AAAA,GAEJ,CACF,CAAA,CAAA;AAEJ;;;;"}

package/dist/components/FilterPanel/DateRangeFilter.esm.js

@@ -1,29 +1,27 @@
-import React, { useState, useEffect } from 'react';
-import { useMediaQuery, Box, TextField, MenuItem, Typography } from '@material-ui/core';
+import React__default, { useState, useEffect } from 'react';
+import Typography from '@mui/material/Typography';
+import TextField from '@mui/material/TextField';
+import MenuItem from '@mui/material/MenuItem';
 import { formatDate } from '../../utils/utils.esm.js';
 import '@backstage/core-plugin-api';
 import '../../api.esm.js';
 import 'react-use';
 import { useTranslation } from '../../hooks/useTranslation.esm.js';
-import { useStyles } from '../../hooks/useStyles.esm.js';
 import 'react-use/lib/useAsync';
+import Grid from '@mui/material/Grid';
 
 const DateRangeFilter = (props) => {
   const { value, onChange } = props;
-  const styles = useStyles();
   const [dateRangeOption, setDateRangeOption] = useState(
     value
   );
   const { t } = useTranslation();
-  const [fromDate, setFromDate] = useState("");
-  const [toDate, setToDate] = useState("");
+  const localDate = formatDate(/* @__PURE__ */ new Date());
+  const [fromDate, setFromDate] = useState(localDate);
+  const [toDate, setToDate] = useState(localDate);
   const [validation, setValidation] = useState({
     isValid: true
   });
-  const isSmallScreen = useMediaQuery(
-    (theme) => theme.breakpoints.down("sm")
-  );
-  const localDate = formatDate(/* @__PURE__ */ new Date());
   useEffect(() => {
     setDateRangeOption(value || "");
     if (value && value.indexOf("--") >= 0) {
@@ -32,50 +30,40 @@ const DateRangeFilter = (props) => {
       setToDate(value.split("--")[1] || "");
     }
   }, [value]);
-  useEffect(() => {
-    if (dateRangeOption && dateRangeOption !== "custom") {
-      setFromDate("");
-      setToDate("");
-      onChange(
-        "dateRange",
-        !dateRangeOption || dateRangeOption === "select" ? "" : dateRangeOption
-      );
+  const handleCustom = (from, to) => {
+    const startDate = new Date(from ?? fromDate);
+    const endDate = new Date(to ?? toDate);
+    if (startDate <= endDate) {
+      setValidation({ isValid: true });
+      onChange(`${formatDate(startDate)}--${formatDate(endDate)}`);
+    } else {
+      setValidation({
+        isValid: false,
+        message: t("datePicker.invalidRange")
+      });
     }
-  }, [dateRangeOption, onChange]);
-  useEffect(() => {
-    if (fromDate && toDate) {
-      const startDate = new Date(fromDate);
-      const endDate = new Date(toDate);
-      if (startDate <= endDate) {
-        setValidation({ isValid: true });
-        onChange("dateRange", `${fromDate}--${toDate}`);
-      } else {
-        setValidation({
-          isValid: false,
-          message: t("datePicker.invalidRange")
-        });
-      }
-    }
-  }, [t, fromDate, toDate, onChange]);
-  return /* @__PURE__ */ React.createElement(Box, { display: isSmallScreen ? "block" : "flex", gridGap: "16px" }, /* @__PURE__ */ React.createElement(
+  };
+  return /* @__PURE__ */ React__default.createElement(Grid, { container: true }, validation.message && /* @__PURE__ */ React__default.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React__default.createElement(Typography, { color: "error", variant: "body2" }, validation.message)), /* @__PURE__ */ React__default.createElement(Grid, { item: true }, /* @__PURE__ */ React__default.createElement(
     TextField,
     {
-      id: "outlined-select-currency",
       select: true,
       label: t("datePicker.range.label"),
       value: dateRangeOption || "select",
-      className: styles.dateFilter,
-      onChange: (_e) => {
-        setDateRangeOption(_e.target.value);
+      sx: { minWidth: "200px", marginTop: 2, marginBottom: 2 },
+      onChange: (e) => {
+        if (e.target.value !== "custom") {
+          onChange(e.target.value === "select" ? "" : e.target.value);
+        }
+        setDateRangeOption(e.target.value);
       },
       variant: "outlined",
-      defaultValue: "None"
+      defaultValue: "select"
     },
-    /* @__PURE__ */ React.createElement(MenuItem, { value: "select" }, t("datePicker.range.default")),
-    /* @__PURE__ */ React.createElement(MenuItem, { value: "7-days" }, t("datePicker.range.last7days")),
-    /* @__PURE__ */ React.createElement(MenuItem, { value: "30-days" }, t("datePicker.range.last30days")),
-    /* @__PURE__ */ React.createElement(MenuItem, { value: "custom" }, t("datePicker.range.custom"))
-  ), dateRangeOption === "custom" && /* @__PURE__ */ React.createElement(Box, { display: "flex", flexDirection: "column" }, /* @__PURE__ */ React.createElement(Box, { display: isSmallScreen ? "block" : "flex", gridGap: "12px" }, /* @__PURE__ */ React.createElement(
+    /* @__PURE__ */ React__default.createElement(MenuItem, { value: "select" }, t("datePicker.range.default")),
+    /* @__PURE__ */ React__default.createElement(MenuItem, { value: "7-days" }, t("datePicker.range.last7days")),
+    /* @__PURE__ */ React__default.createElement(MenuItem, { value: "30-days" }, t("datePicker.range.last30days")),
+    /* @__PURE__ */ React__default.createElement(MenuItem, { value: "custom" }, t("datePicker.range.custom"))
+  )), dateRangeOption === "custom" && /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(Grid, { item: true }, /* @__PURE__ */ React__default.createElement(
     TextField,
     {
       variant: "outlined",
@@ -83,15 +71,17 @@ const DateRangeFilter = (props) => {
       id: "from-date",
       type: "date",
       value: fromDate,
-      className: styles.dateFilter,
+      sx: { minWidth: "200px", marginTop: 2, marginBottom: 2 },
       InputLabelProps: { shrink: true },
       error: !validation.isValid,
-      onChange: (_e) => setFromDate(_e.target.value),
+      onChange: (e) => {
+        handleCustom(e.target.value);
+      },
       inputProps: {
         max: toDate || localDate
       }
     }
-  ), /* @__PURE__ */ React.createElement(
+  )), /* @__PURE__ */ React__default.createElement(Grid, { item: true }, /* @__PURE__ */ React__default.createElement(
     TextField,
     {
       variant: "outlined",
@@ -99,16 +89,18 @@ const DateRangeFilter = (props) => {
       id: "to-date",
       type: "date",
       value: toDate,
-      className: styles.dateFilter,
+      sx: { minWidth: "200px", marginTop: 2, marginBottom: 2 },
       InputLabelProps: { shrink: true },
       error: !validation.isValid,
-      onChange: (_e) => setToDate(_e.target.value),
+      onChange: (e) => {
+        handleCustom(void 0, e.target.value);
+      },
       inputProps: {
         min: fromDate,
         max: localDate
       }
     }
-  )), validation.message && /* @__PURE__ */ React.createElement(Typography, { color: "error", variant: "body2" }, validation.message)));
+  ))));
 };
 
 export { DateRangeFilter };

package/dist/components/FilterPanel/DateRangeFilter.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"DateRangeFilter.esm.js","sources":["../../../src/components/FilterPanel/DateRangeFilter.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\nimport {\n  Box,\n  MenuItem,\n  TextField,\n  Theme,\n  Typography,\n  useMediaQuery,\n} from '@material-ui/core';\nimport { formatDate } from '../../utils/utils';\nimport { useStyles, useTranslation } from '../../hooks';\n\nexport interface DateRangeFilterProps {\n  value?: string;\n  onChange: (dateRange: 'dateRange', value: string | string[]) => void;\n}\n\ntype DateRangeValidation = {\n  isValid: boolean;\n  message?: string;\n};\n\nexport const DateRangeFilter = (props: DateRangeFilterProps) => {\n  const { value, onChange } = props;\n  const styles = useStyles();\n  const [dateRangeOption, setDateRangeOption] = useState<string | undefined>(\n    value,\n  );\n  const { t } = useTranslation();\n  const [fromDate, setFromDate] = useState('');\n  const [toDate, setToDate] = useState('');\n  const [validation, setValidation] = useState<DateRangeValidation>({\n    isValid: true,\n  });\n  const isSmallScreen = useMediaQuery<Theme>(theme =>\n    theme.breakpoints.down('sm'),\n  );\n\n  const localDate = formatDate(new Date());\n\n  useEffect(() => {\n    setDateRangeOption(value || '');\n    if (value && value.indexOf('--') >= 0) {\n      setDateRangeOption('custom');\n      setFromDate(value.split('--')[0] || '');\n      setToDate(value.split('--')[1] || '');\n    }\n  }, [value]);\n\n  useEffect(() => {\n    if (dateRangeOption && dateRangeOption !== 'custom') {\n      setFromDate('');\n      setToDate('');\n      onChange(\n        'dateRange',\n        !dateRangeOption || dateRangeOption === 'select' ? '' : dateRangeOption,\n      );\n    }\n  }, [dateRangeOption, onChange]);\n\n  useEffect(() => {\n    if (fromDate && toDate) {\n      const startDate = new Date(fromDate);\n      const endDate = new Date(toDate);\n      if (startDate <= endDate) {\n        setValidation({ isValid: true });\n        onChange('dateRange', `${fromDate}--${toDate}`);\n      } else {\n        setValidation({\n          isValid: false,\n          message: t('datePicker.invalidRange'),\n        });\n      }\n    }\n  }, [t, fromDate, toDate, onChange]);\n\n  return (\n    <Box display={isSmallScreen ? 'block' : 'flex'} gridGap=\"16px\">\n      <TextField\n        id=\"outlined-select-currency\"\n        select\n        label={t('datePicker.range.label')}\n        value={dateRangeOption || 'select'}\n        className={styles.dateFilter}\n        onChange={_e => {\n          setDateRangeOption(_e.target.value);\n        }}\n        variant=\"outlined\"\n        defaultValue=\"None\"\n      >\n        <MenuItem value=\"select\">{t('datePicker.range.default')}</MenuItem>\n        <MenuItem value=\"7-days\">{t('datePicker.range.last7days')}</MenuItem>\n        <MenuItem value=\"30-days\">{t('datePicker.range.last30days')}</MenuItem>\n        <MenuItem value=\"custom\">{t('datePicker.range.custom')}</MenuItem>\n      </TextField>\n      {dateRangeOption === 'custom' && (\n        <Box display=\"flex\" flexDirection=\"column\">\n          <Box display={isSmallScreen ? 'block' : 'flex'} gridGap=\"12px\">\n            <TextField\n              variant=\"outlined\"\n              label={t('datePicker.from')}\n              id=\"from-date\"\n              type=\"date\"\n              value={fromDate}\n              className={styles.dateFilter}\n              InputLabelProps={{ shrink: true }}\n              error={!validation.isValid}\n              onChange={_e => setFromDate(_e.target.value)}\n              inputProps={{\n                max: toDate || localDate,\n              }}\n            />\n            <TextField\n              variant=\"outlined\"\n              label={t('datePicker.to')}\n              id=\"to-date\"\n              type=\"date\"\n              value={toDate}\n              className={styles.dateFilter}\n              InputLabelProps={{ shrink: true }}\n              error={!validation.isValid}\n              onChange={_e => setToDate(_e.target.value)}\n              inputProps={{\n                min: fromDate,\n                max: localDate,\n              }}\n            />\n          </Box>\n          {validation.message && (\n            <Typography color=\"error\" variant=\"body2\">\n              {validation.message}\n            </Typography>\n          )}\n        </Box>\n      )}\n    </Box>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"DateRangeFilter.esm.js","sources":["../../../src/components/FilterPanel/DateRangeFilter.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\nimport Typography from '@mui/material/Typography';\nimport TextField from '@mui/material/TextField';\nimport MenuItem from '@mui/material/MenuItem';\nimport { formatDate } from '../../utils/utils';\nimport { useTranslation } from '../../hooks';\nimport Grid from '@mui/material/Grid';\n\nexport interface DateRangeFilterProps {\n  value?: string;\n  onChange: (value: string | string[]) => void;\n}\n\ntype DateRangeValidation = {\n  isValid: boolean;\n  message?: string;\n};\n\nexport const DateRangeFilter = (props: DateRangeFilterProps) => {\n  const { value, onChange } = props;\n  const [dateRangeOption, setDateRangeOption] = useState<string | undefined>(\n    value,\n  );\n  const { t } = useTranslation();\n  const localDate = formatDate(new Date());\n  const [fromDate, setFromDate] = useState(localDate);\n  const [toDate, setToDate] = useState(localDate);\n  const [validation, setValidation] = useState<DateRangeValidation>({\n    isValid: true,\n  });\n\n  useEffect(() => {\n    setDateRangeOption(value || '');\n    if (value && value.indexOf('--') >= 0) {\n      setDateRangeOption('custom');\n      setFromDate(value.split('--')[0] || '');\n      setToDate(value.split('--')[1] || '');\n    }\n  }, [value]);\n\n  const handleCustom = (from?: string, to?: string) => {\n    const startDate = new Date(from ?? fromDate);\n    const endDate = new Date(to ?? toDate);\n    if (startDate <= endDate) {\n      setValidation({ isValid: true });\n      onChange(`${formatDate(startDate)}--${formatDate(endDate)}`);\n    } else {\n      setValidation({\n        isValid: false,\n        message: t('datePicker.invalidRange'),\n      });\n    }\n  };\n\n  return (\n    <Grid container>\n      {validation.message && (\n        <Grid item xs={12}>\n          <Typography color=\"error\" variant=\"body2\">\n            {validation.message}\n          </Typography>\n        </Grid>\n      )}\n      <Grid item>\n        <TextField\n          select\n          label={t('datePicker.range.label')}\n          value={dateRangeOption || 'select'}\n          sx={{ minWidth: '200px', marginTop: 2, marginBottom: 2 }}\n          onChange={e => {\n            if (e.target.value !== 'custom') {\n              onChange(e.target.value === 'select' ? '' : e.target.value);\n            }\n            setDateRangeOption(e.target.value);\n          }}\n          variant=\"outlined\"\n          defaultValue=\"select\"\n        >\n          <MenuItem value=\"select\">{t('datePicker.range.default')}</MenuItem>\n          <MenuItem value=\"7-days\">{t('datePicker.range.last7days')}</MenuItem>\n          <MenuItem value=\"30-days\">\n            {t('datePicker.range.last30days')}\n          </MenuItem>\n          <MenuItem value=\"custom\">{t('datePicker.range.custom')}</MenuItem>\n        </TextField>\n      </Grid>\n      {dateRangeOption === 'custom' && (\n        <>\n          <Grid item>\n            <TextField\n              variant=\"outlined\"\n              label={t('datePicker.from')}\n              id=\"from-date\"\n              type=\"date\"\n              value={fromDate}\n              sx={{ minWidth: '200px', marginTop: 2, marginBottom: 2 }}\n              InputLabelProps={{ shrink: true }}\n              error={!validation.isValid}\n              onChange={e => {\n                handleCustom(e.target.value);\n              }}\n              inputProps={{\n                max: toDate || localDate,\n              }}\n            />\n          </Grid>\n          <Grid item>\n            <TextField\n              variant=\"outlined\"\n              label={t('datePicker.to')}\n              id=\"to-date\"\n              type=\"date\"\n              value={toDate}\n              sx={{ minWidth: '200px', marginTop: 2, marginBottom: 2 }}\n              InputLabelProps={{ shrink: true }}\n              error={!validation.isValid}\n              onChange={e => {\n                handleCustom(undefined, e.target.value);\n              }}\n              inputProps={{\n                min: fromDate,\n                max: localDate,\n              }}\n            />\n          </Grid>\n        </>\n      )}\n    </Grid>\n  );\n};\n"],"names":["React"],"mappings":"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"}