@hortiview/shared-components 2.23.2 → 2.23.3

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+## [2.23.3](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/compare/v2.23.2...v2.23.3) (2026-04-19)
+
+### Code Refactoring
+
+* add EmptyAndActiveBlocks story to showcase combined block views ([233f5b0](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/commit/233f5b09b67e4ce0d0f2cf441f48c18bcae49d5f))
+* enhance BlockView styles and click handling for better user interaction ([a7f0318](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/commit/a7f031827c250363684d57bc7828dce473bfd389))
+
 ## [2.23.2](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/compare/v2.23.1...v2.23.2) (2026-04-15)
 
 ### Code Refactoring

package/dist/assets/BlockView.css

@@ -1 +1 @@
-._grid_1ym34_1{display:flex;padding-bottom:0;flex-direction:column;justify-content:center;align-items:center;gap:1rem;align-self:stretch}._blockLayout_1ym34_11{padding:.5rem;gap:.5rem;display:flex;flex-direction:column;border-radius:.5rem;background:var(--lmnt-theme-secondary-100);width:15rem;height:15rem}._blockRow_1ym34_22{display:flex;flex-direction:row;gap:.5rem;height:100%;align-self:stretch}._block_1ym34_11{flex:auto;border-radius:.25rem;background:var(--lmnt-theme-secondary);align-items:center;display:flex;justify-content:center;position:relative}._block_1ym34_11._active_1ym34_41{background:var(--lmnt-theme-primary);margin:-2px}._block_1ym34_11._error_1ym34_46{border:2px solid var(--lmnt-theme-danger);background:var(--lmnt-theme-danger-50);margin:-2px}._block_1ym34_11._empty_1ym34_52{background:var(--lmnt-theme-secondary-200)}._activeBlock_1ym34_56{background:var(--lmnt-theme-primary)}._blockText_1ym34_60{display:flex;justify-content:center;position:absolute;width:1vw;height:1vh;align-items:center;color:var(--lmnt-theme-on-primary)}._emptyLayout_1ym34_70{display:flex;justify-content:center;align-items:center;background:var(--lmnt-theme-surface-variant);border-radius:.5rem}
+._grid_gfk3g_1{display:flex;padding-bottom:0;flex-direction:column;justify-content:center;align-items:center;gap:1rem;align-self:stretch}._blockLayout_gfk3g_11{padding:.5rem;gap:.5rem;display:flex;flex-direction:column;border-radius:.5rem;background:var(--lmnt-theme-secondary-100);width:15rem;height:15rem}._blockRow_gfk3g_22{display:flex;flex-direction:row;gap:.5rem;height:100%;align-self:stretch}._block_gfk3g_11{flex:auto;border-radius:.25rem;background:var(--lmnt-theme-secondary);align-items:center;display:flex;justify-content:center;position:relative}._block_gfk3g_11._active_gfk3g_41{background:var(--lmnt-theme-primary);margin:-2px}._block_gfk3g_11._error_gfk3g_46{border:2px solid var(--lmnt-theme-danger);background:var(--lmnt-theme-danger-50);margin:-2px}._block_gfk3g_11._empty_gfk3g_52{background:var(--lmnt-theme-secondary-200);cursor:default}._activeBlock_gfk3g_57{background:var(--lmnt-theme-primary)}._block_gfk3g_11._clickable_gfk3g_61{cursor:pointer}._blockText_gfk3g_65{display:flex;justify-content:center;position:absolute;width:1vw;height:1vh;align-items:center;color:var(--lmnt-theme-on-primary)}._emptyLayout_gfk3g_75{display:flex;justify-content:center;align-items:center;background:var(--lmnt-theme-surface-variant);border-radius:.5rem}

package/dist/components/BlockView/BlockView.js

@@ -1,9 +1,9 @@
-import { jsxs as v, jsx as o, Fragment as h } from "react/jsx-runtime";
+import { jsxs as f, jsx as o, Fragment as v } from "react/jsx-runtime";
 import { c as D, b as S, a as F } from "../../index.es-DUrjyxNI.js";
 import { c as M } from "../../index-Df2FYN-K.js";
 import { useState as V, useEffect as q, useMemo as G } from "react";
 import { getBlockNumberByDto as H } from "../../services/BlockService.js";
-import '../../assets/BlockView.css';const I = "_grid_1ym34_1", J = "_blockLayout_1ym34_11", K = "_blockRow_1ym34_22", O = "_block_1ym34_11", P = "_active_1ym34_41", Q = "_error_1ym34_46", U = "_empty_1ym34_52", W = "_activeBlock_1ym34_56", X = "_blockText_1ym34_60", Y = "_emptyLayout_1ym34_70", t = {
+import '../../assets/BlockView.css';const I = "_grid_gfk3g_1", J = "_blockLayout_gfk3g_11", K = "_blockRow_gfk3g_22", O = "_block_gfk3g_11", P = "_active_gfk3g_41", Q = "_error_gfk3g_46", U = "_empty_gfk3g_52", W = "_activeBlock_gfk3g_57", X = "_clickable_gfk3g_61", Y = "_blockText_gfk3g_65", Z = "_emptyLayout_gfk3g_75", t = {
   grid: I,
   blockLayout: J,
   blockRow: K,
@@ -12,50 +12,52 @@ import '../../assets/BlockView.css';const I = "_grid_1ym34_1", J = "_blockLayout
   error: Q,
   empty: U,
   activeBlock: W,
-  blockText: X,
-  emptyLayout: Y
+  clickable: X,
+  blockText: Y,
+  emptyLayout: Z
 }, rt = ({
   rows: e,
-  columns: r,
-  hideText: f = !1,
+  columns: c,
+  hideText: h = !1,
   hideBlockCountText: w = !1,
   errorBlocks: N = [],
-  showNumbers: g = !0,
-  clickable: x = !0,
-  size: y = 15,
+  showNumbers: x = !0,
+  clickable: b = !0,
+  size: _ = 15,
   onClick: u = null,
-  currentBlock: s,
-  activeBlocks: b,
+  currentBlock: a,
+  activeBlocks: g,
   blocks: m,
   blockViewTitle: L,
   blockLabel: T,
   emptyViewTitle: B
 }) => {
-  const [C, _] = V(0);
+  const [C, y] = V(0);
   q(() => {
-    if (!s) return;
-    const i = H(s, r);
-    _(i);
-  }, [s, r]);
-  const E = G(() => e * r, [e, r]), R = (i) => {
-    u && u(i, s ?? void 0);
-  }, $ = ({ row: i, column: c }) => m.length === 0 ? !0 : m.some((d) => d.position?.row === i && d.position?.column === c), k = !e && !r;
-  return /* @__PURE__ */ v("div", { "data-testid": "block-view-container", className: t.grid, children: [
-    !f && /* @__PURE__ */ o(D, { level: 1, bold: !0, className: t.black, children: L }),
+    if (!a) return;
+    const l = H(a, c);
+    y(l);
+  }, [a, c]);
+  const E = G(() => e * c, [e, c]), R = (l) => {
+    u && u(l, a ?? void 0);
+  }, $ = ({ row: l, column: r }) => m.length === 0 ? !0 : m.some((d) => d.position?.row === l && d.position?.column === r), p = !e && !c;
+  return /* @__PURE__ */ f("div", { "data-testid": "block-view-container", className: t.grid, children: [
+    !h && /* @__PURE__ */ o(D, { level: 1, bold: !0, className: t.black, children: L }),
     /* @__PURE__ */ o(
       "div",
       {
         "data-testid": "block-view-layout",
-        className: k ? t.emptyLayout : t.blockLayout,
-        style: { width: `${y}rem`, height: `${y}rem` },
-        children: k ? /* @__PURE__ */ o(Z, { emptyViewTitle: B }) : /* @__PURE__ */ o(h, { children: Array.from({ length: e }).map((i, c) => /* @__PURE__ */ o("div", { "data-testid": "block-view-row", className: t.blockRow, children: Array.from({ length: r }).map((d, a) => {
-          const l = r * c + a + 1, p = $({ row: c + 1, column: a + 1 }), A = M(
+        className: p ? t.emptyLayout : t.blockLayout,
+        style: { width: `${_}rem`, height: `${_}rem` },
+        children: p ? /* @__PURE__ */ o(j, { emptyViewTitle: B }) : /* @__PURE__ */ o(v, { children: Array.from({ length: e }).map((l, r) => /* @__PURE__ */ o("div", { "data-testid": "block-view-row", className: t.blockRow, children: Array.from({ length: c }).map((d, s) => {
+          const i = c * r + s + 1, n = $({ row: r + 1, column: s + 1 }), A = M(
             t.block,
-            C === l && t.active,
-            !p && t.empty,
-            N.includes(l) && t.error,
-            b && m.some(
-              (n) => n.id && b.includes(n.id) && n.position?.row === c + 1 && n.position?.column === a + 1
+            b && n && t.clickable,
+            C === i && t.active,
+            !n && t.empty,
+            N.includes(i) && t.error,
+            g && m.some(
+              (k) => k.id && g.includes(k.id) && k.position?.row === r + 1 && k.position?.column === s + 1
             ) && t.activeBlock
           );
           return /* @__PURE__ */ o(
@@ -63,31 +65,31 @@ import '../../assets/BlockView.css';const I = "_grid_1ym34_1", J = "_blockLayout
             {
               "data-testid": "block-view-block",
               className: A,
-              id: `block${l}`,
-              onClick: x ? () => {
-                _(l), R({ row: c + 1, column: a + 1 });
+              id: `block${i}`,
+              onClick: b && n ? () => {
+                y(i), R({ row: r + 1, column: s + 1 });
               } : void 0,
-              children: g && p && /* @__PURE__ */ o(
+              children: x && n && /* @__PURE__ */ o(
                 "div",
                 {
                   "data-testid": "block-view-block-number",
                   className: t.blockText,
-                  children: l
+                  children: i
                 }
               )
             },
-            l
+            i
           );
-        }) }, c)) })
+        }) }, r)) })
       }
     ),
-    !w && /* @__PURE__ */ v(S, { themeColor: "primary", level: 6, children: [
+    !w && /* @__PURE__ */ f(S, { themeColor: "primary", level: 6, children: [
       E,
       " ",
       T
     ] })
   ] });
-}, Z = ({ emptyViewTitle: e }) => e ? /* @__PURE__ */ o(F, { bold: !0, children: e }) : /* @__PURE__ */ o(h, {});
+}, j = ({ emptyViewTitle: e }) => e ? /* @__PURE__ */ o(F, { bold: !0, children: e }) : /* @__PURE__ */ o(v, {});
 export {
   rt as BlockView
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@hortiview/shared-components",
   "description": "This is a shared component library. It should used in the HortiView platform and its modules.",
-  "version": "2.23.2",
+  "version": "2.23.3",
   "type": "module",
   "repository": "https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared",
   "author": "Falk Menge <falk.menge.ext@bayer.com>",