@dmsi/wedgekit-react 2.0.0 → 2.0.1

package/dist/components/Checkbox.js

@@ -0,0 +1,108 @@
+"use client";
+import { jsxs as d, jsx as e } from "react/jsx-runtime";
+import { clsx as a } from "../node_modules/clsx/dist/clsx.js";
+import { baseTransition as j, componentGap as q } from "../classNames.js";
+import { Icon as t } from "./Icon.js";
+import { Paragraph as w } from "./Paragraph.js";
+function I({
+  label: p,
+  error: o,
+  disabled: c,
+  readOnly: r,
+  checked: v,
+  onChange: l,
+  indeterminate: m,
+  paragraphClassName: b,
+  id: i,
+  testid: s,
+  ...h
+}) {
+  const n = m || v, u = a(
+    !n && !o && !c && !r && "border-border-primary-normal bg-background-action-secondary-normal peer-hover:border-border-action-hover peer-hover:bg-background-action-secondary-hover peer-active:border-border-action-active peer-active:bg-background-action-secondary-active"
+  ), g = a(
+    n && !o && !c && !r && "bg-background-action-primary-normal border-background-action-primary-normal peer-hover:bg-background-action-primary-hover peer-hover:border-background-action-primary-hover peer-active:bg-background-action-primary-active peer-active:border-background-action-primary-active"
+  ), k = a(
+    o && !n && "bg-background-action-critical-secondary-normal border-border-action-critical-normal peer-hover:border-border-action-critical-hover peer-hover:bg-background-action-critical-secondary-hover peer-active:border-border-action-critical-active peer-active:bg-background-action-secondary-active"
+  ), x = a(
+    o && n && "bg-background-action-critical-primary-normal border-background-action-critical-primary-normal peer-hover:bg-background-action-critical-primary-hover peer-hover:border-background-action-critical-primary-hover peer-active:bg-background-action-critical-primary-active peer-active:border-background-action-critical-primary-active"
+  ), y = a(
+    c && !r && "border-border-primary-normal bg-background-action-secondary-disabled peer-checked:bg-icon-on-action-primary-disabled peer-checked:border-icon-on-action-primary-disabled"
+  ), N = a(
+    r && "border-transparent bg-transparent peer-checked:bg-transparent peer-checked:border-transparent"
+  ), f = a(
+    n && !c && !r && "color-icon-on-action-primary-normal peer-hover:color-icon-on-action-primary-hover peer-active:color-icon-on-action-primary-active",
+    n && c && "color-background-action-primary-disabled"
+  );
+  return /* @__PURE__ */ d(
+    "label",
+    {
+      id: i,
+      "data-testid": s,
+      htmlFor: i ? `${i}-input` : void 0,
+      className: a(
+        "flex items-center",
+        q,
+        (c || r && o || r) && "cursor-default",
+        !(r && o) && !c && !r && "cursor-pointer"
+      ),
+      children: [
+        /* @__PURE__ */ d("div", { className: "relative", children: [
+          /* @__PURE__ */ e(
+            "input",
+            {
+              id: i ? `${i}-input` : void 0,
+              "data-testid": s ? `${s}-input` : void 0,
+              type: "checkbox",
+              className: "sr-only peer",
+              disabled: c,
+              checked: n,
+              onChange: C,
+              "data-indeterminate": m,
+              ...h
+            }
+          ),
+          o && (r || c) ? /* @__PURE__ */ e("div", { className: a("size-6", "flex items-center justify-center"), children: n ? m ? /* @__PURE__ */ e("span", { className: "text-icon-primary-normal contents", children: /* @__PURE__ */ e(t, { name: "question_mark" }) }) : r ? /* @__PURE__ */ e("span", { className: "text-success-400 contents", children: /* @__PURE__ */ e(t, { name: "check" }) }) : /* @__PURE__ */ e("span", { className: "text-icon-on-action-primary-normal contents", children: /* @__PURE__ */ e(t, { name: "check", className: "pointer-events-none" }) }) : r && /* @__PURE__ */ e("span", { className: "text-icon-primary-normal contents", children: /* @__PURE__ */ e(t, { name: "close" }) }) }) : /* @__PURE__ */ e(
+            "div",
+            {
+              className: a(
+                "size-6 border rounded-base",
+                "flex items-center justify-center",
+                j,
+                u,
+                g,
+                k,
+                x,
+                y,
+                N,
+                f
+              ),
+              children: n ? m ? r ? /* @__PURE__ */ e("span", { className: "text-icon-primary-normal  contents", children: /* @__PURE__ */ e(t, { name: "question_mark" }) }) : /* @__PURE__ */ e("span", { className: "text-icon-on-action-primary-normal contents", children: /* @__PURE__ */ e(t, { name: "remove", className: "pointer-events-none" }) }) : r ? /* @__PURE__ */ e("span", { className: "text-success-400 contents", children: /* @__PURE__ */ e(t, { name: "check" }) }) : /* @__PURE__ */ e("span", { className: "text-icon-on-action-primary-normal contents", children: /* @__PURE__ */ e(t, { name: "check", className: "pointer-events-none" }) }) : r && /* @__PURE__ */ e("span", { className: "text-icon-primary-normal contents", children: /* @__PURE__ */ e(t, { name: "close" }) })
+            }
+          )
+        ] }),
+        p && /* @__PURE__ */ e(
+          w,
+          {
+            id: i ? `${i}-label` : void 0,
+            testid: s ? `${s}-label` : void 0,
+            as: "span",
+            padded: !0,
+            className: a(
+              !b?.includes("text-wrap") && "text-nowrap",
+              c && !o && "!text-text-primary-disabled",
+              o && !c && !r && "!text-text-primary-error",
+              b
+            ),
+            children: p
+          }
+        )
+      ]
+    }
+  );
+  function C($) {
+    c || r || r && o || !l || l($);
+  }
+}
+export {
+  I as Checkbox
+};

package/dist/components/CompactImagesPreview.js

@@ -0,0 +1,120 @@
+import { jsx as a, jsxs as F } from "react/jsx-runtime";
+import { useState as P, useMemo as x, useEffect as T, useCallback as y } from "react";
+import { Stack as W } from "./Stack.js";
+import { clsx as $ } from "../node_modules/clsx/dist/clsx.js";
+import { useMatchesMobile as z } from "../hooks/useMatchesMedia.js";
+function H(u, c) {
+  const t = u?.trim();
+  return !!t && t !== c && !t.endsWith("/placeholder.svg") && !t.includes("/placeholder.svg?");
+}
+function U(u) {
+  const {
+    sources: c,
+    currentSourceIndex: t = 0,
+    activeImageHeight: b = 243,
+    activeImageWidth: p = 242,
+    thumbnailWidth: w = 30.5,
+    thumbnailHeight: E = 30,
+    enableThumbnailBorder: I = !1,
+    placeholderImageUri: o,
+    placeholderAlt: m = "placeholder image",
+    onChangeSource: j,
+    onMainImageClick: d,
+    testid: n
+  } = u, v = z(), [C, S] = P([]), M = x(
+    () => c.map((e) => e.uri).join("|"),
+    [c]
+  ), l = x(
+    () => c.filter(
+      (e) => H(e.uri, o) && C.indexOf(e.uri) === -1
+    ),
+    [C, o, c]
+  ), s = l.length, k = t >= 0 && t < s ? t : 0;
+  T(() => {
+    S([]);
+  }, [M]);
+  const h = y(
+    (e, r) => {
+      if (r && S(
+        (g) => g.indexOf(r) >= 0 ? g : [...g, r]
+      ), !o) return;
+      const i = e.currentTarget;
+      i.src !== o && (i.src = o, i.alt || (i.alt = m));
+    },
+    [o, m]
+  ), N = y(
+    (e) => {
+      e !== t && (e < 0 || e >= s || j(e));
+    },
+    [t, j, s]
+  );
+  if (!l.length || typeof v > "u")
+    return /* @__PURE__ */ a("div", { className: "flex flex-row justify-center w-full", children: /* @__PURE__ */ a(
+      "img",
+      {
+        "data-testid": n ? `${n}-placeholder` : void 0,
+        className: "object-center",
+        style: {
+          width: p,
+          height: b,
+          objectPosition: "center",
+          objectFit: "contain"
+        },
+        src: o,
+        alt: m,
+        onError: (e) => h(e),
+        onClick: d
+      }
+    ) });
+  const f = l[k];
+  return /* @__PURE__ */ F(W, { "data-testid": n, sizing: "layout", children: [
+    /* @__PURE__ */ a(
+      "img",
+      {
+        "data-testid": n ? `${n}-main-image` : void 0,
+        className: $("object-center", d && "cursor-pointer"),
+        style: {
+          width: v ? "100%" : p,
+          height: b,
+          objectPosition: "center",
+          objectFit: "contain"
+        },
+        src: f.uri,
+        alt: f.name,
+        onError: (e) => h(e, f.uri),
+        onClick: d
+      }
+    ),
+    s > 1 && /* @__PURE__ */ a("div", { className: "flex flex-row flex-wrap items-center gap-3", children: l.slice(0, 4).map((e, r) => /* @__PURE__ */ a(
+      "button",
+      {
+        "data-testid": n ? `${n}-thumbnail-${r}` : void 0,
+        onClick: (i) => {
+          i.preventDefault(), N(r);
+        },
+        className: $(
+          "cursor-pointer",
+          k === r && I ? "ring-2 ring-offset-2 ring-brand-400 transition-discrete duration-300" : "ring-brand-400/0"
+        ),
+        children: /* @__PURE__ */ a(
+          "img",
+          {
+            src: e.uri,
+            alt: e.name,
+            style: {
+              width: w,
+              height: E,
+              objectPosition: "center",
+              objectFit: "cover"
+            },
+            onError: (i) => h(i, e.uri)
+          }
+        )
+      },
+      `compact-image-${e.uri}-${r}`
+    )) })
+  ] });
+}
+export {
+  U as CompactImagesPreview
+};

package/dist/components/ContentTab.js

@@ -0,0 +1,68 @@
+"use client";
+import { jsxs as d, jsx as c } from "react/jsx-runtime";
+import { clsx as e } from "../node_modules/clsx/dist/clsx.js";
+import { useCallback as u } from "react";
+import { Button as f } from "./Button.js";
+function N({
+  label: m,
+  selected: a = !1,
+  className: l,
+  disabled: t = !1,
+  onClick: i,
+  ref: s,
+  fullWidth: n,
+  id: o,
+  testid: r,
+  ...v
+}) {
+  const p = u(
+    (b) => {
+      t || i?.(b);
+    },
+    [i, t]
+  ), x = e(
+    "absolute left-0 right-0 bottom-0 transition-colors duration-200 ease-in-out z-10",
+    "rounded-px ",
+    "h-0.5",
+    !t && "bg-text-action-primary-normal peer-hover:bg-border-action-hover peer-active:bg-border-action-active",
+    t && "bg-text-action-primary-disabled",
+    l
+  );
+  return /* @__PURE__ */ d("div", { id: o, "data-testid": r, className: e(
+    "relative",
+    n && "flex-1"
+  ), children: [
+    /* @__PURE__ */ c(
+      f,
+      {
+        id: o ? `${o}-button` : void 0,
+        testid: r ? `${r}-button` : void 0,
+        block: n,
+        ref: s,
+        variant: "tertiary",
+        disabled: t,
+        onClick: p,
+        role: "tab",
+        "aria-selected": a,
+        className: e(
+          "peer",
+          !a && "!text-text-secondary-normal hover:!text-text-action-primary-hover active:!text-text-action-primary-active"
+        ),
+        ...v,
+        children: m
+      }
+    ),
+    a && /* @__PURE__ */ c(
+      "div",
+      {
+        id: o ? `${o}-indicator` : void 0,
+        "data-testid": r ? `${r}-indicator` : void 0,
+        className: x,
+        children: " "
+      }
+    )
+  ] });
+}
+export {
+  N as ContentTab
+};

package/dist/components/ContentTabs.js

@@ -0,0 +1,96 @@
+"use client";
+import { jsxs as N, jsx as d } from "react/jsx-runtime";
+import { clsx as $ } from "../node_modules/clsx/dist/clsx.js";
+import { useState as I, useRef as R, useCallback as w, useEffect as S } from "react";
+import { ContentTab as j } from "./ContentTab.js";
+const y = "after:absolute after:bottom-0 after:left-0 after:w-full after:h-0.5 after:bg-border-primary-normal z-0";
+function g({
+  tabs: n,
+  onTabChange: a,
+  fullWidthTabs: h,
+  id: r,
+  testid: o,
+  selectedTab: f,
+  contentPadding: k = !0,
+  disabledWithColor: i
+}) {
+  const [c, u] = I(n[0]?.id || ""), [s, m] = I(0), v = R([]), p = w(
+    (e, t, l) => {
+      i && !l || (u(e), m(t), a?.(e));
+    },
+    [i, a]
+  );
+  S(() => {
+    f && p(f.id, f.index, !0);
+  }, [f, p]);
+  const b = w(
+    (e) => {
+      if (i) return;
+      let t = s;
+      if (e.key === "ArrowRight")
+        e.preventDefault(), t = (s + 1) % n.length;
+      else if (e.key === "ArrowLeft")
+        e.preventDefault(), t = (s - 1 + n.length) % n.length;
+      else
+        return;
+      const l = n[t].id;
+      u(l), a?.(l), v.current[t]?.focus(), m(t);
+    },
+    [i, s, a, n]
+  ), x = n.find((e) => e.id === c)?.content;
+  return /* @__PURE__ */ N("div", { id: r, "data-testid": o, children: [
+    /* @__PURE__ */ d("div", { className: $("overflow-x-auto", k && "pb-2"), children: /* @__PURE__ */ d(
+      "div",
+      {
+        id: r ? `${r}-tablist` : void 0,
+        "data-testid": o ? `${o}-tablist` : void 0,
+        role: "tablist",
+        "aria-orientation": "horizontal",
+        className: $("flex relative", y),
+        onKeyDown: b,
+        children: n.map((e, t) => {
+          const l = c === e.id;
+          return /* @__PURE__ */ d(
+            j,
+            {
+              disabled: e.disabled,
+              fullWidth: h,
+              id: r ? `${r}-tab-${e.id}` : void 0,
+              testid: o ? `${o}-tab-${e.id}` : void 0,
+              label: e.label,
+              selected: l,
+              onClick: () => p(e.id, t),
+              onFocus: () => {
+                i || (u(e.id), m(t), a?.(e.id));
+              },
+              className: $(!l && y),
+              role: "tab",
+              "aria-selected": l,
+              "aria-controls": `${r ? `${r}-` : ""}panel-${e.id}`,
+              tabIndex: l ? 0 : -1,
+              ref: (D) => {
+                v.current[t] = D;
+              }
+            },
+            e.id
+          );
+        })
+      }
+    ) }),
+    x && /* @__PURE__ */ d(
+      "div",
+      {
+        id: (r ? `${r}-` : "") + `panel-${c}`,
+        "data-testid": (o ? `${o}-` : "") + `panel-${c}`,
+        className: "mt-2",
+        role: "tabpanel",
+        "aria-labelledby": `tab-${c}`,
+        tabIndex: 0,
+        children: x
+      }
+    )
+  ] });
+}
+export {
+  g as ContentTabs
+};

package/dist/components/DMSiLogo.js

@@ -0,0 +1,54 @@
+import { jsxs as l, jsx as C } from "react/jsx-runtime";
+function i(L) {
+  return /* @__PURE__ */ l(
+    "svg",
+    {
+      width: "107",
+      height: "24",
+      viewBox: "0 0 107 24",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      ...L,
+      children: [
+        /* @__PURE__ */ C(
+          "path",
+          {
+            d: "M10.1472 5.86855H22.261C24.0328 5.86855 25.2192 5.79792 26.2514 7.25517C27.1489 8.60833 27.4185 9.79792 27.2105 11.4336C27.0025 13.0693 26.5596 14.2291 25.4926 15.6529C24.9996 16.3295 24.3795 16.8648 23.6284 17.2552C22.6077 17.7533 21.9529 17.6827 20.9206 17.6827H8.69893V17.6381L8.00562 23.2589H20.7704C24.2755 23.2589 27.6496 22.5228 30.4807 19.9949C33.0999 17.6827 34.6444 14.8128 35.0489 11.612C35.4918 8.12506 34.6406 5.72357 32.2948 3.3035C29.8875 0.775615 26.8793 0.362976 23.2278 0.362976H10.8328L10.1472 5.92803V5.86855Z",
+            fill: "#1D1E1E"
+          }
+        ),
+        /* @__PURE__ */ C(
+          "path",
+          {
+            d: "M45.7143 0.960477L45.3484 3.9233L45.437 3.64077C46.9276 1.46605 49.2772 0.618469 51.8771 0.618469C54.6042 0.618469 56.3567 1.62219 57.4082 3.91958C59.2263 1.53668 61.5527 0.618469 64.4531 0.618469C66.3135 0.618469 67.9544 1.16122 69.0868 2.45862C70.485 4.04598 70.2192 6.1352 69.9342 8.3917L68.0083 23.2356H60.5705L62.3462 9.28018C62.5234 7.901 62.5041 6.35453 60.5128 6.35453C58.0862 6.35453 57.6085 8.52925 57.389 10.2393L55.7366 23.2319H48.2025L49.9782 9.27646C50.1477 7.93817 49.9897 6.22442 48.1255 6.22442C46.0918 6.22442 45.4408 7.6891 45.2367 9.27646L43.461 23.2319H35.3453L38.2072 0.960477H45.7143Z",
+            fill: "#1D1E1E"
+          }
+        ),
+        /* @__PURE__ */ C(
+          "path",
+          {
+            d: "M97.4234 0.336578L96.6954 6.39234H103.474L96.2755 9.54104L94.5076 23.2734H103.255L106.175 0.336578H97.4234Z",
+            fill: "#1D1E1E"
+          }
+        ),
+        /* @__PURE__ */ C(
+          "path",
+          {
+            d: "M91.03 10.4126C89.3545 9.34573 86.6082 9.04833 84.6092 8.79182C83.9158 8.70632 83.1339 8.49814 82.4059 8.29368C82.1286 8.23792 81.8705 8.16729 81.6317 8.07807C81.5431 8.05204 81.443 8.02231 81.3583 8C81.1618 7.95539 80.9461 7.81041 80.7535 7.61338C80.353 7.30855 80.1141 6.94424 80.1141 6.54647C80.1141 6.35688 80.1835 6.17844 80.2836 6.00372C80.2952 5.98513 80.3029 5.97026 80.3144 5.95167C80.7921 5.20446 82.1248 4.66543 83.7117 4.66543C85.626 4.66543 87.1821 5.44981 87.29 6.43866H94.7393C93.7571 2.34572 89.0772 0 84.8326 0C82.3135 0 79.1204 0.342007 76.7439 1.66171C74.4598 2.94052 72.8228 4.66914 72.5069 7.14126C71.7674 12.9405 77.1945 14.026 81.8436 14.6654C82.1017 14.6952 82.6062 14.8141 83.157 15.0037C84.5976 15.2974 85.6183 16.026 85.6183 16.8848C85.6183 17.8773 84.2509 18.6989 82.4522 18.8699C82.2442 18.9145 82.0593 18.9368 81.9168 18.9368C80.7689 18.9368 79.987 18.8625 79.4131 18.487C78.689 18.197 78.1613 17.777 77.9726 17.29H70.165C71.205 22.3234 75.8387 24 80.534 24C85.6145 24 92.6747 22.2491 93.4412 16.2342C93.6801 14.3494 93.0099 11.7286 91.0378 10.4089L91.03 10.4126Z",
+            fill: "#1D1E1E"
+          }
+        ),
+        /* @__PURE__ */ C(
+          "path",
+          {
+            d: "M1.85771 9.54941H16.9027L0.825439 16.9174L1.85771 9.54941Z",
+            fill: "#0077C8"
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  i as DMSiLogo
+};

package/dist/components/DataGrid/ColumnSelectorHeaderCell/ColumnSelectorMenuOption.js

@@ -0,0 +1,27 @@
+import { jsx as n } from "react/jsx-runtime";
+import { useState as s } from "react";
+import { Checkbox as a } from "../../Checkbox.js";
+import { MenuOption as d } from "../../MenuOption.js";
+function p({
+  id: o,
+  testid: t,
+  column: e,
+  toggleColumnVisibility: c
+}) {
+  const [r, l] = s(e.getIsVisible()), h = typeof e.columnDef.header == "string" ? e.columnDef.header : null;
+  return /* @__PURE__ */ n(d, { id: o, testid: t, defaultChecked: r, children: /* @__PURE__ */ n(
+    a,
+    {
+      id: o ? `${o}-checkbox` : void 0,
+      testid: t ? `${t}-checkbox` : void 0,
+      label: h ?? "Unknown",
+      checked: r,
+      onChange: (i) => {
+        l(i.target.checked), c(e.id, i.target.checked);
+      }
+    }
+  ) });
+}
+export {
+  p as ColumnSelectorMenuOption
+};

package/dist/components/DataGrid/ColumnSelectorHeaderCell/index.js

@@ -0,0 +1,79 @@
+import { jsxs as l, jsx as n } from "react/jsx-runtime";
+import { useRef as c, useState as s } from "react";
+import { Button as a } from "../../Button.js";
+import { DataGridCell as d } from "../../DataGridCell.js";
+import { Icon as v } from "../../Icon.js";
+import { Menu as $ } from "../../Menu.js";
+import { ColumnSelectorMenuOption as h } from "./ColumnSelectorMenuOption.js";
+function w({
+  id: o,
+  testid: t,
+  table: m,
+  toggleColumnVisibility: u,
+  resetColumnVisibility: f
+}) {
+  const r = c(null), [p, i] = s(!1);
+  return /* @__PURE__ */ l(
+    d,
+    {
+      id: o,
+      testid: t,
+      width: "48px",
+      type: "header",
+      color: "text-secondary-normal",
+      ref: r,
+      children: [
+        /* @__PURE__ */ n(
+          a,
+          {
+            id: o ? `${o}-button` : void 0,
+            testid: t ? `${t}-button` : void 0,
+            onClick: () => i((e) => !e),
+            variant: "navigation",
+            iconOnly: !0,
+            leftIcon: /* @__PURE__ */ n(v, { name: "tune" })
+          }
+        ),
+        /* @__PURE__ */ l(
+          $,
+          {
+            id: o ? `${o}-menu` : void 0,
+            testid: t ? `${t}-menu` : void 0,
+            positionTo: r,
+            position: "bottom-right",
+            show: p,
+            setShow: i,
+            calculateMinMaxHeight: !0,
+            children: [
+              /* @__PURE__ */ n(
+                a,
+                {
+                  id: o ? `${o}-reset-button` : void 0,
+                  testid: t ? `${t}-reset-button` : void 0,
+                  variant: "tertiary",
+                  onClick: () => {
+                    f(), i(!1);
+                  },
+                  children: "Reset to default"
+                }
+              ),
+              m.getAllColumns().filter((e) => e.columnDef.meta?.inVisibilityMenu).map((e) => /* @__PURE__ */ n(
+                h,
+                {
+                  id: o ? `${o}-option-${e.id}` : void 0,
+                  testid: t ? `${t}-option-${e.id}` : void 0,
+                  column: e,
+                  toggleColumnVisibility: u
+                },
+                e.id
+              ))
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  w as ColumnSelectorHeaderCell
+};