feat: ltr renderers (#369)

Author: lukasbach

next-release-notes.md

@@ -1,3 +1,6 @@
+### Features
+- RTL mode can be used on default renderers, see [docs for details](https://rct.lukasbach.com//docs/guides/accessibility#right-to-left-mode-rtl) (#369)
+
 ### Bug Fixes and Improvements
 - Fixes an issue where not providing a submit button ref in a custom rename input renderer would prevent dismissing the input on blur (#368)
 - Fixes an issue where dropping an item on its children was possible through keyboard-based dragging (#363)

packages/core/src/renderers/createDefaultRenderers.tsx

@@ -5,7 +5,8 @@ const cx = (...classNames: Array<string | undefined | false>) =>
   classNames.filter(cn => !!cn).join(' ');
 
 export const createDefaultRenderers = (
-  renderDepthOffset: number
+  renderDepthOffset: number,
+  rtl?: boolean
 ): AllTreeRenderProps => ({
   renderItemTitle: ({ title, context, info }) => {
     if (!info.isSearching || !context.isSearchMatching) {
@@ -31,6 +32,7 @@ export const createDefaultRenderers = (
     <div
       className={cx(
         item.isFolder && 'rct-tree-item-arrow-isFolder',
+        context.isExpanded && 'rct-tree-item-arrow-expanded',
         'rct-tree-item-arrow'
       )}
       {...context.arrowProps}
@@ -102,7 +104,7 @@ export const createDefaultRenderers = (
       >
         <div
           {...(context.itemContainerWithoutChildrenProps as any)}
-          style={{ paddingLeft: `${(depth + 1) * renderDepthOffset}px` }}
+          style={{ '--depthOffset': `${(depth + 1) * renderDepthOffset}px` }}
           className={cx(
             'rct-tree-item-title-container',
             item.isFolder && 'rct-tree-item-title-container-isFolder',
@@ -164,7 +166,8 @@ export const createDefaultRenderers = (
         'rct-tree-root',
         info.isFocused && 'rct-tree-root-focus',
         info.isRenaming && 'rct-tree-root-renaming',
-        info.areItemsSelected && 'rct-tree-root-itemsselected'
+        info.areItemsSelected && 'rct-tree-root-itemsselected',
+        rtl && 'rct-rtl'
       )}
     >
       <div

packages/core/src/stories/BasicExamples.stories.tsx

@@ -8,6 +8,7 @@ import { StaticTreeDataProvider } from '../uncontrolledEnvironment/StaticTreeDat
 import { UncontrolledTreeEnvironment } from '../uncontrolledEnvironment/UncontrolledTreeEnvironment';
 import { buildTestTree } from '../../test/helpers';
 import { TreeItemIndex } from '../types';
+import { createDefaultRenderers } from '../renderers';
 
 export default {
   title: 'Core/Basic Examples',
@@ -638,3 +639,33 @@ export const AnimatedExpandingAndCollapsing = () => {
     </UncontrolledTreeEnvironment>
   );
 };
+
+export const RightToLeftRenderers = () => (
+  <UncontrolledTreeEnvironment<string>
+    canDragAndDrop
+    canDropOnFolder
+    canReorderItems
+    dataProvider={
+      new StaticTreeDataProvider(longTree.items, (item, data) => ({
+        ...item,
+        data,
+      }))
+    }
+    getItemTitle={item => item.data}
+    viewState={{
+      'tree-1': {
+        expandedItems: [
+          'Fruit',
+          'Meals',
+          'America',
+          'Europe',
+          'Asia',
+          'Desserts',
+        ],
+      },
+    }}
+    {...createDefaultRenderers(10, true)}
+  >
+    <Tree treeId="tree-1" rootItem="root" treeLabel="Tree Example" />
+  </UncontrolledTreeEnvironment>
+);

packages/core/src/style-modern.css

@@ -167,7 +167,6 @@
   outline: none;
 }
 
-
 .rct-tree-input-icon {
   content: url(data:image/svg+xml,%3Csvg%20stroke%3D%22currentColor%22%20fill%3D%22currentColor%22%20stroke-width%3D%220%22%20viewBox%3D%220%200%2016%2016%22%20height%3D%221em%22%20width%3D%221em%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M11.742%2010.344a6.5%206.5%200%201%200-1.397%201.398h-.001c.03.04.062.078.098.115l3.85%203.85a1%201%200%200%200%201.415-1.414l-3.85-3.85a1.007%201.007%200%200%200-.115-.1zM12%206.5a5.5%205.5%200%201%201-11%200%205.5%205.5%200%200%201%2011%200z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E);
   position: fixed;
@@ -178,3 +177,25 @@
 .rct-dark .rct-tree-input-icon {
   content: url(data:image/svg+xml,%3Csvg%20stroke%3D%22%23ffffff%22%20fill%3D%22%23ffffff%22%20stroke-width%3D%220%22%20viewBox%3D%220%200%2016%2016%22%20height%3D%221em%22%20width%3D%221em%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M11.742%2010.344a6.5%206.5%200%201%200-1.397%201.398h-.001c.03.04.062.078.098.115l3.85%203.85a1%201%200%200%200%201.415-1.414l-3.85-3.85a1.007%201.007%200%200%200-.115-.1zM12%206.5a5.5%205.5%200%201%201-11%200%205.5%205.5%200%200%201%2011%200z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E);
 }
+
+.rct-rtl .rct-tree-item-title-container {
+  flex-direction: row-reverse;
+}
+.rct-rtl .rct-tree-item-button {
+  text-align: right;
+  justify-content: flex-end;
+}
+.rct-rtl .rct-tree-item-title-container {
+  padding-right: var(--depthOffset, 0px);
+  padding-left: 0;
+}
+.rct-rtl .rct-tree-item-title-container-selected .rct-tree-item-button::before {
+  left: unset;
+  right: calc(-0.5 * var(--rct-bar-width));
+}
+.rct-rtl .rct-tree-item-arrow {
+  margin-left: 4px;
+}
+.rct-rtl .rct-tree-item-arrow:not(.rct-tree-item-arrow-expanded) {
+  transform: rotate(180deg);
+}

packages/core/src/style.css

@@ -49,6 +49,7 @@
   align-items: center;
   border-top: 1px solid transparent;
   border-bottom: 1px solid transparent;
+  padding-left: var(--depthOffset, 0px);
 }
 
 .rct-tree-child-list {

packages/docs/docs/faq.mdx

@@ -242,4 +242,18 @@ Reference: [#290](https://github.com/lukasbach/react-complex-tree/issues/290)
 
 </details>
 
+
+<details><summary>I want to enable RTL (right-to-left) mode for my tree</summary>
+
+  The library doesn't make any assumptions about how you render your tree, and you can fairly easily implement
+  RTL mode in custom renderers yourself. However, if you are using the built-in default renderers, you can also
+  enable RTL mode by providing the renderers with an `rtl` flag. Add `{...createDefaultRenderers(10, true)}`
+  to either the `Tree` or `TreeEnvironment` component to enable RTL mode.
+
+  See [here](/docs/guides/accessibility#right-to-left-mode-rtl) for more details.
+
+  Reference: [#369](https://github.com/lukasbach/react-complex-tree/issues/369)
+
+</details>
+
 <!-- stopped at #147, next is #140 -->

packages/docs/docs/guides/accessibility.mdx

@@ -24,6 +24,25 @@ All features can be accessed via keybindings, including
 [drag and drop](/docs/guides/keyboard#keyboard-bound-drag-and-drop-sequences), searching and renaming.
 [Find out more in the documentation on keyboard bindings.](/docs/guides/keyboard)
 
+## Right-To-Left Mode (RTL)
+
+The library doesn't make any assumptions about how you render your tree, and you can fairly easily implement
+RTL mode in custom renderers yourself. However, if you are using the built-in default renderers, you can also
+enable RTL mode by providing the renderers with an `rtl` flag. Add `{...createDefaultRenderers(10, true)}`
+to either the `Tree` or `TreeEnvironment` component to enable RTL mode.
+
+```typescript jsx
+import { createDefaultRenderers } from 'react-complex-tree';
+
+<UncontrolledTreeEnvironment<string>
+  {...createDefaultRenderers(10, true)}
+>
+  <Tree treeId="tree-1" rootItem="root" treeLabel="Tree Example" />
+</UncontrolledTreeEnvironment>
+```
+
+<StoryEmbed storyName="core-basic-examples--right-to-left-renderers" iframeProps={{ width: 600 }} />
+
 ## Live descriptors
 
 A visually hidden live section is rendered at the top of the tree that explains the state of the tree