reactive-bulma 2.10.0 → 2.11.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/cjs/index.js CHANGED
@@ -2987,11 +2987,12 @@ const generateIconContainer = (icon, color) => {
2987
2987
  });
2988
2988
  return (React.createElement("span", { "data-testid": containerTestId, className: containerClasses }, icon));
2989
2989
  };
2990
- 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 }) => {
2990
+ 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, position = null }) => {
2991
2991
  const iconContainerClasses = parseClasses([
2992
2992
  'icon',
2993
2993
  color,
2994
2994
  size,
2995
+ position,
2995
2996
  containerCssClasses
2996
2997
  ]);
2997
2998
  const iconClasses = parseClasses([
@@ -3024,7 +3025,7 @@ const Icon = ({ testId = null, containerTestId = null, cssClasses = null, contai
3024
3025
  return text ? generateIconContainer(iconComponent, color) : iconComponent;
3025
3026
  };
3026
3027
 
3027
- 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 }) => {
3028
+ const Input = ({ testId = null, cssClasses = null, style = null, type, text = null, placeholder = null, isDisabled = false, isReadonly = false, color = null, size = null, isRounded = null, isHovered = null, isFocused = null, onClick = null, onChange = null }) => {
3028
3029
  const inputClasses = parseClasses([
3029
3030
  'input',
3030
3031
  color,
@@ -3038,7 +3039,7 @@ const Input = ({ testId = null, cssClasses = null, style = null, type, text = nu
3038
3039
  tag: 'input',
3039
3040
  parsedClasses: inputClasses
3040
3041
  });
3041
- 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 }));
3042
+ return (React.createElement("input", { "data-testid": inputTestId, type: type, placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : undefined, 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 }));
3042
3043
  };
3043
3044
 
3044
3045
  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 }) => {
@@ -3251,7 +3252,7 @@ const MenuItem = ({ testId = null, cssClasses = null, style = null, text, isActi
3251
3252
  return (React.createElement("a", { "data-testid": menuItemTestId, className: menuItemClasses, style: style !== null && style !== void 0 ? style : undefined, "aria-hidden": 'true', onClick: onClick !== null && onClick !== void 0 ? onClick : undefined }, text));
3252
3253
  };
3253
3254
 
3254
- const Image = ({ testId = null, containerTestId = null, cssClasses = null, containerCssClasses = null, style = null, containerStyle = null, src, fixedSize = 'is-1by1', isRounded = false }) => {
3255
+ const Image = ({ testId = null, containerTestId = null, cssClasses = null, containerCssClasses = null, style = null, containerStyle = null, src, alt = null, fixedSize = 'is-1by1', isRounded = false }) => {
3255
3256
  const imageContainerClasses = parseClasses([
3256
3257
  'image',
3257
3258
  fixedSize,
@@ -3264,7 +3265,7 @@ const Image = ({ testId = null, containerTestId = null, cssClasses = null, conta
3264
3265
  const imageContainerTestId = containerTestId !== null && containerTestId !== void 0 ? containerTestId : parseTestId({ tag: 'image', parsedClasses: imageContainerClasses });
3265
3266
  const imageTestId = testId !== null && testId !== void 0 ? testId : `${imageContainerTestId}-img`;
3266
3267
  return (React.createElement("figure", { "data-testid": imageContainerTestId, className: imageContainerClasses, style: containerStyle !== null && containerStyle !== void 0 ? containerStyle : undefined },
3267
- React.createElement("img", { "data-testid": imageTestId, className: imageClasses, style: style !== null && style !== void 0 ? style : undefined, src: src })));
3268
+ React.createElement("img", { "data-testid": imageTestId, className: imageClasses, style: style !== null && style !== void 0 ? style : undefined, src: src, alt: alt !== null && alt !== void 0 ? alt : undefined })));
3268
3269
  };
3269
3270
 
3270
3271
  const PaginationItem = ({ testId = null, cssClasses = null, style = null, text, labelText = 'Page', currentLabelText = 'Go to page', isSelected = null, onClick = null }) => {
@@ -3548,6 +3549,81 @@ const Tabs = ({ testId = null, cssClasses = null, style = null, tabs, alignment
3548
3549
  React.createElement("ul", null, tabs.map(tabConfig => (React.createElement("li", { key: `tab-item-${parseKey()}`, className: tabConfig.isActive ? 'is-active' : undefined }, React.createElement(TabItem, Object.assign({}, tabConfig))))))));
3549
3550
  };
3550
3551
 
3552
+ const renderIcon = (iconConfig) => iconConfig ? React.createElement(Icon, Object.assign({}, iconConfig)) : null;
3553
+ const InputControl = ({ testId = null, cssClasses = null, style = null, inputConfig, leftIcon = null, rightIcon = null, size = null, isLoading = null, isExpanded = null }) => {
3554
+ const inputControlClasses = parseClasses([
3555
+ 'control',
3556
+ size,
3557
+ leftIcon ? 'has-icons-left' : null,
3558
+ rightIcon ? 'has-icons-right' : null,
3559
+ isLoading ? 'is-loading' : null,
3560
+ isExpanded ? 'is-expanded' : null,
3561
+ cssClasses
3562
+ ]);
3563
+ const inputControlTestId = testId !== null && testId !== void 0 ? testId : parseTestId({
3564
+ tag: 'control',
3565
+ parsedClasses: inputControlClasses,
3566
+ rules: [
3567
+ {
3568
+ regExp: /has-|is-/gm,
3569
+ replacer: '-'
3570
+ },
3571
+ {
3572
+ regExp: /control/gm,
3573
+ replacer: ''
3574
+ }
3575
+ ]
3576
+ });
3577
+ const reflectedInputConfig = Object.assign(Object.assign({}, inputConfig), { size: size !== null && size !== void 0 ? size : inputConfig === null || inputConfig === void 0 ? void 0 : inputConfig.size });
3578
+ return (React.createElement("section", { "data-testid": inputControlTestId, className: inputControlClasses, style: style !== null && style !== void 0 ? style : undefined },
3579
+ React.createElement(Input, Object.assign({}, reflectedInputConfig)),
3580
+ renderIcon(leftIcon ? Object.assign(Object.assign({}, leftIcon), { position: 'is-left' }) : undefined),
3581
+ renderIcon(rightIcon ? Object.assign(Object.assign({}, rightIcon), { position: 'is-right' }) : undefined)));
3582
+ };
3583
+
3584
+ const renderFieldLabel = (labelText) => labelText ? (React.createElement("label", { "data-testid": 'test-form-field-label', className: 'label' }, labelText)) : null;
3585
+ const renderFieldBody = (inputControlConfig, isGrouped) => {
3586
+ if (isGrouped) {
3587
+ return Array.isArray(inputControlConfig) ? (inputControlConfig.map((_singleConfig, i) => (React.createElement(InputControl, Object.assign({ key: `grouped-input-control-${parseKey()}`, testId: `test-grouped-input-control-${i}` }, _singleConfig))))) : (React.createElement(InputControl, Object.assign({}, inputControlConfig)));
3588
+ }
3589
+ else {
3590
+ return Array.isArray(inputControlConfig) ? (React.createElement(InputControl, Object.assign({}, inputControlConfig[0]))) : (React.createElement(InputControl, Object.assign({}, inputControlConfig)));
3591
+ }
3592
+ };
3593
+ const renderFieldHelper = (helperConfig) => {
3594
+ if (!helperConfig)
3595
+ return null;
3596
+ const fieldHelperClasses = parseClasses(['help', helperConfig.color]);
3597
+ const fieldHelperTestId = parseTestId({
3598
+ tag: 'form-field-help',
3599
+ parsedClasses: fieldHelperClasses,
3600
+ rules: [{ regExp: /help|is/gm, replacer: '' }]
3601
+ });
3602
+ return (React.createElement("p", { "data-testid": fieldHelperTestId, className: fieldHelperClasses }, helperConfig.text));
3603
+ };
3604
+ const FormField = ({ testId = null, cssClasses = null, style = null, labelText = null, inputControlConfig, helperConfig = null, isHorizontal = false, isGrouped = false }) => {
3605
+ var _a;
3606
+ const formFieldClasses = parseClasses([
3607
+ 'field',
3608
+ isHorizontal ? 'is-horizontal' : null,
3609
+ isGrouped ? 'is-grouped' : null,
3610
+ cssClasses
3611
+ ]);
3612
+ const formFieldTestId = testId !== null && testId !== void 0 ? testId : parseTestId({ tag: 'field', parsedClasses: formFieldClasses });
3613
+ if (!isGrouped &&
3614
+ ((_a = inputControlConfig === null || inputControlConfig === void 0 ? void 0 : inputControlConfig.inputConfig) === null || _a === void 0 ? void 0 : _a.color) &&
3615
+ helperConfig) {
3616
+ helperConfig = Object.assign(Object.assign({}, helperConfig), { color: inputControlConfig.inputConfig.color });
3617
+ }
3618
+ return (React.createElement("section", { "data-testid": formFieldTestId, className: formFieldClasses, style: style !== null && style !== void 0 ? style : undefined },
3619
+ isHorizontal ? (React.createElement("section", { className: 'field-label' }, renderFieldLabel(labelText))) : (renderFieldLabel(labelText)),
3620
+ isHorizontal ? (React.createElement("section", { className: 'field-body' },
3621
+ renderFieldBody(inputControlConfig, isGrouped),
3622
+ renderFieldHelper(helperConfig))) : (React.createElement(React.Fragment, null,
3623
+ renderFieldBody(inputControlConfig, isGrouped),
3624
+ renderFieldHelper(helperConfig)))));
3625
+ };
3626
+
3551
3627
  exports.Block = Block;
3552
3628
  exports.Box = Box;
3553
3629
  exports.BreadcrumbItem = BreadcrumbItem;
@@ -3562,9 +3638,11 @@ exports.Dropdown = Dropdown;
3562
3638
  exports.DropdownItem = DropdownItem;
3563
3639
  exports.DropdownTrigger = DropdownTrigger;
3564
3640
  exports.File = File;
3641
+ exports.FormField = FormField;
3565
3642
  exports.Icon = Icon;
3566
3643
  exports.Image = Image;
3567
3644
  exports.Input = Input;
3645
+ exports.InputControl = InputControl;
3568
3646
  exports.Menu = Menu;
3569
3647
  exports.MenuItem = MenuItem;
3570
3648
  exports.MenuList = MenuList;