reactive-bulma 4.3.28 → 4.4.0

package/dist/components/molecules/Tabs/index.js

@@ -1,45 +1,49 @@
-import { jsx as l } from "react/jsx-runtime";
-import { parseClasses as p, parseTestId as b } from "../../../functions/parsers.js";
-import "react";
+import { jsx as s } from "react/jsx-runtime";
+import { useMemo as T } from "react";
+import { COMMON_CLASSES as l } from "../../../constants/classes.js";
+import { parseClasses as $, parseTestId as b } from "../../../functions/parsers.js";
+import { generateKey as S } from "../../../functions/generators.js";
 import f from "../../atoms/TabItem/index.js";
-import { generateKey as h } from "../../../functions/generators.js";
-const y = ({
-  testId: e = null,
-  cssClasses: a = null,
+const v = ({
+  testId: m = null,
+  cssClasses: u = null,
   style: i = null,
-  tabs: r,
-  alignment: n = null,
-  size: o = null,
-  format: u = null,
+  tabs: e,
+  alignment: t = null,
+  size: a = null,
+  format: r = null,
   isRounded: d = null,
-  isFullWidth: m = null
+  isFullWidth: c = null
 }) => {
-  const s = p([
+  const n = $([
     "tabs",
-    n,
-    o,
-    u,
-    d ? "is-toggle-rounded" : null,
-    m ? "is-fullwidth" : null,
-    a
-  ]), c = e ?? b({ tag: "tabs", parsedClasses: s });
-  return /* @__PURE__ */ l(
+    t ? `${l.IS}${t}` : null,
+    a ? `${l.IS}${a}` : null,
+    r ? `${l.IS}${r}` : null,
+    d ? l.TOGGLE_ROUNDED : null,
+    c ? l.FULL_WIDTH : null,
+    u
+  ]), p = m ?? b({ tag: "tabs", parsedClasses: n }), I = T(
+    () => e.map((o) => /* @__PURE__ */ s(
+      "li",
+      {
+        className: o.isActive ? l.ACTIVE : void 0,
+        children: /* @__PURE__ */ s(f, { ...o })
+      },
+      `tab-item-${S()}`
+    )),
+    [e]
+  );
+  return /* @__PURE__ */ s(
     "section",
     {
-      "data-testid": c,
-      className: s,
+      "data-testid": p,
+      className: n,
       style: i ?? void 0,
-      children: /* @__PURE__ */ l("ul", { children: r.map((t) => /* @__PURE__ */ l(
-        "li",
-        {
-          className: t.isActive ? "is-active" : void 0,
-          children: /* @__PURE__ */ l(f, { ...t })
-        },
-        `tab-item-${h()}`
-      )) })
+      children: /* @__PURE__ */ s("ul", { children: I })
     }
   );
 };
 export {
-  y as default
+  v as default
 };

package/dist/components/molecules/TagList/index.d.ts

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+import { TagListProps } from '../../../interfaces/moleculeProps';
+declare const TagList: React.FC<TagListProps>;
+export default TagList;

package/dist/components/molecules/TagList/index.js

@@ -0,0 +1,31 @@
+import { jsx as t } from "react/jsx-runtime";
+import "react";
+import { parseClasses as m, parseTestId as n } from "../../../functions/parsers.js";
+import p from "../../atoms/Tag/index.js";
+import { generateKey as g } from "../../../functions/generators.js";
+const C = ({
+  testId: a = null,
+  cssClasses: e = null,
+  style: r = null,
+  listOfTags: o
+}) => {
+  const s = m(["tags", e]), i = a ?? n({ tag: "tags", parsedClasses: s });
+  return /* @__PURE__ */ t(
+    "section",
+    {
+      "data-testid": i,
+      className: s,
+      style: r ?? void 0,
+      children: o.map((l) => /* @__PURE__ */ t(
+        p,
+        {
+          ...l
+        },
+        `tag-list-item-${g()}`
+      ))
+    }
+  );
+};
+export {
+  C as default
+};

package/dist/components/molecules/TagList/index.stories.d.ts

@@ -0,0 +1,5 @@
+import { Meta } from '@storybook/react';
+import { default as TagList } from '.';
+declare const _default: Meta<typeof TagList>;
+export default _default;
+export declare const BasicExample: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, import('../../../interfaces/moleculeProps').TagListProps>;

package/dist/components/molecules/TileBox/index.js

@@ -1,6 +1,6 @@
 import { jsx as x } from "react/jsx-runtime";
-import { parseClasses as d, parseTestId as m } from "../../../functions/parsers.js";
 import "react";
+import { parseClasses as d, parseTestId as m } from "../../../functions/parsers.js";
 import u from "../../atoms/Tile/index.js";
 const T = ({
   testId: r = null,

package/dist/components/molecules/index.d.ts

@@ -21,3 +21,6 @@ export { default as NavBarBrand } from './NavBarBrand';
 export { default as NavBarDropdown } from './NavBarDropdown';
 export { default as TableRow } from './TableRow';
 export { default as FormFieldInput } from './FormFieldInput';
+export { default as TagList } from './TagList';
+export { default as CheckboxGroup } from './CheckboxGroup';
+export { default as Grid } from './Grid';

package/dist/components/molecules/index.js

@@ -5,44 +5,50 @@ import { default as d } from "./Breadcrumbs/index.js";
 import { default as s } from "./Dropdown/index.js";
 import { default as x } from "./Message/index.js";
 import { default as i } from "./Menu/index.js";
-import { default as M } from "./MenuList/index.js";
-import { default as c } from "./Pagination/index.js";
-import { default as v } from "./Modal/index.js";
-import { default as F } from "./Tabs/index.js";
-import { default as N } from "./InputControl/index.js";
-import { default as g } from "./PanelBlock/index.js";
-import { default as D } from "./PanelTabs/index.js";
-import { default as L } from "./LevelItem/index.js";
-import { default as R } from "./TileBox/index.js";
-import { default as h } from "./Footer/index.js";
+import { default as b } from "./MenuList/index.js";
+import { default as M } from "./Pagination/index.js";
+import { default as G } from "./Modal/index.js";
+import { default as v } from "./Tabs/index.js";
+import { default as C } from "./InputControl/index.js";
+import { default as I } from "./PanelBlock/index.js";
+import { default as N } from "./PanelTabs/index.js";
+import { default as k } from "./LevelItem/index.js";
+import { default as h } from "./TileBox/index.js";
+import { default as S } from "./Footer/index.js";
 import { default as q } from "./Media/index.js";
 import { default as z } from "./Section/index.js";
 import { default as E } from "./NavBarBrand/index.js";
 import { default as J } from "./NavBarDropdown/index.js";
 import { default as O } from "./TableRow/index.js";
 import { default as U } from "./FormFieldInput/index.js";
+import { default as W } from "./TagList/index.js";
+import { default as Y } from "./CheckboxGroup/index.js";
+import { default as _ } from "./Grid/index.js";
 export {
   d as Breadcrumbs,
   e as ButtonGroup,
+  Y as CheckboxGroup,
   t as ColumnGroup,
   s as Dropdown,
-  h as Footer,
+  S as Footer,
   U as FormFieldInput,
-  N as InputControl,
-  L as LevelItem,
+  _ as Grid,
+  C as InputControl,
+  k as LevelItem,
   q as Media,
   i as Menu,
-  M as MenuList,
+  b as MenuList,
   x as Message,
-  v as Modal,
+  G as Modal,
   E as NavBarBrand,
   J as NavBarDropdown,
   l as Notification,
-  c as Pagination,
-  g as PanelBlock,
-  D as PanelTabs,
+  M as Pagination,
+  I as PanelBlock,
+  N as PanelTabs,
   z as Section,
   O as TableRow,
-  F as Tabs,
-  R as TileBox
+  v as Tabs,
+  W as TagList,
+  h as TileBox
 };

package/dist/components/organisms/Card/index.js

@@ -1,88 +1,100 @@
-import { jsxs as i, jsx as a } from "react/jsx-runtime";
-import { parseClasses as u, parseTestId as N } from "../../../functions/parsers.js";
-import "react";
-import $ from "../../atoms/Image/index.js";
-import { generateKey as o } from "../../../functions/generators.js";
-const I = ({
-  testId: m = null,
-  cssClasses: h = null,
+import { jsxs as o, jsx as e } from "react/jsx-runtime";
+import { useMemo as r } from "react";
+import { parseClasses as g, parseTestId as y } from "../../../functions/parsers.js";
+import { generateKey as m } from "../../../functions/generators.js";
+import z from "../../atoms/Image/index.js";
+const A = ({
+  testId: h = null,
+  cssClasses: u = null,
   style: p = null,
   headerText: c = null,
   image: d = null,
-  content: s,
+  content: t,
   footerLinks: l = null
 }) => {
-  const n = u(["card", h]), e = m ?? N({ tag: "card", parsedClasses: n });
-  return /* @__PURE__ */ i(
-    "section",
-    {
-      "data-testid": e,
-      className: n,
-      style: p ?? void 0,
-      children: [
-        c ? /* @__PURE__ */ i(
-          "header",
-          {
-            "data-testid": `${e}-header`,
-            className: "card-header",
-            children: [
-              /* @__PURE__ */ a("p", { className: "card-header-title", children: c }),
-              /* @__PURE__ */ a(
-                "button",
+  const i = g(["card", u]), a = h ?? y({ tag: "card", parsedClasses: i }), N = r(
+    () => c ? /* @__PURE__ */ o(
+      "header",
+      {
+        "data-testid": `${a}-header`,
+        className: "card-header",
+        children: [
+          /* @__PURE__ */ e("p", { className: "card-header-title", children: c }),
+          /* @__PURE__ */ e(
+            "button",
+            {
+              className: "card-header-icon",
+              "aria-label": "more options",
+              children: /* @__PURE__ */ e("span", { className: "icon", children: /* @__PURE__ */ e(
+                "i",
                 {
-                  className: "card-header-icon",
-                  "aria-label": "more options",
-                  children: /* @__PURE__ */ a("span", { className: "icon", children: /* @__PURE__ */ a(
-                    "i",
-                    {
-                      className: "fas fa-angle-down",
-                      "aria-hidden": "true"
-                    }
-                  ) })
+                  className: "fas fa-angle-down",
+                  "aria-hidden": "true"
                 }
-              )
-            ]
-          }
-        ) : null,
-        d ? /* @__PURE__ */ a(
-          "section",
-          {
-            "data-testid": `${e}-image`,
-            className: "card-image",
-            children: /* @__PURE__ */ a($, { ...d })
-          }
-        ) : null,
-        /* @__PURE__ */ a(
+              ) })
+            }
+          )
+        ]
+      }
+    ) : null,
+    [c, a]
+  ), $ = r(
+    () => d ? /* @__PURE__ */ e(
+      "section",
+      {
+        "data-testid": `${a}-image`,
+        className: "card-image",
+        children: /* @__PURE__ */ e(z, { ...d })
+      }
+    ) : null,
+    [d, a]
+  ), f = r(
+    () => /* @__PURE__ */ e(
+      "section",
+      {
+        "data-testid": `${a}-content`,
+        className: "card-content",
+        children: Array.isArray(t) ? t.map((s, n) => /* @__PURE__ */ e(
           "section",
           {
-            "data-testid": `${e}-content`,
-            className: "card-content",
-            children: Array.isArray(s) ? s.map((t, r) => /* @__PURE__ */ a(
-              "section",
-              {
-                "data-testid": `${e}-content-item-${r}`,
-                className: "content",
-                children: t
-              },
-              `card-content-item-${o()}`
-            )) : /* @__PURE__ */ a("section", { className: "content", children: s })
-          }
-        ),
-        l ? /* @__PURE__ */ a("section", { className: "card-footer", children: l.map((t, r) => /* @__PURE__ */ a(
-          "a",
-          {
-            "data-testid": `${e}-footer-item-${r}`,
-            className: "card-footer-item",
-            "aria-hidden": "true",
-            onClick: t.onClick ?? void 0,
-            children: t.text
+            "data-testid": `${a}-content-item-${n}`,
+            className: "content",
+            children: s
           },
-          `card-footer-item-${o()}`
-        )) }) : null
+          `card-content-item-${m()}`
+        )) : /* @__PURE__ */ e("section", { className: "content", children: t })
+      }
+    ),
+    [a, t]
+  ), C = r(
+    () => l ? /* @__PURE__ */ e("section", { className: "card-footer", children: l.map((s, n) => /* @__PURE__ */ e(
+      "a",
+      {
+        "data-testid": `${a}-footer-item-${n}`,
+        className: "card-footer-item",
+        "aria-hidden": "true",
+        onClick: s.onClick ?? void 0,
+        children: s.text
+      },
+      `card-footer-item-${m()}`
+    )) }) : null,
+    [l, a]
+  );
+  return /* @__PURE__ */ o(
+    "section",
+    {
+      "data-testid": a,
+      className: i,
+      style: p ?? void 0,
+      children: [
+        N,
+        $,
+        f,
+        C
       ]
     }
   );
 };
 export {
-  I as default
+  A as default
 };

package/dist/components/organisms/FormField/index.js

@@ -1,68 +1,65 @@
-import { jsx as s } from "react/jsx-runtime";
-import { useMemo as i } from "react";
-import m from "../../molecules/FormFieldInput/index.js";
-import { parseClasses as u, parseTestId as y } from "../../../functions/parsers.js";
-import { generateKey as c } from "../../../functions/generators.js";
-const F = (e, o, r) => {
-  const a = o ? `grouped-input-control-body-${c()}` : `input-control-body-${c()}`;
-  if (o)
-    return Array.isArray(e) ? e.map((l, t) => {
-      const d = {
-        ...l,
-        isHorizontal: l.isHorizontal ?? r,
-        testId: `test-grouped-input-control-${t}`
-      };
-      return /* @__PURE__ */ s(
-        m,
+import { jsx as o } from "react/jsx-runtime";
+import { useMemo as I } from "react";
+import t from "../../molecules/FormFieldInput/index.js";
+import { parseClasses as h, parseTestId as A } from "../../../functions/parsers.js";
+import { generateKey as m } from "../../../functions/generators.js";
+const N = ({
+  testId: c = null,
+  cssClasses: i = null,
+  style: u = null,
+  inputsConfig: e,
+  isHorizontal: r = !1,
+  isGrouped: s = !1,
+  withAddons: p = !1
+}) => {
+  const a = h([
+    "field",
+    r ? "is-horizontal" : null,
+    s ? "is-grouped" : null,
+    p ? "has-addons" : null,
+    i
+  ]), y = c ?? A({ tag: "field", parsedClasses: a }), d = I(() => {
+    const n = s ? `grouped-input-control-body-${m()}` : `input-control-body-${m()}`;
+    if (s)
+      return Array.isArray(e) ? e.map((l, f) => {
+        const F = {
+          ...l,
+          isHorizontal: l.isHorizontal ?? r,
+          testId: `test-grouped-input-control-${f}`
+        };
+        return /* @__PURE__ */ o(
+          t,
+          {
+            ...F
+          },
+          n
+        );
+      }) : /* @__PURE__ */ o(
+        t,
         {
-          ...d
+          ...e,
+          isHorizontal: e.isHorizontal ?? r
         },
-        a
+        n
       );
-    }) : /* @__PURE__ */ s(
-      m,
-      {
-        labelText: e.labelText,
-        input: e.input,
-        type: e.type,
-        helper: e.helper,
+    {
+      const l = Array.isArray(e) ? null : {
+        ...e,
         isHorizontal: e.isHorizontal ?? r
-      }
-    );
-  {
-    const l = Array.isArray(e) ? null : {
-      ...e,
-      isHorizontal: e.isHorizontal ?? r
-    };
-    return l !== null ? /* @__PURE__ */ s(m, { ...l }) : null;
-  }
-}, z = ({
-  testId: e = null,
-  cssClasses: o = null,
-  style: r = null,
-  config: a,
-  isHorizontal: l = !1,
-  isGrouped: t = !1
-}) => {
-  const d = u([
-    "field",
-    l ? "is-horizontal" : null,
-    t ? "is-grouped" : null,
-    o
-  ]), p = e ?? y({ tag: "field", parsedClasses: d }), n = i(
-    () => F(a, t, l),
-    [a, t, l]
-  );
-  return /* @__PURE__ */ s(
+      };
+      return l !== null ? /* @__PURE__ */ o(t, { ...l }) : null;
+    }
+  }, [e, s, r]);
+  return /* @__PURE__ */ o(
     "section",
     {
-      "data-testid": p,
-      className: d,
-      style: r ?? void 0,
-      children: l ? /* @__PURE__ */ s("section", { className: "field-body", children: n }) : n
+      "data-testid": y,
+      className: a,
+      style: u ?? void 0,
+      children: r ? /* @__PURE__ */ o("section", { className: "field-body", children: d }) : d
     }
   );
 };
 export {
-  z as default
+  N as default
 };

package/dist/components/organisms/FormField/index.stories.d.ts

@@ -5,3 +5,5 @@ export default _default;
 export declare const BasicExample: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, import('../../../interfaces/organismProps').FormFieldProps>;
 export declare const InHorizontalMode: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, import('../../../interfaces/organismProps').FormFieldProps>;
 export declare const GroupedInputs: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, import('../../../interfaces/organismProps').FormFieldProps>;
+export declare const InputWithAddon: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, import('../../../interfaces/organismProps').FormFieldProps>;
+export declare const InputWithBothAddons: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, import('../../../interfaces/organismProps').FormFieldProps>;

package/dist/components/organisms/Hero/index.js

@@ -1,37 +1,43 @@
-import { jsxs as h, jsx as i } from "react/jsx-runtime";
-import { parseClasses as m, parseTestId as f } from "../../../functions/parsers.js";
-const n = (o, s, t, r) => s === "body" || r === "is-fullheight" ? /* @__PURE__ */ i(
+import { jsxs as m, jsx as $ } from "react/jsx-runtime";
+import { COMMON_CLASSES as c } from "../../../constants/classes.js";
+import { parseClasses as f, parseTestId as C } from "../../../functions/parsers.js";
+const a = "hero", r = (o, l, t, n) => l === "body" || n === "fullheight" ? /* @__PURE__ */ $(
   "section",
   {
-    "data-testid": `${t}-${s}`,
-    className: `hero-${s}`,
+    "data-testid": `${t}-${l}`,
+    className: `${a}-${l}`,
     children: o
   }
-) : null, C = ({
+) : null, x = ({
   testId: o = null,
-  cssClasses: s = null,
+  cssClasses: l = null,
   style: t = null,
-  header: r = null,
-  body: d,
-  footer: c = null,
-  color: u = null,
-  size: e = null
+  header: n = null,
+  body: h,
+  footer: i = null,
+  color: d = null,
+  size: s = null
 }) => {
-  const a = m(["hero", u, e, s]), l = o ?? f({ tag: "hero", parsedClasses: a });
-  return /* @__PURE__ */ h(
+  const u = f([
+    a,
+    d ? `${c.IS}${d}` : null,
+    s ? `${c.IS}${s}` : null,
+    l
+  ]), e = o ?? C({ tag: a, parsedClasses: u });
+  return /* @__PURE__ */ m(
     "section",
     {
-      "data-testid": l,
-      className: a,
+      "data-testid": e,
+      className: u,
       style: t ?? void 0,
       children: [
-        n(r, "head", l, e),
-        n(d, "body", l, e),
-        n(c, "foot", l, e)
+        r(n, "head", e, s),
+        r(h, "body", e, s),
+        r(i, "foot", e, s)
       ]
     }
   );
 };
 export {
-  C as default
+  x as default
 };