@frontify/fondue/dist/components/Checklist/Checklist.es.js

Design system of Frontify

import { jsx as w } from "react/jsx-runtime";
import { useCheckboxGroup as v, useCheckboxGroupItem as S } from "@react-aria/checkbox";
import { useCheckboxGroupState as I } from "@react-stately/checkbox";
import { useRef as k, useLayoutEffect as A, useState as E, useEffect as y } from "react";
import { CheckboxState as g, Checkbox as L } from "../Checkbox/Checkbox.es.js";
import { merge as z } from "../../utilities/merge.es.js";
var H = /* @__PURE__ */ ((e) => (e.Horizontal = "Horizontal", e.Vertical = "Vertical", e))(H || {});
const G = {
  1: "tw-grid-cols-1",
  2: "tw-grid-cols-2",
  3: "tw-grid-cols-3",
  4: "tw-grid-cols-4"
}, P = ({ checkbox: e, state: a, forwardedRef: u }) => {
  const r = k(null), { value: f, disabled: b, label: m, "aria-label": p, state: s } = e, [d, h] = E(s), l = a.isSelected(f), { inputProps: c } = S(
    { value: f, isDisabled: b, "aria-label": p || m },
    a,
    r
  );
  return y(() => {
    d === g.Mixed && !l ? h(g.Mixed) : h(l ? g.Checked : g.Unchecked);
  }, [d, l]), y(() => {
    u && r.current && u(r.current);
  }, [l]), /* @__PURE__ */ w(L, { ...e, state: d, groupInputProps: c, ref: r });
}, R = (e, a) => {
  if (a <= 1)
    return "";
  const u = "auto / span", r = e.length % a;
  return r === 0 ? "" : `${u} ${a - r + 1}`;
}, V = ({
  checkboxes: e,
  setActiveValues: a,
  ariaLabel: u = "Checklist",
  activeValues: r = [],
  direction: f = "Horizontal",
  "data-test-id": b = "checklist",
  ...m
}) => {
  const p = k(Array.from({ length: e.length })), s = k(null), d = I({
    value: r,
    onChange: a
  }), { groupProps: h } = v(
    {
      "aria-label": u
    },
    d
  ), l = "columns" in m && m.columns || 1;
  return A(() => {
    const c = (i) => {
      const o = p.current.filter((x) => x !== null);
      let t = o.indexOf(document.activeElement);
      if (i.key === "ArrowDown" || i.key === "ArrowRight")
        t++, t === o.length && (t = 0), o[t].disabled && t++;
      else if (i.key === "ArrowUp" || i.key === "ArrowLeft")
        t--, t === -1 && (t = o.length - 1), o[t].disabled && t--;
      else
        return;
      o[t].focus();
      const C = new KeyboardEvent("keyup", {
        key: "Tab",
        code: "Tab",
        keyCode: 9,
        bubbles: !0
      });
      o[t].dispatchEvent(C);
    }, n = s.current;
    return n == null || n.addEventListener("keydown", c), () => {
      n == null || n.removeEventListener("keydown", c);
    };
  }, [e.length]), /* @__PURE__ */ w(
    "div",
    {
      ...h,
      "data-test-id": b,
      className: z([
        f === "Horizontal" ? "tw-flex tw-flex-row tw-gap-12" : `tw-grid tw-gap-4 ${G[l]}`
      ]),
      ref: s,
      children: e.map((c, n) => {
        var i;
        return /* @__PURE__ */ w(
          "div",
          {
            style: {
              maxWidth: (i = s == null ? void 0 : s.current) == null ? void 0 : i.getBoundingClientRect().width,
              gridColumn: n === e.length - 1 && f === "Vertical" ? R(e, l) : void 0
            },
            children: /* @__PURE__ */ w(
              P,
              {
                checkbox: c,
                state: d,
                forwardedRef: (o) => p.current[n] = o
              }
            )
          },
          c.value
        );
      })
    }
  );
};
V.displayName = "FondueChecklist";
export {
  V as Checklist,
  H as ChecklistDirection
};
//# sourceMappingURL=Checklist.es.js.map