reactive-bulma 2.7.0 → 2.8.0

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

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

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

@@ -17,3 +17,4 @@ export { default as BreadcrumbItem } from './BreadcrumbItem';
 export { default as DropdownTrigger } from './DropdownTrigger';
 export { default as DropdownItem } from './DropdownItem';
 export { default as MenuItem } from './MenuItem';
+export { default as PaginationItem } from './PaginationItem';

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

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

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

@@ -6,3 +6,4 @@ export { default as Dropdown } from './Dropdown';
 export { default as Message } from './Message';
 export { default as Menu } from './Menu';
 export { default as MenuList } from './MenuList';
+export { default as Pagination } from './Pagination';

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { ElementProps, ComposedElementProps, ClickeableProps } from './commonProps';
-import { basicColorType, columnOffsetType, columnSizeType, fixedImageSizeType, iconColorModeType, basicSizeType, textColorType, titleSizeType } from '../types/styleTypes';
+import { basicColorType, columnOffsetType, columnSizeType, fixedImageSizeType, iconColorModeType, basicSizeType, textColorType, titleSizeType, reducedSizeType } from '../types/styleTypes';
 import { DropdownItemType, inputTypes } from '../types/domTypes';
 export interface ColumnProps extends ElementProps, React.ComponentPropsWithoutRef<'section'> {
     /** `Attribute` Reffers to the component or array of components that will be shown inside the column */
@@ -70,7 +70,7 @@ export interface TagProps extends ComposedElementProps, React.ComponentPropsWith
     /** `Styling` Will add round borders to tag's shape */
     isRounded?: boolean;
     /** `Styling` Set tag's size */
-    size?: Exclude<basicSizeType, 'is-normal'>;
+    size?: reducedSizeType;
     /** `Styling` Color on tag's addon based on bulma's color tokens */
     addonColor?: basicColorType;
     /** `Function` Click function for `delete` option, alone does not nothing, but can be reused for other components */
@@ -112,7 +112,7 @@ export interface IconProps extends ComposedElementProps {
     /** `Styling` Color based on bulma's text color tokens */
     color?: textColorType;
     /** `Styling` Set icons's size */
-    size?: Exclude<basicSizeType, 'is-normal'>;
+    size?: reducedSizeType;
     /** `Styling` Special usage in case you want to set as dark or light mode */
     colorMode?: iconColorModeType;
     /** `Styling` Animates the icon spinning 360° */
@@ -150,7 +150,7 @@ export interface TextAreaProps extends Omit<InputProps, 'isRounded' | 'type'> {
 }
 export interface DeleteProps extends ElementProps, ClickeableProps {
     /** `Styling` Set icons's size */
-    size?: Exclude<basicSizeType, 'is-normal'>;
+    size?: reducedSizeType;
 }
 export interface SelectOption {
     id: string | number;
@@ -247,3 +247,13 @@ export interface MenuItemProps extends ElementProps, ClickeableProps {
     /** `Styling` Generates a blue background to mark the item as the active one in the `MenuList` */
     isActive?: boolean;
 }
+export interface PaginationItemProps extends ElementProps, ClickeableProps {
+    /** `Attribute` `Required` Sets the number string that will be shown in the item and in its title when user hovers it */
+    text: string | number;
+    /** `Attribute` Sets the custom text before the `text` when user hovers the item */
+    labelText?: string;
+    /** `Attribute` Sets the custom text before the `text` when user hovers the item if is the current one */
+    currentLabelText?: string;
+    /** `Styling` Makes the item the selected one, changing its background to blue */
+    isSelected?: boolean;
+}

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

@@ -1,7 +1,7 @@
 /// <reference types="react" />
-import { ComposedElementProps, ElementProps } from './commonProps';
-import { BreadcrumbItemProps, ButtonProps, ColumnProps, DeleteProps, DropdownItemProps, MenuItemProps } from './atomProps';
-import { basicColorType, basicSizeType, breadcrumbAlignType, breadcrumbSeparatorType, columnGapType } from '../types/styleTypes';
+import { ClickeableProps, ComposedElementProps, ElementProps } from './commonProps';
+import { BreadcrumbItemProps, ButtonProps, ColumnProps, DeleteProps, DropdownItemProps, MenuItemProps, PaginationItemProps } from './atomProps';
+import { basicColorType, elementAlignType, breadcrumbSeparatorType, columnGapType, reducedSizeType } from '../types/styleTypes';
 export interface ButtonGroupProps extends ElementProps {
     /** `Atribute` `Required` Array of `Button` objects that will be shown */
     buttonList: ButtonProps[];
@@ -38,11 +38,11 @@ export interface BreadcrumbsProps extends ComposedElementProps {
     /** `Atribute` `Required` Array of `BreadcrumbItems` objects that will be shown */
     items: BreadcrumbItemProps[];
     /** `Styling` Will adjust element position on screen */
-    alignment?: breadcrumbAlignType | null;
+    alignment?: elementAlignType | null;
     /** `Styling` Will adjust element position on screen */
     separator?: breadcrumbSeparatorType | null;
     /** `Styling` Set button's size on bulma's size tokens */
-    size?: Exclude<basicSizeType, 'is-normal'>;
+    size?: reducedSizeType;
 }
 export interface DropdownProps extends ElementProps {
     /** `Atribute` `Required` Sets the name will be shown on the dropdown input */
@@ -62,7 +62,7 @@ export interface MessageProps extends ElementProps {
     /** `Styling` Color based on bulma's color tokens */
     color?: basicColorType;
     /** `Styling` Set button's size on bulma's size tokens */
-    size?: Exclude<basicSizeType, 'is-normal'>;
+    size?: reducedSizeType;
 }
 interface MenuSubListProps {
     subListTitle: MenuItemProps;
@@ -83,4 +83,30 @@ export interface MenuProps extends ElementProps {
     /** `Attribute` `Required` List of sections that can be single or second level MenuItems */
     menuSections: MenuSectionProps[];
 }
+export interface PaginationNavigationButtonProps extends ClickeableProps {
+    /** `Attribute` `Required` Text that will be shown on the button */
+    text: string;
+    /** `Attribute` Will disable the button */
+    isDisabled?: boolean;
+    /** `Attribute` Custom CSS classes, applicable for specific scenarios */
+    cssClasses?: string;
+}
+export interface PaginationProps extends ComposedElementProps {
+    /** `Attribute` `Required` List of sections that can be single or second level MenuItems */
+    pages: PaginationItemProps[];
+    /** `Attribute` Adds a couple of ellipsis between the first and last item */
+    hasEllipsis?: boolean;
+    /** `Attribute` Number of items that will be hidden if `hasEllipsis` is `true` */
+    ellipsisItems?: number;
+    /** `Attribute` Toogle `Previous` and `Next page` buttons next to the selectable pages */
+    showPreviousPageButton?: PaginationNavigationButtonProps | null;
+    /** `Attribute` Toogle `Previous` and `Next page` buttons next to the selectable pages */
+    showNextPageButton?: PaginationNavigationButtonProps | null;
+    /** `Styling` Will add round borders to each page's shape */
+    isRounded?: boolean;
+    /** `Styling` Set button's size on bulma's size tokens */
+    size?: reducedSizeType;
+    /** `Styling` Will adjust the pages position on screen */
+    alignment?: elementAlignType | null;
+}
 export {};

package/dist/cjs/types/types/styleTypes.d.ts

@@ -5,7 +5,8 @@ export type basicColorType = 'is-white' | 'is-light' | 'is-dark' | 'is-black' |
 export type textColorType = 'has-text-white' | 'has-text-black' | 'has-text-light' | 'has-text-dark' | 'has-text-primary' | 'has-text-link' | 'has-text-info' | 'has-text-success' | 'has-text-warning' | 'has-text-danger';
 export type fixedImageSizeType = 'is-16x16' | 'is-24x24' | 'is-32x32' | 'is-48x48' | 'is-64x64' | 'is-96x96' | 'is-128x128' | 'is-square' | 'is-1by1' | 'is-5by4' | 'is-4by3' | 'is-3by2' | 'is-5by3' | 'is-16by9' | 'is-2by1' | 'is-3by1' | 'is-4by5' | 'is-3by4' | 'is-2by3' | 'is-3by5' | 'is-9by16' | 'is-1by2' | 'is-1by3';
 export type basicSizeType = 'is-small' | 'is-normal' | 'is-medium' | 'is-large';
+export type reducedSizeType = Exclude<basicSizeType, 'is-normal'>;
 export type iconColorModeType = 'light' | 'dark';
 export type columnGapType = 'is-0' | 'is-1' | 'is-2' | 'is-3' | 'is-4' | 'is-5' | 'is-6' | 'is-7' | 'is-8';
-export type breadcrumbAlignType = 'is-centered' | 'is-right';
+export type elementAlignType = 'is-centered' | 'is-right';
 export type breadcrumbSeparatorType = 'has-arrow-separator' | 'has-bullet-separator' | 'has-dot-separator' | 'has-succeeds-separator';

package/dist/esm/index.js

@@ -1,5 +1,3 @@
-import crypto from 'crypto';
-
 function styleInject(css, ref) {
   if ( ref === void 0 ) ref = {};
   var insertAt = ref.insertAt;
@@ -2865,7 +2863,7 @@ const parseKey = (max = 5000, min = 1) => {
     max = Math.floor(max);
     min = Math.ceil(min);
     const secureRandomNumbers = new Uint32Array(1);
-    crypto.getRandomValues(secureRandomNumbers);
+    window.crypto.getRandomValues(secureRandomNumbers);
     return Math.floor(secureRandomNumbers[0] * (max - min) + min).toString();
 };
 
@@ -2942,7 +2940,7 @@ const Tag = ({ testId = null, containerTestId = null, cssClasses = null, contain
     const tagDeleteTestId = `${tagTestId}-delete`;
     return withAddon ? (React.createElement("section", { "data-testid": tagContainerTestId, style: containerStyle !== null && containerStyle !== void 0 ? containerStyle : undefined, className: tagContainerClasses },
         React.createElement("span", { "data-testid": tagTestId, className: tagClasses }, text),
-        withDelete ? (React.createElement("a", { "data-testid": tagDeleteTestId, className: 'tag is-delete', "aria-hidden": 'true', onClick: onDeleteClick !== null && onDeleteClick !== void 0 ? onDeleteClick : undefined })) : (React.createElement("span", { className: tagAddonClasses }, addonText)))) : (React.createElement("span", { "data-testid": tagTestId, style: style !== null && style !== void 0 ? style : undefined, className: tagClasses },
+        withDelete ? (React.createElement("a", { "data-testid": tagDeleteTestId, className: 'tag is-delete', title: 'delete', "aria-hidden": 'true', onClick: onDeleteClick !== null && onDeleteClick !== void 0 ? onDeleteClick : undefined })) : (React.createElement("span", { className: tagAddonClasses }, addonText)))) : (React.createElement("span", { "data-testid": tagTestId, style: style !== null && style !== void 0 ? style : undefined, className: tagClasses },
         text,
         withDelete ? (React.createElement("button", { "data-testid": tagDeleteTestId, className: 'delete', onClick: onDeleteClick !== null && onDeleteClick !== void 0 ? onDeleteClick : undefined })) : null));
 };
@@ -2951,8 +2949,6 @@ const Box = ({ testId = 'test-box', cssClasses = 'box', style = null, children =
 
 const renderTitleSection = (section) => {
     var _a, _b;
-    if (!section)
-        return null;
     const { type, size, isSpaced, cssClasses } = section;
     const sectionClasses = parseClasses([
         type,
@@ -2964,8 +2960,8 @@ const renderTitleSection = (section) => {
     return (React.createElement("p", { "data-testid": sectionTestId, className: sectionClasses, style: (_b = section === null || section === void 0 ? void 0 : section.style) !== null && _b !== void 0 ? _b : undefined }, section === null || section === void 0 ? void 0 : section.text));
 };
 const Title = ({ main, secondary }) => (React.createElement(React.Fragment, null,
-    renderTitleSection(main),
-    renderTitleSection(secondary)));
+    main ? renderTitleSection(main) : null,
+    secondary ? renderTitleSection(secondary) : null));
 
 var IconSizeEnum;
 (function (IconSizeEnum) {
@@ -3253,6 +3249,20 @@ const MenuItem = ({ testId = null, cssClasses = null, style = null, text, isActi
     return (React.createElement("a", { "data-testid": menuItemTestId, className: menuItemClasses, style: style !== null && style !== void 0 ? style : undefined, "aria-hidden": 'true', onClick: onClick !== null && onClick !== void 0 ? onClick : undefined }, text));
 };
 
+const PaginationItem = ({ testId = null, cssClasses = null, style = null, text, labelText = 'Page', currentLabelText = 'Go to page', isSelected = null, onClick = null }) => {
+    const paginationItemClasses = parseClasses([
+        'pagination-link',
+        isSelected ? 'is-current' : null,
+        cssClasses
+    ]);
+    const paginationItemTestId = testId !== null && testId !== void 0 ? testId : parseTestId({
+        tag: 'pagination-link',
+        parsedClasses: paginationItemClasses
+    });
+    const parsedLabelText = isSelected ? currentLabelText : labelText;
+    return (React.createElement("a", { "data-testid": paginationItemTestId, className: paginationItemClasses, style: style !== null && style !== void 0 ? style : undefined, "aria-label": `${parsedLabelText} ${text}`, "aria-current": isSelected ? 'page' : undefined, "aria-hidden": 'true', onClick: onClick !== null && onClick !== void 0 ? onClick : undefined }, text));
+};
+
 const ButtonGroup = ({ testId = null, cssClasses = null, style = null, buttonList, isAttached = false, position = 'left' }) => {
     const buttonGroupClasses = parseClasses([
         'buttons',
@@ -3406,5 +3416,65 @@ const Menu = ({ testId = null, cssClasses = null, style = null, menuSections })
         React.createElement(MenuList, { key: `section-menu-list-${parseKey()}`, itemList: section.itemList }))))));
 };
 
-export { Block, Box, BreadcrumbItem, Breadcrumbs, Button, ButtonGroup, CheckBox as Checkbox, Column, ColumnGroup, Delete, Dropdown, DropdownItem, DropdownTrigger, File, Icon, Input, Menu, MenuItem, MenuList, Message, Notification, ProgressBar, RadioButton, Select, Tag, TextArea, Title };
+const renderEllipsis = (hasEllipsis) => hasEllipsis ? (React.createElement("li", null,
+    React.createElement("span", { "aria-hidden": 'true', className: 'pagination-ellipsis' }, "\u2026"))) : null;
+const renderNavigationButton = (navigationButton) => {
+    var _a;
+    if (!navigationButton)
+        return null;
+    const navigationButtonClasses = parseClasses([
+        navigationButton.cssClasses,
+        navigationButton.isDisabled ? 'is-disabled' : null
+    ]);
+    return (React.createElement("a", { className: navigationButtonClasses, onClick: (_a = navigationButton.onClick) !== null && _a !== void 0 ? _a : undefined, "aria-hidden": 'true' }, navigationButton.text));
+};
+const renderPages = (pages, hasEllipsis, ellipsisItems) => {
+    return pages.map((pageItem, pageIndex, { length }) => {
+        const lastEllipsisItemIndex = length - ellipsisItems - 1;
+        if (pageIndex === 0) {
+            return (React.createElement(React.Fragment, { key: `first-pagination-item` },
+                React.createElement(PaginationItem, Object.assign({}, pageItem)),
+                renderEllipsis(hasEllipsis)));
+        }
+        if (!hasEllipsis ||
+            (pageIndex > ellipsisItems && pageIndex < lastEllipsisItemIndex)) {
+            return (React.createElement(PaginationItem, Object.assign({ key: `pagination-item-${parseKey()}` }, pageItem)));
+        }
+        if (pageIndex === --length) {
+            return (React.createElement(React.Fragment, { key: `last-pagination-item` },
+                renderEllipsis(hasEllipsis),
+                React.createElement(PaginationItem, Object.assign({}, pageItem))));
+        }
+    });
+};
+const Pagination = ({ testId = null, containerTestId = null, cssClasses = null, containerCssClasses = null, style = null, containerStyle = null, pages, ellipsisItems = 0, showPreviousPageButton = {
+    text: 'Previous',
+    cssClasses: 'pagination-previous'
+}, showNextPageButton = {
+    text: 'Next page',
+    cssClasses: 'pagination-next'
+}, hasEllipsis = false, isRounded = false, alignment = null, size = null }) => {
+    const paginationContainerClasses = parseClasses([
+        'pagination',
+        isRounded ? 'is-rounded' : null,
+        size,
+        alignment,
+        cssClasses
+    ]);
+    const paginationContainerTestId = testId !== null && testId !== void 0 ? testId : parseTestId({
+        tag: 'pagination',
+        parsedClasses: paginationContainerClasses
+    });
+    const paginationClasses = parseClasses([
+        'pagination-list',
+        containerCssClasses
+    ]);
+    const paginationTestId = containerTestId !== null && containerTestId !== void 0 ? containerTestId : parseTestId({ tag: 'pagination-list', parsedClasses: paginationClasses });
+    return (React.createElement("nav", { "data-testid": paginationContainerTestId, className: paginationContainerClasses, style: containerStyle !== null && containerStyle !== void 0 ? containerStyle : undefined, role: 'navigation', "aria-label": 'pagination' },
+        renderNavigationButton(showPreviousPageButton),
+        renderNavigationButton(showNextPageButton),
+        React.createElement("ul", { "data-testid": paginationTestId, className: paginationClasses, style: style !== null && style !== void 0 ? style : undefined }, renderPages(pages, hasEllipsis, ellipsisItems))));
+};
+
+export { Block, Box, BreadcrumbItem, Breadcrumbs, Button, ButtonGroup, CheckBox as Checkbox, Column, ColumnGroup, Delete, Dropdown, DropdownItem, DropdownTrigger, File, Icon, Input, Menu, MenuItem, MenuList, Message, Notification, Pagination, PaginationItem, ProgressBar, RadioButton, Select, Tag, TextArea, Title };
 //# sourceMappingURL=index.js.map