reactive-bulma 4.3.27 → 4.4.0

package/dist/components/atoms/index.js

@@ -1,56 +1,60 @@
 import { default as a } from "./Button/index.js";
 import { default as r } from "./Column/index.js";
 import { default as l } from "./ProgressBar/index.js";
-import { default as d } from "./Block/index.js";
+import { default as m } from "./Block/index.js";
 import { default as p } from "./Tag/index.js";
 import { default as s } from "./Box/index.js";
-import { default as I } from "./Title/index.js";
-import { default as i } from "./Icon/index.js";
-import { default as g } from "./Input/index.js";
+import { default as i } from "./Title/index.js";
+import { default as T } from "./Icon/index.js";
+import { default as B } from "./Input/index.js";
 import { default as c } from "./TextArea/index.js";
 import { default as D } from "./Delete/index.js";
-import { default as v } from "./Select/index.js";
-import { default as H } from "./File/index.js";
-import { default as h } from "./Checkbox/index.js";
+import { default as k } from "./Select/index.js";
+import { default as w } from "./File/index.js";
+import { default as H } from "./Checkbox/index.js";
 import { default as F } from "./RadioButton/index.js";
-import { default as M } from "./BreadcrumbItem/index.js";
-import { default as R } from "./DropdownTrigger/index.js";
-import { default as j } from "./DropdownItem/index.js";
-import { default as y } from "./MenuItem/index.js";
-import { default as E } from "./Image/index.js";
-import { default as J } from "./PaginationItem/index.js";
-import { default as O } from "./TabItem/index.js";
-import { default as U } from "./LevelHeader/index.js";
-import { default as W } from "./Tile/index.js";
+import { default as L } from "./BreadcrumbItem/index.js";
+import { default as N } from "./DropdownTrigger/index.js";
+import { default as S } from "./DropdownItem/index.js";
+import { default as j } from "./MenuItem/index.js";
+import { default as y } from "./Image/index.js";
+import { default as E } from "./PaginationItem/index.js";
+import { default as K } from "./TabItem/index.js";
+import { default as Q } from "./LevelHeader/index.js";
+import { default as V } from "./Tile/index.js";
 import { default as Y } from "./NavBarItem/index.js";
 import { default as _ } from "./TableHeadCell/index.js";
 import { default as ee } from "./TableCell/index.js";
+import { default as ae } from "./GridCell/index.js";
+import { default as re } from "./TagWithAddon/index.js";
 export {
-  d as Block,
+  m as Block,
   s as Box,
-  M as BreadcrumbItem,
+  L as BreadcrumbItem,
   a as Button,
-  h as Checkbox,
+  H as Checkbox,
   r as Column,
   D as Delete,
-  j as DropdownItem,
-  R as DropdownTrigger,
-  H as File,
-  i as Icon,
-  E as Image,
-  g as Input,
-  U as LevelHeader,
-  y as MenuItem,
+  S as DropdownItem,
+  N as DropdownTrigger,
+  w as File,
+  ae as GridCell,
+  T as Icon,
+  y as Image,
+  B as Input,
+  Q as LevelHeader,
+  j as MenuItem,
   Y as NavBarItem,
-  J as PaginationItem,
+  E as PaginationItem,
   l as ProgressBar,
   F as RadioButton,
-  v as Select,
-  O as TabItem,
+  k as Select,
+  K as TabItem,
   ee as TableCell,
   _ as TableHeadCell,
   p as Tag,
+  re as TagWithAddon,
   c as TextArea,
-  W as Tile,
-  I as Title
+  V as Tile,
+  i as Title
 };

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

@@ -1,64 +1,63 @@
-import { jsx as r } from "react/jsx-runtime";
-import { parseClasses as p, parseTestId as g } from "../../../functions/parsers.js";
-import "react";
-import f from "../../atoms/BreadcrumbItem/index.js";
-import { generateKey as C } from "../../../functions/generators.js";
-const B = ({
-  testId: a = "breadcrumbs",
-  containerTestId: s = null,
-  cssClasses: l = null,
-  containerCssClasses: t = null,
-  style: m = null,
-  containerStyle: d = null,
-  items: u,
-  alignment: n = null,
-  separator: c = null,
-  size: o = null
+import { jsx as e } from "react/jsx-runtime";
+import { useMemo as E } from "react";
+import { COMMON_CLASSES as o } from "../../../constants/classes.js";
+import { parseClasses as I, parseTestId as $ } from "../../../functions/parsers.js";
+import { TEST_ID_REGEXP as u } from "../../../constants/regExp.js";
+import { generateKey as B } from "../../../functions/generators.js";
+import v from "../../atoms/BreadcrumbItem/index.js";
+const A = ({
+  testId: n = "breadcrumbs",
+  containerTestId: d = null,
+  cssClasses: c = null,
+  containerCssClasses: p = null,
+  style: i = null,
+  containerStyle: b = null,
+  items: s,
+  alignment: l = null,
+  separator: a = null,
+  size: t = null
 }) => {
-  const e = p([
-    "breadcrumb",
-    n,
-    c,
-    o,
-    t
-  ]), b = s ?? g({
-    tag: "breadcrumb",
-    parsedClasses: e,
+  const r = "breadcrumb", m = I([
+    r,
+    l ? `${o.IS}${l}` : null,
+    a ? `has-${a}-separator` : null,
+    t ? `${o.IS}${t}` : null,
+    p
+  ]), C = d ?? $({
+    tag: r,
+    parsedClasses: m,
     rules: [
+      { regExp: u.BREADCRUMB, replacer: "" },
+      { regExp: u.IS_HAS, replacer: "-" }
+    ]
+  }), f = E(
+    () => s.map((S) => /* @__PURE__ */ e(
+      v,
       {
-        regExp: /breadcrumb/gm,
-        replacer: ""
+        ...S
       },
-      {
-        regExp: /is-|has-/gm,
-        replacer: "-"
-      }
-    ]
-  });
-  return /* @__PURE__ */ r(
+      `${r}-item-${B()}`
+    )),
+    [s]
+  );
+  return /* @__PURE__ */ e(
     "nav",
     {
-      "data-testid": b,
-      className: e,
-      style: d ?? void 0,
-      children: /* @__PURE__ */ r(
+      "data-testid": C,
+      className: m,
+      style: b ?? void 0,
+      children: /* @__PURE__ */ e(
         "ul",
         {
-          "data-testid": a,
-          className: l ?? void 0,
-          style: m ?? void 0,
-          children: u.map((i) => /* @__PURE__ */ r(
-            f,
-            {
-              ...i
-            },
-            `breadcrumb-item-${C()}`
-          ))
+          "data-testid": n,
+          className: c ?? void 0,
+          style: i ?? void 0,
+          children: f
         }
       )
     }
   );
 };
 export {
-  B as default
+  A as default
 };

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

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

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

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

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

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

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

@@ -1,56 +1,60 @@
-import { jsx as e } from "react/jsx-runtime";
-import { parseClasses as d, parseTestId as C } from "../../../functions/parsers.js";
-import f from "../../atoms/Column/index.js";
-import "react";
-import { generateKey as v } from "../../../functions/generators.js";
-const G = (l) => {
-  switch (l) {
+import { jsx as o } from "react/jsx-runtime";
+import { useMemo as f } from "react";
+import { COMMON_CLASSES as G } from "../../../constants/classes.js";
+import { parseClasses as v, parseTestId as I } from "../../../functions/parsers.js";
+import S from "../../atoms/Column/index.js";
+import { generateKey as g } from "../../../functions/generators.js";
+const M = (s) => {
+  switch (s) {
     case null:
       return "is-gapless";
     case void 0:
       return "is-3";
     default:
-      return l;
+      return `${G.IS}${s}`;
   }
-}, T = ({
-  testId: l = null,
+}, b = ({
+  testId: s = null,
   cssClasses: n = null,
-  style: t = null,
-  listOfColumns: o,
-  isMobileLayout: r = null,
-  isMultiline: u = null,
-  isVerticallyCentered: i = null,
-  isHorizontallyCentered: m = null,
+  style: r = null,
+  listOfColumns: l,
+  isMobileLayout: u = null,
+  isMultiline: t = null,
+  isVerticallyCentered: m = null,
+  isHorizontallyCentered: i = null,
   gap: a = void 0
 }) => {
-  const s = d([
+  const c = M(a), e = v([
     "columns",
-    u ? "is-multiline" : null,
-    r ? "is-mobile" : null,
-    i ? "is-vcentered" : null,
-    m ? "is-centered" : null,
-    G(a),
+    t ? "is-multiline" : null,
+    u ? "is-mobile" : null,
+    m ? "is-vcentered" : null,
+    i ? "is-centered" : null,
+    c,
     n
-  ]), c = l ?? C({
+  ]), p = s ?? I({
     tag: "columns",
-    parsedClasses: s
-  });
-  return /* @__PURE__ */ e(
+    parsedClasses: e
+  }), d = f(
+    () => l.map((C) => /* @__PURE__ */ o(
+      S,
+      {
+        ...C
+      },
+      `column-group-item-${g()}`
+    )),
+    [l]
+  );
+  return /* @__PURE__ */ o(
     "section",
     {
-      "data-testid": c,
-      className: s,
-      style: t ?? void 0,
-      children: o.map((p) => /* @__PURE__ */ e(
-        f,
-        {
-          ...p
-        },
-        `column-group-item-${v()}`
-      ))
+      "data-testid": p,
+      className: e,
+      style: r ?? void 0,
+      children: d
     }
   );
 };
 export {
-  T as default
+  b as default
 };

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

@@ -1,66 +1,75 @@
-import { jsxs as l, jsx as e } from "react/jsx-runtime";
-import { useState as w } from "react";
-import { parseClasses as f, parseTestId as v } from "../../../functions/parsers.js";
-import I from "../../atoms/DropdownTrigger/index.js";
-import s from "../../atoms/DropdownItem/index.js";
-import { generateKey as t } from "../../../functions/generators.js";
-const h = (o) => /* @__PURE__ */ e("section", { className: "dropdown-content", children: o.map((n, r) => o.length > 1 && r === 0 ? /* @__PURE__ */ e(
-  s,
-  {
-    ...n
-  },
-  `dropdown-item-${t()}`
-) : /* @__PURE__ */ l("section", { children: [
-  /* @__PURE__ */ e(
-    s,
-    {
-      type: "divider",
-      itemText: "divider"
-    },
-    `dropdown-item-${t()}-divider`
-  ),
-  /* @__PURE__ */ e(
-    s,
-    {
-      ...n
-    },
-    `dropdown-item-${t()}`
-  )
-] }, `dropdown-item-${t()}-section`)) }), y = ({
-  testId: o = null,
-  cssClasses: n = null,
-  style: r = null,
-  inputText: d,
-  dropdownPointer: i = "dropdown-menu",
-  listOfItems: c
+import { jsx as e, jsxs as l } from "react/jsx-runtime";
+import { useState as x, useMemo as I, Fragment as T } from "react";
+import { parseClasses as D, parseTestId as $ } from "../../../functions/parsers.js";
+import { generateKey as n } from "../../../functions/generators.js";
+import y from "../../atoms/DropdownTrigger/index.js";
+import r from "../../atoms/DropdownItem/index.js";
+const z = ({
+  testId: m = null,
+  cssClasses: p = null,
+  style: u = null,
+  isHoverable: a = null,
+  isRightAligned: c = null,
+  isContentUp: w = null,
+  inputText: v,
+  dropdownPointer: s = "dropdown-menu",
+  listOfItems: o
 }) => {
-  const [m, a] = w(!1), p = f([
+  const [t, h] = x(!1), d = D([
     "dropdown",
-    m ? "is-active" : null,
-    n
-  ]), u = o ?? v({ tag: "dropdown", parsedClasses: p });
+    t ? "is-active" : null,
+    a ? "is-hoverable" : null,
+    c ? "is-right" : null,
+    w ? "is-up" : null,
+    p
+  ]), g = m ?? $({ tag: "dropdown", parsedClasses: d }), M = I(
+    () => /* @__PURE__ */ e("section", { className: "dropdown-content", children: o.map((i, f) => o.length > 1 && f === 0 ? /* @__PURE__ */ e(
+      r,
+      {
+        ...i
+      },
+      `dropdown-item-${n()}`
+    ) : /* @__PURE__ */ l(T, { children: [
+      /* @__PURE__ */ e(
+        r,
+        {
+          type: "divider",
+          itemText: "divider"
+        },
+        `dropdown-item-${n()}-divider`
+      ),
+      /* @__PURE__ */ e(
+        r,
+        {
+          ...i
+        },
+        `dropdown-item-${n()}`
+      )
+    ] }, `dropdown-item-${n()}-section`)) }),
+    [o]
+  );
   return /* @__PURE__ */ l(
     "section",
     {
-      "data-testid": u,
-      className: p,
-      style: r ?? void 0,
+      "data-testid": g,
+      className: d,
+      style: u ?? void 0,
       children: [
         /* @__PURE__ */ e(
-          I,
+          y,
           {
-            menuText: d,
-            dropdownPointer: i,
-            onClick: () => a(!m)
+            menuText: v,
+            dropdownPointer: s,
+            onClick: () => h(!t)
           }
         ),
         /* @__PURE__ */ e(
           "section",
           {
             className: "dropdown-menu",
-            id: i,
+            id: s,
             role: "menu",
-            children: h(c)
+            children: M
           }
         )
       ]
@@ -68,5 +77,5 @@ const h = (o) => /* @__PURE__ */ e("section", { className: "dropdown-content", c
   );
 };
 export {
-  y as default
+  z as default
 };

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

@@ -4,3 +4,6 @@ declare const _default: Meta<typeof Dropdown>;
 export default _default;
 export declare const BasicExample: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, import('../../../interfaces/moleculeProps').DropdownProps>;
 export declare const AllItemsAreLinks: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, import('../../../interfaces/moleculeProps').DropdownProps>;
+export declare const Hoverable: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, import('../../../interfaces/moleculeProps').DropdownProps>;
+export declare const RightAligned: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, import('../../../interfaces/moleculeProps').DropdownProps>;
+export declare const DropdownContentUp: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, import('../../../interfaces/moleculeProps').DropdownProps>;