reactive-bulma 2.10.0 → 2.12.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/LICENSE +1 -1
- package/dist/cjs/index.js +159 -38
- package/dist/cjs/index.js.map +1 -1
- package/dist/cjs/types/components/molecules/InputControl/index.d.ts +4 -0
- package/dist/cjs/types/components/molecules/PanelBlock/index.d.ts +4 -0
- package/dist/cjs/types/components/molecules/PanelTabs/index.d.ts +4 -0
- package/dist/cjs/types/components/molecules/index.d.ts +3 -0
- package/dist/cjs/types/components/organisms/FormField/index.d.ts +4 -0
- package/dist/cjs/types/components/organisms/Panel/index.d.ts +4 -0
- package/dist/cjs/types/components/organisms/index.d.ts +2 -0
- package/dist/cjs/types/functions/generators.d.ts +4 -0
- package/dist/cjs/types/functions/parsers.d.ts +0 -8
- package/dist/cjs/types/functions/tests/generators.test.d.ts +1 -0
- package/dist/cjs/types/index.d.ts +1 -0
- package/dist/cjs/types/interfaces/atomProps.d.ts +22 -16
- 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 +48 -9
- package/dist/cjs/types/interfaces/organismProps.d.ts +29 -0
- package/dist/cjs/types/types/domTypes.d.ts +3 -2
- package/dist/cjs/types/types/styleTypes.d.ts +5 -3
- package/dist/esm/index.js +155 -39
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/types/components/molecules/InputControl/index.d.ts +4 -0
- package/dist/esm/types/components/molecules/PanelBlock/index.d.ts +4 -0
- package/dist/esm/types/components/molecules/PanelTabs/index.d.ts +4 -0
- package/dist/esm/types/components/molecules/index.d.ts +3 -0
- package/dist/esm/types/components/organisms/FormField/index.d.ts +4 -0
- package/dist/esm/types/components/organisms/Panel/index.d.ts +4 -0
- package/dist/esm/types/components/organisms/index.d.ts +2 -0
- package/dist/esm/types/functions/generators.d.ts +4 -0
- package/dist/esm/types/functions/parsers.d.ts +0 -8
- package/dist/esm/types/functions/tests/generators.test.d.ts +1 -0
- package/dist/esm/types/index.d.ts +1 -0
- package/dist/esm/types/interfaces/atomProps.d.ts +22 -16
- 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 +48 -9
- package/dist/esm/types/interfaces/organismProps.d.ts +29 -0
- package/dist/esm/types/types/domTypes.d.ts +3 -2
- package/dist/esm/types/types/styleTypes.d.ts +5 -3
- package/dist/index.d.ts +110 -26
- package/package.json +11 -11
package/LICENSE
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
MIT License
|
2
2
|
|
3
|
-
Copyright (c)
|
3
|
+
Copyright (c) 2024 Nicolás Omar González Passerino
|
4
4
|
|
5
5
|
Permission is hereby granted, free of charge, to any person obtaining a copy
|
6
6
|
of this software and associated documentation files (the "Software"), to deal
|
package/dist/cjs/index.js
CHANGED
@@ -2861,13 +2861,6 @@ const parseTestId = (config) => {
|
|
2861
2861
|
}
|
2862
2862
|
return `test-${config.tag}${fixedClassString.replace(/ /gm, (_a = config.separator) !== null && _a !== void 0 ? _a : '')}`;
|
2863
2863
|
};
|
2864
|
-
const parseKey = (max = 5000, min = 1) => {
|
2865
|
-
max = Math.floor(max);
|
2866
|
-
min = Math.ceil(min);
|
2867
|
-
const secureRandomNumbers = new Uint32Array(1);
|
2868
|
-
window.crypto.getRandomValues(secureRandomNumbers);
|
2869
|
-
return Math.floor(secureRandomNumbers[0] * (max - min) + min).toString();
|
2870
|
-
};
|
2871
2864
|
|
2872
2865
|
const Button = ({ testId = null, cssClasses = null, style = null, type = 'button', text = null, isDisabled = false, color = null, isLightColor = false, isInvertedColor = false, isOutlined = false, isRounded = false, isLoading = false, isStatic = false, isSelected = false, size = null, onClick = null }) => {
|
2873
2866
|
const buttonClasses = parseClasses([
|
@@ -2987,11 +2980,12 @@ const generateIconContainer = (icon, color) => {
|
|
2987
2980
|
});
|
2988
2981
|
return (React.createElement("span", { "data-testid": containerTestId, className: containerClasses }, icon));
|
2989
2982
|
};
|
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 }) => {
|
2983
|
+
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
2984
|
const iconContainerClasses = parseClasses([
|
2992
2985
|
'icon',
|
2993
2986
|
color,
|
2994
2987
|
size,
|
2988
|
+
position,
|
2995
2989
|
containerCssClasses
|
2996
2990
|
]);
|
2997
2991
|
const iconClasses = parseClasses([
|
@@ -3024,7 +3018,7 @@ const Icon = ({ testId = null, containerTestId = null, cssClasses = null, contai
|
|
3024
3018
|
return text ? generateIconContainer(iconComponent, color) : iconComponent;
|
3025
3019
|
};
|
3026
3020
|
|
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 }) => {
|
3021
|
+
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
3022
|
const inputClasses = parseClasses([
|
3029
3023
|
'input',
|
3030
3024
|
color,
|
@@ -3038,7 +3032,7 @@ const Input = ({ testId = null, cssClasses = null, style = null, type, text = nu
|
|
3038
3032
|
tag: 'input',
|
3039
3033
|
parsedClasses: inputClasses
|
3040
3034
|
});
|
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 }));
|
3035
|
+
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
3036
|
};
|
3043
3037
|
|
3044
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 }) => {
|
@@ -3158,7 +3152,7 @@ const CheckBox = ({ testId = null, containerTestId = null, cssClasses = null, co
|
|
3158
3152
|
content));
|
3159
3153
|
};
|
3160
3154
|
|
3161
|
-
//
|
3155
|
+
// FUNCTIONS
|
3162
3156
|
const renderRadioButton = (config, index) => {
|
3163
3157
|
const { testId = null, label, name, isChecked = false, isDisabled = false, style = null, onChange } = config;
|
3164
3158
|
const radioButtonTestId = testId !== null && testId !== void 0 ? testId : `test-radio-button-item-${index}`;
|
@@ -3251,7 +3245,7 @@ const MenuItem = ({ testId = null, cssClasses = null, style = null, text, isActi
|
|
3251
3245
|
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
3246
|
};
|
3253
3247
|
|
3254
|
-
const Image = ({ testId = null, containerTestId = null, cssClasses = null, containerCssClasses = null, style = null, containerStyle = null, src, fixedSize = 'is-1by1', isRounded = false }) => {
|
3248
|
+
const Image = ({ testId = null, containerTestId = null, cssClasses = null, containerCssClasses = null, style = null, containerStyle = null, src, alt = null, fixedSize = 'is-1by1', isRounded = false }) => {
|
3255
3249
|
const imageContainerClasses = parseClasses([
|
3256
3250
|
'image',
|
3257
3251
|
fixedSize,
|
@@ -3264,7 +3258,7 @@ const Image = ({ testId = null, containerTestId = null, cssClasses = null, conta
|
|
3264
3258
|
const imageContainerTestId = containerTestId !== null && containerTestId !== void 0 ? containerTestId : parseTestId({ tag: 'image', parsedClasses: imageContainerClasses });
|
3265
3259
|
const imageTestId = testId !== null && testId !== void 0 ? testId : `${imageContainerTestId}-img`;
|
3266
3260
|
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 })));
|
3261
|
+
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
3262
|
};
|
3269
3263
|
|
3270
3264
|
const PaginationItem = ({ testId = null, cssClasses = null, style = null, text, labelText = 'Page', currentLabelText = 'Go to page', isSelected = null, onClick = null }) => {
|
@@ -3282,20 +3276,22 @@ const PaginationItem = ({ testId = null, cssClasses = null, style = null, text,
|
|
3282
3276
|
};
|
3283
3277
|
|
3284
3278
|
const TabItem = ({ testId = null, containerTestId = null, cssClasses = null, containerCssClasses = null, style = null, containerStyle = null, icon = null, text, onClick = null }) => {
|
3285
|
-
const tabItemContainerClasses = parseClasses([
|
3286
|
-
'tabItem-container',
|
3287
|
-
null,
|
3288
|
-
containerCssClasses
|
3289
|
-
]);
|
3290
|
-
const tabItemClasses = parseClasses(['tabItem', cssClasses]);
|
3291
3279
|
const tabItemContainerTestId = containerTestId !== null && containerTestId !== void 0 ? containerTestId : parseTestId({
|
3292
|
-
tag: '
|
3293
|
-
parsedClasses:
|
3280
|
+
tag: 'tab-item-container',
|
3281
|
+
parsedClasses: containerCssClasses !== null && containerCssClasses !== void 0 ? containerCssClasses : ''
|
3294
3282
|
});
|
3295
|
-
const tabItemTestId = testId !== null && testId !== void 0 ? testId : parseTestId({ tag: '
|
3296
|
-
return (React.createElement("a", { "data-testid": tabItemContainerTestId, className:
|
3283
|
+
const tabItemTestId = testId !== null && testId !== void 0 ? testId : parseTestId({ tag: 'tab-item', parsedClasses: cssClasses !== null && cssClasses !== void 0 ? cssClasses : '' });
|
3284
|
+
return (React.createElement("a", { "data-testid": tabItemContainerTestId, className: containerCssClasses !== null && containerCssClasses !== void 0 ? containerCssClasses : undefined, style: containerStyle !== null && containerStyle !== void 0 ? containerStyle : undefined, "aria-hidden": 'true', onClick: onClick !== null && onClick !== void 0 ? onClick : undefined },
|
3297
3285
|
icon ? React.createElement(Icon, Object.assign({}, icon)) : null,
|
3298
|
-
React.createElement("span", { "data-testid": tabItemTestId, className:
|
3286
|
+
React.createElement("span", { "data-testid": tabItemTestId, className: cssClasses !== null && cssClasses !== void 0 ? cssClasses : undefined, style: style !== null && style !== void 0 ? style : undefined }, text)));
|
3287
|
+
};
|
3288
|
+
|
3289
|
+
const generateKey = (max = 5000, min = 1) => {
|
3290
|
+
max = Math.floor(max);
|
3291
|
+
min = Math.ceil(min);
|
3292
|
+
const secureRandomNumbers = new Uint32Array(1);
|
3293
|
+
window.crypto.getRandomValues(secureRandomNumbers);
|
3294
|
+
return Math.floor(secureRandomNumbers[0] * (max - min) + min).toString();
|
3299
3295
|
};
|
3300
3296
|
|
3301
3297
|
const ButtonGroup = ({ testId = null, cssClasses = null, style = null, buttonList, isAttached = false, position = 'left' }) => {
|
@@ -3324,7 +3320,7 @@ const ButtonGroup = ({ testId = null, cssClasses = null, style = null, buttonLis
|
|
3324
3320
|
const shouldApplyColor = (hasSelectedButton && currentButtonItem.isSelected) ||
|
3325
3321
|
!hasSelectedButton;
|
3326
3322
|
const buttonConfig = Object.assign(Object.assign({}, currentButtonItem), { color: shouldApplyColor ? currentButtonItem.color : undefined });
|
3327
|
-
return (React.createElement(Button, Object.assign({ key: `button-group-item-${
|
3323
|
+
return (React.createElement(Button, Object.assign({ key: `button-group-item-${generateKey()}` }, buttonConfig)));
|
3328
3324
|
})));
|
3329
3325
|
};
|
3330
3326
|
|
@@ -3352,7 +3348,7 @@ const ColumnGroup = ({ testId = null, cssClasses = null, style = null, listOfCol
|
|
3352
3348
|
tag: 'columns',
|
3353
3349
|
parsedClasses: columnGroupClasses
|
3354
3350
|
});
|
3355
|
-
return (React.createElement("section", { "data-testid": columnGroupTestId, className: columnGroupClasses, style: style !== null && style !== void 0 ? style : undefined }, listOfColumns.map(columnItemConfig => (React.createElement(Column, Object.assign({ key: `column-group-item-${
|
3351
|
+
return (React.createElement("section", { "data-testid": columnGroupTestId, className: columnGroupClasses, style: style !== null && style !== void 0 ? style : undefined }, listOfColumns.map(columnItemConfig => (React.createElement(Column, Object.assign({ key: `column-group-item-${generateKey()}` }, columnItemConfig))))));
|
3356
3352
|
};
|
3357
3353
|
|
3358
3354
|
const Notification = ({ testId = null, cssClasses = null, style = null, children = null, deleteButton = null, color = null, isLightColor = null }) => {
|
@@ -3394,14 +3390,14 @@ const Breadcrumbs = ({ testId = 'breadcrumbs', containerTestId = null, cssClasse
|
|
3394
3390
|
]
|
3395
3391
|
});
|
3396
3392
|
return (React.createElement("nav", { "data-testid": breadcrumbsContainerTestId, className: breadcrumbsContainerClasses, style: containerStyle !== null && containerStyle !== void 0 ? containerStyle : undefined },
|
3397
|
-
React.createElement("ul", { "data-testid": testId, className: cssClasses !== null && cssClasses !== void 0 ? cssClasses : undefined, style: style !== null && style !== void 0 ? style : undefined }, items.map(itemConfig => (React.createElement(BreadcrumbItem, Object.assign({ key: `breadcrumb-item-${
|
3393
|
+
React.createElement("ul", { "data-testid": testId, className: cssClasses !== null && cssClasses !== void 0 ? cssClasses : undefined, style: style !== null && style !== void 0 ? style : undefined }, items.map(itemConfig => (React.createElement(BreadcrumbItem, Object.assign({ key: `breadcrumb-item-${generateKey()}` }, itemConfig)))))));
|
3398
3394
|
};
|
3399
3395
|
|
3400
3396
|
const renderDropdownMenu = (items) => (React.createElement("section", { className: 'dropdown-content' }, items.map((dropdownItemConfig, i) => {
|
3401
3397
|
const isFirstItemInMenu = items.length > 1 && i === 0;
|
3402
|
-
return isFirstItemInMenu ? (React.createElement(DropdownItem, Object.assign({ key: `dropdown-item-${
|
3403
|
-
React.createElement(DropdownItem, { key: `dropdown-item-${
|
3404
|
-
React.createElement(DropdownItem, Object.assign({ key: `dropdown-item-${
|
3398
|
+
return isFirstItemInMenu ? (React.createElement(DropdownItem, Object.assign({ key: `dropdown-item-${generateKey()}` }, dropdownItemConfig))) : (React.createElement("section", { key: `dropdown-item-${generateKey()}-section` },
|
3399
|
+
React.createElement(DropdownItem, { key: `dropdown-item-${generateKey()}-divider`, type: 'divider', itemText: 'divider' }),
|
3400
|
+
React.createElement(DropdownItem, Object.assign({ key: `dropdown-item-${generateKey()}` }, dropdownItemConfig))));
|
3405
3401
|
})));
|
3406
3402
|
const Dropdown = ({ testId = null, cssClasses = null, style = null, inputText, dropdownPointer = 'dropdown-menu', listOfItems }) => {
|
3407
3403
|
const [isMenuActive, setIsMenuActive] = reactExports.useState(false);
|
@@ -3433,12 +3429,12 @@ const MenuList = ({ testId = null, cssClasses = null, style = null, itemList })
|
|
3433
3429
|
const menuListTestId = testId !== null && testId !== void 0 ? testId : parseTestId({ tag: 'menu-list', parsedClasses: menuListClasses });
|
3434
3430
|
return (React.createElement("ul", { "data-testid": menuListTestId, className: menuListClasses, style: style !== null && style !== void 0 ? style : undefined }, itemList.map(item => {
|
3435
3431
|
if ('subListTitle' in item) {
|
3436
|
-
return (React.createElement("li", { key: `sub-list-menu-item-${
|
3432
|
+
return (React.createElement("li", { key: `sub-list-menu-item-${generateKey()}` },
|
3437
3433
|
React.createElement(MenuItem, Object.assign({}, item.subListTitle)),
|
3438
|
-
React.createElement("ul", null, item.subItems.map(subItem => (React.createElement(MenuItem, Object.assign({ key: `sub-list-menu-sub-item-${
|
3434
|
+
React.createElement("ul", null, item.subItems.map(subItem => (React.createElement(MenuItem, Object.assign({ key: `sub-list-menu-sub-item-${generateKey()}` }, subItem)))))));
|
3439
3435
|
}
|
3440
3436
|
else {
|
3441
|
-
return (React.createElement(MenuItem, Object.assign({ key: `sub-list-item-${
|
3437
|
+
return (React.createElement(MenuItem, Object.assign({ key: `sub-list-item-${generateKey()}` }, item)));
|
3442
3438
|
}
|
3443
3439
|
})));
|
3444
3440
|
};
|
@@ -3446,9 +3442,9 @@ const MenuList = ({ testId = null, cssClasses = null, style = null, itemList })
|
|
3446
3442
|
const Menu = ({ testId = null, cssClasses = null, style = null, menuSections }) => {
|
3447
3443
|
const menuClasses = parseClasses(['menu', cssClasses]);
|
3448
3444
|
const menuTestId = testId !== null && testId !== void 0 ? testId : parseTestId({ tag: 'menu', parsedClasses: menuClasses });
|
3449
|
-
return (React.createElement("aside", { "data-testid": menuTestId, className: menuClasses, style: style !== null && style !== void 0 ? style : undefined }, menuSections.map(section => (React.createElement(React.Fragment, { key: `section-${
|
3450
|
-
React.createElement("p", { key: `section-label-${
|
3451
|
-
React.createElement(MenuList, { key: `section-menu-list-${
|
3445
|
+
return (React.createElement("aside", { "data-testid": menuTestId, className: menuClasses, style: style !== null && style !== void 0 ? style : undefined }, menuSections.map(section => (React.createElement(React.Fragment, { key: `section-${generateKey()}` },
|
3446
|
+
React.createElement("p", { key: `section-label-${generateKey()}`, className: 'menu-label' }, section.label),
|
3447
|
+
React.createElement(MenuList, { key: `section-menu-list-${generateKey()}`, itemList: section.itemList }))))));
|
3452
3448
|
};
|
3453
3449
|
|
3454
3450
|
const renderEllipsis = (hasEllipsis) => hasEllipsis ? (React.createElement("li", null,
|
@@ -3473,7 +3469,7 @@ const renderPages = (pages, hasEllipsis, ellipsisItems) => {
|
|
3473
3469
|
}
|
3474
3470
|
if (!hasEllipsis ||
|
3475
3471
|
(pageIndex > ellipsisItems && pageIndex < lastEllipsisItemIndex)) {
|
3476
|
-
return (React.createElement(PaginationItem, Object.assign({ key: `pagination-item-${
|
3472
|
+
return (React.createElement(PaginationItem, Object.assign({ key: `pagination-item-${generateKey()}` }, pageItem)));
|
3477
3473
|
}
|
3478
3474
|
if (pageIndex === --length) {
|
3479
3475
|
return (React.createElement(React.Fragment, { key: `last-pagination-item` },
|
@@ -3545,7 +3541,127 @@ const Tabs = ({ testId = null, cssClasses = null, style = null, tabs, alignment
|
|
3545
3541
|
]);
|
3546
3542
|
const tabsTestId = testId !== null && testId !== void 0 ? testId : parseTestId({ tag: 'tabs', parsedClasses: tabsClasses });
|
3547
3543
|
return (React.createElement("section", { "data-testid": tabsTestId, className: tabsClasses, style: style !== null && style !== void 0 ? style : undefined },
|
3548
|
-
React.createElement("ul", null, tabs.map(tabConfig => (React.createElement("li", { key: `tab-item-${
|
3544
|
+
React.createElement("ul", null, tabs.map(tabConfig => (React.createElement("li", { key: `tab-item-${generateKey()}`, className: tabConfig.isActive ? 'is-active' : undefined }, React.createElement(TabItem, Object.assign({}, tabConfig))))))));
|
3545
|
+
};
|
3546
|
+
|
3547
|
+
const renderIcon = (iconConfig) => iconConfig ? React.createElement(Icon, Object.assign({}, iconConfig)) : null;
|
3548
|
+
const InputControl = ({ testId = null, cssClasses = null, style = null, inputConfig, leftIcon = null, rightIcon = null, size = null, isLoading = null, isExpanded = null }) => {
|
3549
|
+
const inputControlClasses = parseClasses([
|
3550
|
+
'control',
|
3551
|
+
size,
|
3552
|
+
leftIcon ? 'has-icons-left' : null,
|
3553
|
+
rightIcon ? 'has-icons-right' : null,
|
3554
|
+
isLoading ? 'is-loading' : null,
|
3555
|
+
isExpanded ? 'is-expanded' : null,
|
3556
|
+
cssClasses
|
3557
|
+
]);
|
3558
|
+
const inputControlTestId = testId !== null && testId !== void 0 ? testId : parseTestId({
|
3559
|
+
tag: 'control',
|
3560
|
+
parsedClasses: inputControlClasses,
|
3561
|
+
rules: [
|
3562
|
+
{
|
3563
|
+
regExp: /has-|is-/gm,
|
3564
|
+
replacer: '-'
|
3565
|
+
},
|
3566
|
+
{
|
3567
|
+
regExp: /control/gm,
|
3568
|
+
replacer: ''
|
3569
|
+
}
|
3570
|
+
]
|
3571
|
+
});
|
3572
|
+
const reflectedInputConfig = Object.assign(Object.assign({}, inputConfig), { size: size !== null && size !== void 0 ? size : inputConfig === null || inputConfig === void 0 ? void 0 : inputConfig.size });
|
3573
|
+
return (React.createElement("section", { "data-testid": inputControlTestId, className: inputControlClasses, style: style !== null && style !== void 0 ? style : undefined },
|
3574
|
+
React.createElement(Input, Object.assign({}, reflectedInputConfig)),
|
3575
|
+
renderIcon(leftIcon ? Object.assign(Object.assign({}, leftIcon), { position: 'is-left' }) : undefined),
|
3576
|
+
renderIcon(rightIcon ? Object.assign(Object.assign({}, rightIcon), { position: 'is-right' }) : undefined)));
|
3577
|
+
};
|
3578
|
+
|
3579
|
+
const convertConfigToComponent = ({ type, props }, testId, cssClasses, style, blockText) => {
|
3580
|
+
switch (type) {
|
3581
|
+
case 'icon': {
|
3582
|
+
const panelBlockIconClasses = parseClasses(['panel-icon', cssClasses]);
|
3583
|
+
const panelBlockIconTestId = testId !== null && testId !== void 0 ? testId : parseTestId({ tag: 'panel-icon', parsedClasses: panelBlockIconClasses });
|
3584
|
+
return (React.createElement(React.Fragment, null,
|
3585
|
+
React.createElement("span", { "data-testid": panelBlockIconTestId, className: panelBlockIconClasses, style: style !== null && style !== void 0 ? style : undefined },
|
3586
|
+
React.createElement(Icon, Object.assign({}, props))),
|
3587
|
+
blockText));
|
3588
|
+
}
|
3589
|
+
case 'control':
|
3590
|
+
return React.createElement(InputControl, Object.assign({}, props));
|
3591
|
+
case 'button':
|
3592
|
+
return React.createElement(Button, Object.assign({}, props));
|
3593
|
+
}
|
3594
|
+
};
|
3595
|
+
const PanelBlock = ({ testId = null, containerTestId = null, cssClasses = null, containerCssClasses = null, style = null, containerStyle = null, config, blockText = null, isActive = false, onClick }) => {
|
3596
|
+
const panelBlockLinkClasses = parseClasses([
|
3597
|
+
'panel-block',
|
3598
|
+
isActive ? 'is-active' : null,
|
3599
|
+
containerCssClasses
|
3600
|
+
]);
|
3601
|
+
const panelBlockLinkTestId = containerTestId !== null && containerTestId !== void 0 ? containerTestId : parseTestId({ tag: 'panel-block', parsedClasses: panelBlockLinkClasses });
|
3602
|
+
return (React.createElement("a", { "data-testid": panelBlockLinkTestId, className: panelBlockLinkClasses, style: containerStyle !== null && containerStyle !== void 0 ? containerStyle : undefined, "aria-hidden": 'true', onClick: onClick !== null && onClick !== void 0 ? onClick : undefined }, convertConfigToComponent(config, testId, cssClasses, style, blockText)));
|
3603
|
+
};
|
3604
|
+
|
3605
|
+
const PanelTabs = ({ testId = null, cssClasses = null, style = null, tabList }) => {
|
3606
|
+
const panelTabsClasses = parseClasses(['panel-tabs', cssClasses]);
|
3607
|
+
const panelTabsTestId = testId !== null && testId !== void 0 ? testId : parseTestId({ tag: 'panel-tabs', parsedClasses: panelTabsClasses });
|
3608
|
+
return (React.createElement("section", { "data-testid": panelTabsTestId, className: panelTabsClasses, style: style !== null && style !== void 0 ? style : undefined }, tabList.map(tabItem => {
|
3609
|
+
var _a;
|
3610
|
+
return (React.createElement("a", { key: `tab-item-${generateKey()}`, className: tabItem.isActive ? 'is-active' : undefined, "aria-hidden": 'true', onClick: (_a = tabItem.onClick) !== null && _a !== void 0 ? _a : undefined }, tabItem.text));
|
3611
|
+
})));
|
3612
|
+
};
|
3613
|
+
|
3614
|
+
const renderFieldLabel = (labelText) => labelText ? (React.createElement("label", { "data-testid": 'test-form-field-label', className: 'label' }, labelText)) : null;
|
3615
|
+
const renderFieldBody = (inputControlConfig, isGrouped) => {
|
3616
|
+
if (isGrouped) {
|
3617
|
+
return Array.isArray(inputControlConfig) ? (inputControlConfig.map((_singleConfig, i) => (React.createElement(InputControl, Object.assign({ key: `grouped-input-control-${generateKey()}`, testId: `test-grouped-input-control-${i}` }, _singleConfig))))) : (React.createElement(InputControl, Object.assign({}, inputControlConfig)));
|
3618
|
+
}
|
3619
|
+
else {
|
3620
|
+
return Array.isArray(inputControlConfig) ? (React.createElement(InputControl, Object.assign({}, inputControlConfig[0]))) : (React.createElement(InputControl, Object.assign({}, inputControlConfig)));
|
3621
|
+
}
|
3622
|
+
};
|
3623
|
+
const renderFieldHelper = (helperConfig) => {
|
3624
|
+
if (!helperConfig)
|
3625
|
+
return null;
|
3626
|
+
const fieldHelperClasses = parseClasses(['help', helperConfig.color]);
|
3627
|
+
const fieldHelperTestId = parseTestId({
|
3628
|
+
tag: 'form-field-help',
|
3629
|
+
parsedClasses: fieldHelperClasses,
|
3630
|
+
rules: [{ regExp: /help|is/gm, replacer: '' }]
|
3631
|
+
});
|
3632
|
+
return (React.createElement("p", { "data-testid": fieldHelperTestId, className: fieldHelperClasses }, helperConfig.text));
|
3633
|
+
};
|
3634
|
+
const FormField = ({ testId = null, cssClasses = null, style = null, labelText = null, inputControlConfig, helperConfig = null, isHorizontal = false, isGrouped = false }) => {
|
3635
|
+
var _a;
|
3636
|
+
const formFieldClasses = parseClasses([
|
3637
|
+
'field',
|
3638
|
+
isHorizontal ? 'is-horizontal' : null,
|
3639
|
+
isGrouped ? 'is-grouped' : null,
|
3640
|
+
cssClasses
|
3641
|
+
]);
|
3642
|
+
const formFieldTestId = testId !== null && testId !== void 0 ? testId : parseTestId({ tag: 'field', parsedClasses: formFieldClasses });
|
3643
|
+
if (!isGrouped &&
|
3644
|
+
((_a = inputControlConfig === null || inputControlConfig === void 0 ? void 0 : inputControlConfig.inputConfig) === null || _a === void 0 ? void 0 : _a.color) &&
|
3645
|
+
helperConfig) {
|
3646
|
+
helperConfig = Object.assign(Object.assign({}, helperConfig), { color: inputControlConfig.inputConfig.color });
|
3647
|
+
}
|
3648
|
+
return (React.createElement("section", { "data-testid": formFieldTestId, className: formFieldClasses, style: style !== null && style !== void 0 ? style : undefined },
|
3649
|
+
isHorizontal ? (React.createElement("section", { className: 'field-label' }, renderFieldLabel(labelText))) : (renderFieldLabel(labelText)),
|
3650
|
+
isHorizontal ? (React.createElement("section", { className: 'field-body' },
|
3651
|
+
renderFieldBody(inputControlConfig, isGrouped),
|
3652
|
+
renderFieldHelper(helperConfig))) : (React.createElement(React.Fragment, null,
|
3653
|
+
renderFieldBody(inputControlConfig, isGrouped),
|
3654
|
+
renderFieldHelper(helperConfig)))));
|
3655
|
+
};
|
3656
|
+
|
3657
|
+
const generateHeader = (headerText) => (React.createElement("p", { className: 'panel-heading' }, headerText));
|
3658
|
+
const Panel = ({ testId = null, cssClasses = null, style = null, headerText, panelTabs = null, blockList, color = null }) => {
|
3659
|
+
const panelClasses = parseClasses(['panel', color, cssClasses]);
|
3660
|
+
const panelTestId = testId !== null && testId !== void 0 ? testId : parseTestId({ tag: 'panel', parsedClasses: panelClasses });
|
3661
|
+
return (React.createElement("article", { "data-testid": panelTestId, className: panelClasses, style: style !== null && style !== void 0 ? style : undefined },
|
3662
|
+
generateHeader(headerText),
|
3663
|
+
panelTabs ? React.createElement(PanelTabs, Object.assign({}, panelTabs)) : null,
|
3664
|
+
blockList.map(blockConfig => (React.createElement(PanelBlock, Object.assign({ key: `panel-block-item-${generateKey()}` }, blockConfig))))));
|
3549
3665
|
};
|
3550
3666
|
|
3551
3667
|
exports.Block = Block;
|
@@ -3562,9 +3678,11 @@ exports.Dropdown = Dropdown;
|
|
3562
3678
|
exports.DropdownItem = DropdownItem;
|
3563
3679
|
exports.DropdownTrigger = DropdownTrigger;
|
3564
3680
|
exports.File = File;
|
3681
|
+
exports.FormField = FormField;
|
3565
3682
|
exports.Icon = Icon;
|
3566
3683
|
exports.Image = Image;
|
3567
3684
|
exports.Input = Input;
|
3685
|
+
exports.InputControl = InputControl;
|
3568
3686
|
exports.Menu = Menu;
|
3569
3687
|
exports.MenuItem = MenuItem;
|
3570
3688
|
exports.MenuList = MenuList;
|
@@ -3573,6 +3691,9 @@ exports.Modal = Modal;
|
|
3573
3691
|
exports.Notification = Notification;
|
3574
3692
|
exports.Pagination = Pagination;
|
3575
3693
|
exports.PaginationItem = PaginationItem;
|
3694
|
+
exports.Panel = Panel;
|
3695
|
+
exports.PanelBlock = PanelBlock;
|
3696
|
+
exports.PanelTabs = PanelTabs;
|
3576
3697
|
exports.ProgressBar = ProgressBar;
|
3577
3698
|
exports.RadioButton = RadioButton;
|
3578
3699
|
exports.Select = Select;
|