1.1.2 - ability to change enter key behaviour to move down

Author: OvidijusParsiunas

component/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "active-table",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "description": "Framework agnostic table component for editable data experience",
   "main": "./dist/activeTable.js",
   "module": "./dist/activeTable.js",

component/package.json

@@ -1,6 +1,6 @@
 {
   "name": "active-table-react",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "description": "Active Table wrapper for React",
   "main": "./dist/activeTable.js",
   "module": "./dist/activeTable.js",
@@ -33,7 +33,7 @@
   "license": "MIT",
   "dependencies": {
     "@lit-labs/react": "^1.1.1",
-    "active-table": "1.1.1"
+    "active-table": "1.1.2"
   },
   "devDependencies": {
     "@types/react": "^18.0.28",

other-packages/react/package-lock.json

@@ -19,5 +19,5 @@ npm install active-table-react
 Access the component via CDN:
 
 ```
-https://unpkg.com/active-table@1.1.1/dist/activeTable.bundle.js
+https://unpkg.com/active-table@1.1.2/dist/activeTable.bundle.js
 ```

other-packages/react/package.json

@@ -235,6 +235,67 @@ row's `backgroundColor` and text `color`.
 
 <LineBreak></LineBreak>
 
+### `enterKeyMoveDown` {#enterKeyMoveDown}
+
+- Type: `boolean`
+- Default: _false_
+
+When the user presses the ENTER key, the cursor focus is moved to the cell below.
+
+#### Example
+
+<TableContainer>
+  <ActiveTable
+    enterKeyMoveDown={true}
+    data={[
+      ['Planet', 'Diameter', 'Mass', 'Moons', 'Density'],
+      ['Earth', 12756, 5.97, 1, 5514],
+      ['Mars', 6792, 0.642, 2, 3934],
+      ['Jupiter', 142984, 1898, 79, 1326],
+      ['Saturn', 120536, 568, 82, 687],
+      ['Neptune', 49528, 102, 14, 1638],
+    ]}
+    tableStyle={{width: '100%', boxShadow: 'rgb(172 172 172 / 17%) 0px 0.5px 1px 0px', borderRadius: '2px'}}
+  ></ActiveTable>
+</TableContainer>
+
+<Tabs>
+<TabItem value="js" label="Sample code">
+
+```html
+<active-table enterKeyMoveDown="true"></active-table>
+```
+
+</TabItem>
+<TabItem value="py" label="Full code">
+
+```html
+<!-- This example is for Vanilla JS and should be tailored to your framework (see Examples) -->
+
+<active-table
+  enterKeyMoveDown="true"
+  data='[
+    ["Planet", "Diameter", "Mass", "Moons", "Density"],
+    ["Earth", 12756, 5.97, 1, 5514],
+    ["Mars", 6792, 0.642, 2, 3934],
+    ["Jupiter", 142984, 1898, 79, 1326],
+    ["Saturn", 120536, 568, 82, 687],
+    ["Neptune", 49528, 102, 14, 1638]]'
+  tableStyle='{"borderRadius":"2px"}'
+></active-table>
+```
+
+</TabItem>
+</Tabs>
+
+<LineBreak></LineBreak>
+
+:::caution
+The autofocus does not work in the Safari browser.
+:::
+
+<LineBreak></LineBreak>
+
 ### `auxiliaryStyle` {#auxiliaryStyle}
 
 - Type: `string`

website/docs/docs/installation.mdx

@@ -18,7 +18,7 @@
     "@docusaurus/preset-classic": "^2.3.0",
     "@docusaurus/theme-search-algolia": "^2.3.1",
     "@mdx-js/react": "^1.6.22",
-    "active-table-react": "^1.1.1",
+    "active-table-react": "^1.1.2",
     "clsx": "^1.2.1",
     "prism-react-renderer": "^1.3.5",
     "react": "^17.0.2",