@hortiview/shared-components 2.17.0 → 2.18.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## [2.18.0](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/compare/v2.17.0...v2.18.0) (2026-03-05)
+
+### Features
+
+* adjust searchable default logic ([0e66c32](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/commit/0e66c32a89b72fad851aad24b2a24bc152844520))
+
+### Bug Fixes
+
+* fixed publish.yaml to use devops service user ([ec046ce](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/commit/ec046ce290294d3857a6fedf4594a0e688bfd9f0))
+
+### Code Refactoring
+
+* replace isDesktopNavbar with isDesktop and update tests ([6bc6f7e](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/commit/6bc6f7e47a963b95f367200938d79d25c83ba231))
+
 ## [2.17.0](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/compare/v2.16.2...v2.17.0) (2026-02-27)
 
 ### Features

package/dist/components/FormComponents/FormSelect/FormSelect.d.ts

@@ -26,7 +26,7 @@ export type FormSelectProps<T extends FieldValues> = Omit<SelectProps, 'classNam
     multi?: boolean;
     /** if true, the select allows the user to clear the selection */
     clearable?: boolean;
-    /** if true, the select allows the user to search for options */
+    /** if true, the select allows the user to search for options defaults to enabled on desktop and disabled on mobile unless explicitly overridden */
     searchable?: boolean;
     /**
      * the rules for the picker
@@ -47,7 +47,7 @@ export type FormSelectOption = {
  * creates a Select which should be part of a form component.
  * the Select is wrapped by the react hook forms {@link Controller} component.
  * @param clearable if the select allows the user to clear the selection
- * @param searchable if the select allows the user to search for options
+ * @param searchable whether the select allows the user to search for options. If not provided, search is enabled on desktop and disabled on mobile by default.
  * @param disabled if the select is disabled
  * @param hidden if the select should be hidden
  * @param hoisted if the select should be rendered outside of the parent

package/dist/components/FormComponents/FormSelect/FormSelect.js

@@ -1,25 +1,26 @@
-import { jsx as o, Fragment as g, jsxs as k } from "react/jsx-runtime";
+import { jsx as l, Fragment as g, jsxs as J } from "react/jsx-runtime";
 import { g as u } from "../../../get-D8IXqiys.js";
-import { i as G } from "../../../isArray-BjSPDQ4v.js";
+import { i as L } from "../../../isArray-BjSPDQ4v.js";
 import { useMemo as z } from "react";
-import { useFormContext as J, Controller as C } from "react-hook-form";
-import { M as L } from "../../../react-tooltip.min-CVsI--2Y.js";
-import { useHelperText as O } from "../../../hooks/useHelperText.js";
-import { Select as Q } from "../../Select/Select.js";
-import { SelectTooltipText as R } from "./SelectTooltipText.js";
-import '../../../assets/FormSelect.css';const U = "_invalidHelperText_zh2wu_1", W = "_invalidBorder_zh2wu_5", X = "_invalidPlaceholder_zh2wu_9", Y = "_invalidDropdownIcon_zh2wu_13", Z = "_formSelectContainer_zh2wu_18", N = "_formSelect_zh2wu_18", y = "_multiText_zh2wu_53", K = "_tooltip_zh2wu_62", ee = "_disabled_zh2wu_67", t = {
-  invalidHelperText: U,
-  invalidBorder: W,
-  invalidPlaceholder: X,
-  invalidDropdownIcon: Y,
-  formSelectContainer: Z,
-  formSelect: N,
-  multiText: y,
-  tooltip: K,
-  disabled: ee
-}, fe = ({
+import { useFormContext as O, Controller as C } from "react-hook-form";
+import { M as Q } from "../../../react-tooltip.min-CVsI--2Y.js";
+import { useHelperText as R } from "../../../hooks/useHelperText.js";
+import { Select as U } from "../../Select/Select.js";
+import { SelectTooltipText as W } from "./SelectTooltipText.js";
+import { u as X } from "../../../useBreakpoints-MzTZ0tCT.js";
+import '../../../assets/FormSelect.css';const Y = "_invalidHelperText_zh2wu_1", Z = "_invalidBorder_zh2wu_5", N = "_invalidPlaceholder_zh2wu_9", y = "_invalidDropdownIcon_zh2wu_13", K = "_formSelectContainer_zh2wu_18", ee = "_formSelect_zh2wu_18", te = "_multiText_zh2wu_53", ie = "_tooltip_zh2wu_62", oe = "_disabled_zh2wu_67", t = {
+  invalidHelperText: Y,
+  invalidBorder: Z,
+  invalidPlaceholder: N,
+  invalidDropdownIcon: y,
+  formSelectContainer: K,
+  formSelect: ee,
+  multiText: te,
+  tooltip: ie,
+  disabled: oe
+}, _e = ({
   propertyName: i,
-  label: s,
+  label: c,
   options: r,
   multi: a = !1,
   disabled: _ = !1,
@@ -28,100 +29,100 @@ import '../../../assets/FormSelect.css';const U = "_invalidHelperText_zh2wu_1",
   valueKey: n = "value",
   textKey: x = "text",
   clearable: I = !1,
-  searchable: D = !0,
-  noOptionsMessage: T = "",
-  rules: f,
-  menuPosition: P = "auto",
-  ...l
+  searchable: D,
+  noOptionsMessage: S = "",
+  rules: m,
+  menuPosition: b = "auto",
+  ...o
 }) => {
-  const {
-    control: v,
-    getFieldState: B,
-    formState: { errors: S, isValidating: w }
-  } = J(), F = z(
-    () => !w && u(S, i) !== void 0,
-    [S, i, w]
-  ), b = z(
-    () => f?.required?.message,
-    [f]
-  ), { helperText: M, helperTextPersistent: j } = O({
+  const { isDesktop: B } = X(), {
+    control: T,
+    getFieldState: P,
+    formState: { errors: v, isValidating: w }
+  } = O(), F = z(
+    () => !w && u(v, i) !== void 0,
+    [v, i, w]
+  ), M = z(
+    () => m?.required?.message,
+    [m]
+  ), { helperText: j, helperTextPersistent: k } = R({
     propertyName: i,
-    helperText: l.helperText,
-    requiredText: b,
+    helperText: o.helperText,
+    requiredText: M,
     hasCharacterCount: !1
   });
-  return H ? /* @__PURE__ */ o(C, { name: i, control: v, render: () => /* @__PURE__ */ o(g, {}) }) : /* @__PURE__ */ o(
+  return H ? /* @__PURE__ */ l(C, { name: i, control: T, render: () => /* @__PURE__ */ l(g, {}) }) : /* @__PURE__ */ l(
     "div",
     {
       "data-testid": "form-select-container",
       className: t.formSelectContainer,
-      "data-tooltip-id": s,
-      children: /* @__PURE__ */ o(
+      "data-tooltip-id": c,
+      children: /* @__PURE__ */ l(
         C,
         {
           name: i,
-          rules: f,
-          control: v,
-          render: ({ field: { ref: te, onChange: m, value: p, ...q } }) => {
+          rules: m,
+          control: T,
+          render: ({ field: { ref: le, onChange: f, value: p, ...q } }) => {
             let h = r;
-            G(r) && u(r[0], "options") !== void 0 && (h = r.flatMap((e) => u(e, "options") ?? []));
+            L(r) && u(r[0], "options") !== void 0 && (h = r.flatMap((e) => u(e, "options") ?? []));
             const d = a ? h?.filter(
               (e) => p?.includes(e[n])
-            ) : h?.find((e) => e[n] === p), A = a && l.multiDisplayType === "text" && l.fixedHeightInput, c = B(i).invalid, E = `
+            ) : h?.find((e) => e[n] === p), A = a && o.multiDisplayType === "text" && o.fixedHeightInput, s = P(i).invalid, E = D ?? B, V = `
           ${t.formSelect} 
-          ${c ? t.invalidHelperText : ""} 
-          ${c ? t.invalidDropdownIcon : ""}  
-          ${c ? t.invalidBorder : ""} 
-          ${c ? t.invalidPlaceholder : ""}  
+          ${s ? t.invalidHelperText : ""} 
+          ${s ? t.invalidDropdownIcon : ""}  
+          ${s ? t.invalidBorder : ""} 
+          ${s ? t.invalidPlaceholder : ""}  
           ${A ? t.multiText : ""} 
           ${_ ? t.disabled : ""}`;
-            return /* @__PURE__ */ k(g, { children: [
-              /* @__PURE__ */ o(
-                Q,
+            return /* @__PURE__ */ J(g, { children: [
+              /* @__PURE__ */ l(
+                U,
                 {
                   ...q,
-                  ...l,
+                  ...o,
                   value: d ?? [],
-                  label: s,
+                  label: c,
                   variant: "outlined",
-                  helperText: M,
-                  helperTextPersistent: j,
+                  helperText: j,
+                  helperTextPersistent: k,
                   options: r,
                   valid: !F,
-                  "data-testid": l["data-testid"] ?? `select-${i}`,
-                  multiSelect: !r?.length && T ? !1 : a,
-                  className: E,
+                  "data-testid": o["data-testid"] ?? `select-${i}`,
+                  multiSelect: !r?.length && S ? !1 : a,
+                  className: V,
                   disabled: _,
                   valueKey: n,
                   textKey: x,
                   onChange: (e) => {
                     if (e == null) {
-                      m(e);
+                      f(e);
                       return;
                     }
                     if (a) {
-                      m(e.map((V) => V[n]));
+                      f(e.map((G) => G[n]));
                       return;
                     }
-                    m(e[n]), l?.onChange?.(e);
+                    f(e[n]), o?.onChange?.(e);
                   },
                   hoisted: $,
-                  noOptionsMessage: T,
-                  searchable: D,
+                  noOptionsMessage: S,
+                  searchable: E,
                   clearable: I,
-                  menuPosition: P
+                  menuPosition: b
                 }
               ),
-              /* @__PURE__ */ o(
-                L,
+              /* @__PURE__ */ l(
+                Q,
                 {
-                  id: s,
+                  id: c,
                   noArrow: !0,
                   place: "bottom",
                   delayShow: 420,
                   className: t.tooltip,
-                  hidden: !d || d.length === 0 || !l.fixedHeightInput,
-                  children: /* @__PURE__ */ o(R, { value: d, textKey: x, valueKey: n })
+                  hidden: !d || d.length === 0 || !o.fixedHeightInput,
+                  children: /* @__PURE__ */ l(W, { value: d, textKey: x, valueKey: n })
                 }
               )
             ] });
@@ -132,5 +133,5 @@ import '../../../assets/FormSelect.css';const U = "_invalidHelperText_zh2wu_1",
   );
 };
 export {
-  fe as FormSelect
+  _e as FormSelect
 };

package/dist/components/FormComponents/FormSelect/FormSelect.test.js

@@ -1,15 +1,16 @@
-import { jsx as r } from "react/jsx-runtime";
-import { a, s as t, f as T, w as p } from "../../../react.esm-Bm0cAgpZ.js";
-import { u as B } from "../../../index-BLPBqbdx.js";
-import { FormSelect as i } from "./FormSelect.js";
+import { jsx as a } from "react/jsx-runtime";
+import { a as s, s as t, f as B, w as f } from "../../../react.esm-Bm0cAgpZ.js";
+import { u as y } from "../../../index-BLPBqbdx.js";
+import { FormSelect as c } from "./FormSelect.js";
 import { SelectTooltipText as d } from "./SelectTooltipText.js";
-import { a as n, d as f, t as u, g as e } from "../../../vi.bdSIJ99Y-B308Q-4w.js";
-const g = n.fn();
-n.mock("react-hook-form", () => ({
-  ...n.importActual("react-hook-form"),
+import { a as m } from "../../../useBreakpoints-MzTZ0tCT.js";
+import { a as r, b as h, d as v, t as u, g as e } from "../../../vi.bdSIJ99Y-B308Q-4w.js";
+const g = r.fn();
+r.mock("react-hook-form", () => ({
+  ...r.importActual("react-hook-form"),
   Controller: ({
-    render: s
-  }) => s({
+    render: l
+  }) => l({
     field: {
       ref: void 0,
       onChange: g,
@@ -18,9 +19,9 @@ n.mock("react-hook-form", () => ({
   }),
   useFormContext: () => ({
     control: {
-      register: n.fn(),
-      unregister: n.fn(),
-      getFieldState: n.fn(),
+      register: r.fn(),
+      unregister: r.fn(),
+      getFieldState: r.fn(),
       _names: {
         array: new Set("test"),
         mount: new Set("test"),
@@ -30,11 +31,11 @@ n.mock("react-hook-form", () => ({
         watchAll: !1
       },
       _subjects: {
-        watch: n.fn(),
-        array: n.fn(),
-        state: n.fn()
+        watch: r.fn(),
+        array: r.fn(),
+        state: r.fn()
       },
-      _getWatch: n.fn(),
+      _getWatch: r.fn(),
       _formValues: ["test"],
       _defaultValues: ["test"]
     },
@@ -42,12 +43,20 @@ n.mock("react-hook-form", () => ({
     getFieldState: () => ({ invalid: !1 })
   })
 }));
-f("FormSelect Test", () => {
-  const s = [
+h(() => {
+  r.spyOn(m, "useBreakpoints").mockReturnValue({
+    isDesktop: !0,
+    isMobile: !1,
+    isTablet: !1,
+    isDesktopNavbar: !1
+  });
+});
+v("FormSelect Test", () => {
+  const l = [
     { id: "1", value: "Germany", description: "" },
     { id: "2", value: "France", description: "" },
     { id: "3", value: "Afar", description: "" }
-  ], m = [
+  ], p = [
     {
       groupValue: "Europe",
       groupName: "Europe",
@@ -63,14 +72,14 @@ f("FormSelect Test", () => {
     }
   ];
   u("render FormSelect", () => {
-    a(
-      /* @__PURE__ */ r(
-        i,
+    s(
+      /* @__PURE__ */ a(
+        c,
         {
           label: "address.country",
           rules: { required: { value: !0, message: "required" } },
           propertyName: "countryId",
-          options: s,
+          options: l,
           valueKey: "id",
           textKey: "value"
         }
@@ -78,77 +87,140 @@ f("FormSelect Test", () => {
     );
     const o = t.getByRole("combobox");
     e(o).toBeInTheDocument(), e(o).toBeInstanceOf(HTMLInputElement), e(t.getByText("address.country")).toBeInTheDocument(), e(t.getByText("Afar")).toBeInTheDocument(), e(t.getByText("required")).toBeInTheDocument();
+  }), u("enables search by default when isDesktop is true", () => {
+    r.spyOn(m, "useBreakpoints").mockReturnValue({
+      isMobile: !1,
+      isTablet: !1,
+      isDesktop: !0,
+      isDesktopNavbar: !1
+    }), s(
+      /* @__PURE__ */ a(
+        c,
+        {
+          label: "address.country",
+          propertyName: "countryId",
+          options: l,
+          valueKey: "id",
+          textKey: "value"
+        }
+      )
+    );
+    const o = t.getByRole("combobox");
+    e(o).not.toHaveAttribute("aria-readonly");
+  }), u("searchable=false overrides isDesktop=true", async () => {
+    const o = y.setup();
+    r.spyOn(m, "useBreakpoints").mockReturnValue({
+      isMobile: !1,
+      isTablet: !1,
+      isDesktop: !0,
+      isDesktopNavbar: !1
+    }), s(
+      /* @__PURE__ */ a(
+        c,
+        {
+          label: "address.country",
+          propertyName: "countryId",
+          options: l,
+          valueKey: "id",
+          textKey: "value",
+          searchable: !1
+        }
+      )
+    );
+    const n = t.getByRole("combobox");
+    e(n).toHaveAttribute("aria-readonly", "true"), await o.click(n), await o.type(n, "Ger"), e(n).toHaveValue("");
+  }), u("cannot type when isDesktop=false and searchable is undefined", async () => {
+    const o = y.setup();
+    r.spyOn(m, "useBreakpoints").mockReturnValue({
+      isMobile: !1,
+      isTablet: !1,
+      isDesktop: !1,
+      isDesktopNavbar: !1
+    }), s(
+      /* @__PURE__ */ a(
+        c,
+        {
+          label: "address.country",
+          propertyName: "countryId",
+          options: l,
+          valueKey: "id",
+          textKey: "value"
+        }
+      )
+    );
+    const n = t.getByRole("combobox");
+    await o.click(n), await o.type(n, "Ger"), e(n).toHaveValue("");
   }), u("render grouped FormSelect and click on option", () => {
-    a(
-      /* @__PURE__ */ r(
-        i,
+    s(
+      /* @__PURE__ */ a(
+        c,
         {
           label: "address.country",
           rules: { required: { value: !0, message: "required" } },
           propertyName: "countryId",
-          options: m,
+          options: p,
           valueKey: "id",
           textKey: "value"
         }
       )
     );
     const o = t.getByRole("combobox");
-    e(o).toBeInTheDocument(), e(o).toBeInstanceOf(HTMLInputElement), e(t.getByText("address.country")).toBeInTheDocument(), e(t.getByText("Afar")).toBeInTheDocument(), e(t.getByText("required")).toBeInTheDocument(), T.mouseDown(o);
-    const c = t.getByText("Africa");
-    e(c).toBeInTheDocument(), e(c.parentElement?.parentElement).toBeInstanceOf(HTMLHeadingElement);
-    const l = t.getByText("Europe");
-    e(l).toBeInTheDocument(), e(l.parentElement?.parentElement).toBeInstanceOf(HTMLHeadingElement);
-    const y = t.getByText("France");
-    e(y).toBeInTheDocument(), e(y.parentElement?.parentElement).not.toBeInstanceOf(HTMLHeadingElement), e(t.getByText("Germany")).toBeInTheDocument(), e(t.getAllByText("Afar")).toHaveLength(2), T.click(y), e(g).toBeCalledWith("2");
+    e(o).toBeInTheDocument(), e(o).toBeInstanceOf(HTMLInputElement), e(t.getByText("address.country")).toBeInTheDocument(), e(t.getByText("Afar")).toBeInTheDocument(), e(t.getByText("required")).toBeInTheDocument(), B.mouseDown(o);
+    const n = t.getByText("Africa");
+    e(n).toBeInTheDocument(), e(n.parentElement?.parentElement).toBeInstanceOf(HTMLHeadingElement);
+    const i = t.getByText("Europe");
+    e(i).toBeInTheDocument(), e(i.parentElement?.parentElement).toBeInstanceOf(HTMLHeadingElement);
+    const T = t.getByText("France");
+    e(T).toBeInTheDocument(), e(T.parentElement?.parentElement).not.toBeInstanceOf(HTMLHeadingElement), e(t.getByText("Germany")).toBeInTheDocument(), e(t.getAllByText("Afar")).toHaveLength(2), B.click(T), e(g).toBeCalledWith("2");
   }), u("render grouped FormSelect and hover to see tooltip on fixedHeightInput", async () => {
-    const o = B.setup();
-    a(
-      /* @__PURE__ */ r(
-        i,
+    const o = y.setup();
+    s(
+      /* @__PURE__ */ a(
+        c,
         {
           label: "address.country",
           rules: { required: { value: !0, message: "required" } },
           propertyName: "countryId",
-          options: m,
+          options: p,
           valueKey: "id",
           textKey: "value",
           fixedHeightInput: !0
         }
       )
     );
-    const c = document.querySelector('div[data-tooltip-id="address.country"]');
-    e(c).toBeInTheDocument();
-    const l = t.getByRole("combobox");
-    e(l).toBeInTheDocument(), e(l).toBeInstanceOf(HTMLInputElement), e(t.getByText("address.country")).toBeInTheDocument(), e(t.getByText("Afar")).toBeInTheDocument(), e(t.getByText("required")).toBeInTheDocument(), o.hover(t.getByText("Afar")), await p(() => {
+    const n = document.querySelector('div[data-tooltip-id="address.country"]');
+    e(n).toBeInTheDocument();
+    const i = t.getByRole("combobox");
+    e(i).toBeInTheDocument(), e(i).toBeInstanceOf(HTMLInputElement), e(t.getByText("address.country")).toBeInTheDocument(), e(t.getByText("Afar")).toBeInTheDocument(), e(t.getByText("required")).toBeInTheDocument(), o.hover(t.getByText("Afar")), await f(() => {
       e(t.getByRole("tooltip")).toBeInTheDocument();
     });
   }), u("render grouped FormSelect and no tooltip on fixedHeightInput === false", async () => {
-    const o = B.setup();
-    a(
-      /* @__PURE__ */ r(
-        i,
+    const o = y.setup();
+    s(
+      /* @__PURE__ */ a(
+        c,
         {
           label: "address.country",
           rules: { required: { value: !0, message: "required" } },
           propertyName: "countryId",
-          options: m,
+          options: p,
           valueKey: "id",
           textKey: "value",
           fixedHeightInput: !1
         }
       )
     );
-    const c = document.querySelector('div[data-tooltip-id="address.country"]');
-    e(c).toBeInTheDocument(), e(t.getByText("Afar")).toBeInTheDocument(), o.hover(t.getByText("Afar")), await p(() => {
+    const n = document.querySelector('div[data-tooltip-id="address.country"]');
+    e(n).toBeInTheDocument(), e(t.getByText("Afar")).toBeInTheDocument(), o.hover(t.getByText("Afar")), await f(() => {
       e(t.queryByRole("tooltip")).not.toBeInTheDocument();
     });
   }), u("render ToolTipText", async () => {
-    a(/* @__PURE__ */ r(d, { value: s[0], textKey: "value", valueKey: "id" })), e(t.getByText("Germany")).toBeInTheDocument();
+    s(/* @__PURE__ */ a(d, { value: l[0], textKey: "value", valueKey: "id" })), e(t.getByText("Germany")).toBeInTheDocument();
   }), u("render ToolTipText with multiple entries", async () => {
-    a(/* @__PURE__ */ r(d, { value: s, textKey: "value", valueKey: "id" })), e(t.getByText("Afar")).toBeInTheDocument(), e(t.getByText("France")).toBeInTheDocument(), e(t.getByText("Germany")).toBeInTheDocument();
+    s(/* @__PURE__ */ a(d, { value: l, textKey: "value", valueKey: "id" })), e(t.getByText("Afar")).toBeInTheDocument(), e(t.getByText("France")).toBeInTheDocument(), e(t.getByText("Germany")).toBeInTheDocument();
   }), u("render ToolTipText with no entries", async () => {
-    a(/* @__PURE__ */ r(d, { value: [], textKey: "value", valueKey: "id" })), e(t.queryByText("Afar")).not.toBeInTheDocument(), e(t.queryByText("France")).not.toBeInTheDocument(), e(t.queryByText("Germany")).not.toBeInTheDocument();
+    s(/* @__PURE__ */ a(d, { value: [], textKey: "value", valueKey: "id" })), e(t.queryByText("Afar")).not.toBeInTheDocument(), e(t.queryByText("France")).not.toBeInTheDocument(), e(t.queryByText("Germany")).not.toBeInTheDocument();
   }), u("render ToolTipText with no entries", async () => {
-    a(/* @__PURE__ */ r(d, { value: void 0, textKey: "value", valueKey: "id" })), e(t.queryByText("Afar")).not.toBeInTheDocument(), e(t.queryByText("France")).not.toBeInTheDocument(), e(t.queryByText("Germany")).not.toBeInTheDocument();
+    s(/* @__PURE__ */ a(d, { value: void 0, textKey: "value", valueKey: "id" })), e(t.queryByText("Afar")).not.toBeInTheDocument(), e(t.queryByText("France")).not.toBeInTheDocument(), e(t.queryByText("Germany")).not.toBeInTheDocument();
   });
 });

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.17.0",
+  "version": "2.18.0",
   "type": "module",
   "repository": "https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared",
   "author": "Falk Menge <falk.menge.ext@bayer.com>",