@hortiview/shared-components 2.26.1 → 2.26.2

package/CHANGELOG.md

@@ -1,19 +1,8 @@
-## [2.26.1](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/compare/v2.26.0...v2.26.1) (2026-05-22)
-
-### Bug Fixes
-
-* add permission provider to broken stories ([6677f7f](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/commit/6677f7fb9cfc4b5e256ea16fce429b95348f55d0))
-* add workaround for element bug on textKey = 'value' and multiSelect = true ([4926a72](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/commit/4926a726b75b422f6f7bd8cacf71b86565d32b14))
-* fix search functionality on multi select component ([5a01163](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/commit/5a011636eeef5c5296d2959a1307425256fed706))
+## [2.26.2](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/compare/v2.26.1...v2.26.2) (2026-05-26)
 
 ### Code Refactoring
 
-* improve title and label of FormSelect story ([29d6f78](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/commit/29d6f780eefce628d459af1d7773b79a0af553dd))
-
-### Styles
-
-* improve positioning of search cursor in multi select ([d71bff9](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/commit/d71bff9f3abda3a3a3466bb16850b67f3aa11bfc))
-* improve stories by adding width ([de089f8](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/commit/de089f84d720f6bd47b1b22900259f007d6b1a1e))
+* adjust BlockView size props, minor styling achanges ([c2dca99](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/commit/c2dca9979c41025c00a14330094aea081cc44c23)), closes [#20844](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/issues/20844)
 
 ## [2.26.1](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/compare/v2.26.0...v2.26.1) (2026-05-22)
 

package/dist/assets/BlockView.css

@@ -1 +1 @@
-._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}
+._grid_otqrz_1{display:flex;padding-bottom:0;flex-direction:column;justify-content:center;align-items:center;gap:1rem;align-self:stretch;height:100%}._blockLayout_otqrz_13{padding:.5rem;gap:.5rem;display:flex;flex-direction:column;border-radius:.5rem;background:var(--lmnt-theme-secondary-100)}._absoluteSize_otqrz_22{height:15rem;width:15rem}._relativeSize_otqrz_27{height:70%;width:50%;max-height:50vh;max-width:50vw;min-height:10rem;min-width:10rem}._relativeSize_otqrz_27._mobile_otqrz_38{height:70%;width:60%;max-height:50vh;max-width:75vw}._blockRow_otqrz_46{display:flex;flex-direction:row;gap:.5rem;height:100%;align-self:stretch}._block_otqrz_13{flex:auto;justify-content:center;border-radius:.25rem;background:var(--lmnt-theme-secondary);align-items:center;display:flex;position:relative;-webkit-tap-highlight-color:transparent;transition:background .2s ease-in-out,box-shadow .2s ease-in-out,transform .2s ease-in-out}._block_otqrz_13._clickable_otqrz_70{cursor:pointer}._block_otqrz_13._empty_otqrz_74{background:var(--lmnt-theme-secondary-200);cursor:default}._block_otqrz_13._active_otqrz_79{background:var(--lmnt-theme-primary)}._block_otqrz_13._error_otqrz_83{box-shadow:inset 0 0 0 3px var(--lmnt-theme-danger)}._block_otqrz_13._hoverEffects_otqrz_87._active_otqrz_79:hover{background:var(--lmnt-theme-primary-600)}._block_otqrz_13._hoverEffects_otqrz_87._clickable_otqrz_70:hover:not(._active_otqrz_79){background:var(--lmnt-theme-secondary-500)}._block_otqrz_13._hoverEffects_otqrz_87._clickable_otqrz_70:hover{transform:scale(1.02)}._blockText_otqrz_99{display:flex;justify-content:center;position:absolute;width:1vw;height:1vh;align-items:center;color:var(--lmnt-theme-on-primary)}._emptyLayout_otqrz_109{display:flex;justify-content:center;align-items:center;background:var(--lmnt-theme-surface-variant);border-radius:.5rem}

package/dist/components/BlockView/BlockView.d.ts

@@ -47,9 +47,15 @@ type BlockViewProps<T extends Block & {
      */
     clickable?: boolean;
     /**
-     * the size of the block in rem (default is 15x15)
+     * Set the size for the block view
+     * @remarks
+     * - 'absolute' - For containers without fixed dimensions (size depending on content) </br>Uses: { height: '15rem', width: '15rem' }
+     * - 'relative' - For containers with fixed size constraints (like modals with fixed dimensions) </br>Uses: { height: '70%', width: '50%' }
+     * - IMPORTANT: For 'relative' the parent container of the BlockView needs to have a fixed height and width. Otherwise you'll run into css issues
+     *
+     * @default 'absolute'
      */
-    size?: number;
+    size?: 'absolute' | 'relative';
     /**
      * the title of the block view, shown when `hideText` is false
      */

package/dist/components/BlockView/BlockView.js

@@ -1,95 +1,98 @@
-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-EXzC8zuP.js";
-import { c as M } from "../../index-_-9ybP20.js";
-import { useState as V, useEffect as q, useMemo as G } from "react";
+import { jsxs as z, jsx as o, Fragment as q } from "react/jsx-runtime";
+import { c as A, b as F, a as M } from "../../index.es-EXzC8zuP.js";
+import { c as h } from "../../index-_-9ybP20.js";
+import { useState as V, useEffect as $, useMemo as G } from "react";
 import { getBlockNumberByDto as H } from "../../services/BlockService.js";
-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,
-  block: O,
-  active: P,
-  error: Q,
-  empty: U,
-  activeBlock: W,
+import { useBreakpoints as I } from "../../hooks/useBreakpoints.js";
+import '../../assets/BlockView.css';const J = "_grid_otqrz_1", K = "_blockLayout_otqrz_13", O = "_absoluteSize_otqrz_22", P = "_relativeSize_otqrz_27", Q = "_mobile_otqrz_38", U = "_blockRow_otqrz_46", W = "_block_otqrz_13", X = "_clickable_otqrz_70", Y = "_empty_otqrz_74", Z = "_active_otqrz_79", j = "_error_otqrz_83", tt = "_hoverEffects_otqrz_87", ot = "_blockText_otqrz_99", et = "_emptyLayout_otqrz_109", t = {
+  grid: J,
+  blockLayout: K,
+  absoluteSize: O,
+  relativeSize: P,
+  mobile: Q,
+  blockRow: U,
+  block: W,
   clickable: X,
-  blockText: Y,
-  emptyLayout: Z
-}, rt = ({
+  empty: Y,
+  active: Z,
+  error: j,
+  hoverEffects: tt,
+  blockText: ot,
+  emptyLayout: et
+}, bt = ({
   rows: e,
-  columns: c,
-  hideText: h = !1,
-  hideBlockCountText: w = !1,
-  errorBlocks: N = [],
+  columns: r,
+  hideText: w = !1,
+  hideBlockCountText: N = !1,
+  errorBlocks: g = [],
   showNumbers: x = !0,
-  clickable: b = !0,
-  size: _ = 15,
-  onClick: u = null,
-  currentBlock: a,
-  activeBlocks: g,
+  clickable: d = !1,
+  size: k = "absolute",
+  onClick: p = null,
+  currentBlock: s,
+  activeBlocks: v,
   blocks: m,
-  blockViewTitle: L,
-  blockLabel: T,
-  emptyViewTitle: B
+  blockViewTitle: S,
+  blockLabel: E,
+  emptyViewTitle: L
 }) => {
-  const [C, y] = V(0);
-  q(() => {
-    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 }),
+  const [T, y] = V(0), { isDesktop: f } = I();
+  $(() => {
+    if (!s) return;
+    const c = H(s, r);
+    y(c);
+  }, [s, r]);
+  const C = G(() => e * r, [e, r]), R = (c) => {
+    p && p(c, s ?? void 0);
+  }, B = ({ row: c, column: i }) => m.length === 0 ? !0 : m.some((u) => u.position?.row === c && u.position?.column === i), _ = !e && !r;
+  return /* @__PURE__ */ z("div", { "data-testid": "block-view-container", className: t.grid, children: [
+    !w && /* @__PURE__ */ o(A, { level: 1, bold: !0, className: t.black, children: S }),
     /* @__PURE__ */ o(
       "div",
       {
         "data-testid": "block-view-layout",
-        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(
+        className: h(
+          _ && t.emptyLayout,
+          !_ && t.blockLayout,
+          k === "absolute" && t.absoluteSize,
+          k === "relative" && t.relativeSize,
+          !f && t.mobile
+        ),
+        children: _ ? /* @__PURE__ */ o(rt, { emptyViewTitle: L }) : /* @__PURE__ */ o(q, { children: Array.from({ length: e }).map((c, i) => /* @__PURE__ */ o("div", { "data-testid": "block-view-row", className: t.blockRow, children: Array.from({ length: r }).map((u, a) => {
+          const l = r * i + a + 1, n = B({ row: i + 1, column: a + 1 }), D = h(
             t.block,
-            b && n && t.clickable,
-            C === i && t.active,
+            f && t.hoverEffects,
+            d && n && t.clickable,
+            T === l && 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
+            g.includes(l) && t.error,
+            v && m.some(
+              (b) => b.id && v.includes(b.id) && b.position?.row === i + 1 && b.position?.column === a + 1
+            ) && t.active
           );
           return /* @__PURE__ */ o(
             "div",
             {
               "data-testid": "block-view-block",
-              className: A,
-              id: `block${i}`,
-              onClick: b && n ? () => {
-                y(i), R({ row: r + 1, column: s + 1 });
+              className: D,
+              id: `block${l}`,
+              onClick: d && n ? () => {
+                y(l), R({ row: i + 1, column: a + 1 });
               } : void 0,
-              children: x && n && /* @__PURE__ */ o(
-                "div",
-                {
-                  "data-testid": "block-view-block-number",
-                  className: t.blockText,
-                  children: i
-                }
-              )
+              children: x && n && /* @__PURE__ */ o("div", { "data-testid": "block-view-block-number", className: t.blockText, children: l })
             },
-            i
+            l
           );
-        }) }, r)) })
+        }) }, i)) })
       }
     ),
-    !w && /* @__PURE__ */ f(S, { themeColor: "primary", level: 6, children: [
-      E,
+    !N && /* @__PURE__ */ z(F, { themeColor: "primary", level: 6, children: [
+      C,
       " ",
-      T
+      E
     ] })
   ] });
-}, j = ({ emptyViewTitle: e }) => e ? /* @__PURE__ */ o(F, { bold: !0, children: e }) : /* @__PURE__ */ o(v, {});
+}, rt = ({ emptyViewTitle: e }) => e ? /* @__PURE__ */ o(M, { bold: !0, children: e }) : /* @__PURE__ */ o(q, {});
 export {
-  rt as BlockView
+  bt 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.26.1",
+  "version": "2.26.2",
   "type": "module",
   "repository": "https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared",
   "author": "Falk Menge <falk.menge.ext@bayer.com>",