{"version":3,"file":"ActionsDrawer.mjs","sources":["../../../admin/src/components/ActionsDrawer.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { WIDTH_SIDE_NAVIGATION, createContext } from '@strapi/admin/strapi-admin';\nimport { Portal, Flex, Box, ScrollArea, IconButton } from '@strapi/design-system';\nimport { CaretDown, CaretUp } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\n/**\n * ActionsDrawer is a component used in the content manager edit view page and content history page.\n * It's a sticky banner that can expand to reveal more actions. It's used only in mobile and tablet.\n *\n * A similar component is currently in development in the design-system but it's not ready yet.\n * Using the Panels for the edit view page brought some complexity and for the moment, we decided to go with this custom implementation.\n *\n * @TODO: Replace this component with the one in the design-system when it's ready.\n */\n\n/* -------------------------------------------------------------------------------------------------\n * ActionsDrawer Context\n * -----------------------------------------------------------------------------------------------*/\n\ninterface ActionsDrawerContextValue {\n  isOpen: boolean;\n  setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;\n  hasContent: boolean;\n  hasSideNav: boolean;\n}\n\nconst [ActionsDrawerProvider, useActionsDrawer] = createContext<ActionsDrawerContextValue | null>(\n  'ActionsDrawer',\n  null\n);\n\n/* -------------------------------------------------------------------------------------------------\n * Styled Components\n * -----------------------------------------------------------------------------------------------*/\n\nconst DrawerContainer = styled(Portal)<{ $hasSideNav: boolean; $isOpen: boolean }>`\n  position: fixed;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  z-index: ${({ $isOpen }) => ($isOpen ? 4 : 2)};\n  display: flex;\n  flex-direction: column;\n  align-items: stretch;\n  justify-content: flex-end;\n\n  ${({ theme }) => theme.breakpoints.medium} {\n    z-index: 2;\n    left: ${({ $hasSideNav }) => ($hasSideNav ? WIDTH_SIDE_NAVIGATION : 0)};\n  }\n`;\n\nconst DrawerOverlay = styled(Box)<{ $isOpen: boolean; $hasSideNav: boolean }>`\n  position: fixed;\n  left: 0;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  background-color: rgba(0, 0, 0, 0.5);\n  transition: opacity ${(props) => props.theme.motion.timings['200']}\n    ${(props) => props.theme.motion.easings.easeInOutQuad};\n  opacity: ${({ $isOpen }) => ($isOpen ? 1 : 0)};\n  pointer-events: ${({ $isOpen }) => ($isOpen ? 'auto' : 'none')};\n\n  ${({ theme }) => theme.breakpoints.medium} {\n    left: ${({ $hasSideNav }) => ($hasSideNav ? WIDTH_SIDE_NAVIGATION : 0)};\n  }\n`;\n\nconst ToggleButton = styled(IconButton)`\n  padding: 0;\n  border: none;\n  background: ${({ theme }) => theme.colors.neutral200};\n  width: 3.2rem;\n  height: 3.2rem;\n  border-radius: 1.6rem;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n`;\n\nconst DrawerContent = styled(Flex)`\n  flex-direction: column;\n  align-items: stretch;\n  position: relative;\n  z-index: 1;\n  pointer-events: auto;\n`;\n\nconst DrawerContentInner = styled(ScrollArea)<{ $isOpen: boolean }>`\n  max-height: ${({ $isOpen }) =>\n    $isOpen\n      ? 'calc(100vh - 25rem)' // 25rem is arbitrary, to be able to see a bit of the content behind (navigation and header)\n      : '0'};\n  overflow: hidden;\n  transition: max-height ${(props) => props.theme.motion.timings['200']}\n    ${(props) => props.theme.motion.easings.easeInOutQuad};\n  z-index: 1;\n  pointer-events: auto;\n`;\n\n/* -------------------------------------------------------------------------------------------------\n * Root\n * -----------------------------------------------------------------------------------------------*/\n\ninterface RootProps {\n  children: React.ReactNode;\n  hasContent?: boolean;\n  hasSideNav?: boolean;\n}\n\nconst Root = ({ children, hasContent = false, hasSideNav = false }: RootProps) => {\n  const [isOpen, setIsOpen] = React.useState(false);\n\n  // Close drawer when there's no content\n  React.useEffect(() => {\n    if (!hasContent) {\n      setIsOpen(false);\n    }\n  }, [hasContent]);\n\n  return (\n    <ActionsDrawerProvider\n      isOpen={isOpen}\n      setIsOpen={setIsOpen}\n      hasContent={hasContent}\n      hasSideNav={hasSideNav}\n    >\n      <DrawerContainer $hasSideNav={hasSideNav} $isOpen={isOpen}>\n        {children}\n      </DrawerContainer>\n    </ActionsDrawerProvider>\n  );\n};\n\n/* -------------------------------------------------------------------------------------------------\n * Overlay\n * -----------------------------------------------------------------------------------------------*/\n\nconst Overlay = () => {\n  const ctx = useActionsDrawer('ActionsDrawer.Overlay', (s) => s, false);\n  const isOpen = ctx?.isOpen ?? false;\n  const hasContent = ctx?.hasContent ?? false;\n  const hasSideNav = ctx?.hasSideNav ?? false;\n  const setIsOpen = ctx?.setIsOpen;\n\n  if (!hasContent) {\n    return null;\n  }\n\n  return (\n    <DrawerOverlay\n      $isOpen={isOpen}\n      $hasSideNav={hasSideNav}\n      onClick={() => setIsOpen?.(false)}\n      data-testid=\"actions-drawer-overlay\"\n    />\n  );\n};\n\n/* -------------------------------------------------------------------------------------------------\n * Header\n * -----------------------------------------------------------------------------------------------*/\n\ninterface HeaderProps {\n  children: React.ReactNode;\n}\n\nconst Header = ({ children }: HeaderProps) => {\n  const ctx = useActionsDrawer('ActionsDrawer.Header', (s) => s, false);\n  const isOpen = ctx?.isOpen ?? false;\n  const hasContent = ctx?.hasContent ?? false;\n  const setIsOpen = ctx?.setIsOpen;\n  const { formatMessage } = useIntl();\n\n  const toggleOpen = () => {\n    setIsOpen?.((prev: boolean) => !prev);\n  };\n\n  return (\n    <DrawerContent background=\"neutral0\">\n      <Flex\n        paddingTop={3}\n        paddingBottom={3}\n        paddingLeft={4}\n        paddingRight={4}\n        gap={3}\n        borderStyle=\"solid\"\n        borderWidth={isOpen ? '1px 0' : '1px 0 0 0'}\n        borderColor=\"neutral150\"\n      >\n        <Flex flex={1} gap={2} alignItems=\"center\" overflow=\"hidden\">\n          {children}\n        </Flex>\n        {hasContent && (\n          <ToggleButton\n            onClick={toggleOpen}\n            label={\n              isOpen\n                ? formatMessage({\n                    id: 'content-manager.actions-drawer.close',\n                    defaultMessage: 'Close more actions',\n                  })\n                : formatMessage({\n                    id: 'content-manager.actions-drawer.open',\n                    defaultMessage: 'Open more actions',\n                  })\n            }\n          >\n            {isOpen ? <CaretUp fill=\"neutral600\" /> : <CaretDown fill=\"neutral600\" />}\n          </ToggleButton>\n        )}\n      </Flex>\n    </DrawerContent>\n  );\n};\n\n/* -------------------------------------------------------------------------------------------------\n * Content\n * -----------------------------------------------------------------------------------------------*/\n\ninterface ContentProps {\n  children: React.ReactNode;\n}\n\nconst Content = ({ children }: ContentProps) => {\n  const ctx = useActionsDrawer('ActionsDrawer.Content', (s) => s, false);\n  const isOpen = ctx?.isOpen ?? false;\n\n  return (\n    <DrawerContentInner $isOpen={isOpen}>\n      <Flex\n        direction=\"column\"\n        alignItems=\"stretch\"\n        justifyContent=\"flex-start\"\n        padding={{ initial: 4, large: 0 }}\n        background=\"neutral0\"\n      >\n        {children}\n      </Flex>\n    </DrawerContentInner>\n  );\n};\n\n/* -------------------------------------------------------------------------------------------------\n * ActionsDrawer\n * -----------------------------------------------------------------------------------------------*/\n\nconst ActionsDrawer = {\n  Root,\n  Overlay,\n  Header,\n  Content,\n};\n\nexport { ActionsDrawer, useActionsDrawer };\n"],"names":["ActionsDrawerProvider","useActionsDrawer","createContext","DrawerContainer","styled","Portal","$isOpen","theme","breakpoints","medium","$hasSideNav","WIDTH_SIDE_NAVIGATION","DrawerOverlay","Box","props","motion","timings","easings","easeInOutQuad","ToggleButton","IconButton","colors","neutral200","DrawerContent","Flex","DrawerContentInner","ScrollArea","Root","children","hasContent","hasSideNav","isOpen","setIsOpen","React","useState","useEffect","_jsx","Overlay","ctx","s","onClick","data-testid","Header","formatMessage","useIntl","toggleOpen","prev","background","_jsxs","paddingTop","paddingBottom","paddingLeft","paddingRight","gap","borderStyle","borderWidth","borderColor","flex","alignItems","overflow","label","id","defaultMessage","CaretUp","fill","CaretDown","Content","direction","justifyContent","padding","initial","large","ActionsDrawer"],"mappings":"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"}