@strapi/design-system 1.2.7 → 1.3.0-beta.1

package/src/RawTable/RawTable.stories.mdx

@@ -0,0 +1,258 @@
+<!--- RawTable.stories.mdx --->
+
+import { Meta, Story, Canvas } from '@storybook/addon-docs';
+import { ArgsTable } from '@storybook/addon-docs';
+import Pencil from '@strapi/icons/Pencil';
+import Trash from '@strapi/icons/Trash';
+
+import { TextInput } from '../TextInput';
+import { Box } from '../Box';
+import { Flex } from '../Flex';
+import { IconButton } from '../IconButton';
+import { Link } from '../Link';
+
+import { RawTable } from './RawTable';
+import { RawTh, RawTd } from './RawCell';
+import { RawTr } from './RawTr';
+import { RawThead } from './RawThead';
+import { RawTbody } from './RawTbody';
+
+<Meta title="Design System/Technical Components/RawTable" component={RawTable} />
+
+# RawTable
+
+This is the doc of the `RawTable` component
+
+[View source](https://github.com/strapi/design-system/tree/main/packages/strapi-design-system/src/RawTable)
+
+## Imports
+
+```js
+import { RawTable, RawTh, RawTd, RawTr, RawThead, RawTbody } from '@strapi/design-system/RawTable';
+```
+
+## Usage
+
+<Canvas>
+  <Story name="base">
+    {() => {
+      const ROW_COUNT = 30;
+      const COL_COUNT = 5;
+      const rows = Array(ROW_COUNT - 1)
+        .fill(null)
+        .map(() =>
+          Array(COL_COUNT)
+            .fill(null)
+            .map((e, x) => x),
+        );
+      return (
+        <Box shadow="filterShadow" padding={3} hasRadius>
+          <RawTable colCount={COL_COUNT} rowCount={ROW_COUNT}>
+            <RawThead>
+              <RawTr>
+                <RawTh>
+                  <Box color="neutral800" padding={2} background="neutral200">
+                    One
+                  </Box>
+                </RawTh>
+                <RawTh>
+                  <Box color="neutral800" padding={2} background="neutral200">
+                    Two
+                  </Box>
+                </RawTh>
+                <RawTh>
+                  <Box color="neutral800" padding={2} background="neutral200">
+                    Three
+                  </Box>
+                </RawTh>
+                <RawTh>
+                  <Box color="neutral800" padding={2} background="neutral200">
+                    Four
+                  </Box>
+                </RawTh>
+                <RawTh>
+                  <Box color="neutral800" padding={2} background="neutral200">
+                    Five
+                  </Box>
+                </RawTh>
+              </RawTr>
+            </RawThead>
+            <RawTbody>
+              {rows.map((row, rowIndex) => (
+                <RawTr key={`row-${rowIndex}`}>
+                  {row.map((cell) => (
+                    <RawTd key={`cell-${rowIndex}-${cell}`}>
+                      <Box color="neutral800" padding={2}>
+                        {rowIndex}/{cell}
+                      </Box>
+                    </RawTd>
+                  ))}
+                </RawTr>
+              ))}
+            </RawTbody>
+          </RawTable>
+        </Box>
+      );
+    }}
+  </Story>
+  <Story name="simple">
+    {() => {
+      const ROW_COUNT = 30;
+      const COL_COUNT = 5;
+      return (
+        <Box shadow="filterShadow" padding={3} hasRadius>
+          <RawTable colCount={COL_COUNT} rowCount={ROW_COUNT}>
+            <RawThead>
+              <RawTr>
+                <RawTh>
+                  <Box color="neutral800" padding={2} background="neutral200">
+                    One
+                  </Box>
+                </RawTh>
+                <RawTh>
+                  <Box color="neutral800" padding={2} background="neutral200">
+                    Two
+                  </Box>
+                </RawTh>
+                <RawTh>
+                  <Box color="neutral800" padding={2} background="neutral200">
+                    Three
+                  </Box>
+                </RawTh>
+                <RawTh>
+                  <Box color="neutral800" padding={2} background="neutral200">
+                    Four
+                  </Box>
+                </RawTh>
+                <RawTh>
+                  <Box color="neutral800" padding={2} background="neutral200">
+                    Five
+                  </Box>
+                </RawTh>
+              </RawTr>
+            </RawThead>
+            <RawTbody>
+              <RawTr>
+                <RawTd color="neutral800">2/1</RawTd>
+                <RawTd color="neutral800">2/2</RawTd>
+                <RawTd color="neutral800">2/3</RawTd>
+                <RawTd color="neutral800">2/4</RawTd>
+                <RawTd color="neutral800">2/5</RawTd>
+              </RawTr>
+              <RawTr>
+                <RawTd color="neutral800">3/1</RawTd>
+                <RawTd>
+                  <Link href="#">Link to somewhere</Link>
+                </RawTd>
+                <RawTd color="neutral800">3/3</RawTd>
+                <RawTd color="neutral800">3/4</RawTd>
+                <RawTd color="neutral800">3/5</RawTd>
+              </RawTr>
+            </RawTbody>
+          </RawTable>
+        </Box>
+      );
+    }}
+  </Story>
+  <Story name="aria">
+    {() => {
+      const ROW_COUNT = 30;
+      const COL_COUNT = 5;
+      const rows = Array(ROW_COUNT - 1)
+        .fill(null)
+        .map(() =>
+          Array(COL_COUNT)
+            .fill(null)
+            .map((e, x) => x),
+        );
+      return (
+        <Box shadow="filterShadow" padding={3} hasRadius>
+          <RawTable colCount={COL_COUNT} rowCount={ROW_COUNT}>
+            <RawThead>
+              <RawTr>
+                <RawTh>
+                  <Box color="neutral800" padding={2} background="neutral200">
+                    One
+                  </Box>
+                </RawTh>
+                <RawTh>
+                  <Box color="neutral800" padding={2} background="neutral200">
+                    Two
+                  </Box>
+                </RawTh>
+                <RawTh>
+                  <Box color="neutral800" padding={2} background="neutral200">
+                    Three
+                  </Box>
+                </RawTh>
+                <RawTh>
+                  <Box color="neutral800" padding={2} background="neutral200">
+                    Four
+                  </Box>
+                </RawTh>
+                <RawTh>
+                  <Box color="neutral800" padding={2} background="neutral200">
+                    Five
+                  </Box>
+                </RawTh>
+              </RawTr>
+            </RawThead>
+            <RawTbody>
+              {rows.map((row, rowIndex) => (
+                <RawTr key={`row-${rowIndex}`}>
+                  {row.map((cell, cellIndex) =>
+                    cellIndex === 3 ? (
+                      <RawTd>
+                        <TextInput label="name" />
+                      </RawTd>
+                    ) : cellIndex === row.length - 1 ? (
+                      <RawTd>
+                        <Flex>
+                          <IconButton onClick={() => console.log('edit')} label="Edit" noBorder icon={<Pencil />} />
+                          <Box paddingLeft={1}>
+                            <IconButton
+                              onClick={() => console.log('delete')}
+                              label="Delete"
+                              noBorder
+                              icon={<Trash />}
+                            />
+                          </Box>
+                        </Flex>
+                      </RawTd>
+                    ) : (
+                      <RawTd key={`cell-${rowIndex}-${cell}`}>
+                        <Box color="neutral800" padding={2}>
+                          {rowIndex}/{cell}
+                        </Box>
+                      </RawTd>
+                    ),
+                  )}
+                </RawTr>
+              ))}
+            </RawTbody>
+          </RawTable>
+        </Box>
+      );
+    }}
+  </Story>
+</Canvas>
+
+## RawTable Props
+
+<ArgsTable of={RawTable} />
+
+## RawThead Props
+
+<ArgsTable of={RawThead} />
+
+## RawTr Props
+
+<ArgsTable of={RawTr} />
+
+## RawTh Props
+
+<ArgsTable of={RawTh} />
+
+## RawTd Props
+
+<ArgsTable of={RawTd} />

package/src/RawTable/RawTableContext.js

@@ -0,0 +1,10 @@
+import { createContext, useContext } from 'react';
+
+export const RawTableContext = createContext({
+  rowIndex: 0,
+  colIndex: 0,
+  setTableValues: () => {
+    throw new Error('setTableValues must be initialized via the RawTableContext.Provider');
+  },
+});
+export const useTable = () => useContext(RawTableContext);

package/src/RawTable/RawTbody.js

@@ -0,0 +1,18 @@
+import React, { cloneElement, Children } from 'react';
+import PropTypes from 'prop-types';
+
+export const RawTbody = ({ children, ...props }) => {
+  /**
+   * aria-rowindex is 1-based: we have to start from 1
+   * since the <tr><th></th></tr> elements count as 1 row, we have to increment the index by 2 (because of the base 1 AND the th)
+   */
+  const childrenClone = Children.toArray(children).map((child, index) =>
+    cloneElement(child, { 'aria-rowindex': index + 2 }),
+  );
+
+  return <tbody {...props}>{childrenClone}</tbody>;
+};
+
+RawTbody.propTypes = {
+  children: PropTypes.node.isRequired,
+};

package/src/RawTable/RawThead.js

@@ -0,0 +1,15 @@
+import React, { cloneElement, Children } from 'react';
+import PropTypes from 'prop-types';
+
+export const RawThead = ({ children, ...props }) => {
+  /**
+   * aria-rowindex is 1-based: we have to start from 1
+   */
+  const childrenClone = Children.toArray(children).map((child) => cloneElement(child, { 'aria-rowindex': 1 }));
+
+  return <thead {...props}>{childrenClone}</thead>;
+};
+
+RawThead.propTypes = {
+  children: PropTypes.node.isRequired,
+};

package/src/RawTable/RawTr.js

@@ -0,0 +1,20 @@
+import React, { cloneElement, Children } from 'react';
+import PropTypes from 'prop-types';
+import { Box } from '../Box';
+
+export const RawTr = ({ children, ...props }) => {
+  const childrenClone = Children.toArray(children).map((child, index) =>
+    cloneElement(child, { 'aria-colindex': index + 1, coords: { col: index + 1, row: props['aria-rowindex'] } }),
+  );
+
+  return (
+    <Box as="tr" {...props}>
+      {childrenClone}
+    </Box>
+  );
+};
+
+RawTr.propTypes = {
+  ['aria-rowindex']: PropTypes.number.isRequired,
+  children: PropTypes.node.isRequired,
+};

package/src/RawTable/__tests__/RawTable.e2e.js

@@ -0,0 +1,344 @@
+import { injectAxe, checkA11y } from 'axe-playwright';
+
+import { test, expect } from '@playwright/test';
+
+test.describe.parallel('RawTable', () => {
+  test.describe('light mode', () => {
+    test.describe('Default story', () => {
+      test.beforeEach(async ({ page }) => {
+        // This is the URL of the Storybook Iframe
+        await page.goto('/iframe.html?id=design-system-technical-components-rawtable--base&viewMode=story');
+        await injectAxe(page);
+      });
+
+      test('triggers axe on the document', async ({ page }) => {
+        await checkA11y(page);
+      });
+
+      test.describe('Keyboard interactions', () => {
+        test.beforeEach(async ({ page }) => {
+          await page.keyboard.press('Tab');
+          await expect(page.locator('[aria-rowindex="1"] > [aria-colindex="1"]')).toBeFocused();
+        });
+
+        test('focus the next element in the row when pressing ArrowDown', async ({ page }) => {
+          await page.keyboard.press('ArrowDown');
+          await page.keyboard.press('ArrowDown');
+          await page.keyboard.press('ArrowDown');
+
+          await expect(page.locator('[aria-rowindex="4"] > [aria-colindex="1"]')).toBeFocused();
+        });
+
+        test('focus the previous element in the row when pressing ArrowUp', async ({ page }) => {
+          await page.keyboard.press('ArrowDown');
+          await page.keyboard.press('ArrowDown');
+          await page.keyboard.press('ArrowDown');
+          await page.keyboard.press('ArrowUp');
+          await page.keyboard.press('ArrowUp');
+
+          await expect(page.locator('[aria-rowindex="2"] > [aria-colindex="1"]')).toBeFocused();
+        });
+
+        test('focus the next element in the col when pressing ArrowRight', async ({ page }) => {
+          await page.keyboard.press('ArrowRight');
+          await page.keyboard.press('ArrowRight');
+          await page.keyboard.press('ArrowRight');
+
+          await expect(page.locator('[aria-rowindex="1"] > [aria-colindex="4"]')).toBeFocused();
+        });
+
+        test('focus the previous element in the col when pressing ArrowLeft', async ({ page }) => {
+          await page.keyboard.press('ArrowRight');
+          await page.keyboard.press('ArrowRight');
+          await page.keyboard.press('ArrowLeft');
+
+          await expect(page.locator('[aria-rowindex="1"] > [aria-colindex="2"]')).toBeFocused();
+        });
+
+        test('focus the last element on the row when pressing End', async ({ page }) => {
+          await page.keyboard.press('End');
+
+          await expect(page.locator('[aria-rowindex="1"] > [aria-colindex="5"]')).toBeFocused();
+        });
+
+        test('focus the last element on the last row when pressing End AND ctrl', async ({ page }) => {
+          await page.keyboard.press('Control+End');
+
+          await expect(page.locator('[aria-rowindex="30"] > [aria-colindex="5"]')).toBeFocused();
+        });
+
+        test('focus the first element on the row when pressing Home', async ({ page }) => {
+          await page.keyboard.press('End');
+          await page.keyboard.press('Home');
+
+          await expect(page.locator('[aria-rowindex="1"] > [aria-colindex="1"]')).toBeFocused();
+        });
+
+        test('focus the first element on the first row when pressing Home AND ctrl', async ({ page }) => {
+          await page.keyboard.press('Control+End');
+          await page.keyboard.press('Control+Home');
+
+          await expect(page.locator('[aria-rowindex="1"] > [aria-colindex="1"]')).toBeFocused();
+        });
+
+        test('focus the first element on the first row when pressing Page', async ({ page }) => {
+          await page.keyboard.press('End');
+          await page.keyboard.press('Home');
+
+          await expect(page.locator('[aria-rowindex="1"] > [aria-colindex="1"]')).toBeFocused();
+        });
+
+        test('keeps focusing the most left positioned cell when pressing ArrowLeft on it', async ({ page }) => {
+          await page.keyboard.press('ArrowLeft');
+
+          await expect(page.locator('[aria-rowindex="1"] > [aria-colindex="1"]')).toBeFocused();
+        });
+
+        test('keeps focusing the most top positioned cell when pressing ArrowTop on it', async ({ page }) => {
+          await page.keyboard.press('ArrowUp');
+
+          await expect(page.locator('[aria-rowindex="1"] > [aria-colindex="1"]')).toBeFocused();
+        });
+
+        test('keeps focusing the most right positioned cell when pressing ArrowRight on it', async ({ page }) => {
+          await page.keyboard.press('End');
+          await page.keyboard.press('ArrowRight');
+
+          await expect(page.locator('[aria-rowindex="1"] > [aria-colindex="5"]')).toBeFocused();
+        });
+
+        test('keeps focusing the most bottom positioned cell when pressing ArrowDown on it', async ({ page }) => {
+          await page.keyboard.press('Control+End');
+          await page.keyboard.press('ArrowDown');
+
+          await expect(page.locator('[aria-rowindex="30"] > [aria-colindex="5"]')).toBeFocused();
+        });
+
+        test('focus the cell 3 rows below when pressing PageDown', async ({ page }) => {
+          await page.keyboard.press('PageDown');
+
+          await expect(page.locator('[aria-rowindex="4"] > [aria-colindex="1"]')).toBeFocused();
+        });
+
+        test('focus the cell 2 rows below when pressing PageDown and that there s only space for jumping 2 rows', async ({
+          page,
+        }) => {
+          await page.keyboard.press('Control+End');
+          await page.keyboard.press('ArrowUp');
+          await page.keyboard.press('PageDown');
+
+          await expect(page.locator('[aria-rowindex="30"] > [aria-colindex="5"]')).toBeFocused();
+        });
+
+        test('focus the cell 3 rows above when pressing PageUp', async ({ page }) => {
+          await page.keyboard.press('Control+End');
+          await page.keyboard.press('PageUp');
+
+          await expect(page.locator('[aria-rowindex="27"] > [aria-colindex="5"]')).toBeFocused();
+        });
+
+        test('focus the cell 2 rows above when pressing PageUp and that there s only space for jumping 2 rows', async ({
+          page,
+        }) => {
+          await page.keyboard.press('ArrowUp');
+          await page.keyboard.press('ArrowUp');
+          await page.keyboard.press('PageUp');
+
+          await expect(page.locator('[aria-rowindex="1"] > [aria-colindex="1"]')).toBeFocused();
+        });
+      });
+    });
+
+    test.describe('Simple story', () => {
+      test.beforeEach(async ({ page }) => {
+        // This is the URL of the Storybook Iframe
+        await page.goto('/iframe.html?id=design-system-technical-components-rawtable--simple&viewMode=story');
+        await injectAxe(page);
+      });
+
+      test('triggers axe on the document', async ({ page }) => {
+        await checkA11y(page);
+      });
+
+      test.describe('Keyboard interactions', () => {
+        test.beforeEach(async ({ page }) => {
+          await page.keyboard.press('Tab');
+          await expect(page.locator('[aria-rowindex="1"] > [aria-colindex="1"]')).toBeFocused();
+        });
+
+        test('focus the next element in the row when pressing ArrowDown', async ({ page }) => {
+          await page.keyboard.press('ArrowDown');
+          await page.keyboard.press('ArrowDown');
+          await page.keyboard.press('ArrowRight');
+
+          const tabIndexTd = await page.$eval('[aria-rowindex="3"] > [aria-colindex="2"]', (node) =>
+            node.getAttribute('tabindex'),
+          );
+
+          expect(tabIndexTd).toBe(null);
+
+          const tabIndexA = await page.$eval('[aria-rowindex="3"] > [aria-colindex="2"] > a', (node) =>
+            node.getAttribute('tabindex'),
+          );
+
+          expect(tabIndexA).toBe('0');
+
+          await expect(page.locator('[aria-rowindex="3"] > [aria-colindex="2"]')).not.toBeFocused();
+          await expect(page.locator('[aria-rowindex="3"] > [aria-colindex="2"] > a')).toBeFocused();
+        });
+      });
+    });
+
+    test.describe('Aria story', () => {
+      test.beforeEach(async ({ page }) => {
+        // This is the URL of the Storybook Iframe
+        await page.goto('/iframe.html?id=design-system-technical-components-rawtable--aria&viewMode=story');
+        await injectAxe(page);
+      });
+
+      test('triggers axe on the document', async ({ page }) => {
+        await checkA11y(page);
+      });
+
+      test.describe('Keyboard Interaction with inputs in tables', () => {
+        test(`should focus the cell when there's an input within & skip over input when pressing an ArrowKey`, async ({
+          page,
+        }) => {
+          /**
+           * Navigate to Column 4 row 1
+           */
+          await page.keyboard.press('Tab');
+          await expect(page.locator('[aria-rowindex="1"] > [aria-colindex="1"]')).toBeFocused();
+          await page.keyboard.press('ArrowDown');
+          await page.keyboard.press('ArrowRight');
+          await page.keyboard.press('ArrowRight');
+          await page.keyboard.press('ArrowRight');
+
+          await expect(page.locator('[aria-rowindex="2"] > [aria-colindex="4"]')).toBeFocused();
+
+          await page.keyboard.press('ArrowRight');
+
+          await expect(page.locator('[aria-rowindex="2"] > [aria-colindex="5"] button').nth(0)).toBeFocused();
+        });
+
+        test('should ignore the inputs inside the table when tabbing through the page', async ({ page }) => {
+          await page.keyboard.press('Tab');
+          await expect(page.locator('[aria-rowindex="1"] > [aria-colindex="1"]')).toBeFocused();
+
+          await page.keyboard.press('Tab');
+          /**
+           * This is the first input element in the table
+           */
+          await expect(page.locator('[aria-rowindex="2"] > [aria-colindex="4"] input')).not.toBeFocused();
+        });
+
+        test('should access the cells input with Enter, allow arrow keys to be used and allow esaping the cell with Escape', async ({
+          page,
+        }) => {
+          /**
+           * Navigate to Column 4 row 1
+           */
+          await page.keyboard.press('Tab');
+
+          await expect(page.locator('[aria-rowindex="1"] > [aria-colindex="1"]')).toBeFocused();
+
+          await page.keyboard.press('ArrowDown');
+          await page.keyboard.press('ArrowRight');
+          await page.keyboard.press('ArrowRight');
+          await page.keyboard.press('ArrowRight');
+
+          await expect(page.locator('[aria-rowindex="2"] > [aria-colindex="4"]')).toBeFocused();
+
+          await page.keyboard.press('Enter');
+
+          await expect(page.locator('[aria-rowindex="2"] > [aria-colindex="4"] input')).toBeFocused();
+
+          await page.keyboard.insertText('Hello');
+
+          await expect(page.locator('[aria-rowindex="2"] > [aria-colindex="4"] input')).toHaveValue('Hello');
+
+          await page.keyboard.press('ArrowLeft');
+          await page.keyboard.press('ArrowLeft');
+          await page.keyboard.press('Backspace');
+
+          await expect(page.locator('[aria-rowindex="2"] > [aria-colindex="4"] input')).toHaveValue('Helo');
+
+          await page.keyboard.press('Escape');
+
+          await expect(page.locator('[aria-rowindex="2"] > [aria-colindex="4"]')).toBeFocused();
+        });
+
+        test('clicking on an input and then pressing Escape should focus the cell containing the input and then allow navigation from that cell', async ({
+          page,
+        }) => {
+          await page.locator('[aria-rowindex="2"] > [aria-colindex="4"] input').click();
+
+          await expect(page.locator('[aria-rowindex="2"] > [aria-colindex="4"] input')).toBeFocused();
+
+          await page.keyboard.press('Escape');
+
+          await expect(page.locator('[aria-rowindex="2"] > [aria-colindex="4"]')).toBeFocused();
+
+          await page.keyboard.press('ArrowLeft');
+
+          await expect(page.locator('[aria-rowindex="2"] > [aria-colindex="3"]')).toBeFocused();
+        });
+
+        test('trying to access a cell with no focussable children should do nothing', async ({ page }) => {
+          await page.keyboard.press('Tab');
+
+          await expect(page.locator('[aria-rowindex="1"] > [aria-colindex="1"]')).toBeFocused();
+
+          await page.keyboard.press('Enter');
+
+          await expect(page.locator('[aria-rowindex="1"] > [aria-colindex="1"]')).toBeFocused();
+
+          await page.keyboard.press('ArrowRight');
+
+          await expect(page.locator('[aria-rowindex="1"] > [aria-colindex="2"]')).toBeFocused();
+        });
+
+        test('mutliple buttons should not require their cell to be activated', async ({ page }) => {
+          await page.keyboard.press('Tab');
+
+          await expect(page.locator('[aria-rowindex="1"] > [aria-colindex="1"]')).toBeFocused();
+
+          await page.keyboard.press('ArrowDown');
+          await page.keyboard.press('ArrowRight');
+          await page.keyboard.press('ArrowRight');
+          await page.keyboard.press('ArrowRight');
+          await page.keyboard.press('ArrowRight');
+
+          await expect(page.locator('[aria-rowindex="2"] > [aria-colindex="5"] button').nth(0)).toBeFocused();
+
+          await page.keyboard.press('ArrowRight');
+
+          await expect(page.locator('[aria-rowindex="2"] > [aria-colindex="5"] button').nth(1)).toBeFocused();
+
+          await page.keyboard.press('ArrowDown');
+
+          await expect(page.locator('[aria-rowindex="3"] > [aria-colindex="5"] button').nth(0)).toBeFocused();
+
+          await page.keyboard.press('ArrowLeft');
+
+          await expect(page.locator('[aria-rowindex="3"] > [aria-colindex="4"]')).toBeFocused();
+
+          await page.keyboard.press('ArrowRight');
+          await page.keyboard.press('ArrowUp');
+          await page.keyboard.press('ArrowUp');
+
+          await expect(page.locator('[aria-rowindex="1"] > [aria-colindex="5"]')).toBeFocused();
+        });
+      });
+    });
+  });
+
+  test.describe('dark mode', () => {
+    test('triggers axe on the document', async ({ page }) => {
+      // This is the URL of the Storybook Iframe
+      await page.goto('/iframe.html?id=design-system-technical-components-rawtable--base&viewMode=story&theme=dark');
+      await injectAxe(page);
+      await checkA11y(page);
+    });
+  });
+});

package/src/RawTable/focusFocusable.js

@@ -0,0 +1,7 @@
+export const focusFocusable = (node) => {
+  const nextNode = node.querySelector('[tabindex="0"]');
+
+  if (nextNode) {
+    nextNode.focus();
+  }
+};

package/src/RawTable/index.js

@@ -0,0 +1,5 @@
+export * from './RawTable';
+export * from './RawCell';
+export * from './RawThead';
+export * from './RawTbody';
+export * from './RawTr';