@medusajs/dashboard 2.10.4-snapshot-20250922195925 → 2.10.4-snapshot-20250925172615

package/src/routes/refund-reasons/refund-reason-list/components/refund-reason-list-table/refund-reason-list-table.tsx

@@ -1,29 +1,32 @@
 import { PencilSquare, Trash } from "@medusajs/icons"
 import { HttpTypes } from "@medusajs/types"
-import { Button, Container, Heading, Text } from "@medusajs/ui"
+import {
+  Container,
+  createDataTableColumnHelper,
+  toast,
+  usePrompt,
+} from "@medusajs/ui"
 import { keepPreviousData } from "@tanstack/react-query"
-import { createColumnHelper } from "@tanstack/react-table"
-import { useMemo } from "react"
+import { useCallback, useMemo } from "react"
 import { useTranslation } from "react-i18next"
-import { Link } from "react-router-dom"
-
-import { ActionMenu } from "../../../../../components/common/action-menu"
-import { _DataTable } from "../../../../../components/table/data-table"
-import { useRefundReasons } from "../../../../../hooks/api"
+import { useNavigate } from "react-router-dom"
+import { DataTable } from "../../../../../components/data-table"
+import {
+  useDeleteRefundReasonLazy,
+  useRefundReasons,
+} from "../../../../../hooks/api"
 import { useRefundReasonTableColumns } from "../../../../../hooks/table/columns"
 import { useRefundReasonTableQuery } from "../../../../../hooks/table/query"
-import { useDataTable } from "../../../../../hooks/use-data-table"
-import { useDeleteRefundReasonAction } from "../../../common/hooks/use-delete-refund-reason-action"
 
 const PAGE_SIZE = 20
 
 export const RefundReasonListTable = () => {
   const { t } = useTranslation()
-  const { searchParams, raw } = useRefundReasonTableQuery({
+  const { searchParams } = useRefundReasonTableQuery({
     pageSize: PAGE_SIZE,
   })
 
-  const { refund_reasons, count, isPending, isError, error } = useRefundReasons(
+  const { refund_reasons, count, isLoading, isError, error } = useRefundReasons(
     searchParams,
     {
       placeholderData: keepPreviousData,
@@ -32,100 +35,104 @@ export const RefundReasonListTable = () => {
 
   const columns = useColumns()
 
-  const { table } = useDataTable({
-    data: refund_reasons,
-    columns,
-    count,
-    getRowId: (row) => row.id,
-    pageSize: PAGE_SIZE,
-  })
-
   if (isError) {
     throw error
   }
 
   return (
     <Container className="divide-y px-0 py-0">
-      <div className="flex items-center justify-between px-6 py-4">
-        <div>
-          <Heading>{t("refundReasons.domain")}</Heading>
-          <Text className="text-ui-fg-subtle" size="small">
-            {t("refundReasons.subtitle")}
-          </Text>
-        </div>
-        <Button variant="secondary" size="small" asChild>
-          <Link to="create">{t("actions.create")}</Link>
-        </Button>
-      </div>
-      <_DataTable
-        table={table}
-        queryObject={raw}
-        count={count}
-        isLoading={isPending}
+      <DataTable
+        data={refund_reasons}
         columns={columns}
+        rowCount={count}
         pageSize={PAGE_SIZE}
-        noHeader={true}
-        pagination
-        search
+        getRowId={(row) => row.id}
+        heading={t("refundReasons.domain")}
+        subHeading={t("refundReasons.subtitle")}
+        emptyState={{
+          empty: {
+            heading: t("general.noRecordsMessage"),
+          },
+          filtered: {
+            heading: t("general.noRecordsMessage"),
+            description: t("general.noRecordsMessageFiltered"),
+          },
+        }}
+        actions={[
+          {
+            label: t("actions.create"),
+            to: "create",
+          },
+        ]}
+        isLoading={isLoading}
+        enableSearch={true}
       />
     </Container>
   )
 }
 
-type RefundReasonRowActionsProps = {
-  refundReason: HttpTypes.AdminRefundReason
-}
+const columnHelper = createDataTableColumnHelper<HttpTypes.AdminRefundReason>()
 
-const RefundReasonRowActions = ({
-  refundReason,
-}: RefundReasonRowActionsProps) => {
+const useColumns = () => {
   const { t } = useTranslation()
-  const handleDelete = useDeleteRefundReasonAction(
-    refundReason.id,
-    refundReason.label
+  const prompt = usePrompt()
+  const navigate = useNavigate()
+  const base = useRefundReasonTableColumns()
+
+  const { mutateAsync } = useDeleteRefundReasonLazy()
+
+  const handleDelete = useCallback(
+    async (refundReason: HttpTypes.AdminRefundReason) => {
+      const confirm = await prompt({
+        title: t("general.areYouSure"),
+        description: t("refundReasons.delete.confirmation", {
+          label: refundReason.label,
+        }),
+        confirmText: t("actions.delete"),
+        cancelText: t("actions.cancel"),
+      })
+
+      if (!confirm) {
+        return
+      }
+
+      await mutateAsync(refundReason.id, {
+        onSuccess: () => {
+          toast.success(t("refundReasons.delete.successToast"))
+        },
+        onError: (e) => {
+          toast.error(e.message)
+        },
+      })
+    },
+    [t, prompt, mutateAsync]
   )
 
-  return (
-    <ActionMenu
-      groups={[
-        {
-          actions: [
+  return useMemo(
+    () => [
+      ...base,
+      columnHelper.action({
+        actions: (ctx) => [
+          [
             {
               icon: <PencilSquare />,
               label: t("actions.edit"),
-              to: `${refundReason.id}/edit`,
+              onClick: () =>
+                navigate(
+                  `/settings/refund-reasons/${ctx.row.original.id}/edit`
+                ),
             },
           ],
-        },
-        {
-          actions: [
+          [
             {
               icon: <Trash />,
               label: t("actions.delete"),
-              onClick: handleDelete,
+              onClick: () => handleDelete(ctx.row.original),
             },
           ],
-        },
-      ]}
-    />
-  )
-}
-
-const columnHelper = createColumnHelper<HttpTypes.AdminRefundReason>()
-
-const useColumns = () => {
-  const base = useRefundReasonTableColumns()
-
-  return useMemo(
-    () => [
-      ...base,
-      columnHelper.display({
-        id: "actions",
-        cell: ({ row }) => (
-          <RefundReasonRowActions refundReason={row.original} />
-        ),
+        ],
       }),
     ],
-    [base]
+    [base, handleDelete, navigate, t]
   )
 }

package/src/routes/regions/region-create/components/create-region-form/create-region-form.tsx

@@ -37,6 +37,7 @@ import { formatProvider } from "../../../../../lib/format-provider"
 import { useCountries } from "../../../common/hooks/use-countries"
 import { useCountryTableColumns } from "../../../common/hooks/use-country-table-columns"
 import { useCountryTableQuery } from "../../../common/hooks/use-country-table-query"
+import { useDocumentDirection } from "../../../../../hooks/use-document-direction"
 
 type CreateRegionFormProps = {
   currencies: CurrencyInfo[]
@@ -64,7 +65,7 @@ export const CreateRegionForm = ({
   const { setIsOpen } = useStackedModal()
   const [rowSelection, setRowSelection] = useState<RowSelectionState>({})
   const { handleSuccess } = useRouteModal()
-
+  const direction = useDocumentDirection()
   const form = useForm<zod.infer<typeof CreateRegionSchema>>({
     defaultValues: {
       name: "",
@@ -226,7 +227,11 @@ export const CreateRegionForm = ({
                         <Form.Item>
                           <Form.Label>{t("fields.currency")}</Form.Label>
                           <Form.Control>
-                            <Select {...field} onValueChange={onChange}>
+                            <Select
+                              dir={direction}
+                              {...field}
+                              onValueChange={onChange}
+                            >
                               <Select.Trigger ref={ref}>
                                 <Select.Value />
                               </Select.Trigger>
@@ -260,6 +265,8 @@ export const CreateRegionForm = ({
                           <Form.Label>{t("fields.automaticTaxes")}</Form.Label>
                           <Form.Control>
                             <Switch
+                              dir="ltr"
+                              className="rtl:rotate-180"
                               {...field}
                               checked={value}
                               onCheckedChange={onChange}
@@ -287,6 +294,8 @@ export const CreateRegionForm = ({
                           </Form.Label>
                           <Form.Control>
                             <Switch
+                              className="rtl:rotate-180"
+                              dir="ltr"
                               {...field}
                               checked={value}
                               onCheckedChange={onChange}

package/src/routes/regions/region-edit/components/edit-region-form/edit-region-form.tsx

@@ -14,6 +14,7 @@ import { KeyboundForm } from "../../../../../components/utilities/keybound-form/
 import { useUpdateRegion } from "../../../../../hooks/api/regions.tsx"
 import { CurrencyInfo } from "../../../../../lib/data/currencies.ts"
 import { formatProvider } from "../../../../../lib/format-provider.ts"
+import { useDocumentDirection } from "../../../../../hooks/use-document-direction"
 
 type EditRegionFormProps = {
   region: HttpTypes.AdminRegion
@@ -42,7 +43,7 @@ export const EditRegionForm = ({
     (preference) =>
       preference.attribute === "region_id" && preference.value === region.id
   )
-
+  const direction = useDocumentDirection()
   const form = useForm<zod.infer<typeof EditRegionSchema>>({
     defaultValues: {
       name: region.name,
@@ -106,7 +107,11 @@ export const EditRegionForm = ({
                     <Form.Item>
                       <Form.Label>{t("fields.currency")}</Form.Label>
                       <Form.Control>
-                        <Select onValueChange={onChange} {...field}>
+                        <Select
+                          dir={direction}
+                          onValueChange={onChange}
+                          {...field}
+                        >
                           <Select.Trigger ref={ref}>
                             <Select.Value />
                           </Select.Trigger>
@@ -137,6 +142,8 @@ export const EditRegionForm = ({
                           <Form.Label>{t("fields.automaticTaxes")}</Form.Label>
                           <Form.Control>
                             <Switch
+                              dir="ltr"
+                              className="rtl:rotate-180"
                               {...field}
                               checked={value}
                               onCheckedChange={onChange}
@@ -164,6 +171,8 @@ export const EditRegionForm = ({
                           </Form.Label>
                           <Form.Control>
                             <Switch
+                              dir="ltr"
+                              className="rtl:rotate-180"
                               {...field}
                               checked={value}
                               onCheckedChange={onChange}

package/src/routes/reservations/reservation-detail/components/edit-reservation/components/edit-reservation-form.tsx

@@ -10,6 +10,7 @@ import { z } from "zod"
 import { Form } from "../../../../../../components/common/form"
 import { KeyboundForm } from "../../../../../../components/utilities/keybound-form"
 import { useUpdateReservationItem } from "../../../../../../hooks/api/reservations"
+import { useDocumentDirection } from "../../../../../../hooks/use-document-direction"
 
 type EditReservationFormProps = {
   reservation: HttpTypes.AdminReservationResponse["reservation"]
@@ -59,7 +60,7 @@ export const EditReservationForm = ({
 }: EditReservationFormProps) => {
   const { t } = useTranslation()
   const { handleSuccess } = useRouteModal()
-
+  const direction = useDocumentDirection()
   const form = useForm<zod.infer<typeof EditReservationSchema>>({
     defaultValues: getDefaultValues(reservation),
     resolver: zodResolver(EditReservationSchema),
@@ -102,6 +103,7 @@ export const EditReservationForm = ({
                   <Form.Label>{t("inventory.reservation.location")}</Form.Label>
                   <Form.Control>
                     <Select
+                      dir={direction}
                       value={value}
                       onValueChange={(v) => {
                         onChange(v)

package/src/routes/sales-channels/sales-channel-create/components/create-sales-channel-form/create-sales-channel-form.tsx

@@ -119,6 +119,8 @@ export const CreateSalesChannelForm = () => {
                         <Form.Label>{t("general.enabled")}</Form.Label>
                         <Form.Control>
                           <Switch
+                            dir="ltr"
+                            className="rtl:rotate-180"
                             {...field}
                             checked={value}
                             onCheckedChange={onChange}

package/src/routes/sales-channels/sales-channel-edit/components/edit-sales-channel-form/edit-sales-channel-form.tsx

@@ -103,6 +103,8 @@ export const EditSalesChannelForm = ({
                     <Form.Label>{t("general.enabled")}</Form.Label>
                     <Form.Control>
                       <Switch
+                        dir="ltr"
+                        className="rtl:rotate-180"
                         onCheckedChange={onChange}
                         checked={value}
                         {...field}

package/src/routes/store/store-add-currencies/components/add-currencies-form/add-currencies-form.tsx

@@ -287,6 +287,8 @@ const useColumns = (
           return (
             <div className="flex items-center justify-end">
               <Switch
+                dir="ltr"
+                className="rtl:rotate-180"
                 disabled={isPreSelected}
                 checked={isTaxInclusive ?? false}
                 onCheckedChange={(val) => {

package/src/routes/store/store-edit/components/edit-store-form/edit-store-form.tsx

@@ -12,6 +12,7 @@ import { KeyboundForm } from "../../../../../components/utilities/keybound-form"
 import { useUpdateStore } from "../../../../../hooks/api/store"
 import { useComboboxData } from "../../../../../hooks/use-combobox-data"
 import { sdk } from "../../../../../lib/client"
+import { useDocumentDirection } from "../../../../../hooks/use-document-direction"
 
 type EditStoreFormProps = {
   store: HttpTypes.AdminStore
@@ -28,7 +29,7 @@ const EditStoreSchema = z.object({
 export const EditStoreForm = ({ store }: EditStoreFormProps) => {
   const { t } = useTranslation()
   const { handleSuccess } = useRouteModal()
-
+  const direction = useDocumentDirection()  
   const form = useForm<z.infer<typeof EditStoreSchema>>({
     defaultValues: {
       name: store.name,
@@ -118,7 +119,11 @@ export const EditStoreForm = ({ store }: EditStoreFormProps) => {
                   <Form.Item>
                     <Form.Label>{t("store.defaultCurrency")}</Form.Label>
                     <Form.Control>
-                      <Select {...field} onValueChange={onChange}>
+                      <Select
+                        dir={direction}
+                        {...field}
+                        onValueChange={onChange}
+                      >
                         <Select.Trigger ref={field.ref}>
                           <Select.Value />
                         </Select.Trigger>

package/src/routes/tax-regions/tax-region-tax-override-create/components/tax-region-override-create-form/tax-region-tax-override-create.tsx

@@ -36,6 +36,7 @@ import {
   TaxRateRuleReferenceSchema,
 } from "../../../common/schemas"
 import { createTaxRulePayload } from "../../../common/utils"
+import { useDocumentDirection } from "../../../../../hooks/use-document-direction"
 
 const TaxRegionCreateTaxOverrideSchema = z.object({
   name: z.string().min(1),
@@ -77,7 +78,7 @@ export const TaxRegionCreateTaxOverrideForm = ({
   const { t } = useTranslation()
   const { handleSuccess } = useRouteModal()
   const { setIsOpen } = useStackedModal()
-
+  const direction = useDocumentDirection()
   const form = useForm<z.infer<typeof TaxRegionCreateTaxOverrideSchema>>({
     defaultValues: {
       name: "",
@@ -547,6 +548,7 @@ export const TaxRegionCreateTaxOverrideForm = ({
                                   <div className="text-ui-fg-subtle grid gap-1.5 px-1.5 md:grid-cols-2">
                                     {isLast ? (
                                       <Select
+                                        dir={direction}
                                         value={type}
                                         onValueChange={handleChangeType}
                                       >

package/src/routes/tax-regions/tax-region-tax-override-edit/components/tax-region-tax-override-edit-form/tax-region-tax-override-edit-form.tsx

@@ -37,6 +37,7 @@ import {
 } from "../../../common/schemas"
 import { createTaxRulePayload } from "../../../common/utils"
 import { InitialRuleValues } from "../../types"
+import { useDocumentDirection } from "../../../../../hooks/use-document-direction"
 
 export const DISPLAY_OVERRIDE_ITEMS_LIMIT = 10
 
@@ -81,7 +82,7 @@ export const TaxRegionTaxOverrideEditForm = ({
   const { t } = useTranslation()
   const { handleSuccess } = useRouteModal()
   const { setIsOpen } = useStackedModal()
-
+  const direction = useDocumentDirection()
   const form = useForm<z.infer<typeof TaxRegionTaxRateEditSchema>>({
     defaultValues: {
       name: taxRate.name,
@@ -514,6 +515,7 @@ export const TaxRegionTaxOverrideEditForm = ({
                               <div className="text-ui-fg-subtle grid gap-1.5 px-1.5 md:grid-cols-2">
                                 {isLast ? (
                                   <Select
+                                    dir={direction}
                                     value={type}
                                     onValueChange={handleChangeType}
                                   >

package/src/routes/workflow-executions/workflow-execution-detail/components/workflow-execution-timeline-section/workflow-execution-timeline-section.tsx

@@ -18,6 +18,7 @@ import {
   STEP_OK_STATES,
   STEP_SKIPPED_STATES,
 } from "../../../constants"
+import { useDocumentDirection } from "../../../../../hooks/use-document-direction"
 
 type WorkflowExecutionTimelineSectionProps = {
   execution: HttpTypes.AdminWorkflowExecutionResponse["workflow_execution"]
@@ -87,7 +88,7 @@ const Canvas = ({
 }) => {
   const [zoom, setZoom] = useState<number>(1)
   const [isDragging, setIsDragging] = useState(false)
-
+  const direction = useDocumentDirection()
   const scale = useMotionValue(defaultState.scale)
   const x = useMotionValue(defaultState.x)
   const y = useMotionValue(defaultState.y)
@@ -217,7 +218,7 @@ const Canvas = ({
               <PlusMini />
             </button>
             <div>
-              <DropdownMenu>
+              <DropdownMenu dir={direction}>
                 <DropdownMenu.Trigger className="disabled:text-ui-fg-disabled transition-fg hover:bg-ui-bg-base-hover active:bg-ui-bg-base-pressed focus-visible:bg-ui-bg-base-pressed flex w-[50px] items-center justify-center border-r p-1 outline-none">
                   <Text
                     as="span"

package/dist/chunk-BKJC5BGQ.mjs

@@ -1,53 +0,0 @@
-// src/components/common/badge-list-summary/badge-list-summary.tsx
-import { Badge, Tooltip, clx } from "@medusajs/ui";
-import { useTranslation } from "react-i18next";
-import { jsx, jsxs } from "react/jsx-runtime";
-var BadgeListSummary = ({
-  list,
-  className,
-  inline,
-  rounded = false,
-  n = 2
-}) => {
-  const { t } = useTranslation();
-  const title = t("general.plusCount", {
-    count: list.length - n
-  });
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: clx(
-        "text-ui-fg-subtle txt-compact-small gap-x-2 overflow-hidden",
-        {
-          "inline-flex": inline,
-          flex: !inline
-        },
-        className
-      ),
-      children: [
-        list.slice(0, n).map((item) => {
-          return /* @__PURE__ */ jsx(Badge, { rounded: rounded ? "full" : "base", size: "2xsmall", children: item }, item);
-        }),
-        list.length > n && /* @__PURE__ */ jsx("div", { className: "whitespace-nowrap", children: /* @__PURE__ */ jsx(
-          Tooltip,
-          {
-            content: /* @__PURE__ */ jsx("ul", { children: list.slice(n).map((c) => /* @__PURE__ */ jsx("li", { children: c }, c)) }),
-            children: /* @__PURE__ */ jsx(
-              Badge,
-              {
-                rounded: rounded ? "full" : "base",
-                size: "2xsmall",
-                className: "cursor-default whitespace-nowrap",
-                children: title
-              }
-            )
-          }
-        ) })
-      ]
-    }
-  );
-};
-
-export {
-  BadgeListSummary
-};