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 +83 -5
- package/dist/cjs/index.js.map +1 -1
- package/dist/cjs/types/components/molecules/FormField/index.d.ts +4 -0
- package/dist/cjs/types/components/molecules/InputControl/index.d.ts +4 -0
- package/dist/cjs/types/components/molecules/index.d.ts +2 -0
- package/dist/cjs/types/functions/parsers.d.ts +1 -6
- package/dist/cjs/types/interfaces/atomProps.d.ts +20 -14
- package/dist/cjs/types/interfaces/commonProps.d.ts +1 -1
- package/dist/cjs/types/interfaces/functionProps.d.ts +5 -0
- package/dist/cjs/types/interfaces/moleculeProps.d.ts +39 -9
- package/dist/cjs/types/types/styleTypes.d.ts +5 -3
- package/dist/esm/index.js +82 -6
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/types/components/molecules/FormField/index.d.ts +4 -0
- package/dist/esm/types/components/molecules/InputControl/index.d.ts +4 -0
- package/dist/esm/types/components/molecules/index.d.ts +2 -0
- package/dist/esm/types/functions/parsers.d.ts +1 -6
- package/dist/esm/types/interfaces/atomProps.d.ts +20 -14
- package/dist/esm/types/interfaces/commonProps.d.ts +1 -1
- package/dist/esm/types/interfaces/functionProps.d.ts +5 -0
- package/dist/esm/types/interfaces/moleculeProps.d.ts +39 -9
- package/dist/esm/types/types/styleTypes.d.ts +5 -3
- package/dist/index.d.ts +66 -24
- package/package.json +1 -1
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;
|