feat(DateField): support rtl (#28)

Author: ValeraS

.storybook/preview.tsx

@@ -18,6 +18,14 @@ configure({
 });
 
 const WithContextProvider: Decorator = (Story, context) => {
+    const direction = context.globals.direction;
+    React.useEffect(() => {
+        if (direction === 'ltr') {
+            document.body.removeAttribute('dir');
+        } else {
+            document.body.setAttribute('dir', direction);
+        }
+    }, [direction]);
     return (
         <React.StrictMode>
             <ThemeProvider theme={context.globals.theme}>
@@ -61,6 +69,7 @@ const preview: Preview = {
                     {value: 'light-hc', right: '☼', title: 'High Contrast Light (beta)'},
                     {value: 'dark-hc', right: '☾', title: 'High Contrast Dark (beta)'},
                 ],
+                dynamicTitle: true,
             },
         },
         lang: {
@@ -72,6 +81,19 @@ const preview: Preview = {
                     {value: 'en', right: '🇬🇧', title: 'En'},
                     {value: 'ru', right: '🇷🇺', title: 'Ru'},
                 ],
+                dynamicTitle: true,
+            },
+        },
+        direction: {
+            defaultValue: 'ltr',
+            toolbar: {
+                title: 'Direction',
+                icon: 'menu',
+                items: [
+                    {value: 'ltr', title: 'Left to Right', icon: 'arrowrightalt'},
+                    {value: 'rtl', title: 'Right to Left', icon: 'arrowleftalt'},
+                ],
+                dynamicTitle: true,
             },
         },
         platform: {
@@ -82,6 +104,7 @@ const preview: Preview = {
                     {value: 'desktop', title: 'Desktop', icon: 'browser'},
                     {value: 'mobile', title: 'Mobile', icon: 'mobile'},
                 ],
+                dynamicTitle: true,
             },
         },
     },

src/components/DateField/hooks/useDateFieldProps.ts

@@ -3,7 +3,7 @@ import React from 'react';
 import type {TextInputProps} from '@gravity-ui/uikit';
 
 import type {DateFieldProps} from '../DateField';
-import {CtrlCmd} from '../utils';
+import {CtrlCmd, cleanString} from '../utils';
 
 import type {DateFieldState} from './useDateFieldState';
 
@@ -190,7 +190,7 @@ export function useDateFieldProps(
                         return;
                     }
 
-                    const pastedValue = e.clipboardData.getData('text');
+                    const pastedValue = cleanString(e.clipboardData.getData('text'));
                     if (
                         state.selectedSectionIndexes &&
                         state.selectedSectionIndexes.startIndex ===

src/components/DateField/hooks/useDateFieldState.ts

@@ -246,7 +246,8 @@ export function useDateFieldState(props: DateFieldStateOptions): DateFieldState
         isEmpty: Object.keys(validSegments).length === 0,
         displayValue,
         setValue,
-        text: sectionsState.editableSections.map((s) => s.textValue).join(''),
+        // use ltr direction context to get predictable navigation inside input
+        text: '\u2066' + sectionsState.editableSections.map((s) => s.textValue).join('') + '\u2069',
         readOnly: props.readOnly,
         disabled: props.disabled,
         sections: sectionsState.editableSections,
@@ -625,7 +626,7 @@ function getEditableSections(
     value: DateTime,
     validSegments: typeof EDITABLE_SEGMENTS,
 ) {
-    let position = 0;
+    let position = 1;
     const newSections: DateFieldSection[] = [];
     let previousEditableSection = -1;
     for (let i = 0; i < sections.length; i++) {
@@ -643,6 +644,9 @@ function getEditableSections(
             }
         }
 
+        // use bidirectional context to allow the browser autodetect text direction
+        renderedValue = '\u2068' + renderedValue + '\u2069';
+
         const sectionLength = renderedValue.length;
 
         const newSection = {

src/components/DateField/utils.ts

@@ -516,3 +516,7 @@ function getSectionOptions(
 
     return undefined;
 }
+
+export function cleanString(dirtyString: string) {
+    return dirtyString.replace(/[\u2066\u2067\u2068\u2069]/g, '');
+}