npm - @drodil/backstage-plugin-qeta-react - Versions diffs - 3.10.0 → 3.10.1 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (170) hide show

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

	@@ -1 +1 @@
1	- {"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":"~~;;;;;;;;;;;;;;;;;;;;;;;~~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"}
1	+ {"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":"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"}

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

@@ -7,7 +7,6 @@ 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 = () => {

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

	@@ -1 +1 @@
1	- {"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;;;;"}
1	+ {"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 CHANGED Viewed

@@ -7,13 +7,11 @@ 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
   );
@@ -51,7 +49,7 @@ const DateRangeFilter = (props) => {
       select: true,
       label: t("datePicker.range.label"),
       value: dateRangeOption || "select",
-      className: styles.dateFilter,
+      sx: { minWidth: "200px", marginTop: 2, marginBottom: 2 },
       onChange: (e) => {
         if (e.target.value !== "custom") {
           onChange(e.target.value === "select" ? "" : e.target.value);
@@ -73,7 +71,7 @@ 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) => {
@@ -91,7 +89,7 @@ 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) => {

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

	@@ -1 +1 @@
1	- {"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 { ~~useStyles,~~ 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 ~~styles = useStyles();\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 ~~className~~={~~styles.dateFilter~~}\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 ~~className~~={~~styles.dateFilter~~}\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 ~~className~~={~~styles.dateFilter~~}\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":"~~;;;;;;;;;;;;;~~AAkBa,MAAA,eAAA,GAAkB,CAAC,KAAgC,KAAA;AAC9D,EAAM,MAAA,EAAE,KAAO,EAAA,QAAA,EAAa,GAAA,KAAA,CAAA;AAC5B,~~EAAA,MAAM,SAAS,SAAU,EAAA,CAAA;AACzB,~~EAAM,MAAA,CAAC,eAAiB,EAAA,kBAAkB,CAAI,GAAA,QAAA;AAAA,IAC5C,KAAA;AAAA,GACF,CAAA;AACA,EAAM,MAAA,EAAE,CAAE,EAAA,GAAI,cAAe,EAAA,CAAA;AAC7B,EAAA,MAAM,SAAY,GAAA,UAAA,iBAAe,IAAA,IAAA,EAAM,CAAA,CAAA;AACvC,EAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAI,SAAS,SAAS,CAAA,CAAA;AAClD,EAAA,MAAM,CAAC,MAAA,EAAQ,SAAS,CAAA,GAAI,SAAS,SAAS,CAAA,CAAA;AAC9C,EAAA,MAAM,CAAC,UAAA,EAAY,aAAa,CAAA,GAAI,QAA8B,CAAA;AAAA,IAChE,OAAS,EAAA,IAAA;AAAA,GACV,CAAA,CAAA;AAED,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,kBAAA,CAAmB,SAAS,EAAE,CAAA,CAAA;AAC9B,IAAA,IAAI,KAAS,IAAA,KAAA,CAAM,OAAQ,CAAA,IAAI,KAAK,CAAG,EAAA;AACrC,MAAA,kBAAA,CAAmB,QAAQ,CAAA,CAAA;AAC3B,MAAA,WAAA,CAAY,MAAM,KAAM,CAAA,IAAI,CAAE,CAAA,CAAC,KAAK,EAAE,CAAA,CAAA;AACtC,MAAA,SAAA,CAAU,MAAM,KAAM,CAAA,IAAI,CAAE,CAAA,CAAC,KAAK,EAAE,CAAA,CAAA;AAAA,KACtC;AAAA,GACF,EAAG,CAAC,KAAK,CAAC,CAAA,CAAA;AAEV,EAAM,MAAA,YAAA,GAAe,CAAC,IAAA,EAAe,EAAgB,KAAA;AACnD,IAAA,MAAM,SAAY,GAAA,IAAI,IAAK,CAAA,IAAA,IAAQ,QAAQ,CAAA,CAAA;AAC3C,IAAA,MAAM,OAAU,GAAA,IAAI,IAAK,CAAA,EAAA,IAAM,MAAM,CAAA,CAAA;AACrC,IAAA,IAAI,aAAa,OAAS,EAAA;AACxB,MAAc,aAAA,CAAA,EAAE,OAAS,EAAA,IAAA,EAAM,CAAA,CAAA;AAC/B,MAAS,QAAA,CAAA,CAAA,EAAG,WAAW,SAAS,CAAC,KAAK,UAAW,CAAA,OAAO,CAAC,CAAE,CAAA,CAAA,CAAA;AAAA,KACtD,MAAA;AACL,MAAc,aAAA,CAAA;AAAA,QACZ,OAAS,EAAA,KAAA;AAAA,QACT,OAAA,EAAS,EAAE,yBAAyB,CAAA;AAAA,OACrC,CAAA,CAAA;AAAA,KACH;AAAA,GACF,CAAA;AAEA,EACE,uBAAAA,cAAA,CAAA,aAAA,CAAC,IAAK,EAAA,EAAA,SAAA,EAAS,IACZ,EAAA,EAAA,UAAA,CAAW,2BACTA,cAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EAAK,IAAI,EAAA,IAAA,EAAC,EAAI,EAAA,EAAA,EAAA,+CACZ,UAAW,EAAA,EAAA,KAAA,EAAM,OAAQ,EAAA,OAAA,EAAQ,OAC/B,EAAA,EAAA,UAAA,CAAW,OACd,CACF,CAEF,kBAAAA,cAAA,CAAA,aAAA,CAAC,IAAK,EAAA,EAAA,IAAA,EAAI,IACR,EAAA,kBAAAA,cAAA,CAAA,aAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,MAAM,EAAA,IAAA;AAAA,MACN,KAAA,EAAO,EAAE,wBAAwB,CAAA;AAAA,MACjC,OAAO,eAAmB,IAAA,QAAA;AAAA,MAC1B,~~WAAW~~,~~MAAO~~,CAAA,~~UAAA~~;AAAA,~~MAClB~~,UAAU,CAAK,CAAA,KAAA;AACb,QAAI,IAAA,CAAA,CAAE,MAAO,CAAA,KAAA,KAAU,QAAU,EAAA;AAC/B,UAAA,QAAA,CAAS,EAAE,MAAO,CAAA,KAAA,KAAU,WAAW,EAAK,GAAA,CAAA,CAAE,OAAO,KAAK,CAAA,CAAA;AAAA,SAC5D;AACA,QAAmB,kBAAA,CAAA,CAAA,CAAE,OAAO,KAAK,CAAA,CAAA;AAAA,OACnC;AAAA,MACA,OAAQ,EAAA,UAAA;AAAA,MACR,YAAa,EAAA,QAAA;AAAA,KAAA;AAAA,iDAEZ,QAAS,EAAA,EAAA,KAAA,EAAM,QAAU,EAAA,EAAA,CAAA,CAAE,0BAA0B,CAAE,CAAA;AAAA,iDACvD,QAAS,EAAA,EAAA,KAAA,EAAM,QAAU,EAAA,EAAA,CAAA,CAAE,4BAA4B,CAAE,CAAA;AAAA,iDACzD,QAAS,EAAA,EAAA,KAAA,EAAM,SACb,EAAA,EAAA,CAAA,CAAE,6BAA6B,CAClC,CAAA;AAAA,iDACC,QAAS,EAAA,EAAA,KAAA,EAAM,QAAU,EAAA,EAAA,CAAA,CAAE,yBAAyB,CAAE,CAAA;AAAA,GAE3D,GACC,eAAoB,KAAA,QAAA,gGAEhBA,cAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EAAK,MAAI,IACR,EAAA,kBAAAA,cAAA,CAAA,aAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,OAAQ,EAAA,UAAA;AAAA,MACR,KAAA,EAAO,EAAE,iBAAiB,CAAA;AAAA,MAC1B,EAAG,EAAA,WAAA;AAAA,MACH,IAAK,EAAA,MAAA;AAAA,MACL,KAAO,EAAA,QAAA;AAAA,MACP,~~WAAW~~,~~MAAO~~,CAAA,~~UAAA~~;AAAA,~~MAClB~~,eAAA,EAAiB,EAAE,MAAA,EAAQ,IAAK,EAAA;AAAA,MAChC,KAAA,EAAO,CAAC,UAAW,CAAA,OAAA;AAAA,MACnB,UAAU,CAAK,CAAA,KAAA;AACb,QAAa,YAAA,CAAA,CAAA,CAAE,OAAO,KAAK,CAAA,CAAA;AAAA,OAC7B;AAAA,MACA,UAAY,EAAA;AAAA,QACV,KAAK,MAAU,IAAA,SAAA;AAAA,OACjB;AAAA,KAAA;AAAA,GAEJ,CAAA,kBACCA,cAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EAAK,MAAI,IACR,EAAA,kBAAAA,cAAA,CAAA,aAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,OAAQ,EAAA,UAAA;AAAA,MACR,KAAA,EAAO,EAAE,eAAe,CAAA;AAAA,MACxB,EAAG,EAAA,SAAA;AAAA,MACH,IAAK,EAAA,MAAA;AAAA,MACL,KAAO,EAAA,MAAA;AAAA,MACP,~~WAAW~~,~~MAAO~~,CAAA,~~UAAA~~;AAAA,~~MAClB~~,eAAA,EAAiB,EAAE,MAAA,EAAQ,IAAK,EAAA;AAAA,MAChC,KAAA,EAAO,CAAC,UAAW,CAAA,OAAA;AAAA,MACnB,UAAU,CAAK,CAAA,KAAA;AACb,QAAa,YAAA,CAAA,KAAA,CAAA,EAAW,CAAE,CAAA,MAAA,CAAO,KAAK,CAAA,CAAA;AAAA,OACxC;AAAA,MACA,UAAY,EAAA;AAAA,QACV,GAAK,EAAA,QAAA;AAAA,QACL,GAAK,EAAA,SAAA;AAAA,OACP;AAAA,KAAA;AAAA,GAEJ,CACF,CAEJ,CAAA,CAAA;AAEJ;;;;"}
1	+ {"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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"}

package/dist/components/FilterPanel/FilterPanel.esm.js CHANGED Viewed

@@ -17,7 +17,6 @@ import { useApi, identityApiRef } from '@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 { EntitiesInput } from '../PostForm/EntitiesInput.esm.js';
 import { TagInput } from '../PostForm/TagInput.esm.js';
@@ -61,7 +60,6 @@ const FilterPanel = (props) => {
     showTagFilter = true,
     type
   } = props;
-  const styles = useStyles();
   const { t } = useTranslation();
   const [entities, setEntities] = React__default.useState(
     void 0
@@ -118,191 +116,204 @@ const FilterPanel = (props) => {
   const postFilters = isPostFilters(filters);
   const answerFilters = isAnswerFilters(filters);
   const collectionFilters = isCollectionFilters(filters);
-  return /* @__PURE__ */ React__default.createElement(Box, { className: `qetaFilterPanel ${styles.filterPanel}`, marginTop: 2 }, /* @__PURE__ */ React__default.createElement(
-    Grid,
+  return /* @__PURE__ */ React__default.createElement(
+    Box,
     {
-      container: true,
-      spacing: 4,
-      alignItems: "stretch",
-      justifyContent: "space-evenly"
+      marginTop: 2,
+      sx: (theme) => ({
+        border: `1px solid ${theme.palette.action.selected}`,
+        borderRadius: 1,
+        padding: 3
+      })
     },
-    (postFilters || answerFilters) && /* @__PURE__ */ React__default.createElement(Grid, { item: true }, /* @__PURE__ */ React__default.createElement(FormGroup, null, /* @__PURE__ */ React__default.createElement(FormLabel, { id: "qeta-filter-quick" }, t("filterPanel.quickFilters.label")), postFilters && type !== "article" && /* @__PURE__ */ React__default.createElement(
-      FormControlLabel,
-      {
-        control: /* @__PURE__ */ React__default.createElement(
-          Checkbox,
-          {
-            size: "small",
-            name: "noAnswers",
-            onChange: handleChange,
-            checked: filters.noAnswers === "true"
-          }
-        ),
-        label: t("filterPanel.noAnswers.label")
-      }
-    ), (postFilters || answerFilters) && type !== "article" && /* @__PURE__ */ React__default.createElement(
-      FormControlLabel,
-      {
-        control: /* @__PURE__ */ React__default.createElement(
-          Checkbox,
-          {
-            size: "small",
-            name: "noCorrectAnswer",
-            checked: filters.noCorrectAnswer === "true",
-            onChange: handleChange
-          }
-        ),
-        label: t("filterPanel.noCorrectAnswers.label")
-      }
-    ), (postFilters || answerFilters) && /* @__PURE__ */ React__default.createElement(
-      FormControlLabel,
+    /* @__PURE__ */ React__default.createElement(
+      Grid,
       {
-        control: /* @__PURE__ */ React__default.createElement(
-          Checkbox,
-          {
-            size: "small",
-            name: "noVotes",
-            checked: filters.noVotes === "true",
-            onChange: handleChange
+        container: true,
+        spacing: 4,
+        alignItems: "stretch",
+        justifyContent: "space-evenly"
+      },
+      (postFilters || answerFilters) && /* @__PURE__ */ React__default.createElement(Grid, { item: true }, /* @__PURE__ */ React__default.createElement(FormGroup, null, /* @__PURE__ */ React__default.createElement(FormLabel, { id: "qeta-filter-quick" }, t("filterPanel.quickFilters.label")), postFilters && type !== "article" && /* @__PURE__ */ React__default.createElement(
+        FormControlLabel,
+        {
+          control: /* @__PURE__ */ React__default.createElement(
+            Checkbox,
+            {
+              size: "small",
+              name: "noAnswers",
+              onChange: handleChange,
+              checked: filters.noAnswers === "true"
+            }
+          ),
+          label: t("filterPanel.noAnswers.label")
+        }
+      ), (postFilters || answerFilters) && type !== "article" && /* @__PURE__ */ React__default.createElement(
+        FormControlLabel,
+        {
+          control: /* @__PURE__ */ React__default.createElement(
+            Checkbox,
+            {
+              size: "small",
+              name: "noCorrectAnswer",
+              checked: filters.noCorrectAnswer === "true",
+              onChange: handleChange
+            }
+          ),
+          label: t("filterPanel.noCorrectAnswers.label")
+        }
+      ), (postFilters || answerFilters) && /* @__PURE__ */ React__default.createElement(
+        FormControlLabel,
+        {
+          control: /* @__PURE__ */ React__default.createElement(
+            Checkbox,
+            {
+              size: "small",
+              name: "noVotes",
+              checked: filters.noVotes === "true",
+              onChange: handleChange
+            }
+          ),
+          label: t("filterPanel.noVotes.label")
+        }
+      ), starredEntitiesApi.starredEntities.size > 0 && /* @__PURE__ */ React__default.createElement(
+        FormControlLabel,
+        {
+          control: /* @__PURE__ */ React__default.createElement(
+            Checkbox,
+            {
+              size: "small",
+              name: "starredEntities",
+              onChange: (e) => handleStarredEntities(e.target.checked),
+              checked: starredEntities
+            }
+          ),
+          label: t("filterPanel.starredEntities.label")
+        }
+      ), /* @__PURE__ */ React__default.createElement(
+        FormControlLabel,
+        {
+          control: /* @__PURE__ */ React__default.createElement(
+            Checkbox,
+            {
+              size: "small",
+              name: "ownedEntities",
+              onChange: (e) => handleOwnedEntities(e.target.checked),
+              checked: ownedEntities
+            }
+          ),
+          label: t("filterPanel.ownedEntities.label")
+        }
+      ))),
+      /* @__PURE__ */ React__default.createElement(Grid, { item: true }, /* @__PURE__ */ React__default.createElement(FormControl, null, /* @__PURE__ */ React__default.createElement(FormLabel, { id: "qeta-filter-order-by" }, t("filterPanel.orderBy.label")), /* @__PURE__ */ React__default.createElement(
+        RadioGroup,
+        {
+          "aria-labelledby": "qeta-filter-order-by",
+          name: "orderBy",
+          value: filters.orderBy,
+          onChange: handleChange,
+          style: {
+            display: "grid",
+            gridTemplateColumns: "1fr 1fr",
+            gap: "0 1rem"
           }
-        ),
-        label: t("filterPanel.noVotes.label")
-      }
-    ), starredEntitiesApi.starredEntities.size > 0 && /* @__PURE__ */ React__default.createElement(
-      FormControlLabel,
+        },
+        postFilters && filters.collectionId !== void 0 && radioSelect("rank", t("filterPanel.orderBy.rank")),
+        radioSelect("created", t("filterPanel.orderBy.created")),
+        (postFilters || collectionFilters) && radioSelect("title", t("filterPanel.orderBy.title")),
+        postFilters && radioSelect("views", t("filterPanel.orderBy.views")),
+        (postFilters || answerFilters) && radioSelect("score", t("filterPanel.orderBy.score")),
+        postFilters && radioSelect("trend", t("filterPanel.orderBy.trend")),
+        postFilters && type !== "article" && radioSelect("answersCount", t("filterPanel.orderBy.answers")),
+        (postFilters || answerFilters) && radioSelect("updated", t("filterPanel.orderBy.updated"))
+      ))),
+      /* @__PURE__ */ React__default.createElement(Grid, { item: true }, /* @__PURE__ */ React__default.createElement(FormControl, null, /* @__PURE__ */ React__default.createElement(FormLabel, { id: "qeta-filter-order" }, t("filterPanel.order.label")), /* @__PURE__ */ React__default.createElement(
+        RadioGroup,
+        {
+          "aria-labelledby": "qeta-filter-order",
+          name: "order",
+          value: filters.order,
+          onChange: handleChange
+        },
+        radioSelect("desc", t("filterPanel.order.desc")),
+        radioSelect("asc", t("filterPanel.order.asc"))
+      )))
+    ),
+    /* @__PURE__ */ React__default.createElement(Box, { marginY: "24px" }, /* @__PURE__ */ React__default.createElement(Divider, null)),
+    /* @__PURE__ */ React__default.createElement(Grid, { container: true, alignItems: "stretch", justifyContent: "space-evenly" }, /* @__PURE__ */ React__default.createElement(Grid, { item: true }, /* @__PURE__ */ React__default.createElement(
+      DateRangeFilter,
       {
-        control: /* @__PURE__ */ React__default.createElement(
-          Checkbox,
-          {
-            size: "small",
-            name: "starredEntities",
-            onChange: (e) => handleStarredEntities(e.target.checked),
-            checked: starredEntities
-          }
-        ),
-        label: t("filterPanel.starredEntities.label")
+        value: filters.dateRange,
+        onChange: (val) => onChange({ key: "dateRange", value: val })
       }
-    ), /* @__PURE__ */ React__default.createElement(
-      FormControlLabel,
+    )), showEntityFilter && /* @__PURE__ */ React__default.createElement(Grid, { item: true }, /* @__PURE__ */ React__default.createElement(Grid, { container: true, alignItems: "center" }, /* @__PURE__ */ React__default.createElement(Grid, { item: true }, /* @__PURE__ */ React__default.createElement(
+      EntitiesInput,
       {
-        control: /* @__PURE__ */ React__default.createElement(
-          Checkbox,
-          {
-            size: "small",
-            name: "ownedEntities",
-            onChange: (e) => handleOwnedEntities(e.target.checked),
-            checked: ownedEntities
-          }
-        ),
-        label: t("filterPanel.ownedEntities.label")
+        disabled: starredEntities || ownedEntities,
+        style: { minWidth: "200px" },
+        onChange: (newEntities) => {
+          const entityRefs = (newEntities ?? []).map(
+            (e) => stringifyEntityRef(e)
+          );
+          handleChange({
+            target: { name: "entities", value: entityRefs }
+          });
+          setEntities(newEntities);
+        },
+        value: entities,
+        useOnlyUsedEntities: true,
+        hideHelpText: true
       }
-    ))),
-    /* @__PURE__ */ React__default.createElement(Grid, { item: true }, /* @__PURE__ */ React__default.createElement(FormControl, null, /* @__PURE__ */ React__default.createElement(FormLabel, { id: "qeta-filter-order-by" }, t("filterPanel.orderBy.label")), /* @__PURE__ */ React__default.createElement(
-      RadioGroup,
+    )), filters.entities && filters.entities?.length > 1 && /* @__PURE__ */ React__default.createElement(Grid, { item: true }, /* @__PURE__ */ React__default.createElement(
+      Tooltip,
       {
-        "aria-labelledby": "qeta-filter-order-by",
-        name: "orderBy",
-        value: filters.orderBy,
-        onChange: handleChange,
-        style: {
-          display: "grid",
-          gridTemplateColumns: "1fr 1fr",
-          gap: "0 1rem"
-        }
+        title: filters.entitiesRelation === "or" ? t("filterPanel.toggleEntityRelation.and") : t("filterPanel.toggleEntityRelation.or")
       },
-      postFilters && filters.collectionId !== void 0 && radioSelect("rank", t("filterPanel.orderBy.rank")),
-      radioSelect("created", t("filterPanel.orderBy.created")),
-      (postFilters || collectionFilters) && radioSelect("title", t("filterPanel.orderBy.title")),
-      postFilters && radioSelect("views", t("filterPanel.orderBy.views")),
-      (postFilters || answerFilters) && radioSelect("score", t("filterPanel.orderBy.score")),
-      postFilters && radioSelect("trend", t("filterPanel.orderBy.trend")),
-      postFilters && type !== "article" && radioSelect("answersCount", t("filterPanel.orderBy.answers")),
-      (postFilters || answerFilters) && radioSelect("updated", t("filterPanel.orderBy.updated"))
-    ))),
-    /* @__PURE__ */ React__default.createElement(Grid, { item: true }, /* @__PURE__ */ React__default.createElement(FormControl, null, /* @__PURE__ */ React__default.createElement(FormLabel, { id: "qeta-filter-order" }, t("filterPanel.order.label")), /* @__PURE__ */ React__default.createElement(
-      RadioGroup,
+      /* @__PURE__ */ React__default.createElement(
+        IconButton,
+        {
+          disabled: starredEntities || ownedEntities,
+          onClick: () => {
+            if (filters.entitiesRelation === "or") {
+              onChange({ key: "entitiesRelation", value: "and" });
+            } else {
+              onChange({ key: "entitiesRelation", value: "or" });
+            }
+          },
+          size: "large"
+        },
+        filters.entitiesRelation === "or" ? /* @__PURE__ */ React__default.createElement(AdjustIcon, null) : /* @__PURE__ */ React__default.createElement(FiberManualRecordIcon, null)
+      )
+    )))), showTagFilter && /* @__PURE__ */ React__default.createElement(Grid, { item: true }, /* @__PURE__ */ React__default.createElement(Grid, { container: true, alignItems: "center" }, /* @__PURE__ */ React__default.createElement(Grid, { item: true }, /* @__PURE__ */ React__default.createElement(
+      TagInput,
       {
-        "aria-labelledby": "qeta-filter-order",
-        name: "order",
-        value: filters.order,
-        onChange: handleChange
-      },
-      radioSelect("desc", t("filterPanel.order.desc")),
-      radioSelect("asc", t("filterPanel.order.asc"))
-    )))
-  ), /* @__PURE__ */ React__default.createElement(Box, { marginY: "24px" }, /* @__PURE__ */ React__default.createElement(Divider, null)), /* @__PURE__ */ React__default.createElement(Grid, { container: true, alignItems: "stretch", justifyContent: "space-evenly" }, /* @__PURE__ */ React__default.createElement(Grid, { item: true }, /* @__PURE__ */ React__default.createElement(
-    DateRangeFilter,
-    {
-      value: filters.dateRange,
-      onChange: (val) => onChange({ key: "dateRange", value: val })
-    }
-  )), showEntityFilter && /* @__PURE__ */ React__default.createElement(Grid, { item: true }, /* @__PURE__ */ React__default.createElement(Grid, { container: true, alignItems: "center" }, /* @__PURE__ */ React__default.createElement(Grid, { item: true }, /* @__PURE__ */ React__default.createElement(
-    EntitiesInput,
-    {
-      disabled: starredEntities || ownedEntities,
-      style: { minWidth: "200px" },
-      onChange: (newEntities) => {
-        const entityRefs = (newEntities ?? []).map(
-          (e) => stringifyEntityRef(e)
-        );
-        handleChange({
-          target: { name: "entities", value: entityRefs }
-        });
-        setEntities(newEntities);
-      },
-      value: entities,
-      useOnlyUsedEntities: true,
-      hideHelpText: true
-    }
-  )), filters.entities && filters.entities?.length > 1 && /* @__PURE__ */ React__default.createElement(Grid, { item: true }, /* @__PURE__ */ React__default.createElement(
-    Tooltip,
-    {
-      title: filters.entitiesRelation === "or" ? t("filterPanel.toggleEntityRelation.and") : t("filterPanel.toggleEntityRelation.or")
-    },
-    /* @__PURE__ */ React__default.createElement(
-      IconButton,
+        style: { minWidth: "200px" },
+        onChange: (newTags) => onChange({ key: "tags", value: newTags }),
+        value: filters.tags,
+        hideHelpText: true,
+        allowCreate: false
+      }
+    )), filters.tags && filters.tags?.length > 1 && /* @__PURE__ */ React__default.createElement(Grid, { item: true }, /* @__PURE__ */ React__default.createElement(
+      Tooltip,
       {
-        disabled: starredEntities || ownedEntities,
-        onClick: () => {
-          if (filters.entitiesRelation === "or") {
-            onChange({ key: "entitiesRelation", value: "and" });
-          } else {
-            onChange({ key: "entitiesRelation", value: "or" });
-          }
-        },
-        size: "large"
+        title: filters.tagsRelation === "or" ? t("filterPanel.toggleTagRelation.and") : t("filterPanel.toggleTagRelation.or")
       },
-      filters.entitiesRelation === "or" ? /* @__PURE__ */ React__default.createElement(AdjustIcon, null) : /* @__PURE__ */ React__default.createElement(FiberManualRecordIcon, null)
-    )
-  )))), showTagFilter && /* @__PURE__ */ React__default.createElement(Grid, { item: true }, /* @__PURE__ */ React__default.createElement(Grid, { container: true, alignItems: "center" }, /* @__PURE__ */ React__default.createElement(Grid, { item: true }, /* @__PURE__ */ React__default.createElement(
-    TagInput,
-    {
-      style: { minWidth: "200px" },
-      onChange: (newTags) => onChange({ key: "tags", value: newTags }),
-      value: filters.tags,
-      hideHelpText: true,
-      allowCreate: false
-    }
-  )), filters.tags && filters.tags?.length > 1 && /* @__PURE__ */ React__default.createElement(Grid, { item: true }, /* @__PURE__ */ React__default.createElement(
-    Tooltip,
-    {
-      title: filters.tagsRelation === "or" ? t("filterPanel.toggleTagRelation.and") : t("filterPanel.toggleTagRelation.or")
-    },
-    /* @__PURE__ */ React__default.createElement(
-      IconButton,
-      {
-        onClick: () => {
-          if (filters.tagsRelation === "or") {
-            onChange({ key: "tagsRelation", value: "and" });
-          } else {
-            onChange({ key: "tagsRelation", value: "or" });
-          }
+      /* @__PURE__ */ React__default.createElement(
+        IconButton,
+        {
+          onClick: () => {
+            if (filters.tagsRelation === "or") {
+              onChange({ key: "tagsRelation", value: "and" });
+            } else {
+              onChange({ key: "tagsRelation", value: "or" });
+            }
+          },
+          size: "large"
         },
-        size: "large"
-      },
-      filters.tagsRelation === "or" ? /* @__PURE__ */ React__default.createElement(AdjustIcon, null) : /* @__PURE__ */ React__default.createElement(FiberManualRecordIcon, null)
-    )
-  ))))));
+        filters.tagsRelation === "or" ? /* @__PURE__ */ React__default.createElement(AdjustIcon, null) : /* @__PURE__ */ React__default.createElement(FiberManualRecordIcon, null)
+      )
+    )))))
+  );
 };
 export { FilterPanel, filterKeys };