feat(dashboard): SO cart item total rules UI (#10386)

packages/admin/dashboard/src/components/data-grid/components/data-grid-cell-container.tsx

@@ -19,52 +19,56 @@ export const DataGridCellContainer = ({
   children,
   errors,
   rowErrors,
+  outerComponent,
 }: DataGridCellContainerProps & DataGridErrorRenderProps<any>) => {
   const error = get(errors, field)
   const hasError = !!error
 
   return (
-    <div
-      className={clx(
-        "bg-ui-bg-base group/cell relative flex size-full items-center gap-x-2 px-4 py-2.5 outline-none",
-        {
-          "bg-ui-tag-red-bg text-ui-tag-red-text":
-            hasError && !isAnchor && !isSelected && !isDragSelected,
-          "ring-ui-bg-interactive ring-2 ring-inset": isAnchor,
-          "bg-ui-bg-highlight [&:has([data-field]:focus)]:bg-ui-bg-base":
-            isSelected || isAnchor,
-          "bg-ui-bg-subtle": isDragSelected && !isAnchor,
-        }
-      )}
-      tabIndex={-1}
-      {...innerProps}
-    >
-      <ErrorMessage
-        name={field}
-        errors={errors}
-        render={({ message }) => {
-          return (
-            <div className="flex items-center justify-center">
-              <Tooltip content={message} delayDuration={0}>
-                <ExclamationCircle className="text-ui-tag-red-icon z-[3]" />
-              </Tooltip>
-            </div>
-          )
-        }}
-      />
-      <div className="relative z-[1] flex size-full items-center justify-center">
-        <RenderChildren isAnchor={isAnchor} placeholder={placeholder}>
-          {children}
-        </RenderChildren>
-      </div>
-      <DataGridRowErrorIndicator rowErrors={rowErrors} />
-      {showOverlay && (
-        <div
-          {...overlayProps}
-          data-cell-overlay="true"
-          className="absolute inset-0 z-[2] size-full"
+    <div className="group/container relative size-full">
+      <div
+        className={clx(
+          "bg-ui-bg-base group/cell relative flex size-full items-center gap-x-2 px-4 py-2.5 outline-none",
+          {
+            "bg-ui-tag-red-bg text-ui-tag-red-text":
+              hasError && !isAnchor && !isSelected && !isDragSelected,
+            "ring-ui-bg-interactive ring-2 ring-inset": isAnchor,
+            "bg-ui-bg-highlight [&:has([data-field]:focus)]:bg-ui-bg-base":
+              isSelected || isAnchor,
+            "bg-ui-bg-subtle": isDragSelected && !isAnchor,
+          }
+        )}
+        tabIndex={-1}
+        {...innerProps}
+      >
+        <ErrorMessage
+          name={field}
+          errors={errors}
+          render={({ message }) => {
+            return (
+              <div className="flex items-center justify-center">
+                <Tooltip content={message} delayDuration={0}>
+                  <ExclamationCircle className="text-ui-tag-red-icon z-[3]" />
+                </Tooltip>
+              </div>
+            )
+          }}
         />
-      )}
+        <div className="relative z-[1] flex size-full items-center justify-center">
+          <RenderChildren isAnchor={isAnchor} placeholder={placeholder}>
+            {children}
+          </RenderChildren>
+        </div>
+        <DataGridRowErrorIndicator rowErrors={rowErrors} />
+        {showOverlay && (
+          <div
+            {...overlayProps}
+            data-cell-overlay="true"
+            className="absolute inset-0"
+          />
+        )}
+      </div>
+      {outerComponent}
     </div>
   )
 }

packages/admin/dashboard/src/components/data-grid/components/data-grid-root.tsx

@@ -57,6 +57,7 @@ export interface DataGridRootProps<
   state: UseFormReturn<TFieldValues>
   getSubRows?: (row: TData) => TData[] | undefined
   onEditingChange?: (isEditing: boolean) => void
+  disableInteractions?: boolean
 }
 
 const ROW_HEIGHT = 40
@@ -102,6 +103,7 @@ export const DataGridRoot = <
   state,
   getSubRows,
   onEditingChange,
+  disableInteractions,
 }: DataGridRootProps<TData, TFieldValues>) => {
   const containerRef = useRef<HTMLDivElement>(null)
 
@@ -114,7 +116,9 @@ export const DataGridRoot = <
     formState: { errors },
   } = state
 
-  const [trapActive, setTrapActive] = useState(true)
+  const [internalTrapActive, setTrapActive] = useState(true)
+
+  const trapActive = !disableInteractions && internalTrapActive
 
   const [anchor, setAnchor] = useState<DataGridCoordinates | null>(null)
   const [rangeEnd, setRangeEnd] = useState<DataGridCoordinates | null>(null)
@@ -533,7 +537,7 @@ export const DataGridRoot = <
         queryTool?.getContainer(anchor)?.focus()
       })
     }
-  }, [anchor, trapActive, queryTool])
+  }, [anchor, trapActive, setSingleRange, scrollToCoordinates, queryTool])
 
   return (
     <DataGridContext.Provider value={values}>

packages/admin/dashboard/src/components/data-grid/hooks/use-data-grid-keydown-event.tsx

@@ -46,7 +46,7 @@ const VERTICAL_KEYS = ["ArrowUp", "ArrowDown"]
 
 export const useDataGridKeydownEvent = <
   TData,
-  TFieldValues extends FieldValues,
+  TFieldValues extends FieldValues
 >({
   containerRef,
   matrix,
@@ -108,8 +108,8 @@ export const useDataGridKeydownEvent = <
         direction === "horizontal"
           ? setSingleRange
           : e.shiftKey
-            ? setRangeEnd
-            : setSingleRange
+          ? setRangeEnd
+          : setSingleRange
 
       if (!basis) {
         return

packages/admin/dashboard/src/components/data-grid/types.ts

@@ -96,6 +96,7 @@ export interface DataGridCellContainerProps extends PropsWithChildren<{}> {
   isDragSelected: boolean
   placeholder?: ReactNode
   showOverlay: boolean
+  outerComponent?: ReactNode
 }
 
 export type DataGridCellSnapshot<