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.
@@ -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;
@@ -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';
@@ -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;
@@ -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, i, originalButtonList) => {
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-${i}` }, buttonConfig)));
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((_columnItem, i) => (React.createElement(Column, Object.assign({ key: `column-group-item-${i}` }, _columnItem))))));
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((itemConfig, i) => (React.createElement(BreadcrumbItem, Object.assign({ key: `breadcrumb-item-${i}` }, itemConfig)))))));
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-${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))));
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
- 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 };
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