@astryxdesign/lab 0.7.6-canary.e736b92 → 0.7.6-canary.e7530db

package/dist/CodeEditor/CodeEditor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CodeEditor.d.ts","sourceRoot":"","sources":["../../src/CodeEditor/CodeEditor.tsx"],"names":[],"mappings":"AAyBA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,oBAAoB,CAAC;AAkBlD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,8BAA8B,CAAC;AAuF5D,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAC3C,SAAS,CAAC,cAAc,CAAC,EACzB,UAAU,CACX;IACC,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC,uBAAuB;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,qBAAqB;IACrB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,sDAAsD;IACtD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,sFAAsF;IACtF,KAAK,EAAE,MAAM,CAAC;IACd,wCAAwC;IACxC,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,qCAAqC;IACrC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,6BAA6B;IAC7B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,kCAAkC;IAClC,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,+BAA+B;IAC/B,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,uBAAuB;IACvB,SAAS,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,KAAK,SAAS,EAAE,CAAC;IAC5D;;;;;OAKG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAsED;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,QAAQ,EACR,QAAsB,EACtB,cAAsB,EACtB,UAAkB,EAClB,WAAW,EACX,SAAS,EACT,IAAW,EACX,SAAS,EAAE,eAAe,EAC1B,KAAK,EACL,UAAqE,EACrE,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,eAAe,+BA8UjB;yBA/Ve,UAAU"}
+{"version":3,"file":"CodeEditor.d.ts","sourceRoot":"","sources":["../../src/CodeEditor/CodeEditor.tsx"],"names":[],"mappings":"AAyBA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,oBAAoB,CAAC;AAkBlD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,8BAA8B,CAAC;AAuF5D,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAC3C,SAAS,CAAC,cAAc,CAAC,EACzB,UAAU,CACX;IACC,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC,uBAAuB;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,qBAAqB;IACrB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,sDAAsD;IACtD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,sFAAsF;IACtF,KAAK,EAAE,MAAM,CAAC;IACd,wCAAwC;IACxC,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,qCAAqC;IACrC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,6BAA6B;IAC7B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,kCAAkC;IAClC,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,+BAA+B;IAC/B,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,uBAAuB;IACvB,SAAS,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,KAAK,SAAS,EAAE,CAAC;IAC5D;;;;;OAKG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAsED;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,QAAQ,EACR,QAAsB,EACtB,cAAsB,EACtB,UAAkB,EAClB,WAAW,EACX,SAAS,EACT,IAAW,EACX,SAAS,EAAE,eAAe,EAC1B,KAAK,EACL,UAAqE,EACrE,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,eAAe,+BAsVjB;yBAvWe,UAAU"}

package/dist/CodeEditor/CodeEditor.js

@@ -450,6 +450,7 @@ export function CodeEditor({
     }), stylex.props(styles.root, focused && styles.rootFocused, xstyle), className, style),
     ...props,
     children: /*#__PURE__*/_jsxs("div", {
+      dir: "ltr",
       ...{
         className: "x78zum5 x98rzlu xysyzu8"
       },
@@ -468,7 +469,12 @@ export function CodeEditor({
           position: 'relative',
           flex: 1
         },
-        children: [showPlaceholder && /*#__PURE__*/_jsx("div", {
+        children: [showPlaceholder &&
+        /*#__PURE__*/
+        // The placeholder is prose, not code: it takes its own text's
+        // direction, so an Arabic or Hebrew hint still reads correctly.
+        _jsx("div", {
+          dir: "auto",
           ...stylex.props(styles.placeholder, sizeStyle),
           children: placeholder
         }), /*#__PURE__*/_jsx("code", {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astryxdesign/lab",
-  "version": "0.7.6-canary.e736b92",
+  "version": "0.7.6-canary.e7530db",
   "description": "Experimental Astryx components — published to npm only under the @canary dist-tag for early testing; never released as a stable (latest) version.",
   "author": "Meta Open Source",
   "license": "MIT",
@@ -49,7 +49,7 @@
   },
   "peerDependencies": {
     "@stylexjs/stylex": ">=0.10.0",
-    "@astryxdesign/core": "0.7.6-canary.e736b92",
+    "@astryxdesign/core": "0.7.6-canary.e7530db",
     "react": ">=19.0.0",
     "react-dom": ">=19.0.0"
   },
@@ -59,8 +59,8 @@
     "d3-shape": "^3.2.0"
   },
   "devDependencies": {
-    "@astryxdesign/a11y-spec": "0.7.6-canary.e736b92",
-    "@astryxdesign/cli": "0.7.6-canary.e736b92",
+    "@astryxdesign/a11y-spec": "0.7.6-canary.e7530db",
+    "@astryxdesign/cli": "0.7.6-canary.e7530db",
     "@babel/cli": "^7.29.7",
     "@babel/core": "^7.29.7",
     "@babel/preset-react": "^7.29.7",

package/src/CodeEditor/CodeEditor.test.tsx

@@ -51,6 +51,33 @@ function renderEditor(value = '', props: {escapeHint?: string} = {}) {
 }
 
 describe('CodeEditor', () => {
+  it('keeps the code left-to-right inside a right-to-left page', () => {
+    render(
+      <div dir="rtl">
+        <CodeEditor label="Code" value="const a = 1;" onChange={() => {}} />
+      </div>,
+    );
+    const editor = screen.getByRole('textbox', {name: 'Code'});
+    expect(editor.closest('[dir]')).toHaveAttribute('dir', 'ltr');
+  });
+
+  it('lets the placeholder take its own text direction', () => {
+    render(
+      <div dir="rtl">
+        <CodeEditor
+          label="Code"
+          value=""
+          onChange={() => {}}
+          placeholder="اكتب الكود هنا..."
+        />
+      </div>,
+    );
+    expect(screen.getByText('اكتب الكود هنا...')).toHaveAttribute(
+      'dir',
+      'auto',
+    );
+  });
+
   it('uses the label prop as the accessible name', () => {
     render(
       <CodeEditor

package/src/CodeEditor/CodeEditor.tsx

@@ -556,7 +556,13 @@ export function CodeEditor({
         style,
       )}
       {...props}>
-      <div {...stylex.props(styles.editorContainer)} style={containerStyle}>
+      {/* Code, with its line numbers, keeps its own left-to-right direction
+          inside a right-to-left page (design:bidirectionality DR2): lines read
+          and indent correctly, and a long line scrolls from its start. */}
+      <div
+        dir="ltr"
+        {...stylex.props(styles.editorContainer)}
+        style={containerStyle}>
         {hasLineNumbers && (
           <div
             {...stylex.props(styles.gutter, gutterSizeStyle)}
@@ -570,7 +576,9 @@ export function CodeEditor({
         )}
         <div style={{position: 'relative', flex: 1}}>
           {showPlaceholder && (
-            <div {...stylex.props(styles.placeholder, sizeStyle)}>
+            // The placeholder is prose, not code: it takes its own text's
+            // direction, so an Arabic or Hebrew hint still reads correctly.
+            <div dir="auto" {...stylex.props(styles.placeholder, sizeStyle)}>
               {placeholder}
             </div>
           )}