@strapi/upload 5.12.0 → 5.12.2

package/dist/admin/components/AssetDialog/BrowseStep/PaginationFooter/PaginationFooter.mjs

@@ -0,0 +1,376 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Typography, VisuallyHidden } from '@strapi/design-system';
+import { ChevronLeft, ChevronRight } from '@strapi/icons';
+import { useIntl } from 'react-intl';
+import { styled, css } from 'styled-components';
+import { Pagination, usePagination } from './Pagination.mjs';
+
+// TODO: find a better naming convention for the file that was an index file before
+const PaginationText = styled(Typography)`
+  line-height: revert;
+`;
+const linkWrapperStyles = css`
+  padding: ${({ theme })=>theme.spaces[3]};
+  border-radius: ${({ theme })=>theme.borderRadius};
+  box-shadow: ${({ $active, theme })=>$active ? theme.shadows.filterShadow : undefined};
+  text-decoration: none;
+  display: flex;
+  position: relative;
+  outline: none;
+
+  &:after {
+    transition-property: all;
+    transition-duration: 0.2s;
+    border-radius: 8px;
+    content: '';
+    position: absolute;
+    top: -4px;
+    bottom: -4px;
+    left: -4px;
+    right: -4px;
+    border: 2px solid transparent;
+  }
+
+  &:focus-visible {
+    outline: none;
+
+    &:after {
+      border-radius: 8px;
+      content: '';
+      position: absolute;
+      top: -5px;
+      bottom: -5px;
+      left: -5px;
+      right: -5px;
+      border: 2px solid ${(props)=>props.theme.colors.primary600};
+    }
+  }
+`;
+const LinkWrapperButton = styled.button`
+  ${linkWrapperStyles}
+`;
+const LinkWrapperDiv = styled.div`
+  ${linkWrapperStyles}
+`;
+LinkWrapperButton.defaultProps = {
+    type: 'button'
+};
+const PageLinkWrapper = styled(LinkWrapperButton)`
+  color: ${({ theme, $active })=>$active ? theme.colors.primary700 : theme.colors.neutral800};
+  background: ${({ theme, $active })=>$active ? theme.colors.neutral0 : undefined};
+
+  &:hover {
+    box-shadow: ${({ theme })=>theme.shadows.filterShadow};
+  }
+`;
+const ActionLinkWrapper = styled(LinkWrapperButton)`
+  font-size: 1.1rem;
+  svg path {
+    fill: ${(p)=>p['aria-disabled'] ? p.theme.colors.neutral300 : p.theme.colors.neutral600};
+  }
+
+  &:focus,
+  &:hover {
+    svg path {
+      fill: ${(p)=>p['aria-disabled'] ? p.theme.colors.neutral300 : p.theme.colors.neutral700};
+    }
+  }
+
+  ${(p)=>p['aria-disabled'] ? `
+  pointer-events: none;
+    ` : undefined}
+`;
+const DotsWrapper = styled(LinkWrapperDiv)`
+  color: ${({ theme })=>theme.colors.neutral800};
+`;
+const PreviousLink = ({ children, ...props })=>{
+    const { activePage } = usePagination();
+    const disabled = activePage === 1;
+    return /*#__PURE__*/ jsx("li", {
+        children: /*#__PURE__*/ jsxs(ActionLinkWrapper, {
+            "aria-disabled": disabled,
+            tabIndex: disabled ? -1 : undefined,
+            ...props,
+            children: [
+                /*#__PURE__*/ jsx(VisuallyHidden, {
+                    children: children
+                }),
+                /*#__PURE__*/ jsx(ChevronLeft, {
+                    "aria-hidden": true
+                })
+            ]
+        })
+    });
+};
+const NextLink = ({ children, ...props })=>{
+    const { activePage, pageCount } = usePagination();
+    const disabled = activePage === pageCount;
+    return /*#__PURE__*/ jsx("li", {
+        children: /*#__PURE__*/ jsxs(ActionLinkWrapper, {
+            "aria-disabled": disabled,
+            tabIndex: disabled ? -1 : undefined,
+            ...props,
+            children: [
+                /*#__PURE__*/ jsx(VisuallyHidden, {
+                    children: children
+                }),
+                /*#__PURE__*/ jsx(ChevronRight, {
+                    "aria-hidden": true
+                })
+            ]
+        })
+    });
+};
+const PageLink = ({ number, children, ...props })=>{
+    const { activePage } = usePagination();
+    const isActive = activePage === number;
+    return /*#__PURE__*/ jsx("li", {
+        children: /*#__PURE__*/ jsxs(PageLinkWrapper, {
+            ...props,
+            $active: isActive,
+            children: [
+                /*#__PURE__*/ jsx(VisuallyHidden, {
+                    children: children
+                }),
+                /*#__PURE__*/ jsx(PaginationText, {
+                    "aria-hidden": true,
+                    variant: "pi",
+                    fontWeight: isActive ? 'bold' : '',
+                    children: number
+                })
+            ]
+        })
+    });
+};
+const Dots = ({ children, ...props })=>/*#__PURE__*/ jsx("li", {
+        children: /*#__PURE__*/ jsxs(DotsWrapper, {
+            ...props,
+            as: "div",
+            children: [
+                /*#__PURE__*/ jsx(VisuallyHidden, {
+                    children: children
+                }),
+                /*#__PURE__*/ jsx(PaginationText, {
+                    "aria-hidden": true,
+                    small: true,
+                    children: "…"
+                })
+            ]
+        })
+    });
+const PaginationFooter = ({ activePage, onChangePage, pagination: { pageCount } })=>{
+    const { formatMessage } = useIntl();
+    const previousActivePage = activePage - 1;
+    const nextActivePage = activePage + 1;
+    const firstLinks = [
+        /*#__PURE__*/ jsx(PageLink, {
+            number: 1,
+            onClick: ()=>{
+                onChangePage(1);
+            },
+            children: formatMessage({
+                id: 'components.pagination.go-to',
+                defaultMessage: 'Go to page {page}'
+            }, {
+                page: 1
+            })
+        }, 1)
+    ];
+    if (pageCount <= 4) {
+        const links = Array.from({
+            length: pageCount
+        }).map((_, i)=>i + 1).map((number)=>{
+            return /*#__PURE__*/ jsx(PageLink, {
+                number: number,
+                onClick: ()=>onChangePage(number),
+                children: formatMessage({
+                    id: 'components.pagination.go-to',
+                    defaultMessage: 'Go to page {page}'
+                }, {
+                    page: number
+                })
+            }, number);
+        });
+        return /*#__PURE__*/ jsxs(Pagination, {
+            activePage: activePage,
+            pageCount: pageCount,
+            children: [
+                /*#__PURE__*/ jsx(PreviousLink, {
+                    onClick: ()=>onChangePage(previousActivePage),
+                    children: formatMessage({
+                        id: 'components.pagination.go-to-previous',
+                        defaultMessage: 'Go to previous page'
+                    })
+                }),
+                links,
+                /*#__PURE__*/ jsx(NextLink, {
+                    onClick: ()=>onChangePage(nextActivePage),
+                    children: formatMessage({
+                        id: 'components.pagination.go-to-next',
+                        defaultMessage: 'Go to next page'
+                    })
+                })
+            ]
+        });
+    }
+    let firstLinksToCreate = [];
+    const lastLinks = [];
+    let lastLinksToCreate = [];
+    const middleLinks = [];
+    if (pageCount > 1) {
+        lastLinks.push(/*#__PURE__*/ jsx(PageLink, {
+            number: pageCount,
+            onClick: ()=>onChangePage(pageCount),
+            children: formatMessage({
+                id: 'components.pagination.go-to',
+                defaultMessage: 'Go to page {page}'
+            }, {
+                page: pageCount
+            })
+        }, pageCount));
+    }
+    if (activePage === 1 && pageCount >= 3) {
+        firstLinksToCreate = [
+            2
+        ];
+    }
+    if (activePage === 2 && pageCount >= 3) {
+        if (pageCount === 5) {
+            firstLinksToCreate = [
+                2,
+                3,
+                4
+            ];
+        } else if (pageCount === 3) {
+            firstLinksToCreate = [
+                2
+            ];
+        } else {
+            firstLinksToCreate = [
+                2,
+                3
+            ];
+        }
+    }
+    if (activePage === 4 && pageCount >= 3) {
+        firstLinksToCreate = [
+            2
+        ];
+    }
+    if (activePage === pageCount && pageCount >= 3) {
+        lastLinksToCreate = [
+            pageCount - 1
+        ];
+    }
+    if (activePage === pageCount - 2 && pageCount > 3) {
+        lastLinksToCreate = [
+            activePage + 1,
+            activePage,
+            activePage - 1
+        ];
+    }
+    if (activePage === pageCount - 3 && pageCount > 3 && activePage > 5) {
+        lastLinksToCreate = [
+            activePage + 2,
+            activePage + 1,
+            activePage,
+            activePage - 1
+        ];
+    }
+    if (activePage === pageCount - 1 && pageCount > 3) {
+        lastLinksToCreate = [
+            activePage,
+            activePage - 1
+        ];
+    }
+    lastLinksToCreate.forEach((number)=>{
+        lastLinks.unshift(/*#__PURE__*/ jsxs(PageLink, {
+            number: number,
+            onClick: ()=>onChangePage(number),
+            children: [
+                "Go to page ",
+                number
+            ]
+        }, number));
+    });
+    firstLinksToCreate.forEach((number)=>{
+        firstLinks.push(/*#__PURE__*/ jsx(PageLink, {
+            number: number,
+            onClick: ()=>onChangePage(number),
+            children: formatMessage({
+                id: 'components.pagination.go-to',
+                defaultMessage: 'Go to page {page}'
+            }, {
+                page: number
+            })
+        }, number));
+    });
+    if (![
+        1,
+        2
+    ].includes(activePage) && activePage <= pageCount - 3 && firstLinks.length + lastLinks.length < 6) {
+        const middleLinksToCreate = [
+            activePage - 1,
+            activePage,
+            activePage + 1
+        ];
+        middleLinksToCreate.forEach((number)=>{
+            middleLinks.push(/*#__PURE__*/ jsx(PageLink, {
+                number: number,
+                onClick: ()=>onChangePage(number),
+                children: formatMessage({
+                    id: 'components.pagination.go-to',
+                    defaultMessage: 'Go to page {page}'
+                }, {
+                    page: number
+                })
+            }, number));
+        });
+    }
+    const shouldShowDotsAfterFirstLink = pageCount > 5 || pageCount === 5 && (activePage === 1 || activePage === 5);
+    const shouldShowMiddleDots = middleLinks.length > 2 && activePage > 4 && pageCount > 5;
+    const beforeDotsLinksLength = shouldShowMiddleDots ? pageCount - activePage - 1 : pageCount - firstLinks.length - lastLinks.length;
+    const afterDotsLength = shouldShowMiddleDots ? pageCount - firstLinks.length - lastLinks.length : pageCount - activePage - 1;
+    return /*#__PURE__*/ jsxs(Pagination, {
+        activePage: activePage,
+        pageCount: pageCount,
+        children: [
+            /*#__PURE__*/ jsx(PreviousLink, {
+                onClick: ()=>onChangePage(previousActivePage),
+                children: formatMessage({
+                    id: 'components.pagination.go-to-previous',
+                    defaultMessage: 'Go to previous page'
+                })
+            }),
+            firstLinks,
+            shouldShowMiddleDots && /*#__PURE__*/ jsx(Dots, {
+                children: formatMessage({
+                    id: 'components.pagination.remaining-links',
+                    defaultMessage: 'And {number} other links'
+                }, {
+                    number: beforeDotsLinksLength
+                })
+            }),
+            middleLinks,
+            shouldShowDotsAfterFirstLink && /*#__PURE__*/ jsx(Dots, {
+                children: formatMessage({
+                    id: 'components.pagination.remaining-links',
+                    defaultMessage: 'And {number} other links'
+                }, {
+                    number: afterDotsLength
+                })
+            }),
+            lastLinks,
+            /*#__PURE__*/ jsx(NextLink, {
+                onClick: ()=>onChangePage(nextActivePage),
+                children: formatMessage({
+                    id: 'components.pagination.go-to-next',
+                    defaultMessage: 'Go to next page'
+                })
+            })
+        ]
+    });
+};
+
+export { PaginationFooter };
+//# sourceMappingURL=PaginationFooter.mjs.map

package/dist/admin/components/AssetDialog/BrowseStep/PaginationFooter/PaginationFooter.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"PaginationFooter.mjs","sources":["../../../../../../admin/src/components/AssetDialog/BrowseStep/PaginationFooter/PaginationFooter.tsx"],"sourcesContent":["// TODO: find a better naming convention for the file that was an index file before\n/**\n * The component works as follows: this is a duplicate of the helper-plugin one but without the router\n * `1` , 2, 3, ... 10\n * 1, `2`, 3, ... 10\n * 1, 2, `3`, 4, ... 10\n * 1, 2, 3, `4`, 5, ... 10\n * 1, ..,4, `5`, 6, ... 10\n *\n * 1, ...., 8, 9, `10`\n * 1, ...., 8, `9`, 10\n * 1, ...., 7, `8`, 9, 10\n * 1, ... 6, `7`, 8, 9, 10\n */\nimport { Typography, VisuallyHidden } from '@strapi/design-system';\nimport { ChevronLeft, ChevronRight } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\nimport { styled, css } from 'styled-components';\n\nimport { Pagination, usePagination } from './Pagination';\n\nconst PaginationText = styled(Typography)`\n  line-height: revert;\n`;\n\nconst linkWrapperStyles = css<{ $active?: boolean }>`\n  padding: ${({ theme }) => theme.spaces[3]};\n  border-radius: ${({ theme }) => theme.borderRadius};\n  box-shadow: ${({ $active, theme }) => ($active ? theme.shadows.filterShadow : undefined)};\n  text-decoration: none;\n  display: flex;\n  position: relative;\n  outline: none;\n\n  &:after {\n    transition-property: all;\n    transition-duration: 0.2s;\n    border-radius: 8px;\n    content: '';\n    position: absolute;\n    top: -4px;\n    bottom: -4px;\n    left: -4px;\n    right: -4px;\n    border: 2px solid transparent;\n  }\n\n  &:focus-visible {\n    outline: none;\n\n    &:after {\n      border-radius: 8px;\n      content: '';\n      position: absolute;\n      top: -5px;\n      bottom: -5px;\n      left: -5px;\n      right: -5px;\n      border: 2px solid ${(props) => props.theme.colors.primary600};\n    }\n  }\n`;\n\nconst LinkWrapperButton = styled.button<{ $active?: boolean }>`\n  ${linkWrapperStyles}\n`;\n\nconst LinkWrapperDiv = styled.div<{ $active?: boolean }>`\n  ${linkWrapperStyles}\n`;\n\nLinkWrapperButton.defaultProps = { type: 'button' };\n\nconst PageLinkWrapper = styled(LinkWrapperButton)`\n  color: ${({ theme, $active }) => ($active ? theme.colors.primary700 : theme.colors.neutral800)};\n  background: ${({ theme, $active }) => ($active ? theme.colors.neutral0 : undefined)};\n\n  &:hover {\n    box-shadow: ${({ theme }) => theme.shadows.filterShadow};\n  }\n`;\n\nconst ActionLinkWrapper = styled(LinkWrapperButton)`\n  font-size: 1.1rem;\n  svg path {\n    fill: ${(p) => (p['aria-disabled'] ? p.theme.colors.neutral300 : p.theme.colors.neutral600)};\n  }\n\n  &:focus,\n  &:hover {\n    svg path {\n      fill: ${(p) => (p['aria-disabled'] ? p.theme.colors.neutral300 : p.theme.colors.neutral700)};\n    }\n  }\n\n  ${(p) =>\n    p['aria-disabled']\n      ? `\n  pointer-events: none;\n    `\n      : undefined}\n`;\n\nconst DotsWrapper = styled(LinkWrapperDiv)`\n  color: ${({ theme }) => theme.colors.neutral800};\n`;\n\ninterface PaginationLinkProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  children: React.ReactNode;\n}\n\ninterface PageLinkProps extends PaginationLinkProps {\n  number: number;\n}\n\nconst PreviousLink = ({ children, ...props }: PaginationLinkProps) => {\n  const { activePage } = usePagination();\n\n  const disabled = activePage === 1;\n\n  return (\n    <li>\n      <ActionLinkWrapper aria-disabled={disabled} tabIndex={disabled ? -1 : undefined} {...props}>\n        <VisuallyHidden>{children}</VisuallyHidden>\n        <ChevronLeft aria-hidden />\n      </ActionLinkWrapper>\n    </li>\n  );\n};\n\nconst NextLink = ({ children, ...props }: PaginationLinkProps) => {\n  const { activePage, pageCount } = usePagination();\n\n  const disabled = activePage === pageCount;\n\n  return (\n    <li>\n      <ActionLinkWrapper aria-disabled={disabled} tabIndex={disabled ? -1 : undefined} {...props}>\n        <VisuallyHidden>{children}</VisuallyHidden>\n        <ChevronRight aria-hidden />\n      </ActionLinkWrapper>\n    </li>\n  );\n};\n\nconst PageLink = ({ number, children, ...props }: PageLinkProps) => {\n  const { activePage } = usePagination();\n\n  const isActive = activePage === number;\n\n  return (\n    <li>\n      <PageLinkWrapper {...props} $active={isActive}>\n        <VisuallyHidden>{children}</VisuallyHidden>\n        <PaginationText aria-hidden variant=\"pi\" fontWeight={isActive ? 'bold' : ''}>\n          {number}\n        </PaginationText>\n      </PageLinkWrapper>\n    </li>\n  );\n};\n\ninterface DotsProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode;\n}\n\nconst Dots = ({ children, ...props }: DotsProps) => (\n  <li>\n    <DotsWrapper {...props} as=\"div\">\n      <VisuallyHidden>{children}</VisuallyHidden>\n      <PaginationText aria-hidden small>\n        …\n      </PaginationText>\n    </DotsWrapper>\n  </li>\n);\n\ninterface PaginationFooterProps {\n  activePage: number;\n  onChangePage: (page: number) => void;\n  pagination: {\n    pageCount: number;\n  };\n}\n\nexport const PaginationFooter = ({\n  activePage,\n  onChangePage,\n  pagination: { pageCount },\n}: PaginationFooterProps) => {\n  const { formatMessage } = useIntl();\n\n  const previousActivePage = activePage - 1;\n  const nextActivePage = activePage + 1;\n\n  const firstLinks = [\n    <PageLink\n      key={1}\n      number={1}\n      onClick={() => {\n        onChangePage(1);\n      }}\n    >\n      {formatMessage(\n        { id: 'components.pagination.go-to', defaultMessage: 'Go to page {page}' },\n        { page: 1 }\n      )}\n    </PageLink>,\n  ];\n\n  if (pageCount <= 4) {\n    const links = Array.from({ length: pageCount })\n      .map((_, i) => i + 1)\n      .map((number) => {\n        return (\n          <PageLink key={number} number={number} onClick={() => onChangePage(number)}>\n            {formatMessage(\n              { id: 'components.pagination.go-to', defaultMessage: 'Go to page {page}' },\n              { page: number }\n            )}\n          </PageLink>\n        );\n      });\n\n    return (\n      <Pagination activePage={activePage} pageCount={pageCount}>\n        <PreviousLink onClick={() => onChangePage(previousActivePage)}>\n          {formatMessage({\n            id: 'components.pagination.go-to-previous',\n            defaultMessage: 'Go to previous page',\n          })}\n        </PreviousLink>\n        {links}\n        <NextLink onClick={() => onChangePage(nextActivePage)}>\n          {formatMessage({\n            id: 'components.pagination.go-to-next',\n            defaultMessage: 'Go to next page',\n          })}\n        </NextLink>\n      </Pagination>\n    );\n  }\n\n  let firstLinksToCreate: number[] = [];\n  const lastLinks: JSX.Element[] = [];\n  let lastLinksToCreate: number[] = [];\n  const middleLinks: JSX.Element[] = [];\n\n  if (pageCount > 1) {\n    lastLinks.push(\n      <PageLink key={pageCount} number={pageCount} onClick={() => onChangePage(pageCount)}>\n        {formatMessage(\n          { id: 'components.pagination.go-to', defaultMessage: 'Go to page {page}' },\n          { page: pageCount }\n        )}\n      </PageLink>\n    );\n  }\n\n  if (activePage === 1 && pageCount >= 3) {\n    firstLinksToCreate = [2];\n  }\n\n  if (activePage === 2 && pageCount >= 3) {\n    if (pageCount === 5) {\n      firstLinksToCreate = [2, 3, 4];\n    } else if (pageCount === 3) {\n      firstLinksToCreate = [2];\n    } else {\n      firstLinksToCreate = [2, 3];\n    }\n  }\n\n  if (activePage === 4 && pageCount >= 3) {\n    firstLinksToCreate = [2];\n  }\n\n  if (activePage === pageCount && pageCount >= 3) {\n    lastLinksToCreate = [pageCount - 1];\n  }\n\n  if (activePage === pageCount - 2 && pageCount > 3) {\n    lastLinksToCreate = [activePage + 1, activePage, activePage - 1];\n  }\n\n  if (activePage === pageCount - 3 && pageCount > 3 && activePage > 5) {\n    lastLinksToCreate = [activePage + 2, activePage + 1, activePage, activePage - 1];\n  }\n\n  if (activePage === pageCount - 1 && pageCount > 3) {\n    lastLinksToCreate = [activePage, activePage - 1];\n  }\n\n  lastLinksToCreate.forEach((number) => {\n    lastLinks.unshift(\n      <PageLink key={number} number={number} onClick={() => onChangePage(number)}>\n        Go to page {number}\n      </PageLink>\n    );\n  });\n\n  firstLinksToCreate.forEach((number) => {\n    firstLinks.push(\n      <PageLink key={number} number={number} onClick={() => onChangePage(number)}>\n        {formatMessage(\n          { id: 'components.pagination.go-to', defaultMessage: 'Go to page {page}' },\n          { page: number }\n        )}\n      </PageLink>\n    );\n  });\n\n  if (\n    ![1, 2].includes(activePage) &&\n    activePage <= pageCount - 3 &&\n    firstLinks.length + lastLinks.length < 6\n  ) {\n    const middleLinksToCreate = [activePage - 1, activePage, activePage + 1];\n\n    middleLinksToCreate.forEach((number) => {\n      middleLinks.push(\n        <PageLink key={number} number={number} onClick={() => onChangePage(number)}>\n          {formatMessage(\n            { id: 'components.pagination.go-to', defaultMessage: 'Go to page {page}' },\n            { page: number }\n          )}\n        </PageLink>\n      );\n    });\n  }\n\n  const shouldShowDotsAfterFirstLink =\n    pageCount > 5 || (pageCount === 5 && (activePage === 1 || activePage === 5));\n  const shouldShowMiddleDots = middleLinks.length > 2 && activePage > 4 && pageCount > 5;\n\n  const beforeDotsLinksLength = shouldShowMiddleDots\n    ? pageCount - activePage - 1\n    : pageCount - firstLinks.length - lastLinks.length;\n  const afterDotsLength = shouldShowMiddleDots\n    ? pageCount - firstLinks.length - lastLinks.length\n    : pageCount - activePage - 1;\n\n  return (\n    <Pagination activePage={activePage} pageCount={pageCount}>\n      <PreviousLink onClick={() => onChangePage(previousActivePage)}>\n        {formatMessage({\n          id: 'components.pagination.go-to-previous',\n          defaultMessage: 'Go to previous page',\n        })}\n      </PreviousLink>\n      {firstLinks}\n      {shouldShowMiddleDots && (\n        <Dots>\n          {formatMessage(\n            {\n              id: 'components.pagination.remaining-links',\n              defaultMessage: 'And {number} other links',\n            },\n            { number: beforeDotsLinksLength }\n          )}\n        </Dots>\n      )}\n      {middleLinks}\n      {shouldShowDotsAfterFirstLink && (\n        <Dots>\n          {formatMessage(\n            {\n              id: 'components.pagination.remaining-links',\n              defaultMessage: 'And {number} other links',\n            },\n            { number: afterDotsLength }\n          )}\n        </Dots>\n      )}\n      {lastLinks}\n      <NextLink onClick={() => onChangePage(nextActivePage)}>\n        {formatMessage({\n          id: 'components.pagination.go-to-next',\n          defaultMessage: 'Go to next page',\n        })}\n      </NextLink>\n    </Pagination>\n  );\n};\n"],"names":["PaginationText","styled","Typography","linkWrapperStyles","css","theme","spaces","borderRadius","$active","shadows","filterShadow","undefined","props","colors","primary600","LinkWrapperButton","button","LinkWrapperDiv","div","defaultProps","type","PageLinkWrapper","primary700","neutral800","neutral0","ActionLinkWrapper","p","neutral300","neutral600","neutral700","DotsWrapper","PreviousLink","children","activePage","usePagination","disabled","_jsx","li","_jsxs","aria-disabled","tabIndex","VisuallyHidden","ChevronLeft","aria-hidden","NextLink","pageCount","ChevronRight","PageLink","number","isActive","variant","fontWeight","Dots","as","small","PaginationFooter","onChangePage","pagination","formatMessage","useIntl","previousActivePage","nextActivePage","firstLinks","onClick","id","defaultMessage","page","links","Array","from","length","map","_","i","Pagination","firstLinksToCreate","lastLinks","lastLinksToCreate","middleLinks","push","forEach","unshift","includes","middleLinksToCreate","shouldShowDotsAfterFirstLink","shouldShowMiddleDots","beforeDotsLinksLength","afterDotsLength"],"mappings":"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"}

package/dist/admin/components/AssetDialog/BrowseStep/SearchAsset/SearchAsset.js

@@ -0,0 +1,102 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var strapiAdmin = require('@strapi/admin/strapi-admin');
+var designSystem = require('@strapi/design-system');
+var icons = require('@strapi/icons');
+var reactIntl = require('react-intl');
+require('byte-size');
+require('date-fns');
+var getTrad = require('../../../../utils/getTrad.js');
+require('qs');
+require('../../../../constants.js');
+require('../../../../utils/urlYupSchema.js');
+
+function _interopNamespaceDefault(e) {
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+
+// TODO: find a better naming convention for the file that was an index file before
+const SearchAsset = ({ onChangeSearch, queryValue = null })=>{
+    const { formatMessage } = reactIntl.useIntl();
+    const { trackUsage } = strapiAdmin.useTracking();
+    const [isOpen, setIsOpen] = React__namespace.useState(!!queryValue);
+    const [value, setValue] = React__namespace.useState(queryValue || '');
+    const wrapperRef = React__namespace.useRef(null);
+    React__namespace.useLayoutEffect(()=>{
+        if (isOpen) {
+            setTimeout(()=>{
+                wrapperRef.current?.querySelector('input')?.focus();
+            }, 0);
+        }
+    }, [
+        isOpen
+    ]);
+    const handleToggle = ()=>{
+        setIsOpen((prev)=>!prev);
+    };
+    const handleClear = ()=>{
+        handleToggle();
+        onChangeSearch(null);
+    };
+    const handleSubmit = (e)=>{
+        e.preventDefault();
+        e.stopPropagation();
+        trackUsage('didSearchMediaLibraryElements', {
+            location: 'content-manager'
+        });
+        onChangeSearch(value);
+    };
+    if (isOpen) {
+        return /*#__PURE__*/ jsxRuntime.jsx("div", {
+            ref: wrapperRef,
+            children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.SearchForm, {
+                onSubmit: handleSubmit,
+                children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Searchbar, {
+                    name: "search",
+                    onClear: handleClear,
+                    onChange: (e)=>setValue(e.target.value),
+                    clearLabel: formatMessage({
+                        id: getTrad.getTrad('search.clear.label'),
+                        defaultMessage: 'Clear the search'
+                    }),
+                    "aria-label": "search",
+                    size: "S",
+                    value: value,
+                    placeholder: formatMessage({
+                        id: getTrad.getTrad('search.placeholder'),
+                        defaultMessage: 'e.g: the first dog on the moon'
+                    }),
+                    children: formatMessage({
+                        id: getTrad.getTrad('search.label'),
+                        defaultMessage: 'Search for an asset'
+                    })
+                })
+            })
+        });
+    }
+    return /*#__PURE__*/ jsxRuntime.jsx(designSystem.IconButton, {
+        label: "Search",
+        onClick: handleToggle,
+        children: /*#__PURE__*/ jsxRuntime.jsx(icons.Search, {})
+    });
+};
+
+exports.SearchAsset = SearchAsset;
+//# sourceMappingURL=SearchAsset.js.map

package/dist/admin/components/AssetDialog/BrowseStep/SearchAsset/SearchAsset.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchAsset.js","sources":["../../../../../../admin/src/components/AssetDialog/BrowseStep/SearchAsset/SearchAsset.tsx"],"sourcesContent":["// TODO: find a better naming convention for the file that was an index file before\nimport * as React from 'react';\n\nimport { useTracking } from '@strapi/admin/strapi-admin';\nimport { IconButton, Searchbar, SearchForm } from '@strapi/design-system';\nimport { Search } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\n\nimport { getTrad } from '../../../../utils';\n\nimport type { Query } from '../../../../../../shared/contracts/files';\n\ninterface SearchAssetProps {\n  onChangeSearch: (_q: Query['_q'] | null) => void;\n  queryValue?: Query['_q'] | null;\n}\n\nexport const SearchAsset = ({ onChangeSearch, queryValue = null }: SearchAssetProps) => {\n  const { formatMessage } = useIntl();\n  const { trackUsage } = useTracking();\n  const [isOpen, setIsOpen] = React.useState(!!queryValue);\n  const [value, setValue] = React.useState(queryValue || '');\n  const wrapperRef = React.useRef<HTMLDivElement>(null);\n\n  React.useLayoutEffect(() => {\n    if (isOpen) {\n      setTimeout(() => {\n        wrapperRef.current?.querySelector('input')?.focus();\n      }, 0);\n    }\n  }, [isOpen]);\n\n  const handleToggle = () => {\n    setIsOpen((prev) => !prev);\n  };\n\n  const handleClear = () => {\n    handleToggle();\n    onChangeSearch(null);\n  };\n\n  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {\n    e.preventDefault();\n    e.stopPropagation();\n\n    trackUsage('didSearchMediaLibraryElements', { location: 'content-manager' });\n    onChangeSearch(value);\n  };\n\n  if (isOpen) {\n    return (\n      <div ref={wrapperRef}>\n        <SearchForm onSubmit={handleSubmit}>\n          <Searchbar\n            name=\"search\"\n            onClear={handleClear}\n            onChange={(e) => setValue(e.target.value)}\n            clearLabel={formatMessage({\n              id: getTrad('search.clear.label'),\n              defaultMessage: 'Clear the search',\n            })}\n            aria-label=\"search\"\n            size=\"S\"\n            value={value}\n            placeholder={formatMessage({\n              id: getTrad('search.placeholder'),\n              defaultMessage: 'e.g: the first dog on the moon',\n            })}\n          >\n            {formatMessage({ id: getTrad('search.label'), defaultMessage: 'Search for an asset' })}\n          </Searchbar>\n        </SearchForm>\n      </div>\n    );\n  }\n\n  return (\n    <IconButton label=\"Search\" onClick={handleToggle}>\n      <Search />\n    </IconButton>\n  );\n};\n"],"names":["SearchAsset","onChangeSearch","queryValue","formatMessage","useIntl","trackUsage","useTracking","isOpen","setIsOpen","React","useState","value","setValue","wrapperRef","useRef","useLayoutEffect","setTimeout","current","querySelector","focus","handleToggle","prev","handleClear","handleSubmit","e","preventDefault","stopPropagation","location","_jsx","div","ref","SearchForm","onSubmit","Searchbar","name","onClear","onChange","target","clearLabel","id","getTrad","defaultMessage","aria-label","size","placeholder","IconButton","label","onClick","Search"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAiBO,MAAMA,cAAc,CAAC,EAAEC,cAAc,EAAEC,UAAAA,GAAa,IAAI,EAAoB,GAAA;IACjF,MAAM,EAAEC,aAAa,EAAE,GAAGC,iBAAAA,EAAAA;IAC1B,MAAM,EAAEC,UAAU,EAAE,GAAGC,uBAAAA,EAAAA;IACvB,MAAM,CAACC,QAAQC,SAAU,CAAA,GAAGC,iBAAMC,QAAQ,CAAC,CAAC,CAACR,UAAAA,CAAAA;AAC7C,IAAA,MAAM,CAACS,KAAOC,EAAAA,QAAAA,CAAS,GAAGH,gBAAMC,CAAAA,QAAQ,CAACR,UAAc,IAAA,EAAA,CAAA;IACvD,MAAMW,UAAAA,GAAaJ,gBAAMK,CAAAA,MAAM,CAAiB,IAAA,CAAA;AAEhDL,IAAAA,gBAAAA,CAAMM,eAAe,CAAC,IAAA;AACpB,QAAA,IAAIR,MAAQ,EAAA;YACVS,UAAW,CAAA,IAAA;gBACTH,UAAWI,CAAAA,OAAO,EAAEC,aAAAA,CAAc,OAAUC,CAAAA,EAAAA,KAAAA,EAAAA;aAC3C,EAAA,CAAA,CAAA;AACL;KACC,EAAA;AAACZ,QAAAA;AAAO,KAAA,CAAA;AAEX,IAAA,MAAMa,YAAe,GAAA,IAAA;QACnBZ,SAAU,CAAA,CAACa,OAAS,CAACA,IAAAA,CAAAA;AACvB,KAAA;AAEA,IAAA,MAAMC,WAAc,GAAA,IAAA;AAClBF,QAAAA,YAAAA,EAAAA;QACAnB,cAAe,CAAA,IAAA,CAAA;AACjB,KAAA;AAEA,IAAA,MAAMsB,eAAe,CAACC,CAAAA,GAAAA;AACpBA,QAAAA,CAAAA,CAAEC,cAAc,EAAA;AAChBD,QAAAA,CAAAA,CAAEE,eAAe,EAAA;AAEjBrB,QAAAA,UAAAA,CAAW,+BAAiC,EAAA;YAAEsB,QAAU,EAAA;AAAkB,SAAA,CAAA;QAC1E1B,cAAeU,CAAAA,KAAAA,CAAAA;AACjB,KAAA;AAEA,IAAA,IAAIJ,MAAQ,EAAA;AACV,QAAA,qBACEqB,cAACC,CAAAA,KAAAA,EAAAA;YAAIC,GAAKjB,EAAAA,UAAAA;AACR,YAAA,QAAA,gBAAAe,cAACG,CAAAA,uBAAAA,EAAAA;gBAAWC,QAAUT,EAAAA,YAAAA;AACpB,gBAAA,QAAA,gBAAAK,cAACK,CAAAA,sBAAAA,EAAAA;oBACCC,IAAK,EAAA,QAAA;oBACLC,OAASb,EAAAA,WAAAA;AACTc,oBAAAA,QAAAA,EAAU,CAACZ,CAAMZ,GAAAA,QAAAA,CAASY,CAAEa,CAAAA,MAAM,CAAC1B,KAAK,CAAA;AACxC2B,oBAAAA,UAAAA,EAAYnC,aAAc,CAAA;AACxBoC,wBAAAA,EAAAA,EAAIC,eAAQ,CAAA,oBAAA,CAAA;wBACZC,cAAgB,EAAA;AAClB,qBAAA,CAAA;oBACAC,YAAW,EAAA,QAAA;oBACXC,IAAK,EAAA,GAAA;oBACLhC,KAAOA,EAAAA,KAAAA;AACPiC,oBAAAA,WAAAA,EAAazC,aAAc,CAAA;AACzBoC,wBAAAA,EAAAA,EAAIC,eAAQ,CAAA,oBAAA,CAAA;wBACZC,cAAgB,EAAA;AAClB,qBAAA,CAAA;8BAECtC,aAAc,CAAA;AAAEoC,wBAAAA,EAAAA,EAAIC,eAAQ,CAAA,cAAA,CAAA;wBAAiBC,cAAgB,EAAA;AAAsB,qBAAA;;;;AAK9F;AAEA,IAAA,qBACEb,cAACiB,CAAAA,uBAAAA,EAAAA;QAAWC,KAAM,EAAA,QAAA;QAASC,OAAS3B,EAAAA,YAAAA;AAClC,QAAA,QAAA,gBAAAQ,cAACoB,CAAAA,YAAAA,EAAAA,EAAAA;;AAGP;;;;"}

package/dist/admin/components/AssetDialog/BrowseStep/SearchAsset/SearchAsset.mjs

@@ -0,0 +1,81 @@
+import { jsx } from 'react/jsx-runtime';
+import * as React from 'react';
+import { useTracking } from '@strapi/admin/strapi-admin';
+import { SearchForm, Searchbar, IconButton } from '@strapi/design-system';
+import { Search } from '@strapi/icons';
+import { useIntl } from 'react-intl';
+import 'byte-size';
+import 'date-fns';
+import { getTrad } from '../../../../utils/getTrad.mjs';
+import 'qs';
+import '../../../../constants.mjs';
+import '../../../../utils/urlYupSchema.mjs';
+
+// TODO: find a better naming convention for the file that was an index file before
+const SearchAsset = ({ onChangeSearch, queryValue = null })=>{
+    const { formatMessage } = useIntl();
+    const { trackUsage } = useTracking();
+    const [isOpen, setIsOpen] = React.useState(!!queryValue);
+    const [value, setValue] = React.useState(queryValue || '');
+    const wrapperRef = React.useRef(null);
+    React.useLayoutEffect(()=>{
+        if (isOpen) {
+            setTimeout(()=>{
+                wrapperRef.current?.querySelector('input')?.focus();
+            }, 0);
+        }
+    }, [
+        isOpen
+    ]);
+    const handleToggle = ()=>{
+        setIsOpen((prev)=>!prev);
+    };
+    const handleClear = ()=>{
+        handleToggle();
+        onChangeSearch(null);
+    };
+    const handleSubmit = (e)=>{
+        e.preventDefault();
+        e.stopPropagation();
+        trackUsage('didSearchMediaLibraryElements', {
+            location: 'content-manager'
+        });
+        onChangeSearch(value);
+    };
+    if (isOpen) {
+        return /*#__PURE__*/ jsx("div", {
+            ref: wrapperRef,
+            children: /*#__PURE__*/ jsx(SearchForm, {
+                onSubmit: handleSubmit,
+                children: /*#__PURE__*/ jsx(Searchbar, {
+                    name: "search",
+                    onClear: handleClear,
+                    onChange: (e)=>setValue(e.target.value),
+                    clearLabel: formatMessage({
+                        id: getTrad('search.clear.label'),
+                        defaultMessage: 'Clear the search'
+                    }),
+                    "aria-label": "search",
+                    size: "S",
+                    value: value,
+                    placeholder: formatMessage({
+                        id: getTrad('search.placeholder'),
+                        defaultMessage: 'e.g: the first dog on the moon'
+                    }),
+                    children: formatMessage({
+                        id: getTrad('search.label'),
+                        defaultMessage: 'Search for an asset'
+                    })
+                })
+            })
+        });
+    }
+    return /*#__PURE__*/ jsx(IconButton, {
+        label: "Search",
+        onClick: handleToggle,
+        children: /*#__PURE__*/ jsx(Search, {})
+    });
+};
+
+export { SearchAsset };
+//# sourceMappingURL=SearchAsset.mjs.map

package/dist/admin/components/AssetDialog/BrowseStep/SearchAsset/SearchAsset.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchAsset.mjs","sources":["../../../../../../admin/src/components/AssetDialog/BrowseStep/SearchAsset/SearchAsset.tsx"],"sourcesContent":["// TODO: find a better naming convention for the file that was an index file before\nimport * as React from 'react';\n\nimport { useTracking } from '@strapi/admin/strapi-admin';\nimport { IconButton, Searchbar, SearchForm } from '@strapi/design-system';\nimport { Search } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\n\nimport { getTrad } from '../../../../utils';\n\nimport type { Query } from '../../../../../../shared/contracts/files';\n\ninterface SearchAssetProps {\n  onChangeSearch: (_q: Query['_q'] | null) => void;\n  queryValue?: Query['_q'] | null;\n}\n\nexport const SearchAsset = ({ onChangeSearch, queryValue = null }: SearchAssetProps) => {\n  const { formatMessage } = useIntl();\n  const { trackUsage } = useTracking();\n  const [isOpen, setIsOpen] = React.useState(!!queryValue);\n  const [value, setValue] = React.useState(queryValue || '');\n  const wrapperRef = React.useRef<HTMLDivElement>(null);\n\n  React.useLayoutEffect(() => {\n    if (isOpen) {\n      setTimeout(() => {\n        wrapperRef.current?.querySelector('input')?.focus();\n      }, 0);\n    }\n  }, [isOpen]);\n\n  const handleToggle = () => {\n    setIsOpen((prev) => !prev);\n  };\n\n  const handleClear = () => {\n    handleToggle();\n    onChangeSearch(null);\n  };\n\n  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {\n    e.preventDefault();\n    e.stopPropagation();\n\n    trackUsage('didSearchMediaLibraryElements', { location: 'content-manager' });\n    onChangeSearch(value);\n  };\n\n  if (isOpen) {\n    return (\n      <div ref={wrapperRef}>\n        <SearchForm onSubmit={handleSubmit}>\n          <Searchbar\n            name=\"search\"\n            onClear={handleClear}\n            onChange={(e) => setValue(e.target.value)}\n            clearLabel={formatMessage({\n              id: getTrad('search.clear.label'),\n              defaultMessage: 'Clear the search',\n            })}\n            aria-label=\"search\"\n            size=\"S\"\n            value={value}\n            placeholder={formatMessage({\n              id: getTrad('search.placeholder'),\n              defaultMessage: 'e.g: the first dog on the moon',\n            })}\n          >\n            {formatMessage({ id: getTrad('search.label'), defaultMessage: 'Search for an asset' })}\n          </Searchbar>\n        </SearchForm>\n      </div>\n    );\n  }\n\n  return (\n    <IconButton label=\"Search\" onClick={handleToggle}>\n      <Search />\n    </IconButton>\n  );\n};\n"],"names":["SearchAsset","onChangeSearch","queryValue","formatMessage","useIntl","trackUsage","useTracking","isOpen","setIsOpen","React","useState","value","setValue","wrapperRef","useRef","useLayoutEffect","setTimeout","current","querySelector","focus","handleToggle","prev","handleClear","handleSubmit","e","preventDefault","stopPropagation","location","_jsx","div","ref","SearchForm","onSubmit","Searchbar","name","onClear","onChange","target","clearLabel","id","getTrad","defaultMessage","aria-label","size","placeholder","IconButton","label","onClick","Search"],"mappings":";;;;;;;;;;;;;AAAA;AAiBO,MAAMA,cAAc,CAAC,EAAEC,cAAc,EAAEC,UAAAA,GAAa,IAAI,EAAoB,GAAA;IACjF,MAAM,EAAEC,aAAa,EAAE,GAAGC,OAAAA,EAAAA;IAC1B,MAAM,EAAEC,UAAU,EAAE,GAAGC,WAAAA,EAAAA;IACvB,MAAM,CAACC,QAAQC,SAAU,CAAA,GAAGC,MAAMC,QAAQ,CAAC,CAAC,CAACR,UAAAA,CAAAA;AAC7C,IAAA,MAAM,CAACS,KAAOC,EAAAA,QAAAA,CAAS,GAAGH,KAAMC,CAAAA,QAAQ,CAACR,UAAc,IAAA,EAAA,CAAA;IACvD,MAAMW,UAAAA,GAAaJ,KAAMK,CAAAA,MAAM,CAAiB,IAAA,CAAA;AAEhDL,IAAAA,KAAAA,CAAMM,eAAe,CAAC,IAAA;AACpB,QAAA,IAAIR,MAAQ,EAAA;YACVS,UAAW,CAAA,IAAA;gBACTH,UAAWI,CAAAA,OAAO,EAAEC,aAAAA,CAAc,OAAUC,CAAAA,EAAAA,KAAAA,EAAAA;aAC3C,EAAA,CAAA,CAAA;AACL;KACC,EAAA;AAACZ,QAAAA;AAAO,KAAA,CAAA;AAEX,IAAA,MAAMa,YAAe,GAAA,IAAA;QACnBZ,SAAU,CAAA,CAACa,OAAS,CAACA,IAAAA,CAAAA;AACvB,KAAA;AAEA,IAAA,MAAMC,WAAc,GAAA,IAAA;AAClBF,QAAAA,YAAAA,EAAAA;QACAnB,cAAe,CAAA,IAAA,CAAA;AACjB,KAAA;AAEA,IAAA,MAAMsB,eAAe,CAACC,CAAAA,GAAAA;AACpBA,QAAAA,CAAAA,CAAEC,cAAc,EAAA;AAChBD,QAAAA,CAAAA,CAAEE,eAAe,EAAA;AAEjBrB,QAAAA,UAAAA,CAAW,+BAAiC,EAAA;YAAEsB,QAAU,EAAA;AAAkB,SAAA,CAAA;QAC1E1B,cAAeU,CAAAA,KAAAA,CAAAA;AACjB,KAAA;AAEA,IAAA,IAAIJ,MAAQ,EAAA;AACV,QAAA,qBACEqB,GAACC,CAAAA,KAAAA,EAAAA;YAAIC,GAAKjB,EAAAA,UAAAA;AACR,YAAA,QAAA,gBAAAe,GAACG,CAAAA,UAAAA,EAAAA;gBAAWC,QAAUT,EAAAA,YAAAA;AACpB,gBAAA,QAAA,gBAAAK,GAACK,CAAAA,SAAAA,EAAAA;oBACCC,IAAK,EAAA,QAAA;oBACLC,OAASb,EAAAA,WAAAA;AACTc,oBAAAA,QAAAA,EAAU,CAACZ,CAAMZ,GAAAA,QAAAA,CAASY,CAAEa,CAAAA,MAAM,CAAC1B,KAAK,CAAA;AACxC2B,oBAAAA,UAAAA,EAAYnC,aAAc,CAAA;AACxBoC,wBAAAA,EAAAA,EAAIC,OAAQ,CAAA,oBAAA,CAAA;wBACZC,cAAgB,EAAA;AAClB,qBAAA,CAAA;oBACAC,YAAW,EAAA,QAAA;oBACXC,IAAK,EAAA,GAAA;oBACLhC,KAAOA,EAAAA,KAAAA;AACPiC,oBAAAA,WAAAA,EAAazC,aAAc,CAAA;AACzBoC,wBAAAA,EAAAA,EAAIC,OAAQ,CAAA,oBAAA,CAAA;wBACZC,cAAgB,EAAA;AAClB,qBAAA,CAAA;8BAECtC,aAAc,CAAA;AAAEoC,wBAAAA,EAAAA,EAAIC,OAAQ,CAAA,cAAA,CAAA;wBAAiBC,cAAgB,EAAA;AAAsB,qBAAA;;;;AAK9F;AAEA,IAAA,qBACEb,GAACiB,CAAAA,UAAAA,EAAAA;QAAWC,KAAM,EAAA,QAAA;QAASC,OAAS3B,EAAAA,YAAAA;AAClC,QAAA,QAAA,gBAAAQ,GAACoB,CAAAA,MAAAA,EAAAA,EAAAA;;AAGP;;;;"}

package/dist/admin/components/AssetDialog/BrowseStep/utils/isSelectable.js

@@ -0,0 +1,14 @@
+'use strict';
+
+const isSelectable = (allowedTypes, mime = '')=>{
+    if (!mime) return false;
+    const fileType = mime.split('/')[0];
+    return allowedTypes.includes(fileType) || allowedTypes.includes('file') && ![
+        'video',
+        'image',
+        'audio'
+    ].includes(fileType);
+};
+
+exports.isSelectable = isSelectable;
+//# sourceMappingURL=isSelectable.js.map

package/dist/admin/components/AssetDialog/BrowseStep/utils/isSelectable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"isSelectable.js","sources":["../../../../../../admin/src/components/AssetDialog/BrowseStep/utils/isSelectable.ts"],"sourcesContent":["export const isSelectable = (allowedTypes: string[], mime = '') => {\n  if (!mime) return false;\n\n  const fileType = mime.split('/')[0];\n\n  return (\n    allowedTypes.includes(fileType) ||\n    (allowedTypes.includes('file') && !['video', 'image', 'audio'].includes(fileType))\n  );\n};\n"],"names":["isSelectable","allowedTypes","mime","fileType","split","includes"],"mappings":";;AAAaA,MAAAA,YAAAA,GAAe,CAACC,YAAAA,EAAwBC,OAAO,EAAE,GAAA;IAC5D,IAAI,CAACA,MAAM,OAAO,KAAA;AAElB,IAAA,MAAMC,WAAWD,IAAKE,CAAAA,KAAK,CAAC,GAAA,CAAI,CAAC,CAAE,CAAA;IAEnC,OACEH,YAAAA,CAAaI,QAAQ,CAACF,QAAAA,CAAAA,IACrBF,aAAaI,QAAQ,CAAC,WAAW,CAAC;AAAC,QAAA,OAAA;AAAS,QAAA,OAAA;AAAS,QAAA;AAAQ,KAAA,CAACA,QAAQ,CAACF,QAAAA,CAAAA;AAE5E;;;;"}

package/dist/admin/components/AssetDialog/BrowseStep/utils/isSelectable.mjs

@@ -0,0 +1,12 @@
+const isSelectable = (allowedTypes, mime = '')=>{
+    if (!mime) return false;
+    const fileType = mime.split('/')[0];
+    return allowedTypes.includes(fileType) || allowedTypes.includes('file') && ![
+        'video',
+        'image',
+        'audio'
+    ].includes(fileType);
+};
+
+export { isSelectable };
+//# sourceMappingURL=isSelectable.mjs.map