@bodynarf/react.components 1.13.4 → 1.13.6

package/components/progress/types.d.ts

@@ -0,0 +1,23 @@
+import { BaseElementProps, ElementColor, ElementSize } from "../../types";
+/** Progress component props */
+export type ProgressProps = BaseElementProps & {
+    /** Current progress value (0-100) */
+    value?: number;
+    /** Maximum value (100 by default) */
+    max?: number;
+    /** Minimum value (0 by default) */
+    min?: number;
+    /** Element size */
+    size?: ElementSize;
+    /** Element color */
+    color?: ElementColor;
+    /** Show percentage text (true by default) */
+    showValue?: boolean;
+    /** Is indeterminate loader */
+    indeterminate?: boolean;
+    /** Loading text for indeterminate state */
+    loadingText?: string;
+    /** Animate progress bar within current value range (true by default) */
+    animated?: boolean;
+};
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/progress/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAEzE,+BAA+B;AAC/B,MAAM,MAAM,aAAa,GACnB,gBAAgB,GAChB;IACE,qCAAqC;IACrC,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,qCAAqC;IACrC,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb,mCAAmC;IACnC,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb,mBAAmB;IACnB,IAAI,CAAC,EAAE,WAAW,CAAC;IAEnB,oBAAoB;IACpB,KAAK,CAAC,EAAE,YAAY,CAAC;IAErB,6CAA6C;IAC7C,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,8BAA8B;IAC9B,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB,2CAA2C;IAC3C,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,wEAAwE;IACxE,QAAQ,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC"}

package/components/progress/types.js

@@ -0,0 +1 @@
+export {};

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/search/component/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAe,EAAE,EAAyB,MAAM,OAAO,CAAC;AAQ/D,OAAO,cAAc,CAAC;AACtB,OAAO,EAAE,WAAW,EAAE,MAAM,IAAI,CAAC;AAEjC,uBAAuB;AACvB,QAAA,MAAM,MAAM,EAAE,EAAE,CAAC,WAAW,CAkG3B,CAAC;AAEF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/search/component/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAe,EAAE,EAAyB,MAAM,OAAO,CAAC;AAQ/D,OAAO,cAAc,CAAC;AACtB,OAAO,EAAE,WAAW,EAAE,MAAM,IAAI,CAAC;AAEjC,uBAAuB;AACvB,QAAA,MAAM,MAAM,EAAE,EAAE,CAAC,WAAW,CA8F3B,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/components/search/component/index.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useState } from "react";
-import { getClassName, isNullOrUndefined } from "@bodynarf/utils";
+import { getClassName } from "@bodynarf/utils";
 import { ElementSize } from "../../../types";
-import { mapDataAttributes } from "../../../utils";
+import { getSizeClassName, mapDataAttributes } from "../../../utils";
 import Button, { ButtonStyle } from "../../button";
 import "./style.scss";
 /** Search component */
@@ -20,22 +20,20 @@ const Search = ({ searchType, onSearch, caption, defaultValue = "", size = Eleme
         "bbr-search",
         "control",
         className,
-        `is-${size}`,
+        getSizeClassName(size),
         isLoading ? "is-loading" : "",
         searchType === "byButton" ? "is-expanded" : "",
     ]);
     const inputClassName = getClassName([
         "input",
         "is-unselectable",
-        `is-${size}`,
+        getSizeClassName(size),
         rounded ? "is-rounded" : "",
     ]);
-    const dataAttributes = isNullOrUndefined(data)
-        ? undefined
-        : mapDataAttributes(data);
+    const dataAttributes = mapDataAttributes(data);
     if (searchType === "byButton") {
-        return (_jsxs("div", { className: "field has-addons", children: [_jsx("div", { className: elClassName, children: _jsx("input", { type: "search", disabled: disabled, onChange: onChange, placeholder: caption, autoFocus: autoFocus, defaultValue: searchValue, className: inputClassName, title: title, ...dataAttributes }) }), _jsx("div", { className: "control", children: _jsx(Button, { size: size, disabled: disabled, isLoading: isLoading, style: ButtonStyle.Info, title: searchButtonTitle, caption: searchButtonCaption, onClick: onSearchButtonClick, className: rounded ? "is-rounded" : undefined }) })] }));
+        return (_jsxs("div", { className: "field has-addons", children: [_jsx("div", { className: elClassName, children: _jsx("input", { type: "search", title: title, disabled: disabled, onChange: onChange, ...dataAttributes, placeholder: caption, autoFocus: autoFocus, defaultValue: searchValue, className: inputClassName }) }), _jsx("div", { className: "control", children: _jsx(Button, { size: size, rounded: rounded, disabled: disabled, isLoading: isLoading, style: ButtonStyle.Info, title: searchButtonTitle, caption: searchButtonCaption, onClick: onSearchButtonClick }) })] }));
     }
-    return (_jsx("div", { className: elClassName, children: _jsx("input", { type: "search", disabled: disabled, onChange: onChange, placeholder: caption, autoFocus: autoFocus, defaultValue: searchValue, className: inputClassName, title: title, ...dataAttributes }) }));
+    return (_jsx("div", { className: elClassName, children: _jsx("input", { type: "search", title: title, disabled: disabled, onChange: onChange, ...dataAttributes, placeholder: caption, autoFocus: autoFocus, defaultValue: searchValue, className: inputClassName }) }));
 };
 export default Search;

package/components/search/types.d.ts

@@ -9,8 +9,6 @@ export type SearchProps = BaseElementProps & {
     searchType: "byTyping" | "byButton";
     /** Search caption */
     caption: string;
-    /** Search handler */
-    onSearch: (searchPattern: string) => void;
     /** Initial search value */
     defaultValue?: string;
     /** Size of search bar */
@@ -38,5 +36,7 @@ export type SearchProps = BaseElementProps & {
      * Visible only in `searchType = "byButton"`
      */
     searchButtonTitle?: string;
+    /** Search handler */
+    onSearch: (searchPattern: string) => void;
 };
 //# sourceMappingURL=types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/search/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAE3D,kCAAkC;AAClC,MAAM,MAAM,WAAW,GAAG,gBAAgB,GAAG;IACzC;;;;MAIE;IACF,UAAU,EAAE,UAAU,GAAG,UAAU,CAAC;IAEpC,qBAAqB;IACrB,OAAO,EAAE,MAAM,CAAC;IAEhB,qBAAqB;IACrB,QAAQ,EAAE,CAAC,aAAa,EAAE,MAAM,KAAK,IAAI,CAAC;IAE1C,2BAA2B;IAC3B,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB,yBAAyB;IACzB,IAAI,CAAC,EAAE,WAAW,CAAC;IAEnB,mCAAmC;IACnC,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,6BAA6B;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,qDAAqD;IACrD,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;;OAIG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAE7B;;;OAGG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC9B,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/search/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAE3D,kCAAkC;AAClC,MAAM,MAAM,WAAW,GAAG,gBAAgB,GAAG;IACzC;;;;MAIE;IACF,UAAU,EAAE,UAAU,GAAG,UAAU,CAAC;IAEpC,qBAAqB;IACrB,OAAO,EAAE,MAAM,CAAC;IAEhB,2BAA2B;IAC3B,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB,yBAAyB;IACzB,IAAI,CAAC,EAAE,WAAW,CAAC;IAEnB,mCAAmC;IACnC,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,6BAA6B;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,qDAAqD;IACrD,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;;OAIG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAE7B;;;OAGG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAE3B,qBAAqB;IACrB,QAAQ,EAAE,CAAC,aAAa,EAAE,MAAM,KAAK,IAAI,CAAC;CAC7C,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/table/component/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAM3B,OAAO,EAAE,UAAU,EAAE,MAAM,IAAI,CAAC;AAChC,OAAO,cAAc,CAAC;AAItB;;GAEG;AACH,QAAA,MAAM,KAAK,EAAE,EAAE,CAAC,UAAU,CAuDzB,CAAC;AAEF,eAAe,KAAK,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/table/component/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAM3B,OAAO,EAAE,UAAU,EAAE,MAAM,IAAI,CAAC;AAChC,OAAO,cAAc,CAAC;AAItB;;GAEG;AACH,QAAA,MAAM,KAAK,EAAE,EAAE,CAAC,UAAU,CAqDzB,CAAC;AAEF,eAAe,KAAK,CAAC"}

package/components/table/component/index.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { getClassName, isNullOrUndefined } from "@bodynarf/utils";
+import { getClassName } from "@bodynarf/utils";
 import { mapDataAttributes } from "../../../utils";
 import "./style.scss";
 import TableHeader from "../components/heading";
@@ -20,9 +20,7 @@ const Table = ({ headings, hasBorder = false, hoverable = false, narrow = false,
         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, { item: heading, onClick: onHeaderClick, sortColumn: currentSortColumn }, heading.name ?? i)) }) }), _jsx("tbody", { children: children })] }));
+    const dataAttributes = mapDataAttributes(data);
+    return (_jsxs("table", { title: title, ...dataAttributes, className: elClassName, children: [_jsx("thead", { children: _jsx("tr", { children: headings.map((heading, i) => _jsx(TableHeader, { item: heading, onClick: onHeaderClick, sortColumn: currentSortColumn }, heading.name ?? i)) }) }), _jsx("tbody", { children: children })] }));
 };
 export default Table;

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

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

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":"AAAA,OAAO,EAAwD,EAAE,EAAE,MAAM,OAAO,CAAC;AAOjF,OAAO,cAAc,CAAC;AAEtB,OAAO,EAAW,SAAS,EAAa,MAAM,IAAI,CAAC;AAGnD;;;GAGG;AACH,QAAA,MAAM,IAAI,EAAE,EAAE,CAAC,SAAS,CAsFvB,CAAC;AAEF,eAAe,IAAI,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/tabs/component/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAqC,EAAE,EAAE,MAAM,OAAO,CAAC;AAO9D,OAAO,cAAc,CAAC;AAEtB,OAAO,EAAW,SAAS,EAAa,MAAM,IAAI,CAAC;AAInD;;;GAGG;AACH,QAAA,MAAM,IAAI,EAAE,EAAE,CAAC,SAAS,CAyEvB,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/components/tabs/component/index.js

@@ -1,11 +1,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useCallback, useState, useEffect, useRef } from "react";
-import { getClassName, isNullOrEmpty, isNullOrUndefined } from "@bodynarf/utils";
+import { useCallback, useState } from "react";
+import { getClassName, isNullOrEmpty, isNullish } from "@bodynarf/utils";
 import { ElementPosition, ElementSize } from "../../../types";
-import { getPositionClassName, mapDataAttributes } from "../../../utils";
+import { getPositionClassName, getSizeClassName, mapDataAttributes } from "../../../utils";
 import "./style.scss";
 import { TabsStyle } from "..";
 import TabItemComponent from "../components/item";
+import { useMount } from "../../../hooks";
 /**
  * Tabs panel
  * @throws Items are empty
@@ -15,10 +16,9 @@ const Tabs = ({ items, onActiveItemChange, defaultActive = items[0], size, posit
         throw new Error("Invalid configuration. Tab items must be defined");
     }
     const [activeItem, setActiveItem] = useState(defaultActive);
-    const isFirstRun = useRef(true);
     const onTabsClick = useCallback((event) => {
         const closestTab = event.target.closest(".bbr-tabs__tab");
-        if (isNullOrUndefined(closestTab)) {
+        if (isNullish(closestTab)) {
             return;
         }
         const itemId = closestTab.attributes.getNamedItem("data-item-id")?.value ?? "";
@@ -26,43 +26,22 @@ const Tabs = ({ items, onActiveItemChange, defaultActive = items[0], size, posit
             return;
         }
         const item = items.find(({ id }) => id === itemId);
-        if (isNullOrUndefined(item) || item === activeItem) {
+        if (isNullish(item) || item === activeItem) {
             return;
         }
         setActiveItem(item);
     }, [activeItem, items]);
-    useEffect(() => {
-        if (isFirstRun.current) {
-            isFirstRun.current = false;
-            return;
-        }
-        onActiveItemChange(activeItem);
-    }, [activeItem, onActiveItemChange]);
+    useMount(() => onActiveItemChange(activeItem));
     const elClassName = getClassName([
         "bbr-tabs",
         "tabs",
         className,
         getPositionClassName(position),
-        getSizeClassName(size, [ElementSize.Normal]),
+        getSizeClassName(size, ElementSize.Normal),
         style,
         fullWidth ? "is-fullwidth" : "",
     ]);
-    const dataAttributes = isNullOrUndefined(data)
-        ? undefined
-        : mapDataAttributes(data);
-    return (_jsx("nav", { className: elClassName, title: title, ...dataAttributes, onClick: onTabsClick, children: _jsx("ul", { children: items.map(item => _jsx(TabItemComponent, { item: item, activeItem: activeItem.id }, item.id)) }) }));
+    const dataAttributes = mapDataAttributes(data);
+    return (_jsx("nav", { title: title, ...dataAttributes, onClick: onTabsClick, className: elClassName, children: _jsx("ul", { children: items.map(item => _jsx(TabItemComponent, { item: item, activeItem: activeItem.id }, item.id)) }) }));
 };
 export default Tabs;
-/**
- * Get class name for specified size and constraints
- * @param size Component size
- * @param notAllowedSizes Sizes that not applicable to component
- * @returns Class name for react element
- */
-const getSizeClassName = (size, notAllowedSizes) => {
-    notAllowedSizes ??= [];
-    if (isNullOrUndefined(size) || notAllowedSizes.includes(size)) {
-        return "";
-    }
-    return `is-${size}`;
-};

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":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAO3B,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,OAAO,CAAC;AAExC,sDAAsD;AACtD,MAAM,MAAM,YAAY,GAAG;IACvB,eAAe;IACf,IAAI,EAAE,IAAI,CAAC;IAEX,6BAA6B;IAC7B,UAAU,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,2CAA2C;AAC3C,QAAA,MAAM,OAAO,EAAE,EAAE,CAAC,YAAY,CA4B7B,CAAC;AAEF,eAAe,OAAO,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/tabs/components/item/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAO3B,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,OAAO,CAAC;AAExC,sDAAsD;AACtD,MAAM,MAAM,YAAY,GAAG;IACvB,eAAe;IACf,IAAI,EAAE,IAAI,CAAC;IAEX,6BAA6B;IAC7B,UAAU,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,2CAA2C;AAC3C,QAAA,MAAM,OAAO,EAAE,EAAE,CAAC,YAAY,CA6B7B,CAAC;AAEF,eAAe,OAAO,CAAC"}

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

@@ -1,10 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { getClassName, isNullOrUndefined } from "@bodynarf/utils";
+import { getClassName, isNotNullish } from "@bodynarf/utils";
 import { ElementPosition } from "../../../../types";
 import Icon from "../../../icon";
 /** Tabs panel single tab item component */
 const TabItem = ({ item, activeItem }) => {
-    if (!isNullOrUndefined(item.icon)) {
+    if (isNotNullish(item.icon)) {
         return (_jsx(TabItemWithIcon, { item: item, activeItem: activeItem }));
     }
     const className = getClassName([

package/components/tabs/types.d.ts

@@ -33,8 +33,6 @@ export interface TabItem {
 export interface TabsProps extends BaseElementProps {
     /** Tabs */
     items: Array<TabItem>;
-    /** Handler of changing current active item */
-    onActiveItemChange: (item: TabItem) => void;
     /**
      * Active item by default.
      * If not set - first item will be active
@@ -51,5 +49,7 @@ export interface TabsProps extends BaseElementProps {
     style?: TabsStyle;
     /** Is component tabs should take all width of parent */
     fullWidth?: boolean;
+    /** Handler of changing current active item */
+    onActiveItemChange: (item: TabItem) => void;
 }
 //# sourceMappingURL=types.d.ts.map

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,gBAAgB,EAAE,WAAW,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAEzF,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;AAED,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"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,WAAW,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAEzF,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;AAED,gCAAgC;AAChC,MAAM,WAAW,SAAU,SAAQ,gBAAgB;IAC/C,WAAW;IACX,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC;IAEtB;;;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;IAEpB,8CAA8C;IAC9C,kBAAkB,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;CAC/C"}

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":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAO3B,OAAO,EAAE,QAAQ,EAAE,MAAM,IAAI,CAAC;AAE9B,OAAO,cAAc,CAAC;AAEtB,sBAAsB;AACtB,QAAA,MAAM,GAAG,EAAE,EAAE,CAAC,QAAQ,CA+CrB,CAAC;AAEF,eAAe,GAAG,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/tag/component/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAO3B,OAAO,EAAE,QAAQ,EAAE,MAAM,IAAI,CAAC;AAE9B,OAAO,cAAc,CAAC;AAEtB,sBAAsB;AACtB,QAAA,MAAM,GAAG,EAAE,EAAE,CAAC,QAAQ,CA4CrB,CAAC;AAEF,eAAe,GAAG,CAAC"}

package/components/tag/component/index.js

@@ -1,32 +1,30 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { getClassName, isNullOrUndefined } from "@bodynarf/utils";
+import { getClassName, isNotNullish, isNullish } from "@bodynarf/utils";
 import { ElementColor, ElementSize } from "../../../types";
-import { mapDataAttributes } from "../../../utils";
+import { getElementColorClassName, getSizeClassName, 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, data, }) => {
-    if (!isNullOrUndefined(customColor)) {
+    if (isNotNullish(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" : "",
+        getElementColorClassName(style),
+        isNotNullish(customColor) ? "bbr-tag--custom" : "",
+        lightColor && isNullish(customColor) ? "is-light" : "",
         rounded ? "is-rounded" : "",
-        size === ElementSize.Normal ? "" : `is-${size}`,
-        isNullOrUndefined(onClick) ? "" : "bbr-tag--clickable",
+        getSizeClassName(size, ElementSize.Normal),
+        isNullish(onClick) ? "" : "is-clickable",
     ]);
-    const dataAttributes = isNullOrUndefined(data)
-        ? undefined
-        : mapDataAttributes(data);
-    return (_jsx("span", { className: elClassName, style: isNullOrUndefined(customColor)
+    const dataAttributes = mapDataAttributes(data);
+    return (_jsx("span", { title: title, onClick: onClick, ...dataAttributes, className: elClassName, style: isNullish(customColor)
             ? undefined
             : {
                 color: customColor?.color,
                 backgroundColor: customColor?.backgroundColor,
-            }, title: title, onClick: onClick, ...dataAttributes, children: content }));
+            }, children: content }));
 };
 export default Tag;

package/components/tag/component/style.scss

@@ -2,7 +2,7 @@
     border: 1px solid transparent;
     transition: border-color 0.15s ease-in-out;
 
-    &--clickable {
+    &.is-clickable {
         cursor: pointer;
 
         &.is-light {

package/hooks/useComponentOutsideClick.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useComponentOutsideClick.d.ts","sourceRoot":"","sources":["../../src/hooks/useComponentOutsideClick.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAA0B,MAAM,OAAO,CAAC;AAE/D,OAAO,EAA6B,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAEtE;;;;;;;GAOG;AACH,eAAO,MAAM,wBAAwB,GACjC,UAAU,MAAM,EAChB,sBAAsB,OAAO,EAC7B,mBAAmB,QAAQ,EAC3B,8BAA4B,EAC5B,eAAc,cAAmB,KAClC,IA4BF,CAAC"}
+{"version":3,"file":"useComponentOutsideClick.d.ts","sourceRoot":"","sources":["../../src/hooks/useComponentOutsideClick.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAA0B,MAAM,OAAO,CAAC;AAE/D,OAAO,EAAqB,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAE9D;;;;;;;GAOG;AACH,eAAO,MAAM,wBAAwB,GACjC,UAAU,MAAM,EAChB,sBAAsB,OAAO,EAC7B,mBAAmB,QAAQ,EAC3B,8BAA4B,EAC5B,eAAc,cAAmB,KAClC,IA6BF,CAAC"}

package/hooks/useComponentOutsideClick.js

@@ -1,5 +1,5 @@
 import { useCallback, useEffect } from "react";
-import { isNullOrUndefined, isNull } from "@bodynarf/utils";
+import { isNullish, isNull } from "@bodynarf/utils";
 /**
  * Subscribe to component outside click
  * @param selector Component root selector
@@ -12,7 +12,7 @@ export const useComponentOutsideClick = (selector, clickHandleCondition, clickHa
     const onDocumentClick = useCallback((event) => {
         if (clickHandleCondition) {
             const target = event.target;
-            if (isNullOrUndefined(target)) {
+            if (isNullish(target)) {
                 return;
             }
             const relatedComponent = target.closest(selector);
@@ -20,6 +20,7 @@ export const useComponentOutsideClick = (selector, clickHandleCondition, clickHa
                 clickHandleChange();
             }
         }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [clickHandleCondition, selector, clickHandleChange, dependencies]);
     useEffect(() => {
         if (clickListenCondition) {

package/hooks/useEventListener.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useEventListener.d.ts","sourceRoot":"","sources":["../../src/hooks/useEventListener.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;GAUG;AACH,eAAO,MAAM,gBAAgB,GAAI,CAAC,SAAS,MAAM,cAAc,EAC3D,OAAO,CAAC,EACR,SAAS,CAAC,CAAC,EAAE,cAAc,CAAC,CAAC,CAAC,KAAK,IAAI,EACvC,UAAS,MAAM,GAAG,QAAQ,GAAG,WAAoB,SAapD,CAAC"}
+{"version":3,"file":"useEventListener.d.ts","sourceRoot":"","sources":["../../src/hooks/useEventListener.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;GAUG;AACH,eAAO,MAAM,gBAAgB,GAAI,CAAC,SAAS,MAAM,cAAc,EAC3D,OAAO,CAAC,EACR,SAAS,CAAC,CAAC,EAAE,cAAc,CAAC,CAAC,CAAC,KAAK,IAAI,EACvC,UAAS,MAAM,GAAG,QAAQ,GAAG,WAAoB,SAkBpD,CAAC"}

package/hooks/useEventListener.js

@@ -17,7 +17,10 @@ export const useEventListener = (event, handler, element = window) => {
     }, [handler]);
     useEffect(() => {
         const eventListener = (e) => savedHandler.current(e);
-        element.addEventListener(event, eventListener);
-        return () => element.removeEventListener(event, eventListener);
+        if (element) {
+            element.addEventListener(event, eventListener);
+            return () => element.removeEventListener(event, eventListener);
+        }
+        return undefined;
     }, [event, element]);
 };

package/hooks/useMount.js

@@ -5,7 +5,7 @@ import { useEffect } from "react";
  * @param fn Function to be called only on the initial render of the component
  */
 export const useMount = (fn) => {
-    useEffect(fn, []);
+    useEffect(() => fn(), []);
 };
 /**
  * Executes the provided function only once during the component's initial render (mount) with unsubscribe

package/hooks/usePagination.d.ts

@@ -16,5 +16,5 @@ export interface PaginationState {
  * @param dependencies List of dependencies. On any dependency update current page will be set to 1
  * @returns Pair of hook-stored state and handler for slicing current page items
  */
-export declare const usePagination: (length: number, size?: number, initPage?: number, dependencies?: DependencyList) => [PaginationState, (data: Array<any>) => Array<any>];
+export declare const usePagination: (length: number, size?: number, initPage?: number, dependencies?: DependencyList) => [PaginationState, (data: Array<unknown>) => Array<unknown>];
 //# sourceMappingURL=usePagination.d.ts.map

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,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,GACtB,QAAQ,MAAM,EACd,OAAM,MAAwB,EAC9B,WAAU,MAAU,EACpB,eAAc,cAAmB,KAClC,CAAC,eAAe,EAAE,CAAC,IAAI,EAAE,KAAK,CAAC,GAAG,CAAC,KAAK,KAAK,CAAC,GAAG,CAAC,CAiCpD,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,GACtB,QAAQ,MAAM,EACd,OAAM,MAAwB,EAC9B,WAAU,MAAU,EACpB,eAAc,cAAmB,KAClC,CAAC,eAAe,EAAE,CAAC,IAAI,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK,KAAK,CAAC,OAAO,CAAC,CAiC5D,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@bodynarf/react.components",
-    "version": "1.13.4",
+    "version": "1.13.6",
     "author": {
         "name": "Artem",
         "email": "bodynar@gmail.com"
@@ -32,17 +32,17 @@
         "prep_dev": "copyfiles src/**/*.* demo/src/components"
     },
     "devDependencies": {
+        "@eslint/js": "^9.30.1",
         "@types/react": "^18.0.11",
         "@types/react-dom": "^18.0.5",
         "copyfiles": "^2.4.1",
-        "@eslint/js": "^9.30.1",
         "eslint": "^9.32.0",
         "eslint-plugin-import": "^2.32.0",
         "eslint-plugin-react": "^7.37.5",
         "eslint-plugin-react-hooks": "^5.2.0",
         "eslint-plugin-react-refresh": "^0.4.20",
-        "tsc-alias": "^1.8.6",
         "react": ">=18.1.0",
+        "tsc-alias": "^1.8.6",
         "typescript": "~5.8.3",
         "typescript-eslint": "^8.35.1"
     },