reactive-bulma 2.7.0 → 2.8.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,4 @@
1
+ import React from 'react';
2
+ import { PaginationItemProps } from '../../../interfaces/atomProps';
3
+ declare const PaginationItem: React.FC<PaginationItemProps>;
4
+ export default PaginationItem;
@@ -17,3 +17,4 @@ export { default as BreadcrumbItem } from './BreadcrumbItem';
17
17
  export { default as DropdownTrigger } from './DropdownTrigger';
18
18
  export { default as DropdownItem } from './DropdownItem';
19
19
  export { default as MenuItem } from './MenuItem';
20
+ export { default as PaginationItem } from './PaginationItem';
@@ -0,0 +1,4 @@
1
+ import React from 'react';
2
+ import { PaginationProps } from '../../../interfaces/moleculeProps';
3
+ declare const Pagination: React.FC<PaginationProps>;
4
+ export default Pagination;
@@ -6,3 +6,4 @@ export { default as Dropdown } from './Dropdown';
6
6
  export { default as Message } from './Message';
7
7
  export { default as Menu } from './Menu';
8
8
  export { default as MenuList } from './MenuList';
9
+ export { default as Pagination } from './Pagination';
@@ -1,6 +1,6 @@
1
1
  import React from 'react';
2
2
  import { ElementProps, ComposedElementProps, ClickeableProps } from './commonProps';
3
- import { basicColorType, columnOffsetType, columnSizeType, fixedImageSizeType, iconColorModeType, basicSizeType, textColorType, titleSizeType } from '../types/styleTypes';
3
+ import { basicColorType, columnOffsetType, columnSizeType, fixedImageSizeType, iconColorModeType, basicSizeType, textColorType, titleSizeType, reducedSizeType } from '../types/styleTypes';
4
4
  import { DropdownItemType, inputTypes } from '../types/domTypes';
5
5
  export interface ColumnProps extends ElementProps, React.ComponentPropsWithoutRef<'section'> {
6
6
  /** `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
70
70
  /** `Styling` Will add round borders to tag's shape */
71
71
  isRounded?: boolean;
72
72
  /** `Styling` Set tag's size */
73
- size?: Exclude<basicSizeType, 'is-normal'>;
73
+ size?: reducedSizeType;
74
74
  /** `Styling` Color on tag's addon based on bulma's color tokens */
75
75
  addonColor?: basicColorType;
76
76
  /** `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 {
112
112
  /** `Styling` Color based on bulma's text color tokens */
113
113
  color?: textColorType;
114
114
  /** `Styling` Set icons's size */
115
- size?: Exclude<basicSizeType, 'is-normal'>;
115
+ size?: reducedSizeType;
116
116
  /** `Styling` Special usage in case you want to set as dark or light mode */
117
117
  colorMode?: iconColorModeType;
118
118
  /** `Styling` Animates the icon spinning 360° */
@@ -150,7 +150,7 @@ export interface TextAreaProps extends Omit<InputProps, 'isRounded' | 'type'> {
150
150
  }
151
151
  export interface DeleteProps extends ElementProps, ClickeableProps {
152
152
  /** `Styling` Set icons's size */
153
- size?: Exclude<basicSizeType, 'is-normal'>;
153
+ size?: reducedSizeType;
154
154
  }
155
155
  export interface SelectOption {
156
156
  id: string | number;
@@ -247,3 +247,13 @@ export interface MenuItemProps extends ElementProps, ClickeableProps {
247
247
  /** `Styling` Generates a blue background to mark the item as the active one in the `MenuList` */
248
248
  isActive?: boolean;
249
249
  }
250
+ export interface PaginationItemProps extends ElementProps, ClickeableProps {
251
+ /** `Attribute` `Required` Sets the number string that will be shown in the item and in its title when user hovers it */
252
+ text: string | number;
253
+ /** `Attribute` Sets the custom text before the `text` when user hovers the item */
254
+ labelText?: string;
255
+ /** `Attribute` Sets the custom text before the `text` when user hovers the item if is the current one */
256
+ currentLabelText?: string;
257
+ /** `Styling` Makes the item the selected one, changing its background to blue */
258
+ isSelected?: boolean;
259
+ }
@@ -1,7 +1,7 @@
1
1
  /// <reference types="react" />
2
- import { ComposedElementProps, ElementProps } from './commonProps';
3
- import { BreadcrumbItemProps, ButtonProps, ColumnProps, DeleteProps, DropdownItemProps, MenuItemProps } from './atomProps';
4
- import { basicColorType, basicSizeType, breadcrumbAlignType, breadcrumbSeparatorType, columnGapType } from '../types/styleTypes';
2
+ import { ClickeableProps, ComposedElementProps, ElementProps } from './commonProps';
3
+ import { BreadcrumbItemProps, ButtonProps, ColumnProps, DeleteProps, DropdownItemProps, MenuItemProps, PaginationItemProps } from './atomProps';
4
+ import { basicColorType, elementAlignType, breadcrumbSeparatorType, columnGapType, reducedSizeType } from '../types/styleTypes';
5
5
  export interface ButtonGroupProps extends ElementProps {
6
6
  /** `Atribute` `Required` Array of `Button` objects that will be shown */
7
7
  buttonList: ButtonProps[];
@@ -38,11 +38,11 @@ export interface BreadcrumbsProps extends ComposedElementProps {
38
38
  /** `Atribute` `Required` Array of `BreadcrumbItems` objects that will be shown */
39
39
  items: BreadcrumbItemProps[];
40
40
  /** `Styling` Will adjust element position on screen */
41
- alignment?: breadcrumbAlignType | null;
41
+ alignment?: elementAlignType | null;
42
42
  /** `Styling` Will adjust element position on screen */
43
43
  separator?: breadcrumbSeparatorType | null;
44
44
  /** `Styling` Set button's size on bulma's size tokens */
45
- size?: Exclude<basicSizeType, 'is-normal'>;
45
+ size?: reducedSizeType;
46
46
  }
47
47
  export interface DropdownProps extends ElementProps {
48
48
  /** `Atribute` `Required` Sets the name will be shown on the dropdown input */
@@ -62,7 +62,7 @@ export interface MessageProps extends ElementProps {
62
62
  /** `Styling` Color based on bulma's color tokens */
63
63
  color?: basicColorType;
64
64
  /** `Styling` Set button's size on bulma's size tokens */
65
- size?: Exclude<basicSizeType, 'is-normal'>;
65
+ size?: reducedSizeType;
66
66
  }
67
67
  interface MenuSubListProps {
68
68
  subListTitle: MenuItemProps;
@@ -83,4 +83,30 @@ export interface MenuProps extends ElementProps {
83
83
  /** `Attribute` `Required` List of sections that can be single or second level MenuItems */
84
84
  menuSections: MenuSectionProps[];
85
85
  }
86
+ export interface PaginationNavigationButtonProps extends ClickeableProps {
87
+ /** `Attribute` `Required` Text that will be shown on the button */
88
+ text: string;
89
+ /** `Attribute` Will disable the button */
90
+ isDisabled?: boolean;
91
+ /** `Attribute` Custom CSS classes, applicable for specific scenarios */
92
+ cssClasses?: string;
93
+ }
94
+ export interface PaginationProps extends ComposedElementProps {
95
+ /** `Attribute` `Required` List of sections that can be single or second level MenuItems */
96
+ pages: PaginationItemProps[];
97
+ /** `Attribute` Adds a couple of ellipsis between the first and last item */
98
+ hasEllipsis?: boolean;
99
+ /** `Attribute` Number of items that will be hidden if `hasEllipsis` is `true` */
100
+ ellipsisItems?: number;
101
+ /** `Attribute` Toogle `Previous` and `Next page` buttons next to the selectable pages */
102
+ showPreviousPageButton?: PaginationNavigationButtonProps | null;
103
+ /** `Attribute` Toogle `Previous` and `Next page` buttons next to the selectable pages */
104
+ showNextPageButton?: PaginationNavigationButtonProps | null;
105
+ /** `Styling` Will add round borders to each page's shape */
106
+ isRounded?: boolean;
107
+ /** `Styling` Set button's size on bulma's size tokens */
108
+ size?: reducedSizeType;
109
+ /** `Styling` Will adjust the pages position on screen */
110
+ alignment?: elementAlignType | null;
111
+ }
86
112
  export {};
@@ -5,7 +5,8 @@ export type basicColorType = 'is-white' | 'is-light' | 'is-dark' | 'is-black' |
5
5
  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';
6
6
  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';
7
7
  export type basicSizeType = 'is-small' | 'is-normal' | 'is-medium' | 'is-large';
8
+ export type reducedSizeType = Exclude<basicSizeType, 'is-normal'>;
8
9
  export type iconColorModeType = 'light' | 'dark';
9
10
  export type columnGapType = 'is-0' | 'is-1' | 'is-2' | 'is-3' | 'is-4' | 'is-5' | 'is-6' | 'is-7' | 'is-8';
10
- export type breadcrumbAlignType = 'is-centered' | 'is-right';
11
+ export type elementAlignType = 'is-centered' | 'is-right';
11
12
  export type breadcrumbSeparatorType = 'has-arrow-separator' | 'has-bullet-separator' | 'has-dot-separator' | 'has-succeeds-separator';
package/dist/esm/index.js CHANGED
@@ -1,5 +1,3 @@
1
- import crypto from 'crypto';
2
-
3
1
  function styleInject(css, ref) {
4
2
  if ( ref === void 0 ) ref = {};
5
3
  var insertAt = ref.insertAt;
@@ -2865,7 +2863,7 @@ const parseKey = (max = 5000, min = 1) => {
2865
2863
  max = Math.floor(max);
2866
2864
  min = Math.ceil(min);
2867
2865
  const secureRandomNumbers = new Uint32Array(1);
2868
- crypto.getRandomValues(secureRandomNumbers);
2866
+ window.crypto.getRandomValues(secureRandomNumbers);
2869
2867
  return Math.floor(secureRandomNumbers[0] * (max - min) + min).toString();
2870
2868
  };
2871
2869
 
@@ -2942,7 +2940,7 @@ const Tag = ({ testId = null, containerTestId = null, cssClasses = null, contain
2942
2940
  const tagDeleteTestId = `${tagTestId}-delete`;
2943
2941
  return withAddon ? (React.createElement("section", { "data-testid": tagContainerTestId, style: containerStyle !== null && containerStyle !== void 0 ? containerStyle : undefined, className: tagContainerClasses },
2944
2942
  React.createElement("span", { "data-testid": tagTestId, className: tagClasses }, text),
2945
- 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 },
2943
+ 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 },
2946
2944
  text,
2947
2945
  withDelete ? (React.createElement("button", { "data-testid": tagDeleteTestId, className: 'delete', onClick: onDeleteClick !== null && onDeleteClick !== void 0 ? onDeleteClick : undefined })) : null));
2948
2946
  };
@@ -2951,8 +2949,6 @@ const Box = ({ testId = 'test-box', cssClasses = 'box', style = null, children =
2951
2949
 
2952
2950
  const renderTitleSection = (section) => {
2953
2951
  var _a, _b;
2954
- if (!section)
2955
- return null;
2956
2952
  const { type, size, isSpaced, cssClasses } = section;
2957
2953
  const sectionClasses = parseClasses([
2958
2954
  type,
@@ -2964,8 +2960,8 @@ const renderTitleSection = (section) => {
2964
2960
  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));
2965
2961
  };
2966
2962
  const Title = ({ main, secondary }) => (React.createElement(React.Fragment, null,
2967
- renderTitleSection(main),
2968
- renderTitleSection(secondary)));
2963
+ main ? renderTitleSection(main) : null,
2964
+ secondary ? renderTitleSection(secondary) : null));
2969
2965
 
2970
2966
  var IconSizeEnum;
2971
2967
  (function (IconSizeEnum) {
@@ -3253,6 +3249,20 @@ const MenuItem = ({ testId = null, cssClasses = null, style = null, text, isActi
3253
3249
  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));
3254
3250
  };
3255
3251
 
3252
+ const PaginationItem = ({ testId = null, cssClasses = null, style = null, text, labelText = 'Page', currentLabelText = 'Go to page', isSelected = null, onClick = null }) => {
3253
+ const paginationItemClasses = parseClasses([
3254
+ 'pagination-link',
3255
+ isSelected ? 'is-current' : null,
3256
+ cssClasses
3257
+ ]);
3258
+ const paginationItemTestId = testId !== null && testId !== void 0 ? testId : parseTestId({
3259
+ tag: 'pagination-link',
3260
+ parsedClasses: paginationItemClasses
3261
+ });
3262
+ const parsedLabelText = isSelected ? currentLabelText : labelText;
3263
+ 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));
3264
+ };
3265
+
3256
3266
  const ButtonGroup = ({ testId = null, cssClasses = null, style = null, buttonList, isAttached = false, position = 'left' }) => {
3257
3267
  const buttonGroupClasses = parseClasses([
3258
3268
  'buttons',
@@ -3406,5 +3416,65 @@ const Menu = ({ testId = null, cssClasses = null, style = null, menuSections })
3406
3416
  React.createElement(MenuList, { key: `section-menu-list-${parseKey()}`, itemList: section.itemList }))))));
3407
3417
  };
3408
3418
 
3409
- 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 };
3419
+ const renderEllipsis = (hasEllipsis) => hasEllipsis ? (React.createElement("li", null,
3420
+ React.createElement("span", { "aria-hidden": 'true', className: 'pagination-ellipsis' }, "\u2026"))) : null;
3421
+ const renderNavigationButton = (navigationButton) => {
3422
+ var _a;
3423
+ if (!navigationButton)
3424
+ return null;
3425
+ const navigationButtonClasses = parseClasses([
3426
+ navigationButton.cssClasses,
3427
+ navigationButton.isDisabled ? 'is-disabled' : null
3428
+ ]);
3429
+ return (React.createElement("a", { className: navigationButtonClasses, onClick: (_a = navigationButton.onClick) !== null && _a !== void 0 ? _a : undefined, "aria-hidden": 'true' }, navigationButton.text));
3430
+ };
3431
+ const renderPages = (pages, hasEllipsis, ellipsisItems) => {
3432
+ return pages.map((pageItem, pageIndex, { length }) => {
3433
+ const lastEllipsisItemIndex = length - ellipsisItems - 1;
3434
+ if (pageIndex === 0) {
3435
+ return (React.createElement(React.Fragment, { key: `first-pagination-item` },
3436
+ React.createElement(PaginationItem, Object.assign({}, pageItem)),
3437
+ renderEllipsis(hasEllipsis)));
3438
+ }
3439
+ if (!hasEllipsis ||
3440
+ (pageIndex > ellipsisItems && pageIndex < lastEllipsisItemIndex)) {
3441
+ return (React.createElement(PaginationItem, Object.assign({ key: `pagination-item-${parseKey()}` }, pageItem)));
3442
+ }
3443
+ if (pageIndex === --length) {
3444
+ return (React.createElement(React.Fragment, { key: `last-pagination-item` },
3445
+ renderEllipsis(hasEllipsis),
3446
+ React.createElement(PaginationItem, Object.assign({}, pageItem))));
3447
+ }
3448
+ });
3449
+ };
3450
+ const Pagination = ({ testId = null, containerTestId = null, cssClasses = null, containerCssClasses = null, style = null, containerStyle = null, pages, ellipsisItems = 0, showPreviousPageButton = {
3451
+ text: 'Previous',
3452
+ cssClasses: 'pagination-previous'
3453
+ }, showNextPageButton = {
3454
+ text: 'Next page',
3455
+ cssClasses: 'pagination-next'
3456
+ }, hasEllipsis = false, isRounded = false, alignment = null, size = null }) => {
3457
+ const paginationContainerClasses = parseClasses([
3458
+ 'pagination',
3459
+ isRounded ? 'is-rounded' : null,
3460
+ size,
3461
+ alignment,
3462
+ cssClasses
3463
+ ]);
3464
+ const paginationContainerTestId = testId !== null && testId !== void 0 ? testId : parseTestId({
3465
+ tag: 'pagination',
3466
+ parsedClasses: paginationContainerClasses
3467
+ });
3468
+ const paginationClasses = parseClasses([
3469
+ 'pagination-list',
3470
+ containerCssClasses
3471
+ ]);
3472
+ const paginationTestId = containerTestId !== null && containerTestId !== void 0 ? containerTestId : parseTestId({ tag: 'pagination-list', parsedClasses: paginationClasses });
3473
+ return (React.createElement("nav", { "data-testid": paginationContainerTestId, className: paginationContainerClasses, style: containerStyle !== null && containerStyle !== void 0 ? containerStyle : undefined, role: 'navigation', "aria-label": 'pagination' },
3474
+ renderNavigationButton(showPreviousPageButton),
3475
+ renderNavigationButton(showNextPageButton),
3476
+ React.createElement("ul", { "data-testid": paginationTestId, className: paginationClasses, style: style !== null && style !== void 0 ? style : undefined }, renderPages(pages, hasEllipsis, ellipsisItems))));
3477
+ };
3478
+
3479
+ 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 };
3410
3480
  //# sourceMappingURL=index.js.map