reactive-bulma 4.3.27 → 4.4.0

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

@@ -1,42 +1,48 @@
-import { jsxs as r, jsx as e } from "react/jsx-runtime";
-import { parseClasses as p, parseTestId as u } from "../../../functions/parsers.js";
-import g from "../../atoms/Delete/index.js";
+import { jsxs as m, jsx as l } from "react/jsx-runtime";
 import "react";
-const N = ({
-  testId: d = null,
-  cssClasses: n = null,
-  style: m = null,
+import { COMMON_CLASSES as o } from "../../../constants/classes.js";
+import { parseClasses as $, parseTestId as g } from "../../../functions/parsers.js";
+import C from "../../atoms/Delete/index.js";
+const y = ({
+  testId: i = null,
+  cssClasses: c = null,
+  style: u = null,
   headerText: a = null,
-  bodyText: i,
-  deleteButton: l = null,
-  color: o = null,
-  size: c = null
+  bodyText: p,
+  deleteButton: t = null,
+  color: n = null,
+  size: r = null
 }) => {
-  const t = p(["message", o, c, n]), s = d ?? u({ tag: "message", parsedClasses: t });
-  return /* @__PURE__ */ r(
+  const s = "message", d = $([
+    s,
+    n ? `${o.IS}${n}` : null,
+    r ? `${o.IS}${r}` : null,
+    c
+  ]), e = i ?? g({ tag: s, parsedClasses: d });
+  return /* @__PURE__ */ m(
     "article",
     {
-      "data-testid": s,
-      className: t,
-      style: m ?? void 0,
+      "data-testid": e,
+      className: d,
+      style: u ?? void 0,
       children: [
-        a && /* @__PURE__ */ r(
+        a && /* @__PURE__ */ m(
           "section",
           {
-            "data-testid": `${s}-header`,
-            className: "message-header",
+            "data-testid": `${e}-header`,
+            className: `${s}-header`,
             children: [
-              /* @__PURE__ */ e("p", { children: a }),
-              l ? /* @__PURE__ */ e(g, { ...l }) : null
+              /* @__PURE__ */ l("p", { children: a }),
+              t ? /* @__PURE__ */ l(C, { ...t }) : null
             ]
           }
         ),
-        /* @__PURE__ */ e(
+        /* @__PURE__ */ l(
           "section",
           {
-            "data-testid": `${s}-body`,
-            className: "message-body",
-            children: i
+            "data-testid": `${e}-body`,
+            className: `${s}-body`,
+            children: p
           }
         )
       ]
@@ -44,5 +50,5 @@ const N = ({
   );
 };
 export {
-  N as default
+  y as default
 };

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

@@ -1,6 +1,6 @@
 import { jsxs as e, jsx as a } from "react/jsx-runtime";
-import { parseClasses as n, parseTestId as t } from "../../../functions/parsers.js";
 import "react";
+import { parseClasses as n, parseTestId as t } from "../../../functions/parsers.js";
 import b from "../../atoms/NavBarItem/index.js";
 const C = ({
   testId: d = null,

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

@@ -1,80 +1,78 @@
-import { jsxs as B, jsx as r } from "react/jsx-runtime";
-import { parseClasses as n, parseTestId as o } from "../../../functions/parsers.js";
-import "react";
-import C from "../../atoms/NavBarItem/index.js";
-import { generateKey as l } from "../../../functions/generators.js";
-const D = (a) => a === "divider" ? /* @__PURE__ */ r(
-  "hr",
-  {
-    className: "navbar-divider"
-  },
-  `navbar-dropdown-divider-${l()}`
-) : /* @__PURE__ */ r(
-  C,
-  {
-    ...a
-  },
-  `navbar-dropdown-item-${l()}`
-), E = ({
-  testId: a = null,
-  containerTestId: d = null,
-  cssClasses: t = null,
-  containerCssClasses: i = null,
-  style: p = null,
-  containerStyle: v = null,
-  text: m,
-  items: c,
-  position: u = null,
-  isActive: w = !1,
-  isHoverable: b = !1,
-  hasDropdownUp: h = !1,
-  hasBoxedMenu: f = !1
+import { jsx as a, jsxs as y } from "react/jsx-runtime";
+import { useMemo as T, Fragment as j } from "react";
+import { parseClasses as r, parseTestId as d } from "../../../functions/parsers.js";
+import { generateKey as k } from "../../../functions/generators.js";
+import E from "../../atoms/NavBarItem/index.js";
+const M = ({
+  testId: t = null,
+  containerTestId: i = null,
+  cssClasses: p = null,
+  containerCssClasses: m = null,
+  style: v = null,
+  containerStyle: c = null,
+  text: u,
+  items: e,
+  position: w = null,
+  isActive: b = !1,
+  isHoverable: h = !1,
+  hasDropdownUp: f = !1,
+  hasBoxedMenu: g = !1,
+  isArrowLess: B = null
 }) => {
-  const e = n([
+  const s = r([
     "navbar-item",
     "has-dropdown",
-    u,
-    w ? "is-active" : null,
-    b ? "is-hoverable" : null,
-    h ? "has-dropdown-up" : null,
-    i
-  ]), g = d ?? o({
+    w,
+    b ? "is-active" : null,
+    h ? "is-hoverable" : null,
+    f ? "has-dropdown-up" : null,
+    m
+  ]), C = i ?? d({
     tag: "navbar-dropdown-container",
-    parsedClasses: e,
+    parsedClasses: s,
     rules: [
       { regExp: /navbar-item|has-dropdown/gm, replacer: "" },
       { regExp: /is-|has-/gm, replacer: "-" }
     ]
-  }), s = n([
+  }), n = r([
     "navbar-dropdown",
-    f ? "is-boxed" : null,
-    t
-  ]), x = a ?? o({
+    g ? "is-boxed" : null,
+    p
+  ]), N = r([
+    "navbar-link",
+    B ? "is-arrowless" : null
+  ]), x = t ?? d({
     tag: "navbar-dropdown",
-    parsedClasses: s
-  });
-  return /* @__PURE__ */ B(
+    parsedClasses: n
+  }), D = T(
+    () => e.map((o) => {
+      const l = o === "divider", I = l ? "navbar-dropdown-divider" : "navbar-dropdown-item";
+      return /* @__PURE__ */ a(j, { children: l ? /* @__PURE__ */ a("hr", { className: "navbar-divider" }) : /* @__PURE__ */ a(E, { ...o }) }, `${I}-${k()}`);
+    }),
+    [e]
+  );
+  return /* @__PURE__ */ y(
     "section",
     {
-      "data-testid": g,
-      className: e,
-      style: v ?? void 0,
+      "data-testid": C,
+      className: s,
+      style: c ?? void 0,
       children: [
-        /* @__PURE__ */ r(
+        /* @__PURE__ */ a(
           "a",
           {
-            className: "navbar-link",
+            className: N,
             "aria-hidden": "true",
-            children: m
+            children: u
           }
         ),
-        /* @__PURE__ */ r(
+        /* @__PURE__ */ a(
           "section",
           {
             "data-testid": x,
-            className: s,
-            style: p ?? void 0,
-            children: c.map(D)
+            className: n,
+            style: v ?? void 0,
+            children: D
           }
         )
       ]
@@ -82,5 +80,5 @@ const D = (a) => a === "divider" ? /* @__PURE__ */ r(
   );
 };
 export {
-  E as default
+  M as default
 };

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

@@ -5,6 +5,8 @@ export default _default;
 export declare const BasicExample: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, import('../../../interfaces/moleculeProps').NavBarDropdownProps>;
 export declare const OpenState: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, import('../../../interfaces/moleculeProps').NavBarDropdownProps>;
 export declare const Hoverable: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, import('../../../interfaces/moleculeProps').NavBarDropdownProps>;
+export declare const HasAnActiveItem: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, import('../../../interfaces/moleculeProps').NavBarDropdownProps>;
 export declare const HasDividerItems: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, import('../../../interfaces/moleculeProps').NavBarDropdownProps>;
 export declare const HasBoxedMenu: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, import('../../../interfaces/moleculeProps').NavBarDropdownProps>;
+export declare const WithoutArrow: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, import('../../../interfaces/moleculeProps').NavBarDropdownProps>;
 export declare const InverseDropdown: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, import('../../../interfaces/moleculeProps').NavBarDropdownProps>;

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

@@ -1,38 +1,39 @@
-import { jsxs as c, jsx as u } from "react/jsx-runtime";
-import { parseClasses as f, parseTestId as m } from "../../../functions/parsers.js";
-import p from "../../atoms/Delete/index.js";
+import { jsxs as f, jsx as m } from "react/jsx-runtime";
 import "react";
-const h = ({
-  testId: l = null,
-  cssClasses: i = null,
-  style: n = null,
-  children: o = null,
+import { COMMON_CLASSES as i } from "../../../constants/classes.js";
+import { parseClasses as p, parseTestId as d } from "../../../functions/parsers.js";
+import C from "../../atoms/Delete/index.js";
+const j = ({
+  testId: o = null,
+  cssClasses: a = null,
+  style: e = null,
+  children: r = null,
   deleteButton: s = null,
-  color: a = null,
-  isLightColor: e = null
+  color: t = null,
+  isLightColor: c = null
 }) => {
-  const t = f([
-    "notification",
-    a,
-    e ? "is-light" : null,
-    i
-  ]), r = l ?? m({
-    tag: "notification",
-    parsedClasses: t
+  const l = "notification", n = p([
+    l,
+    t ? `${i.IS}${t}` : null,
+    c ? i.LIGHT : null,
+    a
+  ]), u = o ?? d({
+    tag: l,
+    parsedClasses: n
   });
-  return /* @__PURE__ */ c(
+  return /* @__PURE__ */ f(
     "section",
     {
-      "data-testid": r,
-      className: t,
-      style: n ?? void 0,
+      "data-testid": u,
+      className: n,
+      style: e ?? void 0,
       children: [
-        s ? /* @__PURE__ */ u(p, { ...s }) : null,
-        o
+        s ? /* @__PURE__ */ m(C, { ...s }) : null,
+        r
       ]
     }
   );
 };
 export {
-  h as default
+  j as default
 };

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

@@ -1,103 +1,113 @@
-import { jsxs as d, jsx as s } from "react/jsx-runtime";
-import m from "react";
-import { parseClasses as c, parseTestId as g } from "../../../functions/parsers.js";
-import o from "../../atoms/PaginationItem/index.js";
-import { generateKey as k } from "../../../functions/generators.js";
-const f = (n) => n ? /* @__PURE__ */ s("li", { children: /* @__PURE__ */ s(
-  "span",
-  {
-    "aria-hidden": "true",
-    className: "pagination-ellipsis",
-    children: "…"
-  }
-) }) : null, C = (n) => {
-  if (!n) return null;
-  const a = c([
-    n.cssClasses,
-    n.isDisabled ? "is-disabled" : null
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import x, { useCallback as A, useMemo as B } from "react";
+import { COMMON_CLASSES as i } from "../../../constants/classes.js";
+import { parseClasses as u, parseTestId as S } from "../../../functions/parsers.js";
+import { generateKey as d } from "../../../functions/generators.js";
+import D from "../../atoms/PaginationItem/index.js";
+const n = "pagination", P = "pagination-list", F = (e) => {
+  if (!e) return null;
+  const l = u([
+    e.cssClasses,
+    e.isDisabled ? i.DISABLED : null
   ]);
   return /* @__PURE__ */ s(
     "a",
     {
-      className: a,
-      onClick: n.onClick ?? void 0,
+      className: l,
+      onClick: e.onClick ?? void 0,
       "aria-hidden": "true",
-      children: n.text
+      children: e.text
     }
   );
-}, F = (n, a, e) => n.map((t, i, { length: l }) => {
-  const r = l - e - 1;
-  if (i === 0)
-    return /* @__PURE__ */ d(m.Fragment, { children: [
-      /* @__PURE__ */ s(o, { ...t }),
-      f(a)
-    ] }, "first-pagination-item");
-  if (!a || i > e && i < r)
-    return /* @__PURE__ */ s(
-      o,
-      {
-        ...t
-      },
-      `pagination-item-${k()}`
-    );
-  if (i === --l)
-    return /* @__PURE__ */ d(m.Fragment, { children: [
-      f(a),
-      /* @__PURE__ */ s(o, { ...t })
-    ] }, "last-pagination-item");
-}), w = ({
-  testId: n = null,
-  containerTestId: a = null,
-  cssClasses: e = null,
-  containerCssClasses: t = null,
-  style: i = null,
-  containerStyle: l = null,
-  pages: r,
-  ellipsisItems: h = 0,
-  showPreviousPageButton: x = {
+}, G = ({
+  testId: e = null,
+  containerTestId: l = null,
+  cssClasses: I = null,
+  containerCssClasses: b = null,
+  style: k = null,
+  containerStyle: y = null,
+  pages: m,
+  ellipsisItems: r = 0,
+  showPreviousPageButton: E = {
     text: "Previous",
-    cssClasses: "pagination-previous"
+    cssClasses: `${n}-previous`
   },
-  showNextPageButton: N = {
+  showNextPageButton: L = {
     text: "Next page",
-    cssClasses: "pagination-next"
+    cssClasses: `${n}-next`
   },
-  hasEllipsis: v = !1,
-  isRounded: P = !1,
-  alignment: b = null,
-  size: y = null
+  hasEllipsis: o = !1,
+  isRounded: M = !1,
+  alignment: p = null,
+  size: C = null
 }) => {
-  const p = c([
-    "pagination",
-    P ? "is-rounded" : null,
-    y,
-    b,
-    e
-  ]), T = n ?? g({
-    tag: "pagination",
-    parsedClasses: p
-  }), u = c([
-    "pagination-list",
-    t
-  ]), j = a ?? g({ tag: "pagination-list", parsedClasses: u });
-  return /* @__PURE__ */ d(
+  const f = u([
+    n,
+    M ? i.ROUNDED : null,
+    C ? `${i.IS}${C}` : null,
+    p ? `${i.IS}${p}` : null,
+    I
+  ]), O = e ?? S({
+    tag: n,
+    parsedClasses: f
+  }), g = u([
+    P,
+    b
+  ]), R = l ?? S({
+    tag: P,
+    parsedClasses: g
+  }), $ = A(
+    (a) => F(a),
+    []
+  ), T = B(() => {
+    const a = o ? /* @__PURE__ */ s("li", { children: /* @__PURE__ */ s(
+      "span",
+      {
+        "aria-hidden": "true",
+        className: `${n}-ellipsis`,
+        children: "…"
+      }
+    ) }) : null;
+    return m.map((N, t, { length: h }) => {
+      const j = h - r - 1, v = /* @__PURE__ */ s("li", { children: /* @__PURE__ */ s(D, { ...N }) });
+      if (t === 0)
+        return /* @__PURE__ */ c(x.Fragment, { children: [
+          v,
+          a
+        ] }, `first-pagination-item-${d()}`);
+      if (!o || t > r && t < j)
+        return /* @__PURE__ */ s("li", { children: /* @__PURE__ */ s(D, { ...N }) }, `${n}-item-${d()}`);
+      if (t === --h)
+        return /* @__PURE__ */ c(
+          x.Fragment,
+          {
+            children: [
+              a,
+              v
+            ]
+          },
+          `last-${n}-item-${d()}`
+        );
+    });
+  }, [m, o, r]);
+  return /* @__PURE__ */ c(
     "nav",
     {
-      "data-testid": T,
-      className: p,
-      style: l ?? void 0,
+      "data-testid": O,
+      className: f,
+      style: y ?? void 0,
       role: "navigation",
       "aria-label": "pagination",
       children: [
-        C(x),
-        C(N),
+        $(E),
+        $(L),
         /* @__PURE__ */ s(
           "ul",
           {
-            "data-testid": j,
-            className: u,
-            style: i ?? void 0,
-            children: F(r, v, h)
+            "data-testid": R,
+            className: g,
+            style: k ?? void 0,
+            children: T
           }
         )
       ]
@@ -105,5 +115,5 @@ const f = (n) => n ? /* @__PURE__ */ s("li", { children: /* @__PURE__ */ s(
   );
 };
 export {
-  w as default
+  G as default
 };

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

@@ -4,6 +4,8 @@ declare const _default: Meta<typeof Pagination>;
 export default _default;
 export declare const BasicExample: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, import('../../../interfaces/moleculeProps').PaginationProps>;
 export declare const Centered: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, import('../../../interfaces/moleculeProps').PaginationProps>;
+export declare const BigSize: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, import('../../../interfaces/moleculeProps').PaginationProps>;
+export declare const Rounded: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, import('../../../interfaces/moleculeProps').PaginationProps>;
 export declare const CustomNavigationButtons: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, import('../../../interfaces/moleculeProps').PaginationProps>;
 export declare const DisabledNavigationButtons: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, import('../../../interfaces/moleculeProps').PaginationProps>;
 export declare const NoNavigationButtons: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, import('../../../interfaces/moleculeProps').PaginationProps>;

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

@@ -1,23 +1,28 @@
 import { jsx as c } from "react/jsx-runtime";
-import { parseClasses as i, parseTestId as r } from "../../../functions/parsers.js";
-const u = ({
-  testId: e = null,
-  cssClasses: t = null,
-  style: l = null,
-  content: n,
-  size: o = null
+import { COMMON_CLASSES as i } from "../../../constants/classes.js";
+import { parseClasses as d, parseTestId as m } from "../../../functions/parsers.js";
+const S = ({
+  testId: l = null,
+  cssClasses: o = null,
+  style: n = null,
+  content: a,
+  size: s = null
 }) => {
-  const s = i(["section", o, t]), a = e ?? r({ tag: "section", parsedClasses: s });
+  const t = "section", e = d([
+    t,
+    s ? `${i.IS}${s}` : null,
+    o
+  ]), r = l ?? m({ tag: t, parsedClasses: e });
   return /* @__PURE__ */ c(
     "section",
     {
-      "data-testid": a,
-      className: s,
-      style: l ?? void 0,
-      children: n
+      "data-testid": r,
+      className: e,
+      style: n ?? void 0,
+      children: a
     }
   );
 };
 export {
-  u as default
+  S as default
 };

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

@@ -1,42 +1,51 @@
-import { jsxs as d, jsx as s } from "react/jsx-runtime";
-import { parseClasses as u, parseTestId as b } from "../../../functions/parsers.js";
-import "react";
-import c from "../../atoms/TableHeadCell/index.js";
-import f from "../../atoms/TableCell/index.js";
-import { generateKey as w } from "../../../functions/generators.js";
-const v = ({
-  testId: t = null,
-  cssClasses: a = null,
-  style: o = null,
-  headCell: l = null,
-  listOfCells: r,
-  isSelected: n = !1,
-  onClick: m = null
+import { jsx as t, jsxs as f } from "react/jsx-runtime";
+import { useMemo as r } from "react";
+import { COMMON_CLASSES as C } from "../../../constants/classes.js";
+import { parseClasses as T, parseTestId as w } from "../../../functions/parsers.js";
+import { generateKey as S } from "../../../functions/generators.js";
+import x from "../../atoms/TableHeadCell/index.js";
+import I from "../../atoms/TableCell/index.js";
+const z = ({
+  testId: a = null,
+  cssClasses: m = null,
+  style: n = null,
+  color: l = null,
+  headCell: e = null,
+  listOfCells: s,
+  isSelected: i = !1,
+  onClick: p = null
 }) => {
-  const e = u([
-    n ? "is-selected" : null,
-    a
-  ]), i = t ?? b({ tag: "table-row", parsedClasses: e });
-  return /* @__PURE__ */ d(
+  const o = T([
+    i ? "is-selected" : null,
+    l ? `${C.IS}${l}` : null,
+    m
+  ]), u = a ?? w({ tag: "table-row", parsedClasses: o }), d = r(
+    () => e ? /* @__PURE__ */ t(x, { ...e }) : null,
+    [e]
+  ), b = r(
+    () => s.map((c) => /* @__PURE__ */ t(
+      I,
+      {
+        ...c
+      },
+      `table-row-${S()}`
+    )),
+    [s]
+  );
+  return /* @__PURE__ */ f(
     "tr",
     {
-      "data-testid": i,
-      className: e,
-      style: o ?? void 0,
-      onClick: m ?? void 0,
+      "data-testid": u,
+      className: o,
+      style: n ?? void 0,
+      onClick: p ?? void 0,
       children: [
-        l ? /* @__PURE__ */ s(c, { ...l }) : null,
-        r.map((p) => /* @__PURE__ */ s(
-          f,
-          {
-            ...p
-          },
-          `table-row-${w()}`
-        ))
+        d,
+        b
       ]
     }
   );
 };
 export {
-  v as default
+  z as default
 };

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

@@ -3,5 +3,6 @@ import { default as TableRow } from '.';
 declare const _default: Meta<typeof TableRow>;
 export default _default;
 export declare const BasicExample: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, import('../../../interfaces/moleculeProps').TableRowProps>;
+export declare const Colored: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, import('../../../interfaces/moleculeProps').TableRowProps>;
 export declare const WithHeaderCell: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, import('../../../interfaces/moleculeProps').TableRowProps>;
 export declare const Selected: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, import('../../../interfaces/moleculeProps').TableRowProps>;