npm - @strapi/admin - Versions diffs - 5.18.0 → 5.18.1 - Mend

@strapi/admin 5.18.0 → 5.18.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (30) hide show

package/dist/admin/admin/src/components/UnstableGuidedTour/Step.js CHANGED Viewed

@@ -30,8 +30,34 @@ var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
 const ActionsContainer = styled.styled(designSystem.Flex)`
   border-top: ${({ theme })=>`1px solid ${theme.colors.neutral150}`};
 `;
+/**
+ * TODO:
+ * We should probably move all arrow styles + svg to the DS
+ */ const PopoverArrow = styled.styled(designSystem.Popover.Arrow)`
+  fill: ${({ theme })=>theme.colors.neutral0};
+  transform: translateY(-16px) rotate(-90deg);
+`;
+const StepCount = ({ tourName })=>{
+    const state = Context.unstableUseGuidedTour('GuidedTourPopover', (s)=>s.state);
+    const currentStep = state.tours[tourName].currentStep + 1;
+    // TODO: Currently all tours do not count their last step, but we should find a way to make this more smart
+    const displayedLength = state.tours[tourName].length - 1;
+    return /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+        variant: "omega",
+        fontSize: "12px",
+        children: /*#__PURE__*/ jsxRuntime.jsx(reactIntl.FormattedMessage, {
+            id: "tours.stepCount",
+            defaultMessage: "Step {currentStep} of {tourLength}",
+            values: {
+                currentStep,
+                tourLength: displayedLength
+            }
+        })
+    });
+};
 const createStepComponents = (tourName)=>({
-        Root: /*#__PURE__*/ React__namespace.forwardRef((props, ref)=>/*#__PURE__*/ jsxRuntime.jsx(designSystem.Popover.Content, {
+        Root: /*#__PURE__*/ React__namespace.forwardRef(({ withArrow = true, ...props }, ref)=>{
+            return /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Popover.Content, {
                 ref: ref,
                 side: "top",
                 align: "center",
@@ -39,13 +65,29 @@ const createStepComponents = (tourName)=>({
                     border: 'none'
                 },
                 ...props,
-                children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Flex, {
-                    width: "360px",
-                    direction: "column",
-                    alignItems: "start",
-                    children: props.children
-                })
-            })),
+                children: [
+                    withArrow && /*#__PURE__*/ jsxRuntime.jsx(PopoverArrow, {
+                        asChild: true,
+                        children: /*#__PURE__*/ jsxRuntime.jsx("svg", {
+                            xmlns: "http://www.w3.org/2000/svg",
+                            width: "23",
+                            height: "25",
+                            viewBox: "0 0 23 25",
+                            fill: "none",
+                            children: /*#__PURE__*/ jsxRuntime.jsx("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"
+                            })
+                        })
+                    }),
+                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.Flex, {
+                        width: "360px",
+                        direction: "column",
+                        alignItems: "start",
+                        children: props.children
+                    })
+                ]
+            });
+        }),
         Title: (props)=>{
             return /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
                 paddingTop: 5,
@@ -80,31 +122,18 @@ const createStepComponents = (tourName)=>({
                     })
                 })
             }),
-        Actions: ({ showStepCount = true, showSkip = false, to, ...props })=>{
+        Actions: ({ showStepCount = true, showSkip = false, to, children, ...flexProps })=>{
             const dispatch = Context.unstableUseGuidedTour('GuidedTourPopover', (s)=>s.dispatch);
-            const state = Context.unstableUseGuidedTour('GuidedTourPopover', (s)=>s.state);
-            const currentStep = state.tours[tourName].currentStep + 1;
-            // TODO: Currently all tours do not count their last step, but we should find a way to make this more smart
-            const displayedLength = state.tours[tourName].length - 1;
             return /*#__PURE__*/ jsxRuntime.jsx(ActionsContainer, {
                 width: "100%",
                 padding: 3,
                 paddingLeft: 5,
-                children: 'children' in props ? props.children : /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
-                    flex: 1,
-                    justifyContent: showStepCount ? 'space-between' : 'flex-end',
+                justifyContent: showStepCount ? 'space-between' : 'flex-end',
+                ...flexProps,
+                children: children ? children : /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
                     children: [
-                        showStepCount && /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
-                            variant: "omega",
-                            fontSize: "12px",
-                            children: /*#__PURE__*/ jsxRuntime.jsx(reactIntl.FormattedMessage, {
-                                id: "tours.stepCount",
-                                defaultMessage: "Step {currentStep} of {tourLength}",
-                                values: {
-                                    currentStep,
-                                    tourLength: displayedLength
-                                }
-                            })
+                        showStepCount && /*#__PURE__*/ jsxRuntime.jsx(StepCount, {
+                            tourName: tourName
                         }),
                         /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
                             gap: 2,
@@ -149,5 +178,6 @@ const createStepComponents = (tourName)=>({
         }
     });
+exports.StepCount = StepCount;
 exports.createStepComponents = createStepComponents;
 //# sourceMappingURL=Step.js.map

package/dist/admin/admin/src/components/UnstableGuidedTour/Step.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Step.js","sources":["../../../../../../admin/src/components/UnstableGuidedTour/Step.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Popover, Box, Flex, Button, Typography, LinkButton } from '@strapi/design-system';\nimport { FormattedMessage, type MessageDescriptor } from 'react-intl';\nimport { NavLink } from 'react-router-dom';\nimport { styled } from 'styled-components';\n\nimport { unstableUseGuidedTour, ValidTourName } from './Context';\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};\n\ntype WithActionsChildren = {\n children: React.ReactNode;\n showStepCount?: boolean;\n showSkip?: boolean;\n};\n\ntype WithActionsProps = {\n children?: undefined;\n showStepCount?: boolean;\n showSkip?: boolean;\n};\n\ntype StepProps = WithChildren \| WithIntl;\ntype ActionsProps = WithActionsChildren \| WithActionsProps;\n\ntype Step = {\n Root: React.ForwardRefExoticComponent<React.ComponentProps<typeof Popover.Content>>;\n Title: (props: StepProps) => React.ReactNode;\n Content: (props: StepProps) => React.ReactNode;\n Actions: (props: ActionsProps & { to?: string }) => React.ReactNode;\n};\n\nconst ActionsContainer = styled(Flex)`\n border-top: ${({ theme }) => `1px solid ${theme.colors.neutral150}`};\n`;\n\nconst createStepComponents = (tourName: ValidTourName): Step => ({\n Root: React.forwardRef((props, ref) => (\n <Popover.Content ref={ref} side=\"top\" align=\"center\" style={{ border: 'none' }} {...props}>\n <Flex width=\"360px\" direction=\"column\" alignItems=\"start\">\n {props.children}\n </Flex>\n </Popover.Content>\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=\"div\" variant=\"omega\" fontWeight=\"bold\">\n <FormattedMessage tagName=\"h1\" id={props.id} defaultMessage={props.defaultMessage} />\n </Typography>\n )}\n </Box>\n );\n },\n\n Content: (props) => (\n <Box paddingBottom={5} paddingLeft={5} paddingRight={5} width=\"100%\">\n {'children' in props ? (\n props.children\n ) : (\n <Typography tag=\"div\" variant=\"omega\">\n <FormattedMessage tagName=\"p\" id={props.id} defaultMessage={props.defaultMessage} />\n </Typography>\n )}\n </Box>\n ),\n\n Actions: ({ showStepCount = true, showSkip = false, to, ...props }) => {\n const dispatch = unstableUseGuidedTour('GuidedTourPopover', (s) => s.dispatch);\n const state = unstableUseGuidedTour('GuidedTourPopover', (s) => s.state);\n const currentStep = state.tours[tourName].currentStep + 1;\n // TODO: Currently all tours do not count their last step, but we should find a way to make this more smart\n const displayedLength = state.tours[tourName].length - 1;\n\n return (\n <ActionsContainer width=\"100%\" padding={3} paddingLeft={5}>\n {'children' in props ? (\n props.children\n ) : (\n <Flex flex={1} justifyContent={showStepCount ? 'space-between' : 'flex-end'}>\n {showStepCount && (\n <Typography variant=\"omega\" fontSize=\"12px\">\n <FormattedMessage\n id=\"tours.stepCount\"\n defaultMessage=\"Step {currentStep} of {tourLength}\"\n values={{ currentStep, tourLength: displayedLength }}\n />\n </Typography>\n )}\n <Flex gap={2}>\n {showSkip && (\n <Button\n variant=\"tertiary\"\n onClick={() => dispatch({ type: 'skip_tour', payload: tourName })}\n >\n <FormattedMessage id=\"tours.skip\" defaultMessage=\"Skip\" />\n </Button>\n )}\n {to ? (\n <LinkButton\n tag={NavLink}\n to={to}\n onClick={() => dispatch({ type: 'next_step', payload: tourName })}\n >\n <FormattedMessage id=\"tours.next\" defaultMessage=\"Next\" />\n </LinkButton>\n ) : (\n <Button onClick={() => dispatch({ type: 'next_step', payload: tourName })}>\n <FormattedMessage id=\"tours.next\" defaultMessage=\"Next\" />\n </Button>\n )}\n </Flex>\n </Flex>\n )}\n </ActionsContainer>\n );\n },\n});\n\nexport type { Step };\nexport { createStepComponents };\n"],"names":["ActionsContainer","styled","Flex","theme","colors","neutral150","createStepComponents","tourName","Root","React","forwardRef","props","ref","_jsx","Popover","Content","side","align","style","border","width","direction","alignItems","children","Title","Box","paddingTop","paddingLeft","paddingRight","paddingBottom","Typography","tag","variant","fontWeight","FormattedMessage","tagName","id","defaultMessage","Actions","showStepCount","showSkip","to","dispatch","unstableUseGuidedTour","s","state","currentStep","tours","displayedLength","length","padding","_jsxs","flex","justifyContent","fontSize","values","tourLength","gap","Button","onClick","type","payload","LinkButton","NavLink"],"mappings":"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"}
1	+ {"version":3,"file":"Step.js","sources":["../../../../../../admin/src/components/UnstableGuidedTour/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, type MessageDescriptor } from 'react-intl';\nimport { NavLink } from 'react-router-dom';\nimport { styled } from 'styled-components';\n\nimport { unstableUseGuidedTour, ValidTourName } from './Context';\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};\n\ntype WithActionsProps = {\n children?: undefined;\n showStepCount?: boolean;\n showSkip?: 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: (props: StepProps) => 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\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\nexport const StepCount = ({ tourName }: { tourName: ValidTourName }) => {\n const state = unstableUseGuidedTour('GuidedTourPopover', (s) => s.state);\n const currentStep = state.tours[tourName].currentStep + 1;\n // TODO: Currently all tours do not count their last step, but we should find a way to make this more smart\n const displayedLength = state.tours[tourName].length - 1;\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: displayedLength }}\n />\n </Typography>\n );\n};\n\nconst createStepComponents = (tourName: ValidTourName): Step => ({\n Root: React.forwardRef(({ withArrow = true, ...props }, ref) => {\n return (\n <Popover.Content ref={ref} side=\"top\" align=\"center\" style={{ border: 'none' }} {...props}>\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=\"div\" variant=\"omega\" fontWeight=\"bold\">\n <FormattedMessage tagName=\"h1\" id={props.id} defaultMessage={props.defaultMessage} />\n </Typography>\n )}\n </Box>\n );\n },\n\n Content: (props) => (\n <Box paddingBottom={5} paddingLeft={5} paddingRight={5} width=\"100%\">\n {'children' in props ? (\n props.children\n ) : (\n <Typography tag=\"div\" variant=\"omega\">\n <FormattedMessage tagName=\"p\" id={props.id} defaultMessage={props.defaultMessage} />\n </Typography>\n )}\n </Box>\n ),\n\n Actions: ({ showStepCount = true, showSkip = false, to, children, ...flexProps }) => {\n const dispatch = unstableUseGuidedTour('GuidedTourPopover', (s) => s.dispatch);\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 <Flex gap={2}>\n {showSkip && (\n <Button\n variant=\"tertiary\"\n onClick={() => dispatch({ type: 'skip_tour', payload: tourName })}\n >\n <FormattedMessage id=\"tours.skip\" defaultMessage=\"Skip\" />\n </Button>\n )}\n {to ? (\n <LinkButton\n tag={NavLink}\n to={to}\n onClick={() => dispatch({ type: 'next_step', payload: tourName })}\n >\n <FormattedMessage id=\"tours.next\" defaultMessage=\"Next\" />\n </LinkButton>\n ) : (\n <Button onClick={() => dispatch({ type: 'next_step', payload: tourName })}>\n <FormattedMessage id=\"tours.next\" defaultMessage=\"Next\" />\n </Button>\n )}\n </Flex>\n </>\n )}\n </ActionsContainer>\n );\n },\n});\n\nexport type { Step };\nexport { createStepComponents };\n"],"names":["ActionsContainer","styled","Flex","theme","colors","neutral150","PopoverArrow","Popover","Arrow","neutral0","StepCount","tourName","state","unstableUseGuidedTour","s","currentStep","tours","displayedLength","length","_jsx","Typography","variant","fontSize","FormattedMessage","id","defaultMessage","values","tourLength","createStepComponents","Root","React","forwardRef","withArrow","props","ref","_jsxs","Content","side","align","style","border","asChild","svg","xmlns","width","height","viewBox","fill","path","d","direction","alignItems","children","Title","Box","paddingTop","paddingLeft","paddingRight","paddingBottom","tag","fontWeight","tagName","Actions","showStepCount","showSkip","to","flexProps","dispatch","padding","justifyContent","_Fragment","gap","Button","onClick","type","payload","LinkButton","NavLink"],"mappings":"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"}

package/dist/admin/admin/src/components/UnstableGuidedTour/Step.mjs CHANGED Viewed

@@ -1,6 +1,6 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
-import { Flex, Popover, Box, Typography, Button, LinkButton } from '@strapi/design-system';
+import { Flex, Popover, Typography, Box, Button, LinkButton } from '@strapi/design-system';
 import { FormattedMessage } from 'react-intl';
 import { NavLink } from 'react-router-dom';
 import { styled } from 'styled-components';
@@ -9,8 +9,34 @@ import { unstableUseGuidedTour } from './Context.mjs';
 const ActionsContainer = styled(Flex)`
   border-top: ${({ theme })=>`1px solid ${theme.colors.neutral150}`};
 `;
+/**
+ * TODO:
+ * We should probably move all arrow styles + svg to the DS
+ */ const PopoverArrow = styled(Popover.Arrow)`
+  fill: ${({ theme })=>theme.colors.neutral0};
+  transform: translateY(-16px) rotate(-90deg);
+`;
+const StepCount = ({ tourName })=>{
+    const state = unstableUseGuidedTour('GuidedTourPopover', (s)=>s.state);
+    const currentStep = state.tours[tourName].currentStep + 1;
+    // TODO: Currently all tours do not count their last step, but we should find a way to make this more smart
+    const displayedLength = state.tours[tourName].length - 1;
+    return /*#__PURE__*/ jsx(Typography, {
+        variant: "omega",
+        fontSize: "12px",
+        children: /*#__PURE__*/ jsx(FormattedMessage, {
+            id: "tours.stepCount",
+            defaultMessage: "Step {currentStep} of {tourLength}",
+            values: {
+                currentStep,
+                tourLength: displayedLength
+            }
+        })
+    });
+};
 const createStepComponents = (tourName)=>({
-        Root: /*#__PURE__*/ React.forwardRef((props, ref)=>/*#__PURE__*/ jsx(Popover.Content, {
+        Root: /*#__PURE__*/ React.forwardRef(({ withArrow = true, ...props }, ref)=>{
+            return /*#__PURE__*/ jsxs(Popover.Content, {
                 ref: ref,
                 side: "top",
                 align: "center",
@@ -18,13 +44,29 @@ const createStepComponents = (tourName)=>({
                     border: 'none'
                 },
                 ...props,
-                children: /*#__PURE__*/ jsx(Flex, {
-                    width: "360px",
-                    direction: "column",
-                    alignItems: "start",
-                    children: props.children
-                })
-            })),
+                children: [
+                    withArrow && /*#__PURE__*/ jsx(PopoverArrow, {
+                        asChild: true,
+                        children: /*#__PURE__*/ jsx("svg", {
+                            xmlns: "http://www.w3.org/2000/svg",
+                            width: "23",
+                            height: "25",
+                            viewBox: "0 0 23 25",
+                            fill: "none",
+                            children: /*#__PURE__*/ jsx("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"
+                            })
+                        })
+                    }),
+                    /*#__PURE__*/ jsx(Flex, {
+                        width: "360px",
+                        direction: "column",
+                        alignItems: "start",
+                        children: props.children
+                    })
+                ]
+            });
+        }),
         Title: (props)=>{
             return /*#__PURE__*/ jsx(Box, {
                 paddingTop: 5,
@@ -59,31 +101,18 @@ const createStepComponents = (tourName)=>({
                     })
                 })
             }),
-        Actions: ({ showStepCount = true, showSkip = false, to, ...props })=>{
+        Actions: ({ showStepCount = true, showSkip = false, to, children, ...flexProps })=>{
             const dispatch = unstableUseGuidedTour('GuidedTourPopover', (s)=>s.dispatch);
-            const state = unstableUseGuidedTour('GuidedTourPopover', (s)=>s.state);
-            const currentStep = state.tours[tourName].currentStep + 1;
-            // TODO: Currently all tours do not count their last step, but we should find a way to make this more smart
-            const displayedLength = state.tours[tourName].length - 1;
             return /*#__PURE__*/ jsx(ActionsContainer, {
                 width: "100%",
                 padding: 3,
                 paddingLeft: 5,
-                children: 'children' in props ? props.children : /*#__PURE__*/ jsxs(Flex, {
-                    flex: 1,
-                    justifyContent: showStepCount ? 'space-between' : 'flex-end',
+                justifyContent: showStepCount ? 'space-between' : 'flex-end',
+                ...flexProps,
+                children: children ? children : /*#__PURE__*/ jsxs(Fragment, {
                     children: [
-                        showStepCount && /*#__PURE__*/ jsx(Typography, {
-                            variant: "omega",
-                            fontSize: "12px",
-                            children: /*#__PURE__*/ jsx(FormattedMessage, {
-                                id: "tours.stepCount",
-                                defaultMessage: "Step {currentStep} of {tourLength}",
-                                values: {
-                                    currentStep,
-                                    tourLength: displayedLength
-                                }
-                            })
+                        showStepCount && /*#__PURE__*/ jsx(StepCount, {
+                            tourName: tourName
                         }),
                         /*#__PURE__*/ jsxs(Flex, {
                             gap: 2,
@@ -128,5 +157,5 @@ const createStepComponents = (tourName)=>({
         }
     });
-export { createStepComponents };
+export { StepCount, createStepComponents };
 //# sourceMappingURL=Step.mjs.map

package/dist/admin/admin/src/components/UnstableGuidedTour/Step.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Step.mjs","sources":["../../../../../../admin/src/components/UnstableGuidedTour/Step.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Popover, Box, Flex, Button, Typography, LinkButton } from '@strapi/design-system';\nimport { FormattedMessage, type MessageDescriptor } from 'react-intl';\nimport { NavLink } from 'react-router-dom';\nimport { styled } from 'styled-components';\n\nimport { unstableUseGuidedTour, ValidTourName } from './Context';\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};\n\ntype WithActionsChildren = {\n children: React.ReactNode;\n showStepCount?: boolean;\n showSkip?: boolean;\n};\n\ntype WithActionsProps = {\n children?: undefined;\n showStepCount?: boolean;\n showSkip?: boolean;\n};\n\ntype StepProps = WithChildren \| WithIntl;\ntype ActionsProps = WithActionsChildren \| WithActionsProps;\n\ntype Step = {\n Root: React.ForwardRefExoticComponent<React.ComponentProps<typeof Popover.Content>>;\n Title: (props: StepProps) => React.ReactNode;\n Content: (props: StepProps) => React.ReactNode;\n Actions: (props: ActionsProps & { to?: string }) => React.ReactNode;\n};\n\nconst ActionsContainer = styled(Flex)`\n border-top: ${({ theme }) => `1px solid ${theme.colors.neutral150}`};\n`;\n\nconst createStepComponents = (tourName: ValidTourName): Step => ({\n Root: React.forwardRef((props, ref) => (\n <Popover.Content ref={ref} side=\"top\" align=\"center\" style={{ border: 'none' }} {...props}>\n <Flex width=\"360px\" direction=\"column\" alignItems=\"start\">\n {props.children}\n </Flex>\n </Popover.Content>\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=\"div\" variant=\"omega\" fontWeight=\"bold\">\n <FormattedMessage tagName=\"h1\" id={props.id} defaultMessage={props.defaultMessage} />\n </Typography>\n )}\n </Box>\n );\n },\n\n Content: (props) => (\n <Box paddingBottom={5} paddingLeft={5} paddingRight={5} width=\"100%\">\n {'children' in props ? (\n props.children\n ) : (\n <Typography tag=\"div\" variant=\"omega\">\n <FormattedMessage tagName=\"p\" id={props.id} defaultMessage={props.defaultMessage} />\n </Typography>\n )}\n </Box>\n ),\n\n Actions: ({ showStepCount = true, showSkip = false, to, ...props }) => {\n const dispatch = unstableUseGuidedTour('GuidedTourPopover', (s) => s.dispatch);\n const state = unstableUseGuidedTour('GuidedTourPopover', (s) => s.state);\n const currentStep = state.tours[tourName].currentStep + 1;\n // TODO: Currently all tours do not count their last step, but we should find a way to make this more smart\n const displayedLength = state.tours[tourName].length - 1;\n\n return (\n <ActionsContainer width=\"100%\" padding={3} paddingLeft={5}>\n {'children' in props ? (\n props.children\n ) : (\n <Flex flex={1} justifyContent={showStepCount ? 'space-between' : 'flex-end'}>\n {showStepCount && (\n <Typography variant=\"omega\" fontSize=\"12px\">\n <FormattedMessage\n id=\"tours.stepCount\"\n defaultMessage=\"Step {currentStep} of {tourLength}\"\n values={{ currentStep, tourLength: displayedLength }}\n />\n </Typography>\n )}\n <Flex gap={2}>\n {showSkip && (\n <Button\n variant=\"tertiary\"\n onClick={() => dispatch({ type: 'skip_tour', payload: tourName })}\n >\n <FormattedMessage id=\"tours.skip\" defaultMessage=\"Skip\" />\n </Button>\n )}\n {to ? (\n <LinkButton\n tag={NavLink}\n to={to}\n onClick={() => dispatch({ type: 'next_step', payload: tourName })}\n >\n <FormattedMessage id=\"tours.next\" defaultMessage=\"Next\" />\n </LinkButton>\n ) : (\n <Button onClick={() => dispatch({ type: 'next_step', payload: tourName })}>\n <FormattedMessage id=\"tours.next\" defaultMessage=\"Next\" />\n </Button>\n )}\n </Flex>\n </Flex>\n )}\n </ActionsContainer>\n );\n },\n});\n\nexport type { Step };\nexport { createStepComponents };\n"],"names":["ActionsContainer","styled","Flex","theme","colors","neutral150","createStepComponents","tourName","Root","React","forwardRef","props","ref","_jsx","Popover","Content","side","align","style","border","width","direction","alignItems","children","Title","Box","paddingTop","paddingLeft","paddingRight","paddingBottom","Typography","tag","variant","fontWeight","FormattedMessage","tagName","id","defaultMessage","Actions","showStepCount","showSkip","to","dispatch","unstableUseGuidedTour","s","state","currentStep","tours","displayedLength","length","padding","_jsxs","flex","justifyContent","fontSize","values","tourLength","gap","Button","onClick","type","payload","LinkButton","NavLink"],"mappings":"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"}
1	+ {"version":3,"file":"Step.mjs","sources":["../../../../../../admin/src/components/UnstableGuidedTour/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, type MessageDescriptor } from 'react-intl';\nimport { NavLink } from 'react-router-dom';\nimport { styled } from 'styled-components';\n\nimport { unstableUseGuidedTour, ValidTourName } from './Context';\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};\n\ntype WithActionsProps = {\n children?: undefined;\n showStepCount?: boolean;\n showSkip?: 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: (props: StepProps) => 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\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\nexport const StepCount = ({ tourName }: { tourName: ValidTourName }) => {\n const state = unstableUseGuidedTour('GuidedTourPopover', (s) => s.state);\n const currentStep = state.tours[tourName].currentStep + 1;\n // TODO: Currently all tours do not count their last step, but we should find a way to make this more smart\n const displayedLength = state.tours[tourName].length - 1;\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: displayedLength }}\n />\n </Typography>\n );\n};\n\nconst createStepComponents = (tourName: ValidTourName): Step => ({\n Root: React.forwardRef(({ withArrow = true, ...props }, ref) => {\n return (\n <Popover.Content ref={ref} side=\"top\" align=\"center\" style={{ border: 'none' }} {...props}>\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=\"div\" variant=\"omega\" fontWeight=\"bold\">\n <FormattedMessage tagName=\"h1\" id={props.id} defaultMessage={props.defaultMessage} />\n </Typography>\n )}\n </Box>\n );\n },\n\n Content: (props) => (\n <Box paddingBottom={5} paddingLeft={5} paddingRight={5} width=\"100%\">\n {'children' in props ? (\n props.children\n ) : (\n <Typography tag=\"div\" variant=\"omega\">\n <FormattedMessage tagName=\"p\" id={props.id} defaultMessage={props.defaultMessage} />\n </Typography>\n )}\n </Box>\n ),\n\n Actions: ({ showStepCount = true, showSkip = false, to, children, ...flexProps }) => {\n const dispatch = unstableUseGuidedTour('GuidedTourPopover', (s) => s.dispatch);\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 <Flex gap={2}>\n {showSkip && (\n <Button\n variant=\"tertiary\"\n onClick={() => dispatch({ type: 'skip_tour', payload: tourName })}\n >\n <FormattedMessage id=\"tours.skip\" defaultMessage=\"Skip\" />\n </Button>\n )}\n {to ? (\n <LinkButton\n tag={NavLink}\n to={to}\n onClick={() => dispatch({ type: 'next_step', payload: tourName })}\n >\n <FormattedMessage id=\"tours.next\" defaultMessage=\"Next\" />\n </LinkButton>\n ) : (\n <Button onClick={() => dispatch({ type: 'next_step', payload: tourName })}>\n <FormattedMessage id=\"tours.next\" defaultMessage=\"Next\" />\n </Button>\n )}\n </Flex>\n </>\n )}\n </ActionsContainer>\n );\n },\n});\n\nexport type { Step };\nexport { createStepComponents };\n"],"names":["ActionsContainer","styled","Flex","theme","colors","neutral150","PopoverArrow","Popover","Arrow","neutral0","StepCount","tourName","state","unstableUseGuidedTour","s","currentStep","tours","displayedLength","length","_jsx","Typography","variant","fontSize","FormattedMessage","id","defaultMessage","values","tourLength","createStepComponents","Root","React","forwardRef","withArrow","props","ref","_jsxs","Content","side","align","style","border","asChild","svg","xmlns","width","height","viewBox","fill","path","d","direction","alignItems","children","Title","Box","paddingTop","paddingLeft","paddingRight","paddingBottom","tag","fontWeight","tagName","Actions","showStepCount","showSkip","to","flexProps","dispatch","padding","justifyContent","_Fragment","gap","Button","onClick","type","payload","LinkButton","NavLink"],"mappings":"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"}

package/dist/admin/admin/src/components/UnstableGuidedTour/Tours.js CHANGED Viewed

@@ -4,7 +4,6 @@ var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var designSystem = require('@strapi/design-system');
 var reactIntl = require('react-intl');
-var reactRouterDom = require('react-router-dom');
 var styled = require('styled-components');
 var admin = require('../../services/admin.js');
 var Context = require('./Context.js');
@@ -31,12 +30,22 @@ var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
 /* -------------------------------------------------------------------------------------------------
  * Tours
- * -----------------------------------------------------------------------------------------------*/ const tours = {
+ * -----------------------------------------------------------------------------------------------*/ const GotItAction = ({ onClick })=>{
+    return /*#__PURE__*/ jsxRuntime.jsx(designSystem.Button, {
+        onClick: onClick,
+        children: /*#__PURE__*/ jsxRuntime.jsx(reactIntl.FormattedMessage, {
+            id: "tours.gotIt",
+            defaultMessage: "Got it"
+        })
+    });
+};
+const tours = {
     contentTypeBuilder: createTour('contentTypeBuilder', [
         {
             name: 'Introduction',
             content: (Step)=>/*#__PURE__*/ jsxRuntime.jsxs(Step.Root, {
                     side: "bottom",
+                    withArrow: false,
                     children: [
                         /*#__PURE__*/ jsxRuntime.jsx(Step.Title, {
                             id: "tours.contentTypeBuilder.Introduction.title",
@@ -56,7 +65,7 @@ var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
             name: 'CollectionTypes',
             content: (Step)=>/*#__PURE__*/ jsxRuntime.jsxs(Step.Root, {
                     side: "right",
-                    sideOffset: 26,
+                    sideOffset: 16,
                     children: [
                         /*#__PURE__*/ jsxRuntime.jsx(Step.Title, {
                             id: "tours.contentTypeBuilder.CollectionTypes.title",
@@ -64,7 +73,7 @@ var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
                         }),
                         /*#__PURE__*/ jsxRuntime.jsx(Step.Content, {
                             id: "tours.contentTypeBuilder.CollectionTypes.content",
-                            defaultMessage: "Create and manage your content structure with collection types, single types and components."
+                            defaultMessage: "A content structure that can manage multiple entries, such as articles or products."
                         }),
                         /*#__PURE__*/ jsxRuntime.jsx(Step.Actions, {})
                     ]
@@ -74,7 +83,7 @@ var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
             name: 'SingleTypes',
             content: (Step)=>/*#__PURE__*/ jsxRuntime.jsxs(Step.Root, {
                     side: "right",
-                    sideOffset: 26,
+                    sideOffset: 16,
                     children: [
                         /*#__PURE__*/ jsxRuntime.jsx(Step.Title, {
                             id: "tours.contentTypeBuilder.SingleTypes.title",
@@ -90,9 +99,9 @@ var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
         },
         {
             name: 'Components',
-            content: (Step)=>/*#__PURE__*/ jsxRuntime.jsxs(Step.Root, {
+            content: (Step, { dispatch })=>/*#__PURE__*/ jsxRuntime.jsxs(Step.Root, {
                     side: "right",
-                    sideOffset: 26,
+                    sideOffset: 16,
                     children: [
                         /*#__PURE__*/ jsxRuntime.jsx(Step.Title, {
                             id: "tours.contentTypeBuilder.Components.title",
@@ -102,7 +111,15 @@ var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
                             id: "tours.contentTypeBuilder.Components.content",
                             defaultMessage: "A reusable content structure that can be used across multiple content types, such as buttons, sliders or cards."
                         }),
-                        /*#__PURE__*/ jsxRuntime.jsx(Step.Actions, {})
+                        /*#__PURE__*/ jsxRuntime.jsx(Step.Actions, {
+                            justifyContent: "flex-end",
+                            children: /*#__PURE__*/ jsxRuntime.jsx(GotItAction, {
+                                onClick: ()=>dispatch({
+                                        type: 'next_step',
+                                        payload: 'contentTypeBuilder'
+                                    })
+                            })
+                        })
                     ]
                 })
         },
@@ -110,7 +127,6 @@ var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
             name: 'Finish',
             content: (Step)=>/*#__PURE__*/ jsxRuntime.jsxs(Step.Root, {
                     side: "right",
-                    sideOffset: 32,
                     children: [
                         /*#__PURE__*/ jsxRuntime.jsx(Step.Title, {
                             id: "tours.contentTypeBuilder.Finish.title",
@@ -132,8 +148,10 @@ var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
     contentManager: createTour('contentManager', [
         {
             name: 'Introduction',
+            when: (completedActions)=>completedActions.includes('didCreateContentTypeSchema') && !completedActions.includes('didCreateContent'),
             content: (Step)=>/*#__PURE__*/ jsxRuntime.jsxs(Step.Root, {
                     side: "top",
+                    withArrow: false,
                     children: [
                         /*#__PURE__*/ jsxRuntime.jsx(Step.Title, {
                             id: "tours.contentManager.Introduction.title",
@@ -152,9 +170,7 @@ var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
         {
             name: 'Fields',
             content: (Step)=>/*#__PURE__*/ jsxRuntime.jsxs(Step.Root, {
-                    side: 'top',
-                    align: "start",
-                    sideOffset: -36,
+                    sideOffset: -12,
                     children: [
                         /*#__PURE__*/ jsxRuntime.jsx(Step.Title, {
                             id: "tours.contentManager.Fields.title",
@@ -170,10 +186,9 @@ var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
         },
         {
             name: 'Publish',
-            content: (Step)=>/*#__PURE__*/ jsxRuntime.jsxs(Step.Root, {
+            content: (Step, { dispatch })=>/*#__PURE__*/ jsxRuntime.jsxs(Step.Root, {
                     side: "left",
                     align: "center",
-                    sideOffset: 20,
                     children: [
                         /*#__PURE__*/ jsxRuntime.jsx(Step.Title, {
                             id: "tours.contentManager.Publish.title",
@@ -183,7 +198,15 @@ var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
                             id: "tours.contentManager.Publish.content",
                             defaultMessage: "Publish entries to make their content available through the Document Service API."
                         }),
-                        /*#__PURE__*/ jsxRuntime.jsx(Step.Actions, {})
+                        /*#__PURE__*/ jsxRuntime.jsx(Step.Actions, {
+                            justifyContent: "flex-end",
+                            children: /*#__PURE__*/ jsxRuntime.jsx(GotItAction, {
+                                onClick: ()=>dispatch({
+                                        type: 'next_step',
+                                        payload: 'contentManager'
+                                    })
+                            })
+                        })
                     ]
                 })
         },
@@ -191,7 +214,6 @@ var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
             name: 'Finish',
             content: (Step)=>/*#__PURE__*/ jsxRuntime.jsxs(Step.Root, {
                     side: "right",
-                    sideOffset: 32,
                     children: [
                         /*#__PURE__*/ jsxRuntime.jsx(Step.Title, {
                             id: "tours.contentManager.FinalStep.title",
@@ -213,8 +235,10 @@ var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
     apiTokens: createTour('apiTokens', [
         {
             name: 'Introduction',
+            when: (completedActions)=>!completedActions.includes('didCreateApiToken'),
             content: (Step)=>/*#__PURE__*/ jsxRuntime.jsxs(Step.Root, {
                     sideOffset: -36,
+                    withArrow: false,
                     children: [
                         /*#__PURE__*/ jsxRuntime.jsx(Step.Title, {
                             id: "tours.apiTokens.Introduction.title",
@@ -228,15 +252,14 @@ var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
                             showSkip: true
                         })
                     ]
-                }),
-            when: (completedActions)=>!completedActions.includes('didCreateApiToken')
+                })
         },
         {
             name: 'CreateAnAPIToken',
             content: (Step)=>/*#__PURE__*/ jsxRuntime.jsxs(Step.Root, {
                     side: "bottom",
-                    sideOffset: 20,
                     align: "end",
+                    sideOffset: -10,
                     children: [
                         /*#__PURE__*/ jsxRuntime.jsx(Step.Title, {
                             id: "tours.apiTokens.CreateAnAPIToken.title",
@@ -252,31 +275,41 @@ var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
         },
         {
             name: 'CopyAPIToken',
-            content: (Step)=>/*#__PURE__*/ jsxRuntime.jsxs(Step.Root, {
+            content: (Step$1, { dispatch })=>/*#__PURE__*/ jsxRuntime.jsxs(Step$1.Root, {
                     side: "bottom",
                     align: "start",
+                    sideOffset: -5,
                     children: [
-                        /*#__PURE__*/ jsxRuntime.jsx(Step.Title, {
+                        /*#__PURE__*/ jsxRuntime.jsx(Step$1.Title, {
                             id: "tours.apiTokens.CopyAPIToken.title",
                             defaultMessage: "Copy your new API token"
                         }),
-                        /*#__PURE__*/ jsxRuntime.jsx(Step.Content, {
+                        /*#__PURE__*/ jsxRuntime.jsx(Step$1.Content, {
                             id: "tours.apiTokens.CopyAPIToken.content",
                             defaultMessage: "Make sure to do it now, you won’t be able to see it again. You’ll need to generate a new one if you lose it."
                         }),
-                        /*#__PURE__*/ jsxRuntime.jsx(Step.Actions, {})
+                        /*#__PURE__*/ jsxRuntime.jsxs(Step$1.Actions, {
+                            children: [
+                                /*#__PURE__*/ jsxRuntime.jsx(Step.StepCount, {
+                                    tourName: "apiTokens"
+                                }),
+                                /*#__PURE__*/ jsxRuntime.jsx(GotItAction, {
+                                    onClick: ()=>dispatch({
+                                            type: 'next_step',
+                                            payload: 'apiTokens'
+                                        })
+                                })
+                            ]
+                        })
                     ]
                 }),
             when: (completedActions)=>completedActions.includes('didCreateApiToken')
         },
         {
             name: 'Finish',
-            content: (Step)=>{
-                const dispatch = Context.unstableUseGuidedTour('GuidedTourPopover', (s)=>s.dispatch);
-                return /*#__PURE__*/ jsxRuntime.jsxs(Step.Root, {
+            content: (Step)=>/*#__PURE__*/ jsxRuntime.jsxs(Step.Root, {
                     side: "right",
                     align: "start",
-                    sideOffset: 32,
                     children: [
                         /*#__PURE__*/ jsxRuntime.jsx(Step.Title, {
                             id: "tours.apiTokens.FinalStep.title",
@@ -288,28 +321,10 @@ var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
                         }),
                         /*#__PURE__*/ jsxRuntime.jsx(Step.Actions, {
                             showStepCount: false,
-                            children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Flex, {
-                                justifyContent: "end",
-                                width: '100%',
-                                children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.LinkButton, {
-                                    onClick: ()=>{
-                                        dispatch({
-                                            type: 'next_step',
-                                            payload: 'apiTokens'
-                                        });
-                                    },
-                                    tag: reactRouterDom.NavLink,
-                                    to: "/",
-                                    children: /*#__PURE__*/ jsxRuntime.jsx(reactIntl.FormattedMessage, {
-                                        id: "tours.gotIt",
-                                        defaultMessage: "Got it"
-                                    })
-                                })
-                            })
+                            to: "/"
                         })
                     ]
-                });
-            },
+                }),
             when: (completedActions)=>completedActions.includes('didCopyApiToken')
         }
     ]),