reactive-bulma 2.17.0 → 3.1.0

package/dist/cjs/index.js

@@ -3319,6 +3319,16 @@ const Tile = ({ testId = null, cssClasses = null, style = null, children, contex
     return (React.createElement("section", { "data-testid": tileTestId, className: tileClasses, style: style !== null && style !== void 0 ? style : undefined }, children));
 };
 
+const NavBarItem = ({ testId = null, cssClasses = null, style = null, children, isActive = false, onClick = null }) => {
+    const navBarItemClasses = parseClasses([
+        'navbar-item',
+        isActive ? 'is-active' : null,
+        cssClasses
+    ]);
+    const navBarItemTestId = testId !== null && testId !== void 0 ? testId : parseTestId({ tag: 'navbar-item', parsedClasses: navBarItemClasses });
+    return (React.createElement("a", { "data-testid": navBarItemTestId, className: navBarItemClasses, style: style !== null && style !== void 0 ? style : undefined, "aria-hidden": 'true', onClick: onClick !== null && onClick !== void 0 ? onClick : undefined }, children));
+};
+
 const generateKey = (max = 5000, min = 1) => {
     max = Math.floor(max);
     min = Math.ceil(min);
@@ -3729,6 +3739,100 @@ const Media = ({ testId = null, cssClasses = null, style = null, leftContent = n
         renderMediaSection(rightContent, 'right', mediaTestId)));
 };
 
+const Section = ({ testId = null, cssClasses = null, style = null, content, size = null }) => {
+    const sectionClasses = parseClasses(['section', size, cssClasses]);
+    const sectionTestId = testId !== null && testId !== void 0 ? testId : parseTestId({ tag: 'section', parsedClasses: sectionClasses });
+    return (React.createElement("section", { "data-testid": sectionTestId, className: sectionClasses, style: style !== null && style !== void 0 ? style : undefined }, content));
+};
+
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+/* global Reflect, Promise, SuppressedError, Symbol */
+
+
+function __rest(s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+}
+
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
+
+const NavBarBrand = ({ testId = null, cssClasses = null, style = null, brandConfig, isBurgerActive = false }) => {
+    const navBarBrandClasses = parseClasses(['navbar-brand', cssClasses]);
+    const navBarBrandTestId = testId !== null && testId !== void 0 ? testId : parseTestId({ tag: 'navbar-brand', parsedClasses: navBarBrandClasses });
+    const navBarBurgerClasses = parseClasses([
+        'navbar-burger',
+        isBurgerActive ? 'is-active' : null
+    ]);
+    const navBarBurgerTestId = parseTestId({
+        tag: 'navbar-burger',
+        parsedClasses: navBarBurgerClasses
+    });
+    const { children } = brandConfig, brandItemConfig = __rest(brandConfig, ["children"]);
+    return (React.createElement("section", { "data-testid": navBarBrandTestId, className: navBarBrandClasses, style: style !== null && style !== void 0 ? style : undefined },
+        React.createElement(NavBarItem, Object.assign({}, brandItemConfig),
+            React.createElement(Image, Object.assign({}, children))),
+        React.createElement("a", { role: 'button', "data-testid": navBarBurgerTestId, className: navBarBurgerClasses, "aria-label": 'menu', "aria-expanded": 'false' },
+            React.createElement("span", { "aria-hidden": 'true' }),
+            React.createElement("span", { "aria-hidden": 'true' }),
+            React.createElement("span", { "aria-hidden": 'true' }))));
+};
+
+const renderDropdownItem = (dropdownItemConfig) => dropdownItemConfig === 'divider' ? (React.createElement("hr", { key: `navbar-dropdown-divider-${generateKey()}`, className: 'navbar-divider' })) : (React.createElement(NavBarItem, Object.assign({ key: `navbar-dropdown-item-${generateKey()}` }, dropdownItemConfig)));
+const NavBarDropdown = ({ testId = null, containerTestId = null, cssClasses = null, containerCssClasses = null, style = null, containerStyle = null, text, items, position = null, isActive = false, isHoverable = false, hasDropdownUp = false, hasBoxedMenu = false }) => {
+    const navBarDropdownContainerClasses = parseClasses([
+        'navbar-item',
+        'has-dropdown',
+        position,
+        isActive ? 'is-active' : null,
+        isHoverable ? 'is-hoverable' : null,
+        hasDropdownUp ? 'has-dropdown-up' : null,
+        containerCssClasses
+    ]);
+    const navBarDropdownContainerTestId = containerTestId !== null && containerTestId !== void 0 ? containerTestId : parseTestId({
+        tag: 'navbar-dropdown-container',
+        parsedClasses: navBarDropdownContainerClasses,
+        rules: [
+            { regExp: /navbar-item|has-dropdown/gm, replacer: '' },
+            { regExp: /is-|has-/gm, replacer: '-' }
+        ]
+    });
+    const navBarDropdownClasses = parseClasses([
+        'navbar-dropdown',
+        hasBoxedMenu ? 'is-boxed' : null,
+        cssClasses
+    ]);
+    const navBarDropdownTestId = testId !== null && testId !== void 0 ? testId : parseTestId({
+        tag: 'navbar-dropdown',
+        parsedClasses: navBarDropdownClasses
+    });
+    return (React.createElement("section", { "data-testid": navBarDropdownContainerTestId, className: navBarDropdownContainerClasses, style: containerStyle !== null && containerStyle !== void 0 ? containerStyle : undefined },
+        React.createElement("a", { className: 'navbar-link', "aria-hidden": 'true' }, text),
+        React.createElement("section", { "data-testid": navBarDropdownTestId, className: navBarDropdownClasses, style: style !== null && style !== void 0 ? style : undefined }, items.map(renderDropdownItem))));
+};
+
 const renderFieldLabel = (labelText) => labelText ? (React.createElement("label", { "data-testid": 'test-form-field-label', className: 'label' }, labelText)) : null;
 const renderFieldBody = (inputControlConfig, isGrouped) => {
     if (isGrouped) {
@@ -3796,13 +3900,14 @@ const Level = ({ testId = null, cssClasses = null, style = null, leftSide = null
         rightSide ? (React.createElement("section", { className: 'level-right' }, renderLevelSection(rightSide))) : null));
 };
 
+const renderHeroSection = (content, type, testId, size) => type === 'body' || size === 'is-fullheight' ? (React.createElement("section", { "data-testid": `${testId}-${type}`, className: `hero-${type}` }, content)) : null;
 const Hero = ({ testId = null, cssClasses = null, style = null, header = null, body, footer = null, color = null, size = null }) => {
     const heroClasses = parseClasses(['hero', color, size, cssClasses]);
     const heroTestId = testId !== null && testId !== void 0 ? testId : parseTestId({ tag: 'hero', parsedClasses: heroClasses });
     return (React.createElement("section", { "data-testid": heroTestId, className: heroClasses, style: style !== null && style !== void 0 ? style : undefined },
-        size === 'is-fullheight' ? (React.createElement("section", { "data-testid": `${heroTestId}-head`, className: 'hero-head' }, header)) : null,
-        React.createElement("section", { "data-testid": `${heroTestId}-body`, className: 'hero-body' }, body),
-        size === 'is-fullheight' ? (React.createElement("section", { "data-testid": `${heroTestId}-foot`, className: 'hero-foot' }, footer)) : null));
+        renderHeroSection(header, 'head', heroTestId, size),
+        renderHeroSection(body, 'body', heroTestId, size),
+        renderHeroSection(footer, 'foot', heroTestId, size)));
 };
 
 const TileGroup = ({ testId = null, cssClasses = null, style = null, context = 'is-ancestor', size = null, isVertical = false, groupConfig }) => {
@@ -3830,6 +3935,32 @@ const TileGroup = ({ testId = null, cssClasses = null, style = null, context = '
     return (React.createElement(Tile, { testId: tileBoxTestId, cssClasses: cssClasses !== null && cssClasses !== void 0 ? cssClasses : undefined, style: style !== null && style !== void 0 ? style : undefined, context: context, size: size !== null && size !== void 0 ? size : undefined, isVertical: isVertical }, groupConfig.map(tileConfig => (React.createElement(Tile, Object.assign({ key: `tile-item-${generateKey()}` }, tileConfig))))));
 };
 
+const renderNavBarMenuSection = (menuSectionConfig, menuSection, testId) => menuSectionConfig ? (React.createElement("section", { "data-testid": `${testId}-${menuSection}`, className: `navbar-${menuSection}` }, menuSectionConfig.itemList.map(itemConfig => itemConfig.children !== undefined ? (React.createElement(NavBarItem, Object.assign({ key: `navbar-section${menuSection}-${generateKey()}` }, itemConfig))) : (React.createElement(NavBarDropdown, Object.assign({ key: `navbar-section${menuSection}-${generateKey()}` }, itemConfig)))))) : null;
+const NavBar = ({ testId = null, cssClasses = null, style = null, brandConfig = null, itemsAtStart = null, itemsAtEnd = null, fixedPosition = null, color = null, isTransparent = false, isSpaced = false, hasShadow = false }) => {
+    const navBarClasses = parseClasses([
+        'navbar',
+        fixedPosition,
+        color,
+        isTransparent ? 'is-transparent' : null,
+        isSpaced ? 'is-spaced' : null,
+        hasShadow ? 'has-shadow' : null,
+        cssClasses
+    ]);
+    const navBarTestId = testId !== null && testId !== void 0 ? testId : parseTestId({
+        tag: 'navbar',
+        parsedClasses: navBarClasses,
+        rules: [
+            { regExp: /is-|has-/gm, replacer: '-' },
+            { regExp: /navbar/gm, replacer: '' }
+        ]
+    });
+    return (React.createElement("nav", { "data-testid": navBarTestId, className: navBarClasses, style: style !== null && style !== void 0 ? style : undefined },
+        brandConfig ? (React.createElement("section", { "data-testid": 'navbar-brand', className: 'navbar-brand' }, React.createElement(NavBarBrand, Object.assign({}, brandConfig)))) : null,
+        React.createElement("section", { className: 'navbar-menu' },
+            renderNavBarMenuSection(itemsAtStart, 'start', navBarTestId),
+            renderNavBarMenuSection(itemsAtEnd, 'end', navBarTestId))));
+};
+
 exports.Block = Block;
 exports.Box = Box;
 exports.BreadcrumbItem = BreadcrumbItem;
@@ -3860,6 +3991,10 @@ exports.MenuItem = MenuItem;
 exports.MenuList = MenuList;
 exports.Message = Message;
 exports.Modal = Modal;
+exports.NavBar = NavBar;
+exports.NavBarBrand = NavBarBrand;
+exports.NavBarDropdown = NavBarDropdown;
+exports.NavBarItem = NavBarItem;
 exports.Notification = Notification;
 exports.Pagination = Pagination;
 exports.PaginationItem = PaginationItem;
@@ -3868,6 +4003,7 @@ exports.PanelBlock = PanelBlock;
 exports.PanelTabs = PanelTabs;
 exports.ProgressBar = ProgressBar;
 exports.RadioButton = RadioButton;
+exports.Section = Section;
 exports.Select = Select;
 exports.TabItem = TabItem;
 exports.Tabs = Tabs;