reactive-bulma 4.3.28 → 4.4.0

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

@@ -1,38 +1,51 @@
-import { jsxs as u, jsx as t } from "react/jsx-runtime";
-import { parseClasses as v, parseTestId as p } from "../../../functions/parsers.js";
-import "react";
-import { generateKey as d } from "../../../functions/generators.js";
-import f from "../../molecules/LevelItem/index.js";
-const s = (l) => l.map((e) => /* @__PURE__ */ t(
-  f,
-  {
-    ...e
-  },
-  `level-item-${d()}`
-)), N = ({
-  testId: l = null,
-  cssClasses: e = null,
-  style: m = null,
-  leftSide: n = null,
-  centerSide: a = null,
-  rightSide: r = null,
-  isMobile: i = !1
+import { jsxs as p, jsx as i } from "react/jsx-runtime";
+import { useMemo as n } from "react";
+import { parseClasses as C, parseTestId as L } from "../../../functions/parsers.js";
+import { generateKey as g } from "../../../functions/generators.js";
+import h from "../../molecules/LevelItem/index.js";
+const r = (e, l) => {
+  if (e === null) return null;
+  const s = e.map((t) => /* @__PURE__ */ i(
+    h,
+    {
+      ...t
+    },
+    `level-item-${g()}`
+  ));
+  return l === "center" ? s : /* @__PURE__ */ i("section", { className: `level-${l}`, children: s });
+}, N = ({
+  testId: e = null,
+  cssClasses: l = null,
+  style: s = null,
+  leftSide: t = null,
+  centerSide: o = null,
+  rightSide: m = null,
+  isMobile: c = !1
 }) => {
-  const o = v([
+  const a = C([
     "level",
-    i ? "is-mobile" : null,
-    e
-  ]), c = l ?? p({ tag: "level", parsedClasses: o });
-  return /* @__PURE__ */ u(
+    c ? "is-mobile" : null,
+    l
+  ]), u = e ?? L({ tag: "level", parsedClasses: a }), d = n(
+    () => r(t, "left"),
+    [t]
+  ), v = n(
+    () => r(o, "center"),
+    [o]
+  ), f = n(
+    () => r(m, "right"),
+    [m]
+  );
+  return /* @__PURE__ */ p(
     "nav",
     {
-      "data-testid": c,
-      className: o,
-      style: m ?? void 0,
+      "data-testid": u,
+      className: a,
+      style: s ?? void 0,
       children: [
-        n ? /* @__PURE__ */ t("section", { className: "level-left", children: s(n) }) : null,
-        a ? s(a) : null,
-        r ? /* @__PURE__ */ t("section", { className: "level-right", children: s(r) }) : null
+        d,
+        v,
+        f
       ]
     }
   );

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

@@ -1,83 +1,91 @@
-import { jsxs as d, jsx as s } from "react/jsx-runtime";
-import { parseClasses as h, parseTestId as B } from "../../../functions/parsers.js";
-import "react";
-import $ from "../../atoms/NavBarItem/index.js";
-import { generateKey as o } from "../../../functions/generators.js";
-import f from "../../molecules/NavBarBrand/index.js";
-import x from "../../molecules/NavBarDropdown/index.js";
-const p = (l, a, e) => l ? /* @__PURE__ */ s(
+import { jsx as s, jsxs as i } from "react/jsx-runtime";
+import { useMemo as T, useCallback as h } from "react";
+import { COMMON_CLASSES as l } from "../../../constants/classes.js";
+import { parseClasses as x, parseTestId as M } from "../../../functions/parsers.js";
+import { TEST_ID_REGEXP as p } from "../../../constants/regExp.js";
+import { generateKey as u } from "../../../functions/generators.js";
+import D from "../../atoms/NavBarItem/index.js";
+import R from "../../molecules/NavBarBrand/index.js";
+import _ from "../../molecules/NavBarDropdown/index.js";
+const C = (e, r, n) => e ? /* @__PURE__ */ s(
   "section",
   {
-    "data-testid": `${e}-${a}`,
-    className: `navbar-${a}`,
-    children: l.itemList.map(
-      (r) => r.children !== void 0 ? /* @__PURE__ */ s(
-        $,
+    "data-testid": `${n}-${r}`,
+    className: `navbar-${r}`,
+    children: e.itemList.map(
+      (a) => a.children !== void 0 ? /* @__PURE__ */ s(
+        D,
         {
-          ...r
+          ...a
         },
-        `navbar-section${a}-${o()}`
+        `navbar-section-${r}-${u()}`
       ) : /* @__PURE__ */ s(
-        x,
+        _,
         {
-          ...r
+          ...a
         },
-        `navbar-section${a}-${o()}`
+        `navbar-section-${r}-${u()}`
       )
     )
   }
-) : null, D = ({
-  testId: l = null,
-  cssClasses: a = null,
-  style: e = null,
-  brandConfig: r = null,
+) : null, G = ({
+  testId: e = null,
+  cssClasses: r = null,
+  style: n = null,
+  brandConfig: a = null,
   itemsAtStart: v = null,
-  itemsAtEnd: c = null,
-  fixedPosition: i = null,
-  color: m = null,
-  isTransparent: u = !1,
+  itemsAtEnd: N = null,
+  fixedPosition: B = null,
+  color: o = null,
+  isTransparent: $ = !1,
   isSpaced: b = !1,
-  hasShadow: N = !1
+  hasShadow: f = !1
 }) => {
-  const t = h([
-    "navbar",
-    i,
+  const m = "navbar", d = x([
     m,
-    u ? "is-transparent" : null,
-    b ? "is-spaced" : null,
-    N ? "has-shadow" : null,
-    a
-  ]), n = l ?? B({
-    tag: "navbar",
-    parsedClasses: t,
+    B,
+    o ? `${l.IS}${o}` : null,
+    $ ? l.TRANSPARENT : null,
+    b ? l.SPACED : null,
+    f ? l.SHADOW : null,
+    r
+  ]), t = e ?? M({
+    tag: m,
+    parsedClasses: d,
     rules: [
-      { regExp: /is-|has-/gm, replacer: "-" },
-      { regExp: /navbar/gm, replacer: "" }
+      { regExp: p.IS_HAS, replacer: "-" },
+      { regExp: p.NAVBAR, replacer: "" }
     ]
-  });
-  return /* @__PURE__ */ d(
+  }), A = T(
+    () => a ? /* @__PURE__ */ s(
+      "section",
+      {
+        "data-testid": "navbar-brand",
+        className: "navbar-brand",
+        children: /* @__PURE__ */ s(R, { ...a })
+      }
+    ) : null,
+    [a]
+  ), c = h(
+    (E, S, I) => C(E, S, I),
+    []
+  );
+  return /* @__PURE__ */ i(
     "nav",
     {
-      "data-testid": n,
-      className: t,
-      style: e ?? void 0,
+      "data-testid": t,
+      className: d,
+      style: n ?? void 0,
       children: [
-        r ? /* @__PURE__ */ s(
-          "section",
-          {
-            "data-testid": "navbar-brand",
-            className: "navbar-brand",
-            children: /* @__PURE__ */ s(f, { ...r })
-          }
-        ) : null,
-        /* @__PURE__ */ d("section", { className: "navbar-menu", children: [
-          p(v, "start", n),
-          p(c, "end", n)
+        A,
+        /* @__PURE__ */ i("section", { className: "navbar-menu", children: [
+          c(v, "start", t),
+          c(N, "end", t)
         ] })
       ]
     }
   );
 };
 export {
-  D as default
+  G as default
 };

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

@@ -1,35 +1,41 @@
-import { jsxs as c, jsx as l } from "react/jsx-runtime";
-import { parseClasses as d, parseTestId as u } from "../../../functions/parsers.js";
-import "react";
-import { generateKey as f } from "../../../functions/generators.js";
-import g from "../../molecules/PanelBlock/index.js";
-import h from "../../molecules/PanelTabs/index.js";
-const x = (e) => /* @__PURE__ */ l("p", { className: "panel-heading", children: e }), N = ({
-  testId: e = null,
-  cssClasses: n = null,
-  style: t = null,
-  headerText: r,
-  panelTabs: a = null,
-  blockList: o,
+import { jsx as l, jsxs as f } from "react/jsx-runtime";
+import { useMemo as o } from "react";
+import { parseClasses as g, parseTestId as h } from "../../../functions/parsers.js";
+import { generateKey as x } from "../../../functions/generators.js";
+import C from "../../molecules/PanelBlock/index.js";
+import P from "../../molecules/PanelTabs/index.js";
+const N = ({
+  testId: n = null,
+  cssClasses: t = null,
+  style: r = null,
+  headerText: m,
+  panelTabs: e = null,
+  blockList: s,
   color: p = null
 }) => {
-  const s = d(["panel", p, n]), m = e ?? u({ tag: "panel", parsedClasses: s });
-  return /* @__PURE__ */ c(
+  const a = g(["panel", p, t]), i = n ?? h({ tag: "panel", parsedClasses: a }), c = o(
+    () => e ? /* @__PURE__ */ l(P, { ...e }) : null,
+    [e]
+  ), d = o(
+    () => s.map((u) => /* @__PURE__ */ l(
+      C,
+      {
+        ...u
+      },
+      `panel-block-item-${x()}`
+    )),
+    [s]
+  );
+  return /* @__PURE__ */ f(
     "article",
     {
-      "data-testid": m,
-      className: s,
-      style: t ?? void 0,
+      "data-testid": i,
+      className: a,
+      style: r ?? void 0,
       children: [
-        x(r),
-        a ? /* @__PURE__ */ l(h, { ...a }) : null,
-        o.map((i) => /* @__PURE__ */ l(
-          g,
-          {
-            ...i
-          },
-          `panel-block-item-${f()}`
-        ))
+        /* @__PURE__ */ l("p", { className: "panel-heading", children: m }),
+        c,
+        d
       ]
     }
   );

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

@@ -1,8 +1,8 @@
 import { jsx as e, jsxs as C } from "react/jsx-runtime";
-import { parseClasses as T, parseTestId as w } from "../../../functions/parsers.js";
 import "react";
-import x from "../../atoms/TableHeadCell/index.js";
+import { parseClasses as T, parseTestId as w } from "../../../functions/parsers.js";
 import { generateKey as b } from "../../../functions/generators.js";
+import x from "../../atoms/TableHeadCell/index.js";
 import y from "../../molecules/TableRow/index.js";
 const m = (l, t) => /* @__PURE__ */ e("tr", { children: t.map((a) => /* @__PURE__ */ e(
   x,

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

@@ -6,6 +6,7 @@ export default _default;
 export declare const BasicExample: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, TableProps>;
 export declare const FirstRowCellIsHeader: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, TableProps>;
 export declare const LotsOfRows: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, TableProps>;
+export declare const Hoverable: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, TableProps>;
 export declare const SelectedRows: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, TableProps>;
 export declare const Bordered: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, TableProps>;
 export declare const Striped: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, TableProps>;

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

@@ -1,56 +1,51 @@
-import { jsx as t } from "react/jsx-runtime";
-import { parseClasses as d, parseTestId as c } from "../../../functions/parsers.js";
+import { jsx as o } from "react/jsx-runtime";
 import "react";
-import o from "../../atoms/Tile/index.js";
-import { generateKey as f } from "../../../functions/generators.js";
-const C = ({
-  testId: i = null,
+import { parseClasses as f, parseTestId as T } from "../../../functions/parsers.js";
+import { TEST_ID_REGEXP as i } from "../../../constants/regExp.js";
+import { generateKey as E } from "../../../functions/generators.js";
+import p from "../../atoms/Tile/index.js";
+const _ = ({
+  testId: a = null,
   cssClasses: e = null,
-  style: p = null,
+  style: m = null,
   context: r = "is-ancestor",
-  size: l = null,
-  isVertical: s = !1,
-  groupConfig: a
+  size: s = null,
+  isVertical: l = !1,
+  groupConfig: n
 }) => {
-  const m = d([
-    "tileGroup",
+  const t = "tile-group", u = f([
+    t,
     r,
-    l,
-    s ? "is-vertical" : null,
+    s,
+    l ? "is-vertical" : null,
     e
-  ]), u = i ?? c({
-    tag: "tileGroup",
-    parsedClasses: m,
+  ]), d = a ?? T({
+    tag: t,
+    parsedClasses: u,
     rules: [
-      {
-        regExp: /tileGroup/gm,
-        replacer: ""
-      },
-      {
-        regExp: /is-/gm,
-        replacer: "-"
-      }
+      { regExp: i.TILE_GROUP, replacer: "" },
+      { regExp: i.IS, replacer: "-" }
     ]
   });
-  return /* @__PURE__ */ t(
-    o,
+  return /* @__PURE__ */ o(
+    p,
     {
-      testId: u,
+      testId: d,
       cssClasses: e ?? void 0,
-      style: p ?? void 0,
+      style: m ?? void 0,
       context: r,
-      size: l ?? void 0,
-      isVertical: s,
-      children: a.map((n) => /* @__PURE__ */ t(
-        o,
+      size: s ?? void 0,
+      isVertical: l,
+      children: n.map((c) => /* @__PURE__ */ o(
+        p,
         {
-          ...n
+          ...c
         },
-        `tile-item-${f()}`
+        `tile-item-${E()}`
       ))
     }
   );
 };
 export {
-  C as default
+  _ as default
 };

package/dist/constants/classes.d.ts

@@ -0,0 +1,34 @@
+export declare const COMMON_CLASSES: {
+    IS: string;
+    ARE: string;
+    HAS: string;
+    HAS_TEXT: string;
+    NOTIFICATION: string;
+    VERTICAL: string;
+    NARROW: string;
+    OFFSET: string;
+    TRANSPARENT: string;
+    SPACED: string;
+    SHADOW: string;
+    LIGHT: string;
+    ROUNDED: string;
+    TOGGLE_ROUNDED: string;
+    LOADING: string;
+    EXPANDED: string;
+    ACTIVE: string;
+    ICON_LEFT: string;
+    ICON_RIGHT: string;
+    INVERTED: string;
+    OUTLINED: string;
+    STATIC: string;
+    SELECTED: string;
+    FULL_WIDTH: string;
+    RESPONSIVE: string;
+    DISABLED: string;
+    HAS_ADDONS: string;
+    GAP: string;
+    COLUMN_GAP: string;
+    ROW_GAP: string;
+    AUTO_COLUMNS_GRID: string;
+    COL_MIN_WIDTH: string;
+};

package/dist/constants/classes.js

@@ -0,0 +1,37 @@
+const s = {
+  IS: "is-",
+  ARE: "are-",
+  HAS: "has-",
+  HAS_TEXT: "has-text-",
+  NOTIFICATION: "notification",
+  VERTICAL: "is-vertical",
+  NARROW: "is-narrow",
+  OFFSET: "is-offset-",
+  TRANSPARENT: "is-transparent",
+  SPACED: "is-spaced",
+  SHADOW: "has-shadow",
+  LIGHT: "is-light",
+  ROUNDED: "is-rounded",
+  TOGGLE_ROUNDED: "is-toggle-rounded",
+  LOADING: "is-loading",
+  EXPANDED: "is-expanded",
+  ACTIVE: "is-active",
+  ICON_LEFT: "has-icons-left",
+  ICON_RIGHT: "has-icons-right",
+  INVERTED: "is-inverted",
+  OUTLINED: "is-outlined",
+  STATIC: "is-static",
+  SELECTED: "is-selected",
+  FULL_WIDTH: "is-fullwidth",
+  RESPONSIVE: "is-responsive",
+  DISABLED: "is-disabled",
+  HAS_ADDONS: "has-addons",
+  GAP: "is-gap-",
+  COLUMN_GAP: "is-column-gap-",
+  ROW_GAP: "is-row-gap-",
+  AUTO_COLUMNS_GRID: "has-auto-count",
+  COL_MIN_WIDTH: "is-col-min-"
+};
+export {
+  s as COMMON_CLASSES
+};

package/dist/constants/regExp.d.ts

@@ -0,0 +1,18 @@
+export declare const TEST_ID_REGEXP: {
+    IS: RegExp;
+    IS_HAS: RegExp;
+    IS_ARE: RegExp;
+    HAS_TEXT: RegExp;
+    TILE: RegExp;
+    NAVBAR: RegExp;
+    TILE_GROUP: RegExp;
+    MDI: RegExp;
+    MDI_EMPTY: RegExp;
+    CONTROL: RegExp;
+    HELP: RegExp;
+    BREADCRUMB: RegExp;
+    TAG: RegExp;
+    TAGS: RegExp;
+    HAS_ADDONS: RegExp;
+    FIXED_GRID: RegExp;
+};

package/dist/constants/regExp.js

@@ -0,0 +1,23 @@
+const g = {
+  // COMMON BASED
+  IS: /is-/gm,
+  IS_HAS: /is-|has-/gm,
+  IS_ARE: /is-|are-/gm,
+  HAS_TEXT: /has-text/gm,
+  // COMPONENT BASED
+  TILE: /notification |tile/gm,
+  NAVBAR: /navbar/gm,
+  TILE_GROUP: /tile-group/gm,
+  MDI: /mdi-|mdi--/gm,
+  MDI_EMPTY: /mdi /gm,
+  CONTROL: /control/gm,
+  HELP: /help|is/gm,
+  BREADCRUMB: /breadcrumb/gm,
+  TAG: /tag/gm,
+  TAGS: /tags/gm,
+  HAS_ADDONS: /has-addons/gm,
+  FIXED_GRID: /fixed-grid/gm
+};
+export {
+  g as TEST_ID_REGEXP
+};

package/dist/functions/parsers.js

@@ -1,4 +1,5 @@
-const a = (e) => e.filter((r) => r).join(" "), l = (e) => {
+import { TEST_ID_REGEXP as t } from "../constants/regExp.js";
+const l = (e) => e.filter((r) => r).join(" ").trim(), p = (e) => {
   let r = e.parsedClasses;
   if (e.rules)
     for (const s of e.rules)
@@ -7,13 +8,13 @@ const a = (e) => e.filter((r) => r).join(" "), l = (e) => {
         s.replacer
       );
   else
-    r = r.replace(`${e.tag}`, "").replace(/is-/gm, "-");
+    r = r.replace(`${e.tag}`, "").replace(t.IS, "-");
   return `test-${e.tag}${r.replace(
     / /gm,
     e.separator ?? ""
   )}`;
 };
 export {
-  a as parseClasses,
-  l as parseTestId
+  l as parseClasses,
+  p as parseTestId
 };