reactive-bulma 2.0.0 → 2.1.1

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

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

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

@@ -0,0 +1 @@
+export { default as ButtonGroup } from './ButtonGroup';

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

@@ -1,3 +1,4 @@
 import '../node_modules/bulma/css/bulma.min.css';
 import '../node_modules/@mdi/font/css/materialdesignicons.min.css';
 export * from './components/atoms';
+export * from './components/molecules';

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

@@ -1,20 +1,7 @@
 import React from 'react';
+import { BasicProps } from './commonProps';
 import { basicColorType, columnOffsetType, columnSizeType, fixedImageSizeType, iconColorModeType, basicSizeType, textColorType, titleSizeType } from '../types/styleTypes';
 import { inputTypes } from '../types/domTypes';
-interface BasicProps {
-    /** `Attribute` ID used to locate the element in unit test suites (like Jest) */
-    testId?: string;
-    /** `Attribute` *For container case*. ID used to locate the element in unit test suites (like Jest) */
-    containerTestId?: string;
-    /** `Attribute` Custom CSS classes, applicable for specific scenarios */
-    cssClasses?: string;
-    /** `Attribute` *For container case*. Custom CSS classes, applicable for specific scenarios */
-    containerCssClasses?: string;
-    /** `Attribute` Custom styling applicable for specific scenarios */
-    style?: React.CSSProperties;
-    /** `Attribute` *For container case*. Custom styling applicable for specific scenarios */
-    containerStyle?: React.CSSProperties;
-}
 export interface ColumnProps extends BasicProps, 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[];
@@ -44,6 +31,8 @@ export interface ButtonProps extends BasicProps, React.ComponentPropsWithoutRef<
     isLoading?: boolean;
     /** `Styling` Similar to `isDisabled`, but will remove any color style */
     isStatic?: boolean;
+    /** `Styling` Sets the button style when a User selects it (useful for an attached `ButtonGroup`) */
+    isSelected?: boolean;
     /** `Styling` Set button's size on bulma's size tokens */
     size?: basicSizeType;
     /** `Function` Click function, alone does not nothing, but can be reused for other components */
@@ -240,4 +229,3 @@ export interface RadioButtonProps extends BasicProps {
     /** `Function` Click function, alone does not nothing, but can be reused for other components */
     onChange?: () => void;
 }
-export {};

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

@@ -0,0 +1,33 @@
+/// <reference types="react" />
+export interface BasicProps {
+    /** `Attribute` ID used to locate the element in unit test suites (like Jest) */
+    testId?: string;
+    /** `Attribute` *For container case*. ID used to locate the element in unit test suites (like Jest) */
+    containerTestId?: string;
+    /** `Attribute` Custom CSS classes, applicable for specific scenarios */
+    cssClasses?: string;
+    /** `Attribute` *For container case*. Custom CSS classes, applicable for specific scenarios */
+    containerCssClasses?: string;
+    /** `Attribute` Custom styling applicable for specific scenarios */
+    style?: React.CSSProperties;
+    /** `Attribute` *For container case*. Custom styling applicable for specific scenarios */
+    containerStyle?: React.CSSProperties;
+}
+export interface ContainerProps {
+    /** `Attribute` *For container case*. ID used to locate the element in unit test suites (like Jest) */
+    containerTestId?: string;
+    /** `Attribute` *For container case*. Custom CSS classes, applicable for specific scenarios */
+    containerCssClasses?: string;
+    /** `Attribute` *For container case*. Custom styling applicable for specific scenarios */
+    containerStyle?: React.CSSProperties;
+}
+export interface ElementProps {
+    /** `Attribute` ID used to locate the element in unit test suites (like Jest) */
+    testId?: string;
+    /** `Attribute` Custom CSS classes, applicable for specific scenarios */
+    cssClasses?: string;
+    /** `Attribute` Custom styling applicable for specific scenarios */
+    style?: React.CSSProperties;
+}
+export interface ComponentProps extends BasicProps, ElementProps {
+}

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

@@ -0,0 +1,10 @@
+import { ElementProps } from './commonProps';
+import { ButtonProps } from './atomProps';
+export interface ButtonGroupProps extends ElementProps {
+    /** `Atribute` Array of button objects that will be shown */
+    buttonList: ButtonProps[];
+    /** `Styling` Will group the list of buttonList in a single line */
+    isAttached?: boolean;
+    /** `Styling` Sets group position on the container */
+    position?: 'left' | 'centered' | 'right';
+}

package/dist/esm/index.js

@@ -2860,7 +2860,7 @@ const parseTestId = (config) => {
     return `test-${config.tag}${fixedClassString.replace(/ /gm, (_a = config.separator) !== null && _a !== void 0 ? _a : '')}`;
 };
 
-const Button = ({ testId = null, cssClasses = null, style = null, type = 'button', text = null, isDisabled = false, color = 'is-primary', isLightColor = false, isInvertedColor = false, isOutlined = false, isRounded = false, isLoading = false, isStatic = false, size = null, onClick = null }) => {
+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 }) => {
     const buttonClasses = parseClasses([
         'button',
         color,
@@ -2870,6 +2870,7 @@ const Button = ({ testId = null, cssClasses = null, style = null, type = 'button
         isRounded ? 'is-rounded' : null,
         isLoading ? 'is-loading' : null,
         isStatic ? 'is-static' : null,
+        isSelected ? 'is-selected' : null,
         size,
         cssClasses
     ]);
@@ -3170,5 +3171,35 @@ const RadioButton = ({ containerTestId = null, containerCssClasses = null, conta
     return (React.createElement("section", { "data-testid": radioButtonContainerTestId, className: radioButtonContainerClasses, style: containerStyle !== null && containerStyle !== void 0 ? containerStyle : undefined }, options.map((_option, i) => renderRadioButton(Object.assign(Object.assign({}, _option), { name, onChange: onChange !== null && onChange !== void 0 ? onChange : undefined }), i))));
 };
 
-export { Block, Box, Button, CheckBox as Checkbox, Column, Delete, File, Icon, Input, ProgressBar, RadioButton, Select, Tag, TextArea, Title };
+const ButtonGroup = ({ testId = null, cssClasses = null, style = null, buttonList, isAttached = false, position = 'left' }) => {
+    const buttonGroupClasses = parseClasses([
+        'buttons',
+        isAttached ? 'has-addons' : null,
+        !position || position === 'left' ? null : `is-${position}`,
+        cssClasses
+    ]);
+    const buttonGroupTestId = testId !== null && testId !== void 0 ? testId : parseTestId({
+        tag: 'buttons',
+        parsedClasses: buttonGroupClasses,
+        rules: [
+            {
+                regExp: /has-|is-/gm,
+                replacer: '-'
+            },
+            {
+                regExp: /buttons/gm,
+                replacer: ''
+            }
+        ]
+    });
+    return (React.createElement("section", { "data-testid": buttonGroupTestId, className: buttonGroupClasses, style: style !== null && style !== void 0 ? style : undefined }, buttonList.map((currentButtonItem, i, originalButtonList) => {
+        const hasSelectedButton = originalButtonList.some(({ isSelected }) => isSelected);
+        const shouldApplyColor = (hasSelectedButton && currentButtonItem.isSelected) ||
+            !hasSelectedButton;
+        const buttonConfig = Object.assign(Object.assign({}, currentButtonItem), { color: shouldApplyColor ? currentButtonItem.color : undefined });
+        return (React.createElement(Button, Object.assign({ key: `button-list-item-${i}` }, buttonConfig)));
+    })));
+};
+
+export { Block, Box, Button, ButtonGroup, CheckBox as Checkbox, Column, Delete, File, Icon, Input, ProgressBar, RadioButton, Select, Tag, TextArea, Title };
 //# sourceMappingURL=index.js.map