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

Design system of Frontify

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