@bodynarf/react.components 1.1.4 → 1.2.0

package/components/anchor/components/anchorWithIcon/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { AnchorWithIconProps } from "../../types";
 /** Anchor with icon component */
 export declare const AnchorWithIcon: ({ href, className, onClick, caption, title, target, icon }: AnchorWithIconProps) => JSX.Element;

package/components/anchor/components/anchorWithIcon/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/anchor/components/anchorWithIcon/index.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAElD,iCAAiC;AACjC,eAAO,MAAM,cAAc,+DAAgE,mBAAmB,KAAG,WAqChH,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/anchor/components/anchorWithIcon/index.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAElD,iCAAiC;AACjC,eAAO,MAAM,cAAc,+DAAgE,mBAAmB,KAAG,WAqChH,CAAC"}

package/components/anchor/components/anchorWithIcon/index.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import utils from '@bodynarf/utils';
+import { isNullOrEmpty } from '@bodynarf/utils';
 import Icon from '../../../icon';
 /** Anchor with icon component */
 export const AnchorWithIcon = ({ href, className, onClick, caption, title, target, icon }) => {
     const iconPosition = icon.position || 'left';
-    const iconClassName = utils.isNullOrEmpty(caption)
+    const iconClassName = isNullOrEmpty(caption)
         ? icon.className
         : iconPosition === 'left'
             ? `${icon.className} app-icon--left`

package/components/anchor/index.js

@@ -1,17 +1,17 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import utils from '@bodynarf/utils';
+import { isNullOrUndefined, isNullOrEmpty } from '@bodynarf/utils';
 import './anchor.scss';
 import { SimpleAnchor } from './components/simpleAnchor';
 import { AnchorWithIcon } from './components/anchorWithIcon';
 /** Anchor component */
 export default function Anchor(props) {
-    if (utils.isNullOrUndefined(props.caption) && utils.isNullOrUndefined(props.icon)) {
+    if (isNullOrUndefined(props.caption) && isNullOrUndefined(props.icon)) {
         throw new Error("No anchor content provided");
     }
     const className = 'app-anchor'
-        + (!utils.isNullOrEmpty(props.className) ? ` ${props.className}` : '')
+        + (!isNullOrEmpty(props.className) ? ` ${props.className}` : '')
         + (props.disableHovering === true ? ' app-anchor--unhoverable' : '');
-    if (utils.isNullOrUndefined(props.icon)) {
+    if (isNullOrUndefined(props.icon)) {
         return (_jsx(SimpleAnchor, { ...props, className: className, onClick: props.onClick }));
     }
     return (_jsx(AnchorWithIcon, { ...props, className: className, onClick: props.onClick, icon: props.icon }));

package/components/button/components/buttonWithIcon/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { ButtonWithIconProps } from '../../types';
 /** Button with icon component */
 export declare const ButtonWithIcon: ({ className, disabled, onClick, caption, title, icon }: ButtonWithIconProps) => JSX.Element;

package/components/button/components/buttonWithIcon/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/button/components/buttonWithIcon/index.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAElD,iCAAiC;AACjC,eAAO,MAAM,cAAc,2DAA4D,mBAAmB,KAAG,WAsC5G,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/button/components/buttonWithIcon/index.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAElD,iCAAiC;AACjC,eAAO,MAAM,cAAc,2DAA4D,mBAAmB,KAAG,WAsC5G,CAAC"}

package/components/button/components/buttonWithIcon/index.js

@@ -1,15 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import utils from '@bodynarf/utils';
+import { isNullOrEmpty } from '@bodynarf/utils';
 import Icon from '../../../icon';
 /** Button with icon component */
 export const ButtonWithIcon = ({ className, disabled, onClick, caption, title, icon }) => {
     const iconPosition = icon.position || 'left';
-    const iconClassName = utils.isNullOrEmpty(caption)
+    const iconClassName = isNullOrEmpty(caption)
         ? icon.className
         : iconPosition === 'left'
             ? `${icon.className} app-icon--left`
             : `${icon.className} app-icon--right`;
-    className = utils.isNullOrEmpty(caption)
+    className = isNullOrEmpty(caption)
         ? `${className} button--icon-only`
         : className;
     if (iconPosition === 'left') {

package/components/button/index.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import './button.scss';
-import { ElementIcon, IconSize } from '../types';
+import { ElementIcon, ElementSize } from '../types';
 import { ButtonType } from './types';
 export declare type ButtonProps = {
     /** Button displaying text */
@@ -10,7 +10,7 @@ export declare type ButtonProps = {
     /** Configuration of inner icon */
     icon?: ElementIcon;
     /** Button size  */
-    size?: IconSize;
+    size?: ElementSize;
     /** Title on hover */
     title?: string;
     /** Is button uses light version of color  */

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/button/index.tsx"],"names":[],"mappings":";AAEA,OAAO,eAAe,CAAC;AAEvB,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AAEjD,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAIrC,oBAAY,WAAW,GAAG;IACtB,6BAA6B;IAC7B,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB,8BAA8B;IAC9B,IAAI,EAAE,UAAU,CAAC;IAEjB,kCAAkC;IAClC,IAAI,CAAC,EAAE,WAAW,CAAC;IAEnB,mBAAmB;IACnB,IAAI,CAAC,EAAE,QAAQ,CAAC;IAEhB,qBAAqB;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,6CAA6C;IAC7C,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB,yBAAyB;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,wCAAwC;IACxC,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,2BAA2B;IAC3B,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,yBAAyB;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,2BAA2B;IAC3B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB,CAAC;AAEF;;;GAGG;AACH,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,KAAK,EAAE,WAAW,GAAG,GAAG,CAAC,OAAO,CAiC9D"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/button/index.tsx"],"names":[],"mappings":";AAEA,OAAO,eAAe,CAAC;AAEvB,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAEpD,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAIrC,oBAAY,WAAW,GAAG;IACtB,6BAA6B;IAC7B,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB,8BAA8B;IAC9B,IAAI,EAAE,UAAU,CAAC;IAEjB,kCAAkC;IAClC,IAAI,CAAC,EAAE,WAAW,CAAC;IAEnB,mBAAmB;IACnB,IAAI,CAAC,EAAE,WAAW,CAAC;IAEnB,qBAAqB;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,6CAA6C;IAC7C,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB,yBAAyB;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,wCAAwC;IACxC,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,2BAA2B;IAC3B,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,yBAAyB;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,2BAA2B;IAC3B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB,CAAC;AAEF;;;GAGG;AACH,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,KAAK,EAAE,WAAW,GAAG,GAAG,CAAC,OAAO,CAkC9D"}

package/components/button/index.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import utils from '@bodynarf/utils';
+import { isNullOrEmpty, isStringEmpty, isNullOrUndefined, getClassName } from '@bodynarf/utils';
 import './button.scss';
 import { ButtonWithIcon } from './components/buttonWithIcon';
 import { SimpleButton } from './components/simpleButton';
@@ -8,17 +8,19 @@ import { SimpleButton } from './components/simpleButton';
  * @throws Caption is not defined and icon configuration is not defined at the same time
  */
 export default function Button(props) {
-    if ((utils.isNullOrEmpty(props.caption))
-        && (utils.isNullOrUndefined(props.icon) || utils.isStringEmpty(props.icon?.className))) {
+    if ((isNullOrEmpty(props.caption))
+        && (isNullOrUndefined(props.icon) || isStringEmpty(props.icon?.className))) {
         throw new Error("No button content provided.");
     }
-    const className = `button is-${props.type}`
-        + (props.light === true ? ' is-light' : '')
-        + (!utils.isNullOrUndefined(props.size) ? ` is-${props.size}` : '')
-        + (props.outlined === true ? ' is-outlined' : '')
-        + (props.rounded === true ? ' is-rounded' : '')
-        + (props.isLoading === true ? ' is-loading' : '');
-    if (!utils.isNullOrUndefined(props.icon)) {
+    const className = getClassName([
+        `button is-${props.type}`,
+        props.light === true ? 'is-light' : '',
+        !isNullOrUndefined(props.size) ? `is-${props.size}` : '',
+        props.outlined === true ? 'is-outlined' : '',
+        props.rounded === true ? 'is-rounded' : '',
+        props.isLoading === true ? 'is-loading' : '',
+    ]);
+    if (!isNullOrUndefined(props.icon)) {
         return (_jsx(ButtonWithIcon, { ...props, className: className, onClick: props.onClick, icon: props.icon }));
     }
     else {

package/components/dropdown/components/dropdownLabel/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/dropdown/components/dropdownLabel/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAMnC,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAE7C,UAAU,kBAAkB;IACxB,qCAAqC;IACrC,OAAO,EAAE,MAAM,CAAC;IAEhB,wBAAwB;IACxB,YAAY,EAAE,OAAO,CAAC;IAEtB,oBAAoB;IACpB,YAAY,CAAC,EAAE,cAAc,CAAC;IAE9B,mBAAmB;IACnB,OAAO,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;CAC1D;AAED,sBAAsB;AACtB,QAAA,MAAM,aAAa,qDAAsD,kBAAkB,KAAG,WAkC7F,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/dropdown/components/dropdownLabel/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAMnC,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAE7C,UAAU,kBAAkB;IACxB,qCAAqC;IACrC,OAAO,EAAE,MAAM,CAAC;IAEhB,wBAAwB;IACxB,YAAY,EAAE,OAAO,CAAC;IAEtB,oBAAoB;IACpB,YAAY,CAAC,EAAE,cAAc,CAAC;IAE9B,mBAAmB;IACnB,OAAO,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;CAC1D;AAED,sBAAsB;AACtB,QAAA,MAAM,aAAa,qDAAsD,kBAAkB,KAAG,WAiC7F,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/components/dropdown/components/dropdownLabel/index.js

@@ -1,20 +1,19 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import utils from "@bodynarf/utils";
+import { getClassName, isNullOrUndefined } from "@bodynarf/utils";
 import Icon from '../../../icon';
 /** Label component */
 const DropdownLabel = ({ caption, selectedItem, onClick, deselectable }) => {
-    const itemSelected = !utils.isNullOrUndefined(selectedItem);
+    const itemSelected = !isNullOrUndefined(selectedItem);
     const text = itemSelected
         ? selectedItem?.displayValue
         : caption;
     const deselectVisible = deselectable && itemSelected;
-    const className = [
+    const className = getClassName([
         "dropdown-trigger",
         "app-dropdown__label",
         itemSelected ? "" : "app-dropdown__label--default",
         "button"
-    ].filter(x => !utils.isNullOrEmpty(x))
-        .join(" ");
+    ]);
     return (_jsxs("label", { className: className, onClick: onClick, children: [deselectVisible &&
                 _jsx(Icon, { className: "plus-lg" }), _jsx("span", { className: deselectVisible ? "mx-2" : "mr-2", title: itemSelected ? text : undefined, children: text }), _jsx(Icon, { className: "arrow-up" })] }));
 };

package/components/dropdown/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import './dropdown.scss';
 import { SelectableItem } from './types';
 import { BaseElementProps } from '../types';

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/dropdown/index.tsx"],"names":[],"mappings":";AAIA,OAAO,iBAAiB,CAAC;AAIzB,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AACzC,OAAO,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAK5C,oBAAY,aAAa,GAAG,gBAAgB,GAAG;IAC3C,kCAAkC;IAClC,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,CAAC;IAE7B;;;MAGE;IACF,KAAK,CAAC,EAAE,cAAc,CAAC;IAEvB;;;OAGG;IACH,QAAQ,EAAE,CAAC,IAAI,CAAC,EAAE,cAAc,KAAK,IAAI,CAAC;IAE1C;;;OAGG;IACH,OAAO,EAAE,MAAM,CAAC;IAEhB,gEAAgE;IAChE,gBAAgB,EAAE,OAAO,CAAC;IAE1B,wBAAwB;IACxB,YAAY,CAAC,EAAE,OAAO,CAAC;CAC1B,CAAA;AAED,yBAAyB;AACzB,QAAA,MAAM,QAAQ,mFAAoF,aAAa,KAAG,WA6FjH,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/dropdown/index.tsx"],"names":[],"mappings":"AAIA,OAAO,iBAAiB,CAAC;AAIzB,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AACzC,OAAO,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAK5C,oBAAY,aAAa,GAAG,gBAAgB,GAAG;IAC3C,kCAAkC;IAClC,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,CAAC;IAE7B;;;MAGE;IACF,KAAK,CAAC,EAAE,cAAc,CAAC;IAEvB;;;OAGG;IACH,QAAQ,EAAE,CAAC,IAAI,CAAC,EAAE,cAAc,KAAK,IAAI,CAAC;IAE1C;;;OAGG;IACH,OAAO,EAAE,MAAM,CAAC;IAEhB,gEAAgE;IAChE,gBAAgB,EAAE,OAAO,CAAC;IAE1B,wBAAwB;IACxB,YAAY,CAAC,EAAE,OAAO,CAAC;CAC1B,CAAA;AAED,yBAAyB;AACzB,QAAA,MAAM,QAAQ,mFAAoF,aAAa,KAAG,WA2FjH,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/components/dropdown/index.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useId, useState } from 'react';
-import utils from '@bodynarf/utils';
+import { isNullOrUndefined, isNullOrEmpty, getClassName } from '@bodynarf/utils';
 import './dropdown.scss';
 import { useComponentOutsideClick } from '../../hooks/useComponentOutsideClick';
 import DropdownItem from './components/dropdownItem';
@@ -11,15 +11,15 @@ const Dropdown = ({ value, items, onSelect, caption, deselectable, className, hi
     const [isListVisible, setListVisible] = useState(false);
     const onItemClick = useCallback((event) => {
         const target = event.target;
-        if (utils.isNullOrUndefined(target)) {
+        if (isNullOrUndefined(target)) {
             return;
         }
         const dataValue = target.dataset['dropdownItemValue'];
-        if (utils.isNullOrEmpty(dataValue)) {
+        if (isNullOrEmpty(dataValue)) {
             return;
         }
         const item = items.find(x => x.value === dataValue);
-        if (utils.isNullOrUndefined(item)) {
+        if (isNullOrUndefined(item)) {
             return;
         }
         if (value === item) {
@@ -31,7 +31,7 @@ const Dropdown = ({ value, items, onSelect, caption, deselectable, className, hi
     }, [setListVisible, value, items, onSelect]);
     const onLabelClick = useCallback((event) => {
         const target = event.target;
-        if (utils.isNullOrUndefined(target)) {
+        if (isNullOrUndefined(target)) {
             return;
         }
         if (target.classList.contains("bi-plus-lg")) {
@@ -42,14 +42,12 @@ const Dropdown = ({ value, items, onSelect, caption, deselectable, className, hi
         }
     }, [onSelect, setListVisible]);
     useComponentOutsideClick(`[data-dropdown-id="${id}"]`, isListVisible, () => setListVisible(false), hideOnOuterClick);
-    const classNames = [
+    const classNames = getClassName([
         "app-dropdown",
         isListVisible ? "is-active" : "",
         className,
         "dropdown"
-    ]
-        .filter(x => !utils.isNullOrEmpty(x))
-        .join(" ");
+    ]);
     return (_jsxs("div", { className: classNames, "data-dropdown-id": id, children: [_jsx(DropdownLabel, { caption: caption, deselectable: deselectable === true, selectedItem: value, onClick: onLabelClick }), _jsx("div", { className: "dropdown-menu", children: items.length > 0
                     ? _jsx("ul", { className: "dropdown-content", children: items.map(item => _jsx(DropdownItem, { item: item, selected: value?.value === item.value, onClick: onItemClick }, item.id)) })
                     : _jsx("span", { className: "dropdown-content dropdown-item", children: "No items found" }) })] }, id));

package/components/icon/index.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import './icon.scss';
-import { IconSize } from '../types';
+import { ElementSize } from '../types';
 /** Icon component props */
 export declare type IconProps = {
     /**
@@ -9,7 +9,7 @@ export declare type IconProps = {
     */
     className: string;
     /** Icon size */
-    size?: IconSize;
+    size?: ElementSize;
 };
 /**
  * Icon component. Based on bootstrap icons

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/icon/index.tsx"],"names":[],"mappings":";AAAA,OAAO,aAAa,CAAC;AAErB,OAAO,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AAEpC,2BAA2B;AAC3B,oBAAY,SAAS,GAAG;IACpB;;;MAGE;IACF,SAAS,EAAE,MAAM,CAAC;IAElB,gBAAgB;IAChB,IAAI,CAAC,EAAE,QAAQ,CAAC;CACnB,CAAA;AAQD;;GAEG;AACH,MAAM,CAAC,OAAO,UAAU,IAAI,CAAC,KAAK,EAAE,SAAS,GAAG,GAAG,CAAC,OAAO,CAQ1D"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/icon/index.tsx"],"names":[],"mappings":";AAAA,OAAO,aAAa,CAAC;AAErB,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAEvC,2BAA2B;AAC3B,oBAAY,SAAS,GAAG;IACpB;;;MAGE;IACF,SAAS,EAAE,MAAM,CAAC;IAElB,gBAAgB;IAChB,IAAI,CAAC,EAAE,WAAW,CAAC;CACtB,CAAA;AAQD;;GAEG;AACH,MAAM,CAAC,OAAO,UAAU,IAAI,CAAC,KAAK,EAAE,SAAS,GAAG,GAAG,CAAC,OAAO,CAQ1D"}

package/components/paginator/index.d.ts

@@ -0,0 +1,29 @@
+/// <reference types="react" />
+import { ElementSize } from '../types';
+export declare type PaginatorProps = {
+    /** Amount of pages */
+    count: number;
+    /** Page change handler */
+    onPageChange: (page: number) => void;
+    /** Current page. Starts from 1 */
+    currentPage?: number;
+    /**
+     * Page numbers position.
+     * Usefull with showNextButtons = true
+    */
+    position?: 'left' | 'center' | 'right';
+    /** Buttons should have rounded borders */
+    rounded?: boolean;
+    /** Size of paginator component elements */
+    size?: ElementSize;
+    /** Additional class names */
+    className?: string;
+    /** Display "Previous" \ "Next" buttons */
+    showNextButtons?: boolean;
+};
+/**
+ * Paginator component.
+ * Used for visualization of pagging configuration
+*/
+export default function Paginator({ count, onPageChange, currentPage, position, rounded, size, className, showNextButtons, }: PaginatorProps): JSX.Element;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/paginator/index.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAIvC,oBAAY,cAAc,GAAG;IACzB,sBAAsB;IACtB,KAAK,EAAE,MAAM,CAAC;IAEd,0BAA0B;IAC1B,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAErC,kCAAkC;IAClC,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;MAGE;IACF,QAAQ,CAAC,EACP,MAAM,GACN,QAAQ,GACR,OAAO,CACR;IAED,0CAA0C;IAC1C,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,2CAA2C;IAC3C,IAAI,CAAC,EAAE,WAAW,CAAC;IAEnB,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,0CAA0C;IAC1C,eAAe,CAAC,EAAE,OAAO,CAAC;CAC7B,CAAA;AAED;;;EAGE;AACF,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,EAC9B,KAAK,EAAE,YAAY,EAAE,WAAW,EAChC,QAAQ,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAClC,eAAe,GAClB,EAAE,cAAc,GAAG,GAAG,CAAC,OAAO,CA4G9B"}

package/components/paginator/index.js

@@ -0,0 +1,47 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useMemo } from 'react';
+import { getClassName, isNullOrEmpty } from '@bodynarf/utils';
+import { generatePageNumbers } from './utils';
+/**
+ * Paginator component.
+ * Used for visualization of pagging configuration
+*/
+export default function Paginator({ count, onPageChange, currentPage, position, rounded, size, className, showNextButtons, }) {
+    const page = currentPage || 0;
+    const pageChange = useCallback((event) => {
+        const target = event.target;
+        const pageRaw = target.dataset['page'];
+        if (isNullOrEmpty(pageRaw)) {
+            return;
+        }
+        const page = +pageRaw;
+        if (page !== currentPage
+            && page > 0 && page <= count) {
+            onPageChange(page);
+        }
+    }, [onPageChange, currentPage, count]);
+    const pageNumbers = useMemo(() => generatePageNumbers(page, count), [page, count]);
+    const canGoBack = useMemo(() => page > 1, [page]);
+    const canGoForward = useMemo(() => page < count, [page, count]);
+    if (pageNumbers.length === 0) {
+        return _jsx(_Fragment, {});
+    }
+    const classNames = getClassName([
+        "pagination",
+        paginationPositionToClassMap.has(position || "") ? paginationPositionToClassMap.get(position || "") : "",
+        rounded == true ? "is-rounded" : "",
+        isNullOrEmpty(size) ? "" : `is-${size}`,
+        className
+    ]);
+    return (_jsxs("nav", { className: classNames, role: "navigation", "aria-label": "pagination", children: [showNextButtons === true &&
+                _jsxs(_Fragment, { children: [_jsx("a", { className: `pagination-previous${canGoBack ? "" : " is-disabled"}`, "data-page": page - 1, onClick: pageChange, children: "Previous" }), _jsx("a", { className: `pagination-next${canGoForward ? "" : " is-disabled"}`, "data-page": page + 1, onClick: pageChange, children: "Next page" })] }), _jsxs("ul", { className: "pagination-list", children: [page !== 1 && !pageNumbers.includes(1) &&
+                        _jsxs(_Fragment, { children: [_jsx("li", { children: _jsx("a", { className: "pagination-link", "aria-label": "Goto page 1", "data-page": 1, onClick: pageChange, children: "1" }) }), _jsx("li", { children: _jsx("span", { className: "pagination-ellipsis", children: "\u2026" }) })] }), pageNumbers.map(x => _jsx("li", { children: _jsx("a", { className: `pagination-link${page === x ? " is-current" : ""}`, "aria-label": `Goto page ${x}`, "data-page": x, onClick: pageChange, children: x }) }, x)), page != count && !pageNumbers.includes(count) &&
+                        _jsxs(_Fragment, { children: [_jsx("li", { children: _jsx("span", { className: "pagination-ellipsis", children: "\u2026" }) }), _jsx("li", { children: _jsx("a", { className: "pagination-link", "aria-label": `Goto page ${count}`, "data-page": count, onClick: pageChange, children: count }) })] })] })] }));
+}
+/**
+ * Position setting to css class name map
+ */
+const paginationPositionToClassMap = new Map([
+    ["center", "is-centered"],
+    ["right", "is-right"]
+]);

package/components/paginator/utils.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Get nearest numbers from each side (left & right)
+ * @param page Number of current page
+ * @param count Amount of pages
+ * @param size Amount of pages from left & right to current page. Default is 3
+ * @throws Current page is greater than pages amount
+ * @returns Array of nearest numbers to current page
+ */
+export declare const generatePageNumbers: (page: number, count: number, size?: number) => Array<number>;
+//# sourceMappingURL=utils.d.ts.map

package/components/paginator/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/components/paginator/utils.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,eAAO,MAAM,mBAAmB,SAAU,MAAM,SAAS,MAAM,SAAQ,MAAM,KAAO,MAAM,MAAM,CAU/F,CAAC"}

package/components/paginator/utils.js

@@ -0,0 +1,18 @@
+/**
+ * Get nearest numbers from each side (left & right)
+ * @param page Number of current page
+ * @param count Amount of pages
+ * @param size Amount of pages from left & right to current page. Default is 3
+ * @throws Current page is greater than pages amount
+ * @returns Array of nearest numbers to current page
+ */
+export const generatePageNumbers = (page, count, size = 3) => {
+    if (page < 0 || count <= 0 || page > count || size > count) {
+        throw new Error("getPageNumbers has ivalid config");
+    }
+    return [
+        ...new Array(size).fill(page).map((_, i) => page - i - 1).filter(x => x > 0 && x < page).reverse(),
+        page,
+        ...new Array(size).fill(page).map((_, i) => page + i + 1).filter(x => x > 0 && x > page && x <= count)
+    ];
+};

package/components/primitives/date/index.js

@@ -1,22 +1,22 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback } from 'react';
-import utils from '@bodynarf/utils';
+import { generateGuid, getClassName, isStringEmpty } from '@bodynarf/utils';
 /** Date input component */
 const DatePicker = (props) => {
-    const onValueChange = useCallback((event) => props.onValueChange(utils.isStringEmpty(event.target.value)
+    const onValueChange = useCallback((event) => props.onValueChange(isStringEmpty(event.target.value)
         ? undefined
         : new Date(event.target.value)), 
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [props.onValueChange]);
-    const id = props.name || utils.generateGuid();
+    const id = props.name || generateGuid();
     const size = `is-${(props.size || 'normal')}`;
-    const className = utils.getClassName([
+    const className = getClassName([
         props.className,
         size,
         props.rounded === true ? 'is-rounded' : '',
         "input",
     ]);
-    const inputContainerClassName = utils.getClassName([
+    const inputContainerClassName = getClassName([
         "control",
         props.loading === true ? 'is-loading' : '',
         (props.style || 'default') === 'default' ? '' : `is-${props.style}`

package/components/primitives/multiline/components/multilineWithLabel/index.js

@@ -1,21 +1,21 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback } from 'react';
-import utils from '@bodynarf/utils';
+import { generateGuid, getClassName } from '@bodynarf/utils';
 /** Multiline textual input component with describing label */
 const MultilineWithLabel = (props) => {
     const onValueChange = useCallback((event) => props.onValueChange(event.target.value), 
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [props.onValueChange]);
-    const id = props.name || utils.generateGuid();
+    const id = props.name || generateGuid();
     const size = `is-${(props.size || 'normal')}`;
-    const className = utils.getClassName([
+    const className = getClassName([
         props.className,
         size,
         props.rounded === true ? 'is-rounded' : '',
         "textarea",
         props.fixed === true ? 'has-fixed-size' : '',
     ]);
-    const inputContainerClassName = utils.getClassName([
+    const inputContainerClassName = getClassName([
         "control",
         props.loading === true ? 'is-loading' : '',
         (props.style || 'default') === 'default' ? '' : `is-${props.style}`

package/components/primitives/multiline/components/multilineWithoutLabel/index.js

@@ -1,21 +1,21 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useCallback } from 'react';
-import utils from '@bodynarf/utils';
+import { generateGuid, getClassName } from '@bodynarf/utils';
 /** Multiline textual input component without describing label*/
 const MultilineWithoutLabel = (props) => {
     const onValueChange = useCallback((event) => props.onValueChange(event.target.value), 
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [props.onValueChange]);
-    const id = props.name || utils.generateGuid();
+    const id = props.name || generateGuid();
     const size = `is-${(props.size || 'normal')}`;
-    const className = utils.getClassName([
+    const className = getClassName([
         props.className,
         size,
         props.rounded === true ? 'is-rounded' : '',
         "textarea",
         props.fixed === true ? 'has-fixed-size' : '',
     ]);
-    const inputContainerClassName = utils.getClassName([
+    const inputContainerClassName = getClassName([
         "control",
         props.loading === true ? 'is-loading' : '',
         (props.style || 'default') === 'default' ? '' : `is-${props.style}`

package/components/primitives/multiline/index.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import utils from '@bodynarf/utils';
+import { isNullOrUndefined } from '@bodynarf/utils';
 import MultilineWithoutLabel from './components/multilineWithoutLabel';
 import MultilineWithLabel from './components/multilineWithLabel';
 /** Multiline textual input component */
 const Multiline = (props) => {
-    if (utils.isNullOrUndefined(props.label)) {
+    if (isNullOrUndefined(props.label)) {
         return (_jsx(MultilineWithoutLabel, { ...props }));
     }
     else {

package/components/primitives/text/components/textWithLabel/index.js

@@ -1,20 +1,20 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback } from 'react';
-import utils from '@bodynarf/utils';
+import { generateGuid, getClassName, } from '@bodynarf/utils';
 /** Textual input with describing label */
 const TextWithLabel = (props) => {
     const onValueChange = useCallback((event) => props.onValueChange(event.target.value), 
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [props.onValueChange]);
-    const id = props.name || utils.generateGuid();
+    const id = props.name || generateGuid();
     const size = `is-${(props.size || 'normal')}`;
-    const className = utils.getClassName([
+    const className = getClassName([
         props.className,
         size,
         props.rounded === true ? 'is-rounded' : '',
         "input",
     ]);
-    const inputContainerClassName = utils.getClassName([
+    const inputContainerClassName = getClassName([
         "control",
         props.loading === true ? 'is-loading' : '',
         (props.style || 'default') === 'default' ? '' : `is-${props.style}`

package/components/primitives/text/components/textWithoutLabel/index.js

@@ -1,24 +1,24 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useCallback } from 'react';
-import utils from '@bodynarf/utils';
+import { generateGuid, getClassName } from '@bodynarf/utils';
 /** Textual input without describing label */
 const TextWithoutLabel = (props) => {
     const onValueChange = useCallback((event) => props.onValueChange(event.target.value), 
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [props.onValueChange]);
-    const className = utils.getClassName([
+    const className = getClassName([
         props.className,
         `is-${(props.size || 'normal')}`,
         props.rounded === true ? 'is-rounded' : '',
         "input",
     ]);
-    const containerClassName = utils.getClassName([
+    const containerClassName = getClassName([
         "app-input",
         "control",
         props.loading === true ? 'is-loading' : '',
         (props.style || 'default') === 'default' ? '' : `is-${props.style}`
     ]);
-    const id = props.name || utils.generateGuid();
+    const id = props.name || generateGuid();
     return (_jsx("div", { className: containerClassName, children: _jsx("input", { className: className, type: "text", placeholder: props.placeholder, readOnly: props.readonly, disabled: props.disabled, defaultValue: props.defaultValue, onChange: onValueChange, name: id, id: id }) }));
 };
 export default TextWithoutLabel;

package/components/primitives/text/index.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import utils from '@bodynarf/utils';
+import { isNullOrUndefined } from '@bodynarf/utils';
 import TextWithLabel from './components/textWithLabel';
 import TextWithoutLabel from './components/textWithoutLabel';
 /** Textual input component */
 const Text = (props) => {
-    if (utils.isNullOrUndefined(props.label)) {
+    if (isNullOrUndefined(props.label)) {
         return (_jsx(TextWithoutLabel, { ...props }));
     }
     else {

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/search/index.tsx"],"names":[],"mappings":";AAIA,OAAO,eAAe,CAAC;AAIvB,oBAAY,WAAW,GAAG;IACtB,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;;;;MAIE;IACF,UAAU,CAAC,EAAE,UAAU,GAAG,UAAU,CAAC;IAErC,+DAA+D;IAC/D,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,6CAA6C;IAC7C,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B,yBAAyB;IACzB,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;IAE/C,mCAAmC;IACnC,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,6BAA6B;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,oDAAoD;IACpD,SAAS,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AAEF,uBAAuB;AACvB,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,KAAK,EAAE,WAAW,GAAG,GAAG,CAAC,OAAO,CAgF9D"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/search/index.tsx"],"names":[],"mappings":";AAIA,OAAO,eAAe,CAAC;AAIvB,oBAAY,WAAW,GAAG;IACtB,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;;;;MAIE;IACF,UAAU,CAAC,EAAE,UAAU,GAAG,UAAU,CAAC;IAErC,+DAA+D;IAC/D,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,6CAA6C;IAC7C,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B,yBAAyB;IACzB,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;IAE/C,mCAAmC;IACnC,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,6BAA6B;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,oDAAoD;IACpD,SAAS,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AAEF,uBAAuB;AACvB,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,KAAK,EAAE,WAAW,GAAG,GAAG,CAAC,OAAO,CA+E9D"}

package/components/search/index.js

@@ -1,17 +1,17 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useState } from 'react';
-import utils from '@bodynarf/utils';
+import { generateGuid, getClassName, isNullOrUndefined } from '@bodynarf/utils';
 import './search.scss';
 import Button from '../button';
 /** Search component */
 export default function Search(props) {
-    const [name] = useState(props.name || utils.generateGuid());
+    const [name] = useState(props.name || generateGuid());
     const [searchValue, setSearchValue] = useState(props.defaultValue || '');
     const searchType = props.searchType || 'byTyping';
     const onChange = useCallback((event) => {
         const elementValue = event.target.value;
         if (searchType === 'byTyping') {
-            const minCharsToSearch = utils.isNullOrUndefined(props.minCharsToSearch)
+            const minCharsToSearch = isNullOrUndefined(props.minCharsToSearch)
                 ? 3
                 : props.minCharsToSearch;
             if (elementValue.length >= minCharsToSearch) {
@@ -20,16 +20,18 @@ export default function Search(props) {
         }
         setSearchValue(elementValue);
     }, [props, searchType]);
-    const onSearchButtonClick = useCallback(() => {
-        props.onSearch(searchValue);
-    }, [props, searchValue]);
-    const className = 'app-search control'
-        + ` is-${(props.size || 'normal')}`
-        + (props.isLoading === true ? ' is-loading' : '')
-        + (searchType === 'byButton' ? ' is-expanded' : '');
-    const inputClassName = 'input is-unselectable'
-        + ` is-${(props.size || 'normal')}`
-        + (props.rounded === true ? ' is-rounded' : '');
+    const onSearchButtonClick = useCallback(() => props.onSearch(searchValue), [props, searchValue]);
+    const className = getClassName([
+        'app-search control',
+        `is-${(props.size || 'normal')}`,
+        props.isLoading === true ? 'is-loading' : '',
+        searchType === 'byButton' ? 'is-expanded' : '',
+    ]);
+    const inputClassName = getClassName([
+        'input is-unselectable',
+        `is-${(props.size || 'normal')}`,
+        props.rounded === true ? 'is-rounded' : '',
+    ]);
     if (searchType === 'byButton') {
         return (_jsxs("div", { className: "field has-addons", children: [_jsx("div", { className: className, children: _jsx("input", { type: 'search', name: name, defaultValue: searchValue, className: inputClassName, disabled: props.disabled, onChange: onChange, placeholder: props.caption }) }), _jsx("div", { className: "control", children: _jsx(Button, { caption: "Search", type: "info", onClick: onSearchButtonClick, isLoading: props.isLoading }) })] }));
     }

package/components/types.d.ts

@@ -10,9 +10,11 @@ export declare type BaseElementProps = {
         [key: string]: any;
     };
 };
-export declare type IconSize = 'small' | 'medium' /** default size */ | 'large';
+/** Allowed element sizes */
+export declare type ElementSize = 'small' | 'medium' /** default size */ | 'large';
+/** Allowed icon position */
 export declare type IconPosition = 'left' | 'right';
-/** Icon for component configuration */
+/** Icon for component  */
 export declare type ElementIcon = {
     /**
      * Class name for icon.
@@ -20,7 +22,7 @@ export declare type ElementIcon = {
     */
     className: string;
     /** Icon size */
-    size?: IconSize;
+    size?: ElementSize;
     /**
      * Position
      * Works only with other content

package/components/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/components/types.ts"],"names":[],"mappings":"AAAA,yCAAyC;AACzC,oBAAY,gBAAgB,GAAG;IAC3B,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,YAAY;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,8BAA8B;IAC9B,IAAI,CAAC,EAAE;QACH,8CAA8C;QAC9C,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;KACtB,CAAC;CACL,CAAC;AAEF,oBAAY,QAAQ,GACd,OAAO,GACP,QAAQ,CAAC,mBAAmB,GAC5B,OAAO,CAAC;AAEd,oBAAY,YAAY,GAClB,MAAM,GACN,OAAO,CAAC;AAEd,uCAAuC;AACvC,oBAAY,WAAW,GAAG;IACtB;;;MAGE;IACF,SAAS,EAAE,MAAM,CAAC;IAElB,gBAAgB;IAChB,IAAI,CAAC,EAAE,QAAQ,CAAC;IAEhB;;;MAGE;IACF,QAAQ,CAAC,EAAE,YAAY,CAAC;CAC3B,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/components/types.ts"],"names":[],"mappings":"AAAA,yCAAyC;AACzC,oBAAY,gBAAgB,GAAG;IAC3B,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,YAAY;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,8BAA8B;IAC9B,IAAI,CAAC,EAAE;QACH,8CAA8C;QAC9C,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;KACtB,CAAC;CACL,CAAC;AAEF,4BAA4B;AAC5B,oBAAY,WAAW,GACjB,OAAO,GACP,QAAQ,CAAC,mBAAmB,GAC5B,OAAO,CAAC;AAEd,4BAA4B;AAC5B,oBAAY,YAAY,GAClB,MAAM,GACN,OAAO,CAAC;AAEd,0BAA0B;AAC1B,oBAAY,WAAW,GAAG;IACtB;;;MAGE;IACF,SAAS,EAAE,MAAM,CAAC;IAElB,gBAAgB;IAChB,IAAI,CAAC,EAAE,WAAW,CAAC;IAEnB;;;MAGE;IACF,QAAQ,CAAC,EAAE,YAAY,CAAC;CAC3B,CAAC"}

package/hooks/index.d.ts

@@ -1,2 +1,3 @@
 export * from './useComponentOutsideClick';
+export * from './usePagination';
 //# sourceMappingURL=index.d.ts.map

package/hooks/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,4BAA4B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,4BAA4B,CAAC;AAC3C,cAAc,iBAAiB,CAAC"}

package/hooks/index.js

@@ -1 +1,2 @@
 export * from './useComponentOutsideClick';
+export * from './usePagination';

package/hooks/useComponentOutsideClick.js

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

package/hooks/usePagination.d.ts

@@ -0,0 +1,18 @@
+/** Paginator hook state */
+export interface PaginationState {
+    /** Number of current page */
+    currentPage: number;
+    /** Amount of pages */
+    pagesCount: number;
+    /** Handler of page change */
+    onPageChange: (page: number) => void;
+}
+/**
+ * Hook to pagination state, return hooked values and handler for pagination
+ * @param length Pagionation items count
+ * @param size Page size. Default is 30
+ * @param initPage Initial page. Default is 1
+ * @returns Pair of hook-stored state and handler for slicing current page items
+ */
+export declare const usePagination: (length: number, size?: number, initPage?: number) => [PaginationState, (data: Array<any>) => Array<any>];
+//# sourceMappingURL=usePagination.d.ts.map

package/hooks/usePagination.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePagination.d.ts","sourceRoot":"","sources":["../../src/hooks/usePagination.ts"],"names":[],"mappings":"AAEA,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;;;;;;GAMG;AACH,eAAO,MAAM,aAAa,WAAY,MAAM,SAAQ,MAAM,aAA8B,MAAM,8BAAgC,MAAM,GAAG,CAAC,KAAK,MAAM,GAAG,CAAC,CAsBtJ,CAAC"}

package/hooks/usePagination.js

@@ -0,0 +1,26 @@
+import { useCallback, useMemo, useState } from "react";
+/** Default page size */
+const defaultPageSize = 30;
+/**
+ * Hook to pagination state, return hooked values and handler for pagination
+ * @param length Pagionation items count
+ * @param size Page size. Default is 30
+ * @param initPage Initial page. Default is 1
+ * @returns Pair of hook-stored state and handler for slicing current page items
+ */
+export const usePagination = (length, size = defaultPageSize, initPage = 1) => {
+    const [currentPage, setCurrentPage] = useState(initPage);
+    const count = useMemo(() => Math.ceil(length / size), [size, length]);
+    const onChange = useCallback((page) => setCurrentPage(page), [setCurrentPage]);
+    const paginate = useCallback((data) => {
+        const limit = size;
+        const offstet = (currentPage - 1) * size;
+        return data.slice(offstet, offstet + limit);
+    }, [size, currentPage]);
+    const state = useMemo(() => ({
+        currentPage: currentPage,
+        pagesCount: count,
+        onPageChange: onChange
+    }), [currentPage, count, onChange]);
+    return [state, paginate];
+};

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@bodynarf/react.components",
-    "version": "1.1.4",
+    "version": "1.2.0",
     "author": {
         "name": "Artem",
         "email": "bodynar@gmail.com"
@@ -20,6 +20,10 @@
         "react component",
         "bulma"
     ],
+    "scripts": {
+        "build": "npx tsc",
+        "publish": "npx tsc && copy package.json dist && cd dist && npm publish --access=public"
+    },
     "devDependencies": {
         "@types/react": "^18.0.11",
         "@types/react-dom": "^18.0.5",
@@ -27,8 +31,8 @@
     },
     "dependencies": {
         "@bodynarf/utils": "^1.0.10",
+        "bulma": "^0.9.4",
         "react": "^18.1.0",
-        "react-dom": "^18.1.0",
-        "bulma": "^0.9.4"
+        "react-dom": "^18.1.0"
     }
-}
+}