Rename grid cell to grid item (#6623)

**Problem:**
Sometimes we call the grid items "grid cells", which is incorrect (grid
cells are the positions in the grid, and not the child items).

**Fix:**
Rename

**Manual Tests:**
I hereby swear that:

- [x] I opened a hydrogen project and it loaded
- [x] I could navigate to various routes in Play mode

Author: gbalint

editor/src/components/canvas/canvas-strategies/strategies/absolute-resize-bounding-box-strategy.tsx

@@ -98,7 +98,7 @@ export function absoluteResizeBoundingBoxStrategy(
   }
 
   if (
-    retargetedTargets.some((path) => MetadataUtils.isGridCell(canvasState.startingMetadata, path))
+    retargetedTargets.some((path) => MetadataUtils.isGridItem(canvasState.startingMetadata, path))
   ) {
     return null
   }

editor/src/components/canvas/canvas-strategies/strategies/basic-resize-strategy.tsx

@@ -83,7 +83,7 @@ export function basicResizeStrategy(
   const elementDimensionsProps = metadata != null ? getElementDimensions(metadata) : null
   const elementParentBounds = metadata?.specialSizeMeasurements.immediateParentBounds ?? null
 
-  const isGridCell = MetadataUtils.isGridCell(canvasState.startingMetadata, selectedElement)
+  const isGridCell = MetadataUtils.isGridItem(canvasState.startingMetadata, selectedElement)
   if (isGridCell && isFillOrStretchModeApplied(canvasState.startingMetadata, selectedElement)) {
     return null
   }
@@ -216,7 +216,7 @@ export function basicResizeStrategy(
           )
 
           const gridsToRerender = selectedElements
-            .filter((element) => MetadataUtils.isGridCell(canvasState.startingMetadata, element))
+            .filter((element) => MetadataUtils.isGridItem(canvasState.startingMetadata, element))
             .map(EP.parentPath)
 
           const elementsToRerender = [...selectedElements, ...gridsToRerender]

editor/src/components/canvas/canvas-strategies/strategies/convert-to-absolute-and-move-strategy.tsx

@@ -180,7 +180,7 @@ function convertToAbsoluteAndMoveStrategyFactory(setHuggingParentToFixed: SetHug
       originalTargets,
     ).filter(
       // don't show the siblings control for grid cells
-      (sibling) => !MetadataUtils.isGridCell(canvasState.startingMetadata, sibling.elementPath),
+      (sibling) => !MetadataUtils.isGridItem(canvasState.startingMetadata, sibling.elementPath),
     )
 
     const showSiblingsControl = autoLayoutSiblingsExceptGridCells.length > 1

editor/src/components/canvas/canvas-strategies/strategies/flex-resize-basic-strategy.tsx

@@ -89,7 +89,7 @@ export function flexResizeBasicStrategy(
     elementParentBounds != null &&
     (elementParentBounds.width !== 0 || elementParentBounds.height !== 0)
 
-  if (MetadataUtils.isGridCell(canvasState.startingMetadata, selectedElements[0])) {
+  if (MetadataUtils.isGridItem(canvasState.startingMetadata, selectedElements[0])) {
     return null
   }
 

editor/src/components/canvas/canvas-strategies/strategies/flex-resize-strategy.tsx

@@ -109,7 +109,7 @@ export function flexResizeStrategy(
     elementParentBounds.width !== 0 &&
     elementParentBounds.height !== 0
 
-  if (MetadataUtils.isGridCell(canvasState.startingMetadata, selectedElements[0])) {
+  if (MetadataUtils.isGridItem(canvasState.startingMetadata, selectedElements[0])) {
     return null
   }
 

editor/src/components/canvas/canvas-strategies/strategies/grid-move-absolute.ts

@@ -59,7 +59,7 @@ export const gridMoveAbsoluteStrategy: CanvasStrategyFactory = (
   }
 
   const selectedElement = selectedElements[0]
-  if (!MetadataUtils.isGridCell(canvasState.startingMetadata, selectedElement)) {
+  if (!MetadataUtils.isGridItem(canvasState.startingMetadata, selectedElement)) {
     return null
   }
 
@@ -215,7 +215,7 @@ function runGridMoveAbsolute(
 
   // if moving an absolutely-positioned child which does not have pinning
   // props, do not set them at all.
-  if (MetadataUtils.hasNoGridCellPositioning(selectedElementMetadata.specialSizeMeasurements)) {
+  if (MetadataUtils.hasNoGridItemPositioning(selectedElementMetadata.specialSizeMeasurements)) {
     return [
       showGridControls('mid-interaction', gridPath, targetCellCoords, targetRootCell),
       ...gridChildAbsoluteMoveCommands(

editor/src/components/canvas/canvas-strategies/strategies/grid-move-rearrange-duplicate-strategy.ts

@@ -43,7 +43,7 @@ export const gridMoveRearrangeDuplicateStrategy: CanvasStrategyFactory = (
   }
 
   const selectedElement = selectedElements[0]
-  if (!MetadataUtils.isGridCell(canvasState.startingMetadata, selectedElement)) {
+  if (!MetadataUtils.isGridItem(canvasState.startingMetadata, selectedElement)) {
     return null
   }
 

editor/src/components/canvas/canvas-strategies/strategies/grid-move-rearrange-strategy.ts

@@ -50,7 +50,7 @@ export const gridMoveRearrangeStrategy: CanvasStrategyFactory = (
   }
 
   const selectedElement = selectedElements[0]
-  if (!MetadataUtils.isGridCell(canvasState.startingMetadata, selectedElement)) {
+  if (!MetadataUtils.isGridItem(canvasState.startingMetadata, selectedElement)) {
     return null
   }
 

editor/src/components/canvas/canvas-strategies/strategies/grid-move-reorder-strategy.ts

@@ -53,7 +53,7 @@ export const gridMoveReorderStrategy: CanvasStrategyFactory = (
   }
 
   const selectedElement = selectedElements[0]
-  if (!MetadataUtils.isGridCell(canvasState.startingMetadata, selectedElement)) {
+  if (!MetadataUtils.isGridItem(canvasState.startingMetadata, selectedElement)) {
     return null
   }
 

editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-keyboard-strategy.ts

@@ -32,7 +32,7 @@ export function gridRearrangeResizeKeyboardStrategy(
 
   const target = selectedElements[0]
 
-  if (!MetadataUtils.isGridCell(canvasState.startingMetadata, target)) {
+  if (!MetadataUtils.isGridItem(canvasState.startingMetadata, target)) {
     return null
   }
 

editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-strategy.ts

@@ -40,7 +40,7 @@ export const gridResizeElementStrategy: CanvasStrategyFactory = (
   if (selectedElementMetadata == null) {
     return null
   }
-  const isElementInsideGrid = MetadataUtils.isGridCell(
+  const isElementInsideGrid = MetadataUtils.isGridItem(
     canvasState.startingMetadata,
     selectedElement,
   )

editor/src/components/canvas/canvas-strategies/strategies/keyboard-absolute-resize-strategy.tsx

@@ -145,7 +145,7 @@ export function keyboardAbsoluteResizeStrategy(
     return null
   }
 
-  if (MetadataUtils.isGridCell(canvasState.startingMetadata, selectedElements[0])) {
+  if (MetadataUtils.isGridItem(canvasState.startingMetadata, selectedElements[0])) {
     return null
   }
 

editor/src/components/canvas/canvas-strategies/strategies/reparent-utils.ts

@@ -551,13 +551,13 @@ function pasteIntoNextGridCell(
   // if the copied elements are grid cells and the target is a grid cell, paste next to it
 
   const copyDataElementsAreGridCells = copyData.elementPaste.every(({ originalElementPath }) =>
-    MetadataUtils.isGridCell(copyData.originalContextMetadata, originalElementPath),
+    MetadataUtils.isGridItem(copyData.originalContextMetadata, originalElementPath),
   )
   if (!copyDataElementsAreGridCells) {
     return null
   }
 
-  const targetIsGridChild = MetadataUtils.isGridCell(metadata, selectedView)
+  const targetIsGridChild = MetadataUtils.isGridItem(metadata, selectedView)
   if (!targetIsGridChild) {
     return null
   }

editor/src/components/canvas/canvas-strategies/strategies/resize-grid-strategy.ts

@@ -77,7 +77,7 @@ export const resizeGridStrategy: CanvasStrategyFactory = (
     'some',
   )
 
-  const isGridCell = MetadataUtils.isGridCell(canvasState.startingMetadata, selectedElement)
+  const isGridCell = MetadataUtils.isGridItem(canvasState.startingMetadata, selectedElement)
   const isGrid = MetadataUtils.isGridLayoutedContainer(
     MetadataUtils.findElementByElementPath(canvasState.startingMetadata, selectedElement),
   )

editor/src/components/canvas/controls/grid-controls.tsx

@@ -662,7 +662,7 @@ const GridControl = React.memo<GridControlProps>(({ grid, controlsVisible }) =>
     Substores.metadata,
     (store) =>
       store.editor.selectedViews.every((elementPath) =>
-        MetadataUtils.isGridCellWithPositioning(store.editor.jsxMetadata, elementPath),
+        MetadataUtils.isGridItemWithPositioning(store.editor.jsxMetadata, elementPath),
       ),
     'GridControl targetsAreCellsWithPositioning',
   )

editor/src/components/canvas/controls/select-mode/absolute-resize-control.tsx

@@ -147,7 +147,7 @@ export const AbsoluteResizeControl = controlForStrategyMemoized(
         let diagonally = true
 
         for (const element of selectedElementsRef.current) {
-          if (MetadataUtils.isGridCell(metadata, element)) {
+          if (MetadataUtils.isGridItem(metadata, element)) {
             if (isFillOrStretchModeAppliedOnAnySide(metadata, element)) {
               diagonally = false
             }

editor/src/components/canvas/controls/select-mode/select-mode-hooks.tsx

@@ -724,7 +724,7 @@ function useSelectOrLiveModeSelectAndHover(
           foundTarget != null &&
           draggingAllowed &&
           // grid has its own drag handling
-          !MetadataUtils.isGridCell(
+          !MetadataUtils.isGridItem(
             editorStoreRef.current.editor.jsxMetadata,
             foundTarget.elementPath,
           )

editor/src/components/inspector/inspector-common.ts

@@ -746,7 +746,7 @@ export function detectFillHugFixedState(
     getSimpleAttributeAtPath(right(element.element.value.props), PP.create('style', 'height')),
   )
 
-  if (MetadataUtils.isGridCell(metadata, elementPath)) {
+  if (MetadataUtils.isGridItem(metadata, elementPath)) {
     const isStretchingExplicitly =
       (element.specialSizeMeasurements.alignSelf === 'stretch' &&
         axis === 'horizontal' &&
@@ -1205,7 +1205,7 @@ export function getFixedFillHugOptionsForElement(
         ? 'hug'
         : null,
       fillContainerApplicable(metadata, selectedView)
-        ? MetadataUtils.isGridCell(metadata, selectedView)
+        ? MetadataUtils.isGridItem(metadata, selectedView)
           ? 'stretch'
           : 'fill'
         : null,

editor/src/components/inspector/inspector-strategies/fill-container-basic-strategy.ts

@@ -167,7 +167,7 @@ export const fillContainerStrategyGridParent = (
   name: 'Set to Fill Container, in grid layout',
   strategy: () => {
     const elements = elementPaths.filter(
-      (path) => fillContainerApplicable(metadata, path) && MetadataUtils.isGridCell(metadata, path),
+      (path) => fillContainerApplicable(metadata, path) && MetadataUtils.isGridItem(metadata, path),
     )
 
     if (elements.length === 0) {

editor/src/components/inspector/sections/layout-section/self-layout-subsection/simplified-layout-subsection.tsx

@@ -61,7 +61,7 @@ export const SimplifiedLayoutSubsection = React.memo(() => {
     Substores.metadata,
     (store) =>
       store.editor.selectedViews.length === 1 &&
-      MetadataUtils.isGridCell(store.editor.jsxMetadata, store.editor.selectedViews[0]),
+      MetadataUtils.isGridItem(store.editor.jsxMetadata, store.editor.selectedViews[0]),
     'Inspector shouldShowGridCellSection',
   )
 

editor/src/core/model/element-metadata-utils.ts

@@ -381,19 +381,19 @@ export const MetadataUtils = {
   isGridLayoutedContainer(instance: ElementInstanceMetadata | null): boolean {
     return instance?.specialSizeMeasurements.layoutSystemForChildren === 'grid'
   },
-  isGridCell(metadata: ElementInstanceMetadataMap, path: ElementPath): boolean {
+  isGridItem(metadata: ElementInstanceMetadataMap, path: ElementPath): boolean {
     const elementMetadata = MetadataUtils.findElementByElementPath(metadata, path)
     return elementMetadata?.specialSizeMeasurements.parentLayoutSystem === 'grid'
   },
-  isGridCellWithPositioning(metadata: ElementInstanceMetadataMap, path: ElementPath): boolean {
+  isGridItemWithPositioning(metadata: ElementInstanceMetadataMap, path: ElementPath): boolean {
     const element = MetadataUtils.findElementByElementPath(metadata, path)
     return (
-      MetadataUtils.isGridCell(metadata, path) &&
+      MetadataUtils.isGridItem(metadata, path) &&
       element != null &&
-      !MetadataUtils.hasNoGridCellPositioning(element.specialSizeMeasurements)
+      !MetadataUtils.hasNoGridItemPositioning(element.specialSizeMeasurements)
     )
   },
-  hasNoGridCellPositioning(specialSizeMeasurements: SpecialSizeMeasurements): boolean {
+  hasNoGridItemPositioning(specialSizeMeasurements: SpecialSizeMeasurements): boolean {
     return (
       specialSizeMeasurements.elementGridPropertiesFromProps.gridColumnStart == null &&
       specialSizeMeasurements.elementGridPropertiesFromProps.gridColumnEnd == null &&
@@ -632,7 +632,7 @@ export const MetadataUtils = {
     return (
       MetadataUtils.isFlexLayoutedContainer(
         MetadataUtils.findElementByElementPath(jsxMetadata, EP.parentPath(path)),
-      ) || MetadataUtils.isGridCell(jsxMetadata, path)
+      ) || MetadataUtils.isGridItem(jsxMetadata, path)
     )
   },
   getRelativeAlignJustify: function (