reactive-bulma 1.20.0 → 1.21.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.
package/dist/esm/index.js CHANGED
@@ -2833,15 +2833,15 @@ var reactExports = react.exports;
2833
2833
  var React = /*@__PURE__*/getDefaultExportFromCjs(reactExports);
2834
2834
 
2835
2835
  /**
2836
- * @param { Array<string | null> } _classes Required. Array of classNames on `string` (or `null`) values
2836
+ * @param { Array<string | null> } _classes `Required`. Array of classNames on `string` (or `null`) values
2837
2837
  * @returns { string } A single string product of merge all classNames, separated by spaces
2838
2838
  */
2839
2839
  const parseClasses = (_classes) => _classes.filter(_class => _class).join(' ');
2840
2840
  /**
2841
2841
  * @param { ParseTestIdProps } config Configuration object
2842
- * @param { string } config.tag Required. Component tag used between to build the final testId string.
2843
- * @param { string } config.parsedClasses Required. A single string of previously parsed classes what will be joined with `tag` property.
2844
- * @param { { usedRegExp?: RegExp, regExpReplacer?: string }[] } config.rules Optional. An array of objects used with a regular expression to check each case and a replacer for each one, giving oportunity to handle specific cases of component class names.
2842
+ * @param { string } config.tag `Required`. Component tag used between to build the final testId string.
2843
+ * @param { string } config.parsedClasses `Required`. A single string of previously parsed classes what will be joined with `tag` property.
2844
+ * @param { { regExp?: RegExp, replacer?: string }[] } config.rules Optional. An array of objects used with a regular expression to check each case and a replacer for each one, giving oportunity to handle specific cases of component class names.
2845
2845
  * @returns A single string product of merge all classNames, separated by `separator` value
2846
2846
  */
2847
2847
  const parseTestId = (config) => {
@@ -2849,7 +2849,7 @@ const parseTestId = (config) => {
2849
2849
  let fixedClassString = config.parsedClasses;
2850
2850
  if (config.rules) {
2851
2851
  for (const rule of config.rules) {
2852
- fixedClassString = fixedClassString.replace(rule.usedRegExp, rule.regExpReplacer);
2852
+ fixedClassString = fixedClassString.replace(rule.regExp, rule.replacer);
2853
2853
  }
2854
2854
  }
2855
2855
  else {
@@ -2860,7 +2860,7 @@ const parseTestId = (config) => {
2860
2860
  return `test-${config.tag}${fixedClassString.replace(/ /gm, (_a = config.separator) !== null && _a !== void 0 ? _a : '')}`;
2861
2861
  };
2862
2862
 
2863
- 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 }) => {
2863
+ 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 }) => {
2864
2864
  const buttonClasses = parseClasses([
2865
2865
  'button',
2866
2866
  color,
@@ -2870,72 +2870,88 @@ const Button = ({ text = null, type = 'button', testId = null, style = null, col
2870
2870
  isRounded ? 'is-rounded' : null,
2871
2871
  isLoading ? 'is-loading' : null,
2872
2872
  isStatic ? 'is-static' : null,
2873
- size
2873
+ size,
2874
+ cssClasses
2874
2875
  ]);
2875
- const _testId = testId !== null && testId !== void 0 ? testId : parseTestId({ tag: 'button', parsedClasses: buttonClasses });
2876
- 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));
2876
+ const buttonTestId = testId !== null && testId !== void 0 ? testId : parseTestId({ tag: 'button', parsedClasses: buttonClasses });
2877
+ 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));
2877
2878
  };
2878
2879
 
2879
- const Column = ({ testId = null, style = null, size = null, offset = null, isNarrow = false, children = null }) => {
2880
+ const Column = ({ testId = null, cssClasses = null, style = null, children = null, size = null, offset = null, isNarrow = false }) => {
2880
2881
  const columnClasses = parseClasses([
2881
2882
  'column',
2882
2883
  size,
2883
2884
  offset,
2884
- isNarrow ? 'is-narrow' : null
2885
+ isNarrow ? 'is-narrow' : null,
2886
+ cssClasses
2885
2887
  ]);
2886
- const _testId = testId !== null && testId !== void 0 ? testId : parseTestId({ tag: 'column', parsedClasses: columnClasses });
2887
- return (React.createElement("section", { "data-testid": _testId, className: columnClasses, style: style !== null && style !== void 0 ? style : undefined }, children));
2888
+ const columnTestId = testId !== null && testId !== void 0 ? testId : parseTestId({ tag: 'column', parsedClasses: columnClasses });
2889
+ return (React.createElement("section", { "data-testid": columnTestId, className: columnClasses, style: style !== null && style !== void 0 ? style : undefined }, children));
2888
2890
  };
2889
2891
 
2890
- const ProgressBar = ({ value = 0, max = 100, testId = null, style = null, color = 'is-primary', size = null, isLoading = false }) => {
2892
+ const ProgressBar = ({ testId = null, cssClasses = null, style = null, value = 0, max = 100, color = 'is-primary', size = null, isLoading = false }) => {
2891
2893
  const fixedValue = value > max || value < 0 ? 0 : value;
2892
- const progressClasses = parseClasses(['progress', color, size]);
2893
- const _testId = testId !== null && testId !== void 0 ? testId : parseTestId({
2894
+ const progressClasses = parseClasses([
2895
+ 'progress',
2896
+ color,
2897
+ size,
2898
+ cssClasses
2899
+ ]);
2900
+ const progressTestId = testId !== null && testId !== void 0 ? testId : parseTestId({
2894
2901
  tag: 'progress',
2895
2902
  parsedClasses: progressClasses
2896
2903
  });
2897
- 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}%`));
2904
+ 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}%`));
2898
2905
  };
2899
2906
 
2900
- 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;
2907
+ 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;
2901
2908
 
2902
- 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 }) => {
2903
- const tagLabel = withAddon ? 'tags' : 'tag';
2909
+ 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 }) => {
2910
+ const tagContainerClasses = parseClasses([
2911
+ 'tags',
2912
+ 'has-addons',
2913
+ size ? size.replace('is-', 'are-') : null,
2914
+ containerCssClasses
2915
+ ]);
2904
2916
  const tagClasses = parseClasses([
2905
2917
  'tag',
2906
2918
  color,
2907
2919
  isLight && !withAddon ? 'is-light' : null,
2908
2920
  isRounded && !withAddon ? 'is-rounded' : null,
2909
- size
2910
- ]);
2911
- const tagsWrapperClasses = parseClasses([
2912
- 'tags',
2913
- 'has-addons',
2914
- size ? size.replace('is-', 'are-') : null
2921
+ size,
2922
+ cssClasses
2915
2923
  ]);
2916
- const addonTagClasses = parseClasses(['tag', addonColor]);
2917
- const _testId = testId !== null && testId !== void 0 ? testId : parseTestId({
2924
+ const tagAddonClasses = parseClasses(['tag', addonColor]);
2925
+ const tagLabel = withAddon ? 'tags' : 'tag';
2926
+ const tagTestId = testId !== null && testId !== void 0 ? testId : parseTestId({
2918
2927
  tag: tagLabel,
2919
- parsedClasses: withAddon ? tagsWrapperClasses : tagClasses,
2928
+ parsedClasses: withAddon ? tagContainerClasses : tagClasses,
2920
2929
  separator: withAddon ? '-' : ''
2921
2930
  });
2922
- return withAddon ? (React.createElement("section", { "data-testid": _testId, style: style !== null && style !== void 0 ? style : undefined, className: tagsWrapperClasses },
2923
- React.createElement("span", { className: tagClasses }, text),
2924
- 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 },
2931
+ const tagContainerTestId = containerTestId !== null && containerTestId !== void 0 ? containerTestId : `${tagTestId}-container`;
2932
+ const tagDeleteTestId = `${tagTestId}-delete`;
2933
+ return withAddon ? (React.createElement("section", { "data-testid": tagContainerTestId, style: containerStyle !== null && containerStyle !== void 0 ? containerStyle : undefined, className: tagContainerClasses },
2934
+ React.createElement("span", { "data-testid": tagTestId, className: tagClasses }, text),
2935
+ 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 },
2925
2936
  text,
2926
- withDelete ? (React.createElement("button", { "data-testid": `${_testId}-delete`, className: 'delete', onClick: onDeleteClick !== null && onDeleteClick !== void 0 ? onDeleteClick : undefined })) : null));
2937
+ withDelete ? (React.createElement("button", { "data-testid": tagDeleteTestId, className: 'delete', onClick: onDeleteClick !== null && onDeleteClick !== void 0 ? onDeleteClick : undefined })) : null));
2927
2938
  };
2928
2939
 
2929
- 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;
2940
+ 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;
2930
2941
 
2931
2942
  const renderTitleSection = (section) => {
2932
- var _a, _b, _c;
2943
+ var _a, _b;
2944
+ if (!section)
2945
+ return null;
2946
+ const { type, size, isSpaced, cssClasses } = section;
2933
2947
  const sectionClasses = parseClasses([
2934
- section === null || section === void 0 ? void 0 : section.prop,
2935
- (_a = section === null || section === void 0 ? void 0 : section.size) !== null && _a !== void 0 ? _a : 'is-6',
2936
- (section === null || section === void 0 ? void 0 : section.prop) === 'title' && (section === null || section === void 0 ? void 0 : section.isSpaced) ? 'is-spaced' : null
2948
+ type,
2949
+ size !== null && size !== void 0 ? size : null,
2950
+ type === 'title' && isSpaced ? 'is-spaced' : null,
2951
+ cssClasses
2937
2952
  ]);
2938
- 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;
2953
+ 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`;
2954
+ 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));
2939
2955
  };
2940
2956
  const Title = ({ main, secondary }) => (React.createElement(React.Fragment, null,
2941
2957
  renderTitleSection(main),
@@ -2956,146 +2972,203 @@ const generateIconContainer = (icon, color) => {
2956
2972
  parsedClasses: (_a = color === null || color === void 0 ? void 0 : color.toString()) !== null && _a !== void 0 ? _a : '',
2957
2973
  rules: [
2958
2974
  {
2959
- usedRegExp: /has-text/gm,
2960
- regExpReplacer: ''
2975
+ regExp: /has-text/gm,
2976
+ replacer: ''
2961
2977
  }
2962
2978
  ]
2963
2979
  });
2964
2980
  return (React.createElement("span", { "data-testid": containerTestId, className: containerClasses }, icon));
2965
2981
  };
2966
- const Icon = ({ iconLabel, testId = null, text = null, style = null, color = null, size = null, colorMode = null, isSpinning = false }) => {
2967
- const iconSpanClasses = parseClasses(['icon', color, size]);
2982
+ 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 }) => {
2983
+ const iconContainerClasses = parseClasses([
2984
+ 'icon',
2985
+ color,
2986
+ size,
2987
+ containerCssClasses
2988
+ ]);
2968
2989
  const iconClasses = parseClasses([
2969
2990
  'mdi',
2970
2991
  `mdi-${iconLabel}`,
2971
2992
  colorMode ? `mdi-${colorMode}` : null,
2972
2993
  isSpinning ? 'mdi-spin' : null,
2973
- size ? `mdi-${IconSizeEnum[size]}px` : 'mdi-24px'
2994
+ size ? `mdi-${IconSizeEnum[size]}px` : 'mdi-24px',
2995
+ cssClasses
2974
2996
  ]);
2975
- const _testId = testId !== null && testId !== void 0 ? testId : parseTestId({
2997
+ const iconContainertestId = containerTestId !== null && containerTestId !== void 0 ? containerTestId : parseTestId({
2976
2998
  tag: 'icon',
2977
2999
  parsedClasses: iconClasses,
2978
3000
  rules: [
2979
3001
  {
2980
- usedRegExp: /mdi-|mdi--/gm,
2981
- regExpReplacer: ''
3002
+ regExp: /mdi-|mdi--/gm,
3003
+ replacer: ''
2982
3004
  },
2983
3005
  {
2984
- usedRegExp: /mdi /gm,
2985
- regExpReplacer: '-'
3006
+ regExp: /mdi /gm,
3007
+ replacer: '-'
2986
3008
  }
2987
3009
  ],
2988
3010
  separator: '-'
2989
3011
  });
2990
- const _internalTestId = `${_testId}-i`;
2991
- const iconComponent = (React.createElement("span", { "data-testid": _testId, style: style !== null && style !== void 0 ? style : undefined, className: iconSpanClasses },
2992
- React.createElement("i", { "data-testid": _internalTestId, className: iconClasses }),
3012
+ const iconTestId = testId !== null && testId !== void 0 ? testId : `${iconContainertestId}-i`;
3013
+ const iconComponent = (React.createElement("span", { "data-testid": iconContainertestId, className: iconContainerClasses, style: containerStyle !== null && containerStyle !== void 0 ? containerStyle : undefined },
3014
+ React.createElement("i", { "data-testid": iconTestId, className: iconClasses, style: style !== null && style !== void 0 ? style : undefined }),
2993
3015
  text ? React.createElement("span", null, text) : null));
2994
3016
  return text ? generateIconContainer(iconComponent, color) : iconComponent;
2995
3017
  };
2996
3018
 
2997
- 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 }) => {
3019
+ 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 }) => {
2998
3020
  const inputClasses = parseClasses([
2999
3021
  'input',
3000
3022
  color,
3001
3023
  size,
3002
3024
  isRounded ? 'is-rounded' : null,
3003
3025
  isHovered ? 'is-hovered' : null,
3004
- isFocused ? 'is-focused' : null
3026
+ isFocused ? 'is-focused' : null,
3027
+ cssClasses
3005
3028
  ]);
3006
- const _testId = testId !== null && testId !== void 0 ? testId : parseTestId({
3029
+ const inputTestId = testId !== null && testId !== void 0 ? testId : parseTestId({
3007
3030
  tag: 'input',
3008
3031
  parsedClasses: inputClasses
3009
3032
  });
3010
- 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 }));
3033
+ 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 }));
3011
3034
  };
3012
3035
 
3013
- 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 }) => {
3036
+ 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 }) => {
3014
3037
  const textAreaClasses = parseClasses([
3015
3038
  'textarea',
3016
3039
  color,
3017
3040
  size,
3018
3041
  isHovered ? 'is-hovered' : null,
3019
3042
  isFocused ? 'is-focused' : null,
3020
- isFixedSize ? 'has-fixed-size' : null
3043
+ isFixedSize ? 'has-fixed-size' : null,
3044
+ cssClasses
3021
3045
  ]);
3022
- const _testId = testId !== null && testId !== void 0 ? testId : parseTestId({
3046
+ const textAreaTestId = testId !== null && testId !== void 0 ? testId : parseTestId({
3023
3047
  tag: 'textarea',
3024
3048
  parsedClasses: textAreaClasses,
3025
3049
  rules: [
3026
3050
  {
3027
- usedRegExp: /textarea/gm,
3028
- regExpReplacer: ''
3051
+ regExp: /textarea/gm,
3052
+ replacer: ''
3029
3053
  },
3030
3054
  {
3031
- usedRegExp: /is-|has-/gm,
3032
- regExpReplacer: '-'
3055
+ regExp: /is-|has-/gm,
3056
+ replacer: '-'
3033
3057
  }
3034
3058
  ]
3035
3059
  });
3036
- 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 }));
3060
+ 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 }));
3037
3061
  };
3038
3062
 
3039
- const Delete = ({ testId = null, style = null, size = null, onClick = null }) => {
3040
- const deleteClasses = parseClasses(['delete', size]);
3041
- const _testId = testId !== null && testId !== void 0 ? testId : parseTestId({
3063
+ const Delete = ({ testId = null, cssClasses = null, style = null, size = null, onClick = null }) => {
3064
+ const deleteClasses = parseClasses(['delete', size, cssClasses]);
3065
+ const deleteTestId = testId !== null && testId !== void 0 ? testId : parseTestId({
3042
3066
  tag: 'delete',
3043
3067
  parsedClasses: deleteClasses
3044
3068
  });
3045
- 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 }));
3069
+ 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 }));
3046
3070
  };
3047
3071
 
3048
- const Select = ({ testId = null, showOptions = 1, options = [], isMultiple = false, color = null, size = null, isRounded = null, isHovered = null, isFocused = null, onClick = null }) => {
3049
- const selectClasses = parseClasses([
3072
+ 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 }) => {
3073
+ const containerSelectClasses = parseClasses([
3050
3074
  'select',
3051
3075
  color,
3052
3076
  size,
3053
3077
  isMultiple ? 'is-multiple' : null,
3054
3078
  isRounded ? 'is-rounded' : null,
3055
3079
  isHovered ? 'is-hovered' : null,
3056
- isFocused ? 'is-focused' : null
3080
+ isFocused ? 'is-focused' : null,
3081
+ containerCssClasses
3057
3082
  ]);
3058
3083
  const selectTestId = testId !== null && testId !== void 0 ? testId : parseTestId({
3059
3084
  tag: 'select',
3060
- parsedClasses: selectClasses
3085
+ parsedClasses: containerSelectClasses
3061
3086
  });
3062
- return (React.createElement("section", { "data-testid": `${selectTestId}-container`, className: selectClasses },
3063
- 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))))));
3087
+ const containerSelectTestId = containerTestId !== null && containerTestId !== void 0 ? containerTestId : `${selectTestId}-container`;
3088
+ return (React.createElement("section", { "data-testid": containerSelectTestId, className: containerSelectClasses, style: containerStyle !== null && containerStyle !== void 0 ? containerStyle : undefined },
3089
+ 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(), defaultChecked: selected !== null && selected !== void 0 ? selected : false, onClick: onClick !== null && onClick !== void 0 ? onClick : undefined }, name))))));
3064
3090
  };
3065
3091
 
3066
- 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 }) => {
3067
- const fileClasses = parseClasses([
3092
+ 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 }) => {
3093
+ const fileContainerClasses = parseClasses([
3068
3094
  'file',
3069
3095
  fileName ? 'has-name' : null,
3070
3096
  buttonOnRight ? 'is-right' : null,
3071
3097
  isFullWidth ? 'is-fullwidth' : null,
3072
3098
  isBoxed ? 'is-boxed' : null,
3073
3099
  color,
3074
- size
3100
+ size,
3101
+ containerCssClasses
3075
3102
  ]);
3076
- const fileTestId = testId !== null && testId !== void 0 ? testId : parseTestId({
3103
+ const fileContainerTestId = containerTestId !== null && containerTestId !== void 0 ? containerTestId : parseTestId({
3077
3104
  tag: 'file',
3078
- parsedClasses: fileClasses,
3105
+ parsedClasses: fileContainerClasses,
3079
3106
  rules: [
3080
3107
  {
3081
- usedRegExp: /has/gm,
3082
- regExpReplacer: '-has'
3108
+ regExp: /has/gm,
3109
+ replacer: '-has'
3083
3110
  },
3084
3111
  {
3085
- usedRegExp: /is|file/gm,
3086
- regExpReplacer: ''
3112
+ regExp: /is|file/gm,
3113
+ replacer: ''
3087
3114
  }
3088
3115
  ]
3089
3116
  });
3090
- const fileInputTestId = `${fileTestId}-input`;
3091
- return (React.createElement("section", { "data-testid": fileTestId, className: fileClasses, style: style !== null && style !== void 0 ? style : undefined },
3117
+ const fileInputClasses = cssClasses !== null && cssClasses !== void 0 ? cssClasses : 'file-input';
3118
+ const fileInputTestId = testId !== null && testId !== void 0 ? testId : `${fileContainerTestId}-input`;
3119
+ return (React.createElement("section", { "data-testid": fileContainerTestId, className: fileContainerClasses, style: containerStyle !== null && containerStyle !== void 0 ? containerStyle : undefined },
3092
3120
  React.createElement("label", { className: 'file-label' },
3093
- React.createElement("input", { "data-testid": fileInputTestId, className: 'file-input', type: 'file', name: 'resume', onClick: onClick !== null && onClick !== void 0 ? onClick : undefined }),
3121
+ 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 }),
3094
3122
  React.createElement("span", { className: 'file-cta' },
3095
3123
  uploadIcon ? React.createElement(Icon, Object.assign({}, uploadIcon)) : null,
3096
3124
  React.createElement("span", { className: 'file-label' }, uploadText)),
3097
3125
  fileName ? React.createElement("span", { className: 'file-name' }, fileName) : null)));
3098
3126
  };
3099
3127
 
3100
- export { Block, Box, Button, Column, Delete, File, Icon, Input, ProgressBar, Select, Tag, TextArea, Title };
3128
+ const parseContentTestId = (content) => {
3129
+ if (typeof content === 'string')
3130
+ return `-${content === null || content === void 0 ? void 0 : content.toString()}`;
3131
+ if (content !== null)
3132
+ return '-with-component';
3133
+ return '';
3134
+ };
3135
+ const CheckBox = ({ testId = null, containerTestId = null, cssClasses = null, containerCssClasses = null, style = null, containerStyle = null, content = null, isDisabled = null, onChange = null }) => {
3136
+ const checkboxContainerClasses = parseClasses([
3137
+ 'checkbox',
3138
+ containerCssClasses
3139
+ ]);
3140
+ const checkboxContainerTestId = containerTestId !== null && containerTestId !== void 0 ? containerTestId : parseTestId({
3141
+ tag: 'checkbox-container',
3142
+ parsedClasses: parseContentTestId(content)
3143
+ });
3144
+ const checkboxTestId = testId !== null && testId !== void 0 ? testId : parseTestId({
3145
+ tag: 'checkbox',
3146
+ parsedClasses: parseContentTestId(content)
3147
+ });
3148
+ return (React.createElement("label", { "data-testid": checkboxContainerTestId, className: checkboxContainerClasses, style: containerStyle !== null && containerStyle !== void 0 ? containerStyle : undefined },
3149
+ React.createElement("input", { "data-testid": checkboxTestId, type: 'checkbox', className: cssClasses !== null && cssClasses !== void 0 ? cssClasses : undefined, style: style !== null && style !== void 0 ? style : undefined, disabled: isDisabled !== null && isDisabled !== void 0 ? isDisabled : false, onChange: onChange !== null && onChange !== void 0 ? onChange : undefined }),
3150
+ content));
3151
+ };
3152
+
3153
+ // PARSERS
3154
+ const renderRadioButton = (config, index) => {
3155
+ const { testId = null, label, name, isChecked = false, isDisabled = false, style = null, onChange } = config;
3156
+ const radioButtonTestId = testId !== null && testId !== void 0 ? testId : `test-radio-button-item-${index}`;
3157
+ return (React.createElement("label", { key: index, className: 'radio' },
3158
+ React.createElement("input", { "data-testid": radioButtonTestId, type: 'radio', style: style !== null && style !== void 0 ? style : undefined, name: name, defaultChecked: isChecked, disabled: isDisabled, onChange: onChange }),
3159
+ label));
3160
+ };
3161
+ const RadioButton = ({ containerTestId = null, containerCssClasses = null, containerStyle = null, options, name, onChange = null }) => {
3162
+ const radioButtonContainerClasses = parseClasses([
3163
+ 'control',
3164
+ containerCssClasses
3165
+ ]);
3166
+ const radioButtonContainerTestId = containerTestId !== null && containerTestId !== void 0 ? containerTestId : parseTestId({
3167
+ tag: 'container-',
3168
+ parsedClasses: radioButtonContainerClasses
3169
+ });
3170
+ 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))));
3171
+ };
3172
+
3173
+ export { Block, Box, Button, CheckBox as Checkbox, Column, Delete, File, Icon, Input, ProgressBar, RadioButton, Select, Tag, TextArea, Title };
3101
3174
  //# sourceMappingURL=index.js.map