reactive-bulma 3.2.0 → 4.0.0

package/dist/cjs/types/components/atoms/TableCell/index.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { TableCellProps } from '../../../interfaces/atomProps';
+declare const TableCell: React.FC<TableCellProps>;
+export default TableCell;

package/dist/cjs/types/components/atoms/TableHeadCell/index.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { TableHeadCellProps } from '../../../interfaces/atomProps';
+declare const TableHeadCell: React.FC<TableHeadCellProps>;
+export default TableHeadCell;

package/dist/cjs/types/components/atoms/index.d.ts

@@ -23,3 +23,5 @@ export { default as TabItem } from './TabItem';
 export { default as LevelHeader } from './LevelHeader';
 export { default as Tile } from './Tile';
 export { default as NavBarItem } from './NavBarItem';
+export { default as TableHeadCell } from './TableHeadCell';
+export { default as TableCell } from './TableCell';

package/dist/cjs/types/components/molecules/TableRow/index.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { TableRowProps } from '../../../interfaces/moleculeProps';
+declare const TableRow: React.FC<TableRowProps>;
+export default TableRow;

package/dist/cjs/types/components/molecules/index.d.ts

@@ -19,3 +19,4 @@ export { default as Media } from './Media';
 export { default as Section } from './Section';
 export { default as NavBarBrand } from './NavBarBrand';
 export { default as NavBarDropdown } from './NavBarDropdown';
+export { default as TableRow } from './TableRow';

package/dist/cjs/types/components/organisms/Table/index.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { TableProps } from '../../../interfaces/organismProps';
+declare const Table: React.FC<TableProps>;
+export default Table;

package/dist/cjs/types/components/organisms/index.d.ts

@@ -5,3 +5,4 @@ export { default as Hero } from './Hero';
 export { default as TileGroup } from './TileGroup';
 export { default as NavBar } from './NavBar';
 export { default as Card } from './Card';
+export { default as Table } from './Table';

package/dist/cjs/types/functions/jest.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const renderTestingTableContainer: (element: React.ReactElement) => import("@testing-library/react").RenderResult<typeof import("@testing-library/dom/types/queries"), HTMLElement, HTMLElement>;

package/dist/cjs/types/interfaces/atomProps.d.ts

@@ -295,3 +295,11 @@ export interface NavBarItemProps extends ElementProps, ClickeableProps {
     /** `Styling` Used for `NavBarDropdown` styling purpose only. Will mark the item as the one selected among its group */
     isActive?: boolean;
 }
+export interface TableHeadCellProps extends ElementProps, ClickeableProps {
+    /** `Attribute` `Required` It will display cell's content, which could be text, an html tag or a custom component */
+    content: SingleChildType;
+}
+export interface TableCellProps extends ElementProps, ClickeableProps {
+    /** `Attribute` `Required` It will display cell's content, which could be text, an html tag or a custom component */
+    content: SingleChildType;
+}

package/dist/cjs/types/interfaces/moleculeProps.d.ts

@@ -1,5 +1,5 @@
 import { ClickeableProps, ComposedElementProps, ElementProps } from './commonProps';
-import { BreadcrumbItemProps, ButtonProps, ColumnProps, DeleteProps, DropdownItemProps, IconProps, ImageProps, InputProps, MenuItemProps, NavBarItemProps, PaginationItemProps, TabItemProps, TileProps } from './atomProps';
+import { BreadcrumbItemProps, ButtonProps, ColumnProps, DeleteProps, DropdownItemProps, IconProps, ImageProps, InputProps, MenuItemProps, NavBarItemProps, PaginationItemProps, TabItemProps, TableCellProps, TableHeadCellProps, TileProps } from './atomProps';
 import { BasicColorType, RightCenteredAlignType, BreadcrumbSeparatorType, ColumnGapType, SizeWithoutNormalType, TabsFormatType, MediumAndLargeSizeType, RightLeftAlignType } from '../types/styleTypes';
 import { ChildrenType, SingleChildType, PanelBlockItemType } from '../types/domTypes';
 export interface ButtonGroupProps extends ElementProps {
@@ -215,9 +215,17 @@ interface BrandConfigProps extends Omit<NavBarItemProps, 'children'> {
     children: ImageProps;
 }
 export interface NavBarBrandProps extends ElementProps {
-    /** `Attribute` `Required` Configuration object to inject a NavBarItem with a Image configuration as its children */
+    /** `Attribute` `Required` Configuration object to inject a `NavBarItem` with a Image configuration as its children */
     brandConfig: BrandConfigProps;
     /** `Styling` It sets brand's burger button as active (changing looks from a burger to a cross) */
     isBurgerActive?: boolean;
 }
+export interface TableRowProps extends ElementProps, ClickeableProps {
+    /** `Attribute` Configuration object to inject a `TableHeaderCell` as row's head */
+    headCell?: TableHeadCellProps;
+    /** `Attribute` `Required` List of `TableCell` that will be rendered on the table */
+    listOfCells: TableCellProps[];
+    /** `Styling` Used for `Table` styling purpose only. Will set row's background color to indicate it has been selected by the user */
+    isSelected?: boolean;
+}
 export {};

package/dist/cjs/types/interfaces/organismProps.d.ts

@@ -1,6 +1,6 @@
 import { ClickeableProps, ElementProps } from './commonProps';
-import { InputControlProps, LevelItemProps, NavBarBrandProps, NavBarDropdownProps, PanelBlockProps, PanelTabsProps } from './moleculeProps';
-import { ImageProps, NavBarItemProps, TileProps } from './atomProps';
+import { InputControlProps, LevelItemProps, NavBarBrandProps, NavBarDropdownProps, PanelBlockProps, PanelTabsProps, TableRowProps } from './moleculeProps';
+import { ImageProps, NavBarItemProps, TableHeadCellProps, TileProps } from './atomProps';
 import { BasicColorType, SizeWithHeightType } from '../types/styleTypes';
 import { ChildrenType, NavBarFixedPositionType } from '../types/domTypes';
 export interface FormFieldHelperProps {
@@ -90,3 +90,23 @@ export interface CardProps extends ElementProps {
     /** `Attribute` A list of footer links that will be rendered on card's bottom, below its content */
     footerLinks?: CardFooterProps[];
 }
+export interface TableProps extends ElementProps {
+    /** `Attribute` `Required` Configuration object that will display table's head */
+    head: TableHeadCellProps[];
+    /** `Attribute` `Required` Configuration object that will display table's body */
+    body: TableRowProps[];
+    /** `Attribute` Configuration object that will display table's foot */
+    foot?: TableHeadCellProps[];
+    /** `Styling` It will add a Bordered styling to the table. It can be combined with other mentioned styling properties. */
+    isBordered?: boolean;
+    /** `Styling` It will add a Striped styling to the table. It can be combined with other mentioned styling properties. */
+    isStriped?: boolean;
+    /** `Styling` It will add a Narrow styling to the table. It can be combined with other mentioned styling properties. */
+    isNarrow?: boolean;
+    /** `Styling` It will add a Hoverable styling to the table. It can be combined with other mentioned styling properties. */
+    isHoverable?: boolean;
+    /** `Styling` It will add a Fullwidth styling to the table. It can be combined with other mentioned styling properties. */
+    isFullwidth?: boolean;
+    /** `Styling` Will create a container around the table in order to make it scrollable */
+    isContained?: boolean;
+}

package/dist/esm/index.js

@@ -3327,6 +3327,16 @@ const NavBarItem = ({ testId = null, cssClasses = null, style = null, children,
     return (React.createElement("a", { "data-testid": navBarItemTestId, className: navBarItemClasses, style: style !== null && style !== void 0 ? style : undefined, "aria-hidden": 'true', onClick: onClick !== null && onClick !== void 0 ? onClick : undefined }, children));
 };
 
+const TableHeadCell = ({ testId = null, cssClasses = null, style = null, content, onClick = null }) => {
+    const tableHeadCellTestId = testId !== null && testId !== void 0 ? testId : parseTestId({ tag: 'table-head-cell', parsedClasses: cssClasses !== null && cssClasses !== void 0 ? cssClasses : '' });
+    return (React.createElement("th", { "data-testid": tableHeadCellTestId, className: cssClasses !== null && cssClasses !== void 0 ? cssClasses : undefined, style: style !== null && style !== void 0 ? style : undefined, onClick: onClick !== null && onClick !== void 0 ? onClick : undefined }, content));
+};
+
+const TableCell = ({ testId = null, cssClasses = null, style = null, content, onClick = null }) => {
+    const tableCellTestId = testId !== null && testId !== void 0 ? testId : parseTestId({ tag: 'table-cell', parsedClasses: cssClasses !== null && cssClasses !== void 0 ? cssClasses : '' });
+    return (React.createElement("td", { "data-testid": tableCellTestId, className: cssClasses !== null && cssClasses !== void 0 ? cssClasses : undefined, style: style !== null && style !== void 0 ? style : undefined, onClick: onClick !== null && onClick !== void 0 ? onClick : undefined }, content));
+};
+
 const generateKey = (max = 5000, min = 1) => {
     max = Math.floor(max);
     min = Math.ceil(min);
@@ -3831,6 +3841,17 @@ const NavBarDropdown = ({ testId = null, containerTestId = null, cssClasses = nu
         React.createElement("section", { "data-testid": navBarDropdownTestId, className: navBarDropdownClasses, style: style !== null && style !== void 0 ? style : undefined }, items.map(renderDropdownItem))));
 };
 
+const TableRow = ({ testId = null, cssClasses = null, style = null, headCell = null, listOfCells, isSelected = false, onClick = null }) => {
+    const tableRowClasses = parseClasses([
+        isSelected ? 'is-selected' : null,
+        cssClasses
+    ]);
+    const tableRowTestId = testId !== null && testId !== void 0 ? testId : parseTestId({ tag: 'table-row', parsedClasses: tableRowClasses });
+    return (React.createElement("tr", { "data-testid": tableRowTestId, className: tableRowClasses, style: style !== null && style !== void 0 ? style : undefined, onClick: onClick !== null && onClick !== void 0 ? onClick : undefined },
+        headCell ? React.createElement(TableHeadCell, Object.assign({}, headCell)) : null,
+        listOfCells.map(_cellConfig => (React.createElement(TableCell, Object.assign({ key: `table-row-${generateKey()}` }, _cellConfig))))));
+};
+
 const renderFieldLabel = (labelText) => labelText ? (React.createElement("label", { "data-testid": 'test-form-field-label', className: 'label' }, labelText)) : null;
 const renderFieldBody = (inputControlConfig, isGrouped) => {
     if (isGrouped) {
@@ -3977,5 +3998,25 @@ const Card = ({ testId = null, cssClasses = null, style = null, headerText = nul
         }))) : null));
 };
 
-export { Block, Box, BreadcrumbItem, Breadcrumbs, Button, ButtonGroup, Card, CheckBox as Checkbox, Column, ColumnGroup, Delete, Dropdown, DropdownItem, DropdownTrigger, File, Footer, FormField, Hero, Icon, Image, Input, InputControl, Level, LevelHeader, LevelItem, Media, Menu, MenuItem, MenuList, Message, Modal, NavBar, NavBarBrand, NavBarDropdown, NavBarItem, Notification, Pagination, PaginationItem, Panel, PanelBlock, PanelTabs, ProgressBar, RadioButton, Section, Select, TabItem, Tabs, Tag, TextArea, Tile, TileBox, TileGroup, Title };
+/* eslint-disable react/prop-types */
+const renderTableSection = (sectionName, configData) => (React.createElement("tr", null, configData.map(_ItemConfig => (React.createElement(TableHeadCell, Object.assign({ key: `table-${sectionName}-item-${generateKey()}` }, _ItemConfig))))));
+const Table = ({ testId = null, cssClasses = null, style = null, head, body, foot = null, isBordered = false, isStriped = false, isNarrow = false, isHoverable = false, isFullwidth = false, isContained = false }) => {
+    const tableClasses = parseClasses([
+        'table',
+        isBordered ? 'is-bordered' : null,
+        isStriped ? 'is-striped' : null,
+        isNarrow ? 'is-narrow' : null,
+        isHoverable ? 'is-hoverable' : null,
+        isFullwidth ? 'is-fullwidth' : null,
+        cssClasses
+    ]);
+    const tableTestId = testId !== null && testId !== void 0 ? testId : parseTestId({ tag: 'table', parsedClasses: tableClasses });
+    const TableElement = () => (React.createElement("table", { "data-testid": tableTestId, className: tableClasses, style: style !== null && style !== void 0 ? style : undefined },
+        React.createElement("thead", { "data-testid": `${tableTestId}-head` }, renderTableSection('head', head)),
+        React.createElement("tbody", { "data-testid": `${tableTestId}-body` }, body.map(_bodyRowConfig => (React.createElement(TableRow, Object.assign({ key: `table-body-item-${generateKey()}` }, _bodyRowConfig))))),
+        foot ? (React.createElement("tfoot", { "data-testid": `${tableTestId}-foot` }, renderTableSection('foot', foot))) : null));
+    return isContained ? (React.createElement("section", { "data-testid": `${tableTestId}-container`, className: 'table-container' }, React.createElement(TableElement, null))) : (React.createElement(TableElement, null));
+};
+
+export { Block, Box, BreadcrumbItem, Breadcrumbs, Button, ButtonGroup, Card, CheckBox as Checkbox, Column, ColumnGroup, Delete, Dropdown, DropdownItem, DropdownTrigger, File, Footer, FormField, Hero, Icon, Image, Input, InputControl, Level, LevelHeader, LevelItem, Media, Menu, MenuItem, MenuList, Message, Modal, NavBar, NavBarBrand, NavBarDropdown, NavBarItem, Notification, Pagination, PaginationItem, Panel, PanelBlock, PanelTabs, ProgressBar, RadioButton, Section, Select, TabItem, Table, TableCell, TableHeadCell, TableRow, Tabs, Tag, TextArea, Tile, TileBox, TileGroup, Title };
 //# sourceMappingURL=index.js.map