@medusajs/dashboard 3.0.0-snapshot-20251211181725 → 3.0.0-snapshot-20251212142124

package/src/components/data-grid/components/data-grid-textarea-modal-cell.tsx

@@ -1,233 +0,0 @@
-import { clx, Textarea } from "@medusajs/ui"
-import { Popover as RadixPopover } from "radix-ui"
-import { useCallback, useEffect, useRef, useState } from "react"
-import { Controller, ControllerRenderProps } from "react-hook-form"
-
-import { useCombinedRefs } from "../../../hooks/use-combined-refs"
-import { useDataGridCell, useDataGridCellError } from "../hooks"
-import { useDataGridContext } from "../context"
-import { DataGridCellProps, InputProps, DataGridCellContext } from "../types"
-import { DataGridCellContainer } from "./data-grid-cell-container"
-
-type DataGridExpandableTextCellProps<TData, TValue = any> = DataGridCellProps<
-  TData,
-  TValue
-> & {
-  fieldLabel?: string
-}
-
-export const DataGridExpandableTextCell = <TData, TValue = any>({
-  context,
-  fieldLabel,
-}: DataGridExpandableTextCellProps<TData, TValue>) => {
-  const { field, control, renderProps } = useDataGridCell({
-    context,
-  })
-  const errorProps = useDataGridCellError({ context })
-
-  const { container, input } = renderProps
-
-  return (
-    <Controller
-      control={control}
-      name={field}
-      render={({ field }) => {
-        return (
-          <Inner
-            field={field}
-            inputProps={input}
-            fieldLabel={fieldLabel}
-            container={container}
-            errorProps={errorProps}
-          />
-        )
-      }}
-    />
-  )
-}
-
-const Inner = ({
-  field,
-  inputProps,
-  fieldLabel: _fieldLabel,
-  container,
-  errorProps,
-}: {
-  field: ControllerRenderProps<any, string>
-  inputProps: InputProps
-  fieldLabel?: string
-  container: any
-  errorProps: any
-}) => {
-  const { onChange: _, onBlur, ref, value, ...rest } = field
-  const { ref: inputRef, onBlur: onInputBlur, onChange, ...input } = inputProps
-  const { setSingleRange, anchor } = useDataGridContext()
-  const { row, col } = anchor || { row: 0, col: 0 }
-
-  const [localValue, setLocalValue] = useState(value || "")
-  const [isPopoverOpen, setIsPopoverOpen] = useState(false)
-  const [popoverValue, setPopoverValue] = useState(value || "")
-  const popoverContentRef = useRef<HTMLDivElement>(null)
-
-  useEffect(() => {
-    setLocalValue(value || "")
-  }, [value])
-
-  useEffect(() => {
-    if (isPopoverOpen) {
-      setPopoverValue(value || "")
-    }
-  }, [isPopoverOpen, value])
-
-  // Prevent DataGrid keyboard handlers from intercepting keys when popover is open
-  useEffect(() => {
-    if (!isPopoverOpen || !popoverContentRef.current) {
-      return
-    }
-
-    const handleKeyDownCapture = (e: KeyboardEvent) => {
-      const target = e.target as HTMLElement
-      const isTextarea = target.tagName === "TEXTAREA"
-      const isInPopover =
-        popoverContentRef.current && popoverContentRef.current.contains(target)
-
-      if (isTextarea || isInPopover) {
-        const dataGridKeys = [
-          "Enter",
-          "Delete",
-          "Backspace",
-          "ArrowUp",
-          "ArrowDown",
-          "ArrowLeft",
-          "ArrowRight",
-          "Tab",
-          " ",
-        ]
-
-        // Stop the keys from reaching DataGrid, so the textarea can handle them
-        if (dataGridKeys.includes(e.key) && e.key !== "Escape") {
-          e.stopImmediatePropagation()
-        }
-      }
-    }
-
-    window.addEventListener("keydown", handleKeyDownCapture, true)
-
-    return () => {
-      window.removeEventListener("keydown", handleKeyDownCapture, true)
-    }
-  }, [isPopoverOpen])
-
-  const combinedRefs = useCombinedRefs(inputRef, ref)
-
-  const handleOverlayMouseDown = useCallback(
-    (e: React.MouseEvent) => {
-      if (e.detail === 2) {
-        e.preventDefault()
-        e.stopPropagation()
-        setSingleRange({ row, col })
-        setIsPopoverOpen(true)
-        return
-      }
-      // For single clicks, use the normal handler which sets anchor and focuses container
-      container.overlayProps.onMouseDown?.(e)
-    },
-    [container.overlayProps, setSingleRange, row, col]
-  )
-
-  const customContainer = {
-    ...container,
-    overlayProps: {
-      ...container.overlayProps,
-      onMouseDown: handleOverlayMouseDown,
-    },
-  }
-
-  const handlePopoverSave = () => {
-    onChange(popoverValue, value)
-    setLocalValue(popoverValue)
-    setIsPopoverOpen(false)
-    onBlur()
-    onInputBlur()
-  }
-
-  const handlePopoverKeyDown = useCallback((e: React.KeyboardEvent) => {
-    if (e.key !== "Escape") {
-      e.stopPropagation()
-    }
-  }, [])
-
-  const displayValue = localValue || ""
-  const truncatedValue =
-    displayValue.length > 50
-      ? `${displayValue.substring(0, 50)}...`
-      : displayValue
-
-  return (
-    <RadixPopover.Root
-      open={isPopoverOpen}
-      onOpenChange={(open) => {
-        if (!open) {
-          handlePopoverSave()
-        } else {
-          setIsPopoverOpen(true)
-        }
-      }}
-    >
-      <DataGridCellContainer {...customContainer} {...errorProps}>
-        <RadixPopover.Anchor asChild>
-          <div
-            className={clx(
-              "txt-compact-small text-ui-fg-subtle flex size-full cursor-pointer items-center justify-center bg-transparent outline-none",
-              "focus:cursor-text"
-            )}
-          >
-            <span className="w-full truncate text-center">
-              {truncatedValue}
-            </span>
-          </div>
-        </RadixPopover.Anchor>
-        <input
-          className="sr-only"
-          autoComplete="off"
-          tabIndex={-1}
-          value={localValue}
-          onChange={(e) => setLocalValue(e.target.value)}
-          ref={combinedRefs}
-          onBlur={() => {
-            onBlur()
-            onInputBlur()
-            onChange(localValue, value)
-          }}
-          {...input}
-          {...rest}
-        />
-      </DataGridCellContainer>
-      <RadixPopover.Portal>
-        <RadixPopover.Content
-          className={clx(
-            "bg-ui-bg-base shadow-elevation-flyout flex max-h-[80vh] w-[600px] overflow-hidden p-0 outline-none"
-          )}
-          align="start"
-          side="bottom"
-          sideOffset={-29}
-          alignOffset={-16}
-          collisionPadding={24}
-          onEscapeKeyDown={handlePopoverSave}
-          onKeyDown={handlePopoverKeyDown}
-        >
-          <div ref={popoverContentRef} className="h-full w-full">
-            <Textarea
-              value={popoverValue}
-              onChange={(e) => setPopoverValue(e.target.value)}
-              onKeyDown={(e) => {
-                e.stopPropagation()
-              }}
-              className="!bg-ui-bg-base h-full min-h-[300px] w-full resize-none border-0 p-4 !shadow-none focus-visible:!shadow-none"
-            />
-          </div>
-        </RadixPopover.Content>
-      </RadixPopover.Portal>
-    </RadixPopover.Root>
-  )
-}

package/src/hooks/api/translations.tsx

@@ -1,254 +0,0 @@
-import { FetchError } from "@medusajs/js-sdk"
-import { HttpTypes } from "@medusajs/types"
-import {
-  QueryKey,
-  useMutation,
-  UseMutationOptions,
-  useQuery,
-  UseQueryOptions,
-  UseQueryResult,
-} from "@tanstack/react-query"
-import { sdk } from "../../lib/client"
-import { queryKeysFactory } from "../../lib/query-key-factory"
-import { queryClient } from "../../lib/query-client"
-import { productsQueryKeys, useProducts } from "./products"
-import { productVariantQueryKeys, useVariants } from "./product-variants"
-import { categoriesQueryKeys, useProductCategories } from "./categories"
-import { collectionsQueryKeys, useCollections } from "./collections"
-import { productTagsQueryKeys, useProductTags } from "./tags"
-import { productTypesQueryKeys, useProductTypes } from "./product-types"
-
-const TRANSLATIONS_QUERY_KEY = "translations" as const
-export const translationsQueryKeys = queryKeysFactory(TRANSLATIONS_QUERY_KEY)
-
-export const useReferenceTranslations = (
-  reference: string,
-  referenceId?: string | string[],
-  options?: Omit<
-    UseQueryOptions<any, FetchError, any, QueryKey>,
-    "queryFn" | "queryKey"
-  >
-) => {
-  const referenceHookMap = new Map<
-    string,
-    () => UseQueryResult<{
-      translations: HttpTypes.AdminTranslation[]
-      references: { id: string; [key: string]: string }[]
-      translatableFields: string[]
-    }>
-  >([
-    [
-      "product",
-      () => {
-        const translatableFields = ["title", "description"]
-        const fields = translatableFields.concat(["translations.*"]).join(",")
-
-        const { products, ...rest } = useProducts(
-          { id: referenceId ?? [], fields },
-          options
-        )
-        return {
-          ...rest,
-          data: {
-            translations:
-              products?.flatMap((product) => product.translations ?? []) ?? [],
-            references: products ?? [],
-            translatableFields,
-          },
-        } as unknown as UseQueryResult<{
-          translations: HttpTypes.AdminTranslation[]
-          references: { id: string; [key: string]: string }[]
-          translatableFields: string[]
-        }>
-      },
-    ],
-    [
-      "product_variant",
-      () => {
-        const translatableFields = ["title"]
-        const fields = translatableFields.concat(["translations.*"]).join(",")
-
-        const { variants, ...rest } = useVariants(
-          { id: referenceId ?? [], fields },
-          options
-        )
-        return {
-          ...rest,
-          data: {
-            translations:
-              variants?.flatMap((variant) => variant.translations ?? []) ?? [],
-            references: variants ?? [],
-            translatableFields,
-          },
-        } as unknown as UseQueryResult<{
-          translations: HttpTypes.AdminTranslation[]
-          references: { id: string; [key: string]: string }[]
-          translatableFields: string[]
-        }>
-      },
-    ],
-    [
-      "product_category",
-      () => {
-        const translatableFields = ["name", "description"]
-        const fields = translatableFields.concat(["translations.*"]).join(",")
-
-        const { product_categories, ...rest } = useProductCategories(
-          { id: referenceId ?? [], fields },
-          options
-        )
-        return {
-          ...rest,
-          data: {
-            translations:
-              product_categories?.flatMap(
-                (category) => category.translations ?? []
-              ) ?? [],
-            references: product_categories ?? [],
-            translatableFields,
-          },
-        } as unknown as UseQueryResult<{
-          translations: HttpTypes.AdminTranslation[]
-          references: { id: string; [key: string]: string }[]
-          translatableFields: string[]
-        }>
-      },
-    ],
-    [
-      "product_collection",
-      () => {
-        const translatableFields = ["title"]
-        const fields = translatableFields.concat(["translations.*"]).join(",")
-
-        const { collections, ...rest } = useCollections(
-          { id: referenceId ?? [], fields },
-          options
-        )
-        return {
-          ...rest,
-          data: {
-            translations:
-              collections?.flatMap(
-                (collection) => collection.translations ?? []
-              ) ?? [],
-            references: collections ?? [],
-            translatableFields,
-          },
-        } as unknown as UseQueryResult<{
-          translations: HttpTypes.AdminTranslation[]
-          references: { id: string; [key: string]: string }[]
-          translatableFields: string[]
-        }>
-      },
-    ],
-    [
-      "product_type",
-      () => {
-        const translatableFields = ["value"]
-        const fields = translatableFields.concat(["translations.*"]).join(",")
-
-        const { product_types, ...rest } = useProductTypes(
-          { id: referenceId ?? [], fields },
-          options
-        )
-        return {
-          ...rest,
-          data: {
-            translations:
-              product_types?.flatMap((type) => type.translations ?? []) ?? [],
-            references: product_types ?? [],
-            translatableFields,
-          },
-        } as unknown as UseQueryResult<{
-          translations: HttpTypes.AdminTranslation[]
-          references: { id: string; [key: string]: string }[]
-          translatableFields: string[]
-        }>
-      },
-    ],
-    [
-      "product_tag",
-      () => {
-        const translatableFields = ["value"]
-        const fields = translatableFields.concat(["translations.*"]).join(",")
-
-        const { product_tags, ...rest } = useProductTags(
-          { id: referenceId ?? [], fields },
-          options
-        )
-        return {
-          ...rest,
-          data: {
-            translations:
-              product_tags?.flatMap((tag) => tag.translations ?? []) ?? [],
-            references: product_tags ?? [],
-            translatableFields,
-          },
-        } as unknown as UseQueryResult<{
-          translations: HttpTypes.AdminTranslation[]
-          references: { id: string; [key: string]: string }[]
-          translatableFields: string[]
-        }>
-      },
-    ],
-    // TODO: product option and option values
-  ])
-  const referenceHook = referenceHookMap.get(reference)
-  if (!referenceHook) {
-    throw new Error(`No hook found for reference type: ${reference}`)
-  }
-  const { data, ...rest } = referenceHook()
-  return { ...data, ...rest }
-}
-
-export const useTranslations = (
-  query?: HttpTypes.AdminTranslationsListParams,
-  options?: Omit<
-    UseQueryOptions<
-      HttpTypes.AdminTranslationsListResponse,
-      FetchError,
-      HttpTypes.AdminTranslationsListResponse,
-      QueryKey
-    >,
-    "queryFn" | "queryKey"
-  >
-) => {
-  const { data, ...rest } = useQuery({
-    queryKey: translationsQueryKeys.list(query),
-    queryFn: () => sdk.admin.translation.list(query),
-    ...options,
-  })
-
-  return { ...data, ...rest }
-}
-
-export const useBatchTranslations = (
-  reference: string,
-  options?: UseMutationOptions<
-    HttpTypes.AdminTranslationsBatchResponse,
-    FetchError,
-    HttpTypes.AdminBatchTranslations
-  >
-) => {
-  const referenceInvalidationKeysMap = new Map<string, QueryKey>([
-    ["product", productsQueryKeys.lists()],
-    ["product_variant", productVariantQueryKeys.lists()],
-    ["product_category", categoriesQueryKeys.lists()],
-    ["product_collection", collectionsQueryKeys.lists()],
-    ["product_type", productTypesQueryKeys.lists()],
-    ["product_tag", productTagsQueryKeys.lists()],
-  ])
-
-  return useMutation({
-    mutationFn: (payload: HttpTypes.AdminBatchTranslations) =>
-      sdk.admin.translation.batch(payload),
-    onSuccess: (data, variables, context) => {
-      queryClient.invalidateQueries({
-        queryKey: referenceInvalidationKeysMap.get(reference),
-      })
-
-      options?.onSuccess?.(data, variables, context)
-    },
-    ...options,
-  })
-}

package/src/routes/translations/translation-list/index.tsx

@@ -1 +0,0 @@
-export { TranslationList as Component } from "./translation-list"

package/src/routes/translations/translation-list/translation-list.tsx

@@ -1,131 +0,0 @@
-import { Button, Container, Heading, Text } from "@medusajs/ui"
-import { SingleColumnPage } from "../../../components/layout/pages"
-import { useTranslation } from "react-i18next"
-import { Link, useNavigate } from "react-router-dom"
-import { Buildings, Pencil } from "@medusajs/icons"
-import { IconAvatar } from "../../../components/common/icon-avatar/icon-avatar"
-import { ActionMenu } from "../../../components/common/action-menu"
-import { LinkButton } from "../../../components/common/link-button/link-button"
-
-type TranslatableEntity = {
-  icon: React.ReactNode
-  label: string
-  reference: string
-}
-
-const TRANSLATABLE_ENTITIES: TranslatableEntity[] = [
-  {
-    icon: <Buildings />,
-    label: "Product",
-    reference: "product",
-  },
-  {
-    icon: <Buildings />,
-    label: "Product Variants",
-    reference: "product_variant",
-  },
-  {
-    icon: <Buildings />,
-    label: "Product Categories",
-    reference: "product_category",
-  },
-  {
-    icon: <Buildings />,
-    label: "Product Collections",
-    reference: "product_collection",
-  },
-  {
-    icon: <Buildings />,
-    label: "Product Types",
-    reference: "product_type",
-  },
-  {
-    icon: <Buildings />,
-    label: "Product Tags",
-    reference: "product_tag",
-  },
-  {
-    icon: <Buildings />,
-    label: "Product Options",
-    reference: "product_option",
-  },
-  {
-    icon: <Buildings />,
-    label: "Product Option Values",
-    reference: "product_option_value",
-  },
-]
-
-export const TranslationList = () => {
-  const { t } = useTranslation()
-  const navigate = useNavigate()
-
-  const handleManageLocales = () => {
-    navigate("/settings/store/locales")
-  }
-
-  return (
-    <SingleColumnPage
-      widgets={{
-        before: [],
-        after: [],
-      }}
-    >
-      <Container className="p-0">
-        <div className="flex items-center justify-between px-6 py-4">
-          <div>
-            <Heading>Manage {t("translations.domain")}</Heading>
-            <Text className="text-ui-fg-subtle" size="small">
-              {t("translations.subtitle")}
-            </Text>
-          </div>
-          <Button
-            variant="secondary"
-            size="small"
-            onClick={handleManageLocales}
-          >
-            {t("translations.actions.manageLocales")}
-          </Button>
-        </div>
-      </Container>
-      {TRANSLATABLE_ENTITIES.map((entity) => (
-        <Container key={entity.label} className="p-0">
-          <div className="flex items-center justify-between px-6 py-3">
-            <Link
-              to={`/settings/translations/edit?reference=${entity.reference}`}
-              className="transition-fg hover:bg-ui-bg-base-hover active:bg-ui-bg-base-pressed focus-visible:shadow-borders-interactive-with-active -mx-2 flex flex-1 items-center gap-x-2 rounded-md px-2 py-1.5 outline-none"
-            >
-              <IconAvatar variant="squared">{entity.icon}</IconAvatar>
-              <Text size="small">{entity.label}</Text>
-            </Link>
-            <div className="flex items-center gap-x-2">
-              <ActionMenu
-                groups={[
-                  {
-                    actions: [
-                      {
-                        icon: <Pencil />,
-                        label: t("actions.edit"),
-                        onClick: () => {
-                          navigate(
-                            `/settings/translations/edit?reference=${entity.label.toLowerCase()}`
-                          )
-                        },
-                      },
-                    ],
-                  },
-                ]}
-              ></ActionMenu>
-              <Text>|</Text>
-              <LinkButton
-                to={`/settings/translations/${entity.label.toLowerCase()}`}
-              >
-                {t("actions.viewDetails")}
-              </LinkButton>
-            </div>
-          </div>
-        </Container>
-      ))}
-    </SingleColumnPage>
-  )
-}

package/src/routes/translations/translations-edit/components/translations-edit-form/index.ts

@@ -1 +0,0 @@
-export * from "./translations-edit-form"