feat UGN-362 - adds RTL support

Author: JulitorK

package.json

@@ -16,12 +16,12 @@
     "ts": "tsc",
     "lint": "eslint \"src/**/*.{ts,tsx}\"",
     "lint:fix": "eslint \"src/**/*.{ts,tsx}\" --fix",
-    "prebuild": "rimraf dist && rimraf dist-commonjs && rimraf types",
+    "prebuild": "npm run clean",
     "build": "rollup -c rollup.config.ts",
     "build-storybook": "build-storybook -o docs-build",
     "release:minor": "git checkout master && git pull && npm run test && npm run ts && npm run build && npm version patch && git add -A && git push && git push --tags && npm publish",
     "release:major": "git checkout master && git pull && npm run test && npm run ts && npm run build && npm version major && git add -A && git push && git push --tags && npm publish",
-    "clean": "rimraf dist"
+    "clean": "rimraf dist dist-commonjs types"
   },
   "repository": {
     "type": "git",

src/ReactSpreadsheetImport.tsx

@@ -1,7 +1,7 @@
 import merge from "lodash/merge"
 
 import { Steps } from "./steps/Steps"
-import { themeOverrides } from "./theme"
+import { rtlThemeSupport, themeOverrides } from "./theme"
 import { Providers } from "./components/Providers"
 import type { RsiProps } from "./types"
 import { ModalWrapper } from "./components/ModalWrapper"
@@ -24,7 +24,9 @@ export const defaultRSIProps: Partial<RsiProps<any>> = {
 export const ReactSpreadsheetImport = <T extends string>(props: RsiProps<T>) => {
   const mergedTranslations =
     props.translations !== translations ? merge(translations, props.translations) : translations
-  const mergedThemes = merge(defaultTheme, props.customTheme)
+  const mergedThemes = props.rtl
+    ? merge(defaultTheme, rtlThemeSupport, props.customTheme)
+    : merge(defaultTheme, props.customTheme)
 
   return (
     <Providers theme={mergedThemes} rsiValues={{ ...props, translations: mergedTranslations }}>

src/components/ModalCloseButton.tsx

@@ -30,6 +30,7 @@ export const ModalCloseButton = ({ onClose }: ModalCloseButtonProps) => {
         top="20px"
         onClick={() => setShowModal(true)}
         zIndex="toast"
+        dir="ltr"
       />
     </>
   )

src/components/ModalWrapper.tsx

@@ -1,6 +1,7 @@
 import type React from "react"
 import { Modal, ModalContent, ModalOverlay } from "@chakra-ui/react"
 import { ModalCloseButton } from "./ModalCloseButton"
+import { useRsi } from "../hooks/useRsi"
 
 type Props = {
   children: React.ReactNode
@@ -9,6 +10,7 @@ type Props = {
 }
 
 export const ModalWrapper = ({ children, isOpen, onClose }: Props) => {
+  const { rtl } = useRsi()
   return (
     <Modal
       isOpen={isOpen}
@@ -19,9 +21,11 @@ export const ModalWrapper = ({ children, isOpen, onClose }: Props) => {
       closeOnOverlayClick={false}
       scrollBehavior="inside"
     >
-      <ModalOverlay />
-      <ModalCloseButton onClose={onClose} />
-      <ModalContent>{children}</ModalContent>
+      <div dir={rtl ? "rtl" : "ltr"}>
+        <ModalOverlay />
+        <ModalCloseButton onClose={onClose} />
+        <ModalContent>{children}</ModalContent>
+      </div>
     </Modal>
   )
 }

src/components/Selects/MenuPortal.tsx

@@ -3,6 +3,7 @@ import ReactDOM from "react-dom"
 import { Box, useTheme } from "@chakra-ui/react"
 import { usePopper } from "@chakra-ui/popper"
 import { rootId } from "../Providers"
+import { useRsi } from "../../hooks/useRsi"
 
 function createWrapperAndAppendToBody(wrapperId: string) {
   const wrapperElement = document.createElement("div")
@@ -20,6 +21,7 @@ interface PortalProps {
 
 const MenuPortal = (props: PortalProps) => {
   const theme = useTheme()
+  const { rtl } = useRsi()
   const { popperRef, referenceRef } = usePopper({
     strategy: "fixed",
     matchWidth: true,
@@ -51,6 +53,7 @@ const MenuPortal = (props: PortalProps) => {
 
   return ReactDOM.createPortal(
     <Box
+      dir={rtl ? "rtl" : "ltr"}
       ref={popperRef}
       zIndex={theme.zIndices.tooltip}
       sx={{

src/components/Table.tsx

@@ -1,10 +1,12 @@
 import DataGrid, { DataGridProps } from "react-data-grid"
+import { useRsi } from "../hooks/useRsi"
 
 interface Props<Data> extends DataGridProps<Data> {
   rowHeight?: number
   hiddenHeader?: boolean
 }
 
 export const Table = <Data,>({ className, ...props }: Props<Data>) => {
-  return <DataGrid className={"rdg-light " + className || ""} {...props} />
+  const { rtl } = useRsi()
+  return <DataGrid className={"rdg-light " + className || ""} direction={rtl ? "rtl" : "ltr"} {...props} />
 }

src/steps/ValidationStep/components/columns.tsx

@@ -80,7 +80,7 @@ export const generateColumns = <T extends string>(fields: Fields<T>): Column<Dat
             break
           default:
             component = (
-              <Box pl="0.5rem">
+              <Box paddingInlineStart="0.5rem">
                 <Input
                   ref={autoFocusAndSelect}
                   variant="unstyled"

src/theme.ts

@@ -309,7 +309,7 @@ export const themeOverrides = {
           valueContainer: (provided) => ({
             ...provided,
             p: 0,
-            pl: 2,
+            paddingInlineStart: 2,
             color: "gray.400",
           }),
           menu: (provided) => ({
@@ -428,9 +428,20 @@ export const themeOverrides = {
       ".rdg-row:last-child .rdg-cell:last-child": {
         borderBottomRightRadius: "lg",
       },
+      ".rdg[dir='rtl']": {
+        ".rdg-row:last-child .rdg-cell:first-of-type": {
+          borderBottomRightRadius: "lg",
+          borderBottomLeftRadius: "none",
+        },
+        ".rdg-row:last-child .rdg-cell:last-child": {
+          borderBottomLeftRadius: "lg",
+          borderBottomRightRadius: "none",
+        },
+      },
       ".rdg-cell": {
         contain: "size layout style paint",
         borderRight: "none",
+        borderInlineEnd: "none",
         borderBottom: "1px solid var(--rdg-border-color)",
         whiteSpace: "nowrap",
         overflow: "hidden",
@@ -439,10 +450,10 @@ export const themeOverrides = {
           boxShadow: "inset 0 0 0 1px var(--rdg-selection-color)",
         },
         "&:first-of-type": {
-          borderLeft: "1px solid var(--rdg-border-color)",
+          borderInlineStart: "1px solid var(--rdg-border-color)",
         },
         "&:last-child": {
-          borderRight: "1px solid var(--rdg-border-color)",
+          borderInlineEnd: "1px solid var(--rdg-border-color)",
         },
       },
       ".rdg-cell-error": {
@@ -481,4 +492,16 @@ export const themeOverrides = {
   },
 } as const
 
+export const rtlThemeSupport = {
+  components: {
+    Modal: {
+      baseStyle: {
+        dialog: {
+          direction: "rtl",
+        },
+      },
+    },
+  },
+} as const
+
 export type CustomTheme = DeepPartial<typeof themeOverrides>

src/types.ts

@@ -43,6 +43,8 @@ export type RsiProps<T extends string> = {
   dateFormat?: string
   // Sets SheetJS "raw" option. If true, parsing will only be applied to xlsx date fields.
   parseRaw?: boolean
+  // Use for right-to-left (RTL) support
+  rtl?: boolean
 }
 
 export type RawData = Array<string | undefined>