@bodynarf/react.components 1.8.21 → 1.9.0

package/components/table/component/index.d.ts

@@ -0,0 +1,43 @@
+/// <reference types="react" />
+import { BaseElementProps } from "../../../types";
+import { SortColumn, TableHeading } from "..";
+/** Table props type */
+export interface TableProps<TItem> extends BaseElementProps {
+    /** Header row */
+    headings: Array<TableHeading<TItem>>;
+    /** Table body */
+    children?: React.ReactNode;
+    /** Add border to all cells */
+    hasBorder?: boolean;
+    /** Is row hover effect active */
+    hoverable?: boolean;
+    /** Reduce space between cells */
+    narrow?: boolean;
+    /** Use all container width */
+    fullWidth?: boolean;
+    /** Is header sticks to page on scroll */
+    hasStickyHeader?: boolean;
+    /**
+     * Header has border.
+     * @description Applied only with `hasStickyHeader` sets as `true`. Adds border effect
+    */
+    headerWithBorder?: boolean;
+    /** Header has no borders */
+    headerBorderless?: boolean;
+    /**
+     * Should rows be stripped.
+     * @description Even rows will have gray background
+    */
+    zebra?: boolean;
+    /** Current sort column */
+    currentSortColumn?: SortColumn<TItem>;
+    /** Header click handler */
+    onHeaderClick?: (columnName: TableHeading<TItem>) => void;
+}
+/**
+ * Tiny table component.
+ * If no sorting is use - use `any` as generic param
+ */
+declare function Table<TItem>({ headings, hasBorder, hoverable, narrow, fullWidth, zebra, headerBorderless, hasStickyHeader, headerWithBorder, currentSortColumn, onHeaderClick, children, className, title, data, }: TableProps<TItem>): JSX.Element;
+export default Table;
+//# sourceMappingURL=index.d.ts.map

package/components/table/component/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/table/component/index.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAC;AAG9C,OAAO,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,IAAI,CAAC;AAG9C,uBAAuB;AACvB,MAAM,WAAW,UAAU,CAAC,KAAK,CAAE,SAAQ,gBAAgB;IACvD,iBAAiB;IACjB,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC,CAAC;IAErC,iBAAiB;IACjB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE3B,8BAA8B;IAC9B,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,iCAAiC;IACjC,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,iCAAiC;IACjC,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB,8BAA8B;IAC9B,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,yCAAyC;IACzC,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B;;;MAGE;IACF,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAE3B,4BAA4B;IAC5B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAE3B;;;MAGE;IACF,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB,0BAA0B;IAC1B,iBAAiB,CAAC,EAAE,UAAU,CAAC,KAAK,CAAC,CAAC;IAEtC,2BAA2B;IAC3B,aAAa,CAAC,EAAE,CAAC,UAAU,EAAE,YAAY,CAAC,KAAK,CAAC,KAAK,IAAI,CAAC;CAC7D;AAED;;;GAGG;AACH,iBAAS,KAAK,CAAC,KAAK,EAAE,EAClB,QAAQ,EACR,SAAS,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,gBAAgB,EAChE,eAAe,EAAE,gBAAgB,EACjC,iBAAiB,EAAE,aAAa,EAChC,QAAQ,EAER,SAAS,EAAE,KAAK,EAAE,IAAI,GACzB,EAAE,UAAU,CAAC,KAAK,CAAC,GAAG,GAAG,CAAC,OAAO,CA0CjC;AAED,eAAe,KAAK,CAAC"}

package/components/table/component/index.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { getClassName, isNullOrUndefined } from "@bodynarf/utils";
+import { mapDataAttributes } from "../../../utils";
+import TableHeader from "../components/heading";
+/**
+ * Tiny table component.
+ * If no sorting is use - use `any` as generic param
+ */
+function Table({ headings, hasBorder, hoverable, narrow, fullWidth, zebra, headerBorderless, hasStickyHeader, headerWithBorder, currentSortColumn, onHeaderClick, children, className, title, data, }) {
+    const elClassName = getClassName([
+        "table",
+        className,
+        hasBorder ? "is-bordered" : "",
+        hoverable ? "is-hoverable" : "",
+        narrow ? "is-narrow" : "",
+        fullWidth ? "is-fullwidth" : "",
+        zebra ? "is-striped" : "",
+        hasStickyHeader ? "has-sticky-header" : "",
+        headerWithBorder ? "has-borderless-header has-shadow-bordered-header" : "",
+        headerBorderless ? "has-borderless-header" : "",
+    ]);
+    const dataAttributes = isNullOrUndefined(data)
+        ? undefined
+        : mapDataAttributes(data);
+    return (_jsxs("table", { className: elClassName, title: title, ...dataAttributes, children: [_jsx("thead", { children: _jsx("tr", { children: headings.map((heading, i) => _jsx(TableHeader, { ...heading, sortColumn: currentSortColumn, onClick: onHeaderClick }, i)) }) }), _jsx("tbody", { children: children })] }));
+}
+export default Table;

package/components/table/components/heading/index.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import { SortColumn, TableHeading } from "../../types";
+/** Table heading cell component props */
+export interface TableHeaderProps<TItem> extends TableHeading<TItem> {
+    /** Current sort column */
+    sortColumn?: SortColumn<TItem>;
+    /** Cell click handler */
+    onClick?: (column: TableHeading<TItem>) => void;
+}
+/** Table heading cell */
+declare function TableHeader<TItem>(props: TableHeaderProps<TItem>): JSX.Element;
+export default TableHeader;
+//# sourceMappingURL=index.d.ts.map

package/components/table/components/heading/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/table/components/heading/index.tsx"],"names":[],"mappings":";AAMA,OAAO,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAEvD,yCAAyC;AACzC,MAAM,WAAW,gBAAgB,CAAC,KAAK,CAAE,SAAQ,YAAY,CAAC,KAAK,CAAC;IAChE,0BAA0B;IAC1B,UAAU,CAAC,EAAE,UAAU,CAAC,KAAK,CAAC,CAAC;IAE/B,yBAAyB;IACzB,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,YAAY,CAAC,KAAK,CAAC,KAAK,IAAI,CAAC;CACnD;AAED,yBAAyB;AACzB,iBAAS,WAAW,CAAC,KAAK,EAAE,KAAK,EAAE,gBAAgB,CAAC,KAAK,CAAC,GAAG,GAAG,CAAC,OAAO,CAoCvE;AAED,eAAe,WAAW,CAAC"}

package/components/table/components/heading/index.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback } from "react";
+import { getClassName, isNullOrUndefined } from "@bodynarf/utils";
+import Icon from "../../../icon";
+/** Table heading cell */
+function TableHeader(props) {
+    const { className, caption, name, sortable, sortColumn, onClick } = props;
+    const onHeaderClick = useCallback(() => {
+        if (sortable && !isNullOrUndefined(onClick)) {
+            onClick(props);
+        }
+    }, [onClick, props, sortable]);
+    const containerClassName = getClassName([
+        className,
+        sortable ? "is-clickable" : "",
+    ]);
+    return (_jsx("th", { className: containerClassName, onClick: onHeaderClick, children: _jsxs("div", { children: [_jsx("span", { children: caption }), sortable && sortColumn?.columnName === name
+                    &&
+                        _jsx(Icon, { className: "ml-1", name: `sort-alpha-down${sortColumn.ascending ? "" : "-alt"}` })] }) }));
+}
+export default TableHeader;

package/components/table/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from "./component";
+export * from "./types";
+//# sourceMappingURL=index.d.ts.map

package/components/table/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/table/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AACtC,cAAc,SAAS,CAAC"}

package/components/table/index.js

@@ -0,0 +1,2 @@
+export { default } from "./component";
+export * from "./types";

package/components/table/types.d.ts

@@ -0,0 +1,18 @@
+export interface TableHeading<TItem> {
+    /** Caption to display */
+    caption: string;
+    /** Is column sortable  */
+    sortable: boolean;
+    /** Class names */
+    className: string;
+    /** Name of model column*/
+    name?: keyof TItem;
+}
+/** Generic sort column model */
+export interface SortColumn<TModel> {
+    /** Column name */
+    columnName: keyof TModel;
+    /** Is column sorted ascending */
+    ascending: boolean;
+}
+//# sourceMappingURL=types.d.ts.map

package/components/table/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/table/types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,YAAY,CAAC,KAAK;IAC/B,yBAAyB;IACzB,OAAO,EAAE,MAAM,CAAC;IAEhB,0BAA0B;IAC1B,QAAQ,EAAE,OAAO,CAAC;IAElB,kBAAkB;IAClB,SAAS,EAAE,MAAM,CAAC;IAElB,0BAA0B;IAC1B,IAAI,CAAC,EAAE,MAAM,KAAK,CAAC;CACtB;AAED,gCAAgC;AAChC,MAAM,WAAW,UAAU,CAAC,MAAM;IAC9B,kBAAkB;IAClB,UAAU,EAAE,MAAM,MAAM,CAAC;IAEzB,iCAAiC;IACjC,SAAS,EAAE,OAAO,CAAC;CACtB"}

package/components/tabs/component/index.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
+import { BaseElementProps, ElementPosition, ElementSize } from "../../../types";
 import "./style.scss";
-import { BaseElementProps, ElementSize } from "../..";
-import { TabItem, TabsPosition, TabsStyle } from "../../tabs";
+import { TabItem, TabsStyle } from "..";
 /** Tabs component props type */
 export interface TabsProps extends BaseElementProps {
     /** Tabs */
@@ -19,7 +19,7 @@ export interface TabsProps extends BaseElementProps {
      */
     size?: ElementSize;
     /** Component position */
-    position?: TabsPosition;
+    position?: ElementPosition;
     /** Component style */
     style?: TabsStyle;
     /** Is component tabs should take all width of parent */

package/components/tabs/component/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/tabs/component/index.tsx"],"names":[],"mappings":";AAIA,OAAO,cAAc,CAAC;AAEtB,OAAO,EAAE,gBAAgB,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAGhE,OAAO,EAAE,OAAO,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAGxE,gCAAgC;AAChC,MAAM,WAAW,SAAU,SAAQ,gBAAgB;IAC/C,WAAW;IACX,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC;IAEtB,8CAA8C;IAC9C,kBAAkB,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAE5C;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;;OAGG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC;IAEnB,yBAAyB;IACzB,QAAQ,CAAC,EAAE,YAAY,CAAC;IAExB,sBAAsB;IACtB,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB,wDAAwD;IACxD,SAAS,CAAC,EAAE,OAAO,CAAC;CACvB;AAED;;;GAGG;AACH,QAAA,MAAM,IAAI,4GAMP,SAAS,KAAG,WA6Ed,CAAC;AAEF,eAAe,IAAI,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/tabs/component/index.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,gBAAgB,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAG5E,OAAO,cAAc,CAAC;AAEtB,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,IAAI,CAAC;AAGxC,gCAAgC;AAChC,MAAM,WAAW,SAAU,SAAQ,gBAAgB;IAC/C,WAAW;IACX,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC;IAEtB,8CAA8C;IAC9C,kBAAkB,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAE5C;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;;OAGG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC;IAEnB,yBAAyB;IACzB,QAAQ,CAAC,EAAE,eAAe,CAAC;IAE3B,sBAAsB;IACtB,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB,wDAAwD;IACxD,SAAS,CAAC,EAAE,OAAO,CAAC;CACvB;AASD;;;GAGG;AACH,QAAA,MAAM,IAAI,4GAQP,SAAS,KAAG,WA8Ed,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/components/tabs/component/index.js

@@ -1,16 +1,22 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useCallback, useState, useEffect, useRef } from "react";
 import { getClassName, isNullOrEmpty, isNullOrUndefined } from "@bodynarf/utils";
-import "./style.scss";
-import { ElementSize } from "../..";
+import { ElementPosition, ElementSize } from "../../../types";
 import { mapDataAttributes } from "../../../utils";
-import { TabsPosition, TabsStyle } from "../../tabs";
-import TabItemComponent from "../../tabs/components/item";
+import "./style.scss";
+import { TabsStyle } from "..";
+import TabItemComponent from "../components/item";
+/** Tab position to element class name map */
+const positionToClassNameMap = new Map([
+    [ElementPosition.Left, ""],
+    [ElementPosition.Center, "is-centered"],
+    [ElementPosition.Right, "is-right"],
+]);
 /**
  * Tabs panel
  * @throws Items are empty
  */
-const Tabs = ({ items, onActiveItemChange, defaultActive = items[0], size, position = TabsPosition.left, style = TabsStyle.default, fullWidth = false, className, title, data, }) => {
+const Tabs = ({ items, onActiveItemChange, defaultActive = items[0], size, position = ElementPosition.Left, style = TabsStyle.default, fullWidth = false, className, title, data, }) => {
     if (items.length === 0) {
         throw new Error("Invalid configuration. Tab items must be defined");
     }
@@ -41,16 +47,16 @@ const Tabs = ({ items, onActiveItemChange, defaultActive = items[0], size, posit
     const elClassName = getClassName([
         "bbr-tabs",
         "tabs",
-        position,
+        className,
+        positionToClassNameMap.get(position),
         getSizeClassName(size, [ElementSize.Normal]),
         style,
         fullWidth ? "is-fullwidth" : "",
-        className,
     ]);
     const dataAttributes = isNullOrUndefined(data)
         ? undefined
         : mapDataAttributes(data);
-    return (_jsx("nav", { className: elClassName, onClick: onTabsClick, title: title, ...dataAttributes, children: _jsx("ul", { children: items.map(item => _jsx(TabItemComponent, { item: item, activeItem: activeItem.id }, item.id)) }) }));
+    return (_jsx("nav", { onClick: onTabsClick, className: elClassName, title: title, ...dataAttributes, children: _jsx("ul", { children: items.map(item => _jsx(TabItemComponent, { item: item, activeItem: activeItem.id }, item.id)) }) }));
 };
 export default Tabs;
 /**

package/components/tabs/components/item/index.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { TabItem as Item } from "../../../tabs";
+import { TabItem as Item } from "../..";
 /** Tabs panel single tab item component props type */
 export interface TabItemProps {
     /** Tab item */

package/components/tabs/components/item/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/tabs/components/item/index.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAEvD,sDAAsD;AACtD,MAAM,WAAW,YAAY;IACzB,eAAe;IACf,IAAI,EAAE,IAAI,CAAC;IAEX,6BAA6B;IAC7B,UAAU,EAAE,MAAM,CAAC;CACtB;AAED,2CAA2C;AAC3C,QAAA,MAAM,OAAO,yBAEV,YAAY,KAAG,WAqBjB,CAAC;AAEF,eAAe,OAAO,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/tabs/components/item/index.tsx"],"names":[],"mappings":";AAKA,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,OAAO,CAAC;AAExC,sDAAsD;AACtD,MAAM,WAAW,YAAY;IACzB,eAAe;IACf,IAAI,EAAE,IAAI,CAAC;IAEX,6BAA6B;IAC7B,UAAU,EAAE,MAAM,CAAC;CACtB;AAED,2CAA2C;AAC3C,QAAA,MAAM,OAAO,yBAEV,YAAY,KAAG,WAqBjB,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/components/tabs/components/item/index.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { getClassName, isNullOrUndefined } from "@bodynarf/utils";
+import { ElementPosition } from "../../../../types";
 import Icon from "../../../icon";
 /** Tabs panel single tab item component */
 const TabItem = ({ item, activeItem }) => {
@@ -20,8 +21,8 @@ const TabItemWithIcon = ({ item, activeItem }) => {
         "bbr-tabs__tab",
         activeItem === item.id ? "is-active" : undefined,
     ]);
-    if (iconConfig.position === "left") {
-        return (_jsx("li", { className: className, "data-item-id": item.id, children: _jsxs("a", { children: [_jsx(Icon, { ...iconConfig }), _jsx("span", { children: item.caption })] }) }, item.id));
+    if (iconConfig.position === ElementPosition.Right) {
+        return (_jsx("li", { className: className, "data-item-id": item.id, children: _jsxs("a", { children: [_jsx("span", { children: item.caption }), _jsx(Icon, { ...iconConfig })] }) }, item.id));
     }
-    return (_jsx("li", { className: className, "data-item-id": item.id, children: _jsxs("a", { children: [_jsx("span", { children: item.caption }), _jsx(Icon, { ...iconConfig })] }) }, item.id));
+    return (_jsx("li", { className: className, "data-item-id": item.id, children: _jsxs("a", { children: [_jsx(Icon, { ...iconConfig }), _jsx("span", { children: item.caption })] }) }, item.id));
 };

package/components/tabs/types.d.ts

@@ -1,4 +1,4 @@
-import { ElementIcon } from "..";
+import { ElementIcon } from "../../types";
 /** Tabs component style */
 export declare enum TabsStyle {
     /**
@@ -20,17 +20,6 @@ export declare enum TabsStyle {
      */
     radioButtonRounded = "is-toggle is-toggle-rounded"
 }
-/**
- * Tabs items position on component
- */
-export declare enum TabsPosition {
-    /** On the left side. Default value */
-    "left" = "",
-    /** Center*/
-    "center" = "is-centered",
-    /** Pulled to right */
-    "right" = "is-right"
-}
 /** Tab item */
 export interface TabItem {
     /** Unique identifier across all tab items */

package/components/tabs/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAE9C,2BAA2B;AAC3B,oBAAY,SAAS;IACjB;;;OAGG;IACH,OAAO,KAAK;IAEZ;;;OAGG;IACH,KAAK,aAAa;IAElB;;OAEG;IACH,WAAW,cAAc;IAEzB;;OAEG;IACH,kBAAkB,gCAAgC;CACrD;AAED;;GAEG;AACH,oBAAY,YAAY;IACpB,sCAAsC;IACtC,MAAM,KAAK;IAEX,YAAY;IACZ,QAAQ,gBAAgB;IAExB,sBAAsB;IACtB,OAAO,aAAa;CACvB;AAED,eAAe;AACf,MAAM,WAAW,OAAO;IACpB,6CAA6C;IAC7C,EAAE,EAAE,MAAM,CAAC;IAEX,0BAA0B;IAC1B,OAAO,EAAE,MAAM,CAAC;IAEhB,yBAAyB;IACzB,IAAI,CAAC,EAAE,WAAW,CAAC;CACtB"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAEzC,2BAA2B;AAC3B,oBAAY,SAAS;IACjB;;;OAGG;IACH,OAAO,KAAK;IAEZ;;;OAGG;IACH,KAAK,aAAa;IAElB;;OAEG;IACH,WAAW,cAAc;IAEzB;;OAEG;IACH,kBAAkB,gCAAgC;CACrD;AAED,eAAe;AACf,MAAM,WAAW,OAAO;IACpB,6CAA6C;IAC7C,EAAE,EAAE,MAAM,CAAC;IAEX,0BAA0B;IAC1B,OAAO,EAAE,MAAM,CAAC;IAEhB,yBAAyB;IACzB,IAAI,CAAC,EAAE,WAAW,CAAC;CACtB"}

package/components/tabs/types.js

@@ -20,15 +20,3 @@ export var TabsStyle;
      */
     TabsStyle["radioButtonRounded"] = "is-toggle is-toggle-rounded";
 })(TabsStyle || (TabsStyle = {}));
-/**
- * Tabs items position on component
- */
-export var TabsPosition;
-(function (TabsPosition) {
-    /** On the left side. Default value */
-    TabsPosition["left"] = "";
-    /** Center*/
-    TabsPosition["center"] = "is-centered";
-    /** Pulled to right */
-    TabsPosition["right"] = "is-right";
-})(TabsPosition || (TabsPosition = {}));

package/components/tag/component/index.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
-import { TagProps } from "../../tag";
+import { TagProps } from "..";
 import "./style.scss";
 /** Single tag item */
-declare const Tag: ({ content, size, style, rounded, lightColor, customColor, onClick, className, title, }: TagProps) => JSX.Element;
+declare const Tag: ({ content, size, style, rounded, lightColor, customColor, onClick, className, title, data, }: TagProps) => JSX.Element;
 export default Tag;
 //# sourceMappingURL=index.d.ts.map

package/components/tag/component/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/tag/component/index.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAE/C,OAAO,cAAc,CAAC;AAEtB,sBAAsB;AACtB,QAAA,MAAM,GAAG,2FAQN,QAAQ,KAAG,WA+Bb,CAAC;AAEF,eAAe,GAAG,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/tag/component/index.tsx"],"names":[],"mappings":";AAKA,OAAO,EAAE,QAAQ,EAAE,MAAM,IAAI,CAAC;AAE9B,OAAO,cAAc,CAAC;AAEtB,sBAAsB;AACtB,QAAA,MAAM,GAAG,iGAQN,QAAQ,KAAG,WAuCb,CAAC;AAEF,eAAe,GAAG,CAAC"}

package/components/tag/component/index.js

@@ -1,26 +1,32 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { getClassName, isNullOrUndefined } from "@bodynarf/utils";
-import { ElementColor, ElementSize } from "../..";
+import { ElementColor, ElementSize } from "../../../types";
+import { mapDataAttributes } from "../../../utils";
 import "./style.scss";
 /** Single tag item */
-const Tag = ({ content, size = ElementSize.Normal, style = ElementColor.Default, rounded = false, lightColor = false, customColor, onClick, className, title, }) => {
+const Tag = ({ content, size = ElementSize.Normal, style = ElementColor.Default, rounded = false, lightColor = false, customColor, onClick, className, title, data, }) => {
     if (!isNullOrUndefined(customColor)) {
         style = ElementColor.Default;
     }
     const elClassName = getClassName([
         "bbr-tag",
         "tag",
+        className,
         style === ElementColor.Default ? "" : `is-${style}`,
         !isNullOrUndefined(customColor) ? "bbr-tag--custom" : "",
         lightColor && isNullOrUndefined(customColor) ? "is-light" : "",
         rounded ? "is-rounded" : "",
         size === ElementSize.Normal || size === ElementSize.Small ? "" : `is-${size}`,
         isNullOrUndefined(onClick) ? "" : "bbr-tag--clickable",
-        className,
     ]);
-    return (_jsx("span", { className: elClassName, onClick: onClick, title: title, color: customColor?.color, style: {
-            color: customColor?.color,
-            backgroundColor: customColor?.backgroundColor,
-        }, children: content }));
+    const dataAttributes = isNullOrUndefined(data)
+        ? undefined
+        : mapDataAttributes(data);
+    return (_jsx("span", { onClick: onClick, className: elClassName, style: isNullOrUndefined(customColor)
+            ? undefined
+            : {
+                color: customColor?.color,
+                backgroundColor: customColor?.backgroundColor,
+            }, title: title, ...dataAttributes, children: content }));
 };
 export default Tag;

package/components/tag/types.d.ts

@@ -1,4 +1,4 @@
-import { BaseElementProps, ElementColor, ElementSize } from "..";
+import { BaseElementProps, ElementColor, ElementSize } from "../../types";
 /** Tag item prop types */
 export interface TagProps extends BaseElementProps {
     /** Tag content */

package/components/tag/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/tag/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAE9E,0BAA0B;AAC1B,MAAM,WAAW,QAAS,SAAQ,gBAAgB;IAC9C,kBAAkB;IAClB,OAAO,EAAE,MAAM,CAAC;IAEhB;;;MAGE;IACF,IAAI,CAAC,EAAE,WAAW,CAAC;IAEnB,oBAAoB;IACpB,KAAK,CAAC,EAAE,YAAY,CAAC;IAErB,qCAAqC;IACrC,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,iCAAiC;IACjC,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB,oBAAoB;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IAErB,0BAA0B;IAC1B,WAAW,CAAC,EAAE;QACV,iBAAiB;QACjB,KAAK,EAAE,MAAM,CAAC;QAEd,uBAAuB;QACvB,eAAe,EAAE,MAAM,CAAC;KAC3B,CAAC;CACL"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/tag/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAEzE,0BAA0B;AAC1B,MAAM,WAAW,QAAS,SAAQ,gBAAgB;IAC9C,kBAAkB;IAClB,OAAO,EAAE,MAAM,CAAC;IAEhB;;;MAGE;IACF,IAAI,CAAC,EAAE,WAAW,CAAC;IAEnB,oBAAoB;IACpB,KAAK,CAAC,EAAE,YAAY,CAAC;IAErB,qCAAqC;IACrC,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,iCAAiC;IACjC,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB,oBAAoB;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IAErB,0BAA0B;IAC1B,WAAW,CAAC,EAAE;QACV,iBAAiB;QACjB,KAAK,EAAE,MAAM,CAAC;QAEd,uBAAuB;QACvB,eAAe,EAAE,MAAM,CAAC;KAC3B,CAAC;CACL"}

package/hooks/usePagination.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"usePagination.d.ts","sourceRoot":"","sources":["../../src/hooks/usePagination.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAA6C,MAAM,OAAO,CAAC;AAElF,2BAA2B;AAC3B,MAAM,WAAW,eAAe;IAC5B,6BAA6B;IAC7B,WAAW,EAAE,MAAM,CAAC;IAEpB,sBAAsB;IACtB,UAAU,EAAE,MAAM,CAAC;IAEnB,6BAA6B;IAC7B,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CACxC;AAKD;;;;;;;GAOG;AACH,eAAO,MAAM,aAAa,WACd,MAAM,SACR,MAAM,aACF,MAAM,6DAEQ,MAAM,GAAG,CAAC,KAAK,MAAM,GAAG,CAAC,CAwBpD,CAAC"}
+{"version":3,"file":"usePagination.d.ts","sourceRoot":"","sources":["../../src/hooks/usePagination.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAqD,MAAM,OAAO,CAAC;AAE1F,2BAA2B;AAC3B,MAAM,WAAW,eAAe;IAC5B,6BAA6B;IAC7B,WAAW,EAAE,MAAM,CAAC;IAEpB,sBAAsB;IACtB,UAAU,EAAE,MAAM,CAAC;IAEnB,6BAA6B;IAC7B,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CACxC;AAKD;;;;;;;GAOG;AACH,eAAO,MAAM,aAAa,WACd,MAAM,SACR,MAAM,aACF,MAAM,6DAEQ,MAAM,GAAG,CAAC,KAAK,MAAM,GAAG,CAAC,CAiCpD,CAAC"}

package/hooks/usePagination.js

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 /** Default page size */
 const defaultPageSize = 30;
 /**
@@ -23,6 +23,15 @@ export const usePagination = (length, size = defaultPageSize, initPage = 1, depe
         pagesCount: count,
         onPageChange: onChange
     }), [currentPage, count, onChange]);
-    useEffect(() => setCurrentPage(1), dependencies);
+    const isInitialRender = useRef(true);
+    useEffect(() => {
+        if (isInitialRender.current) {
+            isInitialRender.current = false;
+        }
+        else {
+            setCurrentPage(1);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, dependencies);
     return [state, paginate];
 };

package/index.d.ts

@@ -1,4 +1,5 @@
 export * from "./components";
 export * from "./hooks";
+export * from "./types";
 export * from "./utils";
 //# sourceMappingURL=index.d.ts.map

package/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC"}

package/index.js

@@ -1,3 +1,4 @@
 export * from "./components";
 export * from "./hooks";
+export * from "./types";
 export * from "./utils";

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@bodynarf/react.components",
-    "version": "1.8.21",
+    "version": "1.9.0",
     "author": {
         "name": "Artem",
         "email": "bodynar@gmail.com"
@@ -23,16 +23,23 @@
     "scripts": {
         "build": "npx tsc && tsc-alias -p tsconfig.json",
         "copy_styles": "copyfiles -u 1 src/**/*.scss dist",
-        "copy_main" : "copyfiles package.json readme.md dist",
+        "copy_main": "copyfiles package.json readme.md dist",
         "transfer": "npm run copy_styles && npm run copy_main",
         "build_transfer": "npm run build && npm run transfer",
-        "prepublish": "npm run build_transfer && cd dist && npm pack --dry-run",
-        "publish_pkg": "npm run build_transfer && cd dist && npm publish --access=public"
+        "prepublish": "npm run build_transfer && cd dist && npm pack",
+        "publish_pkg": "npm run build_transfer && cd dist && npm publish --access=public",
+        "lint": "npx eslint src/**/*.ts src/**/*.tsx"
     },
     "devDependencies": {
         "@types/react": "^18.0.11",
         "@types/react-dom": "^18.0.5",
+        "@typescript-eslint/eslint-plugin": "^6.4.1",
+        "@typescript-eslint/parser": "^6.4.1",
         "copyfiles": "^2.4.1",
+        "eslint": "^8.48.0",
+        "eslint-plugin-import": "^2.28.1",
+        "eslint-plugin-react": "^7.33.2",
+        "eslint-plugin-react-hooks": "^4.6.0",
         "tsc-alias": "^1.8.6",
         "typescript": "^4.7.3"
     },

package/readme.md

@@ -37,6 +37,8 @@ Simple react components based on html elements.
  - **Button** - button that allows user to interact with system by clicking it _(assume everyone knows what is button)_
  - **Icon** - *see p.4 of installation*
  - **Tag** - small component stands for tag visualization
+ - **BreadCrumbs** - speaks for it self
+ - **Table** - table with sortable headers
 
 ### Complex components
 Complex components is set of components built via combining simple components or represent complex logical component