reactive-bulma 1.20.0 → 1.20.1

package/dist/cjs/index.js

@@ -2862,7 +2862,7 @@ const parseTestId = (config) => {
     return `test-${config.tag}${fixedClassString.replace(/ /gm, (_a = config.separator) !== null && _a !== void 0 ? _a : '')}`;
 };
 
-const Button = ({ text = null, type = 'button', testId = null, style = null, color = 'is-primary', isLightColor = false, isInvertedColor = false, isOutlined = false, isRounded = false, isLoading = false, isDisabled = false, isStatic = false, size = null, onClick = null }) => {
+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 buttonClasses = parseClasses([
         'button',
         color,
@@ -2872,72 +2872,88 @@ const Button = ({ text = null, type = 'button', testId = null, style = null, col
         isRounded ? 'is-rounded' : null,
         isLoading ? 'is-loading' : null,
         isStatic ? 'is-static' : null,
-        size
+        size,
+        cssClasses
     ]);
-    const _testId = testId !== null && testId !== void 0 ? testId : parseTestId({ tag: 'button', parsedClasses: buttonClasses });
-    return (React.createElement("button", { "data-testid": _testId, type: type, className: buttonClasses, style: style !== null && style !== void 0 ? style : undefined, disabled: isDisabled !== null && isDisabled !== void 0 ? isDisabled : false, onClick: onClick !== null && onClick !== void 0 ? onClick : undefined }, text));
+    const buttonTestId = testId !== null && testId !== void 0 ? testId : parseTestId({ tag: 'button', parsedClasses: buttonClasses });
+    return (React.createElement("button", { "data-testid": buttonTestId, type: type, className: buttonClasses, style: style !== null && style !== void 0 ? style : undefined, disabled: isDisabled !== null && isDisabled !== void 0 ? isDisabled : false, onClick: onClick !== null && onClick !== void 0 ? onClick : undefined }, text));
 };
 
-const Column = ({ testId = null, style = null, size = null, offset = null, isNarrow = false, children = null }) => {
+const Column = ({ testId = null, cssClasses = null, style = null, children = null, size = null, offset = null, isNarrow = false }) => {
     const columnClasses = parseClasses([
         'column',
         size,
         offset,
-        isNarrow ? 'is-narrow' : null
+        isNarrow ? 'is-narrow' : null,
+        cssClasses
     ]);
-    const _testId = testId !== null && testId !== void 0 ? testId : parseTestId({ tag: 'column', parsedClasses: columnClasses });
-    return (React.createElement("section", { "data-testid": _testId, className: columnClasses, style: style !== null && style !== void 0 ? style : undefined }, children));
+    const columnTestId = testId !== null && testId !== void 0 ? testId : parseTestId({ tag: 'column', parsedClasses: columnClasses });
+    return (React.createElement("section", { "data-testid": columnTestId, className: columnClasses, style: style !== null && style !== void 0 ? style : undefined }, children));
 };
 
-const ProgressBar = ({ value = 0, max = 100, testId = null, style = null, color = 'is-primary', size = null, isLoading = false }) => {
+const ProgressBar = ({ testId = null, cssClasses = null, style = null, value = 0, max = 100, color = 'is-primary', size = null, isLoading = false }) => {
     const fixedValue = value > max || value < 0 ? 0 : value;
-    const progressClasses = parseClasses(['progress', color, size]);
-    const _testId = testId !== null && testId !== void 0 ? testId : parseTestId({
+    const progressClasses = parseClasses([
+        'progress',
+        color,
+        size,
+        cssClasses
+    ]);
+    const progressTestId = testId !== null && testId !== void 0 ? testId : parseTestId({
         tag: 'progress',
         parsedClasses: progressClasses
     });
-    return (React.createElement("progress", { "data-testid": _testId, className: progressClasses, style: style !== null && style !== void 0 ? style : undefined, value: isLoading ? undefined : value, max: max }, `${isLoading ? 0 : fixedValue}%`));
+    return (React.createElement("progress", { "data-testid": progressTestId, className: progressClasses, style: style !== null && style !== void 0 ? style : undefined, value: isLoading ? undefined : value, max: max }, `${isLoading ? 0 : fixedValue}%`));
 };
 
-const Block = ({ testId = 'test-block', style = null, children = null }) => children ? (React.createElement("section", { "data-testid": testId, className: 'block', style: style !== null && style !== void 0 ? style : undefined }, children)) : null;
+const Block = ({ testId = 'test-block', cssClasses = 'block', style = null, children = null }) => children ? (React.createElement("section", { "data-testid": testId, className: cssClasses, style: style !== null && style !== void 0 ? style : undefined }, children)) : null;
 
-const Tag = ({ text, testId = null, style = null, color = null, isLight = null, isRounded = null, size = null, withDelete = false, withAddon = false, addonText = null, addonColor = null, onDeleteClick = null }) => {
-    const tagLabel = withAddon ? 'tags' : 'tag';
+const Tag = ({ testId = null, containerTestId = null, cssClasses = null, containerCssClasses = null, style = null, containerStyle = null, text, withDelete = false, withAddon = false, addonText = null, color = null, isLight = null, isRounded = null, size = null, addonColor = null, onDeleteClick = null }) => {
+    const tagContainerClasses = parseClasses([
+        'tags',
+        'has-addons',
+        size ? size.replace('is-', 'are-') : null,
+        containerCssClasses
+    ]);
     const tagClasses = parseClasses([
         'tag',
         color,
         isLight && !withAddon ? 'is-light' : null,
         isRounded && !withAddon ? 'is-rounded' : null,
-        size
-    ]);
-    const tagsWrapperClasses = parseClasses([
-        'tags',
-        'has-addons',
-        size ? size.replace('is-', 'are-') : null
+        size,
+        cssClasses
     ]);
-    const addonTagClasses = parseClasses(['tag', addonColor]);
-    const _testId = testId !== null && testId !== void 0 ? testId : parseTestId({
+    const tagAddonClasses = parseClasses(['tag', addonColor]);
+    const tagLabel = withAddon ? 'tags' : 'tag';
+    const tagTestId = testId !== null && testId !== void 0 ? testId : parseTestId({
         tag: tagLabel,
-        parsedClasses: withAddon ? tagsWrapperClasses : tagClasses,
+        parsedClasses: withAddon ? tagContainerClasses : tagClasses,
         separator: withAddon ? '-' : ''
     });
-    return withAddon ? (React.createElement("section", { "data-testid": _testId, style: style !== null && style !== void 0 ? style : undefined, className: tagsWrapperClasses },
-        React.createElement("span", { className: tagClasses }, text),
-        withDelete ? (React.createElement("a", { "data-testid": `${_testId}-delete`, className: 'tag is-delete', onClick: onDeleteClick !== null && onDeleteClick !== void 0 ? onDeleteClick : undefined })) : (React.createElement("span", { className: addonTagClasses }, addonText)))) : (React.createElement("span", { "data-testid": _testId, style: style !== null && style !== void 0 ? style : undefined, className: tagClasses },
+    const tagContainerTestId = containerTestId !== null && containerTestId !== void 0 ? containerTestId : `${tagTestId}-container`;
+    const tagDeleteTestId = `${tagTestId}-delete`;
+    return withAddon ? (React.createElement("section", { "data-testid": tagContainerTestId, style: containerStyle !== null && containerStyle !== void 0 ? containerStyle : undefined, className: tagContainerClasses },
+        React.createElement("span", { "data-testid": tagTestId, className: tagClasses }, text),
+        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 },
         text,
-        withDelete ? (React.createElement("button", { "data-testid": `${_testId}-delete`, className: 'delete', onClick: onDeleteClick !== null && onDeleteClick !== void 0 ? onDeleteClick : undefined })) : null));
+        withDelete ? (React.createElement("button", { "data-testid": tagDeleteTestId, className: 'delete', onClick: onDeleteClick !== null && onDeleteClick !== void 0 ? onDeleteClick : undefined })) : null));
 };
 
-const Box = ({ testId = 'test-box', style = null, children = null }) => children ? (React.createElement("section", { "data-testid": testId, className: 'box', style: style !== null && style !== void 0 ? style : undefined }, children)) : null;
+const Box = ({ testId = 'test-box', cssClasses = 'box', style = null, children = null }) => children ? (React.createElement("section", { "data-testid": testId, className: cssClasses, style: style !== null && style !== void 0 ? style : undefined }, children)) : null;
 
 const renderTitleSection = (section) => {
-    var _a, _b, _c;
+    var _a, _b;
+    if (!section)
+        return null;
+    const { type, size, isSpaced, cssClasses } = section;
     const sectionClasses = parseClasses([
-        section === null || section === void 0 ? void 0 : section.prop,
-        (_a = section === null || section === void 0 ? void 0 : section.size) !== null && _a !== void 0 ? _a : 'is-6',
-        (section === null || section === void 0 ? void 0 : section.prop) === 'title' && (section === null || section === void 0 ? void 0 : section.isSpaced) ? 'is-spaced' : null
+        type,
+        size !== null && size !== void 0 ? size : null,
+        type === 'title' && isSpaced ? 'is-spaced' : null,
+        cssClasses
     ]);
-    return section ? (React.createElement("p", { "data-testid": (_b = section === null || section === void 0 ? void 0 : section.testId) !== null && _b !== void 0 ? _b : `${section === null || section === void 0 ? void 0 : section.prop}-test`, className: sectionClasses, style: (_c = section.style) !== null && _c !== void 0 ? _c : undefined }, section === null || section === void 0 ? void 0 : section.text)) : null;
+    const sectionTestId = (_a = section === null || section === void 0 ? void 0 : section.testId) !== null && _a !== void 0 ? _a : `${section === null || section === void 0 ? void 0 : section.type}-test`;
+    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));
 };
 const Title = ({ main, secondary }) => (React.createElement(React.Fragment, null,
     renderTitleSection(main),
@@ -2965,16 +2981,22 @@ const generateIconContainer = (icon, color) => {
     });
     return (React.createElement("span", { "data-testid": containerTestId, className: containerClasses }, icon));
 };
-const Icon = ({ iconLabel, testId = null, text = null, style = null, color = null, size = null, colorMode = null, isSpinning = false }) => {
-    const iconSpanClasses = parseClasses(['icon', color, size]);
+const Icon = ({ testId = null, containerTestId = null, cssClasses = null, containerCssClasses = null, style = null, containerStyle = null, iconLabel, text = null, color = null, size = null, colorMode = null, isSpinning = false }) => {
+    const iconContainerClasses = parseClasses([
+        'icon',
+        color,
+        size,
+        containerCssClasses
+    ]);
     const iconClasses = parseClasses([
         'mdi',
         `mdi-${iconLabel}`,
         colorMode ? `mdi-${colorMode}` : null,
         isSpinning ? 'mdi-spin' : null,
-        size ? `mdi-${IconSizeEnum[size]}px` : 'mdi-24px'
+        size ? `mdi-${IconSizeEnum[size]}px` : 'mdi-24px',
+        cssClasses
     ]);
-    const _testId = testId !== null && testId !== void 0 ? testId : parseTestId({
+    const iconContainertestId = containerTestId !== null && containerTestId !== void 0 ? containerTestId : parseTestId({
         tag: 'icon',
         parsedClasses: iconClasses,
         rules: [
@@ -2989,39 +3011,41 @@ const Icon = ({ iconLabel, testId = null, text = null, style = null, color = nul
         ],
         separator: '-'
     });
-    const _internalTestId = `${_testId}-i`;
-    const iconComponent = (React.createElement("span", { "data-testid": _testId, style: style !== null && style !== void 0 ? style : undefined, className: iconSpanClasses },
-        React.createElement("i", { "data-testid": _internalTestId, className: iconClasses }),
+    const iconTestId = testId !== null && testId !== void 0 ? testId : `${iconContainertestId}-i`;
+    const iconComponent = (React.createElement("span", { "data-testid": iconContainertestId, className: iconContainerClasses, style: containerStyle !== null && containerStyle !== void 0 ? containerStyle : undefined },
+        React.createElement("i", { "data-testid": iconTestId, className: iconClasses, style: style !== null && style !== void 0 ? style : undefined }),
         text ? React.createElement("span", null, text) : null));
     return text ? generateIconContainer(iconComponent, color) : iconComponent;
 };
 
-const Input = ({ testId = null, type, text = null, isDisabled = false, isReadonly = false, style = null, color = null, size = null, isRounded = null, isHovered = null, isFocused = null, onClick = null, onChange = null }) => {
+const Input = ({ testId = null, cssClasses = null, style = null, type, text = null, isDisabled = false, isReadonly = false, color = null, size = null, isRounded = null, isHovered = null, isFocused = null, onClick = null, onChange = null }) => {
     const inputClasses = parseClasses([
         'input',
         color,
         size,
         isRounded ? 'is-rounded' : null,
         isHovered ? 'is-hovered' : null,
-        isFocused ? 'is-focused' : null
+        isFocused ? 'is-focused' : null,
+        cssClasses
     ]);
-    const _testId = testId !== null && testId !== void 0 ? testId : parseTestId({
+    const inputTestId = testId !== null && testId !== void 0 ? testId : parseTestId({
         tag: 'input',
         parsedClasses: inputClasses
     });
-    return (React.createElement("input", { "data-testid": _testId, type: type, defaultValue: text !== null && text !== void 0 ? text : undefined, disabled: isDisabled, readOnly: isReadonly, style: style !== null && style !== void 0 ? style : undefined, className: inputClasses, onClick: onClick !== null && onClick !== void 0 ? onClick : undefined, onChange: onChange !== null && onChange !== void 0 ? onChange : undefined }));
+    return (React.createElement("input", { "data-testid": inputTestId, type: type, defaultValue: text !== null && text !== void 0 ? text : undefined, disabled: isDisabled, readOnly: isReadonly, className: inputClasses, style: style !== null && style !== void 0 ? style : undefined, onClick: onClick !== null && onClick !== void 0 ? onClick : undefined, onChange: onChange !== null && onChange !== void 0 ? onChange : undefined }));
 };
 
-const TextArea = ({ testId = null, text = null, cols = null, rows = null, isDisabled = false, isReadonly = false, isFixedSize = false, style = null, color = null, size = null, isHovered = null, isFocused = null, onClick = null, onChange = null }) => {
+const TextArea = ({ testId = null, cssClasses = null, style = null, text = null, cols = null, rows = null, isDisabled = false, isReadonly = false, isFixedSize = false, color = null, size = null, isHovered = null, isFocused = null, onClick = null, onChange = null }) => {
     const textAreaClasses = parseClasses([
         'textarea',
         color,
         size,
         isHovered ? 'is-hovered' : null,
         isFocused ? 'is-focused' : null,
-        isFixedSize ? 'has-fixed-size' : null
+        isFixedSize ? 'has-fixed-size' : null,
+        cssClasses
     ]);
-    const _testId = testId !== null && testId !== void 0 ? testId : parseTestId({
+    const textAreaTestId = testId !== null && testId !== void 0 ? testId : parseTestId({
         tag: 'textarea',
         parsedClasses: textAreaClasses,
         rules: [
@@ -3035,49 +3059,52 @@ const TextArea = ({ testId = null, text = null, cols = null, rows = null, isDisa
             }
         ]
     });
-    return (React.createElement("textarea", { "data-testid": _testId, defaultValue: text !== null && text !== void 0 ? text : undefined, cols: cols !== null && cols !== void 0 ? cols : undefined, rows: rows !== null && rows !== void 0 ? rows : undefined, disabled: isDisabled, readOnly: isReadonly, style: style !== null && style !== void 0 ? style : undefined, className: textAreaClasses, onClick: onClick !== null && onClick !== void 0 ? onClick : undefined, onChange: onChange !== null && onChange !== void 0 ? onChange : undefined }));
+    return (React.createElement("textarea", { "data-testid": textAreaTestId, defaultValue: text !== null && text !== void 0 ? text : undefined, cols: cols !== null && cols !== void 0 ? cols : undefined, rows: rows !== null && rows !== void 0 ? rows : undefined, disabled: isDisabled, readOnly: isReadonly, className: textAreaClasses, style: style !== null && style !== void 0 ? style : undefined, onClick: onClick !== null && onClick !== void 0 ? onClick : undefined, onChange: onChange !== null && onChange !== void 0 ? onChange : undefined }));
 };
 
-const Delete = ({ testId = null, style = null, size = null, onClick = null }) => {
-    const deleteClasses = parseClasses(['delete', size]);
-    const _testId = testId !== null && testId !== void 0 ? testId : parseTestId({
+const Delete = ({ testId = null, cssClasses = null, style = null, size = null, onClick = null }) => {
+    const deleteClasses = parseClasses(['delete', size, cssClasses]);
+    const deleteTestId = testId !== null && testId !== void 0 ? testId : parseTestId({
         tag: 'delete',
         parsedClasses: deleteClasses
     });
-    return (React.createElement("button", { "data-testid": _testId, style: style !== null && style !== void 0 ? style : undefined, className: deleteClasses, onClick: onClick !== null && onClick !== void 0 ? onClick : undefined }));
+    return (React.createElement("button", { "data-testid": deleteTestId, className: deleteClasses, style: style !== null && style !== void 0 ? style : undefined, onClick: onClick !== null && onClick !== void 0 ? onClick : undefined }));
 };
 
-const Select = ({ testId = null, showOptions = 1, options = [], isMultiple = false, color = null, size = null, isRounded = null, isHovered = null, isFocused = null, onClick = null }) => {
-    const selectClasses = parseClasses([
+const Select = ({ testId = null, containerTestId = null, cssClasses = null, containerCssClasses = null, style = null, containerStyle = null, options = [], showOptions = 1, isMultiple = false, color = null, size = null, isRounded = null, isHovered = null, isFocused = null, onClick = null }) => {
+    const containerSelectClasses = parseClasses([
         'select',
         color,
         size,
         isMultiple ? 'is-multiple' : null,
         isRounded ? 'is-rounded' : null,
         isHovered ? 'is-hovered' : null,
-        isFocused ? 'is-focused' : null
+        isFocused ? 'is-focused' : null,
+        containerCssClasses
     ]);
     const selectTestId = testId !== null && testId !== void 0 ? testId : parseTestId({
         tag: 'select',
-        parsedClasses: selectClasses
+        parsedClasses: containerSelectClasses
     });
-    return (React.createElement("section", { "data-testid": `${selectTestId}-container`, className: selectClasses },
-        React.createElement("select", { multiple: isMultiple, size: showOptions, "data-testid": selectTestId }, options.map(({ id, name, selected }, i) => (React.createElement("option", { "data-testid": `${selectTestId}-option-${i}`, key: id.toString(), selected: selected !== null && selected !== void 0 ? selected : false, onClick: onClick !== null && onClick !== void 0 ? onClick : undefined }, name))))));
+    const containerSelectTestId = containerTestId !== null && containerTestId !== void 0 ? containerTestId : `${selectTestId}-container`;
+    return (React.createElement("section", { "data-testid": containerSelectTestId, className: containerSelectClasses, style: containerStyle !== null && containerStyle !== void 0 ? containerStyle : undefined },
+        React.createElement("select", { "data-testid": selectTestId, className: cssClasses !== null && cssClasses !== void 0 ? cssClasses : undefined, style: style !== null && style !== void 0 ? style : undefined, multiple: isMultiple, size: showOptions }, options.map(({ id, name, selected }, i) => (React.createElement("option", { "data-testid": `${selectTestId}-option-${i}`, key: id.toString(), selected: selected !== null && selected !== void 0 ? selected : false, onClick: onClick !== null && onClick !== void 0 ? onClick : undefined }, name))))));
 };
 
-const File = ({ testId = null, fileName = null, uploadIcon = { iconLabel: 'upload' }, uploadText = 'Choose a file…', style = null, buttonOnRight = false, isFullWidth = false, isBoxed = false, color = null, size = null, onClick = null }) => {
-    const fileClasses = parseClasses([
+const File = ({ testId = null, containerTestId = null, cssClasses = null, containerCssClasses = null, style = null, containerStyle = null, fileName = null, uploadIcon = { iconLabel: 'upload' }, uploadText = 'Choose a file…', buttonOnRight = false, isFullWidth = false, isBoxed = false, color = null, size = null, onClick = null }) => {
+    const fileContainerClasses = parseClasses([
         'file',
         fileName ? 'has-name' : null,
         buttonOnRight ? 'is-right' : null,
         isFullWidth ? 'is-fullwidth' : null,
         isBoxed ? 'is-boxed' : null,
         color,
-        size
+        size,
+        containerCssClasses
     ]);
-    const fileTestId = testId !== null && testId !== void 0 ? testId : parseTestId({
+    const fileContainerTestId = containerTestId !== null && containerTestId !== void 0 ? containerTestId : parseTestId({
         tag: 'file',
-        parsedClasses: fileClasses,
+        parsedClasses: fileContainerClasses,
         rules: [
             {
                 usedRegExp: /has/gm,
@@ -3089,10 +3116,11 @@ const File = ({ testId = null, fileName = null, uploadIcon = { iconLabel: 'uploa
             }
         ]
     });
-    const fileInputTestId = `${fileTestId}-input`;
-    return (React.createElement("section", { "data-testid": fileTestId, className: fileClasses, style: style !== null && style !== void 0 ? style : undefined },
+    const fileInputClasses = cssClasses !== null && cssClasses !== void 0 ? cssClasses : 'file-input';
+    const fileInputTestId = testId !== null && testId !== void 0 ? testId : `${fileContainerTestId}-input`;
+    return (React.createElement("section", { "data-testid": fileContainerTestId, className: fileContainerClasses, style: containerStyle !== null && containerStyle !== void 0 ? containerStyle : undefined },
         React.createElement("label", { className: 'file-label' },
-            React.createElement("input", { "data-testid": fileInputTestId, className: 'file-input', type: 'file', name: 'resume', onClick: onClick !== null && onClick !== void 0 ? onClick : undefined }),
+            React.createElement("input", { "data-testid": fileInputTestId, type: 'file', name: 'resume', className: fileInputClasses, style: style !== null && style !== void 0 ? style : undefined, onClick: onClick !== null && onClick !== void 0 ? onClick : undefined }),
             React.createElement("span", { className: 'file-cta' },
                 uploadIcon ? React.createElement(Icon, Object.assign({}, uploadIcon)) : null,
                 React.createElement("span", { className: 'file-label' }, uploadText)),