reactive-bulma 2.6.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.
Files changed (28) hide show
  1. package/dist/cjs/index.js +130 -13
  2. package/dist/cjs/index.js.map +1 -1
  3. package/dist/cjs/types/components/atoms/MenuItem/index.d.ts +4 -0
  4. package/dist/cjs/types/components/atoms/PaginationItem/index.d.ts +4 -0
  5. package/dist/cjs/types/components/atoms/index.d.ts +2 -0
  6. package/dist/cjs/types/components/molecules/Menu/index.d.ts +4 -0
  7. package/dist/cjs/types/components/molecules/MenuList/index.d.ts +4 -0
  8. package/dist/cjs/types/components/molecules/Pagination/index.d.ts +4 -0
  9. package/dist/cjs/types/components/molecules/index.d.ts +3 -0
  10. package/dist/cjs/types/functions/parsers.d.ts +1 -0
  11. package/dist/cjs/types/interfaces/atomProps.d.ts +20 -4
  12. package/dist/cjs/types/interfaces/moleculeProps.d.ts +52 -6
  13. package/dist/cjs/types/types/styleTypes.d.ts +2 -1
  14. package/dist/esm/index.js +126 -14
  15. package/dist/esm/index.js.map +1 -1
  16. package/dist/esm/types/components/atoms/MenuItem/index.d.ts +4 -0
  17. package/dist/esm/types/components/atoms/PaginationItem/index.d.ts +4 -0
  18. package/dist/esm/types/components/atoms/index.d.ts +2 -0
  19. package/dist/esm/types/components/molecules/Menu/index.d.ts +4 -0
  20. package/dist/esm/types/components/molecules/MenuList/index.d.ts +4 -0
  21. package/dist/esm/types/components/molecules/Pagination/index.d.ts +4 -0
  22. package/dist/esm/types/components/molecules/index.d.ts +3 -0
  23. package/dist/esm/types/functions/parsers.d.ts +1 -0
  24. package/dist/esm/types/interfaces/atomProps.d.ts +20 -4
  25. package/dist/esm/types/interfaces/moleculeProps.d.ts +52 -6
  26. package/dist/esm/types/types/styleTypes.d.ts +2 -1
  27. package/dist/index.d.ts +80 -8
  28. package/package.json +18 -18
@@ -0,0 +1,4 @@
1
+ import React from 'react';
2
+ import { MenuItemProps } from '../../../interfaces/atomProps';
3
+ declare const MenuItem: React.FC<MenuItemProps>;
4
+ export default MenuItem;
@@ -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;
@@ -16,3 +16,5 @@ export { default as RadioButton } from './RadioButton';
16
16
  export { default as BreadcrumbItem } from './BreadcrumbItem';
17
17
  export { default as DropdownTrigger } from './DropdownTrigger';
18
18
  export { default as DropdownItem } from './DropdownItem';
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 { MenuProps } from '../../../interfaces/moleculeProps';
3
+ declare const Menu: React.FC<MenuProps>;
4
+ export default Menu;
@@ -0,0 +1,4 @@
1
+ import React from 'react';
2
+ import { MenuListProps } from '../../../interfaces/moleculeProps';
3
+ declare const MenuList: React.FC<MenuListProps>;
4
+ export default MenuList;
@@ -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;
@@ -4,3 +4,6 @@ export { default as Notification } from './Notification';
4
4
  export { default as Breadcrumbs } from './Breadcrumbs';
5
5
  export { default as Dropdown } from './Dropdown';
6
6
  export { default as Message } from './Message';
7
+ export { default as Menu } from './Menu';
8
+ export { default as MenuList } from './MenuList';
9
+ export { default as Pagination } from './Pagination';
@@ -12,3 +12,4 @@ export declare const parseClasses: (_classes: Array<string | null | undefined>)
12
12
  * @returns A single string product of merge all classNames, separated by `separator` value
13
13
  */
14
14
  export declare const parseTestId: (config: ParseTestIdProps) => string;
15
+ export declare const parseKey: (max?: number, min?: number) => string;
@@ -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;
@@ -241,3 +241,19 @@ export interface DropdownItemProps extends ElementProps, ClickeableProps {
241
241
  /** `Styling` Marks the item as the one where user is located (based on dropdown hierarchy) */
242
242
  isActiveItem?: boolean;
243
243
  }
244
+ export interface MenuItemProps extends ElementProps, ClickeableProps {
245
+ /** `Attribute` `Required` Sets the text will be shown on the menu item */
246
+ text: string;
247
+ /** `Styling` Generates a blue background to mark the item as the active one in the `MenuList` */
248
+ isActive?: boolean;
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 } 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,5 +62,51 @@ 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
+ interface MenuSubListProps {
68
+ subListTitle: MenuItemProps;
69
+ subItems: MenuItemProps[];
70
+ }
71
+ type MenuListItemType = MenuItemProps | MenuSubListProps;
72
+ export interface MenuListProps extends ElementProps {
73
+ /** `Attribute` `Required` List of menu items that can be used as single ones or in a list/sublist format */
74
+ itemList: Array<MenuListItemType>;
75
+ }
76
+ interface MenuSectionProps {
77
+ /** `Attribute` `Required` Label that will be show at the beginning of each section */
78
+ label: string;
79
+ /** `Attribute` `Required` List of menu items that can be used as single ones or in a list/sublist format */
80
+ itemList: Array<MenuListItemType>;
81
+ }
82
+ export interface MenuProps extends ElementProps {
83
+ /** `Attribute` `Required` List of sections that can be single or second level MenuItems */
84
+ menuSections: MenuSectionProps[];
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
+ }
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
@@ -2859,6 +2859,13 @@ const parseTestId = (config) => {
2859
2859
  }
2860
2860
  return `test-${config.tag}${fixedClassString.replace(/ /gm, (_a = config.separator) !== null && _a !== void 0 ? _a : '')}`;
2861
2861
  };
2862
+ const parseKey = (max = 5000, min = 1) => {
2863
+ max = Math.floor(max);
2864
+ min = Math.ceil(min);
2865
+ const secureRandomNumbers = new Uint32Array(1);
2866
+ window.crypto.getRandomValues(secureRandomNumbers);
2867
+ return Math.floor(secureRandomNumbers[0] * (max - min) + min).toString();
2868
+ };
2862
2869
 
2863
2870
  const Button = ({ testId = null, cssClasses = null, style = null, type = 'button', text = null, isDisabled = false, color = null, isLightColor = false, isInvertedColor = false, isOutlined = false, isRounded = false, isLoading = false, isStatic = false, isSelected = false, size = null, onClick = null }) => {
2864
2871
  const buttonClasses = parseClasses([
@@ -2933,7 +2940,7 @@ const Tag = ({ testId = null, containerTestId = null, cssClasses = null, contain
2933
2940
  const tagDeleteTestId = `${tagTestId}-delete`;
2934
2941
  return withAddon ? (React.createElement("section", { "data-testid": tagContainerTestId, style: containerStyle !== null && containerStyle !== void 0 ? containerStyle : undefined, className: tagContainerClasses },
2935
2942
  React.createElement("span", { "data-testid": tagTestId, className: tagClasses }, text),
2936
- withDelete ? (React.createElement("a", { "data-testid": tagDeleteTestId, className: 'tag is-delete', 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 },
2937
2944
  text,
2938
2945
  withDelete ? (React.createElement("button", { "data-testid": tagDeleteTestId, className: 'delete', onClick: onDeleteClick !== null && onDeleteClick !== void 0 ? onDeleteClick : undefined })) : null));
2939
2946
  };
@@ -2942,8 +2949,6 @@ const Box = ({ testId = 'test-box', cssClasses = 'box', style = null, children =
2942
2949
 
2943
2950
  const renderTitleSection = (section) => {
2944
2951
  var _a, _b;
2945
- if (!section)
2946
- return null;
2947
2952
  const { type, size, isSpaced, cssClasses } = section;
2948
2953
  const sectionClasses = parseClasses([
2949
2954
  type,
@@ -2955,8 +2960,8 @@ const renderTitleSection = (section) => {
2955
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));
2956
2961
  };
2957
2962
  const Title = ({ main, secondary }) => (React.createElement(React.Fragment, null,
2958
- renderTitleSection(main),
2959
- renderTitleSection(secondary)));
2963
+ main ? renderTitleSection(main) : null,
2964
+ secondary ? renderTitleSection(secondary) : null));
2960
2965
 
2961
2966
  var IconSizeEnum;
2962
2967
  (function (IconSizeEnum) {
@@ -3184,7 +3189,7 @@ const BreadcrumbItem = ({ testId = null, containerTestId = null, cssClasses = nu
3184
3189
  });
3185
3190
  const breadcrumbItemTestId = testId !== null && testId !== void 0 ? testId : parseTestId({ tag: 'breadcrumbItem', parsedClasses: breadcrumbItemClasses });
3186
3191
  return (React.createElement("li", { "data-testid": breadcrumbItemContainerTestId, className: breadcrumbItemContainerClasses, style: containerStyle !== null && containerStyle !== void 0 ? containerStyle : undefined },
3187
- React.createElement("a", { "data-testid": breadcrumbItemTestId, className: breadcrumbItemClasses, style: style !== null && style !== void 0 ? style : undefined, onClick: onClick !== null && onClick !== void 0 ? onClick : undefined }, text)));
3192
+ React.createElement("a", { "data-testid": breadcrumbItemTestId, className: breadcrumbItemClasses, style: style !== null && style !== void 0 ? style : undefined, "aria-hidden": 'true', onClick: onClick !== null && onClick !== void 0 ? onClick : undefined }, text)));
3188
3193
  };
3189
3194
 
3190
3195
  const DropdownTrigger = ({ testId = null, containerTestId = null, cssClasses = null, containerCssClasses = null, style = null, containerStyle = null, menuText, dropdownPointer = 'dropdown-menu', onClick = null }) => {
@@ -3234,6 +3239,30 @@ const DropdownItem = ({ testId = null, cssClasses = null, style = null, itemText
3234
3239
  }
3235
3240
  };
3236
3241
 
3242
+ const MenuItem = ({ testId = null, cssClasses = null, style = null, text, isActive = null, onClick = null }) => {
3243
+ const menuItemClasses = parseClasses([
3244
+ 'menuItem',
3245
+ isActive ? 'is-active' : null,
3246
+ cssClasses
3247
+ ]);
3248
+ const menuItemTestId = testId !== null && testId !== void 0 ? testId : parseTestId({ tag: 'menuItem', parsedClasses: menuItemClasses });
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));
3250
+ };
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
+
3237
3266
  const ButtonGroup = ({ testId = null, cssClasses = null, style = null, buttonList, isAttached = false, position = 'left' }) => {
3238
3267
  const buttonGroupClasses = parseClasses([
3239
3268
  'buttons',
@@ -3255,12 +3284,12 @@ const ButtonGroup = ({ testId = null, cssClasses = null, style = null, buttonLis
3255
3284
  }
3256
3285
  ]
3257
3286
  });
3258
- return (React.createElement("section", { "data-testid": buttonGroupTestId, className: buttonGroupClasses, style: style !== null && style !== void 0 ? style : undefined }, buttonList.map((currentButtonItem, i, originalButtonList) => {
3287
+ return (React.createElement("section", { "data-testid": buttonGroupTestId, className: buttonGroupClasses, style: style !== null && style !== void 0 ? style : undefined }, buttonList.map((currentButtonItem, _, originalButtonList) => {
3259
3288
  const hasSelectedButton = originalButtonList.some(({ isSelected }) => isSelected);
3260
3289
  const shouldApplyColor = (hasSelectedButton && currentButtonItem.isSelected) ||
3261
3290
  !hasSelectedButton;
3262
3291
  const buttonConfig = Object.assign(Object.assign({}, currentButtonItem), { color: shouldApplyColor ? currentButtonItem.color : undefined });
3263
- return (React.createElement(Button, Object.assign({ key: `button-group-item-${i}` }, buttonConfig)));
3292
+ return (React.createElement(Button, Object.assign({ key: `button-group-item-${parseKey()}` }, buttonConfig)));
3264
3293
  })));
3265
3294
  };
3266
3295
 
@@ -3288,7 +3317,7 @@ const ColumnGroup = ({ testId = null, cssClasses = null, style = null, listOfCol
3288
3317
  tag: 'columns',
3289
3318
  parsedClasses: columnGroupClasses
3290
3319
  });
3291
- return (React.createElement("section", { "data-testid": columnGroupTestId, className: columnGroupClasses, style: style !== null && style !== void 0 ? style : undefined }, listOfColumns.map((_columnItem, i) => (React.createElement(Column, Object.assign({ key: `column-group-item-${i}` }, _columnItem))))));
3320
+ return (React.createElement("section", { "data-testid": columnGroupTestId, className: columnGroupClasses, style: style !== null && style !== void 0 ? style : undefined }, listOfColumns.map(columnItemConfig => (React.createElement(Column, Object.assign({ key: `column-group-item-${parseKey()}` }, columnItemConfig))))));
3292
3321
  };
3293
3322
 
3294
3323
  const Notification = ({ testId = null, cssClasses = null, style = null, children = null, deleteButton = null, color = null, isLightColor = null }) => {
@@ -3330,14 +3359,14 @@ const Breadcrumbs = ({ testId = 'breadcrumbs', containerTestId = null, cssClasse
3330
3359
  ]
3331
3360
  });
3332
3361
  return (React.createElement("nav", { "data-testid": breadcrumbsContainerTestId, className: breadcrumbsContainerClasses, style: containerStyle !== null && containerStyle !== void 0 ? containerStyle : undefined },
3333
- React.createElement("ul", { "data-testid": testId, className: cssClasses !== null && cssClasses !== void 0 ? cssClasses : undefined, style: style !== null && style !== void 0 ? style : undefined }, items.map((itemConfig, i) => (React.createElement(BreadcrumbItem, Object.assign({ key: `breadcrumb-item-${i}` }, itemConfig)))))));
3362
+ React.createElement("ul", { "data-testid": testId, className: cssClasses !== null && cssClasses !== void 0 ? cssClasses : undefined, style: style !== null && style !== void 0 ? style : undefined }, items.map(itemConfig => (React.createElement(BreadcrumbItem, Object.assign({ key: `breadcrumb-item-${parseKey()}` }, itemConfig)))))));
3334
3363
  };
3335
3364
 
3336
3365
  const renderDropdownMenu = (items) => (React.createElement("section", { className: 'dropdown-content' }, items.map((dropdownItemConfig, i) => {
3337
3366
  const isFirstItemInMenu = items.length > 1 && i === 0;
3338
- return isFirstItemInMenu ? (React.createElement(DropdownItem, Object.assign({ key: `dropdown-item-${i}` }, dropdownItemConfig))) : (React.createElement("section", { key: `dropdown-item-${i}-section` },
3339
- React.createElement(DropdownItem, { key: `dropdown-item-${i}-divider`, type: 'divider', itemText: 'divider' }),
3340
- React.createElement(DropdownItem, Object.assign({ key: `dropdown-item-${i}` }, dropdownItemConfig))));
3367
+ return isFirstItemInMenu ? (React.createElement(DropdownItem, Object.assign({ key: `dropdown-item-${parseKey()}` }, dropdownItemConfig))) : (React.createElement("section", { key: `dropdown-item-${parseKey()}-section` },
3368
+ React.createElement(DropdownItem, { key: `dropdown-item-${parseKey()}-divider`, type: 'divider', itemText: 'divider' }),
3369
+ React.createElement(DropdownItem, Object.assign({ key: `dropdown-item-${parseKey()}` }, dropdownItemConfig))));
3341
3370
  })));
3342
3371
  const Dropdown = ({ testId = null, cssClasses = null, style = null, inputText, dropdownPointer = 'dropdown-menu', listOfItems }) => {
3343
3372
  const [isMenuActive, setIsMenuActive] = reactExports.useState(false);
@@ -3364,5 +3393,88 @@ const Message = ({ testId = null, cssClasses = null, style = null, headerText =
3364
3393
  React.createElement("section", { "data-testid": `${messageTestId}-body`, className: 'message-body' }, bodyText)));
3365
3394
  };
3366
3395
 
3367
- export { Block, Box, BreadcrumbItem, Breadcrumbs, Button, ButtonGroup, CheckBox as Checkbox, Column, ColumnGroup, Delete, Dropdown, DropdownItem, DropdownTrigger, File, Icon, Input, Message, Notification, ProgressBar, RadioButton, Select, Tag, TextArea, Title };
3396
+ const MenuList = ({ testId = null, cssClasses = null, style = null, itemList }) => {
3397
+ const menuListClasses = parseClasses(['menu-list', cssClasses]);
3398
+ const menuListTestId = testId !== null && testId !== void 0 ? testId : parseTestId({ tag: 'menu-list', parsedClasses: menuListClasses });
3399
+ return (React.createElement("ul", { "data-testid": menuListTestId, className: menuListClasses, style: style !== null && style !== void 0 ? style : undefined }, itemList.map(item => {
3400
+ if ('subListTitle' in item) {
3401
+ return (React.createElement("li", { key: `sub-list-menu-item-${parseKey()}` },
3402
+ React.createElement(MenuItem, Object.assign({}, item.subListTitle)),
3403
+ React.createElement("ul", null, item.subItems.map(subItem => (React.createElement(MenuItem, Object.assign({ key: `sub-list-menu-sub-item-${parseKey()}` }, subItem)))))));
3404
+ }
3405
+ else {
3406
+ return (React.createElement(MenuItem, Object.assign({ key: `sub-list-item-${parseKey()}` }, item)));
3407
+ }
3408
+ })));
3409
+ };
3410
+
3411
+ const Menu = ({ testId = null, cssClasses = null, style = null, menuSections }) => {
3412
+ const menuClasses = parseClasses(['menu', cssClasses]);
3413
+ const menuTestId = testId !== null && testId !== void 0 ? testId : parseTestId({ tag: 'menu', parsedClasses: menuClasses });
3414
+ return (React.createElement("aside", { "data-testid": menuTestId, className: menuClasses, style: style !== null && style !== void 0 ? style : undefined }, menuSections.map(section => (React.createElement(React.Fragment, { key: `section-${parseKey()}` },
3415
+ React.createElement("p", { key: `section-label-${parseKey()}`, className: 'menu-label' }, section.label),
3416
+ React.createElement(MenuList, { key: `section-menu-list-${parseKey()}`, itemList: section.itemList }))))));
3417
+ };
3418
+
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 };
3368
3480
  //# sourceMappingURL=index.js.map