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.
- package/dist/cjs/index.js +130 -13
- package/dist/cjs/index.js.map +1 -1
- package/dist/cjs/types/components/atoms/MenuItem/index.d.ts +4 -0
- package/dist/cjs/types/components/atoms/PaginationItem/index.d.ts +4 -0
- package/dist/cjs/types/components/atoms/index.d.ts +2 -0
- package/dist/cjs/types/components/molecules/Menu/index.d.ts +4 -0
- package/dist/cjs/types/components/molecules/MenuList/index.d.ts +4 -0
- package/dist/cjs/types/components/molecules/Pagination/index.d.ts +4 -0
- package/dist/cjs/types/components/molecules/index.d.ts +3 -0
- package/dist/cjs/types/functions/parsers.d.ts +1 -0
- package/dist/cjs/types/interfaces/atomProps.d.ts +20 -4
- package/dist/cjs/types/interfaces/moleculeProps.d.ts +52 -6
- package/dist/cjs/types/types/styleTypes.d.ts +2 -1
- package/dist/esm/index.js +126 -14
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/types/components/atoms/MenuItem/index.d.ts +4 -0
- package/dist/esm/types/components/atoms/PaginationItem/index.d.ts +4 -0
- package/dist/esm/types/components/atoms/index.d.ts +2 -0
- package/dist/esm/types/components/molecules/Menu/index.d.ts +4 -0
- package/dist/esm/types/components/molecules/MenuList/index.d.ts +4 -0
- package/dist/esm/types/components/molecules/Pagination/index.d.ts +4 -0
- package/dist/esm/types/components/molecules/index.d.ts +3 -0
- package/dist/esm/types/functions/parsers.d.ts +1 -0
- package/dist/esm/types/interfaces/atomProps.d.ts +20 -4
- package/dist/esm/types/interfaces/moleculeProps.d.ts +52 -6
- package/dist/esm/types/types/styleTypes.d.ts +2 -1
- package/dist/index.d.ts +80 -8
- package/package.json +18 -18
@@ -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';
|
@@ -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?:
|
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?:
|
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?:
|
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,
|
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?:
|
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?:
|
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?:
|
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
|
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,
|
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-${
|
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(
|
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(
|
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-${
|
3339
|
-
React.createElement(DropdownItem, { key: `dropdown-item-${
|
3340
|
-
React.createElement(DropdownItem, Object.assign({ key: `dropdown-item-${
|
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
|
-
|
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
|