reactive-bulma 2.4.0 → 2.6.0

package/dist/cjs/types/components/atoms/DropdownItem/index.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { DropdownItemProps } from '../../../interfaces/atomProps';
+declare const DropdownItem: React.FC<DropdownItemProps>;
+export default DropdownItem;

package/dist/cjs/types/components/atoms/DropdownTrigger/index.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { DropdownTriggerProps } from '../../../interfaces/atomProps';
+declare const DropdownTrigger: React.FC<DropdownTriggerProps>;
+export default DropdownTrigger;

package/dist/cjs/types/components/atoms/index.d.ts

@@ -14,3 +14,5 @@ export { default as File } from './File';
 export { default as Checkbox } from './Checkbox';
 export { default as RadioButton } from './RadioButton';
 export { default as BreadcrumbItem } from './BreadcrumbItem';
+export { default as DropdownTrigger } from './DropdownTrigger';
+export { default as DropdownItem } from './DropdownItem';

package/dist/cjs/types/components/molecules/Dropdown/index.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { DropdownProps } from '../../../interfaces/moleculeProps';
+declare const Dropdown: React.FC<DropdownProps>;
+export default Dropdown;

package/dist/cjs/types/components/molecules/Message/index.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { MessageProps } from '../../../interfaces/moleculeProps';
+declare const Message: React.FC<MessageProps>;
+export default Message;

package/dist/cjs/types/components/molecules/index.d.ts

@@ -2,3 +2,5 @@ export { default as ButtonGroup } from './ButtonGroup';
 export { default as ColumnGroup } from './ColumnGroup';
 export { default as Notification } from './Notification';
 export { default as Breadcrumbs } from './Breadcrumbs';
+export { default as Dropdown } from './Dropdown';
+export { default as Message } from './Message';

package/dist/cjs/types/interfaces/atomProps.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
-import { ElementProps, ComposedElementProps } from './commonProps';
+import { ElementProps, ComposedElementProps, ClickeableProps } from './commonProps';
 import { basicColorType, columnOffsetType, columnSizeType, fixedImageSizeType, iconColorModeType, basicSizeType, textColorType, titleSizeType } from '../types/styleTypes';
-import { inputTypes } from '../types/domTypes';
+import { DropdownItemType, inputTypes } from '../types/domTypes';
 export interface ColumnProps extends ElementProps, React.ComponentPropsWithoutRef<'section'> {
     /** `Attribute` Reffers to the component or array of components that will be shown inside the column */
     children?: string | React.ReactElement | React.ReactElement[];
@@ -118,7 +118,7 @@ export interface IconProps extends ComposedElementProps {
     /** `Styling` Animates the icon spinning 360° */
     isSpinning?: boolean;
 }
-export interface InputProps extends ElementProps {
+export interface InputProps extends ElementProps, ClickeableProps {
     /** `Attribute` `Required` What type of input will be used */
     type: inputTypes;
     /** `Attribute` The value that will be shown on the input */
@@ -137,8 +137,6 @@ export interface InputProps extends ElementProps {
     isHovered?: boolean;
     /** `Styling` Will add a specific border when the input is focused by the user */
     isFocused?: boolean;
-    /** `Function` Click function. Alone does not nothing, but can be reused for other components */
-    onClick?: () => void;
     /** `Function` Reffers to each time the user press a key. Alone does not nothing, but can be reused for other components */
     onChange?: () => void;
 }
@@ -150,18 +148,16 @@ export interface TextAreaProps extends Omit<InputProps, 'isRounded' | 'type'> {
     /** `Styling` Will disable characteristic sizable property by removing its control on bottom-right corner */
     isFixedSize?: boolean;
 }
-export interface DeleteProps extends ElementProps {
+export interface DeleteProps extends ElementProps, ClickeableProps {
     /** `Styling` Set icons's size */
     size?: Exclude<basicSizeType, 'is-normal'>;
-    /** `Function` Click function. Alone does not nothing, but can be reused for other components */
-    onClick?: () => void;
 }
 export interface SelectOption {
     id: string | number;
     name: string;
     selected?: boolean;
 }
-export interface SelectProps extends ComposedElementProps {
+export interface SelectProps extends ComposedElementProps, ClickeableProps {
     /** `Attribute` Indicates the options contained on the select */
     options?: SelectOption[];
     /** `Attribute` Indicates how many options will be shown at first glance (before looking for the whole list */
@@ -178,10 +174,8 @@ export interface SelectProps extends ComposedElementProps {
     isHovered?: boolean;
     /** `Styling`Will add a specific border when the input is focused by the user */
     isFocused?: boolean;
-    /** `Function` Click function. Alone does not nothing, but can be reused for other components */
-    onClick?: () => void;
 }
-export interface FileProps extends ComposedElementProps {
+export interface FileProps extends ComposedElementProps, ClickeableProps {
     /** `Attribute` The name of the file to be uploaded */
     fileName?: string;
     /** `Attribute` The icon displayed in file's button" */
@@ -198,8 +192,6 @@ export interface FileProps extends ComposedElementProps {
     color?: basicColorType;
     /** `Styling` Set button's size */
     size?: basicSizeType;
-    /** `Function` Click function, alone does not nothing, but can be reused for other components */
-    onClick?: () => void;
 }
 export interface CheckBoxProps extends ComposedElementProps {
     /** `Attribute` Sets checkbox's text that will be shown next to its control */
@@ -229,11 +221,23 @@ export interface RadioButtonProps extends ComposedElementProps {
     /** `Function` Click function, alone does not nothing, but can be reused for other components */
     onChange?: () => void;
 }
-export interface BreadcrumbItemProps extends ComposedElementProps {
+export interface BreadcrumbItemProps extends ComposedElementProps, ClickeableProps {
     /** `Attribute` `Required` Indicates item text that will be shown */
     text: string;
     /** `Styling` Marks the item as the one where user is located (based on breadcrumb hierarchy) */
     isActiveItem?: boolean;
-    /** `Function` Click function, alone does not nothing, but can be reused for other components */
-    onClick?: () => void;
+}
+export interface DropdownTriggerProps extends ComposedElementProps, ClickeableProps {
+    /** `Attribute` `Required` Sets the name will be shown on the dropdown input */
+    menuText: string;
+    /** `Attribute` Sets a relationship between trigger's button and dropdown's menu to toggle display */
+    dropdownPointer?: string;
+}
+export interface DropdownItemProps extends ElementProps, ClickeableProps {
+    /** `Attribute` `Required` Sets the name will be shown on the item */
+    itemText: string;
+    /** `Attribute` Changes item's composition into a `<hr>`, a `<a>` or a `<div>` depending its type */
+    type?: DropdownItemType;
+    /** `Styling` Marks the item as the one where user is located (based on dropdown hierarchy) */
+    isActiveItem?: boolean;
 }

package/dist/cjs/types/interfaces/commonProps.d.ts

@@ -17,3 +17,7 @@ export interface ElementProps {
 }
 export interface ComposedElementProps extends ElementProps, ContainerProps {
 }
+export interface ClickeableProps {
+    /** `Function` Click function, alone does not nothing, but can be reused for other components */
+    onClick?: () => void;
+}

package/dist/cjs/types/interfaces/moleculeProps.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { ComposedElementProps, ElementProps } from './commonProps';
-import { BreadcrumbItemProps, ButtonProps, ColumnProps, DeleteProps } from './atomProps';
+import { BreadcrumbItemProps, ButtonProps, ColumnProps, DeleteProps, DropdownItemProps } from './atomProps';
 import { basicColorType, basicSizeType, breadcrumbAlignType, breadcrumbSeparatorType, columnGapType } from '../types/styleTypes';
 export interface ButtonGroupProps extends ElementProps {
     /** `Atribute` `Required` Array of `Button` objects that will be shown */
@@ -44,3 +44,23 @@ export interface BreadcrumbsProps extends ComposedElementProps {
     /** `Styling` Set button's size on bulma's size tokens */
     size?: Exclude<basicSizeType, 'is-normal'>;
 }
+export interface DropdownProps extends ElementProps {
+    /** `Atribute` `Required` Sets the name will be shown on the dropdown input */
+    inputText: string;
+    /** `Attribute` Sets a relationship between dropdown trigger's button and dropdown's menu to toggle display */
+    dropdownPointer?: string;
+    /** `Atribute` `Required` Array of `DropdownItem` objects that will be shown on its menu */
+    listOfItems: DropdownItemProps[];
+}
+export interface MessageProps extends ElementProps {
+    /** `Atribute` Sets the header's text that will be shown on message's darker zone */
+    headerText?: string;
+    /** `Atribute` `Required` Sets the body's text that will be shown on message's lighter zone */
+    bodyText: string;
+    /** `Atribute` Includes a `Delete` config object that will be shown */
+    deleteButton?: DeleteProps;
+    /** `Styling` Color based on bulma's color tokens */
+    color?: basicColorType;
+    /** `Styling` Set button's size on bulma's size tokens */
+    size?: Exclude<basicSizeType, 'is-normal'>;
+}

package/dist/cjs/types/types/domTypes.d.ts

@@ -1,2 +1,3 @@
 export type buttonType = 'submit' | 'reset' | 'button';
 export type inputTypes = 'text' | 'password' | 'email' | 'tel';
+export type DropdownItemType = 'item' | 'link' | 'divider';

package/dist/esm/index.js

@@ -3187,6 +3187,53 @@ const BreadcrumbItem = ({ testId = null, containerTestId = null, cssClasses = nu
         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)));
 };
 
+const DropdownTrigger = ({ testId = null, containerTestId = null, cssClasses = null, containerCssClasses = null, style = null, containerStyle = null, menuText, dropdownPointer = 'dropdown-menu', onClick = null }) => {
+    const dropdownTriggerContainerClasses = parseClasses([
+        'dropdown-trigger',
+        containerCssClasses
+    ]);
+    const dropdownTriggerContainerTestId = containerTestId !== null && containerTestId !== void 0 ? containerTestId : parseTestId({
+        tag: 'dropdown-trigger',
+        parsedClasses: dropdownTriggerContainerClasses
+    });
+    const dropdownTriggerClasses = parseClasses(['button', cssClasses]);
+    const dropdownTriggerTestId = testId !== null && testId !== void 0 ? testId : parseTestId({ tag: 'button', parsedClasses: dropdownTriggerClasses });
+    return (React.createElement("section", { "data-testid": dropdownTriggerContainerTestId, className: dropdownTriggerContainerClasses, style: containerStyle !== null && containerStyle !== void 0 ? containerStyle : undefined },
+        React.createElement("button", { "data-testid": dropdownTriggerTestId, className: dropdownTriggerClasses, style: style !== null && style !== void 0 ? style : undefined, "aria-haspopup": 'true', "aria-controls": dropdownPointer, onClick: onClick !== null && onClick !== void 0 ? onClick : undefined },
+            React.createElement("span", null, menuText),
+            React.createElement("span", { className: 'icon is-small' },
+                React.createElement("i", { className: 'mdi mdi-chevron-down', "aria-hidden": 'true' })))));
+};
+
+const DropdownItem = ({ testId = null, cssClasses = null, style = null, itemText, type = 'item', isActiveItem = false, onClick = null }) => {
+    const isDivider = type === 'divider';
+    const itemTypeClass = isDivider ? 'dropdown-divider' : 'dropdown-item';
+    const dropdownItemClasses = parseClasses([
+        itemTypeClass,
+        isActiveItem && !isDivider ? 'is-active' : null,
+        cssClasses
+    ]);
+    const dropdownItemConfig = {
+        'data-testid': testId !== null && testId !== void 0 ? testId : parseTestId({
+            tag: itemTypeClass,
+            parsedClasses: `${dropdownItemClasses}-${type}`
+        }),
+        'className': dropdownItemClasses,
+        'style': style !== null && style !== void 0 ? style : undefined,
+        'onClick': onClick !== null && onClick !== void 0 ? onClick : undefined
+    };
+    switch (type) {
+        case 'item':
+            return (React.createElement("div", Object.assign({}, dropdownItemConfig),
+                React.createElement("p", null, itemText)));
+        case 'divider':
+            return React.createElement("hr", Object.assign({}, dropdownItemConfig));
+        case 'link':
+        default:
+            return React.createElement("a", Object.assign({}, dropdownItemConfig), itemText);
+    }
+};
+
 const ButtonGroup = ({ testId = null, cssClasses = null, style = null, buttonList, isAttached = false, position = 'left' }) => {
     const buttonGroupClasses = parseClasses([
         'buttons',
@@ -3286,5 +3333,36 @@ const Breadcrumbs = ({ testId = 'breadcrumbs', containerTestId = null, cssClasse
         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)))))));
 };
 
-export { Block, Box, BreadcrumbItem, Breadcrumbs, Button, ButtonGroup, CheckBox as Checkbox, Column, ColumnGroup, Delete, File, Icon, Input, Notification, ProgressBar, RadioButton, Select, Tag, TextArea, Title };
+const renderDropdownMenu = (items) => (React.createElement("section", { className: 'dropdown-content' }, items.map((dropdownItemConfig, i) => {
+    const isFirstItemInMenu = items.length > 1 && i === 0;
+    return isFirstItemInMenu ? (React.createElement(DropdownItem, Object.assign({ key: `dropdown-item-${i}` }, dropdownItemConfig))) : (React.createElement("section", { key: `dropdown-item-${i}-section` },
+        React.createElement(DropdownItem, { key: `dropdown-item-${i}-divider`, type: 'divider', itemText: 'divider' }),
+        React.createElement(DropdownItem, Object.assign({ key: `dropdown-item-${i}` }, dropdownItemConfig))));
+})));
+const Dropdown = ({ testId = null, cssClasses = null, style = null, inputText, dropdownPointer = 'dropdown-menu', listOfItems }) => {
+    const [isMenuActive, setIsMenuActive] = reactExports.useState(false);
+    const dropdownClasses = parseClasses([
+        'dropdown',
+        isMenuActive ? 'is-active' : null,
+        cssClasses
+    ]);
+    const dropdownTestId = testId !== null && testId !== void 0 ? testId : parseTestId({ tag: 'dropdown', parsedClasses: dropdownClasses });
+    return (React.createElement("section", { "data-testid": dropdownTestId, className: dropdownClasses, style: style !== null && style !== void 0 ? style : undefined },
+        React.createElement(DropdownTrigger, { menuText: inputText,
+            dropdownPointer,
+            onClick: () => setIsMenuActive(!isMenuActive) }),
+        React.createElement("section", { className: 'dropdown-menu', id: dropdownPointer, role: 'menu' }, renderDropdownMenu(listOfItems))));
+};
+
+const Message = ({ testId = null, cssClasses = null, style = null, headerText = null, bodyText, deleteButton = null, color = null, size = null }) => {
+    const messageClasses = parseClasses(['message', color, size, cssClasses]);
+    const messageTestId = testId !== null && testId !== void 0 ? testId : parseTestId({ tag: 'message', parsedClasses: messageClasses });
+    return (React.createElement("article", { "data-testid": messageTestId, className: messageClasses, style: style !== null && style !== void 0 ? style : undefined },
+        headerText && (React.createElement("section", { "data-testid": `${messageTestId}-header`, className: 'message-header' },
+            React.createElement("p", null, headerText),
+            deleteButton ? React.createElement(Delete, Object.assign({}, deleteButton)) : null)),
+        React.createElement("section", { "data-testid": `${messageTestId}-body`, className: 'message-body' }, bodyText)));
+};
+
+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 };
 //# sourceMappingURL=index.js.map