Fix rtl for NavigationContentSearch (#1108)

paranext · Sep 3, 2024 · 0944f8d · 0944f8d
2 parents c3f115e + 7f57af5
commit 0944f8d
Show file tree

Hide file tree

Showing 7 changed files with 203 additions and 195 deletions.
diff --git a/lib/platform-bible-react/dist/index.cjs b/lib/platform-bible-react/dist/index.cjs
diff --git a/lib/platform-bible-react/dist/index.cjs.map b/lib/platform-bible-react/dist/index.cjs.map
diff --git a/lib/platform-bible-react/dist/index.d.ts b/lib/platform-bible-react/dist/index.d.ts
@@ -930,8 +930,10 @@ export type NavigationContentSearchProps = {
 	headerTitle?: string;
 	/** Optional flag to make the search bar appear full width */
 	isSearchBarFullWidth?: boolean;
+	/** Text direction ltr or rtl */
+	direction?: "ltr" | "rtl";
 };
-export function NavigationContentSearch({ tabList, onSearch, searchPlaceholder, headerTitle, isSearchBarFullWidth, }: NavigationContentSearchProps): import("react/jsx-runtime").JSX.Element;
+export function NavigationContentSearch({ tabList, onSearch, searchPlaceholder, headerTitle, isSearchBarFullWidth, direction, }: NavigationContentSearchProps): import("react/jsx-runtime").JSX.Element;
 /** Props for the SettingsList component, currently just children */
 export type SettingsListProps = React$1.PropsWithChildren;
 /**

diff --git a/lib/platform-bible-react/dist/index.js b/lib/platform-bible-react/dist/index.js
diff --git a/lib/platform-bible-react/dist/index.js.map b/lib/platform-bible-react/dist/index.js.map
diff --git a/lib/platform-bible-react/src/components/advanced/navigation-content-search.component.tsx b/lib/platform-bible-react/src/components/advanced/navigation-content-search.component.tsx
@@ -28,6 +28,9 @@ export type NavigationContentSearchProps = {
 
   /** Optional flag to make the search bar appear full width */
   isSearchBarFullWidth?: boolean;
+
+  /** Text direction ltr or rtl */
+  direction?: 'ltr' | 'rtl';
 };
 
 export default function NavigationContentSearch({
@@ -36,6 +39,7 @@ export default function NavigationContentSearch({
   searchPlaceholder,
   headerTitle,
   isSearchBarFullWidth = false,
+  direction = 'ltr',
 }: NavigationContentSearchProps) {
   return (
     <div className="pr-twp">
@@ -47,7 +51,7 @@ export default function NavigationContentSearch({
           placeholder={searchPlaceholder}
         />
       </div>
-      <VerticalTabs>
+      <VerticalTabs dir={direction}>
         <VerticalTabsList>
           {tabList.map((tab) => (
             <VerticalTabsTrigger key={tab.key} value={tab.value}>

diff --git a/lib/platform-bible-react/src/preview/pages/components/advanced.component.tsx b/lib/platform-bible-react/src/preview/pages/components/advanced.component.tsx
@@ -146,6 +146,7 @@ function Compositions({ direction }: HasDirection) {
             onSearch={handleSearchChange}
             searchPlaceholder="Search..."
             isSearchBarFullWidth
+            direction={direction}
           />
         </VerticalTabsContent>