reactive-bulma 4.3.27 → 4.4.0

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

@@ -1,107 +1,90 @@
-import { jsxs as f, Fragment as p, jsx as o } from "react/jsx-runtime";
-import { useMemo as m } from "react";
-import { parseClasses as u, parseTestId as I } from "../../../functions/parsers.js";
+import { jsxs as u, Fragment as p, jsx as r } from "react/jsx-runtime";
+import { useMemo as s } from "react";
+import d from "../../atoms/Button/index.js";
 import T from "../../atoms/TextArea/index.js";
 import h from "../../atoms/Select/index.js";
-import b from "../../atoms/Checkbox/index.js";
-import C from "../../atoms/RadioButton/index.js";
-import E from "../InputControl/index.js";
-import { FormFieldType as l } from "../../../interfaces/moleculeProps.js";
-const x = (r, t) => {
-  const e = r !== null ? /* @__PURE__ */ o(
-    "label",
-    {
-      "data-testid": "test-form-field-label",
-      className: "label",
-      children: r
-    }
-  ) : null;
-  return t ? /* @__PURE__ */ o("section", { className: "field-label", children: e }) : e;
-}, F = ({
-  testId: r,
-  type: t,
-  input: e
-}) => {
-  const s = {
-    testId: e?.testId ?? r ?? `test-form-field-${t}`,
-    containerTestId: r ?? `test-form-field-container-${t}`
+import g from "../../atoms/Checkbox/index.js";
+import N from "../../atoms/RadioButton/index.js";
+import x from "../InputControl/index.js";
+import { FormFieldType as t } from "../../../interfaces/moleculeProps.js";
+const m = ({ testId: c, element: o, isHorizontal: i }) => {
+  if (o === null) return null;
+  const n = {
+    testId: o.config?.testId ?? c ?? `test-form-field-${o.type}`,
+    containerTestId: c ?? `test-form-field-container-${o.type}`
   };
-  switch (t) {
-    case l.INPUT:
-      return /* @__PURE__ */ o(
-        E,
+  switch (o.type) {
+    case t.INPUT:
+      return /* @__PURE__ */ r(
+        x,
         {
-          ...e,
-          ...s
+          ...o.config,
+          ...n,
+          isHorizontal: i
         }
       );
-    case l.SELECT:
-      return /* @__PURE__ */ o(
+    case t.SELECT:
+      return /* @__PURE__ */ r("section", { className: "control", children: /* @__PURE__ */ r(
         h,
         {
-          ...e,
-          ...s
+          ...o.config,
+          ...n
         }
-      );
-    case l.CHECKBOX:
-      return /* @__PURE__ */ o(
-        b,
+      ) });
+    case t.CHECKBOX:
+      return /* @__PURE__ */ r("section", { className: "control", children: /* @__PURE__ */ r(
+        g,
         {
-          ...e,
-          ...s
+          ...o.config,
+          ...n
         }
-      );
-    case l.RADIOBUTTON:
-      return /* @__PURE__ */ o(
-        C,
+      ) });
+    case t.RADIOBUTTON:
+      return /* @__PURE__ */ r("section", { className: "control", children: /* @__PURE__ */ r(
+        N,
         {
-          ...e,
-          ...s
+          ...o.config,
+          ...n
         }
-      );
-    case l.TEXTAREA:
-      return /* @__PURE__ */ o(
+      ) });
+    case t.TEXTAREA:
+      return /* @__PURE__ */ r("section", { className: "control", children: /* @__PURE__ */ r(
         T,
         {
-          ...e,
-          ...s
+          ...o.config,
+          ...n
         }
-      );
+      ) });
+    case t.BUTTON:
+      return /* @__PURE__ */ r("section", { className: "control", children: /* @__PURE__ */ r(
+        d,
+        {
+          ...o.config,
+          ...n
+        }
+      ) });
   }
-}, N = (r) => {
-  if (!r) return null;
-  const t = u(["help", r.color]), e = I({
-    tag: "form-field-help",
-    parsedClasses: t,
-    rules: [{ regExp: /help|is/gm, replacer: "" }]
-  });
-  return /* @__PURE__ */ o(
-    "p",
-    {
-      "data-testid": e,
-      className: t,
-      children: r.text
-    }
-  );
 }, j = ({
-  testId: r = null,
-  labelText: t,
-  type: e,
-  input: s,
-  helper: n,
-  isHorizontal: a
+  testId: c,
+  mainInput: o,
+  leftInput: i = null,
+  rightInput: n = null,
+  isHorizontal: e = !1
 }) => {
-  const c = m(
-    () => x(t, a),
-    [t, a]
-  ), d = m(
-    () => F({ testId: r ?? void 0, type: e, input: s }),
-    [r, e, s]
-  ), i = m(() => N(n), [n]);
-  return /* @__PURE__ */ f(p, { children: [
-    c,
-    d,
-    i
+  const f = s(
+    () => m({ testId: c, element: o, isHorizontal: e }),
+    [c, o, e]
+  ), a = s(
+    () => m({ testId: c, element: i, isHorizontal: e }),
+    [c, i, e]
+  ), l = s(
+    () => m({ testId: c, element: n, isHorizontal: e }),
+    [c, n, e]
+  );
+  return /* @__PURE__ */ u(p, { children: [
+    a,
+    f,
+    l
   ] });
 };
 export {

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

@@ -4,10 +4,8 @@ import { FormFieldInputProps } from '../../../interfaces/moleculeProps';
 declare const _default: Meta<typeof FormFieldInput>;
 export default _default;
 export declare const BasicExample: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, FormFieldInputProps>;
-export declare const WithLabel: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, FormFieldInputProps>;
-export declare const WithLabelAndHelper: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, FormFieldInputProps>;
-export declare const ErrorCase: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, FormFieldInputProps>;
 export declare const SelectCase: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, FormFieldInputProps>;
 export declare const CheckboxCase: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, FormFieldInputProps>;
 export declare const RadiobuttonCase: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, FormFieldInputProps>;
 export declare const TextareaCase: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, FormFieldInputProps>;
+export declare const LeftAddonSelect: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, FormFieldInputProps>;

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

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

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

@@ -0,0 +1,86 @@
+import { jsx as a } from "react/jsx-runtime";
+import { useMemo as M } from "react";
+import { COMMON_CLASSES as l } from "../../../constants/classes.js";
+import { parseClasses as C, parseTestId as G } from "../../../functions/parsers.js";
+import { TEST_ID_REGEXP as I } from "../../../constants/regExp.js";
+import { generateKey as H } from "../../../functions/generators.js";
+import L from "../../atoms/GridCell/index.js";
+const X = ({
+  testId: S = null,
+  containerTestId: A = null,
+  cssClasses: E = null,
+  containerCssClasses: T = null,
+  style: o = null,
+  containerStyle: N = null,
+  listOfCells: u,
+  gap: e = null,
+  columnGap: d = null,
+  rowGap: i = null,
+  cellMinWidth: c = null,
+  isFixed: s = !1,
+  fixedColumnsCount: r = null,
+  isAutoColumns: O = !1
+}) => {
+  const m = "grid", p = "fixed-grid", f = e !== null || s, n = C([
+    m,
+    e === null || s ? null : `${l.GAP}${e}`,
+    f || d === null ? null : `${l.COLUMN_GAP}${d}`,
+    f || i === null ? null : `${l.ROW_GAP}${i}`,
+    s || c === null ? null : `${l.COL_MIN_WIDTH}${c}`,
+    E
+  ]), _ = S ?? G({
+    tag: m,
+    parsedClasses: n
+  }), $ = M(
+    () => /* @__PURE__ */ a(
+      "section",
+      {
+        "data-testid": _,
+        className: n,
+        style: o ?? void 0,
+        children: u.map((t) => /* @__PURE__ */ a(
+          L,
+          {
+            ...t
+          },
+          `grid-cell-${H()}`
+        ))
+      }
+    ),
+    [_, n, o, u]
+  );
+  if (s) {
+    const t = r === null && O ? l.AUTO_COLUMNS_GRID : null, g = C([
+      p,
+      r ? `${l.HAS}${r}-cols` : null,
+      t,
+      T
+    ]), D = A ?? G({
+      tag: p,
+      parsedClasses: g,
+      rules: [
+        {
+          regExp: I.FIXED_GRID,
+          replacer: ""
+        },
+        {
+          regExp: I.IS_HAS,
+          replacer: "-"
+        }
+      ]
+    });
+    return /* @__PURE__ */ a(
+      "section",
+      {
+        "data-testid": D,
+        className: g,
+        style: N ?? void 0,
+        children: $
+      }
+    );
+  }
+  return $;
+};
+export {
+  X as default
+};

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

@@ -0,0 +1,12 @@
+import { Meta } from '@storybook/react';
+import { default as Grid } from '.';
+declare const _default: Meta<typeof Grid>;
+export default _default;
+export declare const BasicExample: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, import('../../../interfaces/moleculeProps').GridProps>;
+export declare const LotsOfCells: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, import('../../../interfaces/moleculeProps').GridProps>;
+export declare const HugeColumnGap: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, import('../../../interfaces/moleculeProps').GridProps>;
+export declare const HugeRowGap: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, import('../../../interfaces/moleculeProps').GridProps>;
+export declare const HugeGridGap: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, import('../../../interfaces/moleculeProps').GridProps>;
+export declare const FixedGrid: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, import('../../../interfaces/moleculeProps').GridProps>;
+export declare const FixedGridWithThreeColumns: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, import('../../../interfaces/moleculeProps').GridProps>;
+export declare const FixedGridWithAutoColumns: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, import('../../../interfaces/moleculeProps').GridProps>;

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

@@ -1,60 +1,105 @@
-import { jsxs as x, jsx as i } from "react/jsx-runtime";
-import { parseClasses as f, parseTestId as g } from "../../../functions/parsers.js";
-import C from "../../atoms/Icon/index.js";
-import h from "../../atoms/Input/index.js";
-import "react";
-const e = (l) => l ? /* @__PURE__ */ i(C, { ...l }) : null, y = ({
+import { jsx as o, jsxs as N, Fragment as v } from "react/jsx-runtime";
+import { useMemo as r } from "react";
+import { COMMON_CLASSES as t } from "../../../constants/classes.js";
+import { parseClasses as S, parseTestId as f } from "../../../functions/parsers.js";
+import { TEST_ID_REGEXP as p } from "../../../constants/regExp.js";
+import G from "../../atoms/Icon/index.js";
+import M from "../../atoms/Input/index.js";
+const L = (l) => l ? /* @__PURE__ */ o(G, { ...l }) : null, P = (l) => l ? `${t.IS}${l}` : null, k = ({
   testId: l = null,
-  cssClasses: a = null,
-  style: p = null,
-  inputConfig: o,
-  leftIcon: s = null,
-  rightIcon: n = null,
-  size: t = null,
-  isLoading: u = null,
-  isExpanded: d = null
+  cssClasses: O = null,
+  style: H = null,
+  labelText: u = null,
+  inputConfig: e,
+  helper: n = null,
+  leftIcon: a = null,
+  rightIcon: c = null,
+  size: m = null,
+  isLoading: T = null,
+  isExpanded: _ = null,
+  isHorizontal: i = null
 }) => {
-  const r = f([
-    "control",
-    t,
-    s ? "has-icons-left" : null,
-    n ? "has-icons-right" : null,
-    u ? "is-loading" : null,
-    d ? "is-expanded" : null,
-    a
-  ]), c = l ?? g({
-    tag: "control",
-    parsedClasses: r,
+  const C = "control", E = S([
+    C,
+    m,
+    a ? t.ICON_LEFT : null,
+    c ? t.ICON_RIGHT : null,
+    T ? t.LOADING : null,
+    _ ? t.EXPANDED : null,
+    O
+  ]), d = l ?? f({
+    tag: C,
+    parsedClasses: E,
     rules: [
       {
-        regExp: /has-|is-/gm,
+        regExp: p.IS_HAS,
         replacer: "-"
       },
       {
-        regExp: /control/gm,
+        regExp: p.CONTROL,
         replacer: ""
       }
     ]
-  }), m = {
-    ...o,
-    size: t ?? o?.size
-  };
-  return /* @__PURE__ */ x(
-    "section",
-    {
-      "data-testid": c,
-      className: r,
-      style: p ?? void 0,
-      children: [
-        /* @__PURE__ */ i(h, { ...m }),
-        e(s ? { ...s, position: "is-left" } : void 0),
-        e(
-          n ? { ...n, position: "is-right" } : void 0
-        )
-      ]
-    }
-  );
+  }), x = r(() => {
+    if (u === null) return null;
+    const s = /* @__PURE__ */ o(
+      "label",
+      {
+        "data-testid": `${d}-label`,
+        className: "label",
+        children: u
+      }
+    );
+    return i ? /* @__PURE__ */ o("section", { className: "field-label", children: s }) : s;
+  }, [u, d, i]), b = r(
+    () => /* @__PURE__ */ o(
+      M,
+      {
+        ...e,
+        size: m ?? e?.size
+      }
+    ),
+    [e, m]
+  ), h = r(
+    () => L(a ? { ...a, position: "left" } : void 0),
+    [a]
+  ), z = r(
+    () => L(c ? { ...c, position: "right" } : void 0),
+    [c]
+  ), A = r(() => {
+    if (n === null) return null;
+    const s = "help", D = P(e?.color ?? n?.color), I = S([s, D]), R = f({
+      tag: s,
+      parsedClasses: I,
+      rules: [{ regExp: p.HELP, replacer: "" }]
+    });
+    return /* @__PURE__ */ o(
+      "p",
+      {
+        "data-testid": R,
+        className: I,
+        children: n.text
+      }
+    );
+  }, [n, e.color]);
+  return /* @__PURE__ */ N(v, { children: [
+    x,
+    /* @__PURE__ */ N(
+      "section",
+      {
+        "data-testid": d,
+        className: E,
+        style: H ?? void 0,
+        children: [
+          b,
+          h,
+          z
+        ]
+      }
+    ),
+    A
+  ] });
 };
 export {
-  y as default
+  k as default
 };

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

@@ -6,6 +6,8 @@ export default _default;
 export declare const BasicExample: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, InputControlProps>;
 export declare const WithLeftIcon: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, InputControlProps>;
 export declare const WithBothIcons: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, InputControlProps>;
+export declare const WithLabel: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, InputControlProps>;
+export declare const WithLabelAndHelper: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, InputControlProps>;
 export declare const ErrorState: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, InputControlProps>;
 export declare const BigSize: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, InputControlProps>;
 export declare const LoadingState: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, InputControlProps>;

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

@@ -1,41 +1,44 @@
-import { jsx as e, jsxs as o } from "react/jsx-runtime";
-import u from "react";
-import c from "../MenuList/index.js";
-import { parseClasses as d, parseTestId as p } from "../../../functions/parsers.js";
+import { jsxs as u, jsx as e } from "react/jsx-runtime";
+import c, { useMemo as d } from "react";
+import p from "../MenuList/index.js";
+import { parseClasses as f, parseTestId as M } from "../../../functions/parsers.js";
 import { generateKey as s } from "../../../functions/generators.js";
-const C = ({
+const g = ({
   testId: l = null,
-  cssClasses: m = null,
-  style: n = null,
-  menuSections: r
+  cssClasses: n = null,
+  style: r = null,
+  menuSections: t
 }) => {
-  const t = d(["menu", m]), i = l ?? p({ tag: "menu", parsedClasses: t });
+  const m = f(["menu", n]), i = l ?? M({ tag: "menu", parsedClasses: m }), o = d(
+    () => t.map((a) => /* @__PURE__ */ u(c.Fragment, { children: [
+      /* @__PURE__ */ e(
+        "p",
+        {
+          className: "menu-label",
+          children: a.label
+        },
+        `section-label-${s()}`
+      ),
+      /* @__PURE__ */ e(
+        p,
+        {
+          itemList: a.itemList
+        },
+        `section-menu-list-${s()}`
+      )
+    ] }, `section-${s()}`)),
+    [t]
+  );
   return /* @__PURE__ */ e(
     "aside",
     {
       "data-testid": i,
-      className: t,
-      style: n ?? void 0,
-      children: r.map((a) => /* @__PURE__ */ o(u.Fragment, { children: [
-        /* @__PURE__ */ e(
-          "p",
-          {
-            className: "menu-label",
-            children: a.label
-          },
-          `section-label-${s()}`
-        ),
-        /* @__PURE__ */ e(
-          c,
-          {
-            itemList: a.itemList
-          },
-          `section-menu-list-${s()}`
-        )
-      ] }, `section-${s()}`))
+      className: m,
+      style: r ?? void 0,
+      children: o
     }
   );
 };
 export {
-  C as default
+  g as default
 };

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

@@ -1,40 +1,43 @@
-import { jsx as s, jsxs as p } from "react/jsx-runtime";
-import { parseClasses as d, parseTestId as b } from "../../../functions/parsers.js";
-import "react";
-import t from "../../atoms/MenuItem/index.js";
-import { generateKey as l } from "../../../functions/generators.js";
-const h = ({
-  testId: u = null,
-  cssClasses: r = null,
-  style: n = null,
-  itemList: m
+import { jsxs as p, jsx as s } from "react/jsx-runtime";
+import { useMemo as c } from "react";
+import { parseClasses as b, parseTestId as f } from "../../../functions/parsers.js";
+import { generateKey as t } from "../../../functions/generators.js";
+import l from "../../atoms/MenuItem/index.js";
+const x = ({
+  testId: m = null,
+  cssClasses: n = null,
+  style: r = null,
+  itemList: u
 }) => {
-  const i = d(["menu-list", r]), a = u ?? b({ tag: "menu-list", parsedClasses: i });
+  const i = b(["menu-list", n]), o = m ?? f({ tag: "menu-list", parsedClasses: i }), a = c(
+    () => u.map((e) => "subListTitle" in e ? /* @__PURE__ */ p("li", { children: [
+      /* @__PURE__ */ s(l, { ...e.subListTitle }),
+      /* @__PURE__ */ s("ul", { children: e.subItems.map((d) => /* @__PURE__ */ s(
+        l,
+        {
+          ...d
+        },
+        `sub-list-menu-sub-item-${t()}`
+      )) })
+    ] }, `sub-list-menu-item-${t()}`) : /* @__PURE__ */ s(
+      l,
+      {
+        ...e
+      },
+      `sub-list-item-${t()}`
+    )),
+    [u]
+  );
   return /* @__PURE__ */ s(
     "ul",
     {
-      "data-testid": a,
+      "data-testid": o,
       className: i,
-      style: n ?? void 0,
-      children: m.map((e) => "subListTitle" in e ? /* @__PURE__ */ p("li", { children: [
-        /* @__PURE__ */ s(t, { ...e.subListTitle }),
-        /* @__PURE__ */ s("ul", { children: e.subItems.map((o) => /* @__PURE__ */ s(
-          t,
-          {
-            ...o
-          },
-          `sub-list-menu-sub-item-${l()}`
-        )) })
-      ] }, `sub-list-menu-item-${l()}`) : /* @__PURE__ */ s(
-        t,
-        {
-          ...e
-        },
-        `sub-list-item-${l()}`
-      ))
+      style: r ?? void 0,
+      children: a
     }
   );
 };
 export {
-  h as default
+  x as default
 };