@strapi/admin 5.27.0 → 5.29.0

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

@@ -1 +1 @@
-{"version":3,"file":"SubNav.mjs","sources":["../../../../../admin/src/components/SubNav.tsx"],"sourcesContent":["import { useId, useState } from 'react';\n\nimport {\n  Box,\n  SubNav as DSSubNav,\n  Flex,\n  Typography,\n  IconButton,\n  Badge,\n  ScrollArea,\n} from '@strapi/design-system';\nimport { ChevronDown, Plus } from '@strapi/icons';\nimport { NavLink } from 'react-router-dom';\nimport { styled } from 'styled-components';\n\nimport { HEIGHT_TOP_NAVIGATION } from '../constants/theme';\n\nimport { tours } from './GuidedTour/Tours';\n\nconst MainSubNav = styled(DSSubNav)`\n  width: 100%;\n  height: calc(100dvh - ${HEIGHT_TOP_NAVIGATION} - 1px);\n  overflow: hidden;\n  background-color: ${({ theme }) => theme.colors.neutral0};\n  display: flex;\n  flex-direction: column;\n  border-right: 0;\n  box-shadow: none;\n  position: fixed;\n  top: calc(${HEIGHT_TOP_NAVIGATION} + 1px);\n  left: 0;\n  z-index: 2;\n\n  ${({ theme }) => theme.breakpoints.medium} {\n    position: sticky;\n    top: 0;\n    border-right: 1px solid ${({ theme }) => theme.colors.neutral150};\n  }\n  ${({ theme }) => theme.breakpoints.large} {\n    height: 100dvh;\n  }\n`;\n\nconst Main = ({ children, ...props }: { children: React.ReactNode; isFullPage?: boolean }) => (\n  <MainSubNav {...props}>{children}</MainSubNav>\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    handleClick?: () => void;\n  }\n) => {\n  const { label, endAction, handleClick, ...rest } = props;\n\n  return (\n    <StyledLink {...rest} onClick={handleClick}>\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(Flex)`\n  flex: 0 0 ${HEIGHT_TOP_NAVIGATION};\n  height: ${HEIGHT_TOP_NAVIGATION};\n`;\n\nconst Header = ({ label }: { label: string }) => {\n  return (\n    <StyledHeader\n      justifyContent=\"space-between\"\n      paddingLeft={{\n        initial: 4,\n        large: 5,\n      }}\n      paddingRight={{\n        initial: 4,\n        large: 5,\n      }}\n    >\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 paddingTop={4} 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\n/**\n * TODO:\n * This would be better in the content-type-builder package directly but currently\n * the SubNav API does not expose a way to wrap the link, instead it wraps the link and the list\n */\nconst GuidedTourTooltip = ({\n  sectionId,\n  children,\n}: {\n  sectionId?: string;\n  children: React.ReactNode;\n}) => {\n  switch (sectionId) {\n    case 'models':\n      return (\n        <tours.contentTypeBuilder.CollectionTypes>\n          <tours.contentTypeBuilder.YourTurn>{children}</tours.contentTypeBuilder.YourTurn>\n        </tours.contentTypeBuilder.CollectionTypes>\n      );\n    case 'singleTypes':\n      return (\n        <tours.contentTypeBuilder.SingleTypes>{children}</tours.contentTypeBuilder.SingleTypes>\n      );\n    case 'components':\n      return <tours.contentTypeBuilder.Components>{children}</tours.contentTypeBuilder.Components>;\n    default:\n      return children;\n  }\n};\n\nconst Section = ({\n  label,\n  children,\n  link,\n  sectionId,\n  badgeLabel,\n}: {\n  label: string;\n  children: React.ReactNode[];\n  link?: { label: string; onClick: () => void };\n  sectionId?: string;\n  badgeLabel?: string;\n}) => {\n  const listId = useId();\n\n  return (\n    <Flex direction=\"column\" alignItems=\"stretch\" gap={2}>\n      <Box\n        paddingLeft={{\n          initial: 4,\n          large: 5,\n        }}\n        paddingRight={{\n          initial: 4,\n          large: 5,\n        }}\n      >\n        <Flex position=\"relative\" justifyContent=\"space-between\" gap={2}>\n          <Flex>\n            <Box paddingRight={1}>\n              <Typography variant=\"sigma\" textColor=\"neutral600\">\n                {label}\n              </Typography>\n            </Box>\n          </Flex>\n          <Flex gap={1}>\n            {badgeLabel && (\n              <Badge backgroundColor=\"neutral150\" textColor=\"neutral600\">\n                {badgeLabel}\n              </Badge>\n            )}\n            {link && (\n              <GuidedTourTooltip sectionId={sectionId}>\n                <IconButton\n                  label={link.label}\n                  variant=\"ghost\"\n                  withTooltip\n                  onClick={link.onClick}\n                  size=\"XS\"\n                >\n                  <Plus />\n                </IconButton>\n              </GuidedTourTooltip>\n            )}\n          </Flex>\n        </Flex>\n      </Box>\n      <Flex\n        tag=\"ol\"\n        id={listId}\n        direction=\"column\"\n        gap=\"2px\"\n        alignItems={'stretch'}\n        marginLeft={{\n          initial: 1,\n          large: 2,\n        }}\n        marginRight={{\n          initial: 1,\n          large: 2,\n        }}\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  border-radius: ${({ theme }) => theme.borderRadius};\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\nconst PageWrapper = styled(Box)`\n  ${MainSubNav} {\n    background-color: transparent;\n    border-right: none;\n  }\n\n  ${({ theme }) => theme.breakpoints.medium} {\n    ${MainSubNav} {\n      top: 0;\n    }\n  }\n`;\n\nconst Content = ({ children }: { children: React.ReactNode }) => {\n  return <ScrollArea>{children}</ScrollArea>;\n};\n\nexport const SubNav = {\n  Main,\n  Content,\n  Header,\n  Link,\n  Sections,\n  Section,\n  SubSection,\n  PageWrapper,\n};\n"],"names":["MainSubNav","styled","DSSubNav","HEIGHT_TOP_NAVIGATION","theme","colors","neutral0","breakpoints","medium","neutral150","large","Main","children","props","_jsx","StyledLink","NavLink","neutral800","primary100","primary700","neutral100","Link","label","endAction","handleClick","rest","onClick","Box","width","paddingLeft","paddingRight","borderRadius","_jsxs","Flex","justifyContent","gap","Typography","tag","lineHeight","overflow","style","textOverflow","whiteSpace","StyledHeader","Header","initial","variant","Sections","paddingTop","paddingBottom","direction","alignItems","map","child","index","li","GuidedTourTooltip","sectionId","tours","contentTypeBuilder","CollectionTypes","YourTurn","SingleTypes","Components","Section","link","badgeLabel","listId","useId","position","textColor","Badge","backgroundColor","IconButton","withTooltip","size","Plus","id","marginLeft","marginRight","SubSectionHeader","button","spaces","SubSectionLinkWrapper","SubSection","isOpen","setOpenLinks","useState","prev","aria-expanded","aria-controls","ChevronDown","aria-hidden","fill","transform","transition","fontWeight","maxHeight","PageWrapper","Content","ScrollArea","SubNav"],"mappings":";;;;;;;;;AAmBA,MAAMA,UAAAA,GAAaC,MAAOC,CAAAA,QAAAA,CAAS;;AAEX,wBAAA,EAAEC,qBAAsB,CAAA;;oBAE5B,EAAE,CAAC,EAAEC,KAAK,EAAE,GAAKA,KAAMC,CAAAA,MAAM,CAACC,QAAQ,CAAC;;;;;;AAM/C,YAAA,EAAEH,qBAAsB,CAAA;;;;EAIlC,EAAE,CAAC,EAAEC,KAAK,EAAE,GAAKA,KAAMG,CAAAA,WAAW,CAACC,MAAM,CAAC;;;4BAGhB,EAAE,CAAC,EAAEJ,KAAK,EAAE,GAAKA,KAAMC,CAAAA,MAAM,CAACI,UAAU,CAAC;;EAEnE,EAAE,CAAC,EAAEL,KAAK,EAAE,GAAKA,KAAMG,CAAAA,WAAW,CAACG,KAAK,CAAC;;;AAG3C,CAAC;AAED,MAAMC,IAAAA,GAAO,CAAC,EAAEC,QAAQ,EAAE,GAAGC,KAAAA,EAA4D,iBACvFC,GAACd,CAAAA,UAAAA,EAAAA;AAAY,QAAA,GAAGa,KAAK;AAAGD,QAAAA,QAAAA,EAAAA;;AAG1B,MAAMG,UAAAA,GAAad,MAAOe,CAAAA,OAAAA,CAAQ;;;;;;;SAOzB,EAAE,CAAC,EAAEZ,KAAK,EAAE,GAAKA,KAAMC,CAAAA,MAAM,CAACY,UAAU,CAAC;;;IAG9C,EAAE,CAAC,EAAEb,KAAK,EAAE,GAAA;AACV,IAAA,OAAO;AACa,0BAAA,EAAEA,KAAMC,CAAAA,MAAM,CAACa,UAAU,CAAC;AACrC,eAAA,EAAEd,KAAMC,CAAAA,MAAM,CAACc,UAAU,CAAC;;MAEnC,CAAC;AACH,CAAE;;;;IAIF,EAAE,CAAC,EAAEf,KAAK,EAAE,GAAA;AACV,IAAA,OAAO;AACa,0BAAA,EAAEA,KAAMC,CAAAA,MAAM,CAACa,UAAU,CAAC;MAC9C,CAAC;AACH,CAAE;;;;IAIF,EAAE,CAAC,EAAEd,KAAK,EAAE,GAAA;AACV,IAAA,OAAO;AACa,0BAAA,EAAEA,KAAMC,CAAAA,MAAM,CAACe,UAAU,CAAC;MAC9C,CAAC;AACH,CAAE;;;;;;AAMN,CAAC;AAED,MAAMC,OAAO,CACXR,KAAAA,GAAAA;IAMA,MAAM,EAAES,KAAK,EAAEC,SAAS,EAAEC,WAAW,EAAE,GAAGC,IAAAA,EAAM,GAAGZ,KAAAA;AAEnD,IAAA,qBACEC,GAACC,CAAAA,UAAAA,EAAAA;AAAY,QAAA,GAAGU,IAAI;QAAEC,OAASF,EAAAA,WAAAA;AAC7B,QAAA,QAAA,gBAAAV,GAACa,CAAAA,GAAAA,EAAAA;YAAIC,KAAO,EAAA,MAAA;YAAQC,WAAa,EAAA,CAAA;YAAGC,YAAc,EAAA,CAAA;YAAGC,YAAc,EAAA,CAAA;AACjE,YAAA,QAAA,gBAAAC,IAACC,CAAAA,IAAAA,EAAAA;gBAAKC,cAAe,EAAA,eAAA;gBAAgBN,KAAM,EAAA,MAAA;gBAAOO,GAAK,EAAA,CAAA;;kCACrDrB,GAACsB,CAAAA,UAAAA,EAAAA;wBACCC,GAAI,EAAA,KAAA;wBACJC,UAAW,EAAA,MAAA;wBACXV,KAAM,EAAA,MAAA;wBACNW,QAAS,EAAA,QAAA;wBACTC,KAAO,EAAA;4BAAEC,YAAc,EAAA,UAAA;4BAAYC,UAAY,EAAA;AAAS,yBAAA;AAEvDpB,wBAAAA,QAAAA,EAAAA;;kCAEHR,GAACmB,CAAAA,IAAAA,EAAAA;wBAAKE,GAAK,EAAA,CAAA;AAAIZ,wBAAAA,QAAAA,EAAAA;;;;;;AAKzB,CAAA;AAEA,MAAMoB,YAAAA,GAAe1C,MAAOgC,CAAAA,IAAAA,CAAK;AACrB,YAAA,EAAE9B,qBAAsB,CAAA;AAC1B,UAAA,EAAEA,qBAAsB,CAAA;AAClC,CAAC;AAED,MAAMyC,MAAS,GAAA,CAAC,EAAEtB,KAAK,EAAqB,GAAA;AAC1C,IAAA,qBACER,GAAC6B,CAAAA,YAAAA,EAAAA;QACCT,cAAe,EAAA,eAAA;QACfL,WAAa,EAAA;YACXgB,OAAS,EAAA,CAAA;YACTnC,KAAO,EAAA;AACT,SAAA;QACAoB,YAAc,EAAA;YACZe,OAAS,EAAA,CAAA;YACTnC,KAAO,EAAA;AACT,SAAA;AAEA,QAAA,QAAA,gBAAAI,GAACsB,CAAAA,UAAAA,EAAAA;YAAWU,OAAQ,EAAA,MAAA;YAAOT,GAAI,EAAA,IAAA;AAC5Bf,YAAAA,QAAAA,EAAAA;;;AAIT,CAAA;AAEA,MAAMyB,WAAW,CAAC,EAAEnC,QAAQ,EAAE,GAAGC,KAA4D,EAAA,GAAA;AAC3F,IAAA,qBACEC,GAACa,CAAAA,GAAAA,EAAAA;QAAIqB,UAAY,EAAA,CAAA;QAAGC,aAAe,EAAA,CAAA;AACjC,QAAA,QAAA,gBAAAnC,GAACmB,CAAAA,IAAAA,EAAAA;YAAKI,GAAI,EAAA,IAAA;YAAKF,GAAI,EAAA,GAAA;YAAIe,SAAU,EAAA,QAAA;YAASC,UAAW,EAAA,SAAA;AAAW,YAAA,GAAGtC,KAAK;sBACrED,QAASwC,CAAAA,GAAG,CAAC,CAACC,KAAOC,EAAAA,KAAAA,GAAAA;AACpB,gBAAA,qBAAOxC,GAACyC,CAAAA,IAAAA,EAAAA;AAAgBF,oBAAAA,QAAAA,EAAAA;AAARC,iBAAAA,EAAAA,KAAAA,CAAAA;AAClB,aAAA;;;AAIR,CAAA;AAEA;;;;AAIC,IACD,MAAME,iBAAoB,GAAA,CAAC,EACzBC,SAAS,EACT7C,QAAQ,EAIT,GAAA;IACC,OAAQ6C,SAAAA;QACN,KAAK,QAAA;AACH,YAAA,qBACE3C,GAAC4C,CAAAA,KAAAA,CAAMC,kBAAkB,CAACC,eAAe,EAAA;AACvC,gBAAA,QAAA,gBAAA9C,GAAC4C,CAAAA,KAAAA,CAAMC,kBAAkB,CAACE,QAAQ,EAAA;AAAEjD,oBAAAA,QAAAA,EAAAA;;;QAG1C,KAAK,aAAA;AACH,YAAA,qBACEE,GAAC4C,CAAAA,KAAAA,CAAMC,kBAAkB,CAACG,WAAW,EAAA;AAAElD,gBAAAA,QAAAA,EAAAA;;QAE3C,KAAK,YAAA;AACH,YAAA,qBAAOE,GAAC4C,CAAAA,KAAAA,CAAMC,kBAAkB,CAACI,UAAU,EAAA;AAAEnD,gBAAAA,QAAAA,EAAAA;;AAC/C,QAAA;YACE,OAAOA,QAAAA;AACX;AACF,CAAA;AAEA,MAAMoD,OAAU,GAAA,CAAC,EACf1C,KAAK,EACLV,QAAQ,EACRqD,IAAI,EACJR,SAAS,EACTS,UAAU,EAOX,GAAA;AACC,IAAA,MAAMC,MAASC,GAAAA,KAAAA,EAAAA;AAEf,IAAA,qBACEpC,IAACC,CAAAA,IAAAA,EAAAA;QAAKiB,SAAU,EAAA,QAAA;QAASC,UAAW,EAAA,SAAA;QAAUhB,GAAK,EAAA,CAAA;;0BACjDrB,GAACa,CAAAA,GAAAA,EAAAA;gBACCE,WAAa,EAAA;oBACXgB,OAAS,EAAA,CAAA;oBACTnC,KAAO,EAAA;AACT,iBAAA;gBACAoB,YAAc,EAAA;oBACZe,OAAS,EAAA,CAAA;oBACTnC,KAAO,EAAA;AACT,iBAAA;AAEA,gBAAA,QAAA,gBAAAsB,IAACC,CAAAA,IAAAA,EAAAA;oBAAKoC,QAAS,EAAA,UAAA;oBAAWnC,cAAe,EAAA,eAAA;oBAAgBC,GAAK,EAAA,CAAA;;sCAC5DrB,GAACmB,CAAAA,IAAAA,EAAAA;AACC,4BAAA,QAAA,gBAAAnB,GAACa,CAAAA,GAAAA,EAAAA;gCAAIG,YAAc,EAAA,CAAA;AACjB,gCAAA,QAAA,gBAAAhB,GAACsB,CAAAA,UAAAA,EAAAA;oCAAWU,OAAQ,EAAA,OAAA;oCAAQwB,SAAU,EAAA,YAAA;AACnChD,oCAAAA,QAAAA,EAAAA;;;;sCAIPU,IAACC,CAAAA,IAAAA,EAAAA;4BAAKE,GAAK,EAAA,CAAA;;AACR+B,gCAAAA,UAAAA,kBACCpD,GAACyD,CAAAA,KAAAA,EAAAA;oCAAMC,eAAgB,EAAA,YAAA;oCAAaF,SAAU,EAAA,YAAA;AAC3CJ,oCAAAA,QAAAA,EAAAA;;AAGJD,gCAAAA,IAAAA,kBACCnD,GAAC0C,CAAAA,iBAAAA,EAAAA;oCAAkBC,SAAWA,EAAAA,SAAAA;AAC5B,oCAAA,QAAA,gBAAA3C,GAAC2D,CAAAA,UAAAA,EAAAA;AACCnD,wCAAAA,KAAAA,EAAO2C,KAAK3C,KAAK;wCACjBwB,OAAQ,EAAA,OAAA;wCACR4B,WAAW,EAAA,IAAA;AACXhD,wCAAAA,OAAAA,EAASuC,KAAKvC,OAAO;wCACrBiD,IAAK,EAAA,IAAA;AAEL,wCAAA,QAAA,gBAAA7D,GAAC8D,CAAAA,IAAAA,EAAAA,EAAAA;;;;;;;;0BAOb9D,GAACmB,CAAAA,IAAAA,EAAAA;gBACCI,GAAI,EAAA,IAAA;gBACJwC,EAAIV,EAAAA,MAAAA;gBACJjB,SAAU,EAAA,QAAA;gBACVf,GAAI,EAAA,KAAA;gBACJgB,UAAY,EAAA,SAAA;gBACZ2B,UAAY,EAAA;oBACVjC,OAAS,EAAA,CAAA;oBACTnC,KAAO,EAAA;AACT,iBAAA;gBACAqE,WAAa,EAAA;oBACXlC,OAAS,EAAA,CAAA;oBACTnC,KAAO,EAAA;AACT,iBAAA;0BAECE,QAASwC,CAAAA,GAAG,CAAC,CAACC,KAAOC,EAAAA,KAAAA,GAAAA;AACpB,oBAAA,qBAAOxC,GAACyC,CAAAA,IAAAA,EAAAA;AAAgBF,wBAAAA,QAAAA,EAAAA;AAARC,qBAAAA,EAAAA,KAAAA,CAAAA;AAClB,iBAAA;;;;AAIR,CAAA;AAEA,MAAM0B,gBAAAA,GAAmB/E,MAAOgF,CAAAA,MAAM;;;;;;;;AAQrB,iBAAA,EAAE,CAAC,EAAE7E,KAAK,EAAE,GAAKA,KAAAA,CAAM2B,YAAY,CAAC;gBACrC,EAAE,CAAC,EAAE3B,KAAK,EAAE,GAAKA,KAAM8E,CAAAA,MAAM,CAAC,CAAA,CAAE,CAAC;iBAChC,EAAE,CAAC,EAAE9E,KAAK,EAAE,GAAKA,KAAM8E,CAAAA,MAAM,CAAC,CAAA,CAAE,CAAC;eACnC,EAAE,CAAC,EAAE9E,KAAK,EAAE,GAAKA,KAAM8E,CAAAA,MAAM,CAAC,CAAA,CAAE,CAAC;kBAC9B,EAAE,CAAC,EAAE9E,KAAK,EAAE,GAAKA,KAAM8E,CAAAA,MAAM,CAAC,CAAA,CAAE,CAAC;;;sBAG7B,EAAE,CAAC,EAAE9E,KAAK,EAAE,GAAKA,KAAMC,CAAAA,MAAM,CAACe,UAAU,CAAC;;AAE/D,CAAC;AAED,MAAM+D,qBAAAA,GAAwBlF,MAAOsD,CAAAA,EAAE;AACrC,EAAA,EAAExC,UAAW,CAAA;;;AAGf,CAAC;AAED,MAAMqE,aAAa,CAAC,EAAE9D,KAAK,EAAEV,QAAQ,EAAkD,GAAA;AACrF,IAAA,MAAM,CAACyE,MAAAA,EAAQC,YAAa,CAAA,GAAGC,QAAS,CAAA,IAAA,CAAA;AACxC,IAAA,MAAMpB,MAASC,GAAAA,KAAAA,EAAAA;AAEf,IAAA,MAAM5C,WAAc,GAAA,IAAA;QAClB8D,YAAa,CAAA,CAACE,OAAS,CAACA,IAAAA,CAAAA;AAC1B,KAAA;AAEA,IAAA,qBACExD,IAACL,CAAAA,GAAAA,EAAAA;;0BACCb,GAACmB,CAAAA,IAAAA,EAAAA;gBAAKC,cAAe,EAAA,eAAA;AACnB,gBAAA,QAAA,gBAAAF,IAACgD,CAAAA,gBAAAA,EAAAA;oBAAiBtD,OAASF,EAAAA,WAAAA;oBAAaiE,eAAeJ,EAAAA,MAAAA;oBAAQK,eAAevB,EAAAA,MAAAA;;sCAC5ErD,GAAC6E,CAAAA,WAAAA,EAAAA;4BACCC,aAAW,EAAA,IAAA;4BACXC,IAAK,EAAA,YAAA;4BACLrD,KAAO,EAAA;AACLsD,gCAAAA,SAAAA,EAAW,CAAC,OAAO,EAAET,SAAS,MAAS,GAAA,QAAA,CAAS,CAAC,CAAC;gCAClDU,UAAY,EAAA;AACd;;sCAEFjF,GAACa,CAAAA,GAAAA,EAAAA;4BAAIE,WAAa,EAAA,CAAA;AAChB,4BAAA,QAAA,gBAAAf,GAACsB,CAAAA,UAAAA,EAAAA;gCAAWC,GAAI,EAAA,MAAA;gCAAO2D,UAAW,EAAA,UAAA;gCAAW1B,SAAU,EAAA,YAAA;AACpDhD,gCAAAA,QAAAA,EAAAA;;;;;;0BAMPR,GAACmB,CAAAA,IAAAA,EAAAA;gBACCI,GAAI,EAAA,IAAA;gBACJwC,EAAIV,EAAAA,MAAAA;gBACJjB,SAAU,EAAA,QAAA;gBACVf,GAAI,EAAA,KAAA;gBACJgB,UAAY,EAAA,SAAA;gBACZX,KAAO,EAAA;AACLyD,oBAAAA,SAAAA,EAAWZ,SAAS,QAAW,GAAA,CAAA;oBAC/B9C,QAAU,EAAA,QAAA;AACVwD,oBAAAA,UAAAA,EAAYV,SACR,2BACA,GAAA;AACN,iBAAA;0BAECzE,QAASwC,CAAAA,GAAG,CAAC,CAACC,KAAOC,EAAAA,KAAAA,GAAAA;AACpB,oBAAA,qBAAOxC,GAACqE,CAAAA,qBAAAA,EAAAA;AAAmC9B,wBAAAA,QAAAA,EAAAA;AAARC,qBAAAA,EAAAA,KAAAA,CAAAA;AACrC,iBAAA;;;;AAKV,CAAA;AAEA,MAAM4C,WAAAA,GAAcjG,MAAO0B,CAAAA,GAAAA,CAAI;AAC7B,EAAA,EAAE3B,UAAW,CAAA;;;;;EAKb,EAAE,CAAC,EAAEI,KAAK,EAAE,GAAKA,KAAMG,CAAAA,WAAW,CAACC,MAAM,CAAC;AACxC,IAAA,EAAER,UAAW,CAAA;;;;AAIjB,CAAC;AAED,MAAMmG,OAAU,GAAA,CAAC,EAAEvF,QAAQ,EAAiC,GAAA;AAC1D,IAAA,qBAAOE,GAACsF,CAAAA,UAAAA,EAAAA;AAAYxF,QAAAA,QAAAA,EAAAA;;AACtB,CAAA;MAEayF,MAAS,GAAA;AACpB1F,IAAAA,IAAAA;AACAwF,IAAAA,OAAAA;AACAvD,IAAAA,MAAAA;AACAvB,IAAAA,IAAAA;AACA0B,IAAAA,QAAAA;AACAiB,IAAAA,OAAAA;AACAoB,IAAAA,UAAAA;AACAc,IAAAA;AACF;;;;"}
+{"version":3,"file":"SubNav.mjs","sources":["../../../../../admin/src/components/SubNav.tsx"],"sourcesContent":["import { useId, useState } from 'react';\n\nimport {\n  Box,\n  SubNav as DSSubNav,\n  Flex,\n  Typography,\n  IconButton,\n  Badge,\n  ScrollArea,\n} from '@strapi/design-system';\nimport { ChevronDown, Plus } from '@strapi/icons';\nimport { NavLink } from 'react-router-dom';\nimport { styled } from 'styled-components';\n\nimport { HEIGHT_TOP_NAVIGATION } from '../constants/theme';\n\nimport { tours } from './GuidedTour/Tours';\n\nconst MainSubNav = styled(DSSubNav)`\n  width: 100%;\n  height: calc(100dvh - ${HEIGHT_TOP_NAVIGATION} - 1px);\n  overflow: hidden;\n  background-color: ${({ theme }) => theme.colors.neutral0};\n  display: flex;\n  flex-direction: column;\n  border-right: 0;\n  box-shadow: none;\n  position: fixed;\n  top: calc(${HEIGHT_TOP_NAVIGATION} + 1px);\n  left: 0;\n  z-index: 2;\n\n  ${({ theme }) => theme.breakpoints.medium} {\n    position: sticky;\n    top: 0;\n    border-right: 1px solid ${({ theme }) => theme.colors.neutral150};\n  }\n  ${({ theme }) => theme.breakpoints.large} {\n    height: 100dvh;\n  }\n`;\n\nconst Main = ({ children, ...props }: { children: React.ReactNode; isFullPage?: boolean }) => (\n  <MainSubNav {...props}>{children}</MainSubNav>\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    handleClick?: () => void;\n  }\n) => {\n  const { label, endAction, handleClick, ...rest } = props;\n\n  return (\n    <StyledLink {...rest} onClick={handleClick}>\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={{ initial: '80dvw', medium: '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(Flex)`\n  flex: 0 0 ${HEIGHT_TOP_NAVIGATION};\n  height: ${HEIGHT_TOP_NAVIGATION};\n`;\n\nconst Header = ({ label }: { label: string }) => {\n  return (\n    <StyledHeader\n      justifyContent=\"space-between\"\n      paddingLeft={{\n        initial: 4,\n        large: 5,\n      }}\n      paddingRight={{\n        initial: 4,\n        large: 5,\n      }}\n    >\n      <Typography variant=\"beta\" tag=\"h2\">\n        {label}\n      </Typography>\n    </StyledHeader>\n  );\n};\n\nconst Sections = ({\n  children,\n  ...props\n}: {\n  children: React.ReactNode[];\n  [key: string]: unknown;\n}) => {\n  return (\n    <Box paddingTop={4} paddingBottom={4} maxWidth={{ initial: '100%', medium: '23.2rem' }}>\n      <Flex tag=\"ul\" 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\n/**\n * TODO:\n * This would be better in the content-type-builder package directly but currently\n * the SubNav API does not expose a way to wrap the link, instead it wraps the link and the list\n */\nconst GuidedTourTooltip = ({\n  sectionId,\n  children,\n}: {\n  sectionId?: string;\n  children: React.ReactNode;\n}) => {\n  switch (sectionId) {\n    case 'models':\n      return (\n        <tours.contentTypeBuilder.CollectionTypes>\n          <tours.contentTypeBuilder.YourTurn>{children}</tours.contentTypeBuilder.YourTurn>\n        </tours.contentTypeBuilder.CollectionTypes>\n      );\n    case 'singleTypes':\n      return (\n        <tours.contentTypeBuilder.SingleTypes>{children}</tours.contentTypeBuilder.SingleTypes>\n      );\n    case 'components':\n      return <tours.contentTypeBuilder.Components>{children}</tours.contentTypeBuilder.Components>;\n    default:\n      return children;\n  }\n};\n\nconst Section = ({\n  label,\n  children,\n  link,\n  sectionId,\n  badgeLabel,\n}: {\n  label: string;\n  children: React.ReactNode[];\n  link?: { label: string; onClick: () => void };\n  sectionId?: string;\n  badgeLabel?: string;\n}) => {\n  const listId = useId();\n\n  return (\n    <Flex direction=\"column\" alignItems=\"stretch\" gap={2}>\n      <Box\n        paddingLeft={{\n          initial: 4,\n          large: 5,\n        }}\n        paddingRight={{\n          initial: 4,\n          large: 5,\n        }}\n      >\n        <Flex position=\"relative\" justifyContent=\"space-between\" gap={2}>\n          <Flex>\n            <Box paddingRight={1}>\n              <Typography variant=\"sigma\" textColor=\"neutral600\">\n                {label}\n              </Typography>\n            </Box>\n          </Flex>\n          <Flex gap={1}>\n            {badgeLabel && (\n              <Badge backgroundColor=\"neutral150\" textColor=\"neutral600\">\n                {badgeLabel}\n              </Badge>\n            )}\n            {link && (\n              <GuidedTourTooltip sectionId={sectionId}>\n                <IconButton\n                  label={link.label}\n                  variant=\"ghost\"\n                  withTooltip\n                  onClick={link.onClick}\n                  size=\"XS\"\n                >\n                  <Plus />\n                </IconButton>\n              </GuidedTourTooltip>\n            )}\n          </Flex>\n        </Flex>\n      </Box>\n      <Flex\n        tag=\"ol\"\n        id={listId}\n        direction=\"column\"\n        gap=\"2px\"\n        alignItems={'stretch'}\n        marginLeft={{\n          initial: 1,\n          large: 2,\n        }}\n        marginRight={{\n          initial: 1,\n          large: 2,\n        }}\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  border-radius: ${({ theme }) => theme.borderRadius};\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      <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    </Box>\n  );\n};\n\nconst PageWrapper = styled(Box)`\n  ${MainSubNav} {\n    background-color: transparent;\n    border-right: none;\n  }\n\n  ${({ theme }) => theme.breakpoints.medium} {\n    ${MainSubNav} {\n      top: 0;\n    }\n  }\n`;\n\nconst Content = ({ children }: { children: React.ReactNode }) => {\n  return <ScrollArea>{children}</ScrollArea>;\n};\n\nexport const SubNav = {\n  Main,\n  Content,\n  Header,\n  Link,\n  Sections,\n  Section,\n  SubSection,\n  PageWrapper,\n};\n"],"names":["MainSubNav","styled","DSSubNav","HEIGHT_TOP_NAVIGATION","theme","colors","neutral0","breakpoints","medium","neutral150","large","Main","children","props","_jsx","StyledLink","NavLink","neutral800","primary100","primary700","neutral100","Link","label","endAction","handleClick","rest","onClick","Box","width","paddingLeft","paddingRight","borderRadius","_jsxs","Flex","justifyContent","gap","Typography","tag","lineHeight","initial","overflow","style","textOverflow","whiteSpace","StyledHeader","Header","variant","Sections","paddingTop","paddingBottom","maxWidth","direction","alignItems","map","child","index","li","GuidedTourTooltip","sectionId","tours","contentTypeBuilder","CollectionTypes","YourTurn","SingleTypes","Components","Section","link","badgeLabel","listId","useId","position","textColor","Badge","backgroundColor","IconButton","withTooltip","size","Plus","id","marginLeft","marginRight","SubSectionHeader","button","spaces","SubSectionLinkWrapper","SubSection","isOpen","setOpenLinks","useState","prev","aria-expanded","aria-controls","ChevronDown","aria-hidden","fill","transform","transition","fontWeight","maxHeight","PageWrapper","Content","ScrollArea","SubNav"],"mappings":"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"}

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

@@ -0,0 +1,216 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var designSystem = require('@strapi/design-system');
+var icons = require('@strapi/icons');
+var reactDnd = require('react-dnd');
+var reactDndHtml5Backend = require('react-dnd-html5-backend');
+var reactIntl = require('react-intl');
+var reactRouterDom = require('react-router-dom');
+var styled = require('styled-components');
+var Tracking = require('../features/Tracking.js');
+var widgetLayout = require('../utils/widgetLayout.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);
+
+const WidgetActions = styled(designSystem.Flex)`
+  display: flex;
+
+  @media (hover: hover) and (pointer: fine) {
+    display: none;
+  }
+`;
+const DragIconButton = styled(designSystem.IconButton)`
+  display: none;
+
+  @media (hover: hover) and (pointer: fine) {
+    display: flex;
+  }
+`;
+const WidgetContainer = styled(designSystem.Flex)`
+  @media (hover: hover) and (pointer: fine) {
+    &:hover ${WidgetActions} {
+      display: flex;
+    }
+  }
+
+  &:focus-within ${WidgetActions} {
+    display: flex;
+  }
+
+  &:focus-within ${DragIconButton} {
+    pointer-events: none;
+
+    ${({ theme })=>theme.breakpoints.medium} {
+      pointer-events: auto;
+    }
+  }
+`;
+const WidgetRoot = ({ title, icon = icons.PuzzlePiece, children, link, uid, findWidget, deleteWidget, onDragStart, onDragEnd, component })=>{
+    const { trackUsage } = Tracking.useTracking();
+    const { formatMessage } = reactIntl.useIntl();
+    const Icon = icon;
+    const handleClickOnLink = ()=>{
+        trackUsage('didOpenHomeWidgetLink', {
+            widgetUID: uid
+        });
+    };
+    const handleDeleteWidget = ()=>{
+        deleteWidget?.(uid);
+    };
+    const [, drag, preview] = reactDnd.useDrag(()=>({
+            type: 'widget',
+            item: ()=>{
+                onDragStart?.(uid);
+                return {
+                    id: uid,
+                    originalIndex: findWidget?.(uid)?.index ?? 0,
+                    title,
+                    icon,
+                    link,
+                    component
+                };
+            },
+            collect: (monitor)=>({
+                    isDragging: monitor.isDragging()
+                }),
+            end: ()=>{
+                onDragEnd?.();
+            }
+        }), [
+        uid,
+        findWidget,
+        onDragStart,
+        onDragEnd,
+        title,
+        icon,
+        link,
+        component
+    ]);
+    // Suppress default drag preview
+    React__namespace.useEffect(()=>{
+        preview(reactDndHtml5Backend.getEmptyImage(), {
+            captureDraggingState: true
+        });
+    }, [
+        preview
+    ]);
+    return /*#__PURE__*/ jsxRuntime.jsxs(WidgetContainer, {
+        width: "100%",
+        hasRadius: true,
+        direction: "column",
+        alignItems: "flex-start",
+        background: 'neutral0',
+        borderColor: 'neutral150',
+        shadow: "tableShadow",
+        tag: "section",
+        gap: 4,
+        padding: 6,
+        position: "relative",
+        "aria-labelledby": uid,
+        tabIndex: 0,
+        [widgetLayout.WIDGET_DATA_ATTRIBUTES.WIDGET_ID]: uid,
+        style: {
+            transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)'
+        },
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+                direction: "row",
+                gap: 2,
+                width: "100%",
+                tag: "header",
+                alignItems: "center",
+                minHeight: "2.25rem",
+                children: [
+                    /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+                        gap: 2,
+                        marginRight: "auto",
+                        children: [
+                            /*#__PURE__*/ jsxRuntime.jsx(Icon, {
+                                fill: "neutral500",
+                                "aria-hidden": true
+                            }),
+                            /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                                textColor: "neutral500",
+                                variant: "sigma",
+                                tag: "h2",
+                                id: uid,
+                                children: formatMessage(title)
+                            })
+                        ]
+                    }),
+                    link && /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                        tag: reactRouterDom.Link,
+                        variant: "omega",
+                        textColor: "primary600",
+                        style: {
+                            textDecoration: 'none'
+                        },
+                        textAlign: "right",
+                        to: link.href,
+                        onClick: handleClickOnLink,
+                        children: formatMessage(link.label)
+                    }),
+                    /*#__PURE__*/ jsxRuntime.jsxs(WidgetActions, {
+                        gap: 2,
+                        children: [
+                            /*#__PURE__*/ jsxRuntime.jsx(designSystem.IconButton, {
+                                variant: "danger-light",
+                                size: "XS",
+                                onClick: handleDeleteWidget,
+                                label: formatMessage({
+                                    id: 'HomePage.widget.delete',
+                                    defaultMessage: 'Delete'
+                                }),
+                                cursor: "pointer",
+                                children: /*#__PURE__*/ jsxRuntime.jsx(icons.Trash, {})
+                            }),
+                            /*#__PURE__*/ jsxRuntime.jsx(DragIconButton, {
+                                variant: "tertiary",
+                                size: "XS",
+                                ref: drag,
+                                tabIndex: -1,
+                                label: formatMessage({
+                                    id: 'HomePage.widget.drag',
+                                    defaultMessage: 'Drag to move'
+                                }),
+                                cursor: "grab",
+                                children: /*#__PURE__*/ jsxRuntime.jsx(icons.Drag, {})
+                            })
+                        ]
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx(designSystem.ScrollArea, {
+                children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
+                    width: "100%",
+                    height: "261px",
+                    overflow: "auto",
+                    tag: "main",
+                    children: children
+                })
+            })
+        ]
+    });
+};
+
+exports.WidgetRoot = WidgetRoot;
+//# sourceMappingURL=WidgetRoot.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"WidgetRoot.js","sources":["../../../../../admin/src/components/WidgetRoot.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Box, Flex, Typography, ScrollArea, IconButton } from '@strapi/design-system';\nimport { PuzzlePiece, Trash, Drag } from '@strapi/icons';\nimport { useDrag } from 'react-dnd';\nimport { getEmptyImage } from 'react-dnd-html5-backend';\nimport { useIntl } from 'react-intl';\nimport { Link as ReactRouterLink } from 'react-router-dom';\nimport styled from 'styled-components';\n\nimport { useTracking } from '../features/Tracking';\nimport { WIDGET_DATA_ATTRIBUTES } from '../utils/widgetLayout';\n\nimport type { FindWidgetFunction, WidgetIdFunction, DragEndFunction } from '../features/Widgets';\nimport type { WidgetType } from '@strapi/admin/strapi-admin';\n\nexport interface BaseWidgetProps\n  extends Pick<WidgetType, 'title' | 'icon' | 'permissions' | 'link' | 'uid'> {\n  findWidget?: FindWidgetFunction;\n  deleteWidget?: WidgetIdFunction;\n  onDragStart?: WidgetIdFunction;\n  onDragEnd?: DragEndFunction;\n}\n\nexport interface WidgetRootProps extends BaseWidgetProps {\n  children: React.ReactNode;\n  component?: () => Promise<React.ComponentType>;\n}\n\nconst WidgetActions = styled(Flex)`\n  display: flex;\n\n  @media (hover: hover) and (pointer: fine) {\n    display: none;\n  }\n`;\n\nconst DragIconButton = styled(IconButton)`\n  display: none;\n\n  @media (hover: hover) and (pointer: fine) {\n    display: flex;\n  }\n`;\n\nconst WidgetContainer = styled(Flex)`\n  @media (hover: hover) and (pointer: fine) {\n    &:hover ${WidgetActions} {\n      display: flex;\n    }\n  }\n\n  &:focus-within ${WidgetActions} {\n    display: flex;\n  }\n\n  &:focus-within ${DragIconButton} {\n    pointer-events: none;\n\n    ${({ theme }) => theme.breakpoints.medium} {\n      pointer-events: auto;\n    }\n  }\n`;\n\nexport const WidgetRoot = ({\n  title,\n  icon = PuzzlePiece,\n  children,\n  link,\n  uid,\n  findWidget,\n  deleteWidget,\n  onDragStart,\n  onDragEnd,\n  component,\n}: WidgetRootProps) => {\n  const { trackUsage } = useTracking();\n  const { formatMessage } = useIntl();\n  const Icon = icon;\n\n  const handleClickOnLink = () => {\n    trackUsage('didOpenHomeWidgetLink', { widgetUID: uid });\n  };\n\n  const handleDeleteWidget = () => {\n    deleteWidget?.(uid);\n  };\n\n  const [, drag, preview] = useDrag(\n    () => ({\n      type: 'widget',\n      item: () => {\n        onDragStart?.(uid);\n        return {\n          id: uid,\n          originalIndex: findWidget?.(uid)?.index ?? 0,\n          title,\n          icon,\n          link,\n          component,\n        };\n      },\n      collect: (monitor) => ({\n        isDragging: monitor.isDragging(),\n      }),\n      end: () => {\n        onDragEnd?.();\n      },\n    }),\n    [uid, findWidget, onDragStart, onDragEnd, title, icon, link, component]\n  );\n\n  // Suppress default drag preview\n  React.useEffect(() => {\n    preview(getEmptyImage(), { captureDraggingState: true });\n  }, [preview]);\n\n  return (\n    <WidgetContainer\n      width=\"100%\"\n      hasRadius\n      direction=\"column\"\n      alignItems=\"flex-start\"\n      background={'neutral0'}\n      borderColor={'neutral150'}\n      shadow=\"tableShadow\"\n      tag=\"section\"\n      gap={4}\n      padding={6}\n      position=\"relative\"\n      aria-labelledby={uid}\n      tabIndex={0}\n      {...{ [WIDGET_DATA_ATTRIBUTES.WIDGET_ID]: uid }}\n      style={{\n        transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',\n      }}\n    >\n      <Flex\n        direction=\"row\"\n        gap={2}\n        width=\"100%\"\n        tag=\"header\"\n        alignItems=\"center\"\n        minHeight=\"2.25rem\"\n      >\n        <Flex gap={2} marginRight=\"auto\">\n          <Icon fill=\"neutral500\" aria-hidden />\n          <Typography textColor=\"neutral500\" variant=\"sigma\" tag=\"h2\" id={uid}>\n            {formatMessage(title)}\n          </Typography>\n        </Flex>\n        {link && (\n          <Typography\n            tag={ReactRouterLink}\n            variant=\"omega\"\n            textColor=\"primary600\"\n            style={{ textDecoration: 'none' }}\n            textAlign=\"right\"\n            to={link.href}\n            onClick={handleClickOnLink}\n          >\n            {formatMessage(link.label)}\n          </Typography>\n        )}\n        <WidgetActions gap={2}>\n          <IconButton\n            variant=\"danger-light\"\n            size=\"XS\"\n            onClick={handleDeleteWidget}\n            label={formatMessage({\n              id: 'HomePage.widget.delete',\n              defaultMessage: 'Delete',\n            })}\n            cursor=\"pointer\"\n          >\n            <Trash />\n          </IconButton>\n          <DragIconButton\n            variant=\"tertiary\"\n            size=\"XS\"\n            ref={drag}\n            tabIndex={-1}\n            label={formatMessage({\n              id: 'HomePage.widget.drag',\n              defaultMessage: 'Drag to move',\n            })}\n            cursor=\"grab\"\n          >\n            <Drag />\n          </DragIconButton>\n        </WidgetActions>\n      </Flex>\n      <ScrollArea>\n        <Box width=\"100%\" height=\"261px\" overflow=\"auto\" tag=\"main\">\n          {children}\n        </Box>\n      </ScrollArea>\n    </WidgetContainer>\n  );\n};\n"],"names":["WidgetActions","styled","Flex","DragIconButton","IconButton","WidgetContainer","theme","breakpoints","medium","WidgetRoot","title","icon","PuzzlePiece","children","link","uid","findWidget","deleteWidget","onDragStart","onDragEnd","component","trackUsage","useTracking","formatMessage","useIntl","Icon","handleClickOnLink","widgetUID","handleDeleteWidget","drag","preview","useDrag","type","item","id","originalIndex","index","collect","monitor","isDragging","end","React","useEffect","getEmptyImage","captureDraggingState","_jsxs","width","hasRadius","direction","alignItems","background","borderColor","shadow","tag","gap","padding","position","aria-labelledby","tabIndex","WIDGET_DATA_ATTRIBUTES","WIDGET_ID","style","transition","minHeight","marginRight","_jsx","fill","aria-hidden","Typography","textColor","variant","ReactRouterLink","textDecoration","textAlign","to","href","onClick","label","size","defaultMessage","cursor","Trash","ref","Drag","ScrollArea","Box","height","overflow"],"mappings":"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"}

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

@@ -0,0 +1,195 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import * as React from 'react';
+import { Flex, IconButton, Typography, ScrollArea, Box } from '@strapi/design-system';
+import { Trash, Drag, PuzzlePiece } from '@strapi/icons';
+import { useDrag } from 'react-dnd';
+import { getEmptyImage } from 'react-dnd-html5-backend';
+import { useIntl } from 'react-intl';
+import { Link } from 'react-router-dom';
+import styled from 'styled-components';
+import { useTracking } from '../features/Tracking.mjs';
+import { WIDGET_DATA_ATTRIBUTES } from '../utils/widgetLayout.mjs';
+
+const WidgetActions = styled(Flex)`
+  display: flex;
+
+  @media (hover: hover) and (pointer: fine) {
+    display: none;
+  }
+`;
+const DragIconButton = styled(IconButton)`
+  display: none;
+
+  @media (hover: hover) and (pointer: fine) {
+    display: flex;
+  }
+`;
+const WidgetContainer = styled(Flex)`
+  @media (hover: hover) and (pointer: fine) {
+    &:hover ${WidgetActions} {
+      display: flex;
+    }
+  }
+
+  &:focus-within ${WidgetActions} {
+    display: flex;
+  }
+
+  &:focus-within ${DragIconButton} {
+    pointer-events: none;
+
+    ${({ theme })=>theme.breakpoints.medium} {
+      pointer-events: auto;
+    }
+  }
+`;
+const WidgetRoot = ({ title, icon = PuzzlePiece, children, link, uid, findWidget, deleteWidget, onDragStart, onDragEnd, component })=>{
+    const { trackUsage } = useTracking();
+    const { formatMessage } = useIntl();
+    const Icon = icon;
+    const handleClickOnLink = ()=>{
+        trackUsage('didOpenHomeWidgetLink', {
+            widgetUID: uid
+        });
+    };
+    const handleDeleteWidget = ()=>{
+        deleteWidget?.(uid);
+    };
+    const [, drag, preview] = useDrag(()=>({
+            type: 'widget',
+            item: ()=>{
+                onDragStart?.(uid);
+                return {
+                    id: uid,
+                    originalIndex: findWidget?.(uid)?.index ?? 0,
+                    title,
+                    icon,
+                    link,
+                    component
+                };
+            },
+            collect: (monitor)=>({
+                    isDragging: monitor.isDragging()
+                }),
+            end: ()=>{
+                onDragEnd?.();
+            }
+        }), [
+        uid,
+        findWidget,
+        onDragStart,
+        onDragEnd,
+        title,
+        icon,
+        link,
+        component
+    ]);
+    // Suppress default drag preview
+    React.useEffect(()=>{
+        preview(getEmptyImage(), {
+            captureDraggingState: true
+        });
+    }, [
+        preview
+    ]);
+    return /*#__PURE__*/ jsxs(WidgetContainer, {
+        width: "100%",
+        hasRadius: true,
+        direction: "column",
+        alignItems: "flex-start",
+        background: 'neutral0',
+        borderColor: 'neutral150',
+        shadow: "tableShadow",
+        tag: "section",
+        gap: 4,
+        padding: 6,
+        position: "relative",
+        "aria-labelledby": uid,
+        tabIndex: 0,
+        [WIDGET_DATA_ATTRIBUTES.WIDGET_ID]: uid,
+        style: {
+            transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)'
+        },
+        children: [
+            /*#__PURE__*/ jsxs(Flex, {
+                direction: "row",
+                gap: 2,
+                width: "100%",
+                tag: "header",
+                alignItems: "center",
+                minHeight: "2.25rem",
+                children: [
+                    /*#__PURE__*/ jsxs(Flex, {
+                        gap: 2,
+                        marginRight: "auto",
+                        children: [
+                            /*#__PURE__*/ jsx(Icon, {
+                                fill: "neutral500",
+                                "aria-hidden": true
+                            }),
+                            /*#__PURE__*/ jsx(Typography, {
+                                textColor: "neutral500",
+                                variant: "sigma",
+                                tag: "h2",
+                                id: uid,
+                                children: formatMessage(title)
+                            })
+                        ]
+                    }),
+                    link && /*#__PURE__*/ jsx(Typography, {
+                        tag: Link,
+                        variant: "omega",
+                        textColor: "primary600",
+                        style: {
+                            textDecoration: 'none'
+                        },
+                        textAlign: "right",
+                        to: link.href,
+                        onClick: handleClickOnLink,
+                        children: formatMessage(link.label)
+                    }),
+                    /*#__PURE__*/ jsxs(WidgetActions, {
+                        gap: 2,
+                        children: [
+                            /*#__PURE__*/ jsx(IconButton, {
+                                variant: "danger-light",
+                                size: "XS",
+                                onClick: handleDeleteWidget,
+                                label: formatMessage({
+                                    id: 'HomePage.widget.delete',
+                                    defaultMessage: 'Delete'
+                                }),
+                                cursor: "pointer",
+                                children: /*#__PURE__*/ jsx(Trash, {})
+                            }),
+                            /*#__PURE__*/ jsx(DragIconButton, {
+                                variant: "tertiary",
+                                size: "XS",
+                                ref: drag,
+                                tabIndex: -1,
+                                label: formatMessage({
+                                    id: 'HomePage.widget.drag',
+                                    defaultMessage: 'Drag to move'
+                                }),
+                                cursor: "grab",
+                                children: /*#__PURE__*/ jsx(Drag, {})
+                            })
+                        ]
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsx(ScrollArea, {
+                children: /*#__PURE__*/ jsx(Box, {
+                    width: "100%",
+                    height: "261px",
+                    overflow: "auto",
+                    tag: "main",
+                    children: children
+                })
+            })
+        ]
+    });
+};
+
+export { WidgetRoot };
+//# sourceMappingURL=WidgetRoot.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"WidgetRoot.mjs","sources":["../../../../../admin/src/components/WidgetRoot.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Box, Flex, Typography, ScrollArea, IconButton } from '@strapi/design-system';\nimport { PuzzlePiece, Trash, Drag } from '@strapi/icons';\nimport { useDrag } from 'react-dnd';\nimport { getEmptyImage } from 'react-dnd-html5-backend';\nimport { useIntl } from 'react-intl';\nimport { Link as ReactRouterLink } from 'react-router-dom';\nimport styled from 'styled-components';\n\nimport { useTracking } from '../features/Tracking';\nimport { WIDGET_DATA_ATTRIBUTES } from '../utils/widgetLayout';\n\nimport type { FindWidgetFunction, WidgetIdFunction, DragEndFunction } from '../features/Widgets';\nimport type { WidgetType } from '@strapi/admin/strapi-admin';\n\nexport interface BaseWidgetProps\n  extends Pick<WidgetType, 'title' | 'icon' | 'permissions' | 'link' | 'uid'> {\n  findWidget?: FindWidgetFunction;\n  deleteWidget?: WidgetIdFunction;\n  onDragStart?: WidgetIdFunction;\n  onDragEnd?: DragEndFunction;\n}\n\nexport interface WidgetRootProps extends BaseWidgetProps {\n  children: React.ReactNode;\n  component?: () => Promise<React.ComponentType>;\n}\n\nconst WidgetActions = styled(Flex)`\n  display: flex;\n\n  @media (hover: hover) and (pointer: fine) {\n    display: none;\n  }\n`;\n\nconst DragIconButton = styled(IconButton)`\n  display: none;\n\n  @media (hover: hover) and (pointer: fine) {\n    display: flex;\n  }\n`;\n\nconst WidgetContainer = styled(Flex)`\n  @media (hover: hover) and (pointer: fine) {\n    &:hover ${WidgetActions} {\n      display: flex;\n    }\n  }\n\n  &:focus-within ${WidgetActions} {\n    display: flex;\n  }\n\n  &:focus-within ${DragIconButton} {\n    pointer-events: none;\n\n    ${({ theme }) => theme.breakpoints.medium} {\n      pointer-events: auto;\n    }\n  }\n`;\n\nexport const WidgetRoot = ({\n  title,\n  icon = PuzzlePiece,\n  children,\n  link,\n  uid,\n  findWidget,\n  deleteWidget,\n  onDragStart,\n  onDragEnd,\n  component,\n}: WidgetRootProps) => {\n  const { trackUsage } = useTracking();\n  const { formatMessage } = useIntl();\n  const Icon = icon;\n\n  const handleClickOnLink = () => {\n    trackUsage('didOpenHomeWidgetLink', { widgetUID: uid });\n  };\n\n  const handleDeleteWidget = () => {\n    deleteWidget?.(uid);\n  };\n\n  const [, drag, preview] = useDrag(\n    () => ({\n      type: 'widget',\n      item: () => {\n        onDragStart?.(uid);\n        return {\n          id: uid,\n          originalIndex: findWidget?.(uid)?.index ?? 0,\n          title,\n          icon,\n          link,\n          component,\n        };\n      },\n      collect: (monitor) => ({\n        isDragging: monitor.isDragging(),\n      }),\n      end: () => {\n        onDragEnd?.();\n      },\n    }),\n    [uid, findWidget, onDragStart, onDragEnd, title, icon, link, component]\n  );\n\n  // Suppress default drag preview\n  React.useEffect(() => {\n    preview(getEmptyImage(), { captureDraggingState: true });\n  }, [preview]);\n\n  return (\n    <WidgetContainer\n      width=\"100%\"\n      hasRadius\n      direction=\"column\"\n      alignItems=\"flex-start\"\n      background={'neutral0'}\n      borderColor={'neutral150'}\n      shadow=\"tableShadow\"\n      tag=\"section\"\n      gap={4}\n      padding={6}\n      position=\"relative\"\n      aria-labelledby={uid}\n      tabIndex={0}\n      {...{ [WIDGET_DATA_ATTRIBUTES.WIDGET_ID]: uid }}\n      style={{\n        transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',\n      }}\n    >\n      <Flex\n        direction=\"row\"\n        gap={2}\n        width=\"100%\"\n        tag=\"header\"\n        alignItems=\"center\"\n        minHeight=\"2.25rem\"\n      >\n        <Flex gap={2} marginRight=\"auto\">\n          <Icon fill=\"neutral500\" aria-hidden />\n          <Typography textColor=\"neutral500\" variant=\"sigma\" tag=\"h2\" id={uid}>\n            {formatMessage(title)}\n          </Typography>\n        </Flex>\n        {link && (\n          <Typography\n            tag={ReactRouterLink}\n            variant=\"omega\"\n            textColor=\"primary600\"\n            style={{ textDecoration: 'none' }}\n            textAlign=\"right\"\n            to={link.href}\n            onClick={handleClickOnLink}\n          >\n            {formatMessage(link.label)}\n          </Typography>\n        )}\n        <WidgetActions gap={2}>\n          <IconButton\n            variant=\"danger-light\"\n            size=\"XS\"\n            onClick={handleDeleteWidget}\n            label={formatMessage({\n              id: 'HomePage.widget.delete',\n              defaultMessage: 'Delete',\n            })}\n            cursor=\"pointer\"\n          >\n            <Trash />\n          </IconButton>\n          <DragIconButton\n            variant=\"tertiary\"\n            size=\"XS\"\n            ref={drag}\n            tabIndex={-1}\n            label={formatMessage({\n              id: 'HomePage.widget.drag',\n              defaultMessage: 'Drag to move',\n            })}\n            cursor=\"grab\"\n          >\n            <Drag />\n          </DragIconButton>\n        </WidgetActions>\n      </Flex>\n      <ScrollArea>\n        <Box width=\"100%\" height=\"261px\" overflow=\"auto\" tag=\"main\">\n          {children}\n        </Box>\n      </ScrollArea>\n    </WidgetContainer>\n  );\n};\n"],"names":["WidgetActions","styled","Flex","DragIconButton","IconButton","WidgetContainer","theme","breakpoints","medium","WidgetRoot","title","icon","PuzzlePiece","children","link","uid","findWidget","deleteWidget","onDragStart","onDragEnd","component","trackUsage","useTracking","formatMessage","useIntl","Icon","handleClickOnLink","widgetUID","handleDeleteWidget","drag","preview","useDrag","type","item","id","originalIndex","index","collect","monitor","isDragging","end","React","useEffect","getEmptyImage","captureDraggingState","_jsxs","width","hasRadius","direction","alignItems","background","borderColor","shadow","tag","gap","padding","position","aria-labelledby","tabIndex","WIDGET_DATA_ATTRIBUTES","WIDGET_ID","style","transition","minHeight","marginRight","_jsx","fill","aria-hidden","Typography","textColor","variant","ReactRouterLink","textDecoration","textAlign","to","href","onClick","label","size","defaultMessage","cursor","Trash","ref","Drag","ScrollArea","Box","height","overflow"],"mappings":"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"}