@strapi/design-system 1.3.0-beta.0 → 1.3.0-beta.2

package/src/RawTable/RawTable.stories.mdx

@@ -1,258 +0,0 @@
-<!--- 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

@@ -1,10 +0,0 @@
-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

@@ -1,18 +0,0 @@
-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

@@ -1,15 +0,0 @@
-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

@@ -1,20 +0,0 @@
-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

@@ -1,344 +0,0 @@
-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

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

package/src/RawTable/index.js

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