reactive-bulma 2.10.0 → 2.11.0

package/dist/cjs/index.js

@@ -2987,11 +2987,12 @@ const generateIconContainer = (icon, color) => {
     });
     return (React.createElement("span", { "data-testid": containerTestId, className: containerClasses }, icon));
 };
-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 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 }) => {
     const iconContainerClasses = parseClasses([
         'icon',
         color,
         size,
+        position,
         containerCssClasses
     ]);
     const iconClasses = parseClasses([
@@ -3024,7 +3025,7 @@ const Icon = ({ testId = null, containerTestId = null, cssClasses = null, contai
     return text ? generateIconContainer(iconComponent, color) : iconComponent;
 };
 
-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 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 }) => {
     const inputClasses = parseClasses([
         'input',
         color,
@@ -3038,7 +3039,7 @@ const Input = ({ testId = null, cssClasses = null, style = null, type, text = nu
         tag: 'input',
         parsedClasses: inputClasses
     });
-    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 }));
+    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 }));
 };
 
 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
     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));
 };
 
-const Image = ({ testId = null, containerTestId = null, cssClasses = null, containerCssClasses = null, style = null, containerStyle = null, src, fixedSize = 'is-1by1', isRounded = false }) => {
+const Image = ({ testId = null, containerTestId = null, cssClasses = null, containerCssClasses = null, style = null, containerStyle = null, src, alt = null, fixedSize = 'is-1by1', isRounded = false }) => {
     const imageContainerClasses = parseClasses([
         'image',
         fixedSize,
@@ -3264,7 +3265,7 @@ const Image = ({ testId = null, containerTestId = null, cssClasses = null, conta
     const imageContainerTestId = containerTestId !== null && containerTestId !== void 0 ? containerTestId : parseTestId({ tag: 'image', parsedClasses: imageContainerClasses });
     const imageTestId = testId !== null && testId !== void 0 ? testId : `${imageContainerTestId}-img`;
     return (React.createElement("figure", { "data-testid": imageContainerTestId, className: imageContainerClasses, style: containerStyle !== null && containerStyle !== void 0 ? containerStyle : undefined },
-        React.createElement("img", { "data-testid": imageTestId, className: imageClasses, style: style !== null && style !== void 0 ? style : undefined, src: src })));
+        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 })));
 };
 
 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
         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))))))));
 };
 
+const renderIcon = (iconConfig) => iconConfig ? React.createElement(Icon, Object.assign({}, iconConfig)) : null;
+const InputControl = ({ testId = null, cssClasses = null, style = null, inputConfig, leftIcon = null, rightIcon = null, size = null, isLoading = null, isExpanded = null }) => {
+    const inputControlClasses = parseClasses([
+        'control',
+        size,
+        leftIcon ? 'has-icons-left' : null,
+        rightIcon ? 'has-icons-right' : null,
+        isLoading ? 'is-loading' : null,
+        isExpanded ? 'is-expanded' : null,
+        cssClasses
+    ]);
+    const inputControlTestId = testId !== null && testId !== void 0 ? testId : parseTestId({
+        tag: 'control',
+        parsedClasses: inputControlClasses,
+        rules: [
+            {
+                regExp: /has-|is-/gm,
+                replacer: '-'
+            },
+            {
+                regExp: /control/gm,
+                replacer: ''
+            }
+        ]
+    });
+    const reflectedInputConfig = Object.assign(Object.assign({}, inputConfig), { size: size !== null && size !== void 0 ? size : inputConfig === null || inputConfig === void 0 ? void 0 : inputConfig.size });
+    return (React.createElement("section", { "data-testid": inputControlTestId, className: inputControlClasses, style: style !== null && style !== void 0 ? style : undefined },
+        React.createElement(Input, Object.assign({}, reflectedInputConfig)),
+        renderIcon(leftIcon ? Object.assign(Object.assign({}, leftIcon), { position: 'is-left' }) : undefined),
+        renderIcon(rightIcon ? Object.assign(Object.assign({}, rightIcon), { position: 'is-right' }) : undefined)));
+};
+
+const renderFieldLabel = (labelText) => labelText ? (React.createElement("label", { "data-testid": 'test-form-field-label', className: 'label' }, labelText)) : null;
+const renderFieldBody = (inputControlConfig, isGrouped) => {
+    if (isGrouped) {
+        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)));
+    }
+    else {
+        return Array.isArray(inputControlConfig) ? (React.createElement(InputControl, Object.assign({}, inputControlConfig[0]))) : (React.createElement(InputControl, Object.assign({}, inputControlConfig)));
+    }
+};
+const renderFieldHelper = (helperConfig) => {
+    if (!helperConfig)
+        return null;
+    const fieldHelperClasses = parseClasses(['help', helperConfig.color]);
+    const fieldHelperTestId = parseTestId({
+        tag: 'form-field-help',
+        parsedClasses: fieldHelperClasses,
+        rules: [{ regExp: /help|is/gm, replacer: '' }]
+    });
+    return (React.createElement("p", { "data-testid": fieldHelperTestId, className: fieldHelperClasses }, helperConfig.text));
+};
+const FormField = ({ testId = null, cssClasses = null, style = null, labelText = null, inputControlConfig, helperConfig = null, isHorizontal = false, isGrouped = false }) => {
+    var _a;
+    const formFieldClasses = parseClasses([
+        'field',
+        isHorizontal ? 'is-horizontal' : null,
+        isGrouped ? 'is-grouped' : null,
+        cssClasses
+    ]);
+    const formFieldTestId = testId !== null && testId !== void 0 ? testId : parseTestId({ tag: 'field', parsedClasses: formFieldClasses });
+    if (!isGrouped &&
+        ((_a = inputControlConfig === null || inputControlConfig === void 0 ? void 0 : inputControlConfig.inputConfig) === null || _a === void 0 ? void 0 : _a.color) &&
+        helperConfig) {
+        helperConfig = Object.assign(Object.assign({}, helperConfig), { color: inputControlConfig.inputConfig.color });
+    }
+    return (React.createElement("section", { "data-testid": formFieldTestId, className: formFieldClasses, style: style !== null && style !== void 0 ? style : undefined },
+        isHorizontal ? (React.createElement("section", { className: 'field-label' }, renderFieldLabel(labelText))) : (renderFieldLabel(labelText)),
+        isHorizontal ? (React.createElement("section", { className: 'field-body' },
+            renderFieldBody(inputControlConfig, isGrouped),
+            renderFieldHelper(helperConfig))) : (React.createElement(React.Fragment, null,
+            renderFieldBody(inputControlConfig, isGrouped),
+            renderFieldHelper(helperConfig)))));
+};
+
 exports.Block = Block;
 exports.Box = Box;
 exports.BreadcrumbItem = BreadcrumbItem;
@@ -3562,9 +3638,11 @@ exports.Dropdown = Dropdown;
 exports.DropdownItem = DropdownItem;
 exports.DropdownTrigger = DropdownTrigger;
 exports.File = File;
+exports.FormField = FormField;
 exports.Icon = Icon;
 exports.Image = Image;
 exports.Input = Input;
+exports.InputControl = InputControl;
 exports.Menu = Menu;
 exports.MenuItem = MenuItem;
 exports.MenuList = MenuList;