reactive-bulma 1.20.0 → 1.20.1
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 +95 -67
- package/dist/cjs/index.js.map +1 -1
- package/dist/cjs/types/components/atoms/Checkbox/index.d.ts +3 -3
- package/dist/cjs/types/functions/parsers.d.ts +1 -1
- package/dist/cjs/types/interfaces/atomProps.d.ts +113 -9
- package/dist/esm/index.js +95 -67
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/types/components/atoms/Checkbox/index.d.ts +3 -3
- package/dist/esm/types/functions/parsers.d.ts +1 -1
- package/dist/esm/types/interfaces/atomProps.d.ts +113 -9
- package/dist/index.d.ts +96 -8
- package/package.json +1 -1
package/dist/cjs/index.js
CHANGED
@@ -2862,7 +2862,7 @@ const parseTestId = (config) => {
|
|
2862
2862
|
return `test-${config.tag}${fixedClassString.replace(/ /gm, (_a = config.separator) !== null && _a !== void 0 ? _a : '')}`;
|
2863
2863
|
};
|
2864
2864
|
|
2865
|
-
const Button = ({
|
2865
|
+
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 }) => {
|
2866
2866
|
const buttonClasses = parseClasses([
|
2867
2867
|
'button',
|
2868
2868
|
color,
|
@@ -2872,72 +2872,88 @@ const Button = ({ text = null, type = 'button', testId = null, style = null, col
|
|
2872
2872
|
isRounded ? 'is-rounded' : null,
|
2873
2873
|
isLoading ? 'is-loading' : null,
|
2874
2874
|
isStatic ? 'is-static' : null,
|
2875
|
-
size
|
2875
|
+
size,
|
2876
|
+
cssClasses
|
2876
2877
|
]);
|
2877
|
-
const
|
2878
|
-
return (React.createElement("button", { "data-testid":
|
2878
|
+
const buttonTestId = testId !== null && testId !== void 0 ? testId : parseTestId({ tag: 'button', parsedClasses: buttonClasses });
|
2879
|
+
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));
|
2879
2880
|
};
|
2880
2881
|
|
2881
|
-
const Column = ({ testId = null,
|
2882
|
+
const Column = ({ testId = null, cssClasses = null, style = null, children = null, size = null, offset = null, isNarrow = false }) => {
|
2882
2883
|
const columnClasses = parseClasses([
|
2883
2884
|
'column',
|
2884
2885
|
size,
|
2885
2886
|
offset,
|
2886
|
-
isNarrow ? 'is-narrow' : null
|
2887
|
+
isNarrow ? 'is-narrow' : null,
|
2888
|
+
cssClasses
|
2887
2889
|
]);
|
2888
|
-
const
|
2889
|
-
return (React.createElement("section", { "data-testid":
|
2890
|
+
const columnTestId = testId !== null && testId !== void 0 ? testId : parseTestId({ tag: 'column', parsedClasses: columnClasses });
|
2891
|
+
return (React.createElement("section", { "data-testid": columnTestId, className: columnClasses, style: style !== null && style !== void 0 ? style : undefined }, children));
|
2890
2892
|
};
|
2891
2893
|
|
2892
|
-
const ProgressBar = ({
|
2894
|
+
const ProgressBar = ({ testId = null, cssClasses = null, style = null, value = 0, max = 100, color = 'is-primary', size = null, isLoading = false }) => {
|
2893
2895
|
const fixedValue = value > max || value < 0 ? 0 : value;
|
2894
|
-
const progressClasses = parseClasses([
|
2895
|
-
|
2896
|
+
const progressClasses = parseClasses([
|
2897
|
+
'progress',
|
2898
|
+
color,
|
2899
|
+
size,
|
2900
|
+
cssClasses
|
2901
|
+
]);
|
2902
|
+
const progressTestId = testId !== null && testId !== void 0 ? testId : parseTestId({
|
2896
2903
|
tag: 'progress',
|
2897
2904
|
parsedClasses: progressClasses
|
2898
2905
|
});
|
2899
|
-
return (React.createElement("progress", { "data-testid":
|
2906
|
+
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}%`));
|
2900
2907
|
};
|
2901
2908
|
|
2902
|
-
const Block = ({ testId = 'test-block', style = null, children = null }) => children ? (React.createElement("section", { "data-testid": testId, className:
|
2909
|
+
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;
|
2903
2910
|
|
2904
|
-
const Tag = ({
|
2905
|
-
const
|
2911
|
+
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 }) => {
|
2912
|
+
const tagContainerClasses = parseClasses([
|
2913
|
+
'tags',
|
2914
|
+
'has-addons',
|
2915
|
+
size ? size.replace('is-', 'are-') : null,
|
2916
|
+
containerCssClasses
|
2917
|
+
]);
|
2906
2918
|
const tagClasses = parseClasses([
|
2907
2919
|
'tag',
|
2908
2920
|
color,
|
2909
2921
|
isLight && !withAddon ? 'is-light' : null,
|
2910
2922
|
isRounded && !withAddon ? 'is-rounded' : null,
|
2911
|
-
size
|
2912
|
-
|
2913
|
-
const tagsWrapperClasses = parseClasses([
|
2914
|
-
'tags',
|
2915
|
-
'has-addons',
|
2916
|
-
size ? size.replace('is-', 'are-') : null
|
2923
|
+
size,
|
2924
|
+
cssClasses
|
2917
2925
|
]);
|
2918
|
-
const
|
2919
|
-
const
|
2926
|
+
const tagAddonClasses = parseClasses(['tag', addonColor]);
|
2927
|
+
const tagLabel = withAddon ? 'tags' : 'tag';
|
2928
|
+
const tagTestId = testId !== null && testId !== void 0 ? testId : parseTestId({
|
2920
2929
|
tag: tagLabel,
|
2921
|
-
parsedClasses: withAddon ?
|
2930
|
+
parsedClasses: withAddon ? tagContainerClasses : tagClasses,
|
2922
2931
|
separator: withAddon ? '-' : ''
|
2923
2932
|
});
|
2924
|
-
|
2925
|
-
|
2926
|
-
|
2933
|
+
const tagContainerTestId = containerTestId !== null && containerTestId !== void 0 ? containerTestId : `${tagTestId}-container`;
|
2934
|
+
const tagDeleteTestId = `${tagTestId}-delete`;
|
2935
|
+
return withAddon ? (React.createElement("section", { "data-testid": tagContainerTestId, style: containerStyle !== null && containerStyle !== void 0 ? containerStyle : undefined, className: tagContainerClasses },
|
2936
|
+
React.createElement("span", { "data-testid": tagTestId, className: tagClasses }, text),
|
2937
|
+
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 },
|
2927
2938
|
text,
|
2928
|
-
withDelete ? (React.createElement("button", { "data-testid":
|
2939
|
+
withDelete ? (React.createElement("button", { "data-testid": tagDeleteTestId, className: 'delete', onClick: onDeleteClick !== null && onDeleteClick !== void 0 ? onDeleteClick : undefined })) : null));
|
2929
2940
|
};
|
2930
2941
|
|
2931
|
-
const Box = ({ testId = 'test-box', style = null, children = null }) => children ? (React.createElement("section", { "data-testid": testId, className:
|
2942
|
+
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;
|
2932
2943
|
|
2933
2944
|
const renderTitleSection = (section) => {
|
2934
|
-
var _a, _b
|
2945
|
+
var _a, _b;
|
2946
|
+
if (!section)
|
2947
|
+
return null;
|
2948
|
+
const { type, size, isSpaced, cssClasses } = section;
|
2935
2949
|
const sectionClasses = parseClasses([
|
2936
|
-
|
2937
|
-
|
2938
|
-
|
2950
|
+
type,
|
2951
|
+
size !== null && size !== void 0 ? size : null,
|
2952
|
+
type === 'title' && isSpaced ? 'is-spaced' : null,
|
2953
|
+
cssClasses
|
2939
2954
|
]);
|
2940
|
-
|
2955
|
+
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`;
|
2956
|
+
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));
|
2941
2957
|
};
|
2942
2958
|
const Title = ({ main, secondary }) => (React.createElement(React.Fragment, null,
|
2943
2959
|
renderTitleSection(main),
|
@@ -2965,16 +2981,22 @@ const generateIconContainer = (icon, color) => {
|
|
2965
2981
|
});
|
2966
2982
|
return (React.createElement("span", { "data-testid": containerTestId, className: containerClasses }, icon));
|
2967
2983
|
};
|
2968
|
-
const Icon = ({
|
2969
|
-
const
|
2984
|
+
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 }) => {
|
2985
|
+
const iconContainerClasses = parseClasses([
|
2986
|
+
'icon',
|
2987
|
+
color,
|
2988
|
+
size,
|
2989
|
+
containerCssClasses
|
2990
|
+
]);
|
2970
2991
|
const iconClasses = parseClasses([
|
2971
2992
|
'mdi',
|
2972
2993
|
`mdi-${iconLabel}`,
|
2973
2994
|
colorMode ? `mdi-${colorMode}` : null,
|
2974
2995
|
isSpinning ? 'mdi-spin' : null,
|
2975
|
-
size ? `mdi-${IconSizeEnum[size]}px` : 'mdi-24px'
|
2996
|
+
size ? `mdi-${IconSizeEnum[size]}px` : 'mdi-24px',
|
2997
|
+
cssClasses
|
2976
2998
|
]);
|
2977
|
-
const
|
2999
|
+
const iconContainertestId = containerTestId !== null && containerTestId !== void 0 ? containerTestId : parseTestId({
|
2978
3000
|
tag: 'icon',
|
2979
3001
|
parsedClasses: iconClasses,
|
2980
3002
|
rules: [
|
@@ -2989,39 +3011,41 @@ const Icon = ({ iconLabel, testId = null, text = null, style = null, color = nul
|
|
2989
3011
|
],
|
2990
3012
|
separator: '-'
|
2991
3013
|
});
|
2992
|
-
const
|
2993
|
-
const iconComponent = (React.createElement("span", { "data-testid":
|
2994
|
-
React.createElement("i", { "data-testid":
|
3014
|
+
const iconTestId = testId !== null && testId !== void 0 ? testId : `${iconContainertestId}-i`;
|
3015
|
+
const iconComponent = (React.createElement("span", { "data-testid": iconContainertestId, className: iconContainerClasses, style: containerStyle !== null && containerStyle !== void 0 ? containerStyle : undefined },
|
3016
|
+
React.createElement("i", { "data-testid": iconTestId, className: iconClasses, style: style !== null && style !== void 0 ? style : undefined }),
|
2995
3017
|
text ? React.createElement("span", null, text) : null));
|
2996
3018
|
return text ? generateIconContainer(iconComponent, color) : iconComponent;
|
2997
3019
|
};
|
2998
3020
|
|
2999
|
-
const Input = ({ testId = null, type, text = null, isDisabled = false, isReadonly = false,
|
3021
|
+
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 }) => {
|
3000
3022
|
const inputClasses = parseClasses([
|
3001
3023
|
'input',
|
3002
3024
|
color,
|
3003
3025
|
size,
|
3004
3026
|
isRounded ? 'is-rounded' : null,
|
3005
3027
|
isHovered ? 'is-hovered' : null,
|
3006
|
-
isFocused ? 'is-focused' : null
|
3028
|
+
isFocused ? 'is-focused' : null,
|
3029
|
+
cssClasses
|
3007
3030
|
]);
|
3008
|
-
const
|
3031
|
+
const inputTestId = testId !== null && testId !== void 0 ? testId : parseTestId({
|
3009
3032
|
tag: 'input',
|
3010
3033
|
parsedClasses: inputClasses
|
3011
3034
|
});
|
3012
|
-
return (React.createElement("input", { "data-testid":
|
3035
|
+
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 }));
|
3013
3036
|
};
|
3014
3037
|
|
3015
|
-
const TextArea = ({ testId = null, text = null, cols = null, rows = null, isDisabled = false, isReadonly = false, isFixedSize = false,
|
3038
|
+
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 }) => {
|
3016
3039
|
const textAreaClasses = parseClasses([
|
3017
3040
|
'textarea',
|
3018
3041
|
color,
|
3019
3042
|
size,
|
3020
3043
|
isHovered ? 'is-hovered' : null,
|
3021
3044
|
isFocused ? 'is-focused' : null,
|
3022
|
-
isFixedSize ? 'has-fixed-size' : null
|
3045
|
+
isFixedSize ? 'has-fixed-size' : null,
|
3046
|
+
cssClasses
|
3023
3047
|
]);
|
3024
|
-
const
|
3048
|
+
const textAreaTestId = testId !== null && testId !== void 0 ? testId : parseTestId({
|
3025
3049
|
tag: 'textarea',
|
3026
3050
|
parsedClasses: textAreaClasses,
|
3027
3051
|
rules: [
|
@@ -3035,49 +3059,52 @@ const TextArea = ({ testId = null, text = null, cols = null, rows = null, isDisa
|
|
3035
3059
|
}
|
3036
3060
|
]
|
3037
3061
|
});
|
3038
|
-
return (React.createElement("textarea", { "data-testid":
|
3062
|
+
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 }));
|
3039
3063
|
};
|
3040
3064
|
|
3041
|
-
const Delete = ({ testId = null, style = null, size = null, onClick = null }) => {
|
3042
|
-
const deleteClasses = parseClasses(['delete', size]);
|
3043
|
-
const
|
3065
|
+
const Delete = ({ testId = null, cssClasses = null, style = null, size = null, onClick = null }) => {
|
3066
|
+
const deleteClasses = parseClasses(['delete', size, cssClasses]);
|
3067
|
+
const deleteTestId = testId !== null && testId !== void 0 ? testId : parseTestId({
|
3044
3068
|
tag: 'delete',
|
3045
3069
|
parsedClasses: deleteClasses
|
3046
3070
|
});
|
3047
|
-
return (React.createElement("button", { "data-testid":
|
3071
|
+
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 }));
|
3048
3072
|
};
|
3049
3073
|
|
3050
|
-
const Select = ({ testId = null,
|
3051
|
-
const
|
3074
|
+
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 }) => {
|
3075
|
+
const containerSelectClasses = parseClasses([
|
3052
3076
|
'select',
|
3053
3077
|
color,
|
3054
3078
|
size,
|
3055
3079
|
isMultiple ? 'is-multiple' : null,
|
3056
3080
|
isRounded ? 'is-rounded' : null,
|
3057
3081
|
isHovered ? 'is-hovered' : null,
|
3058
|
-
isFocused ? 'is-focused' : null
|
3082
|
+
isFocused ? 'is-focused' : null,
|
3083
|
+
containerCssClasses
|
3059
3084
|
]);
|
3060
3085
|
const selectTestId = testId !== null && testId !== void 0 ? testId : parseTestId({
|
3061
3086
|
tag: 'select',
|
3062
|
-
parsedClasses:
|
3087
|
+
parsedClasses: containerSelectClasses
|
3063
3088
|
});
|
3064
|
-
|
3065
|
-
|
3089
|
+
const containerSelectTestId = containerTestId !== null && containerTestId !== void 0 ? containerTestId : `${selectTestId}-container`;
|
3090
|
+
return (React.createElement("section", { "data-testid": containerSelectTestId, className: containerSelectClasses, style: containerStyle !== null && containerStyle !== void 0 ? containerStyle : undefined },
|
3091
|
+
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))))));
|
3066
3092
|
};
|
3067
3093
|
|
3068
|
-
const File = ({ testId = null, fileName = null, uploadIcon = { iconLabel: 'upload' }, uploadText = 'Choose a file…',
|
3069
|
-
const
|
3094
|
+
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 }) => {
|
3095
|
+
const fileContainerClasses = parseClasses([
|
3070
3096
|
'file',
|
3071
3097
|
fileName ? 'has-name' : null,
|
3072
3098
|
buttonOnRight ? 'is-right' : null,
|
3073
3099
|
isFullWidth ? 'is-fullwidth' : null,
|
3074
3100
|
isBoxed ? 'is-boxed' : null,
|
3075
3101
|
color,
|
3076
|
-
size
|
3102
|
+
size,
|
3103
|
+
containerCssClasses
|
3077
3104
|
]);
|
3078
|
-
const
|
3105
|
+
const fileContainerTestId = containerTestId !== null && containerTestId !== void 0 ? containerTestId : parseTestId({
|
3079
3106
|
tag: 'file',
|
3080
|
-
parsedClasses:
|
3107
|
+
parsedClasses: fileContainerClasses,
|
3081
3108
|
rules: [
|
3082
3109
|
{
|
3083
3110
|
usedRegExp: /has/gm,
|
@@ -3089,10 +3116,11 @@ const File = ({ testId = null, fileName = null, uploadIcon = { iconLabel: 'uploa
|
|
3089
3116
|
}
|
3090
3117
|
]
|
3091
3118
|
});
|
3092
|
-
const
|
3093
|
-
|
3119
|
+
const fileInputClasses = cssClasses !== null && cssClasses !== void 0 ? cssClasses : 'file-input';
|
3120
|
+
const fileInputTestId = testId !== null && testId !== void 0 ? testId : `${fileContainerTestId}-input`;
|
3121
|
+
return (React.createElement("section", { "data-testid": fileContainerTestId, className: fileContainerClasses, style: containerStyle !== null && containerStyle !== void 0 ? containerStyle : undefined },
|
3094
3122
|
React.createElement("label", { className: 'file-label' },
|
3095
|
-
React.createElement("input", { "data-testid": fileInputTestId,
|
3123
|
+
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 }),
|
3096
3124
|
React.createElement("span", { className: 'file-cta' },
|
3097
3125
|
uploadIcon ? React.createElement(Icon, Object.assign({}, uploadIcon)) : null,
|
3098
3126
|
React.createElement("span", { className: 'file-label' }, uploadText)),
|