@strapi/admin 5.13.1 → 5.15.0

package/dist/admin/admin/src/components/SubNav.mjs

@@ -0,0 +1,267 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useId, useState } from 'react';
+import { SubNav as SubNav$1, Box, Flex, Typography, IconButton } from '@strapi/design-system';
+import { Plus, ChevronDown } from '@strapi/icons';
+import { NavLink } from 'react-router-dom';
+import { styled } from 'styled-components';
+
+const Main = styled(SubNav$1)`
+  background-color: ${({ theme })=>theme.colors.neutral0};
+  border-right: 1px solid ${({ theme })=>theme.colors.neutral150};
+
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+`;
+const StyledLink = styled(NavLink)`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  text-decoration: none;
+  height: 32px;
+
+  color: ${({ theme })=>theme.colors.neutral800};
+
+  &.active > div {
+    ${({ theme })=>{
+    return `
+        background-color: ${theme.colors.primary100};
+        color: ${theme.colors.primary700};
+        font-weight: 500;
+      `;
+}}
+  }
+
+  &:hover.active > div {
+    ${({ theme })=>{
+    return `
+        background-color: ${theme.colors.primary100};
+      `;
+}}
+  }
+
+  &:hover > div {
+    ${({ theme })=>{
+    return `
+        background-color: ${theme.colors.neutral100};
+      `;
+}}
+  }
+
+  &:focus-visible {
+    outline-offset: -2px;
+  }
+`;
+const Link = (props)=>{
+    const { label, endAction, ...rest } = props;
+    return /*#__PURE__*/ jsx(StyledLink, {
+        ...rest,
+        children: /*#__PURE__*/ jsx(Box, {
+            width: '100%',
+            paddingLeft: 3,
+            paddingRight: 3,
+            borderRadius: 1,
+            children: /*#__PURE__*/ jsxs(Flex, {
+                justifyContent: "space-between",
+                width: "100%",
+                gap: 1,
+                children: [
+                    /*#__PURE__*/ jsx(Typography, {
+                        tag: "div",
+                        lineHeight: "32px",
+                        width: "100%",
+                        overflow: "hidden",
+                        style: {
+                            textOverflow: 'ellipsis',
+                            whiteSpace: 'nowrap'
+                        },
+                        children: label
+                    }),
+                    /*#__PURE__*/ jsx(Flex, {
+                        gap: 2,
+                        children: endAction
+                    })
+                ]
+            })
+        })
+    });
+};
+const StyledHeader = styled(Box)`
+  height: 56px;
+  display: flex;
+  align-items: center;
+  padding-left: ${({ theme })=>theme.spaces[5]};
+`;
+const Header = ({ label })=>{
+    return /*#__PURE__*/ jsx(StyledHeader, {
+        children: /*#__PURE__*/ jsx(Typography, {
+            variant: "beta",
+            tag: "h2",
+            children: label
+        })
+    });
+};
+const Sections = ({ children, ...props })=>{
+    return /*#__PURE__*/ jsx(Box, {
+        paddingBottom: 4,
+        children: /*#__PURE__*/ jsx(Flex, {
+            tag: "ol",
+            gap: "5",
+            direction: "column",
+            alignItems: "stretch",
+            ...props,
+            children: children.map((child, index)=>{
+                return /*#__PURE__*/ jsx("li", {
+                    children: child
+                }, index);
+            })
+        })
+    });
+};
+const Section = ({ label, children, link })=>{
+    const listId = useId();
+    return /*#__PURE__*/ jsxs(Flex, {
+        direction: "column",
+        alignItems: "stretch",
+        gap: 2,
+        children: [
+            /*#__PURE__*/ jsx(Box, {
+                paddingLeft: 5,
+                paddingRight: 5,
+                children: /*#__PURE__*/ jsxs(Flex, {
+                    position: "relative",
+                    justifyContent: "space-between",
+                    children: [
+                        /*#__PURE__*/ jsx(Flex, {
+                            children: /*#__PURE__*/ jsx(Box, {
+                                children: /*#__PURE__*/ jsx(Typography, {
+                                    variant: "sigma",
+                                    textColor: "neutral600",
+                                    children: label
+                                })
+                            })
+                        }),
+                        link && /*#__PURE__*/ jsx(IconButton, {
+                            label: link.label,
+                            variant: "ghost",
+                            withTooltip: true,
+                            onClick: link.onClik,
+                            size: "XS",
+                            children: /*#__PURE__*/ jsx(Plus, {})
+                        })
+                    ]
+                })
+            }),
+            /*#__PURE__*/ jsx(Flex, {
+                tag: "ol",
+                id: listId,
+                direction: "column",
+                gap: "2px",
+                alignItems: 'stretch',
+                marginLeft: 2,
+                marginRight: 2,
+                children: children.map((child, index)=>{
+                    return /*#__PURE__*/ jsx("li", {
+                        children: child
+                    }, index);
+                })
+            })
+        ]
+    });
+};
+const SubSectionHeader = styled.button`
+  cursor: pointer;
+  width: 100%;
+  border: none;
+  padding: 0;
+  background: transparent;
+  display: flex;
+  align-items: center;
+
+  height: 32px;
+
+  border-radius: ${({ theme })=>theme.borderRadius};
+
+  padding-left: ${({ theme })=>theme.spaces[3]};
+  padding-right: ${({ theme })=>theme.spaces[3]};
+  padding-top: ${({ theme })=>theme.spaces[2]};
+  padding-bottom: ${({ theme })=>theme.spaces[2]};
+
+  &:hover {
+    background-color: ${({ theme })=>theme.colors.neutral100};
+  }
+`;
+const SubSectionLinkWrapper = styled.li`
+  ${StyledLink} > div {
+    padding-left: 36px;
+  }
+`;
+const SubSection = ({ label, children })=>{
+    const [isOpen, setOpenLinks] = useState(true);
+    const listId = useId();
+    const handleClick = ()=>{
+        setOpenLinks((prev)=>!prev);
+    };
+    return /*#__PURE__*/ jsxs(Box, {
+        children: [
+            /*#__PURE__*/ jsx(Flex, {
+                justifyContent: "space-between",
+                children: /*#__PURE__*/ jsxs(SubSectionHeader, {
+                    onClick: handleClick,
+                    "aria-expanded": isOpen,
+                    "aria-controls": listId,
+                    children: [
+                        /*#__PURE__*/ jsx(ChevronDown, {
+                            "aria-hidden": true,
+                            fill: "neutral500",
+                            style: {
+                                transform: `rotate(${isOpen ? '0deg' : '-90deg'})`,
+                                transition: 'transform 0.5s'
+                            }
+                        }),
+                        /*#__PURE__*/ jsx(Box, {
+                            paddingLeft: 2,
+                            children: /*#__PURE__*/ jsx(Typography, {
+                                tag: "span",
+                                fontWeight: "semiBold",
+                                textColor: "neutral800",
+                                children: label
+                            })
+                        })
+                    ]
+                })
+            }),
+            /*#__PURE__*/ jsx(Flex, {
+                tag: "ul",
+                id: listId,
+                direction: "column",
+                gap: "2px",
+                alignItems: 'stretch',
+                style: {
+                    maxHeight: isOpen ? '1000px' : 0,
+                    overflow: 'hidden',
+                    transition: isOpen ? 'max-height 1s ease-in-out' : 'max-height 0.5s cubic-bezier(0, 1, 0, 1)'
+                },
+                children: children.map((child, index)=>{
+                    return /*#__PURE__*/ jsx(SubSectionLinkWrapper, {
+                        children: child
+                    }, index);
+                })
+            })
+        ]
+    });
+};
+const SubNav = {
+    Main,
+    Header,
+    Link,
+    Sections,
+    Section,
+    SubSection
+};
+
+export { SubNav };
+//# sourceMappingURL=SubNav.mjs.map

package/dist/admin/admin/src/components/SubNav.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SubNav.mjs","sources":["../../../../../admin/src/components/SubNav.tsx"],"sourcesContent":["import { useId, useState } from 'react';\n\nimport { Box, SubNav as DSSubNav, Flex, Typography, IconButton } from '@strapi/design-system';\nimport { ChevronDown, Plus } from '@strapi/icons';\nimport { NavLink } from 'react-router-dom';\nimport { styled } from 'styled-components';\n\nconst Main = styled(DSSubNav)`\n  background-color: ${({ theme }) => theme.colors.neutral0};\n  border-right: 1px solid ${({ theme }) => theme.colors.neutral150};\n\n  scrollbar-width: none;\n  -ms-overflow-style: none;\n\n  &::-webkit-scrollbar {\n    display: none;\n  }\n`;\n\nconst StyledLink = styled(NavLink)`\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  text-decoration: none;\n  height: 32px;\n\n  color: ${({ theme }) => theme.colors.neutral800};\n\n  &.active > div {\n    ${({ theme }) => {\n      return `\n        background-color: ${theme.colors.primary100};\n        color: ${theme.colors.primary700};\n        font-weight: 500;\n      `;\n    }}\n  }\n\n  &:hover.active > div {\n    ${({ theme }) => {\n      return `\n        background-color: ${theme.colors.primary100};\n      `;\n    }}\n  }\n\n  &:hover > div {\n    ${({ theme }) => {\n      return `\n        background-color: ${theme.colors.neutral100};\n      `;\n    }}\n  }\n\n  &:focus-visible {\n    outline-offset: -2px;\n  }\n`;\n\nconst Link = (\n  props: Omit<React.ComponentProps<typeof StyledLink>, 'label'> & {\n    label: React.ReactNode;\n    endAction?: React.ReactNode;\n  }\n) => {\n  const { label, endAction, ...rest } = props;\n  return (\n    <StyledLink {...rest}>\n      <Box width={'100%'} paddingLeft={3} paddingRight={3} borderRadius={1}>\n        <Flex justifyContent=\"space-between\" width=\"100%\" gap={1}>\n          <Typography\n            tag=\"div\"\n            lineHeight=\"32px\"\n            width=\"100%\"\n            overflow=\"hidden\"\n            style={{ textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}\n          >\n            {label}\n          </Typography>\n          <Flex gap={2}>{endAction}</Flex>\n        </Flex>\n      </Box>\n    </StyledLink>\n  );\n};\n\nconst StyledHeader = styled(Box)`\n  height: 56px;\n  display: flex;\n  align-items: center;\n  padding-left: ${({ theme }) => theme.spaces[5]};\n`;\n\nconst Header = ({ label }: { label: string }) => {\n  return (\n    <StyledHeader>\n      <Typography variant=\"beta\" tag=\"h2\">\n        {label}\n      </Typography>\n    </StyledHeader>\n  );\n};\n\nconst Sections = ({ children, ...props }: { children: React.ReactNode[]; [key: string]: any }) => {\n  return (\n    <Box paddingBottom={4}>\n      <Flex tag=\"ol\" gap=\"5\" direction=\"column\" alignItems=\"stretch\" {...props}>\n        {children.map((child, index) => {\n          return <li key={index}>{child}</li>;\n        })}\n      </Flex>\n    </Box>\n  );\n};\n\nconst Section = ({\n  label,\n  children,\n  link,\n}: {\n  label: string;\n  children: React.ReactNode[];\n  link?: { label: string; onClik: () => void };\n}) => {\n  const listId = useId();\n\n  return (\n    <Flex direction=\"column\" alignItems=\"stretch\" gap={2}>\n      <Box paddingLeft={5} paddingRight={5}>\n        <Flex position=\"relative\" justifyContent=\"space-between\">\n          <Flex>\n            <Box>\n              <Typography variant=\"sigma\" textColor=\"neutral600\">\n                {label}\n              </Typography>\n            </Box>\n          </Flex>\n          {link && (\n            <IconButton\n              label={link.label}\n              variant=\"ghost\"\n              withTooltip\n              onClick={link.onClik}\n              size=\"XS\"\n            >\n              <Plus />\n            </IconButton>\n          )}\n        </Flex>\n      </Box>\n      <Flex\n        tag=\"ol\"\n        id={listId}\n        direction=\"column\"\n        gap=\"2px\"\n        alignItems={'stretch'}\n        marginLeft={2}\n        marginRight={2}\n      >\n        {children.map((child, index) => {\n          return <li key={index}>{child}</li>;\n        })}\n      </Flex>\n    </Flex>\n  );\n};\n\nconst SubSectionHeader = styled.button`\n  cursor: pointer;\n  width: 100%;\n  border: none;\n  padding: 0;\n  background: transparent;\n  display: flex;\n  align-items: center;\n\n  height: 32px;\n\n  border-radius: ${({ theme }) => theme.borderRadius};\n\n  padding-left: ${({ theme }) => theme.spaces[3]};\n  padding-right: ${({ theme }) => theme.spaces[3]};\n  padding-top: ${({ theme }) => theme.spaces[2]};\n  padding-bottom: ${({ theme }) => theme.spaces[2]};\n\n  &:hover {\n    background-color: ${({ theme }) => theme.colors.neutral100};\n  }\n`;\n\nconst SubSectionLinkWrapper = styled.li`\n  ${StyledLink} > div {\n    padding-left: 36px;\n  }\n`;\n\nconst SubSection = ({ label, children }: { label: string; children: React.ReactNode[] }) => {\n  const [isOpen, setOpenLinks] = useState(true);\n  const listId = useId();\n\n  const handleClick = () => {\n    setOpenLinks((prev) => !prev);\n  };\n\n  return (\n    <Box>\n      <Flex justifyContent=\"space-between\">\n        <SubSectionHeader onClick={handleClick} aria-expanded={isOpen} aria-controls={listId}>\n          <ChevronDown\n            aria-hidden\n            fill=\"neutral500\"\n            style={{\n              transform: `rotate(${isOpen ? '0deg' : '-90deg'})`,\n              transition: 'transform 0.5s',\n            }}\n          />\n          <Box paddingLeft={2}>\n            <Typography tag=\"span\" fontWeight=\"semiBold\" textColor=\"neutral800\">\n              {label}\n            </Typography>\n          </Box>\n        </SubSectionHeader>\n      </Flex>\n      {\n        <Flex\n          tag=\"ul\"\n          id={listId}\n          direction=\"column\"\n          gap=\"2px\"\n          alignItems={'stretch'}\n          style={{\n            maxHeight: isOpen ? '1000px' : 0,\n            overflow: 'hidden',\n            transition: isOpen\n              ? 'max-height 1s ease-in-out'\n              : 'max-height 0.5s cubic-bezier(0, 1, 0, 1)',\n          }}\n        >\n          {children.map((child, index) => {\n            return <SubSectionLinkWrapper key={index}>{child}</SubSectionLinkWrapper>;\n          })}\n        </Flex>\n      }\n    </Box>\n  );\n};\n\nexport const SubNav = {\n  Main,\n  Header,\n  Link,\n  Sections,\n  Section,\n  SubSection,\n};\n"],"names":["Main","styled","DSSubNav","theme","colors","neutral0","neutral150","StyledLink","NavLink","neutral800","primary100","primary700","neutral100","Link","props","label","endAction","rest","_jsx","Box","width","paddingLeft","paddingRight","borderRadius","_jsxs","Flex","justifyContent","gap","Typography","tag","lineHeight","overflow","style","textOverflow","whiteSpace","StyledHeader","spaces","Header","variant","Sections","children","paddingBottom","direction","alignItems","map","child","index","li","Section","link","listId","useId","position","textColor","IconButton","withTooltip","onClick","onClik","size","Plus","id","marginLeft","marginRight","SubSectionHeader","button","SubSectionLinkWrapper","SubSection","isOpen","setOpenLinks","useState","handleClick","prev","aria-expanded","aria-controls","ChevronDown","aria-hidden","fill","transform","transition","fontWeight","maxHeight","SubNav"],"mappings":"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"}

package/dist/admin/admin/src/components/Table.js

@@ -6,7 +6,7 @@ var designSystem = require('@strapi/design-system');
 var icons = require('@strapi/icons');
 var symbols = require('@strapi/icons/symbols');
 var reactIntl = require('react-intl');
-var styledComponents = require('styled-components');
+var styled = require('styled-components');
 var useControllableState = require('../hooks/useControllableState.js');
 var useQueryParams = require('../hooks/useQueryParams.js');
 var Context = require('./Context.js');
@@ -137,7 +137,7 @@ const Root = ({ children, defaultSelectedRows, footer, headers = [], isLoading =
         })
     });
 };
-const SortIcon = styledComponents.styled(icons.CaretDown)`
+const SortIcon = styled.styled(icons.CaretDown)`
   transform: ${({ $isUp })=>`rotate(${$isUp ? '180' : '0'}deg)`};
 `;
 /* -------------------------------------------------------------------------------------------------

package/dist/admin/admin/src/components/Table.js.map

@@ -1 +1 @@
-{"version":3,"file":"Table.js","sources":["../../../../../admin/src/components/Table.tsx"],"sourcesContent":["/**\n * TODO: honestly, half of this stuff should come straight from\n * the design-system and then we can just wrap round the bits for\n * the i18n & router interactions.\n *\n * So we'll do that in v2 of the DS.\n */\n\nimport * as React from 'react';\n\nimport {\n  Flex,\n  Typography,\n  Th,\n  Tbody,\n  Td,\n  Tooltip,\n  IconButton,\n  Thead,\n  Tr,\n  RawTrProps,\n  Checkbox,\n  Loader,\n  Table as DSTable,\n  EmptyStateLayout,\n  EmptyStateLayoutProps,\n  TableProps,\n  RawTdProps,\n} from '@strapi/design-system';\nimport { CaretDown } from '@strapi/icons';\nimport { EmptyDocuments } from '@strapi/icons/symbols';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\nimport { useControllableState } from '../hooks/useControllableState';\nimport { useQueryParams } from '../hooks/useQueryParams';\n\nimport { createContext } from './Context';\n\n/* -------------------------------------------------------------------------------------------------\n * Root\n * -----------------------------------------------------------------------------------------------*/\n\ninterface BaseRow {\n  id: string | number;\n  [key: string]: any;\n}\n\ninterface TableHeader<TData = object, THeader = object> {\n  /**\n   * Typically used by plugins to render a custom cell\n   */\n  cellFormatter?: (data: TData, header: Omit<THeader, 'cellFormatter'>) => React.ReactNode;\n  label: string;\n  name: string;\n  searchable?: boolean;\n  sortable?: boolean;\n}\n\ninterface TableContextValue<TRow extends BaseRow, THeader extends TableHeader<TRow, THeader>>\n  extends Pick<TableProps, 'footer'> {\n  colCount: number;\n  hasHeaderCheckbox: boolean;\n  headers: THeader[];\n  isLoading: boolean;\n  rowCount: number;\n  rows: TRow[];\n  setHasHeaderCheckbox: (value: boolean) => void;\n  selectedRows: TRow[];\n  selectRow: (row: TRow | TRow[]) => void;\n}\n\nconst [TableProvider, useTable] = createContext<TableContextValue<any, any>>('Table');\n\ninterface RootProps<TRow extends BaseRow, THeader extends TableHeader<TRow, THeader>>\n  extends Partial<\n    Pick<\n      TableContextValue<TRow, THeader>,\n      'footer' | 'headers' | 'isLoading' | 'rows' | 'selectedRows'\n    >\n  > {\n  children?: React.ReactNode;\n  defaultSelectedRows?: TRow[];\n  onSelectedRowsChange?: (selectedRows: TRow[]) => void;\n}\n\nconst Root = <TRow extends BaseRow, THeader extends TableHeader<TRow, THeader>>({\n  children,\n  defaultSelectedRows,\n  footer,\n  headers = [],\n  isLoading = false,\n  onSelectedRowsChange,\n  rows = [],\n  selectedRows: selectedRowsProps,\n}: RootProps<TRow, THeader>) => {\n  const [selectedRows = [], setSelectedRows] = useControllableState({\n    prop: selectedRowsProps,\n    defaultProp: defaultSelectedRows,\n    onChange: onSelectedRowsChange,\n  });\n  const [hasHeaderCheckbox, setHasHeaderCheckbox] = React.useState(false);\n\n  const rowCount = rows.length + 1;\n  const colCount = hasHeaderCheckbox ? headers.length + 1 : headers.length;\n\n  const selectRow: TableContextValue<TRow, THeader>['selectRow'] = (row) => {\n    if (Array.isArray(row)) {\n      setSelectedRows(row);\n    } else {\n      setSelectedRows((prev = []) => {\n        const currentRowIndex = prev.findIndex((r) => r.id === row.id);\n        if (currentRowIndex > -1) {\n          return prev.toSpliced(currentRowIndex, 1);\n        }\n\n        return [...prev, row];\n      });\n    }\n  };\n\n  return (\n    <TableProvider\n      colCount={colCount}\n      hasHeaderCheckbox={hasHeaderCheckbox}\n      setHasHeaderCheckbox={setHasHeaderCheckbox}\n      footer={footer}\n      headers={headers}\n      isLoading={isLoading}\n      rowCount={rowCount}\n      rows={rows}\n      selectedRows={selectedRows}\n      selectRow={selectRow}\n    >\n      {children}\n    </TableProvider>\n  );\n};\n\n/* -------------------------------------------------------------------------------------------------\n * Content\n * -----------------------------------------------------------------------------------------------*/\n\nconst Content = ({ children }: Table.ContentProps) => {\n  const rowCount = useTable('Content', (state) => state.rowCount);\n  const colCount = useTable('Content', (state) => state.colCount);\n  const footer = useTable('Content', (state) => state.footer);\n\n  return (\n    <DSTable rowCount={rowCount} colCount={colCount} footer={footer}>\n      {children}\n    </DSTable>\n  );\n};\n\n/* -------------------------------------------------------------------------------------------------\n * Head\n * -----------------------------------------------------------------------------------------------*/\n\nconst Head = ({ children }: Table.HeadProps) => {\n  return (\n    <Thead>\n      <Tr>{children}</Tr>\n    </Thead>\n  );\n};\n\n/* -------------------------------------------------------------------------------------------------\n * HeaderCell\n * -----------------------------------------------------------------------------------------------*/\n\n/**\n * @description A header cell in your table, internally will set the query params for sorting to\n * be passed to your data-fetching function.\n */\nconst HeaderCell = <TData, THead>({ name, label, sortable }: TableHeader<TData, THead>) => {\n  const [{ query }, setQuery] = useQueryParams<{ sort?: `${string}:${'ASC' | 'DESC'}` }>();\n  const sort = query?.sort ?? '';\n  const [sortBy, sortOrder] = sort.split(':');\n  const { formatMessage } = useIntl();\n  const isSorted = sortBy === name;\n\n  const sortLabel = formatMessage(\n    { id: 'components.TableHeader.sort', defaultMessage: 'Sort on {label}' },\n    { label }\n  );\n\n  const handleClickSort = () => {\n    if (sortable) {\n      setQuery({\n        sort: `${name}:${isSorted && sortOrder === 'ASC' ? 'DESC' : 'ASC'}`,\n      });\n    }\n  };\n\n  return (\n    <Th\n      action={\n        isSorted &&\n        sortable && (\n          <IconButton label={sortLabel} onClick={handleClickSort} variant=\"ghost\">\n            <SortIcon $isUp={sortOrder === 'ASC'} />\n          </IconButton>\n        )\n      }\n    >\n      <Tooltip label={sortable ? sortLabel : label}>\n        <Typography\n          textColor=\"neutral600\"\n          tag={!isSorted && sortable ? 'button' : 'span'}\n          onClick={handleClickSort}\n          variant=\"sigma\"\n        >\n          {label}\n        </Typography>\n      </Tooltip>\n    </Th>\n  );\n};\n\nconst SortIcon = styled(CaretDown)<{\n  $isUp: boolean;\n}>`\n  transform: ${({ $isUp }) => `rotate(${$isUp ? '180' : '0'}deg)`};\n`;\n\n/* -------------------------------------------------------------------------------------------------\n * ActionBar\n * -----------------------------------------------------------------------------------------------*/\n\nconst ActionBar = ({ children }: Table.ActionBarProps) => {\n  const { formatMessage } = useIntl();\n  const selectedRows = useTable('ActionBar', (state) => state.selectedRows);\n\n  if (selectedRows.length === 0) return null;\n\n  return (\n    <Flex gap={2}>\n      <Typography variant=\"omega\" textColor=\"neutral500\">\n        {formatMessage(\n          {\n            id: 'content-manager.components.TableDelete.label',\n            defaultMessage: '{number, plural, one {# row} other {# rows}} selected',\n          },\n          { number: selectedRows.length }\n        )}\n      </Typography>\n      {children}\n    </Flex>\n  );\n};\n\n/* -------------------------------------------------------------------------------------------------\n * HeaderCheckboxCell\n * -----------------------------------------------------------------------------------------------*/\n\nconst HeaderCheckboxCell = () => {\n  const rows = useTable('HeaderCheckboxCell', (state) => state.rows);\n  const selectedRows = useTable('HeaderCheckboxCell', (state) => state.selectedRows);\n  const selectRow = useTable('HeaderCheckboxCell', (state) => state.selectRow);\n  const setHasHeaderCheckbox = useTable(\n    'HeaderCheckboxCell',\n    (state) => state.setHasHeaderCheckbox\n  );\n\n  const { formatMessage } = useIntl();\n\n  const areAllEntriesSelected = selectedRows.length === rows.length && rows.length > 0;\n  const isIndeterminate = !areAllEntriesSelected && selectedRows.length > 0;\n\n  React.useEffect(() => {\n    setHasHeaderCheckbox(true);\n\n    return () => setHasHeaderCheckbox(false);\n  }, [setHasHeaderCheckbox]);\n\n  const handleSelectAll = () => {\n    if (!areAllEntriesSelected) {\n      selectRow(rows);\n    } else {\n      selectRow([]);\n    }\n  };\n\n  return (\n    <Th>\n      <Checkbox\n        aria-label={formatMessage({\n          id: 'global.select-all-entries',\n          defaultMessage: 'Select all entries',\n        })}\n        disabled={rows.length === 0}\n        checked={isIndeterminate ? 'indeterminate' : areAllEntriesSelected}\n        onCheckedChange={handleSelectAll}\n      />\n    </Th>\n  );\n};\n\n/* -------------------------------------------------------------------------------------------------\n * Empty\n * -----------------------------------------------------------------------------------------------*/\n\nconst Empty = (props: Table.EmptyProps) => {\n  const { formatMessage } = useIntl();\n\n  const rows = useTable('Empty', (state) => state.rows);\n  const isLoading = useTable('Empty', (state) => state.isLoading);\n  const colCount = useTable('Empty', (state) => state.colCount);\n\n  /**\n   * If we're loading or we have some data, we don't show the empty state.\n   */\n  if (rows.length > 0 || isLoading) {\n    return null;\n  }\n\n  return (\n    <Tbody>\n      <Tr>\n        <Td colSpan={colCount}>\n          <EmptyStateLayout\n            content={formatMessage({\n              id: 'app.components.EmptyStateLayout.content-document',\n              defaultMessage: 'No content found',\n            })}\n            hasRadius\n            icon={<EmptyDocuments width=\"16rem\" />}\n            {...props}\n          />\n        </Td>\n      </Tr>\n    </Tbody>\n  );\n};\n\n/* -------------------------------------------------------------------------------------------------\n * LoadingBody\n * -----------------------------------------------------------------------------------------------*/\n\nconst Loading = ({ children = 'Loading content' }: Table.LoadingProps) => {\n  const isLoading = useTable('Loading', (state) => state.isLoading);\n  const colCount = useTable('Loading', (state) => state.colCount);\n\n  if (!isLoading) {\n    return null;\n  }\n\n  return (\n    <Tbody>\n      <Tr>\n        <Td colSpan={colCount}>\n          <Flex justifyContent=\"center\" padding={11} background=\"neutral0\">\n            <Loader>{children}</Loader>\n          </Flex>\n        </Td>\n      </Tr>\n    </Tbody>\n  );\n};\n\n/* -------------------------------------------------------------------------------------------------\n * Body\n * -----------------------------------------------------------------------------------------------*/\n\nconst Body = ({ children }: Table.BodyProps) => {\n  const isLoading = useTable('Body', (state) => state.isLoading);\n  const rows = useTable('Body', (state) => state.rows);\n\n  if (isLoading || rows.length === 0) {\n    return null;\n  }\n\n  return <Tbody>{children}</Tbody>;\n};\n\n/* -------------------------------------------------------------------------------------------------\n * Row\n * -----------------------------------------------------------------------------------------------*/\nconst Row = (props: Table.RowProps) => {\n  return <Tr {...props} />;\n};\n\n/* -------------------------------------------------------------------------------------------------\n * Cell\n * -----------------------------------------------------------------------------------------------*/\nconst Cell = (props: Table.CellProps) => {\n  return <Td {...props} />;\n};\n\n/* -------------------------------------------------------------------------------------------------\n * Row\n * -----------------------------------------------------------------------------------------------*/\nconst CheckboxCell = ({ id, ...props }: Table.CheckboxCellProps) => {\n  const rows = useTable('CheckboxCell', (state) => state.rows);\n  const selectedRows = useTable('CheckboxCell', (state) => state.selectedRows);\n  const selectRow = useTable('CheckboxCell', (state) => state.selectRow);\n\n  const { formatMessage } = useIntl();\n\n  const handleSelectRow = () => {\n    selectRow(rows.find((row) => row.id === id));\n  };\n\n  const isChecked = selectedRows.findIndex((row) => row.id === id) > -1;\n\n  return (\n    <Cell {...props} onClick={(e) => e.stopPropagation()}>\n      <Checkbox\n        aria-label={formatMessage(\n          {\n            id: 'app.component.table.select.one-entry',\n            defaultMessage: `Select {target}`,\n          },\n          { target: id }\n        )}\n        disabled={rows.length === 0}\n        checked={isChecked}\n        onCheckedChange={handleSelectRow}\n      />\n    </Cell>\n  );\n};\n/* -------------------------------------------------------------------------------------------------\n * Exports\n * -----------------------------------------------------------------------------------------------*/\n\n/**\n * @alpha we may move this component to the design-system.\n * @public\n * @description A generic table component composition. Internally handles the state of the table\n * such as selected rows, loading state, and more assuming the correct pieces are put togther.\n * @example\n * ```tsx\n * interace Data {\n *  id: string;\n *  name: string;\n *  email: string;\n * }\n *\n * const ListView = () => {\n *  const { data, isLoading } = useGetData<Data>();\n *\n *  const headers: Table.Header<Data>[] = [\n *    {\n *      label: 'Name',\n *      name: 'name',\n *      sortable: true,\n *    },\n *    {\n *      label: 'Email',\n *      name: 'email',\n *      sortable: true,\n *    },\n *  ];\n *\n *  return (\n *    <Table.Root rows={data} headers={headers} isLoading={isLoading}>\n *      <Table.Content>\n *        <Table.Head>\n *          {headers.map((head) => (\n *            <Table.HeaderCell key={head.name} {...head} />\n *          ))}\n *        </Table.Head>\n *        <Table.Body>\n *          <Table.Loading />\n *          <Table.Empty />\n *          {data.map((row) => (\n *            <Table.Row key={row.id}>\n *              <Table.Cell>{row.name}</Table.Cell>\n *              <Table.Cell>{row.email}</Table.Cell>\n *            </Table.Row>\n *          ))}\n *        </Table.Body>\n *      </Table.Content>\n *    </Table.Root>\n *  );\n * };\n * ```\n */\nconst Table = {\n  Root,\n  Content,\n  ActionBar,\n  Head,\n  HeaderCell,\n  HeaderCheckboxCell,\n  Body,\n  CheckboxCell,\n  Cell,\n  Row,\n  Loading,\n  Empty,\n};\n\n// eslint-disable-next-line @typescript-eslint/no-namespace\nnamespace Table {\n  export type Props<\n    TData extends BaseRow,\n    THeader extends TableHeader<TData, THeader> = TableHeader<TData, TableHeader>,\n  > = RootProps<TData, THeader>;\n  export interface ActionBarProps {\n    children?: React.ReactNode;\n  }\n\n  export interface ContentProps {\n    children: React.ReactNode;\n  }\n\n  export type Header<TData, THeader> = TableHeader<TData, THeader>;\n\n  export interface HeadProps {\n    children: React.ReactNode;\n  }\n\n  export interface EmptyProps extends Partial<EmptyStateLayoutProps> {}\n\n  export interface LoadingProps {\n    children?: React.ReactNode;\n  }\n\n  export interface BodyProps {\n    children: React.ReactNode;\n  }\n\n  export interface RowProps extends RawTrProps {}\n\n  export interface CellProps extends RawTdProps {}\n\n  export interface CheckboxCellProps extends Pick<BaseRow, 'id'>, Omit<RawTdProps, 'id'> {}\n}\n\nexport { Table, useTable };\n"],"names":["TableProvider","useTable","createContext","Root","children","defaultSelectedRows","footer","headers","isLoading","onSelectedRowsChange","rows","selectedRows","selectedRowsProps","setSelectedRows","useControllableState","prop","defaultProp","onChange","hasHeaderCheckbox","setHasHeaderCheckbox","React","useState","rowCount","length","colCount","selectRow","row","Array","isArray","prev","currentRowIndex","findIndex","r","id","toSpliced","_jsx","Content","state","DSTable","Head","Thead","Tr","HeaderCell","name","label","sortable","query","setQuery","useQueryParams","sort","sortBy","sortOrder","split","formatMessage","useIntl","isSorted","sortLabel","defaultMessage","handleClickSort","Th","action","IconButton","onClick","variant","SortIcon","$isUp","Tooltip","Typography","textColor","tag","styled","CaretDown","ActionBar","_jsxs","Flex","gap","number","HeaderCheckboxCell","areAllEntriesSelected","isIndeterminate","useEffect","handleSelectAll","Checkbox","aria-label","disabled","checked","onCheckedChange","Empty","props","Tbody","Td","colSpan","EmptyStateLayout","content","hasRadius","icon","EmptyDocuments","width","Loading","justifyContent","padding","background","Loader","Body","Row","Cell","CheckboxCell","handleSelectRow","find","isChecked","e","stopPropagation","target","Table"],"mappings":"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"}
+{"version":3,"file":"Table.js","sources":["../../../../../admin/src/components/Table.tsx"],"sourcesContent":["/**\n * TODO: honestly, half of this stuff should come straight from\n * the design-system and then we can just wrap round the bits for\n * the i18n & router interactions.\n *\n * So we'll do that in v2 of the DS.\n */\n\nimport * as React from 'react';\n\nimport {\n  Flex,\n  Typography,\n  Th,\n  Tbody,\n  Td,\n  Tooltip,\n  IconButton,\n  Thead,\n  Tr,\n  RawTrProps,\n  Checkbox,\n  Loader,\n  Table as DSTable,\n  EmptyStateLayout,\n  EmptyStateLayoutProps,\n  TableProps,\n  RawTdProps,\n} from '@strapi/design-system';\nimport { CaretDown } from '@strapi/icons';\nimport { EmptyDocuments } from '@strapi/icons/symbols';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\nimport { useControllableState } from '../hooks/useControllableState';\nimport { useQueryParams } from '../hooks/useQueryParams';\n\nimport { createContext } from './Context';\n\n/* -------------------------------------------------------------------------------------------------\n * Root\n * -----------------------------------------------------------------------------------------------*/\n\ninterface BaseRow {\n  id: string | number;\n  [key: string]: any;\n}\n\ninterface TableHeader<TData = object, THeader = object> {\n  /**\n   * Typically used by plugins to render a custom cell\n   */\n  cellFormatter?: (data: TData, header: Omit<THeader, 'cellFormatter'>) => React.ReactNode;\n  label: string;\n  name: string;\n  searchable?: boolean;\n  sortable?: boolean;\n}\n\ninterface TableContextValue<TRow extends BaseRow, THeader extends TableHeader<TRow, THeader>>\n  extends Pick<TableProps, 'footer'> {\n  colCount: number;\n  hasHeaderCheckbox: boolean;\n  headers: THeader[];\n  isLoading: boolean;\n  rowCount: number;\n  rows: TRow[];\n  setHasHeaderCheckbox: (value: boolean) => void;\n  selectedRows: TRow[];\n  selectRow: (row: TRow | TRow[]) => void;\n}\n\nconst [TableProvider, useTable] = createContext<TableContextValue<any, any>>('Table');\n\ninterface RootProps<TRow extends BaseRow, THeader extends TableHeader<TRow, THeader>>\n  extends Partial<\n    Pick<\n      TableContextValue<TRow, THeader>,\n      'footer' | 'headers' | 'isLoading' | 'rows' | 'selectedRows'\n    >\n  > {\n  children?: React.ReactNode;\n  defaultSelectedRows?: TRow[];\n  onSelectedRowsChange?: (selectedRows: TRow[]) => void;\n}\n\nconst Root = <TRow extends BaseRow, THeader extends TableHeader<TRow, THeader>>({\n  children,\n  defaultSelectedRows,\n  footer,\n  headers = [],\n  isLoading = false,\n  onSelectedRowsChange,\n  rows = [],\n  selectedRows: selectedRowsProps,\n}: RootProps<TRow, THeader>) => {\n  const [selectedRows = [], setSelectedRows] = useControllableState({\n    prop: selectedRowsProps,\n    defaultProp: defaultSelectedRows,\n    onChange: onSelectedRowsChange,\n  });\n  const [hasHeaderCheckbox, setHasHeaderCheckbox] = React.useState(false);\n\n  const rowCount = rows.length + 1;\n  const colCount = hasHeaderCheckbox ? headers.length + 1 : headers.length;\n\n  const selectRow: TableContextValue<TRow, THeader>['selectRow'] = (row) => {\n    if (Array.isArray(row)) {\n      setSelectedRows(row);\n    } else {\n      setSelectedRows((prev = []) => {\n        const currentRowIndex = prev.findIndex((r) => r.id === row.id);\n        if (currentRowIndex > -1) {\n          return prev.toSpliced(currentRowIndex, 1);\n        }\n\n        return [...prev, row];\n      });\n    }\n  };\n\n  return (\n    <TableProvider\n      colCount={colCount}\n      hasHeaderCheckbox={hasHeaderCheckbox}\n      setHasHeaderCheckbox={setHasHeaderCheckbox}\n      footer={footer}\n      headers={headers}\n      isLoading={isLoading}\n      rowCount={rowCount}\n      rows={rows}\n      selectedRows={selectedRows}\n      selectRow={selectRow}\n    >\n      {children}\n    </TableProvider>\n  );\n};\n\n/* -------------------------------------------------------------------------------------------------\n * Content\n * -----------------------------------------------------------------------------------------------*/\n\nconst Content = ({ children }: Table.ContentProps) => {\n  const rowCount = useTable('Content', (state) => state.rowCount);\n  const colCount = useTable('Content', (state) => state.colCount);\n  const footer = useTable('Content', (state) => state.footer);\n\n  return (\n    <DSTable rowCount={rowCount} colCount={colCount} footer={footer}>\n      {children}\n    </DSTable>\n  );\n};\n\n/* -------------------------------------------------------------------------------------------------\n * Head\n * -----------------------------------------------------------------------------------------------*/\n\nconst Head = ({ children }: Table.HeadProps) => {\n  return (\n    <Thead>\n      <Tr>{children}</Tr>\n    </Thead>\n  );\n};\n\n/* -------------------------------------------------------------------------------------------------\n * HeaderCell\n * -----------------------------------------------------------------------------------------------*/\n\n/**\n * @description A header cell in your table, internally will set the query params for sorting to\n * be passed to your data-fetching function.\n */\nconst HeaderCell = <TData, THead>({ name, label, sortable }: TableHeader<TData, THead>) => {\n  const [{ query }, setQuery] = useQueryParams<{ sort?: `${string}:${'ASC' | 'DESC'}` }>();\n  const sort = query?.sort ?? '';\n  const [sortBy, sortOrder] = sort.split(':');\n  const { formatMessage } = useIntl();\n  const isSorted = sortBy === name;\n\n  const sortLabel = formatMessage(\n    { id: 'components.TableHeader.sort', defaultMessage: 'Sort on {label}' },\n    { label }\n  );\n\n  const handleClickSort = () => {\n    if (sortable) {\n      setQuery({\n        sort: `${name}:${isSorted && sortOrder === 'ASC' ? 'DESC' : 'ASC'}`,\n      });\n    }\n  };\n\n  return (\n    <Th\n      action={\n        isSorted &&\n        sortable && (\n          <IconButton label={sortLabel} onClick={handleClickSort} variant=\"ghost\">\n            <SortIcon $isUp={sortOrder === 'ASC'} />\n          </IconButton>\n        )\n      }\n    >\n      <Tooltip label={sortable ? sortLabel : label}>\n        <Typography\n          textColor=\"neutral600\"\n          tag={!isSorted && sortable ? 'button' : 'span'}\n          onClick={handleClickSort}\n          variant=\"sigma\"\n        >\n          {label}\n        </Typography>\n      </Tooltip>\n    </Th>\n  );\n};\n\nconst SortIcon = styled(CaretDown)<{\n  $isUp: boolean;\n}>`\n  transform: ${({ $isUp }) => `rotate(${$isUp ? '180' : '0'}deg)`};\n`;\n\n/* -------------------------------------------------------------------------------------------------\n * ActionBar\n * -----------------------------------------------------------------------------------------------*/\n\nconst ActionBar = ({ children }: Table.ActionBarProps) => {\n  const { formatMessage } = useIntl();\n  const selectedRows = useTable('ActionBar', (state) => state.selectedRows);\n\n  if (selectedRows.length === 0) return null;\n\n  return (\n    <Flex gap={2}>\n      <Typography variant=\"omega\" textColor=\"neutral500\">\n        {formatMessage(\n          {\n            id: 'content-manager.components.TableDelete.label',\n            defaultMessage: '{number, plural, one {# row} other {# rows}} selected',\n          },\n          { number: selectedRows.length }\n        )}\n      </Typography>\n      {children}\n    </Flex>\n  );\n};\n\n/* -------------------------------------------------------------------------------------------------\n * HeaderCheckboxCell\n * -----------------------------------------------------------------------------------------------*/\n\nconst HeaderCheckboxCell = () => {\n  const rows = useTable('HeaderCheckboxCell', (state) => state.rows);\n  const selectedRows = useTable('HeaderCheckboxCell', (state) => state.selectedRows);\n  const selectRow = useTable('HeaderCheckboxCell', (state) => state.selectRow);\n  const setHasHeaderCheckbox = useTable(\n    'HeaderCheckboxCell',\n    (state) => state.setHasHeaderCheckbox\n  );\n\n  const { formatMessage } = useIntl();\n\n  const areAllEntriesSelected = selectedRows.length === rows.length && rows.length > 0;\n  const isIndeterminate = !areAllEntriesSelected && selectedRows.length > 0;\n\n  React.useEffect(() => {\n    setHasHeaderCheckbox(true);\n\n    return () => setHasHeaderCheckbox(false);\n  }, [setHasHeaderCheckbox]);\n\n  const handleSelectAll = () => {\n    if (!areAllEntriesSelected) {\n      selectRow(rows);\n    } else {\n      selectRow([]);\n    }\n  };\n\n  return (\n    <Th>\n      <Checkbox\n        aria-label={formatMessage({\n          id: 'global.select-all-entries',\n          defaultMessage: 'Select all entries',\n        })}\n        disabled={rows.length === 0}\n        checked={isIndeterminate ? 'indeterminate' : areAllEntriesSelected}\n        onCheckedChange={handleSelectAll}\n      />\n    </Th>\n  );\n};\n\n/* -------------------------------------------------------------------------------------------------\n * Empty\n * -----------------------------------------------------------------------------------------------*/\n\nconst Empty = (props: Table.EmptyProps) => {\n  const { formatMessage } = useIntl();\n\n  const rows = useTable('Empty', (state) => state.rows);\n  const isLoading = useTable('Empty', (state) => state.isLoading);\n  const colCount = useTable('Empty', (state) => state.colCount);\n\n  /**\n   * If we're loading or we have some data, we don't show the empty state.\n   */\n  if (rows.length > 0 || isLoading) {\n    return null;\n  }\n\n  return (\n    <Tbody>\n      <Tr>\n        <Td colSpan={colCount}>\n          <EmptyStateLayout\n            content={formatMessage({\n              id: 'app.components.EmptyStateLayout.content-document',\n              defaultMessage: 'No content found',\n            })}\n            hasRadius\n            icon={<EmptyDocuments width=\"16rem\" />}\n            {...props}\n          />\n        </Td>\n      </Tr>\n    </Tbody>\n  );\n};\n\n/* -------------------------------------------------------------------------------------------------\n * LoadingBody\n * -----------------------------------------------------------------------------------------------*/\n\nconst Loading = ({ children = 'Loading content' }: Table.LoadingProps) => {\n  const isLoading = useTable('Loading', (state) => state.isLoading);\n  const colCount = useTable('Loading', (state) => state.colCount);\n\n  if (!isLoading) {\n    return null;\n  }\n\n  return (\n    <Tbody>\n      <Tr>\n        <Td colSpan={colCount}>\n          <Flex justifyContent=\"center\" padding={11} background=\"neutral0\">\n            <Loader>{children}</Loader>\n          </Flex>\n        </Td>\n      </Tr>\n    </Tbody>\n  );\n};\n\n/* -------------------------------------------------------------------------------------------------\n * Body\n * -----------------------------------------------------------------------------------------------*/\n\nconst Body = ({ children }: Table.BodyProps) => {\n  const isLoading = useTable('Body', (state) => state.isLoading);\n  const rows = useTable('Body', (state) => state.rows);\n\n  if (isLoading || rows.length === 0) {\n    return null;\n  }\n\n  return <Tbody>{children}</Tbody>;\n};\n\n/* -------------------------------------------------------------------------------------------------\n * Row\n * -----------------------------------------------------------------------------------------------*/\nconst Row = (props: Table.RowProps) => {\n  return <Tr {...props} />;\n};\n\n/* -------------------------------------------------------------------------------------------------\n * Cell\n * -----------------------------------------------------------------------------------------------*/\nconst Cell = (props: Table.CellProps) => {\n  return <Td {...props} />;\n};\n\n/* -------------------------------------------------------------------------------------------------\n * Row\n * -----------------------------------------------------------------------------------------------*/\nconst CheckboxCell = ({ id, ...props }: Table.CheckboxCellProps) => {\n  const rows = useTable('CheckboxCell', (state) => state.rows);\n  const selectedRows = useTable('CheckboxCell', (state) => state.selectedRows);\n  const selectRow = useTable('CheckboxCell', (state) => state.selectRow);\n\n  const { formatMessage } = useIntl();\n\n  const handleSelectRow = () => {\n    selectRow(rows.find((row) => row.id === id));\n  };\n\n  const isChecked = selectedRows.findIndex((row) => row.id === id) > -1;\n\n  return (\n    <Cell {...props} onClick={(e) => e.stopPropagation()}>\n      <Checkbox\n        aria-label={formatMessage(\n          {\n            id: 'app.component.table.select.one-entry',\n            defaultMessage: `Select {target}`,\n          },\n          { target: id }\n        )}\n        disabled={rows.length === 0}\n        checked={isChecked}\n        onCheckedChange={handleSelectRow}\n      />\n    </Cell>\n  );\n};\n/* -------------------------------------------------------------------------------------------------\n * Exports\n * -----------------------------------------------------------------------------------------------*/\n\n/**\n * @alpha we may move this component to the design-system.\n * @public\n * @description A generic table component composition. Internally handles the state of the table\n * such as selected rows, loading state, and more assuming the correct pieces are put togther.\n * @example\n * ```tsx\n * interace Data {\n *  id: string;\n *  name: string;\n *  email: string;\n * }\n *\n * const ListView = () => {\n *  const { data, isLoading } = useGetData<Data>();\n *\n *  const headers: Table.Header<Data>[] = [\n *    {\n *      label: 'Name',\n *      name: 'name',\n *      sortable: true,\n *    },\n *    {\n *      label: 'Email',\n *      name: 'email',\n *      sortable: true,\n *    },\n *  ];\n *\n *  return (\n *    <Table.Root rows={data} headers={headers} isLoading={isLoading}>\n *      <Table.Content>\n *        <Table.Head>\n *          {headers.map((head) => (\n *            <Table.HeaderCell key={head.name} {...head} />\n *          ))}\n *        </Table.Head>\n *        <Table.Body>\n *          <Table.Loading />\n *          <Table.Empty />\n *          {data.map((row) => (\n *            <Table.Row key={row.id}>\n *              <Table.Cell>{row.name}</Table.Cell>\n *              <Table.Cell>{row.email}</Table.Cell>\n *            </Table.Row>\n *          ))}\n *        </Table.Body>\n *      </Table.Content>\n *    </Table.Root>\n *  );\n * };\n * ```\n */\nconst Table = {\n  Root,\n  Content,\n  ActionBar,\n  Head,\n  HeaderCell,\n  HeaderCheckboxCell,\n  Body,\n  CheckboxCell,\n  Cell,\n  Row,\n  Loading,\n  Empty,\n};\n\n// eslint-disable-next-line @typescript-eslint/no-namespace\nnamespace Table {\n  export type Props<\n    TData extends BaseRow,\n    THeader extends TableHeader<TData, THeader> = TableHeader<TData, TableHeader>,\n  > = RootProps<TData, THeader>;\n  export interface ActionBarProps {\n    children?: React.ReactNode;\n  }\n\n  export interface ContentProps {\n    children: React.ReactNode;\n  }\n\n  export type Header<TData, THeader> = TableHeader<TData, THeader>;\n\n  export interface HeadProps {\n    children: React.ReactNode;\n  }\n\n  export interface EmptyProps extends Partial<EmptyStateLayoutProps> {}\n\n  export interface LoadingProps {\n    children?: React.ReactNode;\n  }\n\n  export interface BodyProps {\n    children: React.ReactNode;\n  }\n\n  export interface RowProps extends RawTrProps {}\n\n  export interface CellProps extends RawTdProps {}\n\n  export interface CheckboxCellProps extends Pick<BaseRow, 'id'>, Omit<RawTdProps, 'id'> {}\n}\n\nexport { Table, useTable };\n"],"names":["TableProvider","useTable","createContext","Root","children","defaultSelectedRows","footer","headers","isLoading","onSelectedRowsChange","rows","selectedRows","selectedRowsProps","setSelectedRows","useControllableState","prop","defaultProp","onChange","hasHeaderCheckbox","setHasHeaderCheckbox","React","useState","rowCount","length","colCount","selectRow","row","Array","isArray","prev","currentRowIndex","findIndex","r","id","toSpliced","_jsx","Content","state","DSTable","Head","Thead","Tr","HeaderCell","name","label","sortable","query","setQuery","useQueryParams","sort","sortBy","sortOrder","split","formatMessage","useIntl","isSorted","sortLabel","defaultMessage","handleClickSort","Th","action","IconButton","onClick","variant","SortIcon","$isUp","Tooltip","Typography","textColor","tag","styled","CaretDown","ActionBar","_jsxs","Flex","gap","number","HeaderCheckboxCell","areAllEntriesSelected","isIndeterminate","useEffect","handleSelectAll","Checkbox","aria-label","disabled","checked","onCheckedChange","Empty","props","Tbody","Td","colSpan","EmptyStateLayout","content","hasRadius","icon","EmptyDocuments","width","Loading","justifyContent","padding","background","Loader","Body","Row","Cell","CheckboxCell","handleSelectRow","find","isChecked","e","stopPropagation","target","Table"],"mappings":"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"}

package/dist/admin/admin/src/components/Theme.js

@@ -5,7 +5,7 @@ var React = require('react');
 var designSystem = require('@strapi/design-system');
 var reactIntl = require('react-intl');
 var reactRedux = require('react-redux');
-var styledComponents = require('styled-components');
+var styled = require('styled-components');
 var hooks = require('../core/store/hooks.js');
 var reducer = require('../reducer.js');
 
@@ -66,7 +66,7 @@ const Theme = ({ children, themes })=>{
         ]
     });
 };
-const GlobalStyle = styledComponents.createGlobalStyle`
+const GlobalStyle = styled.createGlobalStyle`
   body {
     background: ${({ theme })=>theme.colors.neutral100};
   }

package/dist/admin/admin/src/components/Theme.js.map

@@ -1 +1 @@
-{"version":3,"file":"Theme.js","sources":["../../../../../admin/src/components/Theme.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { DesignSystemProvider } from '@strapi/design-system';\nimport { useIntl } from 'react-intl';\nimport { useDispatch } from 'react-redux';\nimport { DefaultTheme, createGlobalStyle } from 'styled-components';\n\nimport { useTypedSelector } from '../core/store/hooks';\nimport { setAvailableThemes } from '../reducer';\n\ninterface ThemeProps {\n  children: React.ReactNode;\n  themes: {\n    dark: DefaultTheme;\n    light: DefaultTheme;\n  };\n}\n\nconst Theme = ({ children, themes }: ThemeProps) => {\n  const { currentTheme } = useTypedSelector((state) => state.admin_app.theme);\n  const [systemTheme, setSystemTheme] = React.useState<'light' | 'dark'>();\n  const { locale } = useIntl();\n  const dispatch = useDispatch();\n\n  // Listen to changes in the system theme\n  React.useEffect(() => {\n    const themeWatcher = window.matchMedia('(prefers-color-scheme: dark)');\n    setSystemTheme(themeWatcher.matches ? 'dark' : 'light');\n\n    const listener = (event: MediaQueryListEvent) => {\n      setSystemTheme(event.matches ? 'dark' : 'light');\n    };\n    themeWatcher.addEventListener('change', listener);\n\n    // Remove listener on cleanup\n    return () => {\n      themeWatcher.removeEventListener('change', listener);\n    };\n  }, []);\n\n  React.useEffect(() => {\n    dispatch(setAvailableThemes(Object.keys(themes)));\n  }, [dispatch, themes]);\n\n  const computedThemeName = currentTheme === 'system' ? systemTheme : currentTheme;\n\n  return (\n    <DesignSystemProvider\n      locale={locale}\n      /**\n       * TODO: could we make this neater i.e. by setting up the context to throw\n       * if it can't find it, that way the type is always fully defined and we're\n       * not checking it all the time...\n       */\n      theme={themes?.[computedThemeName || 'light']}\n    >\n      {children}\n      <GlobalStyle />\n    </DesignSystemProvider>\n  );\n};\n\nconst GlobalStyle = createGlobalStyle`\n  body {\n    background: ${({ theme }) => theme.colors.neutral100};\n  }\n`;\n\nexport { Theme };\nexport type { ThemeProps };\n"],"names":["Theme","children","themes","currentTheme","useTypedSelector","state","admin_app","theme","systemTheme","setSystemTheme","React","useState","locale","useIntl","dispatch","useDispatch","useEffect","themeWatcher","window","matchMedia","matches","listener","event","addEventListener","removeEventListener","setAvailableThemes","Object","keys","computedThemeName","_jsxs","DesignSystemProvider","_jsx","GlobalStyle","createGlobalStyle","colors","neutral100"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkBA,MAAMA,QAAQ,CAAC,EAAEC,QAAQ,EAAEC,MAAM,EAAc,GAAA;IAC7C,MAAM,EAAEC,YAAY,EAAE,GAAGC,sBAAAA,CAAiB,CAACC,KAAUA,GAAAA,KAAAA,CAAMC,SAAS,CAACC,KAAK,CAAA;AAC1E,IAAA,MAAM,CAACC,WAAAA,EAAaC,cAAe,CAAA,GAAGC,iBAAMC,QAAQ,EAAA;IACpD,MAAM,EAAEC,MAAM,EAAE,GAAGC,iBAAAA,EAAAA;AACnB,IAAA,MAAMC,QAAWC,GAAAA,sBAAAA,EAAAA;;AAGjBL,IAAAA,gBAAAA,CAAMM,SAAS,CAAC,IAAA;QACd,MAAMC,YAAAA,GAAeC,MAAOC,CAAAA,UAAU,CAAC,8BAAA,CAAA;QACvCV,cAAeQ,CAAAA,YAAAA,CAAaG,OAAO,GAAG,MAAS,GAAA,OAAA,CAAA;AAE/C,QAAA,MAAMC,WAAW,CAACC,KAAAA,GAAAA;YAChBb,cAAea,CAAAA,KAAAA,CAAMF,OAAO,GAAG,MAAS,GAAA,OAAA,CAAA;AAC1C,SAAA;QACAH,YAAaM,CAAAA,gBAAgB,CAAC,QAAUF,EAAAA,QAAAA,CAAAA;;QAGxC,OAAO,IAAA;YACLJ,YAAaO,CAAAA,mBAAmB,CAAC,QAAUH,EAAAA,QAAAA,CAAAA;AAC7C,SAAA;AACF,KAAA,EAAG,EAAE,CAAA;AAELX,IAAAA,gBAAAA,CAAMM,SAAS,CAAC,IAAA;QACdF,QAASW,CAAAA,0BAAAA,CAAmBC,MAAOC,CAAAA,IAAI,CAACzB,MAAAA,CAAAA,CAAAA,CAAAA;KACvC,EAAA;AAACY,QAAAA,QAAAA;AAAUZ,QAAAA;AAAO,KAAA,CAAA;IAErB,MAAM0B,iBAAAA,GAAoBzB,YAAiB,KAAA,QAAA,GAAWK,WAAcL,GAAAA,YAAAA;AAEpE,IAAA,qBACE0B,eAACC,CAAAA,iCAAAA,EAAAA;QACClB,MAAQA,EAAAA,MAAAA;AACR;;;;AAIC,UACDL,KAAOL,EAAAA,MAAAA,GAAS0B,iBAAAA,IAAqB,OAAQ,CAAA;;AAE5C3B,YAAAA,QAAAA;0BACD8B,cAACC,CAAAA,WAAAA,EAAAA,EAAAA;;;AAGP;AAEA,MAAMA,WAAAA,GAAcC,kCAAiB;;gBAErB,EAAE,CAAC,EAAE1B,KAAK,EAAE,GAAKA,KAAM2B,CAAAA,MAAM,CAACC,UAAU,CAAC;;AAEzD,CAAC;;;;"}
+{"version":3,"file":"Theme.js","sources":["../../../../../admin/src/components/Theme.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { DesignSystemProvider } from '@strapi/design-system';\nimport { useIntl } from 'react-intl';\nimport { useDispatch } from 'react-redux';\nimport { DefaultTheme, createGlobalStyle } from 'styled-components';\n\nimport { useTypedSelector } from '../core/store/hooks';\nimport { setAvailableThemes } from '../reducer';\n\ninterface ThemeProps {\n  children: React.ReactNode;\n  themes: {\n    dark: DefaultTheme;\n    light: DefaultTheme;\n  };\n}\n\nconst Theme = ({ children, themes }: ThemeProps) => {\n  const { currentTheme } = useTypedSelector((state) => state.admin_app.theme);\n  const [systemTheme, setSystemTheme] = React.useState<'light' | 'dark'>();\n  const { locale } = useIntl();\n  const dispatch = useDispatch();\n\n  // Listen to changes in the system theme\n  React.useEffect(() => {\n    const themeWatcher = window.matchMedia('(prefers-color-scheme: dark)');\n    setSystemTheme(themeWatcher.matches ? 'dark' : 'light');\n\n    const listener = (event: MediaQueryListEvent) => {\n      setSystemTheme(event.matches ? 'dark' : 'light');\n    };\n    themeWatcher.addEventListener('change', listener);\n\n    // Remove listener on cleanup\n    return () => {\n      themeWatcher.removeEventListener('change', listener);\n    };\n  }, []);\n\n  React.useEffect(() => {\n    dispatch(setAvailableThemes(Object.keys(themes)));\n  }, [dispatch, themes]);\n\n  const computedThemeName = currentTheme === 'system' ? systemTheme : currentTheme;\n\n  return (\n    <DesignSystemProvider\n      locale={locale}\n      /**\n       * TODO: could we make this neater i.e. by setting up the context to throw\n       * if it can't find it, that way the type is always fully defined and we're\n       * not checking it all the time...\n       */\n      theme={themes?.[computedThemeName || 'light']}\n    >\n      {children}\n      <GlobalStyle />\n    </DesignSystemProvider>\n  );\n};\n\nconst GlobalStyle = createGlobalStyle`\n  body {\n    background: ${({ theme }) => theme.colors.neutral100};\n  }\n`;\n\nexport { Theme };\nexport type { ThemeProps };\n"],"names":["Theme","children","themes","currentTheme","useTypedSelector","state","admin_app","theme","systemTheme","setSystemTheme","React","useState","locale","useIntl","dispatch","useDispatch","useEffect","themeWatcher","window","matchMedia","matches","listener","event","addEventListener","removeEventListener","setAvailableThemes","Object","keys","computedThemeName","_jsxs","DesignSystemProvider","_jsx","GlobalStyle","createGlobalStyle","colors","neutral100"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkBA,MAAMA,QAAQ,CAAC,EAAEC,QAAQ,EAAEC,MAAM,EAAc,GAAA;IAC7C,MAAM,EAAEC,YAAY,EAAE,GAAGC,sBAAAA,CAAiB,CAACC,KAAUA,GAAAA,KAAAA,CAAMC,SAAS,CAACC,KAAK,CAAA;AAC1E,IAAA,MAAM,CAACC,WAAAA,EAAaC,cAAe,CAAA,GAAGC,iBAAMC,QAAQ,EAAA;IACpD,MAAM,EAAEC,MAAM,EAAE,GAAGC,iBAAAA,EAAAA;AACnB,IAAA,MAAMC,QAAWC,GAAAA,sBAAAA,EAAAA;;AAGjBL,IAAAA,gBAAAA,CAAMM,SAAS,CAAC,IAAA;QACd,MAAMC,YAAAA,GAAeC,MAAOC,CAAAA,UAAU,CAAC,8BAAA,CAAA;QACvCV,cAAeQ,CAAAA,YAAAA,CAAaG,OAAO,GAAG,MAAS,GAAA,OAAA,CAAA;AAE/C,QAAA,MAAMC,WAAW,CAACC,KAAAA,GAAAA;YAChBb,cAAea,CAAAA,KAAAA,CAAMF,OAAO,GAAG,MAAS,GAAA,OAAA,CAAA;AAC1C,SAAA;QACAH,YAAaM,CAAAA,gBAAgB,CAAC,QAAUF,EAAAA,QAAAA,CAAAA;;QAGxC,OAAO,IAAA;YACLJ,YAAaO,CAAAA,mBAAmB,CAAC,QAAUH,EAAAA,QAAAA,CAAAA;AAC7C,SAAA;AACF,KAAA,EAAG,EAAE,CAAA;AAELX,IAAAA,gBAAAA,CAAMM,SAAS,CAAC,IAAA;QACdF,QAASW,CAAAA,0BAAAA,CAAmBC,MAAOC,CAAAA,IAAI,CAACzB,MAAAA,CAAAA,CAAAA,CAAAA;KACvC,EAAA;AAACY,QAAAA,QAAAA;AAAUZ,QAAAA;AAAO,KAAA,CAAA;IAErB,MAAM0B,iBAAAA,GAAoBzB,YAAiB,KAAA,QAAA,GAAWK,WAAcL,GAAAA,YAAAA;AAEpE,IAAA,qBACE0B,eAACC,CAAAA,iCAAAA,EAAAA;QACClB,MAAQA,EAAAA,MAAAA;AACR;;;;AAIC,UACDL,KAAOL,EAAAA,MAAAA,GAAS0B,iBAAAA,IAAqB,OAAQ,CAAA;;AAE5C3B,YAAAA,QAAAA;0BACD8B,cAACC,CAAAA,WAAAA,EAAAA,EAAAA;;;AAGP;AAEA,MAAMA,WAAAA,GAAcC,wBAAiB;;gBAErB,EAAE,CAAC,EAAE1B,KAAK,EAAE,GAAKA,KAAM2B,CAAAA,MAAM,CAACC,UAAU,CAAC;;AAEzD,CAAC;;;;"}

package/dist/admin/admin/src/components/UnauthenticatedLogo.js

@@ -1,10 +1,10 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var styledComponents = require('styled-components');
+var styled = require('styled-components');
 var Configuration = require('../features/Configuration.js');
 
-const Img = styledComponents.styled.img`
+const Img = styled.styled.img`
   height: 7.2rem;
 `;
 const Logo = ()=>{

package/dist/admin/admin/src/components/UnauthenticatedLogo.js.map

@@ -1 +1 @@
-{"version":3,"file":"UnauthenticatedLogo.js","sources":["../../../../../admin/src/components/UnauthenticatedLogo.tsx"],"sourcesContent":["import { styled } from 'styled-components';\n\nimport { useConfiguration } from '../features/Configuration';\n\nconst Img = styled.img`\n  height: 7.2rem;\n`;\n\nconst Logo = () => {\n  const {\n    logos: { auth },\n  } = useConfiguration('UnauthenticatedLogo');\n\n  return <Img src={auth?.custom?.url || auth.default} aria-hidden alt=\"\" />;\n};\n\nexport { Logo };\n"],"names":["Img","styled","img","Logo","logos","auth","useConfiguration","_jsx","src","custom","url","default","aria-hidden","alt"],"mappings":";;;;;;AAIA,MAAMA,GAAAA,GAAMC,uBAAOC,CAAAA,GAAG;;AAEtB,CAAC;AAED,MAAMC,IAAO,GAAA,IAAA;AACX,IAAA,MAAM,EACJC,KAAO,EAAA,EAAEC,IAAI,EAAE,EAChB,GAAGC,8BAAiB,CAAA,qBAAA,CAAA;AAErB,IAAA,qBAAOC,cAACP,CAAAA,GAAAA,EAAAA;AAAIQ,QAAAA,GAAAA,EAAKH,IAAMI,EAAAA,MAAAA,EAAQC,GAAOL,IAAAA,IAAAA,CAAKM,OAAO;QAAEC,aAAW,EAAA,IAAA;QAACC,GAAI,EAAA;;AACtE;;;;"}
+{"version":3,"file":"UnauthenticatedLogo.js","sources":["../../../../../admin/src/components/UnauthenticatedLogo.tsx"],"sourcesContent":["import { styled } from 'styled-components';\n\nimport { useConfiguration } from '../features/Configuration';\n\nconst Img = styled.img`\n  height: 7.2rem;\n`;\n\nconst Logo = () => {\n  const {\n    logos: { auth },\n  } = useConfiguration('UnauthenticatedLogo');\n\n  return <Img src={auth?.custom?.url || auth.default} aria-hidden alt=\"\" />;\n};\n\nexport { Logo };\n"],"names":["Img","styled","img","Logo","logos","auth","useConfiguration","_jsx","src","custom","url","default","aria-hidden","alt"],"mappings":";;;;;;AAIA,MAAMA,GAAAA,GAAMC,aAAOC,CAAAA,GAAG;;AAEtB,CAAC;AAED,MAAMC,IAAO,GAAA,IAAA;AACX,IAAA,MAAM,EACJC,KAAO,EAAA,EAAEC,IAAI,EAAE,EAChB,GAAGC,8BAAiB,CAAA,qBAAA,CAAA;AAErB,IAAA,qBAAOC,cAACP,CAAAA,GAAAA,EAAAA;AAAIQ,QAAAA,GAAAA,EAAKH,IAAMI,EAAAA,MAAAA,EAAQC,GAAOL,IAAAA,IAAAA,CAAKM,OAAO;QAAEC,aAAW,EAAA,IAAA;QAACC,GAAI,EAAA;;AACtE;;;;"}

package/dist/admin/admin/src/components/UpsellBanner.js

@@ -0,0 +1,113 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var ee = require('@strapi/admin/strapi-admin/ee');
+var designSystem = require('@strapi/design-system');
+var dateFns = require('date-fns');
+var reactIntl = require('react-intl');
+var styled = require('styled-components');
+var admin = require('../services/admin.js');
+var usePersistentState = require('../hooks/usePersistentState.js');
+
+const BannerBackground = styled.styled(designSystem.Flex)`
+  background: linear-gradient(
+    90deg,
+    ${({ theme })=>theme.colors.primary600} 0%,
+    ${({ theme })=>theme.colors.alternative600} 121.48%
+  );
+`;
+const Banner = ({ isTrialEndedRecently })=>{
+    const { formatMessage } = reactIntl.useIntl();
+    return /*#__PURE__*/ jsxRuntime.jsx(BannerBackground, {
+        width: "100%",
+        justifyContent: "center",
+        children: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+            justifyContent: "center",
+            alignItems: "center",
+            width: "100%",
+            paddingTop: 2,
+            paddingBottom: 2,
+            paddingLeft: 10,
+            paddingRight: 10,
+            gap: 2,
+            children: [
+                /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Box, {
+                    children: [
+                        /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                            variant: "delta",
+                            fontWeight: "bold",
+                            textColor: "neutral0",
+                            textAlign: "center",
+                            fontSize: 2,
+                            children: formatMessage(isTrialEndedRecently ? {
+                                id: 'app.components.UpsellBanner.intro.ended',
+                                defaultMessage: 'Your trial has ended: '
+                            } : {
+                                id: 'app.components.UpsellBanner.intro',
+                                defaultMessage: 'Access to Growth plan features: '
+                            })
+                        }),
+                        /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                            variant: "delta",
+                            textColor: "neutral0",
+                            textAlign: "center",
+                            paddingRight: 4,
+                            fontSize: 2,
+                            children: formatMessage(isTrialEndedRecently ? {
+                                id: 'app.components.UpsellBanner.text.ended',
+                                defaultMessage: 'Keep access to Growth features by upgrading now.'
+                            } : {
+                                id: 'app.components.UpsellBanner.text',
+                                defaultMessage: 'As part of your trial, you can explore premium tools such as Content History, Releases, and Single Sign-On (SSO).'
+                            })
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
+                    children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.LinkButton, {
+                        width: "max-content",
+                        variant: "tertiary",
+                        href: "https://strapi.chargebeeportal.com",
+                        target: "_blank",
+                        children: formatMessage(isTrialEndedRecently ? {
+                            id: 'app.components.UpsellBanner.button.ended',
+                            defaultMessage: 'Keep Growth plan'
+                        } : {
+                            id: 'app.components.UpsellBanner.button',
+                            defaultMessage: 'Upgrade now'
+                        })
+                    })
+                })
+            ]
+        })
+    });
+};
+const UpsellBanner = ()=>{
+    const { license } = ee.useLicenseLimits();
+    const [cachedTrialEndsAt, setCachedTrialEndsAt] = usePersistentState.usePersistentState('STRAPI_FREE_TRIAL_ENDS_AT', undefined);
+    const sevenDaysAgo = dateFns.subDays(new Date(), 7);
+    const timeLeftData = admin.useGetLicenseTrialTimeLeftQuery(undefined, {
+        skip: !license?.isTrial
+    });
+    React.useEffect(()=>{
+        if (timeLeftData.data?.trialEndsAt) {
+            setCachedTrialEndsAt(timeLeftData.data.trialEndsAt);
+        }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [
+        timeLeftData.data?.trialEndsAt
+    ]);
+    // When the license is not a trial + not EE, and the cached trial end date is found in the localstorage, that means the trial has ended
+    // We show the banner to encourage the user to upgrade (for 7 days after the trial ends)
+    const isTrialEndedRecently = Boolean(!license?.isTrial && !window.strapi.isEE && cachedTrialEndsAt && dateFns.isAfter(new Date(cachedTrialEndsAt), sevenDaysAgo));
+    if (timeLeftData.data?.trialEndsAt || isTrialEndedRecently) {
+        return /*#__PURE__*/ jsxRuntime.jsx(Banner, {
+            isTrialEndedRecently: isTrialEndedRecently
+        });
+    }
+    return null;
+};
+
+exports.UpsellBanner = UpsellBanner;
+//# sourceMappingURL=UpsellBanner.js.map