@hortiview/default-components 1.3.0 → 1.4.1

package/dist/components/DefaultFormSelect/DefaultFormSelect.d.ts

@@ -0,0 +1,14 @@
+import { FormSelectProps } from '@hortiview/shared-components';
+import { FieldValues } from 'react-hook-form';
+
+/**
+ * Default form select component with translations for common labels.
+ * Translated labels are:
+ * - multiDisplayTextValue
+ * - noOptionsMessage
+ * - optionFilterLabel
+ * - selectAllLabel
+ * @param props
+ * @returns
+ */
+export declare const DefaultFormSelect: <T extends FieldValues>(props: FormSelectProps<T>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/DefaultFormSelect/DefaultFormSelect.js

@@ -0,0 +1,189 @@
+import { jsx as o, Fragment as I, jsxs as U } from "react/jsx-runtime";
+import { a as b, v as j } from "../../useHelperText-BjFihJ7h.js";
+import { g as W, U as X, u as Y } from "../../useTranslation-B_ODv8uN.js";
+import { useEffect as z, useMemo as N } from "react";
+import { useFormContext as Z, Controller as A } from "react-hook-form";
+import { I as k, t as G, V as J } from "../../index.es-CzUKBF7E-BPJhlGEA.js";
+import { n as Q, f as R } from "../../index.es--yyG47az-DBKBm3yD.js";
+import { InternationalizationWrapper as ee } from "../InternationalizationWrapper/InternationalizationWrapper.js";
+import '../../assets/DefaultFormSelect.css';const te = "_customPortal_8wq49_1", le = "_customSelect_8wq49_7", K = {
+  customPortal: te,
+  customSelect: le
+}, oe = ({
+  menuMaxHeight: e = "15rem",
+  portalClassName: t,
+  "data-testid": l = "custom-select",
+  className: r,
+  hoisted: u,
+  ...x
+}) => {
+  const c = `custom-portal-${t ?? "default"}`, n = k("elementSelectForTestId-");
+  return z(() => {
+    if (u && !document.getElementById(c)) {
+      const s = document.createElement("div");
+      s.id = c, s.className = `${K.customPortal} ${t ?? ""}`, document.body.appendChild(s);
+    }
+  }, [u, c, t]), z(() => {
+    const s = document.querySelectorAll(`#${n} input[role="combobox"]`);
+    s && s.forEach((_) => {
+      _.setAttribute("data-testid", l);
+    });
+  }, [l, n]), /* @__PURE__ */ o(
+    G,
+    {
+      menuMaxHeight: e,
+      hoisted: u,
+      id: n,
+      portalContainer: document.getElementById(c) ? `#${c}` : void 0,
+      className: `${K.customSelect} ${r ?? ""}`,
+      ...x
+    }
+  );
+};
+var ae = X();
+const ie = /* @__PURE__ */ W(ae), ne = ({ value: e, textKey: t, valueKey: l }) => {
+  if (!(!e || e.length === 0))
+    return Array.isArray(e) ? /* @__PURE__ */ o(Q, { "data-testid": "select-tooltip", direction: "vertical", gap: "dense", children: e == null ? void 0 : e.map((r) => /* @__PURE__ */ o(R, { level: 2, children: r[t] }, r[l])) }) : e == null ? void 0 : e[t];
+}, re = "_invalidHelperText_1qcz0_1", se = "_invalidBorder_1qcz0_5", de = "_invalidPlaceholder_1qcz0_9", ce = "_invalidDropdownIcon_1qcz0_13", me = "_formSelectContainer_1qcz0_18", ue = "_formSelect_1qcz0_18", pe = "_multiText_1qcz0_40", fe = "_tooltip_1qcz0_49", he = "_disabled_1qcz0_54", d = {
+  invalidHelperText: re,
+  invalidBorder: se,
+  invalidPlaceholder: de,
+  invalidDropdownIcon: ce,
+  formSelectContainer: me,
+  formSelect: ue,
+  multiText: pe,
+  tooltip: fe,
+  disabled: he
+}, ve = ({
+  propertyName: e,
+  label: t,
+  options: l,
+  multi: r = !1,
+  disabled: u = !1,
+  hoisted: x = !1,
+  hidden: c = !1,
+  valueKey: n = "value",
+  textKey: s = "text",
+  clearable: _ = !1,
+  searchable: M = !0,
+  noOptionsMessage: S = "",
+  rules: p,
+  menuPosition: $ = "auto",
+  ...a
+}) => {
+  const {
+    control: T,
+    getFieldState: F,
+    formState: { errors: q, isValidating: C }
+  } = Z(), w = N(
+    () => !C && b(q, e) !== void 0,
+    [q, e, C]
+  ), D = N(
+    () => {
+      var g;
+      return (g = p == null ? void 0 : p.required) == null ? void 0 : g.message;
+    },
+    [p]
+  ), { helperText: H, helperTextPersistent: B } = j({
+    propertyName: e,
+    helperText: a.helperText,
+    requiredText: D,
+    hasCharacterCount: !1
+  });
+  return c ? /* @__PURE__ */ o(A, { name: e, control: T, render: () => /* @__PURE__ */ o(I, {}) }) : /* @__PURE__ */ o(
+    "div",
+    {
+      "data-testid": "form-select-container",
+      className: d.formSelectContainer,
+      "data-tooltip-id": t,
+      children: /* @__PURE__ */ o(
+        A,
+        {
+          name: e,
+          rules: p,
+          control: T,
+          render: ({ field: { ref: g, onChange: y, value: f, ...E } }) => {
+            let m = l;
+            ie(l) && b(l[0], "options") !== void 0 && (m = l.flatMap((i) => b(i, "options") ?? []));
+            const h = r ? m == null ? void 0 : m.filter(
+              (i) => f == null ? void 0 : f.includes(i[n])
+            ) : m == null ? void 0 : m.find((i) => i[n] === f), O = r && a.multiDisplayType === "text" && a.fixedHeightInput, v = F(e).invalid, V = `
+          ${d.formSelect} 
+          ${v ? d.invalidHelperText : ""} 
+          ${v ? d.invalidDropdownIcon : ""}  
+          ${v ? d.invalidBorder : ""} 
+          ${v ? d.invalidPlaceholder : ""}  
+          ${O ? d.multiText : ""} 
+          ${u ? d.disabled : ""}`;
+            return /* @__PURE__ */ U(I, { children: [
+              /* @__PURE__ */ o(
+                oe,
+                {
+                  ...E,
+                  ...a,
+                  value: h ?? [],
+                  label: t,
+                  variant: "outlined",
+                  helperText: H,
+                  helperTextPersistent: B,
+                  options: l,
+                  valid: !w,
+                  "data-testid": a["data-testid"] ?? `select-${e}`,
+                  multiSelect: !(l != null && l.length) && S ? !1 : r,
+                  className: V,
+                  disabled: u,
+                  valueKey: n,
+                  textKey: s,
+                  onChange: (i) => {
+                    var P;
+                    if (i == null) {
+                      y(i);
+                      return;
+                    }
+                    if (r) {
+                      y(i.map((L) => L[n]));
+                      return;
+                    }
+                    y(i[n]), (P = a == null ? void 0 : a.onChange) == null || P.call(a, i);
+                  },
+                  hoisted: x,
+                  noOptionsMessage: S,
+                  searchable: M,
+                  clearable: _,
+                  menuPosition: $
+                }
+              ),
+              /* @__PURE__ */ o(
+                J,
+                {
+                  id: t,
+                  noArrow: !0,
+                  place: "bottom",
+                  delayShow: 420,
+                  className: d.tooltip,
+                  hidden: !h || h.length === 0 || !a.fixedHeightInput,
+                  children: /* @__PURE__ */ o(ne, { value: h, textKey: s, valueKey: n })
+                }
+              )
+            ] });
+          }
+        }
+      )
+    }
+  );
+}, Ce = (e) => {
+  const { t } = Y();
+  return /* @__PURE__ */ o(ee, { children: /* @__PURE__ */ o(
+    ve,
+    {
+      ...e,
+      multiDisplayTextValue: e.multiDisplayTextValue ?? t("formSelect.multiItems"),
+      noOptionsMessage: e.noOptionsMessage ?? t("formSelect.noOptions"),
+      optionFilterLabel: e.optionFilterLabel ?? t("formSelect.filterOptions"),
+      selectAllLabel: e.selectAllLabel ?? t("formSelect.selectAll")
+    }
+  ) });
+};
+export {
+  Ce as DefaultFormSelect
+};

package/dist/components/DefaultLoadingSpinner/DefaultLoadingSpinner.js

@@ -1,7 +1,7 @@
 import { jsx as e } from "react/jsx-runtime";
-import { p as t } from "../../LoadingSpinner-5JYKhDod.js";
+import { p as t } from "../../LoadingSpinner-FRQEZvxs.js";
 import { InternationalizationWrapper as o } from "../InternationalizationWrapper/InternationalizationWrapper.js";
-import { u as a } from "../../useTranslation-v0qSkb40.js";
+import { u as a } from "../../useTranslation-B_ODv8uN.js";
 const l = ({ ...n }) => {
   const { t: r } = a();
   return /* @__PURE__ */ e(o, { children: /* @__PURE__ */ e(t, { ...n, text: r("loadingSpinner.baseMessage"), impatienceMessage: null }) });