reactive-bulma 2.6.0 → 2.7.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 +54 -9
- 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/index.d.ts +1 -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/index.d.ts +2 -0
- package/dist/cjs/types/functions/parsers.d.ts +1 -0
- package/dist/cjs/types/interfaces/atomProps.d.ts +6 -0
- package/dist/cjs/types/interfaces/moleculeProps.d.ts +21 -1
- package/dist/esm/index.js +52 -10
- 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/index.d.ts +1 -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/index.d.ts +2 -0
- package/dist/esm/types/functions/parsers.d.ts +1 -0
- package/dist/esm/types/interfaces/atomProps.d.ts +6 -0
- package/dist/esm/types/interfaces/moleculeProps.d.ts +21 -1
- package/dist/index.d.ts +32 -1
- package/package.json +11 -11
@@ -16,3 +16,4 @@ 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';
|
@@ -4,3 +4,5 @@ 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';
|
@@ -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;
|
@@ -241,3 +241,9 @@ 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
|
+
}
|
@@ -1,6 +1,6 @@
|
|
1
1
|
/// <reference types="react" />
|
2
2
|
import { ComposedElementProps, ElementProps } from './commonProps';
|
3
|
-
import { BreadcrumbItemProps, ButtonProps, ColumnProps, DeleteProps, DropdownItemProps } from './atomProps';
|
3
|
+
import { BreadcrumbItemProps, ButtonProps, ColumnProps, DeleteProps, DropdownItemProps, MenuItemProps } from './atomProps';
|
4
4
|
import { basicColorType, basicSizeType, breadcrumbAlignType, breadcrumbSeparatorType, columnGapType } from '../types/styleTypes';
|
5
5
|
export interface ButtonGroupProps extends ElementProps {
|
6
6
|
/** `Atribute` `Required` Array of `Button` objects that will be shown */
|
@@ -64,3 +64,23 @@ export interface MessageProps extends ElementProps {
|
|
64
64
|
/** `Styling` Set button's size on bulma's size tokens */
|
65
65
|
size?: Exclude<basicSizeType, 'is-normal'>;
|
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 {};
|
package/dist/esm/index.js
CHANGED
@@ -1,3 +1,5 @@
|
|
1
|
+
import crypto from 'crypto';
|
2
|
+
|
1
3
|
function styleInject(css, ref) {
|
2
4
|
if ( ref === void 0 ) ref = {};
|
3
5
|
var insertAt = ref.insertAt;
|
@@ -2859,6 +2861,13 @@ const parseTestId = (config) => {
|
|
2859
2861
|
}
|
2860
2862
|
return `test-${config.tag}${fixedClassString.replace(/ /gm, (_a = config.separator) !== null && _a !== void 0 ? _a : '')}`;
|
2861
2863
|
};
|
2864
|
+
const parseKey = (max = 5000, min = 1) => {
|
2865
|
+
max = Math.floor(max);
|
2866
|
+
min = Math.ceil(min);
|
2867
|
+
const secureRandomNumbers = new Uint32Array(1);
|
2868
|
+
crypto.getRandomValues(secureRandomNumbers);
|
2869
|
+
return Math.floor(secureRandomNumbers[0] * (max - min) + min).toString();
|
2870
|
+
};
|
2862
2871
|
|
2863
2872
|
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
2873
|
const buttonClasses = parseClasses([
|
@@ -2933,7 +2942,7 @@ const Tag = ({ testId = null, containerTestId = null, cssClasses = null, contain
|
|
2933
2942
|
const tagDeleteTestId = `${tagTestId}-delete`;
|
2934
2943
|
return withAddon ? (React.createElement("section", { "data-testid": tagContainerTestId, style: containerStyle !== null && containerStyle !== void 0 ? containerStyle : undefined, className: tagContainerClasses },
|
2935
2944
|
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 },
|
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 },
|
2937
2946
|
text,
|
2938
2947
|
withDelete ? (React.createElement("button", { "data-testid": tagDeleteTestId, className: 'delete', onClick: onDeleteClick !== null && onDeleteClick !== void 0 ? onDeleteClick : undefined })) : null));
|
2939
2948
|
};
|
@@ -3184,7 +3193,7 @@ const BreadcrumbItem = ({ testId = null, containerTestId = null, cssClasses = nu
|
|
3184
3193
|
});
|
3185
3194
|
const breadcrumbItemTestId = testId !== null && testId !== void 0 ? testId : parseTestId({ tag: 'breadcrumbItem', parsedClasses: breadcrumbItemClasses });
|
3186
3195
|
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)));
|
3196
|
+
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
3197
|
};
|
3189
3198
|
|
3190
3199
|
const DropdownTrigger = ({ testId = null, containerTestId = null, cssClasses = null, containerCssClasses = null, style = null, containerStyle = null, menuText, dropdownPointer = 'dropdown-menu', onClick = null }) => {
|
@@ -3234,6 +3243,16 @@ const DropdownItem = ({ testId = null, cssClasses = null, style = null, itemText
|
|
3234
3243
|
}
|
3235
3244
|
};
|
3236
3245
|
|
3246
|
+
const MenuItem = ({ testId = null, cssClasses = null, style = null, text, isActive = null, onClick = null }) => {
|
3247
|
+
const menuItemClasses = parseClasses([
|
3248
|
+
'menuItem',
|
3249
|
+
isActive ? 'is-active' : null,
|
3250
|
+
cssClasses
|
3251
|
+
]);
|
3252
|
+
const menuItemTestId = testId !== null && testId !== void 0 ? testId : parseTestId({ tag: 'menuItem', parsedClasses: menuItemClasses });
|
3253
|
+
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
|
+
};
|
3255
|
+
|
3237
3256
|
const ButtonGroup = ({ testId = null, cssClasses = null, style = null, buttonList, isAttached = false, position = 'left' }) => {
|
3238
3257
|
const buttonGroupClasses = parseClasses([
|
3239
3258
|
'buttons',
|
@@ -3255,12 +3274,12 @@ const ButtonGroup = ({ testId = null, cssClasses = null, style = null, buttonLis
|
|
3255
3274
|
}
|
3256
3275
|
]
|
3257
3276
|
});
|
3258
|
-
return (React.createElement("section", { "data-testid": buttonGroupTestId, className: buttonGroupClasses, style: style !== null && style !== void 0 ? style : undefined }, buttonList.map((currentButtonItem,
|
3277
|
+
return (React.createElement("section", { "data-testid": buttonGroupTestId, className: buttonGroupClasses, style: style !== null && style !== void 0 ? style : undefined }, buttonList.map((currentButtonItem, _, originalButtonList) => {
|
3259
3278
|
const hasSelectedButton = originalButtonList.some(({ isSelected }) => isSelected);
|
3260
3279
|
const shouldApplyColor = (hasSelectedButton && currentButtonItem.isSelected) ||
|
3261
3280
|
!hasSelectedButton;
|
3262
3281
|
const buttonConfig = Object.assign(Object.assign({}, currentButtonItem), { color: shouldApplyColor ? currentButtonItem.color : undefined });
|
3263
|
-
return (React.createElement(Button, Object.assign({ key: `button-group-item-${
|
3282
|
+
return (React.createElement(Button, Object.assign({ key: `button-group-item-${parseKey()}` }, buttonConfig)));
|
3264
3283
|
})));
|
3265
3284
|
};
|
3266
3285
|
|
@@ -3288,7 +3307,7 @@ const ColumnGroup = ({ testId = null, cssClasses = null, style = null, listOfCol
|
|
3288
3307
|
tag: 'columns',
|
3289
3308
|
parsedClasses: columnGroupClasses
|
3290
3309
|
});
|
3291
|
-
return (React.createElement("section", { "data-testid": columnGroupTestId, className: columnGroupClasses, style: style !== null && style !== void 0 ? style : undefined }, listOfColumns.map(
|
3310
|
+
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
3311
|
};
|
3293
3312
|
|
3294
3313
|
const Notification = ({ testId = null, cssClasses = null, style = null, children = null, deleteButton = null, color = null, isLightColor = null }) => {
|
@@ -3330,14 +3349,14 @@ const Breadcrumbs = ({ testId = 'breadcrumbs', containerTestId = null, cssClasse
|
|
3330
3349
|
]
|
3331
3350
|
});
|
3332
3351
|
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(
|
3352
|
+
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
3353
|
};
|
3335
3354
|
|
3336
3355
|
const renderDropdownMenu = (items) => (React.createElement("section", { className: 'dropdown-content' }, items.map((dropdownItemConfig, i) => {
|
3337
3356
|
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-${
|
3357
|
+
return isFirstItemInMenu ? (React.createElement(DropdownItem, Object.assign({ key: `dropdown-item-${parseKey()}` }, dropdownItemConfig))) : (React.createElement("section", { key: `dropdown-item-${parseKey()}-section` },
|
3358
|
+
React.createElement(DropdownItem, { key: `dropdown-item-${parseKey()}-divider`, type: 'divider', itemText: 'divider' }),
|
3359
|
+
React.createElement(DropdownItem, Object.assign({ key: `dropdown-item-${parseKey()}` }, dropdownItemConfig))));
|
3341
3360
|
})));
|
3342
3361
|
const Dropdown = ({ testId = null, cssClasses = null, style = null, inputText, dropdownPointer = 'dropdown-menu', listOfItems }) => {
|
3343
3362
|
const [isMenuActive, setIsMenuActive] = reactExports.useState(false);
|
@@ -3364,5 +3383,28 @@ const Message = ({ testId = null, cssClasses = null, style = null, headerText =
|
|
3364
3383
|
React.createElement("section", { "data-testid": `${messageTestId}-body`, className: 'message-body' }, bodyText)));
|
3365
3384
|
};
|
3366
3385
|
|
3367
|
-
|
3386
|
+
const MenuList = ({ testId = null, cssClasses = null, style = null, itemList }) => {
|
3387
|
+
const menuListClasses = parseClasses(['menu-list', cssClasses]);
|
3388
|
+
const menuListTestId = testId !== null && testId !== void 0 ? testId : parseTestId({ tag: 'menu-list', parsedClasses: menuListClasses });
|
3389
|
+
return (React.createElement("ul", { "data-testid": menuListTestId, className: menuListClasses, style: style !== null && style !== void 0 ? style : undefined }, itemList.map(item => {
|
3390
|
+
if ('subListTitle' in item) {
|
3391
|
+
return (React.createElement("li", { key: `sub-list-menu-item-${parseKey()}` },
|
3392
|
+
React.createElement(MenuItem, Object.assign({}, item.subListTitle)),
|
3393
|
+
React.createElement("ul", null, item.subItems.map(subItem => (React.createElement(MenuItem, Object.assign({ key: `sub-list-menu-sub-item-${parseKey()}` }, subItem)))))));
|
3394
|
+
}
|
3395
|
+
else {
|
3396
|
+
return (React.createElement(MenuItem, Object.assign({ key: `sub-list-item-${parseKey()}` }, item)));
|
3397
|
+
}
|
3398
|
+
})));
|
3399
|
+
};
|
3400
|
+
|
3401
|
+
const Menu = ({ testId = null, cssClasses = null, style = null, menuSections }) => {
|
3402
|
+
const menuClasses = parseClasses(['menu', cssClasses]);
|
3403
|
+
const menuTestId = testId !== null && testId !== void 0 ? testId : parseTestId({ tag: 'menu', parsedClasses: menuClasses });
|
3404
|
+
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()}` },
|
3405
|
+
React.createElement("p", { key: `section-label-${parseKey()}`, className: 'menu-label' }, section.label),
|
3406
|
+
React.createElement(MenuList, { key: `section-menu-list-${parseKey()}`, itemList: section.itemList }))))));
|
3407
|
+
};
|
3408
|
+
|
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 };
|
3368
3410
|
//# sourceMappingURL=index.js.map
|