+
{t("general.selected")}
@@ -297,13 +297,13 @@ export const CategoryCombobox = forwardRef<
onSearchValueChange(e.target.value)
}}
className={clx(
- "txt-compact-small size-full cursor-pointer appearance-none bg-transparent pr-8 outline-none",
+ "txt-compact-small size-full cursor-pointer appearance-none bg-transparent pe-8 outline-none",
"hover:bg-ui-bg-field-hover",
"focus:cursor-text",
"placeholder:text-ui-fg-muted",
{
- "pl-2": !showTag,
- "pl-[calc(var(--tag-width)+8px)]": showTag,
+ "ps-2": !showTag,
+ "ps-[calc(var(--tag-width)+8px)]": showTag,
}
)}
{...props}
@@ -311,7 +311,7 @@ export const CategoryCombobox = forwardRef<
@@ -321,11 +321,11 @@ export const CategoryCombobox = forwardRef<
sideOffset={4}
role="listbox"
className={clx(
- "shadow-elevation-flyout bg-ui-bg-base -left-2 z-50 w-[var(--radix-popper-anchor-width)] rounded-[8px]",
+ "shadow-elevation-flyout bg-ui-bg-base -start-2 z-50 w-[var(--radix-popper-anchor-width)] rounded-[8px]",
"max-h-[200px] overflow-y-auto",
"data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
"data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
- "data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2"
+ "data-[side=bottom]:slide-in-from-top-2 data-[side=start]:slide-in-from-end-2 data-[side=end]:slide-in-from-start-2 data-[side=top]:slide-in-from-bottom-2"
)}
onInteractOutside={(e) => {
e.preventDefault()
@@ -346,7 +346,7 @@ export const CategoryCombobox = forwardRef<
data-active={focusedIndex === 0}
role="button"
className={clx(
- "transition-fg grid w-full appearance-none grid-cols-[20px_1fr] items-center justify-center gap-2 rounded-md px-2 py-1.5 text-left outline-none",
+ "transition-fg grid w-full appearance-none grid-cols-[20px_1fr] items-center justify-center gap-2 rounded-md px-2 py-1.5 text-start outline-none",
"data-[active=true]:bg-ui-bg-field-hover"
)}
type="button"
@@ -386,7 +386,7 @@ export const CategoryCombobox = forwardRef<
type="button"
role="option"
className={clx(
- "grid h-full w-full appearance-none grid-cols-[20px_1fr] items-center gap-2 overflow-hidden rounded-md px-2 py-1.5 text-left outline-none",
+ "grid h-full w-full appearance-none grid-cols-[20px_1fr] items-center gap-2 overflow-hidden rounded-md px-2 py-1.5 text-start outline-none",
"data-[active=true]:bg-ui-bg-field-hover"
)}
onClick={handleSelect(option)}
@@ -418,7 +418,7 @@ export const CategoryCombobox = forwardRef<
onClick={handleLevelDown(option)}
tabIndex={-1}
>
-
+
)}
diff --git a/packages/admin/dashboard/src/routes/products/product-create-variant/components/create-product-variant-form/create-product-variant-form.tsx b/packages/admin/dashboard/src/routes/products/product-create-variant/components/create-product-variant-form/create-product-variant-form.tsx
index 011c90e538..e5aaa4049e 100644
--- a/packages/admin/dashboard/src/routes/products/product-create-variant/components/create-product-variant-form/create-product-variant-form.tsx
+++ b/packages/admin/dashboard/src/routes/products/product-create-variant/components/create-product-variant-form/create-product-variant-form.tsx
@@ -26,6 +26,7 @@ import {
import DetailsTab from "./details-tab"
import InventoryKitTab from "./inventory-kit-tab"
import PricingTab from "./pricing-tab"
+import { useDocumentDirection } from "../../../../../hooks/use-document-direction"
enum Tab {
DETAIL = "detail",
@@ -50,7 +51,7 @@ export const CreateProductVariantForm = ({
}: CreateProductVariantFormProps) => {
const { t } = useTranslation()
const { handleSuccess } = useRouteModal()
-
+ const direction = useDocumentDirection()
const [tab, setTab] = useState
(Tab.DETAIL)
const [tabState, setTabState] = useState(initialTabState)
@@ -75,10 +76,13 @@ export const CreateProductVariantForm = ({
return {}
}
- return regions.reduce((acc, reg) => {
- acc[reg.id] = reg.currency_code
- return acc
- }, {} as Record)
+ return regions.reduce(
+ (acc, reg) => {
+ acc[reg.id] = reg.currency_code
+ return acc
+ },
+ {} as Record
+ )
}, [regions])
const isManageInventoryEnabled = useWatch({
@@ -257,6 +261,7 @@ export const CreateProductVariantForm = ({
return (
handleChangeTab(tab as Tab)}
className="flex h-full flex-col overflow-hidden"
diff --git a/packages/admin/dashboard/src/routes/products/product-create-variant/components/create-product-variant-form/details-tab.tsx b/packages/admin/dashboard/src/routes/products/product-create-variant/components/create-product-variant-form/details-tab.tsx
index 6062b2008e..9914b58524 100644
--- a/packages/admin/dashboard/src/routes/products/product-create-variant/components/create-product-variant-form/details-tab.tsx
+++ b/packages/admin/dashboard/src/routes/products/product-create-variant/components/create-product-variant-form/details-tab.tsx
@@ -99,7 +99,8 @@ function DetailsTab({ form, product }: DetailsTabProps) {
onChange(!!checked)}
{...field}
@@ -130,6 +131,8 @@ function DetailsTab({ form, product }: DetailsTabProps) {
onChange(!!checked)}
{...field}
@@ -159,6 +162,8 @@ function DetailsTab({ form, product }: DetailsTabProps) {
onChange(!!checked)}
{...field}
diff --git a/packages/admin/dashboard/src/routes/products/product-create/components/product-create-form/product-create-form.tsx b/packages/admin/dashboard/src/routes/products/product-create/components/product-create-form/product-create-form.tsx
index 7ec650dffb..604978387f 100644
--- a/packages/admin/dashboard/src/routes/products/product-create/components/product-create-form/product-create-form.tsx
+++ b/packages/admin/dashboard/src/routes/products/product-create/components/product-create-form/product-create-form.tsx
@@ -21,6 +21,7 @@ import { ProductCreateDetailsForm } from "../product-create-details-form"
import { ProductCreateInventoryKitForm } from "../product-create-inventory-kit-form"
import { ProductCreateOrganizeForm } from "../product-create-organize-form"
import { ProductCreateVariantsForm } from "../product-create-variants-form"
+import { useDocumentDirection } from "../../../../../hooks/use-document-direction"
enum Tab {
DETAILS = "details",
@@ -58,7 +59,7 @@ export const ProductCreateForm = ({
const { handleSuccess } = useRouteModal()
const { getFormConfigs } = useExtension()
const configs = getFormConfigs("product", "create")
-
+ const direction = useDocumentDirection()
const form = useExtendableForm({
defaultValues: {
...PRODUCT_CREATE_FORM_DEFAULTS,
@@ -244,6 +245,7 @@ export const ProductCreateForm = ({
className="flex h-full flex-col"
>
{
const valid = await form.trigger()
diff --git a/packages/admin/dashboard/src/routes/products/product-edit/components/edit-product-form/edit-product-form.tsx b/packages/admin/dashboard/src/routes/products/product-edit/components/edit-product-form/edit-product-form.tsx
index 5020dd5c79..4d2f93b61a 100644
--- a/packages/admin/dashboard/src/routes/products/product-edit/components/edit-product-form/edit-product-form.tsx
+++ b/packages/admin/dashboard/src/routes/products/product-edit/components/edit-product-form/edit-product-form.tsx
@@ -13,6 +13,7 @@ import { transformNullableFormData } from "../../../../../lib/form-helpers"
import { KeyboundForm } from "../../../../../components/utilities/keybound-form"
import { FormExtensionZone } from "../../../../../dashboard-app"
import { useExtension } from "../../../../../providers/extension-provider"
+import { useDocumentDirection } from "../../../../../hooks/use-document-direction"
type EditProductFormProps = {
product: HttpTypes.AdminProduct
@@ -31,7 +32,7 @@ const EditProductSchema = zod.object({
export const EditProductForm = ({ product }: EditProductFormProps) => {
const { t } = useTranslation()
const { handleSuccess } = useRouteModal()
-
+ const direction = useDocumentDirection()
const { getFormFields, getFormConfigs } = useExtension()
const fields = getFormFields("product", "edit")
const configs = getFormConfigs("product", "edit")
@@ -97,7 +98,11 @@ export const EditProductForm = ({ product }: EditProductFormProps) => {
{t("fields.status")}
-