@strapi/admin 5.29.0 → 5.30.1

package/dist/admin/admin/src/components/GuidedTour/Steps/ContentTypeBuilderSteps.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ContentTypeBuilderSteps.mjs","sources":["../../../../../../../admin/src/components/GuidedTour/Steps/ContentTypeBuilderSteps.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { UID } from '@strapi/types';\nimport { useParams } from 'react-router-dom';\n\nimport { useAIAvailability } from '../../../hooks/useAIAvailability';\nimport { useGetGuidedTourMetaQuery } from '../../../services/admin';\nimport { CompletedActions, useGuidedTour } from '../Context';\nimport { tours, type StepContentProps } from '../Tours';\nimport { GUIDED_TOUR_REQUIRED_ACTIONS } from '../utils/constants';\n\nimport { GotItAction, StepCount, DefaultActions, DefaultActionsProps } from './Step';\n\nconst ContentTypeBuilderActions = ({\n  ...props\n}: Omit<DefaultActionsProps, 'tourName'> & { children?: React.ReactNode }) => {\n  const state = useGuidedTour('ContentTypeBuilderActions', (s) => s.state);\n  const dispatch = useGuidedTour('ContentTypeBuilderActions', (s) => s.dispatch);\n\n  const isAIEnabled = useAIAvailability();\n\n  const currentStepOffset = state.tours.contentTypeBuilder.currentStep + 1;\n  const displayedCurrentStep = (() => {\n    if (!isAIEnabled && currentStepOffset > contentTypeBuilderStepsAI.length) {\n      // If AI is not enabled, we remove the AI steps\n      return currentStepOffset - contentTypeBuilderStepsAI.length;\n    } else if (isAIEnabled && currentStepOffset > contentTypeBuilderStepsNoAI.length) {\n      // If AI is enabled, we remove the non-AI steps\n      return currentStepOffset - contentTypeBuilderStepsNoAI.length;\n    }\n\n    return currentStepOffset;\n  })();\n\n  // When AI is enabled, we subtract the no AI steps and vice versa\n  const displayedTourLength = isAIEnabled\n    ? tours.contentTypeBuilder._meta.displayedStepCount - contentTypeBuilderStepsNoAI.length\n    : tours.contentTypeBuilder._meta.displayedStepCount - contentTypeBuilderStepsAI.length;\n\n  const handleNextStep = () => {\n    const currentStep = state.tours.contentTypeBuilder.currentStep;\n\n    if (!isAIEnabled && currentStep === 0) {\n      // If AI is disabled, after Introduction (step 0), skip AI steps and go to first NoAI step\n      const nextStep = 1 + contentTypeBuilderStepsAI.length; // Skip AI steps\n      dispatch({\n        type: 'go_to_step',\n        payload: { tourName: 'contentTypeBuilder', step: nextStep },\n      });\n    } else if (isAIEnabled && currentStep === contentTypeBuilderStepsAI.length) {\n      // If AI is enabled, after AI steps, skip NoAI steps and go to Save/Finish\n      const nextStep = 1 + contentTypeBuilderStepsAI.length + contentTypeBuilderStepsNoAI.length;\n      dispatch({\n        type: 'go_to_step',\n        payload: { tourName: 'contentTypeBuilder', step: nextStep },\n      });\n    } else {\n      // Normal step progression\n      dispatch({\n        type: 'next_step',\n        payload: 'contentTypeBuilder',\n      });\n    }\n  };\n\n  const handlePreviousStep = () => {\n    const currentStep = state.tours.contentTypeBuilder.currentStep;\n\n    if (!isAIEnabled && currentStep === 1 + contentTypeBuilderStepsAI.length) {\n      // If AI is disabled and we're at the first NoAI step, go back to Introduction (step 0)\n      dispatch({\n        type: 'go_to_step',\n        payload: { tourName: 'contentTypeBuilder', step: 0 },\n      });\n    } else if (\n      isAIEnabled &&\n      currentStep === 1 + contentTypeBuilderStepsAI.length + contentTypeBuilderStepsNoAI.length\n    ) {\n      // If AI is enabled and we're at Save/Finish, go back to last AI step\n      dispatch({\n        type: 'go_to_step',\n        payload: { tourName: 'contentTypeBuilder', step: contentTypeBuilderStepsAI.length },\n      });\n    } else {\n      // Normal step progression\n      dispatch({\n        type: 'previous_step',\n        payload: 'contentTypeBuilder',\n      });\n    }\n  };\n\n  return (\n    <>\n      <StepCount\n        tourName=\"contentTypeBuilder\"\n        displayedCurrentStep={displayedCurrentStep}\n        displayedTourLength={displayedTourLength}\n      />\n      {props.children || (\n        <DefaultActions\n          tourName=\"contentTypeBuilder\"\n          onNextStep={handleNextStep}\n          onPreviousStep={handlePreviousStep}\n          {...props}\n        />\n      )}\n    </>\n  );\n};\n\n/* -------------------------------------------------------------------------------------------------\n * Step Components\n * -----------------------------------------------------------------------------------------------*/\n\nconst Introduction = ({ Step }: StepContentProps) => (\n  <Step.Root sideOffset={33} withArrow={false}>\n    <Step.Title\n      id=\"tours.contentTypeBuilder.Introduction.title\"\n      defaultMessage=\"Content-Type Builder\"\n    />\n    <Step.Content\n      id=\"tours.contentTypeBuilder.Introduction.content\"\n      defaultMessage=\"Create and manage your content structure with collection types, single types and components.\"\n    />\n    <Step.Actions>\n      <ContentTypeBuilderActions showSkip />\n    </Step.Actions>\n  </Step.Root>\n);\n\nconst AIChat = ({ Step }: StepContentProps) => (\n  <Step.Root side=\"left\">\n    <Step.Title id=\"tours.contentTypeBuilder.AIChat.title\" defaultMessage=\"Time to get started!\" />\n    <Step.Content\n      id=\"tours.contentTypeBuilder.AIChat.content\"\n      defaultMessage=\"<p>If you have any questions about the Content-Type Builder or Strapi ask them here.</p><p>Strapi AI can generate schemas tailored to your needs. Ask for exactly what you want, for example:<ul><li>Date picker</li><li>Email and password fields</li><li>Media of any type</li><li>UIDs</li></ul></p><p>Don’t be shy, try it out !</p>\"\n    />\n    <Step.Actions>\n      <ContentTypeBuilderActions showPrevious />\n    </Step.Actions>\n  </Step.Root>\n);\n\nconst CollectionTypes = ({ Step }: StepContentProps) => (\n  <Step.Root side=\"right\" sideOffset={16}>\n    <Step.Title\n      id=\"tours.contentTypeBuilder.CollectionTypes.title\"\n      defaultMessage=\"Collection Types\"\n    />\n    <Step.Content\n      id=\"tours.contentTypeBuilder.CollectionTypes.content\"\n      defaultMessage=\"A content structure that can manage multiple entries, such as articles or products.\"\n    />\n    <Step.Actions>\n      <ContentTypeBuilderActions showPrevious />\n    </Step.Actions>\n  </Step.Root>\n);\n\nconst SingleTypes = ({ Step }: StepContentProps) => (\n  <Step.Root side=\"right\" sideOffset={16}>\n    <Step.Title id=\"tours.contentTypeBuilder.SingleTypes.title\" defaultMessage=\"Single Types\" />\n    <Step.Content\n      id=\"tours.contentTypeBuilder.SingleTypes.content\"\n      defaultMessage=\"A content structure that can manage a single entry, such as a homepage or a header.\"\n    />\n    <Step.Actions>\n      <ContentTypeBuilderActions showPrevious />\n    </Step.Actions>\n  </Step.Root>\n);\n\nconst Components = ({ Step }: StepContentProps) => (\n  <Step.Root side=\"right\" sideOffset={16}>\n    <Step.Title id=\"tours.contentTypeBuilder.Components.title\" defaultMessage=\"Components\" />\n    <Step.Content\n      id=\"tours.contentTypeBuilder.Components.content\"\n      defaultMessage=\"A reusable content structure that can be used across multiple content types, such as buttons, sliders or cards.\"\n    />\n    <Step.Actions>\n      <ContentTypeBuilderActions showPrevious />\n    </Step.Actions>\n  </Step.Root>\n);\n\nconst YourTurn = ({ Step }: StepContentProps) => (\n  <Step.Root side=\"right\" sideOffset={16}>\n    <Step.Title id=\"tours.contentTypeBuilder.YourTurn.title\" defaultMessage=\"Your turn\" />\n    <Step.Content\n      id=\"tours.contentTypeBuilder.YourTurn.content\"\n      defaultMessage=\"Create a collection type or single type and configure it.\"\n    />\n    <Step.Actions>\n      <ContentTypeBuilderActions showPrevious />\n    </Step.Actions>\n  </Step.Root>\n);\n\nconst AddFields = ({ Step, dispatch }: StepContentProps) => (\n  <Step.Root side=\"bottom\">\n    <Step.Title\n      id=\"tours.contentTypeBuilder.AddFields.title\"\n      defaultMessage=\"Don't forget to add a field to your content type\"\n    />\n    <Step.Content\n      id=\"tours.contentTypeBuilder.AddFields.content\"\n      defaultMessage=\"Add the fields your content needs such as text, media and relations.\"\n    />\n    <Step.Actions>\n      <ContentTypeBuilderActions showPrevious>\n        <GotItAction\n          onClick={() => dispatch({ type: 'next_step', payload: 'contentTypeBuilder' })}\n        />\n      </ContentTypeBuilderActions>\n    </Step.Actions>\n  </Step.Root>\n);\n\nconst Save = ({ Step, dispatch }: StepContentProps) => (\n  <Step.Root side=\"right\">\n    <Step.Title id=\"tours.contentTypeBuilder.Save.title\" defaultMessage=\"Save before you leave!\" />\n    <Step.Content\n      id=\"tours.contentTypeBuilder.Save.content\"\n      defaultMessage=\"Save the changes you made here before leaving this page.\"\n    />\n    <Step.Actions>\n      <ContentTypeBuilderActions showPrevious>\n        <GotItAction\n          onClick={() => {\n            // Ensure the completed action is removed\n            // in the event the user already has a schema but is still doing the tour\n            dispatch({\n              type: 'remove_completed_action',\n              payload: GUIDED_TOUR_REQUIRED_ACTIONS.contentTypeBuilder.createSchema,\n            });\n            dispatch({ type: 'next_step', payload: 'contentTypeBuilder' });\n          }}\n        />\n      </ContentTypeBuilderActions>\n    </Step.Actions>\n  </Step.Root>\n);\n\nconst Finish = ({ Step }: StepContentProps) => {\n  const { data: guidedTourMeta } = useGetGuidedTourMetaQuery();\n  const { '*': routeParams } = useParams();\n  // Get the uid from the params\n  const uid = routeParams?.split('/').pop();\n  const contentType = uid ? guidedTourMeta?.data?.schemas?.[uid as UID.ContentType] : null;\n  const contentTypeKindDictionary = {\n    collectionType: 'collection-types',\n    singleType: 'single-types',\n  };\n\n  const to = contentType\n    ? `/content-manager/${contentTypeKindDictionary[contentType.kind]}/${contentType.uid}`\n    : '/content-manager';\n\n  return (\n    <Step.Root side=\"right\">\n      <Step.Title\n        id=\"tours.contentTypeBuilder.Finish.title\"\n        defaultMessage=\"First Step: Done! 🎉\"\n      />\n      <Step.Content\n        id=\"tours.contentTypeBuilder.Finish.content\"\n        defaultMessage=\"You've built your first content type! Now head over to the Content Manager to start adding entries!\"\n      />\n      <Step.Actions showStepCount={false} showPrevious={false} to={to} />\n    </Step.Root>\n  );\n};\n\n/* -------------------------------------------------------------------------------------------------\n * Steps\n * -----------------------------------------------------------------------------------------------*/\nconst contentTypeBuilderStepsAI = [\n  {\n    name: 'AIChat',\n    content: AIChat,\n  },\n];\n\nconst contentTypeBuilderStepsNoAI = [\n  {\n    name: 'CollectionTypes',\n    content: CollectionTypes,\n  },\n  {\n    name: 'SingleTypes',\n    content: SingleTypes,\n  },\n  {\n    name: 'Components',\n    content: Components,\n  },\n  {\n    name: 'YourTurn',\n    content: YourTurn,\n  },\n  {\n    name: 'AddFields',\n    content: AddFields,\n  },\n];\n\nexport const contentTypeBuilderSteps = [\n  {\n    name: 'Introduction',\n    content: Introduction,\n  },\n  ...contentTypeBuilderStepsAI,\n  ...contentTypeBuilderStepsNoAI,\n  {\n    name: 'Save',\n    when: (completedActions: CompletedActions) =>\n      completedActions.includes(GUIDED_TOUR_REQUIRED_ACTIONS.contentTypeBuilder.addField),\n    content: Save,\n  },\n  {\n    name: 'Finish',\n    content: Finish,\n    excludeFromStepCount: true,\n    when: (completedActions: CompletedActions) =>\n      completedActions.includes(GUIDED_TOUR_REQUIRED_ACTIONS.contentTypeBuilder.createSchema),\n  },\n] as const;\n"],"names":["ContentTypeBuilderActions","props","state","useGuidedTour","s","dispatch","isAIEnabled","useAIAvailability","currentStepOffset","tours","contentTypeBuilder","currentStep","displayedCurrentStep","contentTypeBuilderStepsAI","length","contentTypeBuilderStepsNoAI","displayedTourLength","_meta","displayedStepCount","handleNextStep","nextStep","type","payload","tourName","step","handlePreviousStep","_jsxs","_Fragment","_jsx","StepCount","children","DefaultActions","onNextStep","onPreviousStep","Introduction","Step","Root","sideOffset","withArrow","Title","id","defaultMessage","Content","Actions","showSkip","AIChat","side","showPrevious","CollectionTypes","SingleTypes","Components","YourTurn","AddFields","GotItAction","onClick","Save","GUIDED_TOUR_REQUIRED_ACTIONS","createSchema","Finish","data","guidedTourMeta","useGetGuidedTourMetaQuery","routeParams","useParams","uid","split","pop","contentType","schemas","contentTypeKindDictionary","collectionType","singleType","to","kind","showStepCount","name","content","contentTypeBuilderSteps","when","completedActions","includes","addField","excludeFromStepCount"],"mappings":"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"}
+{"version":3,"file":"ContentTypeBuilderSteps.mjs","sources":["../../../../../../../admin/src/components/GuidedTour/Steps/ContentTypeBuilderSteps.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { UID } from '@strapi/types';\nimport { useParams } from 'react-router-dom';\n\nimport { useAIAvailability } from '../../../hooks/useAIAvailability';\nimport { useGetGuidedTourMetaQuery } from '../../../services/admin';\nimport { CompletedActions, useGuidedTour } from '../Context';\nimport { tours, type StepContentProps } from '../Tours';\nimport { GUIDED_TOUR_REQUIRED_ACTIONS } from '../utils/constants';\n\nimport { GotItAction, StepCount, DefaultActions, DefaultActionsProps } from './Step';\n\nconst ContentTypeBuilderActions = ({\n  ...props\n}: Omit<DefaultActionsProps, 'tourName'> & { children?: React.ReactNode }) => {\n  const state = useGuidedTour('ContentTypeBuilderActions', (s) => s.state);\n  const dispatch = useGuidedTour('ContentTypeBuilderActions', (s) => s.dispatch);\n\n  const isAIEnabled = useAIAvailability();\n\n  const currentStepOffset = state.tours.contentTypeBuilder.currentStep + 1;\n  const displayedCurrentStep = (() => {\n    if (!isAIEnabled && currentStepOffset > contentTypeBuilderStepsAI.length) {\n      // If AI is not enabled, we remove the AI steps\n      return currentStepOffset - contentTypeBuilderStepsAI.length;\n    } else if (isAIEnabled && currentStepOffset > contentTypeBuilderStepsNoAI.length) {\n      // If AI is enabled, we remove the non-AI steps\n      return currentStepOffset - contentTypeBuilderStepsNoAI.length;\n    }\n\n    return currentStepOffset;\n  })();\n\n  // When AI is enabled, we subtract the no AI steps and vice versa\n  const displayedTourLength = isAIEnabled\n    ? tours.contentTypeBuilder._meta.displayedStepCount - contentTypeBuilderStepsNoAI.length\n    : tours.contentTypeBuilder._meta.displayedStepCount - contentTypeBuilderStepsAI.length;\n\n  const handleNextStep = () => {\n    const currentStep = state.tours.contentTypeBuilder.currentStep;\n\n    if (!isAIEnabled && currentStep === 0) {\n      // If AI is disabled, after Introduction (step 0), skip AI steps and go to first NoAI step\n      const nextStep = 1 + contentTypeBuilderStepsAI.length; // Skip AI steps\n      dispatch({\n        type: 'go_to_step',\n        payload: { tourName: 'contentTypeBuilder', step: nextStep },\n      });\n    } else if (isAIEnabled && currentStep === contentTypeBuilderStepsAI.length) {\n      // If AI is enabled, after AI steps, skip NoAI steps and go to Save/Finish\n      const nextStep = 1 + contentTypeBuilderStepsAI.length + contentTypeBuilderStepsNoAI.length;\n      dispatch({\n        type: 'go_to_step',\n        payload: { tourName: 'contentTypeBuilder', step: nextStep },\n      });\n    } else {\n      // Normal step progression\n      dispatch({\n        type: 'next_step',\n        payload: 'contentTypeBuilder',\n      });\n    }\n  };\n\n  const handlePreviousStep = () => {\n    const currentStep = state.tours.contentTypeBuilder.currentStep;\n\n    if (!isAIEnabled && currentStep === 1 + contentTypeBuilderStepsAI.length) {\n      // If AI is disabled and we're at the first NoAI step, go back to Introduction (step 0)\n      dispatch({\n        type: 'go_to_step',\n        payload: { tourName: 'contentTypeBuilder', step: 0 },\n      });\n    } else if (\n      isAIEnabled &&\n      currentStep === 1 + contentTypeBuilderStepsAI.length + contentTypeBuilderStepsNoAI.length\n    ) {\n      // If AI is enabled and we're at Save/Finish, go back to last AI step\n      dispatch({\n        type: 'go_to_step',\n        payload: { tourName: 'contentTypeBuilder', step: contentTypeBuilderStepsAI.length },\n      });\n    } else {\n      // Normal step progression\n      dispatch({\n        type: 'previous_step',\n        payload: 'contentTypeBuilder',\n      });\n    }\n  };\n\n  return (\n    <>\n      <StepCount\n        tourName=\"contentTypeBuilder\"\n        displayedCurrentStep={displayedCurrentStep}\n        displayedTourLength={displayedTourLength}\n      />\n      {props.children || (\n        <DefaultActions\n          tourName=\"contentTypeBuilder\"\n          onNextStep={handleNextStep}\n          onPreviousStep={handlePreviousStep}\n          {...props}\n        />\n      )}\n    </>\n  );\n};\n\n/* -------------------------------------------------------------------------------------------------\n * Step Components\n * -----------------------------------------------------------------------------------------------*/\n\nconst Introduction = ({ Step }: StepContentProps) => (\n  <Step.Root sideOffset={33} withArrow={false}>\n    <Step.Title\n      id=\"tours.contentTypeBuilder.Introduction.title\"\n      defaultMessage=\"Content-Type Builder\"\n    />\n    <Step.Content\n      id=\"tours.contentTypeBuilder.Introduction.content\"\n      defaultMessage=\"Create and manage your content structure with collection types, single types and components.\"\n    />\n    <Step.Actions>\n      <ContentTypeBuilderActions showSkip />\n    </Step.Actions>\n  </Step.Root>\n);\n\nconst AIChat = ({ Step }: StepContentProps) => (\n  <Step.Root side=\"left\">\n    <Step.Title id=\"tours.contentTypeBuilder.AIChat.title\" defaultMessage=\"Time to get started!\" />\n    <Step.Content\n      id=\"tours.contentTypeBuilder.AIChat.content\"\n      defaultMessage=\"<p>If you have any questions about the Content-Type Builder or Strapi ask them here.</p><p>Strapi AI can generate schemas tailored to your needs. Ask for exactly what you want, for example:<ul><li>Date picker</li><li>Email and password fields</li><li>Media of any type</li><li>UIDs</li></ul></p><p>Don’t be shy, try it out !</p>\"\n    />\n    <Step.Actions>\n      <ContentTypeBuilderActions showPrevious />\n    </Step.Actions>\n  </Step.Root>\n);\n\nconst CollectionTypes = ({ Step }: StepContentProps) => (\n  <Step.Root side=\"right\" sideOffset={16}>\n    <Step.Title\n      id=\"tours.contentTypeBuilder.CollectionTypes.title\"\n      defaultMessage=\"Collection Types\"\n    />\n    <Step.Content\n      id=\"tours.contentTypeBuilder.CollectionTypes.content\"\n      defaultMessage=\"A content structure that can manage multiple entries, such as articles or products.\"\n    />\n    <Step.Actions>\n      <ContentTypeBuilderActions showPrevious />\n    </Step.Actions>\n  </Step.Root>\n);\n\nconst SingleTypes = ({ Step }: StepContentProps) => (\n  <Step.Root side=\"right\" sideOffset={16}>\n    <Step.Title id=\"tours.contentTypeBuilder.SingleTypes.title\" defaultMessage=\"Single Types\" />\n    <Step.Content\n      id=\"tours.contentTypeBuilder.SingleTypes.content\"\n      defaultMessage=\"A content structure that can manage a single entry, such as a homepage or a header.\"\n    />\n    <Step.Actions>\n      <ContentTypeBuilderActions showPrevious />\n    </Step.Actions>\n  </Step.Root>\n);\n\nconst Components = ({ Step }: StepContentProps) => (\n  <Step.Root side=\"right\" sideOffset={16}>\n    <Step.Title id=\"tours.contentTypeBuilder.Components.title\" defaultMessage=\"Components\" />\n    <Step.Content\n      id=\"tours.contentTypeBuilder.Components.content\"\n      defaultMessage=\"A reusable content structure that can be used across multiple content types, such as buttons, sliders or cards.\"\n    />\n    <Step.Actions>\n      <ContentTypeBuilderActions showPrevious />\n    </Step.Actions>\n  </Step.Root>\n);\n\nconst YourTurn = ({ Step }: StepContentProps) => (\n  <Step.Root side=\"right\" sideOffset={16}>\n    <Step.Title id=\"tours.contentTypeBuilder.YourTurn.title\" defaultMessage=\"Your turn\" />\n    <Step.Content\n      id=\"tours.contentTypeBuilder.YourTurn.content\"\n      defaultMessage=\"Create a collection type or single type and configure it.\"\n    />\n    <Step.Actions>\n      <ContentTypeBuilderActions showPrevious />\n    </Step.Actions>\n  </Step.Root>\n);\n\nconst AddFields = ({ Step, dispatch }: StepContentProps) => (\n  <Step.Root side=\"bottom\">\n    <Step.Title\n      id=\"tours.contentTypeBuilder.AddFields.title\"\n      defaultMessage=\"Don't forget to add a field to your content type\"\n    />\n    <Step.Content\n      id=\"tours.contentTypeBuilder.AddFields.content\"\n      defaultMessage=\"Add the fields your content needs such as text, media and relations.\"\n    />\n    <Step.Actions>\n      <ContentTypeBuilderActions showPrevious>\n        <GotItAction\n          onClick={() => dispatch({ type: 'next_step', payload: 'contentTypeBuilder' })}\n        />\n      </ContentTypeBuilderActions>\n    </Step.Actions>\n  </Step.Root>\n);\n\nconst Save = ({ Step, dispatch }: StepContentProps) => (\n  <Step.Root side=\"right\">\n    <Step.Title id=\"tours.contentTypeBuilder.Save.title\" defaultMessage=\"Save before you leave!\" />\n    <Step.Content\n      id=\"tours.contentTypeBuilder.Save.content\"\n      defaultMessage=\"Save the changes you made here before leaving this page.\"\n    />\n    <Step.Actions>\n      <ContentTypeBuilderActions showPrevious>\n        <GotItAction\n          onClick={() => {\n            // Ensure the completed action is removed\n            // in the event the user already has a schema but is still doing the tour\n            dispatch({\n              type: 'remove_completed_action',\n              payload: GUIDED_TOUR_REQUIRED_ACTIONS.contentTypeBuilder.createSchema,\n            });\n            dispatch({ type: 'next_step', payload: 'contentTypeBuilder' });\n          }}\n        />\n      </ContentTypeBuilderActions>\n    </Step.Actions>\n  </Step.Root>\n);\n\nconst Finish = ({ Step }: StepContentProps) => {\n  const { data: guidedTourMeta } = useGetGuidedTourMetaQuery();\n  const { '*': routeParams } = useParams();\n  // Get the uid from the params\n  const uid = routeParams?.split('/').pop();\n  const contentType = uid ? guidedTourMeta?.data?.schemas?.[uid as UID.ContentType] : null;\n  const contentTypeKindDictionary = {\n    collectionType: 'collection-types',\n    singleType: 'single-types',\n  };\n\n  const to = contentType\n    ? `/content-manager/${contentTypeKindDictionary[contentType.kind]}/${contentType.uid}`\n    : '/content-manager';\n\n  return (\n    <Step.Root side=\"right\">\n      <Step.Title\n        id=\"tours.contentTypeBuilder.Finish.title\"\n        defaultMessage=\"First Step: Done! 🎉\"\n      />\n      <Step.Content\n        id=\"tours.contentTypeBuilder.Finish.content\"\n        defaultMessage=\"You've built your first content type! Now head over to the Content Manager to start adding entries!\"\n      />\n      <Step.Actions showStepCount={false} showPrevious={false} to={to} />\n    </Step.Root>\n  );\n};\n\n/* -------------------------------------------------------------------------------------------------\n * Steps\n * -----------------------------------------------------------------------------------------------*/\nconst contentTypeBuilderStepsAI = [\n  {\n    name: 'AIChat',\n    content: AIChat,\n  },\n];\n\nconst contentTypeBuilderStepsNoAI = [\n  {\n    name: 'CollectionTypes',\n    content: CollectionTypes,\n  },\n  {\n    name: 'SingleTypes',\n    content: SingleTypes,\n  },\n  {\n    name: 'Components',\n    content: Components,\n  },\n  {\n    name: 'YourTurn',\n    content: YourTurn,\n  },\n  {\n    name: 'AddFields',\n    content: AddFields,\n  },\n];\n\nexport const contentTypeBuilderSteps = [\n  {\n    name: 'Introduction',\n    content: Introduction,\n  },\n  ...contentTypeBuilderStepsAI,\n  ...contentTypeBuilderStepsNoAI,\n  {\n    name: 'Save',\n    when: (completedActions: CompletedActions) =>\n      completedActions.includes(GUIDED_TOUR_REQUIRED_ACTIONS.contentTypeBuilder.addField),\n    content: Save,\n  },\n  {\n    name: 'Finish',\n    content: Finish,\n    excludeFromStepCount: true,\n    when: (completedActions: CompletedActions) =>\n      completedActions.includes(GUIDED_TOUR_REQUIRED_ACTIONS.contentTypeBuilder.createSchema),\n  },\n] as const;\n"],"names":["ContentTypeBuilderActions","props","state","useGuidedTour","s","dispatch","isAIEnabled","useAIAvailability","currentStepOffset","tours","contentTypeBuilder","currentStep","displayedCurrentStep","contentTypeBuilderStepsAI","length","contentTypeBuilderStepsNoAI","displayedTourLength","_meta","displayedStepCount","handleNextStep","nextStep","type","payload","tourName","step","handlePreviousStep","_jsxs","_Fragment","_jsx","StepCount","children","DefaultActions","onNextStep","onPreviousStep","Introduction","Step","Root","sideOffset","withArrow","Title","id","defaultMessage","Content","Actions","showSkip","AIChat","side","showPrevious","CollectionTypes","SingleTypes","Components","YourTurn","AddFields","GotItAction","onClick","Save","GUIDED_TOUR_REQUIRED_ACTIONS","createSchema","Finish","data","guidedTourMeta","useGetGuidedTourMetaQuery","routeParams","useParams","uid","split","pop","contentType","schemas","contentTypeKindDictionary","collectionType","singleType","to","kind","showStepCount","name","content","contentTypeBuilderSteps","when","completedActions","includes","addField","excludeFromStepCount"],"mappings":"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"}

package/dist/admin/admin/src/components/GuidedTour/Steps/Step.js.map

@@ -1 +1 @@
-{"version":3,"file":"Step.js","sources":["../../../../../../../admin/src/components/GuidedTour/Steps/Step.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport {\n  Popover,\n  Box,\n  Flex,\n  Button,\n  Typography,\n  LinkButton,\n  FlexProps,\n} from '@strapi/design-system';\nimport { FormattedMessage, useIntl, type MessageDescriptor } from 'react-intl';\nimport { To, NavLink } from 'react-router-dom';\nimport { styled } from 'styled-components';\n\nimport { useTracking } from '../../../features/Tracking';\nimport { useGuidedTour, type ValidTourName } from '../Context';\nimport { tours } from '../Tours';\n\n/* -------------------------------------------------------------------------------------------------\n * Common Step Components\n * -----------------------------------------------------------------------------------------------*/\n\nconst StepCount = ({\n  tourName,\n  displayedCurrentStep,\n  displayedTourLength,\n}: {\n  tourName: ValidTourName;\n  displayedCurrentStep?: number;\n  displayedTourLength?: number;\n}) => {\n  const state = useGuidedTour('GuidedTourPopover', (s) => s.state);\n  const currentStep = displayedCurrentStep ?? state.tours[tourName].currentStep + 1;\n  const displayedStepCount = displayedTourLength ?? tours[tourName]._meta.displayedStepCount;\n\n  return (\n    <Typography variant=\"omega\" fontSize=\"12px\">\n      <FormattedMessage\n        id=\"tours.stepCount\"\n        defaultMessage=\"Step {currentStep} of {tourLength}\"\n        values={{ currentStep, tourLength: displayedStepCount }}\n      />\n    </Typography>\n  );\n};\n\nconst GotItAction = ({ onClick }: { onClick: () => void }) => {\n  return (\n    <Button onClick={onClick}>\n      <FormattedMessage id=\"tours.gotIt\" defaultMessage=\"Got it\" />\n    </Button>\n  );\n};\n\nexport type DefaultActionsProps = {\n  showSkip?: boolean;\n  showPrevious?: boolean;\n  to?: To;\n  onNextStep?: () => void;\n  onPreviousStep?: () => void;\n  tourName: ValidTourName;\n};\nconst DefaultActions = ({\n  showSkip,\n  showPrevious,\n  to,\n  tourName,\n  onNextStep,\n  onPreviousStep,\n}: DefaultActionsProps) => {\n  const { trackUsage } = useTracking();\n  const dispatch = useGuidedTour('GuidedTourPopover', (s) => s.dispatch);\n  const state = useGuidedTour('GuidedTourPopover', (s) => s.state);\n  const currentStep = state.tours[tourName].currentStep + 1;\n  const actualTourLength = tours[tourName]._meta.totalStepCount;\n\n  const handleSkip = () => {\n    trackUsage('didSkipGuidedTour', { name: tourName });\n    dispatch({ type: 'skip_tour', payload: tourName });\n  };\n\n  const handleNextStep = () => {\n    if (currentStep === actualTourLength) {\n      trackUsage('didCompleteGuidedTour', { name: tourName });\n    }\n\n    if (onNextStep) {\n      onNextStep();\n    } else {\n      dispatch({ type: 'next_step', payload: tourName });\n    }\n  };\n\n  const handlePreviousStep = () => {\n    if (onPreviousStep) {\n      onPreviousStep();\n    } else {\n      dispatch({ type: 'previous_step', payload: tourName });\n    }\n  };\n\n  return (\n    <Flex gap={2}>\n      {showSkip && (\n        <Button variant=\"tertiary\" onClick={handleSkip}>\n          <FormattedMessage id=\"tours.skip\" defaultMessage=\"Skip\" />\n        </Button>\n      )}\n      {!showSkip && showPrevious && (\n        <Button variant=\"tertiary\" onClick={handlePreviousStep}>\n          <FormattedMessage id=\"tours.previous\" defaultMessage=\"Previous\" />\n        </Button>\n      )}\n      {to ? (\n        <LinkButton tag={NavLink} to={to} onClick={handleNextStep}>\n          <FormattedMessage id=\"tours.next\" defaultMessage=\"Next\" />\n        </LinkButton>\n      ) : (\n        <Button onClick={handleNextStep}>\n          <FormattedMessage id=\"tours.next\" defaultMessage=\"Next\" />\n        </Button>\n      )}\n    </Flex>\n  );\n};\n\n/* -------------------------------------------------------------------------------------------------\n * Step factory\n * -----------------------------------------------------------------------------------------------*/\n\ntype WithChildren = {\n  children: React.ReactNode;\n  id?: never;\n  defaultMessage?: never;\n};\n\ntype WithIntl = {\n  children?: undefined;\n  id: MessageDescriptor['id'];\n  defaultMessage: MessageDescriptor['defaultMessage'];\n  withArrow?: boolean;\n};\n\ntype WithActionsChildren = {\n  children: React.ReactNode;\n  showStepCount?: boolean;\n  showSkip?: boolean;\n  showPrevious?: boolean;\n};\n\ntype WithActionsProps = {\n  children?: undefined;\n  showStepCount?: boolean;\n  showSkip?: boolean;\n  showPrevious?: boolean;\n};\n\ntype StepProps = WithChildren | WithIntl;\ntype ActionsProps = WithActionsChildren | WithActionsProps;\n\ntype Step = {\n  Root: React.ForwardRefExoticComponent<\n    React.ComponentProps<typeof Popover.Content> & { withArrow?: boolean }\n  >;\n  Title: (props: StepProps) => React.ReactNode;\n  Content: (\n    props: StepProps & {\n      values?: Record<string, React.ReactNode | ((chunks: React.ReactNode) => React.ReactNode)>;\n    }\n  ) => React.ReactNode;\n  Actions: (props: ActionsProps & { to?: string } & FlexProps) => React.ReactNode;\n};\n\nconst ActionsContainer = styled(Flex)`\n  border-top: ${({ theme }) => `1px solid ${theme.colors.neutral150}`};\n`;\n\nconst ContentContainer = styled(Box)`\n  p {\n    margin-top: ${({ theme }) => theme.spaces[5]};\n  }\n  ul {\n    list-style-type: disc;\n    padding-left: ${({ theme }) => theme.spaces[4]};\n  }\n`;\n\n/**\n * TODO:\n * We should probably move all arrow styles + svg to the DS\n */\nconst PopoverArrow = styled(Popover.Arrow)`\n  fill: ${({ theme }) => theme.colors.neutral0};\n  transform: translateY(-16px) rotate(-90deg);\n`;\n\nconst createStepComponents = (tourName: ValidTourName): Step => ({\n  Root: React.forwardRef(({ withArrow = true, ...props }, ref) => {\n    return (\n      <Popover.Content\n        ref={ref}\n        aria-labelledby=\"guided-tour-title\"\n        side=\"top\"\n        align=\"center\"\n        style={{ border: 'none' }}\n        onClick={(e) => e.stopPropagation()}\n        {...props}\n      >\n        {withArrow && (\n          <PopoverArrow asChild>\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              width=\"23\"\n              height=\"25\"\n              viewBox=\"0 0 23 25\"\n              fill=\"none\"\n            >\n              <path d=\"M11 24.5L1.82843 15.3284C0.266332 13.7663 0.26633 11.2337 1.82843 9.67157L11 0.5L23 12.5L11 24.5Z\" />\n            </svg>\n          </PopoverArrow>\n        )}\n        <Flex width=\"360px\" direction=\"column\" alignItems=\"start\">\n          {props.children}\n        </Flex>\n      </Popover.Content>\n    );\n  }),\n\n  Title: (props) => {\n    return (\n      <Box paddingTop={5} paddingLeft={5} paddingRight={5} paddingBottom={1} width=\"100%\">\n        {'children' in props ? (\n          props.children\n        ) : (\n          <Typography tag=\"h1\" id=\"guided-tour-title\" variant=\"omega\" fontWeight=\"bold\">\n            <FormattedMessage id={props.id} defaultMessage={props.defaultMessage} />\n          </Typography>\n        )}\n      </Box>\n    );\n  },\n\n  Content: (props) => {\n    const { formatMessage } = useIntl();\n    let content = '';\n    if (!('children' in props)) {\n      content = formatMessage({\n        id: props.id,\n        defaultMessage: props.defaultMessage,\n      });\n    }\n    return (\n      <Box paddingBottom={5} paddingLeft={5} paddingRight={5} width=\"100%\">\n        {'children' in props ? (\n          props.children\n        ) : (\n          <ContentContainer>\n            <Typography tag=\"div\" variant=\"omega\" dangerouslySetInnerHTML={{ __html: content }} />\n          </ContentContainer>\n        )}\n      </Box>\n    );\n  },\n\n  Actions: ({\n    showStepCount = true,\n    showPrevious = true,\n    showSkip = false,\n    to,\n    children,\n    ...flexProps\n  }) => {\n    return (\n      <ActionsContainer\n        width=\"100%\"\n        padding={3}\n        paddingLeft={5}\n        justifyContent={showStepCount ? 'space-between' : 'flex-end'}\n        {...flexProps}\n      >\n        {children ? (\n          children\n        ) : (\n          <>\n            {showStepCount && <StepCount tourName={tourName} />}\n            <DefaultActions\n              tourName={tourName}\n              showSkip={showSkip}\n              showPrevious={!showSkip && showPrevious}\n              to={to}\n            />\n          </>\n        )}\n      </ActionsContainer>\n    );\n  },\n});\n\nexport type { Step };\nexport { createStepComponents, GotItAction, StepCount, DefaultActions };\n"],"names":["StepCount","tourName","displayedCurrentStep","displayedTourLength","state","useGuidedTour","s","currentStep","tours","displayedStepCount","_meta","_jsx","Typography","variant","fontSize","FormattedMessage","id","defaultMessage","values","tourLength","GotItAction","onClick","Button","DefaultActions","showSkip","showPrevious","to","onNextStep","onPreviousStep","trackUsage","useTracking","dispatch","actualTourLength","totalStepCount","handleSkip","name","type","payload","handleNextStep","handlePreviousStep","_jsxs","Flex","gap","LinkButton","tag","NavLink","ActionsContainer","styled","theme","colors","neutral150","ContentContainer","Box","spaces","PopoverArrow","Popover","Arrow","neutral0","createStepComponents","Root","React","forwardRef","withArrow","props","ref","Content","aria-labelledby","side","align","style","border","e","stopPropagation","asChild","svg","xmlns","width","height","viewBox","fill","path","d","direction","alignItems","children","Title","paddingTop","paddingLeft","paddingRight","paddingBottom","fontWeight","formatMessage","useIntl","content","dangerouslySetInnerHTML","__html","Actions","showStepCount","flexProps","padding","justifyContent","_Fragment"],"mappings":"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"}
+{"version":3,"file":"Step.js","sources":["../../../../../../../admin/src/components/GuidedTour/Steps/Step.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport {\n  Popover,\n  Box,\n  Flex,\n  Button,\n  Typography,\n  LinkButton,\n  FlexProps,\n} from '@strapi/design-system';\nimport { FormattedMessage, useIntl, type MessageDescriptor } from 'react-intl';\nimport { To, NavLink } from 'react-router-dom';\nimport { styled } from 'styled-components';\n\nimport { useTracking } from '../../../features/Tracking';\nimport { useGuidedTour, type ValidTourName } from '../Context';\nimport { tours } from '../Tours';\n\n/* -------------------------------------------------------------------------------------------------\n * Common Step Components\n * -----------------------------------------------------------------------------------------------*/\n\nconst StepCount = ({\n  tourName,\n  displayedCurrentStep,\n  displayedTourLength,\n}: {\n  tourName: ValidTourName;\n  displayedCurrentStep?: number;\n  displayedTourLength?: number;\n}) => {\n  const state = useGuidedTour('GuidedTourPopover', (s) => s.state);\n  const currentStep = displayedCurrentStep ?? state.tours[tourName].currentStep + 1;\n  const displayedStepCount = displayedTourLength ?? tours[tourName]._meta.displayedStepCount;\n\n  return (\n    <Typography variant=\"omega\" fontSize=\"12px\">\n      <FormattedMessage\n        id=\"tours.stepCount\"\n        defaultMessage=\"Step {currentStep} of {tourLength}\"\n        values={{ currentStep, tourLength: displayedStepCount }}\n      />\n    </Typography>\n  );\n};\n\nconst GotItAction = ({ onClick }: { onClick: () => void }) => {\n  return (\n    <Button onClick={onClick}>\n      <FormattedMessage id=\"tours.gotIt\" defaultMessage=\"Got it\" />\n    </Button>\n  );\n};\n\nexport type DefaultActionsProps = {\n  showSkip?: boolean;\n  showPrevious?: boolean;\n  to?: To;\n  onNextStep?: () => void;\n  onPreviousStep?: () => void;\n  tourName: ValidTourName;\n};\nconst DefaultActions = ({\n  showSkip,\n  showPrevious,\n  to,\n  tourName,\n  onNextStep,\n  onPreviousStep,\n}: DefaultActionsProps) => {\n  const { trackUsage } = useTracking();\n  const dispatch = useGuidedTour('GuidedTourPopover', (s) => s.dispatch);\n  const state = useGuidedTour('GuidedTourPopover', (s) => s.state);\n  const currentStep = state.tours[tourName].currentStep + 1;\n  const actualTourLength = tours[tourName]._meta.totalStepCount;\n\n  const handleSkip = () => {\n    trackUsage('didSkipGuidedTour', { name: tourName });\n    dispatch({ type: 'skip_tour', payload: tourName });\n  };\n\n  const handleNextStep = () => {\n    if (currentStep === actualTourLength) {\n      trackUsage('didCompleteGuidedTour', { name: tourName });\n    }\n\n    if (onNextStep) {\n      onNextStep();\n    } else {\n      dispatch({ type: 'next_step', payload: tourName });\n    }\n  };\n\n  const handlePreviousStep = () => {\n    if (onPreviousStep) {\n      onPreviousStep();\n    } else {\n      dispatch({ type: 'previous_step', payload: tourName });\n    }\n  };\n\n  return (\n    <Flex gap={2}>\n      {showSkip && (\n        <Button variant=\"tertiary\" onClick={handleSkip}>\n          <FormattedMessage id=\"tours.skip\" defaultMessage=\"Skip\" />\n        </Button>\n      )}\n      {!showSkip && showPrevious && (\n        <Button variant=\"tertiary\" onClick={handlePreviousStep}>\n          <FormattedMessage id=\"tours.previous\" defaultMessage=\"Previous\" />\n        </Button>\n      )}\n      {to ? (\n        <LinkButton tag={NavLink} to={to} onClick={handleNextStep}>\n          <FormattedMessage id=\"tours.next\" defaultMessage=\"Next\" />\n        </LinkButton>\n      ) : (\n        <Button onClick={handleNextStep}>\n          <FormattedMessage id=\"tours.next\" defaultMessage=\"Next\" />\n        </Button>\n      )}\n    </Flex>\n  );\n};\n\n/* -------------------------------------------------------------------------------------------------\n * Step factory\n * -----------------------------------------------------------------------------------------------*/\n\ntype WithChildren = {\n  children: React.ReactNode;\n  id?: never;\n  defaultMessage?: never;\n};\n\ntype WithIntl = {\n  children?: undefined;\n  id: MessageDescriptor['id'];\n  defaultMessage: MessageDescriptor['defaultMessage'];\n  withArrow?: boolean;\n};\n\ntype WithActionsChildren = {\n  children: React.ReactNode;\n  showStepCount?: boolean;\n  showSkip?: boolean;\n  showPrevious?: boolean;\n};\n\ntype WithActionsProps = {\n  children?: undefined;\n  showStepCount?: boolean;\n  showSkip?: boolean;\n  showPrevious?: boolean;\n};\n\ntype StepProps = WithChildren | WithIntl;\ntype ActionsProps = WithActionsChildren | WithActionsProps;\n\ntype Step = {\n  Root: React.ForwardRefExoticComponent<\n    React.ComponentProps<typeof Popover.Content> & { withArrow?: boolean }\n  >;\n  Title: (props: StepProps) => React.ReactNode;\n  Content: (\n    props: StepProps & {\n      values?: Record<string, React.ReactNode | ((chunks: React.ReactNode) => React.ReactNode)>;\n    }\n  ) => React.ReactNode;\n  Actions: (props: ActionsProps & { to?: string } & FlexProps) => React.ReactNode;\n};\n\nconst ActionsContainer = styled(Flex)`\n  border-top: ${({ theme }) => `1px solid ${theme.colors.neutral150}`};\n`;\n\nconst ContentContainer = styled(Box)`\n  p {\n    margin-top: ${({ theme }) => theme.spaces[5]};\n  }\n  ul {\n    list-style-type: disc;\n    padding-left: ${({ theme }) => theme.spaces[4]};\n  }\n`;\n\n/**\n * TODO:\n * We should probably move all arrow styles + svg to the DS\n */\nconst PopoverArrow = styled(Popover.Arrow)`\n  fill: ${({ theme }) => theme.colors.neutral0};\n  transform: translateY(-16px) rotate(-90deg);\n`;\n\nconst createStepComponents = (tourName: ValidTourName): Step => ({\n  Root: React.forwardRef(({ withArrow = true, ...props }, ref) => {\n    return (\n      <Popover.Content\n        ref={ref}\n        aria-labelledby=\"guided-tour-title\"\n        side=\"top\"\n        align=\"center\"\n        style={{ border: 'none' }}\n        onClick={(e) => e.stopPropagation()}\n        {...props}\n      >\n        {withArrow && (\n          <PopoverArrow asChild>\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              width=\"23\"\n              height=\"25\"\n              viewBox=\"0 0 23 25\"\n              fill=\"none\"\n            >\n              <path d=\"M11 24.5L1.82843 15.3284C0.266332 13.7663 0.26633 11.2337 1.82843 9.67157L11 0.5L23 12.5L11 24.5Z\" />\n            </svg>\n          </PopoverArrow>\n        )}\n        <Flex width=\"360px\" direction=\"column\" alignItems=\"start\">\n          {props.children}\n        </Flex>\n      </Popover.Content>\n    );\n  }),\n\n  Title: (props) => {\n    return (\n      <Box paddingTop={5} paddingLeft={5} paddingRight={5} paddingBottom={1} width=\"100%\">\n        {'children' in props ? (\n          props.children\n        ) : (\n          <Typography tag=\"h1\" id=\"guided-tour-title\" variant=\"omega\" fontWeight=\"bold\">\n            <FormattedMessage id={props.id} defaultMessage={props.defaultMessage} />\n          </Typography>\n        )}\n      </Box>\n    );\n  },\n\n  Content: (props) => {\n    const { formatMessage } = useIntl();\n    let content = '';\n    if (!('children' in props)) {\n      content = formatMessage({\n        id: props.id,\n        defaultMessage: props.defaultMessage,\n      });\n    }\n    return (\n      <Box paddingBottom={5} paddingLeft={5} paddingRight={5} width=\"100%\">\n        {'children' in props ? (\n          props.children\n        ) : (\n          <ContentContainer>\n            <Typography tag=\"div\" variant=\"omega\" dangerouslySetInnerHTML={{ __html: content }} />\n          </ContentContainer>\n        )}\n      </Box>\n    );\n  },\n\n  Actions: ({\n    showStepCount = true,\n    showPrevious = true,\n    showSkip = false,\n    to,\n    children,\n    ...flexProps\n  }) => {\n    return (\n      <ActionsContainer\n        width=\"100%\"\n        padding={3}\n        paddingLeft={5}\n        justifyContent={showStepCount ? 'space-between' : 'flex-end'}\n        {...flexProps}\n      >\n        {children ? (\n          children\n        ) : (\n          <>\n            {showStepCount && <StepCount tourName={tourName} />}\n            <DefaultActions\n              tourName={tourName}\n              showSkip={showSkip}\n              showPrevious={!showSkip && showPrevious}\n              to={to}\n            />\n          </>\n        )}\n      </ActionsContainer>\n    );\n  },\n});\n\nexport type { Step };\nexport { createStepComponents, GotItAction, StepCount, DefaultActions };\n"],"names":["StepCount","tourName","displayedCurrentStep","displayedTourLength","state","useGuidedTour","s","currentStep","tours","displayedStepCount","_meta","_jsx","Typography","variant","fontSize","FormattedMessage","id","defaultMessage","values","tourLength","GotItAction","onClick","Button","DefaultActions","showSkip","showPrevious","to","onNextStep","onPreviousStep","trackUsage","useTracking","dispatch","actualTourLength","totalStepCount","handleSkip","name","type","payload","handleNextStep","handlePreviousStep","_jsxs","Flex","gap","LinkButton","tag","NavLink","ActionsContainer","styled","theme","colors","neutral150","ContentContainer","Box","spaces","PopoverArrow","Popover","Arrow","neutral0","createStepComponents","Root","React","forwardRef","withArrow","props","ref","Content","aria-labelledby","side","align","style","border","e","stopPropagation","asChild","svg","xmlns","width","height","viewBox","fill","path","d","direction","alignItems","children","Title","paddingTop","paddingLeft","paddingRight","paddingBottom","fontWeight","formatMessage","useIntl","content","dangerouslySetInnerHTML","__html","Actions","showStepCount","flexProps","padding","justifyContent","_Fragment"],"mappings":"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"}

package/dist/admin/admin/src/components/GuidedTour/Steps/Step.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Step.mjs","sources":["../../../../../../../admin/src/components/GuidedTour/Steps/Step.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport {\n  Popover,\n  Box,\n  Flex,\n  Button,\n  Typography,\n  LinkButton,\n  FlexProps,\n} from '@strapi/design-system';\nimport { FormattedMessage, useIntl, type MessageDescriptor } from 'react-intl';\nimport { To, NavLink } from 'react-router-dom';\nimport { styled } from 'styled-components';\n\nimport { useTracking } from '../../../features/Tracking';\nimport { useGuidedTour, type ValidTourName } from '../Context';\nimport { tours } from '../Tours';\n\n/* -------------------------------------------------------------------------------------------------\n * Common Step Components\n * -----------------------------------------------------------------------------------------------*/\n\nconst StepCount = ({\n  tourName,\n  displayedCurrentStep,\n  displayedTourLength,\n}: {\n  tourName: ValidTourName;\n  displayedCurrentStep?: number;\n  displayedTourLength?: number;\n}) => {\n  const state = useGuidedTour('GuidedTourPopover', (s) => s.state);\n  const currentStep = displayedCurrentStep ?? state.tours[tourName].currentStep + 1;\n  const displayedStepCount = displayedTourLength ?? tours[tourName]._meta.displayedStepCount;\n\n  return (\n    <Typography variant=\"omega\" fontSize=\"12px\">\n      <FormattedMessage\n        id=\"tours.stepCount\"\n        defaultMessage=\"Step {currentStep} of {tourLength}\"\n        values={{ currentStep, tourLength: displayedStepCount }}\n      />\n    </Typography>\n  );\n};\n\nconst GotItAction = ({ onClick }: { onClick: () => void }) => {\n  return (\n    <Button onClick={onClick}>\n      <FormattedMessage id=\"tours.gotIt\" defaultMessage=\"Got it\" />\n    </Button>\n  );\n};\n\nexport type DefaultActionsProps = {\n  showSkip?: boolean;\n  showPrevious?: boolean;\n  to?: To;\n  onNextStep?: () => void;\n  onPreviousStep?: () => void;\n  tourName: ValidTourName;\n};\nconst DefaultActions = ({\n  showSkip,\n  showPrevious,\n  to,\n  tourName,\n  onNextStep,\n  onPreviousStep,\n}: DefaultActionsProps) => {\n  const { trackUsage } = useTracking();\n  const dispatch = useGuidedTour('GuidedTourPopover', (s) => s.dispatch);\n  const state = useGuidedTour('GuidedTourPopover', (s) => s.state);\n  const currentStep = state.tours[tourName].currentStep + 1;\n  const actualTourLength = tours[tourName]._meta.totalStepCount;\n\n  const handleSkip = () => {\n    trackUsage('didSkipGuidedTour', { name: tourName });\n    dispatch({ type: 'skip_tour', payload: tourName });\n  };\n\n  const handleNextStep = () => {\n    if (currentStep === actualTourLength) {\n      trackUsage('didCompleteGuidedTour', { name: tourName });\n    }\n\n    if (onNextStep) {\n      onNextStep();\n    } else {\n      dispatch({ type: 'next_step', payload: tourName });\n    }\n  };\n\n  const handlePreviousStep = () => {\n    if (onPreviousStep) {\n      onPreviousStep();\n    } else {\n      dispatch({ type: 'previous_step', payload: tourName });\n    }\n  };\n\n  return (\n    <Flex gap={2}>\n      {showSkip && (\n        <Button variant=\"tertiary\" onClick={handleSkip}>\n          <FormattedMessage id=\"tours.skip\" defaultMessage=\"Skip\" />\n        </Button>\n      )}\n      {!showSkip && showPrevious && (\n        <Button variant=\"tertiary\" onClick={handlePreviousStep}>\n          <FormattedMessage id=\"tours.previous\" defaultMessage=\"Previous\" />\n        </Button>\n      )}\n      {to ? (\n        <LinkButton tag={NavLink} to={to} onClick={handleNextStep}>\n          <FormattedMessage id=\"tours.next\" defaultMessage=\"Next\" />\n        </LinkButton>\n      ) : (\n        <Button onClick={handleNextStep}>\n          <FormattedMessage id=\"tours.next\" defaultMessage=\"Next\" />\n        </Button>\n      )}\n    </Flex>\n  );\n};\n\n/* -------------------------------------------------------------------------------------------------\n * Step factory\n * -----------------------------------------------------------------------------------------------*/\n\ntype WithChildren = {\n  children: React.ReactNode;\n  id?: never;\n  defaultMessage?: never;\n};\n\ntype WithIntl = {\n  children?: undefined;\n  id: MessageDescriptor['id'];\n  defaultMessage: MessageDescriptor['defaultMessage'];\n  withArrow?: boolean;\n};\n\ntype WithActionsChildren = {\n  children: React.ReactNode;\n  showStepCount?: boolean;\n  showSkip?: boolean;\n  showPrevious?: boolean;\n};\n\ntype WithActionsProps = {\n  children?: undefined;\n  showStepCount?: boolean;\n  showSkip?: boolean;\n  showPrevious?: boolean;\n};\n\ntype StepProps = WithChildren | WithIntl;\ntype ActionsProps = WithActionsChildren | WithActionsProps;\n\ntype Step = {\n  Root: React.ForwardRefExoticComponent<\n    React.ComponentProps<typeof Popover.Content> & { withArrow?: boolean }\n  >;\n  Title: (props: StepProps) => React.ReactNode;\n  Content: (\n    props: StepProps & {\n      values?: Record<string, React.ReactNode | ((chunks: React.ReactNode) => React.ReactNode)>;\n    }\n  ) => React.ReactNode;\n  Actions: (props: ActionsProps & { to?: string } & FlexProps) => React.ReactNode;\n};\n\nconst ActionsContainer = styled(Flex)`\n  border-top: ${({ theme }) => `1px solid ${theme.colors.neutral150}`};\n`;\n\nconst ContentContainer = styled(Box)`\n  p {\n    margin-top: ${({ theme }) => theme.spaces[5]};\n  }\n  ul {\n    list-style-type: disc;\n    padding-left: ${({ theme }) => theme.spaces[4]};\n  }\n`;\n\n/**\n * TODO:\n * We should probably move all arrow styles + svg to the DS\n */\nconst PopoverArrow = styled(Popover.Arrow)`\n  fill: ${({ theme }) => theme.colors.neutral0};\n  transform: translateY(-16px) rotate(-90deg);\n`;\n\nconst createStepComponents = (tourName: ValidTourName): Step => ({\n  Root: React.forwardRef(({ withArrow = true, ...props }, ref) => {\n    return (\n      <Popover.Content\n        ref={ref}\n        aria-labelledby=\"guided-tour-title\"\n        side=\"top\"\n        align=\"center\"\n        style={{ border: 'none' }}\n        onClick={(e) => e.stopPropagation()}\n        {...props}\n      >\n        {withArrow && (\n          <PopoverArrow asChild>\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              width=\"23\"\n              height=\"25\"\n              viewBox=\"0 0 23 25\"\n              fill=\"none\"\n            >\n              <path d=\"M11 24.5L1.82843 15.3284C0.266332 13.7663 0.26633 11.2337 1.82843 9.67157L11 0.5L23 12.5L11 24.5Z\" />\n            </svg>\n          </PopoverArrow>\n        )}\n        <Flex width=\"360px\" direction=\"column\" alignItems=\"start\">\n          {props.children}\n        </Flex>\n      </Popover.Content>\n    );\n  }),\n\n  Title: (props) => {\n    return (\n      <Box paddingTop={5} paddingLeft={5} paddingRight={5} paddingBottom={1} width=\"100%\">\n        {'children' in props ? (\n          props.children\n        ) : (\n          <Typography tag=\"h1\" id=\"guided-tour-title\" variant=\"omega\" fontWeight=\"bold\">\n            <FormattedMessage id={props.id} defaultMessage={props.defaultMessage} />\n          </Typography>\n        )}\n      </Box>\n    );\n  },\n\n  Content: (props) => {\n    const { formatMessage } = useIntl();\n    let content = '';\n    if (!('children' in props)) {\n      content = formatMessage({\n        id: props.id,\n        defaultMessage: props.defaultMessage,\n      });\n    }\n    return (\n      <Box paddingBottom={5} paddingLeft={5} paddingRight={5} width=\"100%\">\n        {'children' in props ? (\n          props.children\n        ) : (\n          <ContentContainer>\n            <Typography tag=\"div\" variant=\"omega\" dangerouslySetInnerHTML={{ __html: content }} />\n          </ContentContainer>\n        )}\n      </Box>\n    );\n  },\n\n  Actions: ({\n    showStepCount = true,\n    showPrevious = true,\n    showSkip = false,\n    to,\n    children,\n    ...flexProps\n  }) => {\n    return (\n      <ActionsContainer\n        width=\"100%\"\n        padding={3}\n        paddingLeft={5}\n        justifyContent={showStepCount ? 'space-between' : 'flex-end'}\n        {...flexProps}\n      >\n        {children ? (\n          children\n        ) : (\n          <>\n            {showStepCount && <StepCount tourName={tourName} />}\n            <DefaultActions\n              tourName={tourName}\n              showSkip={showSkip}\n              showPrevious={!showSkip && showPrevious}\n              to={to}\n            />\n          </>\n        )}\n      </ActionsContainer>\n    );\n  },\n});\n\nexport type { Step };\nexport { createStepComponents, GotItAction, StepCount, DefaultActions };\n"],"names":["StepCount","tourName","displayedCurrentStep","displayedTourLength","state","useGuidedTour","s","currentStep","tours","displayedStepCount","_meta","_jsx","Typography","variant","fontSize","FormattedMessage","id","defaultMessage","values","tourLength","GotItAction","onClick","Button","DefaultActions","showSkip","showPrevious","to","onNextStep","onPreviousStep","trackUsage","useTracking","dispatch","actualTourLength","totalStepCount","handleSkip","name","type","payload","handleNextStep","handlePreviousStep","_jsxs","Flex","gap","LinkButton","tag","NavLink","ActionsContainer","styled","theme","colors","neutral150","ContentContainer","Box","spaces","PopoverArrow","Popover","Arrow","neutral0","createStepComponents","Root","React","forwardRef","withArrow","props","ref","Content","aria-labelledby","side","align","style","border","e","stopPropagation","asChild","svg","xmlns","width","height","viewBox","fill","path","d","direction","alignItems","children","Title","paddingTop","paddingLeft","paddingRight","paddingBottom","fontWeight","formatMessage","useIntl","content","dangerouslySetInnerHTML","__html","Actions","showStepCount","flexProps","padding","justifyContent","_Fragment"],"mappings":"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"}
+{"version":3,"file":"Step.mjs","sources":["../../../../../../../admin/src/components/GuidedTour/Steps/Step.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport {\n  Popover,\n  Box,\n  Flex,\n  Button,\n  Typography,\n  LinkButton,\n  FlexProps,\n} from '@strapi/design-system';\nimport { FormattedMessage, useIntl, type MessageDescriptor } from 'react-intl';\nimport { To, NavLink } from 'react-router-dom';\nimport { styled } from 'styled-components';\n\nimport { useTracking } from '../../../features/Tracking';\nimport { useGuidedTour, type ValidTourName } from '../Context';\nimport { tours } from '../Tours';\n\n/* -------------------------------------------------------------------------------------------------\n * Common Step Components\n * -----------------------------------------------------------------------------------------------*/\n\nconst StepCount = ({\n  tourName,\n  displayedCurrentStep,\n  displayedTourLength,\n}: {\n  tourName: ValidTourName;\n  displayedCurrentStep?: number;\n  displayedTourLength?: number;\n}) => {\n  const state = useGuidedTour('GuidedTourPopover', (s) => s.state);\n  const currentStep = displayedCurrentStep ?? state.tours[tourName].currentStep + 1;\n  const displayedStepCount = displayedTourLength ?? tours[tourName]._meta.displayedStepCount;\n\n  return (\n    <Typography variant=\"omega\" fontSize=\"12px\">\n      <FormattedMessage\n        id=\"tours.stepCount\"\n        defaultMessage=\"Step {currentStep} of {tourLength}\"\n        values={{ currentStep, tourLength: displayedStepCount }}\n      />\n    </Typography>\n  );\n};\n\nconst GotItAction = ({ onClick }: { onClick: () => void }) => {\n  return (\n    <Button onClick={onClick}>\n      <FormattedMessage id=\"tours.gotIt\" defaultMessage=\"Got it\" />\n    </Button>\n  );\n};\n\nexport type DefaultActionsProps = {\n  showSkip?: boolean;\n  showPrevious?: boolean;\n  to?: To;\n  onNextStep?: () => void;\n  onPreviousStep?: () => void;\n  tourName: ValidTourName;\n};\nconst DefaultActions = ({\n  showSkip,\n  showPrevious,\n  to,\n  tourName,\n  onNextStep,\n  onPreviousStep,\n}: DefaultActionsProps) => {\n  const { trackUsage } = useTracking();\n  const dispatch = useGuidedTour('GuidedTourPopover', (s) => s.dispatch);\n  const state = useGuidedTour('GuidedTourPopover', (s) => s.state);\n  const currentStep = state.tours[tourName].currentStep + 1;\n  const actualTourLength = tours[tourName]._meta.totalStepCount;\n\n  const handleSkip = () => {\n    trackUsage('didSkipGuidedTour', { name: tourName });\n    dispatch({ type: 'skip_tour', payload: tourName });\n  };\n\n  const handleNextStep = () => {\n    if (currentStep === actualTourLength) {\n      trackUsage('didCompleteGuidedTour', { name: tourName });\n    }\n\n    if (onNextStep) {\n      onNextStep();\n    } else {\n      dispatch({ type: 'next_step', payload: tourName });\n    }\n  };\n\n  const handlePreviousStep = () => {\n    if (onPreviousStep) {\n      onPreviousStep();\n    } else {\n      dispatch({ type: 'previous_step', payload: tourName });\n    }\n  };\n\n  return (\n    <Flex gap={2}>\n      {showSkip && (\n        <Button variant=\"tertiary\" onClick={handleSkip}>\n          <FormattedMessage id=\"tours.skip\" defaultMessage=\"Skip\" />\n        </Button>\n      )}\n      {!showSkip && showPrevious && (\n        <Button variant=\"tertiary\" onClick={handlePreviousStep}>\n          <FormattedMessage id=\"tours.previous\" defaultMessage=\"Previous\" />\n        </Button>\n      )}\n      {to ? (\n        <LinkButton tag={NavLink} to={to} onClick={handleNextStep}>\n          <FormattedMessage id=\"tours.next\" defaultMessage=\"Next\" />\n        </LinkButton>\n      ) : (\n        <Button onClick={handleNextStep}>\n          <FormattedMessage id=\"tours.next\" defaultMessage=\"Next\" />\n        </Button>\n      )}\n    </Flex>\n  );\n};\n\n/* -------------------------------------------------------------------------------------------------\n * Step factory\n * -----------------------------------------------------------------------------------------------*/\n\ntype WithChildren = {\n  children: React.ReactNode;\n  id?: never;\n  defaultMessage?: never;\n};\n\ntype WithIntl = {\n  children?: undefined;\n  id: MessageDescriptor['id'];\n  defaultMessage: MessageDescriptor['defaultMessage'];\n  withArrow?: boolean;\n};\n\ntype WithActionsChildren = {\n  children: React.ReactNode;\n  showStepCount?: boolean;\n  showSkip?: boolean;\n  showPrevious?: boolean;\n};\n\ntype WithActionsProps = {\n  children?: undefined;\n  showStepCount?: boolean;\n  showSkip?: boolean;\n  showPrevious?: boolean;\n};\n\ntype StepProps = WithChildren | WithIntl;\ntype ActionsProps = WithActionsChildren | WithActionsProps;\n\ntype Step = {\n  Root: React.ForwardRefExoticComponent<\n    React.ComponentProps<typeof Popover.Content> & { withArrow?: boolean }\n  >;\n  Title: (props: StepProps) => React.ReactNode;\n  Content: (\n    props: StepProps & {\n      values?: Record<string, React.ReactNode | ((chunks: React.ReactNode) => React.ReactNode)>;\n    }\n  ) => React.ReactNode;\n  Actions: (props: ActionsProps & { to?: string } & FlexProps) => React.ReactNode;\n};\n\nconst ActionsContainer = styled(Flex)`\n  border-top: ${({ theme }) => `1px solid ${theme.colors.neutral150}`};\n`;\n\nconst ContentContainer = styled(Box)`\n  p {\n    margin-top: ${({ theme }) => theme.spaces[5]};\n  }\n  ul {\n    list-style-type: disc;\n    padding-left: ${({ theme }) => theme.spaces[4]};\n  }\n`;\n\n/**\n * TODO:\n * We should probably move all arrow styles + svg to the DS\n */\nconst PopoverArrow = styled(Popover.Arrow)`\n  fill: ${({ theme }) => theme.colors.neutral0};\n  transform: translateY(-16px) rotate(-90deg);\n`;\n\nconst createStepComponents = (tourName: ValidTourName): Step => ({\n  Root: React.forwardRef(({ withArrow = true, ...props }, ref) => {\n    return (\n      <Popover.Content\n        ref={ref}\n        aria-labelledby=\"guided-tour-title\"\n        side=\"top\"\n        align=\"center\"\n        style={{ border: 'none' }}\n        onClick={(e) => e.stopPropagation()}\n        {...props}\n      >\n        {withArrow && (\n          <PopoverArrow asChild>\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              width=\"23\"\n              height=\"25\"\n              viewBox=\"0 0 23 25\"\n              fill=\"none\"\n            >\n              <path d=\"M11 24.5L1.82843 15.3284C0.266332 13.7663 0.26633 11.2337 1.82843 9.67157L11 0.5L23 12.5L11 24.5Z\" />\n            </svg>\n          </PopoverArrow>\n        )}\n        <Flex width=\"360px\" direction=\"column\" alignItems=\"start\">\n          {props.children}\n        </Flex>\n      </Popover.Content>\n    );\n  }),\n\n  Title: (props) => {\n    return (\n      <Box paddingTop={5} paddingLeft={5} paddingRight={5} paddingBottom={1} width=\"100%\">\n        {'children' in props ? (\n          props.children\n        ) : (\n          <Typography tag=\"h1\" id=\"guided-tour-title\" variant=\"omega\" fontWeight=\"bold\">\n            <FormattedMessage id={props.id} defaultMessage={props.defaultMessage} />\n          </Typography>\n        )}\n      </Box>\n    );\n  },\n\n  Content: (props) => {\n    const { formatMessage } = useIntl();\n    let content = '';\n    if (!('children' in props)) {\n      content = formatMessage({\n        id: props.id,\n        defaultMessage: props.defaultMessage,\n      });\n    }\n    return (\n      <Box paddingBottom={5} paddingLeft={5} paddingRight={5} width=\"100%\">\n        {'children' in props ? (\n          props.children\n        ) : (\n          <ContentContainer>\n            <Typography tag=\"div\" variant=\"omega\" dangerouslySetInnerHTML={{ __html: content }} />\n          </ContentContainer>\n        )}\n      </Box>\n    );\n  },\n\n  Actions: ({\n    showStepCount = true,\n    showPrevious = true,\n    showSkip = false,\n    to,\n    children,\n    ...flexProps\n  }) => {\n    return (\n      <ActionsContainer\n        width=\"100%\"\n        padding={3}\n        paddingLeft={5}\n        justifyContent={showStepCount ? 'space-between' : 'flex-end'}\n        {...flexProps}\n      >\n        {children ? (\n          children\n        ) : (\n          <>\n            {showStepCount && <StepCount tourName={tourName} />}\n            <DefaultActions\n              tourName={tourName}\n              showSkip={showSkip}\n              showPrevious={!showSkip && showPrevious}\n              to={to}\n            />\n          </>\n        )}\n      </ActionsContainer>\n    );\n  },\n});\n\nexport type { Step };\nexport { createStepComponents, GotItAction, StepCount, DefaultActions };\n"],"names":["StepCount","tourName","displayedCurrentStep","displayedTourLength","state","useGuidedTour","s","currentStep","tours","displayedStepCount","_meta","_jsx","Typography","variant","fontSize","FormattedMessage","id","defaultMessage","values","tourLength","GotItAction","onClick","Button","DefaultActions","showSkip","showPrevious","to","onNextStep","onPreviousStep","trackUsage","useTracking","dispatch","actualTourLength","totalStepCount","handleSkip","name","type","payload","handleNextStep","handlePreviousStep","_jsxs","Flex","gap","LinkButton","tag","NavLink","ActionsContainer","styled","theme","colors","neutral150","ContentContainer","Box","spaces","PopoverArrow","Popover","Arrow","neutral0","createStepComponents","Root","React","forwardRef","withArrow","props","ref","Content","aria-labelledby","side","align","style","border","e","stopPropagation","asChild","svg","xmlns","width","height","viewBox","fill","path","d","direction","alignItems","children","Title","paddingTop","paddingLeft","paddingRight","paddingBottom","fontWeight","formatMessage","useIntl","content","dangerouslySetInnerHTML","__html","Actions","showStepCount","flexProps","padding","justifyContent","_Fragment"],"mappings":"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"}

package/dist/admin/admin/src/components/Layouts/GridLayout.js.map

@@ -1 +1 @@
-{"version":3,"file":"GridLayout.js","sources":["../../../../../../admin/src/components/Layouts/GridLayout.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Box } from '@strapi/design-system';\nimport { styled } from 'styled-components';\n\ninterface GridColSize {\n  S: number;\n  M: number;\n}\n\nconst GridColSize = {\n  S: 180,\n  M: 250,\n};\n\ntype Size = keyof GridColSize;\n\nconst StyledGrid = styled(Box)<{ $size: Size }>`\n  display: grid;\n  grid-template-columns: repeat(\n    auto-fit,\n    minmax(${({ $size }: { $size: Size }) => `${GridColSize[$size]}px`}, 1fr)\n  );\n  grid-gap: ${({ theme }) => theme.spaces[4]};\n`;\n\ninterface GridLayoutProps {\n  size: Size;\n  children: React.ReactNode;\n}\n\nconst GridLayout = ({ size, children }: GridLayoutProps) => {\n  return <StyledGrid $size={size}>{children}</StyledGrid>;\n};\n\nexport { GridLayout };\nexport type { GridLayoutProps, GridColSize };\n"],"names":["GridColSize","S","M","StyledGrid","styled","Box","$size","theme","spaces","GridLayout","size","children","_jsx"],"mappings":";;;;;;;AAUA,MAAMA,WAAc,GAAA;IAClBC,CAAG,EAAA,GAAA;IACHC,CAAG,EAAA;AACL,CAAA;AAIA,MAAMC,UAAAA,GAAaC,aAAOC,CAAAA,gBAAAA,CAAqB;;;;AAIpC,WAAA,EAAE,CAAC,EAAEC,KAAK,EAAmB,GAAK,CAAC,EAAEN,WAAW,CAACM,KAAAA,CAAM,CAAC,EAAE,CAAC,CAAC;;YAE3D,EAAE,CAAC,EAAEC,KAAK,EAAE,GAAKA,KAAMC,CAAAA,MAAM,CAAC,CAAA,CAAE,CAAC;AAC7C,CAAC;AAOD,MAAMC,aAAa,CAAC,EAAEC,IAAI,EAAEC,QAAQ,EAAmB,GAAA;AACrD,IAAA,qBAAOC,cAACT,CAAAA,UAAAA,EAAAA;QAAWG,KAAOI,EAAAA,IAAAA;AAAOC,QAAAA,QAAAA,EAAAA;;AACnC;;;;"}
+{"version":3,"file":"GridLayout.js","sources":["../../../../../../admin/src/components/Layouts/GridLayout.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Box } from '@strapi/design-system';\nimport { styled } from 'styled-components';\n\ninterface GridColSize {\n  S: number;\n  M: number;\n}\n\nconst GridColSize = {\n  S: 180,\n  M: 250,\n};\n\ntype Size = keyof GridColSize;\n\nconst StyledGrid = styled(Box)<{ $size: Size }>`\n  display: grid;\n  grid-template-columns: repeat(\n    auto-fit,\n    minmax(${({ $size }: { $size: Size }) => `${GridColSize[$size]}px`}, 1fr)\n  );\n  grid-gap: ${({ theme }) => theme.spaces[4]};\n`;\n\ninterface GridLayoutProps {\n  size: Size;\n  children: React.ReactNode;\n}\n\nconst GridLayout = ({ size, children }: GridLayoutProps) => {\n  return <StyledGrid $size={size}>{children}</StyledGrid>;\n};\n\nexport { GridLayout };\nexport type { GridLayoutProps, GridColSize };\n"],"names":["GridColSize","S","M","StyledGrid","styled","Box","$size","theme","spaces","GridLayout","size","children","_jsx"],"mappings":";;;;;;;AAUA,MAAMA,WAAc,GAAA;IAClBC,CAAG,EAAA,GAAA;IACHC,CAAG,EAAA;AACL,CAAA;AAIA,MAAMC,UAAAA,GAAaC,aAAOC,CAAAA,gBAAAA,CAAqB;;;;AAIpC,WAAA,EAAE,CAAC,EAAEC,KAAK,EAAmB,GAAK,CAAA,EAAGN,WAAW,CAACM,KAAM,CAAA,CAAC,EAAE,CAAC,CAAC;;YAE3D,EAAE,CAAC,EAAEC,KAAK,EAAE,GAAKA,KAAMC,CAAAA,MAAM,CAAC,CAAA,CAAE,CAAC;AAC7C,CAAC;AAOD,MAAMC,aAAa,CAAC,EAAEC,IAAI,EAAEC,QAAQ,EAAmB,GAAA;AACrD,IAAA,qBAAOC,cAACT,CAAAA,UAAAA,EAAAA;QAAWG,KAAOI,EAAAA,IAAAA;AAAOC,QAAAA,QAAAA,EAAAA;;AACnC;;;;"}

package/dist/admin/admin/src/components/Layouts/GridLayout.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"GridLayout.mjs","sources":["../../../../../../admin/src/components/Layouts/GridLayout.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Box } from '@strapi/design-system';\nimport { styled } from 'styled-components';\n\ninterface GridColSize {\n  S: number;\n  M: number;\n}\n\nconst GridColSize = {\n  S: 180,\n  M: 250,\n};\n\ntype Size = keyof GridColSize;\n\nconst StyledGrid = styled(Box)<{ $size: Size }>`\n  display: grid;\n  grid-template-columns: repeat(\n    auto-fit,\n    minmax(${({ $size }: { $size: Size }) => `${GridColSize[$size]}px`}, 1fr)\n  );\n  grid-gap: ${({ theme }) => theme.spaces[4]};\n`;\n\ninterface GridLayoutProps {\n  size: Size;\n  children: React.ReactNode;\n}\n\nconst GridLayout = ({ size, children }: GridLayoutProps) => {\n  return <StyledGrid $size={size}>{children}</StyledGrid>;\n};\n\nexport { GridLayout };\nexport type { GridLayoutProps, GridColSize };\n"],"names":["GridColSize","S","M","StyledGrid","styled","Box","$size","theme","spaces","GridLayout","size","children","_jsx"],"mappings":";;;;;AAUA,MAAMA,WAAc,GAAA;IAClBC,CAAG,EAAA,GAAA;IACHC,CAAG,EAAA;AACL,CAAA;AAIA,MAAMC,UAAAA,GAAaC,MAAOC,CAAAA,GAAAA,CAAqB;;;;AAIpC,WAAA,EAAE,CAAC,EAAEC,KAAK,EAAmB,GAAK,CAAC,EAAEN,WAAW,CAACM,KAAAA,CAAM,CAAC,EAAE,CAAC,CAAC;;YAE3D,EAAE,CAAC,EAAEC,KAAK,EAAE,GAAKA,KAAMC,CAAAA,MAAM,CAAC,CAAA,CAAE,CAAC;AAC7C,CAAC;AAOD,MAAMC,aAAa,CAAC,EAAEC,IAAI,EAAEC,QAAQ,EAAmB,GAAA;AACrD,IAAA,qBAAOC,GAACT,CAAAA,UAAAA,EAAAA;QAAWG,KAAOI,EAAAA,IAAAA;AAAOC,QAAAA,QAAAA,EAAAA;;AACnC;;;;"}
+{"version":3,"file":"GridLayout.mjs","sources":["../../../../../../admin/src/components/Layouts/GridLayout.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Box } from '@strapi/design-system';\nimport { styled } from 'styled-components';\n\ninterface GridColSize {\n  S: number;\n  M: number;\n}\n\nconst GridColSize = {\n  S: 180,\n  M: 250,\n};\n\ntype Size = keyof GridColSize;\n\nconst StyledGrid = styled(Box)<{ $size: Size }>`\n  display: grid;\n  grid-template-columns: repeat(\n    auto-fit,\n    minmax(${({ $size }: { $size: Size }) => `${GridColSize[$size]}px`}, 1fr)\n  );\n  grid-gap: ${({ theme }) => theme.spaces[4]};\n`;\n\ninterface GridLayoutProps {\n  size: Size;\n  children: React.ReactNode;\n}\n\nconst GridLayout = ({ size, children }: GridLayoutProps) => {\n  return <StyledGrid $size={size}>{children}</StyledGrid>;\n};\n\nexport { GridLayout };\nexport type { GridLayoutProps, GridColSize };\n"],"names":["GridColSize","S","M","StyledGrid","styled","Box","$size","theme","spaces","GridLayout","size","children","_jsx"],"mappings":";;;;;AAUA,MAAMA,WAAc,GAAA;IAClBC,CAAG,EAAA,GAAA;IACHC,CAAG,EAAA;AACL,CAAA;AAIA,MAAMC,UAAAA,GAAaC,MAAOC,CAAAA,GAAAA,CAAqB;;;;AAIpC,WAAA,EAAE,CAAC,EAAEC,KAAK,EAAmB,GAAK,CAAA,EAAGN,WAAW,CAACM,KAAM,CAAA,CAAC,EAAE,CAAC,CAAC;;YAE3D,EAAE,CAAC,EAAEC,KAAK,EAAE,GAAKA,KAAMC,CAAAA,MAAM,CAAC,CAAA,CAAE,CAAC;AAC7C,CAAC;AAOD,MAAMC,aAAa,CAAC,EAAEC,IAAI,EAAEC,QAAQ,EAAmB,GAAA;AACrD,IAAA,qBAAOC,GAACT,CAAAA,UAAAA,EAAAA;QAAWG,KAAOI,EAAAA,IAAAA;AAAOC,QAAAA,QAAAA,EAAAA;;AACnC;;;;"}

package/dist/admin/admin/src/components/Layouts/HeaderLayout.js

@@ -4,6 +4,7 @@ var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var designSystem = require('@strapi/design-system');
 var theme = require('../../constants/theme.js');
+var useDeviceType = require('../../hooks/useDeviceType.js');
 var useElementOnScreen = require('../../hooks/useElementOnScreen.js');
 
 function _interopNamespaceDefault(e) {
@@ -29,10 +30,7 @@ const BaseHeaderLayout = /*#__PURE__*/ React__namespace.forwardRef(({ navigation
     const isSubtitleString = typeof subtitle === 'string';
     if (sticky) {
         return /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
-            display: {
-                initial: 'none',
-                large: 'flex'
-            },
+            display: "flex",
             paddingLeft: 6,
             paddingRight: 6,
             paddingTop: 2,
@@ -151,6 +149,7 @@ const HeaderLayout = (props)=>{
     const baseHeaderLayoutRef = React__namespace.useRef(null);
     const [headerSize, setHeaderSize] = React__namespace.useState(null);
     const [isVisible, setIsVisible] = React__namespace.useState(true);
+    const deviceType = useDeviceType.useDeviceType();
     const containerRef = useElementOnScreen.useElementOnScreen(setIsVisible, {
         root: null,
         rootMargin: '0px',
@@ -177,6 +176,11 @@ const HeaderLayout = (props)=>{
     }, [
         containerRef
     ]);
+    if (deviceType === 'mobile') {
+        return /*#__PURE__*/ jsxRuntime.jsx(BaseHeaderLayout, {
+            ...props
+        });
+    }
     return /*#__PURE__*/ jsxRuntime.jsxs("div", {
         ref: containerRef,
         children: [

package/dist/admin/admin/src/components/Layouts/HeaderLayout.js.map

@@ -1 +1 @@
-{"version":3,"file":"HeaderLayout.js","sources":["../../../../../../admin/src/components/Layouts/HeaderLayout.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Box, Flex, Typography, TypographyProps, useCallbackRef } from '@strapi/design-system';\n\nimport { HEIGHT_TOP_NAVIGATION, RESPONSIVE_DEFAULT_SPACING } from '../../constants/theme';\nimport { useElementOnScreen } from '../../hooks/useElementOnScreen';\n\n/* -------------------------------------------------------------------------------------------------\n * BaseHeaderLayout\n * -----------------------------------------------------------------------------------------------*/\n\ninterface BaseHeaderLayoutProps extends Omit<TypographyProps<'div'>, 'tag'> {\n  navigationAction?: React.ReactNode;\n  primaryAction?: React.ReactNode;\n  secondaryAction?: React.ReactNode;\n  subtitle?: React.ReactNode;\n  sticky?: boolean;\n  width?: number;\n}\n\nconst BaseHeaderLayout = React.forwardRef<HTMLDivElement, BaseHeaderLayoutProps>(\n  (\n    { navigationAction, primaryAction, secondaryAction, subtitle, title, sticky, width, ...props },\n    ref\n  ) => {\n    const isSubtitleString = typeof subtitle === 'string';\n\n    if (sticky) {\n      return (\n        <Box\n          display={{\n            initial: 'none',\n            large: 'flex',\n          }}\n          paddingLeft={6}\n          paddingRight={6}\n          paddingTop={2}\n          paddingBottom={2}\n          position=\"fixed\"\n          top={0}\n          background=\"neutral0\"\n          shadow=\"tableShadow\"\n          width={`${width}px`}\n          zIndex={2}\n          minHeight={HEIGHT_TOP_NAVIGATION}\n          data-strapi-header-sticky\n        >\n          <Flex alignItems=\"center\" justifyContent=\"space-between\" wrap=\"wrap\" width=\"100%\">\n            <Flex>\n              {navigationAction && <Box paddingRight={3}>{navigationAction}</Box>}\n              <Box>\n                <Typography variant=\"beta\" tag=\"h1\" {...props}>\n                  {title}\n                </Typography>\n                {isSubtitleString ? (\n                  <Typography variant=\"pi\" textColor=\"neutral600\">\n                    {subtitle}\n                  </Typography>\n                ) : (\n                  subtitle\n                )}\n              </Box>\n              {secondaryAction ? <Box paddingLeft={4}>{secondaryAction}</Box> : null}\n            </Flex>\n            <Flex>{primaryAction ? <Box paddingLeft={2}>{primaryAction}</Box> : undefined}</Flex>\n          </Flex>\n        </Box>\n      );\n    }\n\n    return (\n      <Box\n        ref={ref}\n        paddingLeft={RESPONSIVE_DEFAULT_SPACING}\n        paddingRight={RESPONSIVE_DEFAULT_SPACING}\n        paddingBottom={{\n          initial: 4,\n          large: 8,\n        }}\n        paddingTop={{\n          initial: 4,\n          large: navigationAction ? 6 : 8,\n        }}\n        background=\"neutral100\"\n        data-strapi-header\n      >\n        <Flex direction=\"column\" alignItems=\"initial\" gap={2}>\n          {navigationAction}\n          <Flex justifyContent=\"space-between\" wrap=\"wrap\" gap={4}>\n            <Flex minWidth={0}>\n              <Typography tag=\"h1\" variant=\"alpha\" {...props}>\n                {title}\n              </Typography>\n              {secondaryAction ? <Box paddingLeft={4}>{secondaryAction}</Box> : null}\n            </Flex>\n            {primaryAction}\n          </Flex>\n        </Flex>\n        {isSubtitleString ? (\n          <Typography\n            variant=\"epsilon\"\n            textColor=\"neutral600\"\n            tag=\"p\"\n            paddingTop={{ initial: 4, large: 0 }}\n          >\n            {subtitle}\n          </Typography>\n        ) : (\n          subtitle\n        )}\n      </Box>\n    );\n  }\n);\n\n/* -------------------------------------------------------------------------------------------------\n * HeaderLayout\n * -----------------------------------------------------------------------------------------------*/\n\ninterface HeaderLayoutProps extends BaseHeaderLayoutProps {}\n\nconst HeaderLayout = (props: HeaderLayoutProps) => {\n  const baseHeaderLayoutRef = React.useRef<HTMLDivElement>(null);\n  const [headerSize, setHeaderSize] = React.useState<DOMRect | null>(null);\n  const [isVisible, setIsVisible] = React.useState(true);\n\n  const containerRef = useElementOnScreen<HTMLDivElement>(setIsVisible, {\n    root: null,\n    rootMargin: '0px',\n    threshold: 0,\n  });\n\n  useResizeObserver([containerRef], () => {\n    if (containerRef.current) {\n      const newSize = containerRef.current.getBoundingClientRect();\n      setHeaderSize((prevSize) => {\n        // Only update if size actually changed\n        if (!prevSize || prevSize.height !== newSize.height || prevSize.width !== newSize.width) {\n          return newSize;\n        }\n        return prevSize;\n      });\n    }\n  });\n\n  React.useEffect(() => {\n    if (containerRef.current) {\n      setHeaderSize(containerRef.current.getBoundingClientRect());\n    }\n  }, [containerRef]);\n\n  return (\n    <div ref={containerRef}>\n      <div style={{ height: headerSize?.height }}>\n        {isVisible && <BaseHeaderLayout ref={baseHeaderLayoutRef} {...props} />}\n      </div>\n\n      {!isVisible && <BaseHeaderLayout {...props} sticky width={headerSize?.width} />}\n    </div>\n  );\n};\n\nHeaderLayout.displayName = 'HeaderLayout';\n\n/**\n * useResizeObserver: hook that observes the size of an element and calls a callback when it changes.\n */\nconst useResizeObserver = (\n  sources: React.RefObject<HTMLElement> | React.RefObject<HTMLElement>[],\n  onResize: ResizeObserverCallback\n) => {\n  const handleResize = useCallbackRef(onResize);\n\n  React.useLayoutEffect(() => {\n    const resizeObs = new ResizeObserver(handleResize);\n\n    if (Array.isArray(sources)) {\n      sources.forEach((source) => {\n        if (source.current) {\n          resizeObs.observe(source.current);\n        }\n      });\n    } else if (sources.current) {\n      resizeObs.observe(sources.current);\n    }\n\n    return () => {\n      resizeObs.disconnect();\n    };\n  }, [sources, handleResize]);\n};\n\nexport type { HeaderLayoutProps, BaseHeaderLayoutProps };\nexport { HeaderLayout, BaseHeaderLayout };\n"],"names":["BaseHeaderLayout","React","forwardRef","navigationAction","primaryAction","secondaryAction","subtitle","title","sticky","width","props","ref","isSubtitleString","_jsx","Box","display","initial","large","paddingLeft","paddingRight","paddingTop","paddingBottom","position","top","background","shadow","zIndex","minHeight","HEIGHT_TOP_NAVIGATION","data-strapi-header-sticky","_jsxs","Flex","alignItems","justifyContent","wrap","Typography","variant","tag","textColor","undefined","RESPONSIVE_DEFAULT_SPACING","data-strapi-header","direction","gap","minWidth","HeaderLayout","baseHeaderLayoutRef","useRef","headerSize","setHeaderSize","useState","isVisible","setIsVisible","containerRef","useElementOnScreen","root","rootMargin","threshold","useResizeObserver","current","newSize","getBoundingClientRect","prevSize","height","useEffect","div","style","displayName","sources","onResize","handleResize","useCallbackRef","useLayoutEffect","resizeObs","ResizeObserver","Array","isArray","forEach","source","observe","disconnect"],"mappings":"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"}
+{"version":3,"file":"HeaderLayout.js","sources":["../../../../../../admin/src/components/Layouts/HeaderLayout.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Box, Flex, Typography, TypographyProps, useCallbackRef } from '@strapi/design-system';\n\nimport { HEIGHT_TOP_NAVIGATION, RESPONSIVE_DEFAULT_SPACING } from '../../constants/theme';\nimport { useDeviceType } from '../../hooks/useDeviceType';\nimport { useElementOnScreen } from '../../hooks/useElementOnScreen';\n\n/* -------------------------------------------------------------------------------------------------\n * BaseHeaderLayout\n * -----------------------------------------------------------------------------------------------*/\n\ninterface BaseHeaderLayoutProps extends Omit<TypographyProps<'div'>, 'tag'> {\n  navigationAction?: React.ReactNode;\n  primaryAction?: React.ReactNode;\n  secondaryAction?: React.ReactNode;\n  subtitle?: React.ReactNode;\n  sticky?: boolean;\n  width?: number;\n}\n\nconst BaseHeaderLayout = React.forwardRef<HTMLDivElement, BaseHeaderLayoutProps>(\n  (\n    { navigationAction, primaryAction, secondaryAction, subtitle, title, sticky, width, ...props },\n    ref\n  ) => {\n    const isSubtitleString = typeof subtitle === 'string';\n\n    if (sticky) {\n      return (\n        <Box\n          display=\"flex\"\n          paddingLeft={6}\n          paddingRight={6}\n          paddingTop={2}\n          paddingBottom={2}\n          position=\"fixed\"\n          top={0}\n          background=\"neutral0\"\n          shadow=\"tableShadow\"\n          width={`${width}px`}\n          zIndex={2}\n          minHeight={HEIGHT_TOP_NAVIGATION}\n          data-strapi-header-sticky\n        >\n          <Flex alignItems=\"center\" justifyContent=\"space-between\" wrap=\"wrap\" width=\"100%\">\n            <Flex>\n              {navigationAction && <Box paddingRight={3}>{navigationAction}</Box>}\n              <Box>\n                <Typography variant=\"beta\" tag=\"h1\" {...props}>\n                  {title}\n                </Typography>\n                {isSubtitleString ? (\n                  <Typography variant=\"pi\" textColor=\"neutral600\">\n                    {subtitle}\n                  </Typography>\n                ) : (\n                  subtitle\n                )}\n              </Box>\n              {secondaryAction ? <Box paddingLeft={4}>{secondaryAction}</Box> : null}\n            </Flex>\n            <Flex>{primaryAction ? <Box paddingLeft={2}>{primaryAction}</Box> : undefined}</Flex>\n          </Flex>\n        </Box>\n      );\n    }\n\n    return (\n      <Box\n        ref={ref}\n        paddingLeft={RESPONSIVE_DEFAULT_SPACING}\n        paddingRight={RESPONSIVE_DEFAULT_SPACING}\n        paddingBottom={{\n          initial: 4,\n          large: 8,\n        }}\n        paddingTop={{\n          initial: 4,\n          large: navigationAction ? 6 : 8,\n        }}\n        background=\"neutral100\"\n        data-strapi-header\n      >\n        <Flex direction=\"column\" alignItems=\"initial\" gap={2}>\n          {navigationAction}\n          <Flex justifyContent=\"space-between\" wrap=\"wrap\" gap={4}>\n            <Flex minWidth={0}>\n              <Typography tag=\"h1\" variant=\"alpha\" {...props}>\n                {title}\n              </Typography>\n              {secondaryAction ? <Box paddingLeft={4}>{secondaryAction}</Box> : null}\n            </Flex>\n            {primaryAction}\n          </Flex>\n        </Flex>\n        {isSubtitleString ? (\n          <Typography\n            variant=\"epsilon\"\n            textColor=\"neutral600\"\n            tag=\"p\"\n            paddingTop={{ initial: 4, large: 0 }}\n          >\n            {subtitle}\n          </Typography>\n        ) : (\n          subtitle\n        )}\n      </Box>\n    );\n  }\n);\n\n/* -------------------------------------------------------------------------------------------------\n * HeaderLayout\n * -----------------------------------------------------------------------------------------------*/\n\ninterface HeaderLayoutProps extends BaseHeaderLayoutProps {}\n\nconst HeaderLayout = (props: HeaderLayoutProps) => {\n  const baseHeaderLayoutRef = React.useRef<HTMLDivElement>(null);\n  const [headerSize, setHeaderSize] = React.useState<DOMRect | null>(null);\n  const [isVisible, setIsVisible] = React.useState(true);\n  const deviceType = useDeviceType();\n\n  const containerRef = useElementOnScreen<HTMLDivElement>(setIsVisible, {\n    root: null,\n    rootMargin: '0px',\n    threshold: 0,\n  });\n\n  useResizeObserver([containerRef], () => {\n    if (containerRef.current) {\n      const newSize = containerRef.current.getBoundingClientRect();\n      setHeaderSize((prevSize) => {\n        // Only update if size actually changed\n        if (!prevSize || prevSize.height !== newSize.height || prevSize.width !== newSize.width) {\n          return newSize;\n        }\n        return prevSize;\n      });\n    }\n  });\n\n  React.useEffect(() => {\n    if (containerRef.current) {\n      setHeaderSize(containerRef.current.getBoundingClientRect());\n    }\n  }, [containerRef]);\n\n  if (deviceType === 'mobile') {\n    return <BaseHeaderLayout {...props} />;\n  }\n\n  return (\n    <div ref={containerRef}>\n      <div style={{ height: headerSize?.height }}>\n        {isVisible && <BaseHeaderLayout ref={baseHeaderLayoutRef} {...props} />}\n      </div>\n\n      {!isVisible && <BaseHeaderLayout {...props} sticky width={headerSize?.width} />}\n    </div>\n  );\n};\n\nHeaderLayout.displayName = 'HeaderLayout';\n\n/**\n * useResizeObserver: hook that observes the size of an element and calls a callback when it changes.\n */\nconst useResizeObserver = (\n  sources: React.RefObject<HTMLElement> | React.RefObject<HTMLElement>[],\n  onResize: ResizeObserverCallback\n) => {\n  const handleResize = useCallbackRef(onResize);\n\n  React.useLayoutEffect(() => {\n    const resizeObs = new ResizeObserver(handleResize);\n\n    if (Array.isArray(sources)) {\n      sources.forEach((source) => {\n        if (source.current) {\n          resizeObs.observe(source.current);\n        }\n      });\n    } else if (sources.current) {\n      resizeObs.observe(sources.current);\n    }\n\n    return () => {\n      resizeObs.disconnect();\n    };\n  }, [sources, handleResize]);\n};\n\nexport type { HeaderLayoutProps, BaseHeaderLayoutProps };\nexport { HeaderLayout, BaseHeaderLayout };\n"],"names":["BaseHeaderLayout","React","forwardRef","navigationAction","primaryAction","secondaryAction","subtitle","title","sticky","width","props","ref","isSubtitleString","_jsx","Box","display","paddingLeft","paddingRight","paddingTop","paddingBottom","position","top","background","shadow","zIndex","minHeight","HEIGHT_TOP_NAVIGATION","data-strapi-header-sticky","_jsxs","Flex","alignItems","justifyContent","wrap","Typography","variant","tag","textColor","undefined","RESPONSIVE_DEFAULT_SPACING","initial","large","data-strapi-header","direction","gap","minWidth","HeaderLayout","baseHeaderLayoutRef","useRef","headerSize","setHeaderSize","useState","isVisible","setIsVisible","deviceType","useDeviceType","containerRef","useElementOnScreen","root","rootMargin","threshold","useResizeObserver","current","newSize","getBoundingClientRect","prevSize","height","useEffect","div","style","displayName","sources","onResize","handleResize","useCallbackRef","useLayoutEffect","resizeObs","ResizeObserver","Array","isArray","forEach","source","observe","disconnect"],"mappings":"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"}

package/dist/admin/admin/src/components/Layouts/HeaderLayout.mjs

@@ -2,16 +2,14 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import * as React from 'react';
 import { Box, Flex, Typography, useCallbackRef } from '@strapi/design-system';
 import { HEIGHT_TOP_NAVIGATION, RESPONSIVE_DEFAULT_SPACING } from '../../constants/theme.mjs';
+import { useDeviceType } from '../../hooks/useDeviceType.mjs';
 import { useElementOnScreen } from '../../hooks/useElementOnScreen.mjs';
 
 const BaseHeaderLayout = /*#__PURE__*/ React.forwardRef(({ navigationAction, primaryAction, secondaryAction, subtitle, title, sticky, width, ...props }, ref)=>{
     const isSubtitleString = typeof subtitle === 'string';
     if (sticky) {
         return /*#__PURE__*/ jsx(Box, {
-            display: {
-                initial: 'none',
-                large: 'flex'
-            },
+            display: "flex",
             paddingLeft: 6,
             paddingRight: 6,
             paddingTop: 2,
@@ -130,6 +128,7 @@ const HeaderLayout = (props)=>{
     const baseHeaderLayoutRef = React.useRef(null);
     const [headerSize, setHeaderSize] = React.useState(null);
     const [isVisible, setIsVisible] = React.useState(true);
+    const deviceType = useDeviceType();
     const containerRef = useElementOnScreen(setIsVisible, {
         root: null,
         rootMargin: '0px',
@@ -156,6 +155,11 @@ const HeaderLayout = (props)=>{
     }, [
         containerRef
     ]);
+    if (deviceType === 'mobile') {
+        return /*#__PURE__*/ jsx(BaseHeaderLayout, {
+            ...props
+        });
+    }
     return /*#__PURE__*/ jsxs("div", {
         ref: containerRef,
         children: [

package/dist/admin/admin/src/components/Layouts/HeaderLayout.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"HeaderLayout.mjs","sources":["../../../../../../admin/src/components/Layouts/HeaderLayout.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Box, Flex, Typography, TypographyProps, useCallbackRef } from '@strapi/design-system';\n\nimport { HEIGHT_TOP_NAVIGATION, RESPONSIVE_DEFAULT_SPACING } from '../../constants/theme';\nimport { useElementOnScreen } from '../../hooks/useElementOnScreen';\n\n/* -------------------------------------------------------------------------------------------------\n * BaseHeaderLayout\n * -----------------------------------------------------------------------------------------------*/\n\ninterface BaseHeaderLayoutProps extends Omit<TypographyProps<'div'>, 'tag'> {\n  navigationAction?: React.ReactNode;\n  primaryAction?: React.ReactNode;\n  secondaryAction?: React.ReactNode;\n  subtitle?: React.ReactNode;\n  sticky?: boolean;\n  width?: number;\n}\n\nconst BaseHeaderLayout = React.forwardRef<HTMLDivElement, BaseHeaderLayoutProps>(\n  (\n    { navigationAction, primaryAction, secondaryAction, subtitle, title, sticky, width, ...props },\n    ref\n  ) => {\n    const isSubtitleString = typeof subtitle === 'string';\n\n    if (sticky) {\n      return (\n        <Box\n          display={{\n            initial: 'none',\n            large: 'flex',\n          }}\n          paddingLeft={6}\n          paddingRight={6}\n          paddingTop={2}\n          paddingBottom={2}\n          position=\"fixed\"\n          top={0}\n          background=\"neutral0\"\n          shadow=\"tableShadow\"\n          width={`${width}px`}\n          zIndex={2}\n          minHeight={HEIGHT_TOP_NAVIGATION}\n          data-strapi-header-sticky\n        >\n          <Flex alignItems=\"center\" justifyContent=\"space-between\" wrap=\"wrap\" width=\"100%\">\n            <Flex>\n              {navigationAction && <Box paddingRight={3}>{navigationAction}</Box>}\n              <Box>\n                <Typography variant=\"beta\" tag=\"h1\" {...props}>\n                  {title}\n                </Typography>\n                {isSubtitleString ? (\n                  <Typography variant=\"pi\" textColor=\"neutral600\">\n                    {subtitle}\n                  </Typography>\n                ) : (\n                  subtitle\n                )}\n              </Box>\n              {secondaryAction ? <Box paddingLeft={4}>{secondaryAction}</Box> : null}\n            </Flex>\n            <Flex>{primaryAction ? <Box paddingLeft={2}>{primaryAction}</Box> : undefined}</Flex>\n          </Flex>\n        </Box>\n      );\n    }\n\n    return (\n      <Box\n        ref={ref}\n        paddingLeft={RESPONSIVE_DEFAULT_SPACING}\n        paddingRight={RESPONSIVE_DEFAULT_SPACING}\n        paddingBottom={{\n          initial: 4,\n          large: 8,\n        }}\n        paddingTop={{\n          initial: 4,\n          large: navigationAction ? 6 : 8,\n        }}\n        background=\"neutral100\"\n        data-strapi-header\n      >\n        <Flex direction=\"column\" alignItems=\"initial\" gap={2}>\n          {navigationAction}\n          <Flex justifyContent=\"space-between\" wrap=\"wrap\" gap={4}>\n            <Flex minWidth={0}>\n              <Typography tag=\"h1\" variant=\"alpha\" {...props}>\n                {title}\n              </Typography>\n              {secondaryAction ? <Box paddingLeft={4}>{secondaryAction}</Box> : null}\n            </Flex>\n            {primaryAction}\n          </Flex>\n        </Flex>\n        {isSubtitleString ? (\n          <Typography\n            variant=\"epsilon\"\n            textColor=\"neutral600\"\n            tag=\"p\"\n            paddingTop={{ initial: 4, large: 0 }}\n          >\n            {subtitle}\n          </Typography>\n        ) : (\n          subtitle\n        )}\n      </Box>\n    );\n  }\n);\n\n/* -------------------------------------------------------------------------------------------------\n * HeaderLayout\n * -----------------------------------------------------------------------------------------------*/\n\ninterface HeaderLayoutProps extends BaseHeaderLayoutProps {}\n\nconst HeaderLayout = (props: HeaderLayoutProps) => {\n  const baseHeaderLayoutRef = React.useRef<HTMLDivElement>(null);\n  const [headerSize, setHeaderSize] = React.useState<DOMRect | null>(null);\n  const [isVisible, setIsVisible] = React.useState(true);\n\n  const containerRef = useElementOnScreen<HTMLDivElement>(setIsVisible, {\n    root: null,\n    rootMargin: '0px',\n    threshold: 0,\n  });\n\n  useResizeObserver([containerRef], () => {\n    if (containerRef.current) {\n      const newSize = containerRef.current.getBoundingClientRect();\n      setHeaderSize((prevSize) => {\n        // Only update if size actually changed\n        if (!prevSize || prevSize.height !== newSize.height || prevSize.width !== newSize.width) {\n          return newSize;\n        }\n        return prevSize;\n      });\n    }\n  });\n\n  React.useEffect(() => {\n    if (containerRef.current) {\n      setHeaderSize(containerRef.current.getBoundingClientRect());\n    }\n  }, [containerRef]);\n\n  return (\n    <div ref={containerRef}>\n      <div style={{ height: headerSize?.height }}>\n        {isVisible && <BaseHeaderLayout ref={baseHeaderLayoutRef} {...props} />}\n      </div>\n\n      {!isVisible && <BaseHeaderLayout {...props} sticky width={headerSize?.width} />}\n    </div>\n  );\n};\n\nHeaderLayout.displayName = 'HeaderLayout';\n\n/**\n * useResizeObserver: hook that observes the size of an element and calls a callback when it changes.\n */\nconst useResizeObserver = (\n  sources: React.RefObject<HTMLElement> | React.RefObject<HTMLElement>[],\n  onResize: ResizeObserverCallback\n) => {\n  const handleResize = useCallbackRef(onResize);\n\n  React.useLayoutEffect(() => {\n    const resizeObs = new ResizeObserver(handleResize);\n\n    if (Array.isArray(sources)) {\n      sources.forEach((source) => {\n        if (source.current) {\n          resizeObs.observe(source.current);\n        }\n      });\n    } else if (sources.current) {\n      resizeObs.observe(sources.current);\n    }\n\n    return () => {\n      resizeObs.disconnect();\n    };\n  }, [sources, handleResize]);\n};\n\nexport type { HeaderLayoutProps, BaseHeaderLayoutProps };\nexport { HeaderLayout, BaseHeaderLayout };\n"],"names":["BaseHeaderLayout","React","forwardRef","navigationAction","primaryAction","secondaryAction","subtitle","title","sticky","width","props","ref","isSubtitleString","_jsx","Box","display","initial","large","paddingLeft","paddingRight","paddingTop","paddingBottom","position","top","background","shadow","zIndex","minHeight","HEIGHT_TOP_NAVIGATION","data-strapi-header-sticky","_jsxs","Flex","alignItems","justifyContent","wrap","Typography","variant","tag","textColor","undefined","RESPONSIVE_DEFAULT_SPACING","data-strapi-header","direction","gap","minWidth","HeaderLayout","baseHeaderLayoutRef","useRef","headerSize","setHeaderSize","useState","isVisible","setIsVisible","containerRef","useElementOnScreen","root","rootMargin","threshold","useResizeObserver","current","newSize","getBoundingClientRect","prevSize","height","useEffect","div","style","displayName","sources","onResize","handleResize","useCallbackRef","useLayoutEffect","resizeObs","ResizeObserver","Array","isArray","forEach","source","observe","disconnect"],"mappings":"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"}
+{"version":3,"file":"HeaderLayout.mjs","sources":["../../../../../../admin/src/components/Layouts/HeaderLayout.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Box, Flex, Typography, TypographyProps, useCallbackRef } from '@strapi/design-system';\n\nimport { HEIGHT_TOP_NAVIGATION, RESPONSIVE_DEFAULT_SPACING } from '../../constants/theme';\nimport { useDeviceType } from '../../hooks/useDeviceType';\nimport { useElementOnScreen } from '../../hooks/useElementOnScreen';\n\n/* -------------------------------------------------------------------------------------------------\n * BaseHeaderLayout\n * -----------------------------------------------------------------------------------------------*/\n\ninterface BaseHeaderLayoutProps extends Omit<TypographyProps<'div'>, 'tag'> {\n  navigationAction?: React.ReactNode;\n  primaryAction?: React.ReactNode;\n  secondaryAction?: React.ReactNode;\n  subtitle?: React.ReactNode;\n  sticky?: boolean;\n  width?: number;\n}\n\nconst BaseHeaderLayout = React.forwardRef<HTMLDivElement, BaseHeaderLayoutProps>(\n  (\n    { navigationAction, primaryAction, secondaryAction, subtitle, title, sticky, width, ...props },\n    ref\n  ) => {\n    const isSubtitleString = typeof subtitle === 'string';\n\n    if (sticky) {\n      return (\n        <Box\n          display=\"flex\"\n          paddingLeft={6}\n          paddingRight={6}\n          paddingTop={2}\n          paddingBottom={2}\n          position=\"fixed\"\n          top={0}\n          background=\"neutral0\"\n          shadow=\"tableShadow\"\n          width={`${width}px`}\n          zIndex={2}\n          minHeight={HEIGHT_TOP_NAVIGATION}\n          data-strapi-header-sticky\n        >\n          <Flex alignItems=\"center\" justifyContent=\"space-between\" wrap=\"wrap\" width=\"100%\">\n            <Flex>\n              {navigationAction && <Box paddingRight={3}>{navigationAction}</Box>}\n              <Box>\n                <Typography variant=\"beta\" tag=\"h1\" {...props}>\n                  {title}\n                </Typography>\n                {isSubtitleString ? (\n                  <Typography variant=\"pi\" textColor=\"neutral600\">\n                    {subtitle}\n                  </Typography>\n                ) : (\n                  subtitle\n                )}\n              </Box>\n              {secondaryAction ? <Box paddingLeft={4}>{secondaryAction}</Box> : null}\n            </Flex>\n            <Flex>{primaryAction ? <Box paddingLeft={2}>{primaryAction}</Box> : undefined}</Flex>\n          </Flex>\n        </Box>\n      );\n    }\n\n    return (\n      <Box\n        ref={ref}\n        paddingLeft={RESPONSIVE_DEFAULT_SPACING}\n        paddingRight={RESPONSIVE_DEFAULT_SPACING}\n        paddingBottom={{\n          initial: 4,\n          large: 8,\n        }}\n        paddingTop={{\n          initial: 4,\n          large: navigationAction ? 6 : 8,\n        }}\n        background=\"neutral100\"\n        data-strapi-header\n      >\n        <Flex direction=\"column\" alignItems=\"initial\" gap={2}>\n          {navigationAction}\n          <Flex justifyContent=\"space-between\" wrap=\"wrap\" gap={4}>\n            <Flex minWidth={0}>\n              <Typography tag=\"h1\" variant=\"alpha\" {...props}>\n                {title}\n              </Typography>\n              {secondaryAction ? <Box paddingLeft={4}>{secondaryAction}</Box> : null}\n            </Flex>\n            {primaryAction}\n          </Flex>\n        </Flex>\n        {isSubtitleString ? (\n          <Typography\n            variant=\"epsilon\"\n            textColor=\"neutral600\"\n            tag=\"p\"\n            paddingTop={{ initial: 4, large: 0 }}\n          >\n            {subtitle}\n          </Typography>\n        ) : (\n          subtitle\n        )}\n      </Box>\n    );\n  }\n);\n\n/* -------------------------------------------------------------------------------------------------\n * HeaderLayout\n * -----------------------------------------------------------------------------------------------*/\n\ninterface HeaderLayoutProps extends BaseHeaderLayoutProps {}\n\nconst HeaderLayout = (props: HeaderLayoutProps) => {\n  const baseHeaderLayoutRef = React.useRef<HTMLDivElement>(null);\n  const [headerSize, setHeaderSize] = React.useState<DOMRect | null>(null);\n  const [isVisible, setIsVisible] = React.useState(true);\n  const deviceType = useDeviceType();\n\n  const containerRef = useElementOnScreen<HTMLDivElement>(setIsVisible, {\n    root: null,\n    rootMargin: '0px',\n    threshold: 0,\n  });\n\n  useResizeObserver([containerRef], () => {\n    if (containerRef.current) {\n      const newSize = containerRef.current.getBoundingClientRect();\n      setHeaderSize((prevSize) => {\n        // Only update if size actually changed\n        if (!prevSize || prevSize.height !== newSize.height || prevSize.width !== newSize.width) {\n          return newSize;\n        }\n        return prevSize;\n      });\n    }\n  });\n\n  React.useEffect(() => {\n    if (containerRef.current) {\n      setHeaderSize(containerRef.current.getBoundingClientRect());\n    }\n  }, [containerRef]);\n\n  if (deviceType === 'mobile') {\n    return <BaseHeaderLayout {...props} />;\n  }\n\n  return (\n    <div ref={containerRef}>\n      <div style={{ height: headerSize?.height }}>\n        {isVisible && <BaseHeaderLayout ref={baseHeaderLayoutRef} {...props} />}\n      </div>\n\n      {!isVisible && <BaseHeaderLayout {...props} sticky width={headerSize?.width} />}\n    </div>\n  );\n};\n\nHeaderLayout.displayName = 'HeaderLayout';\n\n/**\n * useResizeObserver: hook that observes the size of an element and calls a callback when it changes.\n */\nconst useResizeObserver = (\n  sources: React.RefObject<HTMLElement> | React.RefObject<HTMLElement>[],\n  onResize: ResizeObserverCallback\n) => {\n  const handleResize = useCallbackRef(onResize);\n\n  React.useLayoutEffect(() => {\n    const resizeObs = new ResizeObserver(handleResize);\n\n    if (Array.isArray(sources)) {\n      sources.forEach((source) => {\n        if (source.current) {\n          resizeObs.observe(source.current);\n        }\n      });\n    } else if (sources.current) {\n      resizeObs.observe(sources.current);\n    }\n\n    return () => {\n      resizeObs.disconnect();\n    };\n  }, [sources, handleResize]);\n};\n\nexport type { HeaderLayoutProps, BaseHeaderLayoutProps };\nexport { HeaderLayout, BaseHeaderLayout };\n"],"names":["BaseHeaderLayout","React","forwardRef","navigationAction","primaryAction","secondaryAction","subtitle","title","sticky","width","props","ref","isSubtitleString","_jsx","Box","display","paddingLeft","paddingRight","paddingTop","paddingBottom","position","top","background","shadow","zIndex","minHeight","HEIGHT_TOP_NAVIGATION","data-strapi-header-sticky","_jsxs","Flex","alignItems","justifyContent","wrap","Typography","variant","tag","textColor","undefined","RESPONSIVE_DEFAULT_SPACING","initial","large","data-strapi-header","direction","gap","minWidth","HeaderLayout","baseHeaderLayoutRef","useRef","headerSize","setHeaderSize","useState","isVisible","setIsVisible","deviceType","useDeviceType","containerRef","useElementOnScreen","root","rootMargin","threshold","useResizeObserver","current","newSize","getBoundingClientRect","prevSize","height","useEffect","div","style","displayName","sources","onResize","handleResize","useCallbackRef","useLayoutEffect","resizeObs","ResizeObserver","Array","isArray","forEach","source","observe","disconnect"],"mappings":"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"}

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

@@ -232,7 +232,10 @@ const NpsSurvey = ()=>{
                         left: "50%",
                         transform: "translateX(-50%)",
                         zIndex: "200",
-                        width: "50%",
+                        minWidth: {
+                            initial: '100%',
+                            medium: '50%'
+                        },
                         children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Flex, {
                             hasRadius: true,
                             direction: "column",
@@ -379,8 +382,7 @@ const NpsSurvey = ()=>{
                                                 marginBottom: 4,
                                                 width: "100%",
                                                 children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Textarea, {
-                                                    id: "npsSurveyFeedback" // formik element attribute "id" should be same as the values key to work
-                                                    ,
+                                                    id: "npsSurveyFeedback",
                                                     width: "100%",
                                                     onChange: handleChange,
                                                     value: values.npsSurveyFeedback