@strapi/admin 5.26.0 → 5.28.0

package/dist/admin/admin/src/components/GuidedTour/Tours.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tours.js","sources":["../../../../../../admin/src/components/GuidedTour/Tours.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Box, Popover, Portal } from '@strapi/design-system';\nimport { styled } from 'styled-components';\n\nimport { useGetGuidedTourMetaQuery } from '../../services/admin';\n\nimport { type State, type Action, useGuidedTour, ValidTourName, CompletedActions } from './Context';\nimport { apiTokensSteps } from './Steps/ApiTokensSteps';\nimport { contentManagerSteps } from './Steps/ContentManagerSteps';\nimport { contentTypeBuilderSteps } from './Steps/ContentTypeBuilderSteps';\nimport { type Step, createStepComponents } from './Steps/Step';\nimport { GUIDED_TOUR_REQUIRED_ACTIONS } from './utils/constants';\n\n/* -------------------------------------------------------------------------------------------------\n * Tours\n * -----------------------------------------------------------------------------------------------*/\n\nconst tours = {\n  contentTypeBuilder: createTour('contentTypeBuilder', contentTypeBuilderSteps),\n  contentManager: createTour('contentManager', contentManagerSteps),\n  apiTokens: createTour('apiTokens', apiTokensSteps),\n  strapiCloud: createTour('strapiCloud', []),\n} as const;\n\ntype Tours = typeof tours;\n\n/* -------------------------------------------------------------------------------------------------\n * GuidedTourTooltip\n * -----------------------------------------------------------------------------------------------*/\n\nexport type StepContentProps = {\n  Step: Step;\n  state: State;\n  dispatch: React.Dispatch<Action>;\n};\ntype Content = (props: StepContentProps) => React.ReactNode;\n\ntype GuidedTourTooltipProps = {\n  children: React.ReactNode;\n  content: Content;\n  tourName: ValidTourName;\n  step: number;\n  when?: (completedActions: CompletedActions) => boolean;\n};\n\nconst GuidedTourTooltip = ({ children, ...props }: GuidedTourTooltipProps) => {\n  const state = useGuidedTour('TooltipWrapper', (s) => s.state);\n\n  if (!state.enabled) {\n    return children;\n  }\n\n  return <GuidedTourTooltipImpl {...props}>{children}</GuidedTourTooltipImpl>;\n};\n\nconst GuidedTourOverlay = styled(Box)`\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background-color: rgba(50, 50, 77, 0.2);\n  z-index: 10;\n`;\n\nconst GuidedTourTooltipImpl = ({\n  children,\n  content,\n  tourName,\n  step,\n  when,\n}: GuidedTourTooltipProps) => {\n  const { data: guidedTourMeta } = useGetGuidedTourMetaQuery();\n\n  const state = useGuidedTour('GuidedTourTooltip', (s) => s.state);\n  const dispatch = useGuidedTour('GuidedTourTooltip', (s) => s.dispatch);\n\n  const isCurrentStep = state.tours[tourName].currentStep === step;\n  const isStepConditionMet = when ? when(state.completedActions) : true;\n  const isPopoverOpen =\n    guidedTourMeta?.data?.isFirstSuperAdminUser &&\n    !state.tours[tourName].isCompleted &&\n    isCurrentStep &&\n    isStepConditionMet;\n\n  // Lock the scroll\n  React.useEffect(() => {\n    if (!isPopoverOpen) return;\n\n    const originalStyle = window.getComputedStyle(document.body).overflow;\n    document.body.style.overflow = 'hidden';\n\n    return () => {\n      document.body.style.overflow = originalStyle;\n    };\n  }, [isPopoverOpen]);\n\n  const Step = React.useMemo(() => createStepComponents(tourName), [tourName]);\n\n  const hasApiSchema =\n    Object.keys(guidedTourMeta?.data?.schemas ?? {}).filter((key) => key.startsWith('api::'))\n      .length > 0;\n\n  React.useEffect(() => {\n    if (hasApiSchema) {\n      /**\n       * Fallback sync:\n       *\n       * When the user already has a schema (ie started project from template with seeded data),\n       * allow them to proceed to the content manager tour.\n       *\n       * When the CTB fails to restart after saving a schema (as it often does)\n       */\n      dispatch({\n        type: 'set_completed_actions',\n        payload: [GUIDED_TOUR_REQUIRED_ACTIONS.contentTypeBuilder.createSchema],\n      });\n    }\n  }, [dispatch, hasApiSchema, step, tourName]);\n\n  return (\n    <>\n      {isPopoverOpen && (\n        <Portal>\n          <GuidedTourOverlay />\n        </Portal>\n      )}\n      <Popover.Root open={isPopoverOpen}>\n        <Popover.Anchor>{children}</Popover.Anchor>\n        {content({ Step, state, dispatch })}\n      </Popover.Root>\n    </>\n  );\n};\n\n/* -------------------------------------------------------------------------------------------------\n * Tour factory\n * -----------------------------------------------------------------------------------------------*/\n\nexport type TourStep<P extends string> = {\n  name: P;\n  content: Content;\n  when?: (completedActions: CompletedActions) => boolean;\n  excludeFromStepCount?: boolean;\n};\n\nexport function createTour<const T extends ReadonlyArray<TourStep<string>>>(\n  tourName: string,\n  steps: T\n) {\n  type Components = {\n    [K in T[number]['name']]: React.ComponentType<{ children: React.ReactNode }>;\n  };\n\n  const tour = steps.reduce(\n    (acc, step, index) => {\n      const name = step.name as keyof Components;\n\n      if (name in acc) {\n        throw Error(`The tour: ${tourName} with step: ${step.name} has already been registered`);\n      }\n\n      (acc as Components)[name] = ({ children }: { children: React.ReactNode }) => {\n        return (\n          <GuidedTourTooltip\n            tourName={tourName as ValidTourName}\n            step={index}\n            content={step.content}\n            when={step.when}\n          >\n            {children}\n          </GuidedTourTooltip>\n        );\n      };\n\n      if (step.excludeFromStepCount) {\n        // Subtract all steps registered to be excluded from the step count\n        acc._meta.displayedStepCount--;\n      }\n\n      return acc;\n    },\n    { _meta: { totalStepCount: steps.length, displayedStepCount: steps.length } } as Components & {\n      _meta: { totalStepCount: number; displayedStepCount: number };\n    }\n  );\n\n  return tour;\n}\n\nexport type { Content, Tours };\nexport { tours };\n"],"names":["tours","contentTypeBuilder","createTour","contentTypeBuilderSteps","contentManager","contentManagerSteps","apiTokens","apiTokensSteps","strapiCloud","GuidedTourTooltip","children","props","state","useGuidedTour","s","enabled","_jsx","GuidedTourTooltipImpl","GuidedTourOverlay","styled","Box","content","tourName","step","when","data","guidedTourMeta","useGetGuidedTourMetaQuery","dispatch","isCurrentStep","currentStep","isStepConditionMet","completedActions","isPopoverOpen","isFirstSuperAdminUser","isCompleted","React","useEffect","originalStyle","window","getComputedStyle","document","body","overflow","style","Step","useMemo","createStepComponents","hasApiSchema","Object","keys","schemas","filter","key","startsWith","length","type","payload","GUIDED_TOUR_REQUIRED_ACTIONS","createSchema","_jsxs","_Fragment","Portal","Popover","Root","open","Anchor","steps","tour","reduce","acc","index","name","Error","excludeFromStepCount","_meta","displayedStepCount","totalStepCount"],"mappings":"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"}
+{"version":3,"file":"Tours.js","sources":["../../../../../../admin/src/components/GuidedTour/Tours.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Box, Popover, Portal } from '@strapi/design-system';\nimport { styled } from 'styled-components';\n\nimport { useGetGuidedTourMetaQuery } from '../../services/admin';\n\nimport { type State, type Action, useGuidedTour, ValidTourName, CompletedActions } from './Context';\nimport { apiTokensSteps } from './Steps/ApiTokensSteps';\nimport { contentManagerSteps } from './Steps/ContentManagerSteps';\nimport { contentTypeBuilderSteps } from './Steps/ContentTypeBuilderSteps';\nimport { type Step, createStepComponents } from './Steps/Step';\nimport { GUIDED_TOUR_REQUIRED_ACTIONS } from './utils/constants';\n\n/* -------------------------------------------------------------------------------------------------\n * Tours\n * -----------------------------------------------------------------------------------------------*/\n\nconst tours = {\n  contentTypeBuilder: createTour('contentTypeBuilder', contentTypeBuilderSteps),\n  contentManager: createTour('contentManager', contentManagerSteps),\n  apiTokens: createTour('apiTokens', apiTokensSteps),\n  strapiCloud: createTour('strapiCloud', []),\n} as const;\n\ntype Tours = typeof tours;\n\n/* -------------------------------------------------------------------------------------------------\n * GuidedTourTooltip\n * -----------------------------------------------------------------------------------------------*/\n\nexport type StepContentProps = {\n  Step: Step;\n  state: State;\n  dispatch: React.Dispatch<Action>;\n};\ntype Content = (props: StepContentProps) => React.ReactNode;\n\ntype GuidedTourTooltipProps = {\n  children: React.ReactNode;\n  content: Content;\n  tourName: ValidTourName;\n  step: number;\n  when?: (completedActions: CompletedActions) => boolean;\n};\n\nconst GuidedTourTooltip = ({ children, ...props }: GuidedTourTooltipProps) => {\n  const state = useGuidedTour('TooltipWrapper', (s) => s.state);\n\n  if (!state.enabled || state.hidden) {\n    return children;\n  }\n\n  return <GuidedTourTooltipImpl {...props}>{children}</GuidedTourTooltipImpl>;\n};\n\nconst GuidedTourOverlay = styled(Box)`\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background-color: rgba(50, 50, 77, 0.2);\n  z-index: 10;\n`;\n\nconst GuidedTourTooltipImpl = ({\n  children,\n  content,\n  tourName,\n  step,\n  when,\n}: GuidedTourTooltipProps) => {\n  const { data: guidedTourMeta } = useGetGuidedTourMetaQuery();\n  const state = useGuidedTour('GuidedTourTooltip', (s) => s.state);\n  const dispatch = useGuidedTour('GuidedTourTooltip', (s) => s.dispatch);\n\n  const isCurrentStep = state.tours[tourName].currentStep === step;\n  const isStepConditionMet = when ? when(state.completedActions) : true;\n  const isPopoverOpen =\n    guidedTourMeta?.data?.isFirstSuperAdminUser &&\n    !state.tours[tourName].isCompleted &&\n    isCurrentStep &&\n    isStepConditionMet;\n\n  // Lock the scroll\n  React.useEffect(() => {\n    if (!isPopoverOpen) return;\n\n    const originalStyle = window.getComputedStyle(document.body).overflow;\n    document.body.style.overflow = 'hidden';\n\n    return () => {\n      document.body.style.overflow = originalStyle;\n    };\n  }, [isPopoverOpen]);\n\n  const Step = React.useMemo(() => createStepComponents(tourName), [tourName]);\n\n  const hasApiSchema =\n    Object.keys(guidedTourMeta?.data?.schemas ?? {}).filter((key) => key.startsWith('api::'))\n      .length > 0;\n\n  React.useEffect(() => {\n    if (hasApiSchema) {\n      /**\n       * Fallback sync:\n       *\n       * When the user already has a schema (ie started project from template with seeded data),\n       * allow them to proceed to the content manager tour.\n       *\n       * When the CTB fails to restart after saving a schema (as it often does)\n       */\n      dispatch({\n        type: 'set_completed_actions',\n        payload: [GUIDED_TOUR_REQUIRED_ACTIONS.contentTypeBuilder.createSchema],\n      });\n    }\n  }, [dispatch, hasApiSchema, step, tourName]);\n\n  return (\n    <>\n      {isPopoverOpen && (\n        <Portal>\n          <GuidedTourOverlay />\n        </Portal>\n      )}\n      <Popover.Root open={isPopoverOpen}>\n        <Popover.Anchor>{children}</Popover.Anchor>\n        {content({ Step, state, dispatch })}\n      </Popover.Root>\n    </>\n  );\n};\n\n/* -------------------------------------------------------------------------------------------------\n * Tour factory\n * -----------------------------------------------------------------------------------------------*/\n\nexport type TourStep<P extends string> = {\n  name: P;\n  content: Content;\n  when?: (completedActions: CompletedActions) => boolean;\n  excludeFromStepCount?: boolean;\n};\n\nexport function createTour<const T extends ReadonlyArray<TourStep<string>>>(\n  tourName: string,\n  steps: T\n) {\n  type Components = {\n    [K in T[number]['name']]: React.ComponentType<{ children: React.ReactNode }>;\n  };\n\n  const tour = steps.reduce(\n    (acc, step, index) => {\n      const name = step.name as keyof Components;\n\n      if (name in acc) {\n        throw Error(`The tour: ${tourName} with step: ${step.name} has already been registered`);\n      }\n\n      (acc as Components)[name] = ({ children }: { children: React.ReactNode }) => {\n        return (\n          <GuidedTourTooltip\n            tourName={tourName as ValidTourName}\n            step={index}\n            content={step.content}\n            when={step.when}\n          >\n            {children}\n          </GuidedTourTooltip>\n        );\n      };\n\n      if (step.excludeFromStepCount) {\n        // Subtract all steps registered to be excluded from the step count\n        acc._meta.displayedStepCount--;\n      }\n\n      return acc;\n    },\n    { _meta: { totalStepCount: steps.length, displayedStepCount: steps.length } } as Components & {\n      _meta: { totalStepCount: number; displayedStepCount: number };\n    }\n  );\n\n  return tour;\n}\n\nexport type { Content, Tours };\nexport { tours };\n"],"names":["tours","contentTypeBuilder","createTour","contentTypeBuilderSteps","contentManager","contentManagerSteps","apiTokens","apiTokensSteps","strapiCloud","GuidedTourTooltip","children","props","state","useGuidedTour","s","enabled","hidden","_jsx","GuidedTourTooltipImpl","GuidedTourOverlay","styled","Box","content","tourName","step","when","data","guidedTourMeta","useGetGuidedTourMetaQuery","dispatch","isCurrentStep","currentStep","isStepConditionMet","completedActions","isPopoverOpen","isFirstSuperAdminUser","isCompleted","React","useEffect","originalStyle","window","getComputedStyle","document","body","overflow","style","Step","useMemo","createStepComponents","hasApiSchema","Object","keys","schemas","filter","key","startsWith","length","type","payload","GUIDED_TOUR_REQUIRED_ACTIONS","createSchema","_jsxs","_Fragment","Portal","Popover","Root","open","Anchor","steps","tour","reduce","acc","index","name","Error","excludeFromStepCount","_meta","displayedStepCount","totalStepCount"],"mappings":"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"}

package/dist/admin/admin/src/components/GuidedTour/Tours.mjs

@@ -20,7 +20,7 @@ import { GUIDED_TOUR_REQUIRED_ACTIONS } from './utils/constants.mjs';
 };
 const GuidedTourTooltip = ({ children, ...props })=>{
     const state = useGuidedTour('TooltipWrapper', (s)=>s.state);
-    if (!state.enabled) {
+    if (!state.enabled || state.hidden) {
         return children;
     }
     return /*#__PURE__*/ jsx(GuidedTourTooltipImpl, {

package/dist/admin/admin/src/components/GuidedTour/Tours.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Tours.mjs","sources":["../../../../../../admin/src/components/GuidedTour/Tours.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Box, Popover, Portal } from '@strapi/design-system';\nimport { styled } from 'styled-components';\n\nimport { useGetGuidedTourMetaQuery } from '../../services/admin';\n\nimport { type State, type Action, useGuidedTour, ValidTourName, CompletedActions } from './Context';\nimport { apiTokensSteps } from './Steps/ApiTokensSteps';\nimport { contentManagerSteps } from './Steps/ContentManagerSteps';\nimport { contentTypeBuilderSteps } from './Steps/ContentTypeBuilderSteps';\nimport { type Step, createStepComponents } from './Steps/Step';\nimport { GUIDED_TOUR_REQUIRED_ACTIONS } from './utils/constants';\n\n/* -------------------------------------------------------------------------------------------------\n * Tours\n * -----------------------------------------------------------------------------------------------*/\n\nconst tours = {\n  contentTypeBuilder: createTour('contentTypeBuilder', contentTypeBuilderSteps),\n  contentManager: createTour('contentManager', contentManagerSteps),\n  apiTokens: createTour('apiTokens', apiTokensSteps),\n  strapiCloud: createTour('strapiCloud', []),\n} as const;\n\ntype Tours = typeof tours;\n\n/* -------------------------------------------------------------------------------------------------\n * GuidedTourTooltip\n * -----------------------------------------------------------------------------------------------*/\n\nexport type StepContentProps = {\n  Step: Step;\n  state: State;\n  dispatch: React.Dispatch<Action>;\n};\ntype Content = (props: StepContentProps) => React.ReactNode;\n\ntype GuidedTourTooltipProps = {\n  children: React.ReactNode;\n  content: Content;\n  tourName: ValidTourName;\n  step: number;\n  when?: (completedActions: CompletedActions) => boolean;\n};\n\nconst GuidedTourTooltip = ({ children, ...props }: GuidedTourTooltipProps) => {\n  const state = useGuidedTour('TooltipWrapper', (s) => s.state);\n\n  if (!state.enabled) {\n    return children;\n  }\n\n  return <GuidedTourTooltipImpl {...props}>{children}</GuidedTourTooltipImpl>;\n};\n\nconst GuidedTourOverlay = styled(Box)`\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background-color: rgba(50, 50, 77, 0.2);\n  z-index: 10;\n`;\n\nconst GuidedTourTooltipImpl = ({\n  children,\n  content,\n  tourName,\n  step,\n  when,\n}: GuidedTourTooltipProps) => {\n  const { data: guidedTourMeta } = useGetGuidedTourMetaQuery();\n\n  const state = useGuidedTour('GuidedTourTooltip', (s) => s.state);\n  const dispatch = useGuidedTour('GuidedTourTooltip', (s) => s.dispatch);\n\n  const isCurrentStep = state.tours[tourName].currentStep === step;\n  const isStepConditionMet = when ? when(state.completedActions) : true;\n  const isPopoverOpen =\n    guidedTourMeta?.data?.isFirstSuperAdminUser &&\n    !state.tours[tourName].isCompleted &&\n    isCurrentStep &&\n    isStepConditionMet;\n\n  // Lock the scroll\n  React.useEffect(() => {\n    if (!isPopoverOpen) return;\n\n    const originalStyle = window.getComputedStyle(document.body).overflow;\n    document.body.style.overflow = 'hidden';\n\n    return () => {\n      document.body.style.overflow = originalStyle;\n    };\n  }, [isPopoverOpen]);\n\n  const Step = React.useMemo(() => createStepComponents(tourName), [tourName]);\n\n  const hasApiSchema =\n    Object.keys(guidedTourMeta?.data?.schemas ?? {}).filter((key) => key.startsWith('api::'))\n      .length > 0;\n\n  React.useEffect(() => {\n    if (hasApiSchema) {\n      /**\n       * Fallback sync:\n       *\n       * When the user already has a schema (ie started project from template with seeded data),\n       * allow them to proceed to the content manager tour.\n       *\n       * When the CTB fails to restart after saving a schema (as it often does)\n       */\n      dispatch({\n        type: 'set_completed_actions',\n        payload: [GUIDED_TOUR_REQUIRED_ACTIONS.contentTypeBuilder.createSchema],\n      });\n    }\n  }, [dispatch, hasApiSchema, step, tourName]);\n\n  return (\n    <>\n      {isPopoverOpen && (\n        <Portal>\n          <GuidedTourOverlay />\n        </Portal>\n      )}\n      <Popover.Root open={isPopoverOpen}>\n        <Popover.Anchor>{children}</Popover.Anchor>\n        {content({ Step, state, dispatch })}\n      </Popover.Root>\n    </>\n  );\n};\n\n/* -------------------------------------------------------------------------------------------------\n * Tour factory\n * -----------------------------------------------------------------------------------------------*/\n\nexport type TourStep<P extends string> = {\n  name: P;\n  content: Content;\n  when?: (completedActions: CompletedActions) => boolean;\n  excludeFromStepCount?: boolean;\n};\n\nexport function createTour<const T extends ReadonlyArray<TourStep<string>>>(\n  tourName: string,\n  steps: T\n) {\n  type Components = {\n    [K in T[number]['name']]: React.ComponentType<{ children: React.ReactNode }>;\n  };\n\n  const tour = steps.reduce(\n    (acc, step, index) => {\n      const name = step.name as keyof Components;\n\n      if (name in acc) {\n        throw Error(`The tour: ${tourName} with step: ${step.name} has already been registered`);\n      }\n\n      (acc as Components)[name] = ({ children }: { children: React.ReactNode }) => {\n        return (\n          <GuidedTourTooltip\n            tourName={tourName as ValidTourName}\n            step={index}\n            content={step.content}\n            when={step.when}\n          >\n            {children}\n          </GuidedTourTooltip>\n        );\n      };\n\n      if (step.excludeFromStepCount) {\n        // Subtract all steps registered to be excluded from the step count\n        acc._meta.displayedStepCount--;\n      }\n\n      return acc;\n    },\n    { _meta: { totalStepCount: steps.length, displayedStepCount: steps.length } } as Components & {\n      _meta: { totalStepCount: number; displayedStepCount: number };\n    }\n  );\n\n  return tour;\n}\n\nexport type { Content, Tours };\nexport { tours };\n"],"names":["tours","contentTypeBuilder","createTour","contentTypeBuilderSteps","contentManager","contentManagerSteps","apiTokens","apiTokensSteps","strapiCloud","GuidedTourTooltip","children","props","state","useGuidedTour","s","enabled","_jsx","GuidedTourTooltipImpl","GuidedTourOverlay","styled","Box","content","tourName","step","when","data","guidedTourMeta","useGetGuidedTourMetaQuery","dispatch","isCurrentStep","currentStep","isStepConditionMet","completedActions","isPopoverOpen","isFirstSuperAdminUser","isCompleted","React","useEffect","originalStyle","window","getComputedStyle","document","body","overflow","style","Step","useMemo","createStepComponents","hasApiSchema","Object","keys","schemas","filter","key","startsWith","length","type","payload","GUIDED_TOUR_REQUIRED_ACTIONS","createSchema","_jsxs","_Fragment","Portal","Popover","Root","open","Anchor","steps","tour","reduce","acc","index","name","Error","excludeFromStepCount","_meta","displayedStepCount","totalStepCount"],"mappings":"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"}
+{"version":3,"file":"Tours.mjs","sources":["../../../../../../admin/src/components/GuidedTour/Tours.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Box, Popover, Portal } from '@strapi/design-system';\nimport { styled } from 'styled-components';\n\nimport { useGetGuidedTourMetaQuery } from '../../services/admin';\n\nimport { type State, type Action, useGuidedTour, ValidTourName, CompletedActions } from './Context';\nimport { apiTokensSteps } from './Steps/ApiTokensSteps';\nimport { contentManagerSteps } from './Steps/ContentManagerSteps';\nimport { contentTypeBuilderSteps } from './Steps/ContentTypeBuilderSteps';\nimport { type Step, createStepComponents } from './Steps/Step';\nimport { GUIDED_TOUR_REQUIRED_ACTIONS } from './utils/constants';\n\n/* -------------------------------------------------------------------------------------------------\n * Tours\n * -----------------------------------------------------------------------------------------------*/\n\nconst tours = {\n  contentTypeBuilder: createTour('contentTypeBuilder', contentTypeBuilderSteps),\n  contentManager: createTour('contentManager', contentManagerSteps),\n  apiTokens: createTour('apiTokens', apiTokensSteps),\n  strapiCloud: createTour('strapiCloud', []),\n} as const;\n\ntype Tours = typeof tours;\n\n/* -------------------------------------------------------------------------------------------------\n * GuidedTourTooltip\n * -----------------------------------------------------------------------------------------------*/\n\nexport type StepContentProps = {\n  Step: Step;\n  state: State;\n  dispatch: React.Dispatch<Action>;\n};\ntype Content = (props: StepContentProps) => React.ReactNode;\n\ntype GuidedTourTooltipProps = {\n  children: React.ReactNode;\n  content: Content;\n  tourName: ValidTourName;\n  step: number;\n  when?: (completedActions: CompletedActions) => boolean;\n};\n\nconst GuidedTourTooltip = ({ children, ...props }: GuidedTourTooltipProps) => {\n  const state = useGuidedTour('TooltipWrapper', (s) => s.state);\n\n  if (!state.enabled || state.hidden) {\n    return children;\n  }\n\n  return <GuidedTourTooltipImpl {...props}>{children}</GuidedTourTooltipImpl>;\n};\n\nconst GuidedTourOverlay = styled(Box)`\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background-color: rgba(50, 50, 77, 0.2);\n  z-index: 10;\n`;\n\nconst GuidedTourTooltipImpl = ({\n  children,\n  content,\n  tourName,\n  step,\n  when,\n}: GuidedTourTooltipProps) => {\n  const { data: guidedTourMeta } = useGetGuidedTourMetaQuery();\n  const state = useGuidedTour('GuidedTourTooltip', (s) => s.state);\n  const dispatch = useGuidedTour('GuidedTourTooltip', (s) => s.dispatch);\n\n  const isCurrentStep = state.tours[tourName].currentStep === step;\n  const isStepConditionMet = when ? when(state.completedActions) : true;\n  const isPopoverOpen =\n    guidedTourMeta?.data?.isFirstSuperAdminUser &&\n    !state.tours[tourName].isCompleted &&\n    isCurrentStep &&\n    isStepConditionMet;\n\n  // Lock the scroll\n  React.useEffect(() => {\n    if (!isPopoverOpen) return;\n\n    const originalStyle = window.getComputedStyle(document.body).overflow;\n    document.body.style.overflow = 'hidden';\n\n    return () => {\n      document.body.style.overflow = originalStyle;\n    };\n  }, [isPopoverOpen]);\n\n  const Step = React.useMemo(() => createStepComponents(tourName), [tourName]);\n\n  const hasApiSchema =\n    Object.keys(guidedTourMeta?.data?.schemas ?? {}).filter((key) => key.startsWith('api::'))\n      .length > 0;\n\n  React.useEffect(() => {\n    if (hasApiSchema) {\n      /**\n       * Fallback sync:\n       *\n       * When the user already has a schema (ie started project from template with seeded data),\n       * allow them to proceed to the content manager tour.\n       *\n       * When the CTB fails to restart after saving a schema (as it often does)\n       */\n      dispatch({\n        type: 'set_completed_actions',\n        payload: [GUIDED_TOUR_REQUIRED_ACTIONS.contentTypeBuilder.createSchema],\n      });\n    }\n  }, [dispatch, hasApiSchema, step, tourName]);\n\n  return (\n    <>\n      {isPopoverOpen && (\n        <Portal>\n          <GuidedTourOverlay />\n        </Portal>\n      )}\n      <Popover.Root open={isPopoverOpen}>\n        <Popover.Anchor>{children}</Popover.Anchor>\n        {content({ Step, state, dispatch })}\n      </Popover.Root>\n    </>\n  );\n};\n\n/* -------------------------------------------------------------------------------------------------\n * Tour factory\n * -----------------------------------------------------------------------------------------------*/\n\nexport type TourStep<P extends string> = {\n  name: P;\n  content: Content;\n  when?: (completedActions: CompletedActions) => boolean;\n  excludeFromStepCount?: boolean;\n};\n\nexport function createTour<const T extends ReadonlyArray<TourStep<string>>>(\n  tourName: string,\n  steps: T\n) {\n  type Components = {\n    [K in T[number]['name']]: React.ComponentType<{ children: React.ReactNode }>;\n  };\n\n  const tour = steps.reduce(\n    (acc, step, index) => {\n      const name = step.name as keyof Components;\n\n      if (name in acc) {\n        throw Error(`The tour: ${tourName} with step: ${step.name} has already been registered`);\n      }\n\n      (acc as Components)[name] = ({ children }: { children: React.ReactNode }) => {\n        return (\n          <GuidedTourTooltip\n            tourName={tourName as ValidTourName}\n            step={index}\n            content={step.content}\n            when={step.when}\n          >\n            {children}\n          </GuidedTourTooltip>\n        );\n      };\n\n      if (step.excludeFromStepCount) {\n        // Subtract all steps registered to be excluded from the step count\n        acc._meta.displayedStepCount--;\n      }\n\n      return acc;\n    },\n    { _meta: { totalStepCount: steps.length, displayedStepCount: steps.length } } as Components & {\n      _meta: { totalStepCount: number; displayedStepCount: number };\n    }\n  );\n\n  return tour;\n}\n\nexport type { Content, Tours };\nexport { tours };\n"],"names":["tours","contentTypeBuilder","createTour","contentTypeBuilderSteps","contentManager","contentManagerSteps","apiTokens","apiTokensSteps","strapiCloud","GuidedTourTooltip","children","props","state","useGuidedTour","s","enabled","hidden","_jsx","GuidedTourTooltipImpl","GuidedTourOverlay","styled","Box","content","tourName","step","when","data","guidedTourMeta","useGetGuidedTourMetaQuery","dispatch","isCurrentStep","currentStep","isStepConditionMet","completedActions","isPopoverOpen","isFirstSuperAdminUser","isCompleted","React","useEffect","originalStyle","window","getComputedStyle","document","body","overflow","style","Step","useMemo","createStepComponents","hasApiSchema","Object","keys","schemas","filter","key","startsWith","length","type","payload","GUIDED_TOUR_REQUIRED_ACTIONS","createSchema","_jsxs","_Fragment","Portal","Popover","Root","open","Anchor","steps","tour","reduce","acc","index","name","Error","excludeFromStepCount","_meta","displayedStepCount","totalStepCount"],"mappings":"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"}

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

@@ -3,6 +3,7 @@
 var jsxRuntime = require('react/jsx-runtime');
 require('react');
 var designSystem = require('@strapi/design-system');
+var theme = require('../../constants/theme.js');
 
 const ActionLayout = ({ startActions, endActions })=>{
     if (!startActions && !endActions) {
@@ -12,8 +13,8 @@ const ActionLayout = ({ startActions, endActions })=>{
         justifyContent: "space-between",
         alignItems: "flex-start",
         paddingBottom: 4,
-        paddingLeft: 10,
-        paddingRight: 10,
+        paddingLeft: theme.RESPONSIVE_DEFAULT_SPACING,
+        paddingRight: theme.RESPONSIVE_DEFAULT_SPACING,
         children: [
             /*#__PURE__*/ jsxRuntime.jsx(designSystem.Flex, {
                 gap: 2,

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

@@ -1 +1 @@
-{"version":3,"file":"ActionLayout.js","sources":["../../../../../../admin/src/components/Layouts/ActionLayout.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Flex } from '@strapi/design-system';\n\ninterface ActionLayoutProps {\n  endActions?: React.ReactNode;\n  startActions?: React.ReactNode;\n}\n\nconst ActionLayout = ({ startActions, endActions }: ActionLayoutProps) => {\n  if (!startActions && !endActions) {\n    return null;\n  }\n\n  return (\n    <Flex\n      justifyContent=\"space-between\"\n      alignItems=\"flex-start\"\n      paddingBottom={4}\n      paddingLeft={10}\n      paddingRight={10}\n    >\n      <Flex gap={2} wrap=\"wrap\">\n        {startActions}\n      </Flex>\n\n      <Flex gap={2} shrink={0} wrap=\"wrap\">\n        {endActions}\n      </Flex>\n    </Flex>\n  );\n};\n\nexport { ActionLayout, type ActionLayoutProps };\n"],"names":["ActionLayout","startActions","endActions","_jsxs","Flex","justifyContent","alignItems","paddingBottom","paddingLeft","paddingRight","_jsx","gap","wrap","shrink"],"mappings":";;;;;;AASA,MAAMA,eAAe,CAAC,EAAEC,YAAY,EAAEC,UAAU,EAAqB,GAAA;IACnE,IAAI,CAACD,YAAgB,IAAA,CAACC,UAAY,EAAA;QAChC,OAAO,IAAA;AACT;AAEA,IAAA,qBACEC,eAACC,CAAAA,iBAAAA,EAAAA;QACCC,cAAe,EAAA,eAAA;QACfC,UAAW,EAAA,YAAA;QACXC,aAAe,EAAA,CAAA;QACfC,WAAa,EAAA,EAAA;QACbC,YAAc,EAAA,EAAA;;0BAEdC,cAACN,CAAAA,iBAAAA,EAAAA;gBAAKO,GAAK,EAAA,CAAA;gBAAGC,IAAK,EAAA,MAAA;AAChBX,gBAAAA,QAAAA,EAAAA;;0BAGHS,cAACN,CAAAA,iBAAAA,EAAAA;gBAAKO,GAAK,EAAA,CAAA;gBAAGE,MAAQ,EAAA,CAAA;gBAAGD,IAAK,EAAA,MAAA;AAC3BV,gBAAAA,QAAAA,EAAAA;;;;AAIT;;;;"}
+{"version":3,"file":"ActionLayout.js","sources":["../../../../../../admin/src/components/Layouts/ActionLayout.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Flex } from '@strapi/design-system';\n\nimport { RESPONSIVE_DEFAULT_SPACING } from '../../constants/theme';\n\ninterface ActionLayoutProps {\n  endActions?: React.ReactNode;\n  startActions?: React.ReactNode;\n}\n\nconst ActionLayout = ({ startActions, endActions }: ActionLayoutProps) => {\n  if (!startActions && !endActions) {\n    return null;\n  }\n\n  return (\n    <Flex\n      justifyContent=\"space-between\"\n      alignItems=\"flex-start\"\n      paddingBottom={4}\n      paddingLeft={RESPONSIVE_DEFAULT_SPACING}\n      paddingRight={RESPONSIVE_DEFAULT_SPACING}\n    >\n      <Flex gap={2} wrap=\"wrap\">\n        {startActions}\n      </Flex>\n\n      <Flex gap={2} shrink={0} wrap=\"wrap\">\n        {endActions}\n      </Flex>\n    </Flex>\n  );\n};\n\nexport { ActionLayout, type ActionLayoutProps };\n"],"names":["ActionLayout","startActions","endActions","_jsxs","Flex","justifyContent","alignItems","paddingBottom","paddingLeft","RESPONSIVE_DEFAULT_SPACING","paddingRight","_jsx","gap","wrap","shrink"],"mappings":";;;;;;;AAWA,MAAMA,eAAe,CAAC,EAAEC,YAAY,EAAEC,UAAU,EAAqB,GAAA;IACnE,IAAI,CAACD,YAAgB,IAAA,CAACC,UAAY,EAAA;QAChC,OAAO,IAAA;AACT;AAEA,IAAA,qBACEC,eAACC,CAAAA,iBAAAA,EAAAA;QACCC,cAAe,EAAA,eAAA;QACfC,UAAW,EAAA,YAAA;QACXC,aAAe,EAAA,CAAA;QACfC,WAAaC,EAAAA,gCAAAA;QACbC,YAAcD,EAAAA,gCAAAA;;0BAEdE,cAACP,CAAAA,iBAAAA,EAAAA;gBAAKQ,GAAK,EAAA,CAAA;gBAAGC,IAAK,EAAA,MAAA;AAChBZ,gBAAAA,QAAAA,EAAAA;;0BAGHU,cAACP,CAAAA,iBAAAA,EAAAA;gBAAKQ,GAAK,EAAA,CAAA;gBAAGE,MAAQ,EAAA,CAAA;gBAAGD,IAAK,EAAA,MAAA;AAC3BX,gBAAAA,QAAAA,EAAAA;;;;AAIT;;;;"}

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

@@ -1,6 +1,7 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import 'react';
 import { Flex } from '@strapi/design-system';
+import { RESPONSIVE_DEFAULT_SPACING } from '../../constants/theme.mjs';
 
 const ActionLayout = ({ startActions, endActions })=>{
     if (!startActions && !endActions) {
@@ -10,8 +11,8 @@ const ActionLayout = ({ startActions, endActions })=>{
         justifyContent: "space-between",
         alignItems: "flex-start",
         paddingBottom: 4,
-        paddingLeft: 10,
-        paddingRight: 10,
+        paddingLeft: RESPONSIVE_DEFAULT_SPACING,
+        paddingRight: RESPONSIVE_DEFAULT_SPACING,
         children: [
             /*#__PURE__*/ jsx(Flex, {
                 gap: 2,

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

@@ -1 +1 @@
-{"version":3,"file":"ActionLayout.mjs","sources":["../../../../../../admin/src/components/Layouts/ActionLayout.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Flex } from '@strapi/design-system';\n\ninterface ActionLayoutProps {\n  endActions?: React.ReactNode;\n  startActions?: React.ReactNode;\n}\n\nconst ActionLayout = ({ startActions, endActions }: ActionLayoutProps) => {\n  if (!startActions && !endActions) {\n    return null;\n  }\n\n  return (\n    <Flex\n      justifyContent=\"space-between\"\n      alignItems=\"flex-start\"\n      paddingBottom={4}\n      paddingLeft={10}\n      paddingRight={10}\n    >\n      <Flex gap={2} wrap=\"wrap\">\n        {startActions}\n      </Flex>\n\n      <Flex gap={2} shrink={0} wrap=\"wrap\">\n        {endActions}\n      </Flex>\n    </Flex>\n  );\n};\n\nexport { ActionLayout, type ActionLayoutProps };\n"],"names":["ActionLayout","startActions","endActions","_jsxs","Flex","justifyContent","alignItems","paddingBottom","paddingLeft","paddingRight","_jsx","gap","wrap","shrink"],"mappings":";;;;AASA,MAAMA,eAAe,CAAC,EAAEC,YAAY,EAAEC,UAAU,EAAqB,GAAA;IACnE,IAAI,CAACD,YAAgB,IAAA,CAACC,UAAY,EAAA;QAChC,OAAO,IAAA;AACT;AAEA,IAAA,qBACEC,IAACC,CAAAA,IAAAA,EAAAA;QACCC,cAAe,EAAA,eAAA;QACfC,UAAW,EAAA,YAAA;QACXC,aAAe,EAAA,CAAA;QACfC,WAAa,EAAA,EAAA;QACbC,YAAc,EAAA,EAAA;;0BAEdC,GAACN,CAAAA,IAAAA,EAAAA;gBAAKO,GAAK,EAAA,CAAA;gBAAGC,IAAK,EAAA,MAAA;AAChBX,gBAAAA,QAAAA,EAAAA;;0BAGHS,GAACN,CAAAA,IAAAA,EAAAA;gBAAKO,GAAK,EAAA,CAAA;gBAAGE,MAAQ,EAAA,CAAA;gBAAGD,IAAK,EAAA,MAAA;AAC3BV,gBAAAA,QAAAA,EAAAA;;;;AAIT;;;;"}
+{"version":3,"file":"ActionLayout.mjs","sources":["../../../../../../admin/src/components/Layouts/ActionLayout.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Flex } from '@strapi/design-system';\n\nimport { RESPONSIVE_DEFAULT_SPACING } from '../../constants/theme';\n\ninterface ActionLayoutProps {\n  endActions?: React.ReactNode;\n  startActions?: React.ReactNode;\n}\n\nconst ActionLayout = ({ startActions, endActions }: ActionLayoutProps) => {\n  if (!startActions && !endActions) {\n    return null;\n  }\n\n  return (\n    <Flex\n      justifyContent=\"space-between\"\n      alignItems=\"flex-start\"\n      paddingBottom={4}\n      paddingLeft={RESPONSIVE_DEFAULT_SPACING}\n      paddingRight={RESPONSIVE_DEFAULT_SPACING}\n    >\n      <Flex gap={2} wrap=\"wrap\">\n        {startActions}\n      </Flex>\n\n      <Flex gap={2} shrink={0} wrap=\"wrap\">\n        {endActions}\n      </Flex>\n    </Flex>\n  );\n};\n\nexport { ActionLayout, type ActionLayoutProps };\n"],"names":["ActionLayout","startActions","endActions","_jsxs","Flex","justifyContent","alignItems","paddingBottom","paddingLeft","RESPONSIVE_DEFAULT_SPACING","paddingRight","_jsx","gap","wrap","shrink"],"mappings":";;;;;AAWA,MAAMA,eAAe,CAAC,EAAEC,YAAY,EAAEC,UAAU,EAAqB,GAAA;IACnE,IAAI,CAACD,YAAgB,IAAA,CAACC,UAAY,EAAA;QAChC,OAAO,IAAA;AACT;AAEA,IAAA,qBACEC,IAACC,CAAAA,IAAAA,EAAAA;QACCC,cAAe,EAAA,eAAA;QACfC,UAAW,EAAA,YAAA;QACXC,aAAe,EAAA,CAAA;QACfC,WAAaC,EAAAA,0BAAAA;QACbC,YAAcD,EAAAA,0BAAAA;;0BAEdE,GAACP,CAAAA,IAAAA,EAAAA;gBAAKQ,GAAK,EAAA,CAAA;gBAAGC,IAAK,EAAA,MAAA;AAChBZ,gBAAAA,QAAAA,EAAAA;;0BAGHU,GAACP,CAAAA,IAAAA,EAAAA;gBAAKQ,GAAK,EAAA,CAAA;gBAAGE,MAAQ,EAAA,CAAA;gBAAGD,IAAK,EAAA,MAAA;AAC3BX,gBAAAA,QAAAA,EAAAA;;;;AAIT;;;;"}

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

@@ -3,11 +3,12 @@
 var jsxRuntime = require('react/jsx-runtime');
 require('react');
 var designSystem = require('@strapi/design-system');
+var theme = require('../../constants/theme.js');
 
 const ContentLayout = ({ children })=>{
     return /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
-        paddingLeft: 10,
-        paddingRight: 10,
+        paddingLeft: theme.RESPONSIVE_DEFAULT_SPACING,
+        paddingRight: theme.RESPONSIVE_DEFAULT_SPACING,
         children: children
     });
 };

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

@@ -1 +1 @@
-{"version":3,"file":"ContentLayout.js","sources":["../../../../../../admin/src/components/Layouts/ContentLayout.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Box } from '@strapi/design-system';\n\ninterface ContentLayoutProps {\n  children: React.ReactNode;\n}\n\nconst ContentLayout = ({ children }: ContentLayoutProps) => {\n  return (\n    <Box paddingLeft={10} paddingRight={10}>\n      {children}\n    </Box>\n  );\n};\n\nexport { ContentLayout, type ContentLayoutProps };\n"],"names":["ContentLayout","children","_jsx","Box","paddingLeft","paddingRight"],"mappings":";;;;;;AAQA,MAAMA,aAAgB,GAAA,CAAC,EAAEC,QAAQ,EAAsB,GAAA;AACrD,IAAA,qBACEC,cAACC,CAAAA,gBAAAA,EAAAA;QAAIC,WAAa,EAAA,EAAA;QAAIC,YAAc,EAAA,EAAA;AACjCJ,QAAAA,QAAAA,EAAAA;;AAGP;;;;"}
+{"version":3,"file":"ContentLayout.js","sources":["../../../../../../admin/src/components/Layouts/ContentLayout.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Box } from '@strapi/design-system';\n\nimport { RESPONSIVE_DEFAULT_SPACING } from '../../constants/theme';\n\ninterface ContentLayoutProps {\n  children: React.ReactNode;\n}\n\nconst ContentLayout = ({ children }: ContentLayoutProps) => {\n  return (\n    <Box paddingLeft={RESPONSIVE_DEFAULT_SPACING} paddingRight={RESPONSIVE_DEFAULT_SPACING}>\n      {children}\n    </Box>\n  );\n};\n\nexport { ContentLayout, type ContentLayoutProps };\n"],"names":["ContentLayout","children","_jsx","Box","paddingLeft","RESPONSIVE_DEFAULT_SPACING","paddingRight"],"mappings":";;;;;;;AAUA,MAAMA,aAAgB,GAAA,CAAC,EAAEC,QAAQ,EAAsB,GAAA;AACrD,IAAA,qBACEC,cAACC,CAAAA,gBAAAA,EAAAA;QAAIC,WAAaC,EAAAA,gCAAAA;QAA4BC,YAAcD,EAAAA,gCAAAA;AACzDJ,QAAAA,QAAAA,EAAAA;;AAGP;;;;"}

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

@@ -1,11 +1,12 @@
 import { jsx } from 'react/jsx-runtime';
 import 'react';
 import { Box } from '@strapi/design-system';
+import { RESPONSIVE_DEFAULT_SPACING } from '../../constants/theme.mjs';
 
 const ContentLayout = ({ children })=>{
     return /*#__PURE__*/ jsx(Box, {
-        paddingLeft: 10,
-        paddingRight: 10,
+        paddingLeft: RESPONSIVE_DEFAULT_SPACING,
+        paddingRight: RESPONSIVE_DEFAULT_SPACING,
         children: children
     });
 };

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

@@ -1 +1 @@
-{"version":3,"file":"ContentLayout.mjs","sources":["../../../../../../admin/src/components/Layouts/ContentLayout.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Box } from '@strapi/design-system';\n\ninterface ContentLayoutProps {\n  children: React.ReactNode;\n}\n\nconst ContentLayout = ({ children }: ContentLayoutProps) => {\n  return (\n    <Box paddingLeft={10} paddingRight={10}>\n      {children}\n    </Box>\n  );\n};\n\nexport { ContentLayout, type ContentLayoutProps };\n"],"names":["ContentLayout","children","_jsx","Box","paddingLeft","paddingRight"],"mappings":";;;;AAQA,MAAMA,aAAgB,GAAA,CAAC,EAAEC,QAAQ,EAAsB,GAAA;AACrD,IAAA,qBACEC,GAACC,CAAAA,GAAAA,EAAAA;QAAIC,WAAa,EAAA,EAAA;QAAIC,YAAc,EAAA,EAAA;AACjCJ,QAAAA,QAAAA,EAAAA;;AAGP;;;;"}
+{"version":3,"file":"ContentLayout.mjs","sources":["../../../../../../admin/src/components/Layouts/ContentLayout.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Box } from '@strapi/design-system';\n\nimport { RESPONSIVE_DEFAULT_SPACING } from '../../constants/theme';\n\ninterface ContentLayoutProps {\n  children: React.ReactNode;\n}\n\nconst ContentLayout = ({ children }: ContentLayoutProps) => {\n  return (\n    <Box paddingLeft={RESPONSIVE_DEFAULT_SPACING} paddingRight={RESPONSIVE_DEFAULT_SPACING}>\n      {children}\n    </Box>\n  );\n};\n\nexport { ContentLayout, type ContentLayoutProps };\n"],"names":["ContentLayout","children","_jsx","Box","paddingLeft","RESPONSIVE_DEFAULT_SPACING","paddingRight"],"mappings":";;;;;AAUA,MAAMA,aAAgB,GAAA,CAAC,EAAEC,QAAQ,EAAsB,GAAA;AACrD,IAAA,qBACEC,GAACC,CAAAA,GAAAA,EAAAA;QAAIC,WAAaC,EAAAA,0BAAAA;QAA4BC,YAAcD,EAAAA,0BAAAA;AACzDJ,QAAAA,QAAAA,EAAAA;;AAGP;;;;"}

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

@@ -3,6 +3,7 @@
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var designSystem = require('@strapi/design-system');
+var theme = require('../../constants/theme.js');
 var useElementOnScreen = require('../../hooks/useElementOnScreen.js');
 
 function _interopNamespaceDefault(e) {
@@ -28,20 +29,27 @@ 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'
+            },
             paddingLeft: 6,
             paddingRight: 6,
-            paddingTop: 3,
-            paddingBottom: 3,
+            paddingTop: 2,
+            paddingBottom: 2,
             position: "fixed",
             top: 0,
-            right: 0,
             background: "neutral0",
             shadow: "tableShadow",
             width: `${width}px`,
-            zIndex: 3,
+            zIndex: 2,
+            minHeight: theme.HEIGHT_TOP_NAVIGATION,
             "data-strapi-header-sticky": true,
             children: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+                alignItems: "center",
                 justifyContent: "space-between",
+                wrap: "wrap",
+                width: "100%",
                 children: [
                     /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
                         children: [
@@ -82,42 +90,58 @@ const BaseHeaderLayout = /*#__PURE__*/ React__namespace.forwardRef(({ navigation
     }
     return /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Box, {
         ref: ref,
-        paddingLeft: 10,
-        paddingRight: 10,
-        paddingBottom: 8,
-        paddingTop: navigationAction ? 6 : 8,
+        paddingLeft: theme.RESPONSIVE_DEFAULT_SPACING,
+        paddingRight: theme.RESPONSIVE_DEFAULT_SPACING,
+        paddingBottom: {
+            initial: 4,
+            large: 8
+        },
+        paddingTop: {
+            initial: 4,
+            large: navigationAction ? 6 : 8
+        },
         background: "neutral100",
         "data-strapi-header": true,
         children: [
-            navigationAction ? /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
-                paddingBottom: 2,
-                children: navigationAction
-            }) : null,
             /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
-                justifyContent: "space-between",
+                direction: "column",
+                alignItems: "initial",
+                gap: 2,
                 children: [
+                    navigationAction,
                     /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
-                        minWidth: 0,
+                        justifyContent: "space-between",
+                        wrap: "wrap",
+                        gap: 4,
                         children: [
-                            /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
-                                tag: "h1",
-                                variant: "alpha",
-                                ...props,
-                                children: title
+                            /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+                                minWidth: 0,
+                                children: [
+                                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                                        tag: "h1",
+                                        variant: "alpha",
+                                        ...props,
+                                        children: title
+                                    }),
+                                    secondaryAction ? /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
+                                        paddingLeft: 4,
+                                        children: secondaryAction
+                                    }) : null
+                                ]
                             }),
-                            secondaryAction ? /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
-                                paddingLeft: 4,
-                                children: secondaryAction
-                            }) : null
+                            primaryAction
                         ]
-                    }),
-                    primaryAction
+                    })
                 ]
             }),
             isSubtitleString ? /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
                 variant: "epsilon",
                 textColor: "neutral600",
                 tag: "p",
+                paddingTop: {
+                    initial: 4,
+                    large: 0
+                },
                 children: subtitle
             }) : subtitle
         ]
@@ -132,25 +156,34 @@ const HeaderLayout = (props)=>{
         rootMargin: '0px',
         threshold: 0
     });
-    useResizeObserver(containerRef, ()=>{
+    useResizeObserver([
+        containerRef
+    ], ()=>{
         if (containerRef.current) {
-            setHeaderSize(containerRef.current.getBoundingClientRect());
+            const newSize = containerRef.current.getBoundingClientRect();
+            setHeaderSize((prevSize)=>{
+                // Only update if size actually changed
+                if (!prevSize || prevSize.height !== newSize.height || prevSize.width !== newSize.width) {
+                    return newSize;
+                }
+                return prevSize;
+            });
         }
     });
     React__namespace.useEffect(()=>{
-        if (baseHeaderLayoutRef.current) {
-            setHeaderSize(baseHeaderLayoutRef.current.getBoundingClientRect());
+        if (containerRef.current) {
+            setHeaderSize(containerRef.current.getBoundingClientRect());
         }
     }, [
-        baseHeaderLayoutRef
+        containerRef
     ]);
-    return /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    return /*#__PURE__*/ jsxRuntime.jsxs("div", {
+        ref: containerRef,
         children: [
             /*#__PURE__*/ jsxRuntime.jsx("div", {
                 style: {
                     height: headerSize?.height
                 },
-                ref: containerRef,
                 children: isVisible && /*#__PURE__*/ jsxRuntime.jsx(BaseHeaderLayout, {
                     ref: baseHeaderLayoutRef,
                     ...props

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 { 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          paddingLeft={6}\n          paddingRight={6}\n          paddingTop={3}\n          paddingBottom={3}\n          position=\"fixed\"\n          top={0}\n          right={0}\n          background=\"neutral0\"\n          shadow=\"tableShadow\"\n          width={`${width}px`}\n          zIndex={3}\n          data-strapi-header-sticky\n        >\n          <Flex justifyContent=\"space-between\">\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={10}\n        paddingRight={10}\n        paddingBottom={8}\n        paddingTop={navigationAction ? 6 : 8}\n        background=\"neutral100\"\n        data-strapi-header\n      >\n        {navigationAction ? <Box paddingBottom={2}>{navigationAction}</Box> : null}\n        <Flex justifyContent=\"space-between\">\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        {isSubtitleString ? (\n          <Typography variant=\"epsilon\" textColor=\"neutral600\" tag=\"p\">\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      setHeaderSize(containerRef.current.getBoundingClientRect());\n    }\n  });\n\n  React.useEffect(() => {\n    if (baseHeaderLayoutRef.current) {\n      setHeaderSize(baseHeaderLayoutRef.current.getBoundingClientRect());\n    }\n  }, [baseHeaderLayoutRef]);\n\n  return (\n    <>\n      <div style={{ height: headerSize?.height }} ref={containerRef}>\n        {isVisible && <BaseHeaderLayout ref={baseHeaderLayoutRef} {...props} />}\n      </div>\n\n      {!isVisible && <BaseHeaderLayout {...props} sticky width={headerSize?.width} />}\n    </>\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","paddingLeft","paddingRight","paddingTop","paddingBottom","position","top","right","background","shadow","zIndex","data-strapi-header-sticky","_jsxs","Flex","justifyContent","Typography","variant","tag","textColor","undefined","data-strapi-header","minWidth","HeaderLayout","baseHeaderLayoutRef","useRef","headerSize","setHeaderSize","useState","isVisible","setIsVisible","containerRef","useElementOnScreen","root","rootMargin","threshold","useResizeObserver","current","getBoundingClientRect","useEffect","_Fragment","div","style","height","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 { 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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"}

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

@@ -1,26 +1,34 @@
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+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 { 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'
+            },
             paddingLeft: 6,
             paddingRight: 6,
-            paddingTop: 3,
-            paddingBottom: 3,
+            paddingTop: 2,
+            paddingBottom: 2,
             position: "fixed",
             top: 0,
-            right: 0,
             background: "neutral0",
             shadow: "tableShadow",
             width: `${width}px`,
-            zIndex: 3,
+            zIndex: 2,
+            minHeight: HEIGHT_TOP_NAVIGATION,
             "data-strapi-header-sticky": true,
             children: /*#__PURE__*/ jsxs(Flex, {
+                alignItems: "center",
                 justifyContent: "space-between",
+                wrap: "wrap",
+                width: "100%",
                 children: [
                     /*#__PURE__*/ jsxs(Flex, {
                         children: [
@@ -61,42 +69,58 @@ const BaseHeaderLayout = /*#__PURE__*/ React.forwardRef(({ navigationAction, pri
     }
     return /*#__PURE__*/ jsxs(Box, {
         ref: ref,
-        paddingLeft: 10,
-        paddingRight: 10,
-        paddingBottom: 8,
-        paddingTop: navigationAction ? 6 : 8,
+        paddingLeft: RESPONSIVE_DEFAULT_SPACING,
+        paddingRight: RESPONSIVE_DEFAULT_SPACING,
+        paddingBottom: {
+            initial: 4,
+            large: 8
+        },
+        paddingTop: {
+            initial: 4,
+            large: navigationAction ? 6 : 8
+        },
         background: "neutral100",
         "data-strapi-header": true,
         children: [
-            navigationAction ? /*#__PURE__*/ jsx(Box, {
-                paddingBottom: 2,
-                children: navigationAction
-            }) : null,
             /*#__PURE__*/ jsxs(Flex, {
-                justifyContent: "space-between",
+                direction: "column",
+                alignItems: "initial",
+                gap: 2,
                 children: [
+                    navigationAction,
                     /*#__PURE__*/ jsxs(Flex, {
-                        minWidth: 0,
+                        justifyContent: "space-between",
+                        wrap: "wrap",
+                        gap: 4,
                         children: [
-                            /*#__PURE__*/ jsx(Typography, {
-                                tag: "h1",
-                                variant: "alpha",
-                                ...props,
-                                children: title
+                            /*#__PURE__*/ jsxs(Flex, {
+                                minWidth: 0,
+                                children: [
+                                    /*#__PURE__*/ jsx(Typography, {
+                                        tag: "h1",
+                                        variant: "alpha",
+                                        ...props,
+                                        children: title
+                                    }),
+                                    secondaryAction ? /*#__PURE__*/ jsx(Box, {
+                                        paddingLeft: 4,
+                                        children: secondaryAction
+                                    }) : null
+                                ]
                             }),
-                            secondaryAction ? /*#__PURE__*/ jsx(Box, {
-                                paddingLeft: 4,
-                                children: secondaryAction
-                            }) : null
+                            primaryAction
                         ]
-                    }),
-                    primaryAction
+                    })
                 ]
             }),
             isSubtitleString ? /*#__PURE__*/ jsx(Typography, {
                 variant: "epsilon",
                 textColor: "neutral600",
                 tag: "p",
+                paddingTop: {
+                    initial: 4,
+                    large: 0
+                },
                 children: subtitle
             }) : subtitle
         ]
@@ -111,25 +135,34 @@ const HeaderLayout = (props)=>{
         rootMargin: '0px',
         threshold: 0
     });
-    useResizeObserver(containerRef, ()=>{
+    useResizeObserver([
+        containerRef
+    ], ()=>{
         if (containerRef.current) {
-            setHeaderSize(containerRef.current.getBoundingClientRect());
+            const newSize = containerRef.current.getBoundingClientRect();
+            setHeaderSize((prevSize)=>{
+                // Only update if size actually changed
+                if (!prevSize || prevSize.height !== newSize.height || prevSize.width !== newSize.width) {
+                    return newSize;
+                }
+                return prevSize;
+            });
         }
     });
     React.useEffect(()=>{
-        if (baseHeaderLayoutRef.current) {
-            setHeaderSize(baseHeaderLayoutRef.current.getBoundingClientRect());
+        if (containerRef.current) {
+            setHeaderSize(containerRef.current.getBoundingClientRect());
         }
     }, [
-        baseHeaderLayoutRef
+        containerRef
     ]);
-    return /*#__PURE__*/ jsxs(Fragment, {
+    return /*#__PURE__*/ jsxs("div", {
+        ref: containerRef,
         children: [
             /*#__PURE__*/ jsx("div", {
                 style: {
                     height: headerSize?.height
                 },
-                ref: containerRef,
                 children: isVisible && /*#__PURE__*/ jsx(BaseHeaderLayout, {
                     ref: baseHeaderLayoutRef,
                     ...props