@bodynarf/react.components 1.12.6 → 1.13.1

package/components/multiselect/components/withoutLabel/index.js

@@ -1,84 +1,85 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useCallback, useId, useState } from "react";
-import { getClassName, isNullOrEmpty, isNullOrUndefined } from "@bodynarf/utils";
-import { ElementSize } from "../../../../types";
-import { getStyleClassName, mapDataAttributes } from "../../../../utils";
-import { useComponentOutsideClick } from "../../../../hooks";
-import Search from "../../../search";
-import InternalHint from "../../../primitives/internal/hint";
-import MultiselectItem from "../item";
-import MultiselectLabel from "../label/component";
-const MultiselectWithoutLabel = ({ items, onChange, onClear, hideOnOuterClick, listMaxHeight, placeholder, noDataText = "No items found", selectionCaption = "{0} items selected", noDataByQuery = "No items found by specified search", compact = false, disabled = false, searchable = true, validationState, className, title, data, hint, id: propsId, checkboxConfig, }) => {
-    const generatedId = useId();
-    const id = propsId ?? generatedId;
-    const [isListVisible, setListVisible] = useState(false);
-    const [selectedItems, setSelectedItems] = useState(items
-        .filter(({ selected }) => selected)
-        .map(({ id }) => id)
-        ??
-            []);
-    const onItemClick = useCallback((item) => {
-        const isItemSelected = selectedItems.includes(item.id);
-        setSelectedItems(x => isItemSelected
-            ? x.filter(x => x !== item.id)
-            : [...x, item.id]);
-        item.selected = isItemSelected;
-        onChange(item, isItemSelected);
-    }, [onChange, selectedItems]);
-    const onItemSelectChange = useCallback((item, selected) => {
-        setSelectedItems(x => selected
-            ? [...x, item.id]
-            : x.filter(x => x !== item.id));
-        item.selected = selected;
-        onChange(item, selected);
-    }, [onChange]);
-    const onLabelClick = useCallback((event) => {
-        if (disabled) {
-            return;
-        }
-        const target = event.target;
-        if (isNullOrUndefined(target)) {
-            return;
-        }
-        if (target.classList.contains("bi-plus-lg")) {
-            setSelectedItems([]);
-            onClear?.();
-        }
-        else {
-            setListVisible(state => !state);
-        }
-    }, [onClear, setListVisible, disabled]);
-    useComponentOutsideClick(`[data-dropdown-id="${id}"]`, isListVisible, () => setListVisible(false), hideOnOuterClick);
-    const classNames = getClassName([
-        "bbr-multiselect",
-        "bbr-dropdown",
-        className,
-        disabled ? "bbr-dropdown--disabled" : "",
-        compact ? "bbr-dropdown--compact" : "",
-        isListVisible ? "is-active" : "",
-        isNullOrEmpty(listMaxHeight) ? "bbr-dropdown--height-default" : "",
-        "dropdown",
-    ]);
-    const labelComponentClassName = getStyleClassName(undefined, validationState);
-    const selectedItemsCount = selectedItems.length;
-    const dataAttributes = isNullOrUndefined(data)
-        ? undefined
-        : mapDataAttributes(data);
-    const deselectable = !isNullOrUndefined(onClear);
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: classNames, "data-dropdown-id": id, title: title, ...dataAttributes, children: [_jsx(MultiselectLabel, { caption: placeholder, onClick: onLabelClick, deselectable: deselectable, className: labelComponentClassName, selectionCaption: selectionCaption, selectedItemsCount: selectedItemsCount }), _jsx("div", { className: "dropdown-menu", children: _jsx(DropdownContent, { id: id, items: items, searchable: searchable, noDataText: noDataText, onItemClick: onItemClick, noDataByQuery: noDataByQuery, selectedItems: selectedItems, listMaxHeight: listMaxHeight, checkboxConfig: checkboxConfig, onItemSelectChange: onItemSelectChange }) })] }, id), _jsx(InternalHint, { hint: hint, validationState: validationState })] }));
-};
-export default MultiselectWithoutLabel;
-const DropdownContent = ({ noDataText, id, listMaxHeight, noDataByQuery, items, selectedItems, onItemClick, onItemSelectChange, searchable = true, checkboxConfig, }) => {
-    const [search, setSearch] = useState("");
-    if (items.length === 0) {
-        return (_jsx("div", { className: "dropdown-content", children: _jsx("span", { className: "dropdown-item", children: noDataText }) }));
-    }
-    const filteredItems = isNullOrEmpty(search)
-        ? items
-        : items.filter(({ displayValue }) => displayValue.toLocaleLowerCase().includes(search.toLocaleLowerCase()));
-    if (filteredItems.length === 0) {
-        return (_jsxs("div", { className: "dropdown-content", style: { maxHeight: listMaxHeight }, children: [_jsx("div", { className: "mx-2 my-1", children: _jsx(Search, { caption: "search", onSearch: setSearch, searchType: "byTyping", size: ElementSize.Small }) }), _jsx("span", { className: "dropdown-item", children: noDataByQuery })] }));
-    }
-    return (_jsxs("div", { className: "dropdown-content", style: { maxHeight: listMaxHeight }, children: [searchable &&
-                _jsx("div", { className: "mx-2 my-1", children: _jsx(Search, { caption: "search", onSearch: setSearch, searchType: "byTyping", size: ElementSize.Small }) }), _jsx("ul", { children: filteredItems.map(item => _jsx(MultiselectItem, { item: item, rootId: id, onItemClick: onItemClick, onChange: onItemSelectChange, checkboxConfig: checkboxConfig, selected: selectedItems.includes(item.id) }, item.id)) })] }));
-};
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback, useId, useState } from "react";
+import { getClassName, isNullOrEmpty, isNullOrUndefined } from "@bodynarf/utils";
+import { ElementSize } from "../../../../types";
+import { getStyleClassName, mapDataAttributes } from "../../../../utils";
+import { useComponentOutsideClick } from "../../../../hooks";
+import Search from "../../../search";
+import InternalHint from "../../../primitives/internal/hint";
+import MultiselectItem from "../item";
+import MultiselectLabel from "../label/component";
+const MultiselectWithoutLabel = ({ items, onChange, onClear, hideOnOuterClick, listMaxHeight, placeholder = "", noDataText = "No items found", selectionCaption = "{0} items selected", noDataByQuery = "No items found by specified search", compact = false, disabled = false, searchable = true, validationState, className, title, data, hint, id: propsId, checkboxConfig, }) => {
+    const generatedId = useId();
+    const id = propsId ?? generatedId;
+    const [isListVisible, setListVisible] = useState(false);
+    const [selectedItems, setSelectedItems] = useState(items
+        .filter(({ selected }) => selected)
+        .map(({ id }) => id)
+        ??
+            []);
+    const onItemClick = useCallback((item) => {
+        const isItemSelected = selectedItems.includes(item.id);
+        setSelectedItems(x => isItemSelected
+            ? x.filter(x => x !== item.id)
+            : [...x, item.id]);
+        item.selected = isItemSelected;
+        onChange(item, isItemSelected);
+    }, [onChange, selectedItems]);
+    const onItemSelectChange = useCallback((item, selected) => {
+        setSelectedItems(x => selected
+            ? [...x, item.id]
+            : x.filter(x => x !== item.id));
+        item.selected = selected;
+        onChange(item, selected);
+    }, [onChange]);
+    const onLabelClick = useCallback((event) => {
+        if (disabled) {
+            return;
+        }
+        const target = event.target;
+        if (isNullOrUndefined(target)) {
+            return;
+        }
+        if (target.classList.contains("bi-plus-lg")) {
+            setSelectedItems([]);
+            onClear?.();
+        }
+        else {
+            setListVisible(state => !state);
+        }
+    }, [onClear, setListVisible, disabled]);
+    useComponentOutsideClick(`[data-dropdown-id="${id}"]`, isListVisible, () => setListVisible(false), hideOnOuterClick);
+    const classNames = getClassName([
+        "bbr-multiselect",
+        "bbr-dropdown",
+        className,
+        disabled ? "bbr-dropdown--disabled" : "",
+        compact ? "bbr-dropdown--compact" : "",
+        isListVisible ? "is-active" : "",
+        isNullOrEmpty(listMaxHeight) ? "bbr-dropdown--height-default" : "",
+        "dropdown",
+    ]);
+    const labelComponentClassName = getStyleClassName(undefined, validationState);
+    const selectedItemsCount = selectedItems.length;
+    const dataAttributes = isNullOrUndefined(data)
+        ? undefined
+        : mapDataAttributes(data);
+    const deselectable = !isNullOrUndefined(onClear);
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: classNames, "data-dropdown-id": id, title: title, ...dataAttributes, children: [_jsx(MultiselectLabel, { caption: placeholder, onClick: onLabelClick, deselectable: deselectable, className: labelComponentClassName, selectionCaption: selectionCaption, selectedItemsCount: selectedItemsCount }), _jsx("div", { className: "dropdown-menu", children: _jsx(DropdownContent, { id: id, items: items, searchable: searchable, noDataText: noDataText, onItemClick: onItemClick, noDataByQuery: noDataByQuery, selectedItems: selectedItems, listMaxHeight: listMaxHeight, checkboxConfig: checkboxConfig, onItemSelectChange: onItemSelectChange }) })] }, id), _jsx(InternalHint, { hint: hint, validationState: validationState })] }));
+};
+export default MultiselectWithoutLabel;
+// eslint-disable-next-line react/no-multi-comp
+const DropdownContent = ({ noDataText, id, listMaxHeight, noDataByQuery, items, selectedItems, onItemClick, onItemSelectChange, searchable = true, checkboxConfig, }) => {
+    const [search, setSearch] = useState("");
+    if (items.length === 0) {
+        return (_jsx("div", { className: "dropdown-content", children: _jsx("span", { className: "dropdown-item", children: noDataText }) }));
+    }
+    const filteredItems = isNullOrEmpty(search)
+        ? items
+        : items.filter(({ displayValue }) => displayValue.toLocaleLowerCase().includes(search.toLocaleLowerCase()));
+    if (filteredItems.length === 0) {
+        return (_jsxs("div", { className: "dropdown-content", style: { maxHeight: listMaxHeight }, children: [_jsx("div", { className: "mx-2 my-1", children: _jsx(Search, { caption: "search", onSearch: setSearch, searchType: "byTyping", size: ElementSize.Small }) }), _jsx("span", { className: "dropdown-item", children: noDataByQuery })] }));
+    }
+    return (_jsxs("div", { className: "dropdown-content", style: { maxHeight: listMaxHeight }, children: [!!searchable &&
+                _jsx("div", { className: "mx-2 my-1", children: _jsx(Search, { caption: "search", onSearch: setSearch, searchType: "byTyping", size: ElementSize.Small }) }), _jsx("ul", { children: filteredItems.map(item => _jsx(MultiselectItem, { item: item, rootId: id, onItemClick: onItemClick, onChange: onItemSelectChange, checkboxConfig: checkboxConfig, selected: selectedItems.includes(item.id) }, item.id)) })] }));
+};

package/components/multiselect/index.d.ts

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

package/components/multiselect/index.js

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

package/components/multiselect/types.d.ts

@@ -1,41 +1,33 @@
-import { DropdownProps, SelectableItem } from "../dropdown";
-import { CheckBoxProps } from "../primitives";
-/** Single multiselect item that user can select */
-export declare type MultiselectItem = SelectableItem & {
-    /** Is item selected */
-    selected: boolean;
-};
-/** Props type of `Multiselect` */
-export declare type MultiselectProps = Omit<DropdownProps, "items" | "onSelect" | "value" | "deselectable" | "searchable"> & {
-    /** Items which can be selected */
-    items: Array<MultiselectItem>;
-    /**
-     * Handler of changing select state of item
-     * @description `item.selected` will be set by component
-     * @param item Item that triggered event
-     * @param selected New select flag value
-     */
-    onChange: (item: MultiselectItem, selected: boolean) => void;
-    /**
-     * Handler of clear selection event.
-     * When no handler specified - clear selection cannot be performed
-     */
-    onClear?: () => void;
-    /**
-     * Caption for label when some items are selected
-     * @example selectionCaption: "selected: {0}"
-     * @description Supports only 1 string parameter for number of selected items. Default is `{0} items selected`
-     */
-    selectionCaption?: string;
-    /**
-     * Text which would be displayed when search query applied and no items found
-     */
-    noDataByQuery?: string;
-    /**
-     * Is search through items enabled. Default is `true`
-     */
-    searchable?: boolean;
-    /** Customization for checkbox */
-    checkboxConfig?: Pick<CheckBoxProps, "block" | "className" | "data" | "fixBackgroundColor" | "hasBackgroundColor" | "style" | "withoutBorder" | "rounded">;
-};
+import { DropdownProps, SelectableItem } from "../dropdown";
+import { CheckBoxProps } from "../primitives";
+/** Single multiselect item that user can select */
+export type MultiselectItem = SelectableItem & {
+    /** Is item selected */
+    selected: boolean;
+};
+/** Props type of `Multiselect` */
+export type MultiselectProps = Omit<DropdownProps, "items" | "onSelect" | "value" | "deselectable"> & {
+    /** Items which can be selected */
+    items: Array<MultiselectItem>;
+    /**
+     * Handler of changing select state of item
+     * @description `item.selected` will be set by component
+     * @param item Item that triggered event
+     * @param selected New select flag value
+     */
+    onChange: (item: MultiselectItem, selected: boolean) => void;
+    /**
+     * Handler of clear selection event.
+     * When no handler specified - clear selection cannot be performed
+     */
+    onClear?: () => void;
+    /**
+     * Caption for label when some items are selected
+     * @example selectionCaption: "selected: {0}"
+     * @description Supports only 1 string parameter for number of selected items. Default is `{0} items selected`
+     */
+    selectionCaption?: string;
+    /** Customization for checkbox */
+    checkboxConfig?: Pick<CheckBoxProps, "block" | "className" | "data" | "fixBackgroundColor" | "hasBackgroundColor" | "style" | "withoutBorder" | "rounded">;
+};
 //# sourceMappingURL=types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/multiselect/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAC5D,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAE9C,mDAAmD;AACnD,oBAAY,eAAe,GAAG,cAAc,GAAG;IAC3C,uBAAuB;IACvB,QAAQ,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF,kCAAkC;AAClC,oBAAY,gBAAgB,GAAG,IAAI,CAC/B,aAAa,EACX,OAAO,GAAG,UAAU,GACpB,OAAO,GAAG,cAAc,GACxB,YAAY,CACjB,GAAG;IACA,kCAAkC;IAClC,KAAK,EAAE,KAAK,CAAC,eAAe,CAAC,CAAC;IAE9B;;;;;OAKG;IACH,QAAQ,EAAE,CAAC,IAAI,EAAE,eAAe,EAAE,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IAE7D;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IAErB;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB,iCAAiC;IACjC,cAAc,CAAC,EAAE,IAAI,CACjB,aAAa,EACX,OAAO,GAAG,WAAW,GAAG,MAAM,GAC9B,oBAAoB,GAAG,oBAAoB,GAC3C,OAAO,GAAG,eAAe,GACzB,SAAS,CACd,CAAC;CACL,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/multiselect/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAC5D,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAE9C,mDAAmD;AACnD,MAAM,MAAM,eAAe,GAAG,cAAc,GAAG;IAC3C,uBAAuB;IACvB,QAAQ,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF,kCAAkC;AAClC,MAAM,MAAM,gBAAgB,GAAG,IAAI,CAC/B,aAAa,EACX,OAAO,GAAG,UAAU,GACpB,OAAO,GAAG,cAAc,CAC7B,GAAG;IACA,kCAAkC;IAClC,KAAK,EAAE,KAAK,CAAC,eAAe,CAAC,CAAC;IAE9B;;;;;OAKG;IACH,QAAQ,EAAE,CAAC,IAAI,EAAE,eAAe,EAAE,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IAE7D;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IAErB;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B,iCAAiC;IACjC,cAAc,CAAC,EAAE,IAAI,CACjB,aAAa,EACX,OAAO,GAAG,WAAW,GAAG,MAAM,GAC9B,oBAAoB,GAAG,oBAAoB,GAC3C,OAAO,GAAG,eAAe,GACzB,SAAS,CACd,CAAC;CACL,CAAC"}

package/components/multiselect/types.js

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

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

@@ -1,9 +1,9 @@
-import { FC } from "react";
-import { PaginatorProps } from "../..";
-/**
- * Paginator component.
- * Used for visualization of paging configuration
-*/
-declare const Paginator: FC<PaginatorProps>;
-export default Paginator;
+import { FC } from "react";
+import { PaginatorProps } from "../..";
+/**
+ * Paginator component.
+ * Used for visualization of paging configuration
+*/
+declare const Paginator: FC<PaginatorProps>;
+export default Paginator;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/paginator/component/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAoC,EAAE,EAAE,MAAM,OAAO,CAAC;AAO7D,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAEvC;;;EAGE;AACF,QAAA,MAAM,SAAS,EAAE,EAAE,CAAC,cAAc,CAqIjC,CAAA;AAED,eAAe,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/paginator/component/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAoC,EAAE,EAAE,MAAM,OAAO,CAAC;AAO7D,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAEvC;;;EAGE;AACF,QAAA,MAAM,SAAS,EAAE,EAAE,CAAC,cAAc,CAyIjC,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/components/paginator/component/index.js

@@ -1,70 +1,65 @@
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useMemo } from "react";
-import { getClassName, isNullOrEmpty, isNullOrUndefined } from "@bodynarf/utils";
-import { mapDataAttributes } from "../../../utils";
-import { ElementPosition, ElementSize } from "../../../types";
-/**
- * Paginator component.
- * Used for visualization of paging configuration
-*/
-const Paginator = ({ count, onPageChange, currentPage = 0, position = ElementPosition.Left, size = ElementSize.Normal, rounded = false, showNextButtons = false, nearPagesCount = 3, resources, className, title, data, }) => {
-    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(currentPage, count, nearPagesCount), [currentPage, count, nearPagesCount]);
-    const canGoBack = useMemo(() => currentPage > 1, [currentPage]);
-    const canGoForward = useMemo(() => currentPage < count, [currentPage, count]);
-    if (pageNumbers.length <= 1) {
-        return _jsx(_Fragment, {});
-    }
-    const classNames = getClassName([
-        "bbr-paginator",
-        "pagination",
-        className,
-        paginationPositionToClassMap.get(position),
-        rounded ? "is-rounded" : "",
-        size === ElementSize.Normal ? "" : `is-${size}`,
-    ]);
-    const dataAttributes = isNullOrUndefined(data)
-        ? undefined
-        : mapDataAttributes(data);
-    return (_jsxs("nav", { role: "navigation", className: classNames, "aria-label": "pagination", title: title, ...dataAttributes, children: [showNextButtons &&
-                _jsxs(_Fragment, { children: [_jsx("a", { onClick: pageChange, "data-page": currentPage - 1, title: canGoBack ? resources?.previousPageTitle : undefined, className: `pagination-previous${canGoBack ? "" : " is-disabled"}`, children: resources?.previousPageCaption ?? "Previous" }), _jsx("a", { onClick: pageChange, "data-page": currentPage + 1, title: canGoForward ? resources?.nextPageTitle : undefined, className: `pagination-next${canGoForward ? "" : " is-disabled"}`, children: resources?.nextPageCaption ?? "Next page" })] }), _jsxs("ul", { className: "pagination-list", children: [currentPage !== 1 && !pageNumbers.includes(1) &&
-                        _jsxs(_Fragment, { children: [_jsx("li", { children: _jsx("a", { "data-page": 1, onClick: pageChange, className: "pagination-link", title: resources?.openConcretePageTitleTemplate?.format(1), "aria-label": resources?.openConcretePageTitleTemplate?.format(1), children: "1" }) }), _jsx("li", { children: _jsx("span", { className: "pagination-ellipsis", children: "\u2026" }) })] }), pageNumbers.map(x => _jsx("li", { children: _jsx("a", { "data-page": x, onClick: pageChange, "aria-label": resources?.openConcretePageTitleTemplate?.format(x), className: `pagination-link${currentPage === x ? " is-current" : ""}`, title: currentPage === x ? undefined : resources?.openConcretePageTitleTemplate?.format(x), children: x }) }, x)), currentPage != count && !pageNumbers.includes(count) &&
-                        _jsxs(_Fragment, { children: [_jsx("li", { children: _jsx("span", { className: "pagination-ellipsis", children: "\u2026" }) }), _jsx("li", { children: _jsx("a", { "data-page": count, onClick: pageChange, className: "pagination-link", title: resources?.openConcretePageTitleTemplate?.format(count), "aria-label": resources?.openConcretePageTitleTemplate?.format(count), children: count }) })] })] })] }));
-};
-export default Paginator;
-/**
- * Position setting to css class name map
- */
-const paginationPositionToClassMap = new Map([
-    [ElementPosition.Left, ""],
-    [ElementPosition.Center, "is-centered"],
-    [ElementPosition.Right, "is-right"]
-]);
-/**
- * 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
- * @throws Current page is greater than pages amount
- * @returns Array of nearest numbers to current page
- */
-const generatePageNumbers = (page, count, size) => {
-    if (page < 0 || count <= 0 || page > count) {
-        return [];
-    }
-    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)
-    ];
-};
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useMemo } from "react";
+import { getClassName, isNullOrEmpty, isNullOrUndefined } from "@bodynarf/utils";
+import { getPositionClassName, mapDataAttributes } from "../../../utils";
+import { ElementPosition, ElementSize } from "../../../types";
+/**
+ * Paginator component.
+ * Used for visualization of paging configuration
+*/
+const Paginator = ({ count, onPageChange, currentPage = 0, position = ElementPosition.Left, size = ElementSize.Normal, rounded = false, showNextButtons = false, nearPagesCount = 3, resources, className, title, data, }) => {
+    if (currentPage > count) {
+        throw new Error(`Current page "${currentPage}" must be less than amount of pages "${count}"`);
+    }
+    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(currentPage, count, nearPagesCount), [currentPage, count, nearPagesCount]);
+    const canGoBack = useMemo(() => currentPage > 1, [currentPage]);
+    const canGoForward = useMemo(() => currentPage < count, [currentPage, count]);
+    if (pageNumbers.length <= 1) {
+        return null;
+    }
+    const classNames = getClassName([
+        "bbr-paginator",
+        "pagination",
+        className,
+        getPositionClassName(position),
+        rounded ? "is-rounded" : "",
+        size === ElementSize.Normal ? "" : `is-${size}`,
+    ]);
+    const dataAttributes = isNullOrUndefined(data)
+        ? undefined
+        : mapDataAttributes(data);
+    return (_jsxs("nav", { role: "navigation", className: classNames, "aria-label": "pagination", title: title, ...dataAttributes, children: [!!showNextButtons &&
+                _jsxs(_Fragment, { children: [_jsx("a", { onClick: pageChange, "data-page": currentPage - 1, title: canGoBack ? resources?.previousPageTitle : undefined, className: `pagination-previous${canGoBack ? "" : " is-disabled"}`, children: resources?.previousPageCaption ?? "Previous" }), _jsx("a", { onClick: pageChange, "data-page": currentPage + 1, title: canGoForward ? resources?.nextPageTitle : undefined, className: `pagination-next${canGoForward ? "" : " is-disabled"}`, children: resources?.nextPageCaption ?? "Next page" })] }), _jsxs("ul", { className: "pagination-list", children: [currentPage !== 1 && !pageNumbers.includes(1) &&
+                        _jsxs(_Fragment, { children: [_jsx("li", { children: _jsx("a", { "data-page": 1, onClick: pageChange, className: "pagination-link", title: resources?.openConcretePageTitleTemplate?.format(1), "aria-label": resources?.openConcretePageTitleTemplate?.format(1), children: "1" }) }), _jsx("li", { children: _jsx("span", { className: "pagination-ellipsis", children: "\u2026" }) })] }), pageNumbers.map(x => _jsx("li", { children: _jsx("a", { "data-page": x, onClick: pageChange, "aria-label": resources?.openConcretePageTitleTemplate?.format(x), className: `pagination-link${currentPage === x ? " is-current" : ""}`, title: currentPage === x ? undefined : resources?.openConcretePageTitleTemplate?.format(x), children: x }) }, x)), currentPage != count && !pageNumbers.includes(count) &&
+                        _jsxs(_Fragment, { children: [_jsx("li", { children: _jsx("span", { className: "pagination-ellipsis", children: "\u2026" }) }), _jsx("li", { children: _jsx("a", { "data-page": count, onClick: pageChange, className: "pagination-link", title: resources?.openConcretePageTitleTemplate?.format(count), "aria-label": resources?.openConcretePageTitleTemplate?.format(count), children: count }) })] })] })] }));
+};
+export default Paginator;
+/**
+ * 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
+ * @throws Current page is greater than pages amount
+ * @returns Array of nearest numbers to current page
+ */
+const generatePageNumbers = (page, count, size) => {
+    if (page < 0 || count <= 0 || page > count) {
+        return [];
+    }
+    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/paginator/index.d.ts

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

package/components/paginator/index.js

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

package/components/paginator/types.d.ts

@@ -1,55 +1,55 @@
-import { BaseElementProps, ElementPosition, ElementSize } from "../../types";
-export interface PaginatorProps extends BaseElementProps {
-    /** Amount of pages */
-    count: number;
-    /** Page change handler */
-    onPageChange: (page: number) => void;
-    /** Current page */
-    currentPage?: number;
-    /**
-     * Page numbers position.
-     * Useful with `showNextButtons = true`
-    */
-    position?: ElementPosition;
-    /** Buttons should have rounded borders */
-    rounded?: boolean;
-    /** Size of paginator component elements */
-    size?: ElementSize;
-    /** Display "Previous" \ "Next" buttons */
-    showNextButtons?: boolean;
-    /**
-     * Max amount of pages from left & right from current page. `3` by default
-     * @description If set to 2 it will show `[1, 2], 3, [4, 5]`
-    */
-    nearPagesCount?: number;
-    /** String resources for component */
-    resources?: {
-        /**
-         * Previous page button caption
-         * @default "Previous"
-         */
-        previousPageCaption?: string;
-        /**
-         * Previous page button title.
-         * Visible only if set
-         */
-        previousPageTitle?: string;
-        /**
-         * Next page button caption
-         * @default "Next page"
-         */
-        nextPageCaption?: string;
-        /**
-         * Next page button title.
-         * Visible only if set
-         */
-        nextPageTitle?: string;
-        /**
-         * Title for button for opening concrete page by its number.
-         * Must be template with 1 parameter.
-         * @example openConcretePageTitleTemplate="Open {0} page"
-         */
-        openConcretePageTitleTemplate?: string;
-    };
-}
+import { BaseElementProps, ElementPosition, ElementSize } from "../../types";
+export type PaginatorProps = BaseElementProps & {
+    /** Amount of pages */
+    count: number;
+    /** Page change handler */
+    onPageChange: (page: number) => void;
+    /** Current page */
+    currentPage: number;
+    /**
+     * Page numbers position.
+     * Useful with `showNextButtons = true`
+    */
+    position?: ElementPosition;
+    /** Buttons should have rounded borders */
+    rounded?: boolean;
+    /** Size of paginator component elements */
+    size?: ElementSize;
+    /** Display "Previous" \ "Next" buttons */
+    showNextButtons?: boolean;
+    /**
+     * Max amount of pages from left & right from current page. `3` by default
+     * @description If set to 2 it will show `[1, 2], 3, [4, 5]`
+    */
+    nearPagesCount?: number;
+    /** String resources for component */
+    resources?: {
+        /**
+         * Previous page button caption
+         * @default "Previous"
+         */
+        previousPageCaption?: string;
+        /**
+         * Previous page button title.
+         * Visible only if set
+         */
+        previousPageTitle?: string;
+        /**
+         * Next page button caption
+         * @default "Next page"
+         */
+        nextPageCaption?: string;
+        /**
+         * Next page button title.
+         * Visible only if set
+         */
+        nextPageTitle?: string;
+        /**
+         * Title for button for opening concrete page by its number.
+         * Must be template with 1 parameter.
+         * @example openConcretePageTitleTemplate="Open {0} page"
+         */
+        openConcretePageTitleTemplate?: string;
+    };
+};
 //# sourceMappingURL=types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/paginator/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAE5E,MAAM,WAAW,cAAe,SAAQ,gBAAgB;IACpD,sBAAsB;IACtB,KAAK,EAAE,MAAM,CAAC;IAEd,0BAA0B;IAC1B,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAErC,mBAAmB;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;MAGE;IACF,QAAQ,CAAC,EAAE,eAAe,CAAC;IAE3B,0CAA0C;IAC1C,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,2CAA2C;IAC3C,IAAI,CAAC,EAAE,WAAW,CAAC;IAEnB,0CAA0C;IAC1C,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B;;;MAGE;IACF,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB,qCAAqC;IACrC,SAAS,CAAC,EAAE;QACR;;;WAGG;QACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;QAE7B;;;WAGG;QACH,iBAAiB,CAAC,EAAE,MAAM,CAAA;QAE1B;;;WAGG;QACH,eAAe,CAAC,EAAE,MAAM,CAAC;QAEzB;;;WAGG;QACH,aAAa,CAAC,EAAE,MAAM,CAAA;QAEtB;;;;WAIG;QACH,6BAA6B,CAAC,EAAE,MAAM,CAAC;KAC1C,CAAC;CACL"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/paginator/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAE5E,MAAM,MAAM,cAAc,GAAG,gBAAgB,GAAG;IAC5C,sBAAsB;IACtB,KAAK,EAAE,MAAM,CAAC;IAEd,0BAA0B;IAC1B,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAErC,mBAAmB;IACnB,WAAW,EAAE,MAAM,CAAC;IAEpB;;;MAGE;IACF,QAAQ,CAAC,EAAE,eAAe,CAAC;IAE3B,0CAA0C;IAC1C,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,2CAA2C;IAC3C,IAAI,CAAC,EAAE,WAAW,CAAC;IAEnB,0CAA0C;IAC1C,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B;;;MAGE;IACF,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB,qCAAqC;IACrC,SAAS,CAAC,EAAE;QACR;;;WAGG;QACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;QAE7B;;;WAGG;QACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;QAE3B;;;WAGG;QACH,eAAe,CAAC,EAAE,MAAM,CAAC;QAEzB;;;WAGG;QACH,aAAa,CAAC,EAAE,MAAM,CAAC;QAEvB;;;;WAIG;QACH,6BAA6B,CAAC,EAAE,MAAM,CAAC;KAC1C,CAAC;CACL,CAAC"}

package/components/paginator/types.js

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

package/components/primitives/checkbox/component/index.d.ts

@@ -1,7 +1,7 @@
-/// <reference types="react" />
-import "./style.scss";
-import { CheckBoxProps } from "../..";
-/** Boolean input component */
-declare const CheckBox: ({ onValueChange, defaultValue, label, name, size, style, disabled, rounded, block, withoutBorder, hasBackgroundColor, fixBackgroundColor, isFormLabel, className, data, title }: CheckBoxProps) => JSX.Element;
-export default CheckBox;
+import { FC } from "react";
+import "./style.scss";
+import { CheckBoxProps } from "../..";
+/** Boolean input component */
+declare const CheckBox: FC<CheckBoxProps>;
+export default CheckBox;
 //# sourceMappingURL=index.d.ts.map

package/components/primitives/checkbox/component/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/primitives/checkbox/component/index.tsx"],"names":[],"mappings":";AAQA,OAAO,cAAc,CAAC;AAEtB,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAEtC,8BAA8B;AAC9B,QAAA,MAAM,QAAQ,oLAWX,aAAa,KAAG,WA4FlB,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/primitives/checkbox/component/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAe,EAAE,EAAe,MAAM,OAAO,CAAC;AAQrD,OAAO,cAAc,CAAC;AAEtB,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAEtC,8BAA8B;AAC9B,QAAA,MAAM,QAAQ,EAAE,EAAE,CAAC,aAAa,CAuG/B,CAAC;AAEF,eAAe,QAAQ,CAAC"}