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.
Files changed (43) hide show
  1. package/LICENSE +1 -1
  2. package/dist/cjs/index.js +159 -38
  3. package/dist/cjs/index.js.map +1 -1
  4. package/dist/cjs/types/components/molecules/InputControl/index.d.ts +4 -0
  5. package/dist/cjs/types/components/molecules/PanelBlock/index.d.ts +4 -0
  6. package/dist/cjs/types/components/molecules/PanelTabs/index.d.ts +4 -0
  7. package/dist/cjs/types/components/molecules/index.d.ts +3 -0
  8. package/dist/cjs/types/components/organisms/FormField/index.d.ts +4 -0
  9. package/dist/cjs/types/components/organisms/Panel/index.d.ts +4 -0
  10. package/dist/cjs/types/components/organisms/index.d.ts +2 -0
  11. package/dist/cjs/types/functions/generators.d.ts +4 -0
  12. package/dist/cjs/types/functions/parsers.d.ts +0 -8
  13. package/dist/cjs/types/functions/tests/generators.test.d.ts +1 -0
  14. package/dist/cjs/types/index.d.ts +1 -0
  15. package/dist/cjs/types/interfaces/atomProps.d.ts +22 -16
  16. package/dist/cjs/types/interfaces/commonProps.d.ts +1 -1
  17. package/dist/cjs/types/interfaces/functionProps.d.ts +5 -0
  18. package/dist/cjs/types/interfaces/moleculeProps.d.ts +48 -9
  19. package/dist/cjs/types/interfaces/organismProps.d.ts +29 -0
  20. package/dist/cjs/types/types/domTypes.d.ts +3 -2
  21. package/dist/cjs/types/types/styleTypes.d.ts +5 -3
  22. package/dist/esm/index.js +155 -39
  23. package/dist/esm/index.js.map +1 -1
  24. package/dist/esm/types/components/molecules/InputControl/index.d.ts +4 -0
  25. package/dist/esm/types/components/molecules/PanelBlock/index.d.ts +4 -0
  26. package/dist/esm/types/components/molecules/PanelTabs/index.d.ts +4 -0
  27. package/dist/esm/types/components/molecules/index.d.ts +3 -0
  28. package/dist/esm/types/components/organisms/FormField/index.d.ts +4 -0
  29. package/dist/esm/types/components/organisms/Panel/index.d.ts +4 -0
  30. package/dist/esm/types/components/organisms/index.d.ts +2 -0
  31. package/dist/esm/types/functions/generators.d.ts +4 -0
  32. package/dist/esm/types/functions/parsers.d.ts +0 -8
  33. package/dist/esm/types/functions/tests/generators.test.d.ts +1 -0
  34. package/dist/esm/types/index.d.ts +1 -0
  35. package/dist/esm/types/interfaces/atomProps.d.ts +22 -16
  36. package/dist/esm/types/interfaces/commonProps.d.ts +1 -1
  37. package/dist/esm/types/interfaces/functionProps.d.ts +5 -0
  38. package/dist/esm/types/interfaces/moleculeProps.d.ts +48 -9
  39. package/dist/esm/types/interfaces/organismProps.d.ts +29 -0
  40. package/dist/esm/types/types/domTypes.d.ts +3 -2
  41. package/dist/esm/types/types/styleTypes.d.ts +5 -3
  42. package/dist/index.d.ts +110 -26
  43. package/package.json +11 -11
package/LICENSE CHANGED
@@ -1,6 +1,6 @@
1
1
  MIT License
2
2
 
3
- Copyright (c) 2023 Nicolás Omar González Passerino
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
- // PARSERS
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: 'tabItem-container',
3293
- parsedClasses: tabItemContainerClasses
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: 'tabItem', parsedClasses: tabItemClasses });
3296
- return (React.createElement("a", { "data-testid": tabItemContainerTestId, className: tabItemContainerClasses, style: containerStyle !== null && containerStyle !== void 0 ? containerStyle : undefined, "aria-hidden": 'true', onClick: onClick !== null && onClick !== void 0 ? onClick : undefined },
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: tabItemClasses, style: style !== null && style !== void 0 ? style : undefined }, text)));
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-${parseKey()}` }, buttonConfig)));
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-${parseKey()}` }, columnItemConfig))))));
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-${parseKey()}` }, itemConfig)))))));
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-${parseKey()}` }, dropdownItemConfig))) : (React.createElement("section", { key: `dropdown-item-${parseKey()}-section` },
3403
- React.createElement(DropdownItem, { key: `dropdown-item-${parseKey()}-divider`, type: 'divider', itemText: 'divider' }),
3404
- React.createElement(DropdownItem, Object.assign({ key: `dropdown-item-${parseKey()}` }, dropdownItemConfig))));
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-${parseKey()}` },
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-${parseKey()}` }, subItem)))))));
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-${parseKey()}` }, 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-${parseKey()}` },
3450
- React.createElement("p", { key: `section-label-${parseKey()}`, className: 'menu-label' }, section.label),
3451
- React.createElement(MenuList, { key: `section-menu-list-${parseKey()}`, itemList: section.itemList }))))));
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-${parseKey()}` }, pageItem)));
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-${parseKey()}`, className: tabConfig.isActive ? 'is-active' : undefined }, React.createElement(TabItem, Object.assign({}, tabConfig))))))));
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;