moru-krds-react 0.1.0

package/dist/main-menu/index.js

@@ -0,0 +1,613 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { UiLink } from "../lib/link.js";
+import {
+  useCallback,
+  useEffect,
+  useId,
+  useRef,
+  useState
+} from "react";
+import { createPortal } from "react-dom";
+import { cx } from "../lib/krds.js";
+const NEW_WINDOW_TITLE = "\uC0C8 \uCC3D \uC5F4\uB9BC";
+function isExternalHref(href) {
+  return !href.startsWith("/");
+}
+function idBase(raw) {
+  return raw.replace(/[^a-zA-Z0-9_-]/g, "") || "gnb";
+}
+function MenuAction({ href, newWindow, children, ...rest }) {
+  if (!href) {
+    return /* @__PURE__ */ jsx("button", { type: "button", ...rest, children });
+  }
+  if (newWindow || isExternalHref(href)) {
+    return /* @__PURE__ */ jsx(
+      "a",
+      {
+        href,
+        target: newWindow ? "_blank" : void 0,
+        rel: newWindow ? "noopener noreferrer" : void 0,
+        title: newWindow ? NEW_WINDOW_TITLE : void 0,
+        ...rest,
+        children
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(UiLink, { href, ...rest, children });
+}
+const key = (item, index) => item.id ?? index;
+function firstPanelIndex(groups) {
+  return groups.findIndex((group) => (group.items?.length ?? 0) > 0);
+}
+function hasItems(group) {
+  return (group.items?.length ?? 0) > 0;
+}
+function GroupPanel({
+  group,
+  titleLevel
+}) {
+  const Title = `h${titleLevel}`;
+  const DescTitle = `h${Math.min(titleLevel + 1, 6)}`;
+  const items = group.items ?? [];
+  const described = items.some((item) => item.description);
+  const shortcut = group.shortcut;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("div", { className: "gnb-sub-content", children: [
+      /* @__PURE__ */ jsx(Title, { className: "sub-title", children: shortcut ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        group.title ?? group.label,
+        /* @__PURE__ */ jsxs(
+          MenuAction,
+          {
+            href: shortcut.href,
+            newWindow: shortcut.newWindow,
+            className: "krds-btn link basic small",
+            children: [
+              /* @__PURE__ */ jsx("span", { className: "underline", children: shortcut.label ?? "\uBC14\uB85C\uAC00\uAE30" }),
+              /* @__PURE__ */ jsx("i", { className: "svg-icon ico-angle right", "aria-hidden": "true" })
+            ]
+          }
+        )
+      ] }) : /* @__PURE__ */ jsx("span", { children: group.title ?? group.label }) }),
+      /* @__PURE__ */ jsx("ul", { className: cx(described && "type-description"), children: items.map((item, index) => {
+        const external = item.newWindow || (item.href ? isExternalHref(item.href) : false);
+        if (described) {
+          return /* @__PURE__ */ jsxs("li", { children: [
+            /* @__PURE__ */ jsx(DescTitle, { className: "tit", children: /* @__PURE__ */ jsxs(
+              MenuAction,
+              {
+                href: item.href,
+                newWindow: item.newWindow,
+                "aria-current": item.current ? "page" : void 0,
+                onClick: item.onSelect,
+                children: [
+                  item.label,
+                  external && /* @__PURE__ */ jsx("i", { className: "svg-icon ico-go", "aria-hidden": "true" })
+                ]
+              }
+            ) }),
+            item.description && /* @__PURE__ */ jsx("p", { className: "txt", children: item.description })
+          ] }, key(item, index));
+        }
+        return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+          MenuAction,
+          {
+            href: item.href,
+            newWindow: item.newWindow,
+            className: cx(item.current && "active"),
+            "aria-current": item.current ? "page" : void 0,
+            onClick: item.onSelect,
+            children: item.label
+          }
+        ) }, key(item, index));
+      }) })
+    ] }),
+    group.banner && /* @__PURE__ */ jsxs("div", { className: "gnb-sub-banner", children: [
+      group.banner.badge && /* @__PURE__ */ jsx("span", { className: "krds-badge bg-secondary", children: group.banner.badge }),
+      /* @__PURE__ */ jsxs(
+        MenuAction,
+        {
+          href: group.banner.href,
+          newWindow: group.banner.newWindow,
+          className: "krds-btn medium text",
+          onClick: group.banner.onSelect,
+          children: [
+            group.banner.label,
+            /* @__PURE__ */ jsx("i", { className: "svg-icon ico-angle right", "aria-hidden": "true" })
+          ]
+        }
+      )
+    ] })
+  ] });
+}
+function MainMenu({
+  items,
+  label = "\uBA54\uC778 \uBA54\uB274",
+  titleLevel = 2,
+  backdrop = true,
+  className,
+  onKeyDown,
+  onBlur,
+  ref,
+  ...rest
+}) {
+  const uid = idBase(useId());
+  const navRef = useRef(null);
+  const listRefs = useRef([]);
+  const [openIndex, setOpenIndex] = useState(null);
+  const [activeGroup, setActiveGroup] = useState({});
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => setMounted(true), []);
+  const close = useCallback(() => setOpenIndex(null), []);
+  const triggerAt = useCallback((index) => {
+    const triggers = navRef.current?.querySelectorAll(".gnb-main-trigger");
+    return triggers?.[index] ?? null;
+  }, []);
+  useEffect(() => {
+    if (openIndex === null || !backdrop) return;
+    const needsGutter = document.body.scrollHeight > window.innerHeight;
+    document.body.classList.add("is-gnb-web");
+    if (needsGutter) document.body.classList.add("hasScrollY");
+    return () => {
+      document.body.classList.remove("is-gnb-web");
+      if (needsGutter) document.body.classList.remove("hasScrollY");
+    };
+  }, [openIndex, backdrop]);
+  useEffect(() => {
+    if (openIndex === null) return;
+    function handleDown(event) {
+      if (!navRef.current?.contains(event.target)) close();
+    }
+    document.addEventListener("mousedown", handleDown);
+    return () => document.removeEventListener("mousedown", handleDown);
+  }, [openIndex, close]);
+  useEffect(() => {
+    if (openIndex === null) return;
+    function handleKey(event) {
+      if (event.key !== "Escape") return;
+      const trigger = triggerAt(openIndex);
+      close();
+      trigger?.focus();
+    }
+    document.addEventListener("keydown", handleKey);
+    return () => document.removeEventListener("keydown", handleKey);
+  }, [openIndex, close, triggerAt]);
+  useEffect(() => {
+    if (openIndex === null) return;
+    const list = listRefs.current[openIndex];
+    if (!list) return;
+    const panel = list.querySelector(".gnb-sub-list.active");
+    list.style.minHeight = panel ? `${panel.scrollHeight}px` : "";
+    return () => {
+      list.style.minHeight = "";
+    };
+  }, [openIndex, activeGroup, items]);
+  function toggleTop(index) {
+    setOpenIndex((current) => current === index ? null : index);
+  }
+  function handleKeyDown(event) {
+    onKeyDown?.(event);
+    if (event.defaultPrevented) return;
+    const target = event.target;
+    if (!target || target.dataset?.trigger !== "gnb") return;
+    const move = (direction) => {
+      const sibling = direction === "next" ? target.closest("li")?.nextElementSibling : target.closest("li")?.previousElementSibling;
+      sibling?.querySelector("[data-trigger]")?.focus();
+    };
+    switch (event.key) {
+      case "Home":
+        event.preventDefault();
+        triggerAt(0)?.focus();
+        break;
+      case "End":
+        event.preventDefault();
+        triggerAt(items.length - 1)?.focus();
+        break;
+      case "ArrowRight":
+      case "ArrowDown":
+        event.preventDefault();
+        move("next");
+        break;
+      case "ArrowLeft":
+      case "ArrowUp":
+        event.preventDefault();
+        move("prev");
+        break;
+      default:
+        break;
+    }
+  }
+  function handleBlur(event) {
+    onBlur?.(event);
+    const next = event.relatedTarget;
+    if (next && !event.currentTarget.contains(next)) close();
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "nav",
+      {
+        ref: (node) => {
+          navRef.current = node;
+          if (typeof ref === "function") ref(node);
+          else if (ref) ref.current = node;
+        },
+        className: cx("krds-main-menu", className),
+        "aria-label": label,
+        onKeyDown: handleKeyDown,
+        onBlur: handleBlur,
+        ...rest,
+        children: /* @__PURE__ */ jsx("div", { className: "inner", children: /* @__PURE__ */ jsx("ul", { className: "gnb-menu", children: items.map((top, index) => {
+          const groups = top.items ?? [];
+          if (groups.length === 0) {
+            return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+              MenuAction,
+              {
+                href: top.href,
+                newWindow: top.newWindow,
+                className: "gnb-main-trigger is-link",
+                "data-trigger": "gnb",
+                "aria-current": top.current ? "page" : void 0,
+                onClick: top.onSelect,
+                children: top.label
+              }
+            ) }, key(top, index));
+          }
+          const open = openIndex === index;
+          const panelId = `${uid}-gnb-${index}`;
+          const activeIndex = activeGroup[index] ?? firstPanelIndex(groups);
+          const single = groups.length === 1 && hasItems(groups[0]);
+          return /* @__PURE__ */ jsxs("li", { children: [
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: cx("gnb-main-trigger", open && "active"),
+                "data-trigger": "gnb",
+                "aria-expanded": open,
+                "aria-haspopup": true,
+                "aria-controls": panelId,
+                "aria-current": open ? "true" : top.current ? "page" : void 0,
+                onClick: () => toggleTop(index),
+                children: top.label
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                id: panelId,
+                className: cx(
+                  "gnb-toggle-wrap",
+                  open && "is-open",
+                  "max-h-[70vh] overflow-y-auto"
+                ),
+                children: /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: "gnb-main-list",
+                    "data-has-submenu": single ? void 0 : "true",
+                    ref: (node) => {
+                      listRefs.current[index] = node;
+                    },
+                    children: single ? /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        className: cx(
+                          "gnb-sub-list",
+                          "single-list",
+                          groups[0].banner?.side && "between"
+                        ),
+                        children: /* @__PURE__ */ jsx(GroupPanel, { group: groups[0], titleLevel })
+                      }
+                    ) : /* @__PURE__ */ jsx("ul", { children: groups.map((group, groupIndex) => {
+                      if (!hasItems(group)) {
+                        const external = group.newWindow || (group.href ? isExternalHref(group.href) : false);
+                        return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+                          MenuAction,
+                          {
+                            href: group.href,
+                            newWindow: group.newWindow,
+                            className: cx(
+                              "gnb-sub-trigger",
+                              "is-link",
+                              external && "external-link"
+                            ),
+                            "data-trigger": "gnb",
+                            "aria-current": group.current ? "page" : void 0,
+                            onClick: group.onSelect,
+                            children: group.label
+                          }
+                        ) }, key(group, groupIndex));
+                      }
+                      const active = activeIndex === groupIndex;
+                      const subId = `${panelId}-sub-${groupIndex}`;
+                      return /* @__PURE__ */ jsxs("li", { children: [
+                        /* @__PURE__ */ jsx(
+                          "button",
+                          {
+                            type: "button",
+                            className: cx("gnb-sub-trigger", active && "active"),
+                            "data-trigger": "gnb",
+                            "aria-expanded": active,
+                            "aria-haspopup": true,
+                            "aria-controls": subId,
+                            onClick: () => {
+                              setActiveGroup((current) => ({
+                                ...current,
+                                [index]: groupIndex
+                              }));
+                              group.onSelect?.();
+                            },
+                            children: group.label
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          "div",
+                          {
+                            id: subId,
+                            className: cx(
+                              "gnb-sub-list",
+                              active && "active",
+                              group.banner?.side && "between"
+                            ),
+                            children: /* @__PURE__ */ jsx(GroupPanel, { group, titleLevel })
+                          }
+                        )
+                      ] }, key(group, groupIndex));
+                    }) })
+                  }
+                )
+              }
+            )
+          ] }, key(top, index));
+        }) }) })
+      }
+    ),
+    backdrop && mounted ? createPortal(
+      /* @__PURE__ */ jsx("div", { className: cx("gnb-backdrop", openIndex !== null && "active"), "aria-hidden": "true" }),
+      document.body
+    ) : null
+  ] });
+}
+const MOBILE_ENTER_DELAY = 100;
+const MOBILE_LEAVE_DELAY = 400;
+const PC_MIN_WIDTH = 1024;
+const FOCUSABLE_SELECTOR = [
+  "a[href]",
+  "button:not([disabled])",
+  'input:not([disabled]):not([type="hidden"])',
+  "select:not([disabled])",
+  "textarea:not([disabled])",
+  '[tabindex]:not([tabindex="-1"])'
+].join(",");
+function focusables(root) {
+  return Array.from(root.querySelectorAll(FOCUSABLE_SELECTOR)).filter(
+    (el) => !el.hasAttribute("inert") && el.getClientRects().length > 0
+  );
+}
+function MainMenuMobile({
+  items,
+  open,
+  onClose,
+  id = "mobile-nav",
+  label = "\uC804\uCCB4 \uBA54\uB274",
+  closeLabel = "\uC804\uCCB4\uBA54\uB274 \uB2EB\uAE30",
+  titleLevel = 2,
+  header,
+  bottom,
+  className,
+  style,
+  onKeyDown,
+  ...rest
+}) {
+  const uid = idBase(useId());
+  const wrapRef = useRef(null);
+  const bodyRef = useRef(null);
+  const [shown, setShown] = useState(false);
+  const [entered, setEntered] = useState(false);
+  const [activeTab, setActiveTab] = useState(0);
+  const [openDepth3, setOpenDepth3] = useState({});
+  const tabId = (index) => `${uid}-m-tab-${index}`;
+  const panelId = (index) => `${uid}-m-panel-${index}`;
+  useEffect(() => {
+    if (!open) return;
+    const restore = document.activeElement;
+    setShown(true);
+    document.body.classList.add("is-gnb-mobile");
+    const enterTimer = window.setTimeout(() => {
+      setEntered(true);
+      wrapRef.current?.focus();
+    }, MOBILE_ENTER_DELAY);
+    return () => {
+      window.clearTimeout(enterTimer);
+      setEntered(false);
+      document.body.classList.remove("is-gnb-mobile");
+      restore?.focus?.();
+    };
+  }, [open]);
+  useEffect(() => {
+    if (open || !shown) return;
+    const timer = window.setTimeout(() => setShown(false), MOBILE_LEAVE_DELAY);
+    return () => window.clearTimeout(timer);
+  }, [open, shown]);
+  useEffect(() => {
+    if (!open) return;
+    const query = window.matchMedia(`(min-width: ${PC_MIN_WIDTH}px)`);
+    const handle = () => {
+      if (query.matches) onClose();
+    };
+    handle();
+    query.addEventListener("change", handle);
+    return () => query.removeEventListener("change", handle);
+  }, [open, onClose]);
+  useEffect(() => {
+    const body = bodyRef.current;
+    if (!open || !body) return;
+    const handle = () => {
+      const bottomReached = body.scrollTop + body.clientHeight >= body.scrollHeight - 1;
+      if (bottomReached) {
+        setActiveTab(items.length - 1);
+        return;
+      }
+      let next = 0;
+      items.forEach((_, index) => {
+        const panel = document.getElementById(panelId(index));
+        if (panel && body.scrollTop >= panel.offsetTop) next = index;
+      });
+      setActiveTab(next);
+    };
+    body.addEventListener("scroll", handle, { passive: true });
+    return () => body.removeEventListener("scroll", handle);
+  }, [open, items]);
+  function handleTabClick(event, index) {
+    event.preventDefault();
+    setActiveTab(index);
+    const panel = document.getElementById(panelId(index));
+    if (panel) bodyRef.current?.scrollTo({ top: panel.offsetTop, left: 0, behavior: "smooth" });
+  }
+  function handleKeyDown(event) {
+    onKeyDown?.(event);
+    if (event.defaultPrevented) return;
+    if (event.key === "Escape") {
+      event.stopPropagation();
+      onClose();
+      return;
+    }
+    if (event.key !== "Tab") return;
+    const wrap = wrapRef.current;
+    if (!wrap) return;
+    const nodes = focusables(wrap);
+    if (nodes.length === 0) {
+      event.preventDefault();
+      wrap.focus();
+      return;
+    }
+    const first = nodes[0];
+    const last = nodes[nodes.length - 1];
+    if (event.shiftKey && document.activeElement === first) {
+      event.preventDefault();
+      last.focus();
+    } else if (!event.shiftKey && document.activeElement === last) {
+      event.preventDefault();
+      first.focus();
+    }
+  }
+  const Title = `h${titleLevel}`;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      id,
+      className: cx("krds-main-menu-mobile", entered && "is-open", entered && "is-backdrop", className),
+      style: { display: shown ? "block" : "none", ...style },
+      onKeyDown: handleKeyDown,
+      ...rest,
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ref: wrapRef,
+          className: "gnb-wrap",
+          role: "dialog",
+          "aria-modal": "true",
+          "aria-label": label,
+          tabIndex: -1,
+          children: [
+            header && /* @__PURE__ */ jsx("div", { className: "gnb-header", children: header }),
+            /* @__PURE__ */ jsxs("div", { className: "gnb-body", ref: bodyRef, children: [
+              /* @__PURE__ */ jsxs("div", { className: "gnb-menu", role: "navigation", "aria-label": "\uBA54\uC778 \uBA54\uB274", children: [
+                /* @__PURE__ */ jsx("div", { className: "menu-wrap", children: /* @__PURE__ */ jsx("ul", { role: "tablist", children: items.map((top, index) => /* @__PURE__ */ jsx("li", { role: "none", children: /* @__PURE__ */ jsx(
+                  "a",
+                  {
+                    href: `#${panelId(index)}`,
+                    id: tabId(index),
+                    className: cx("gnb-main-trigger", activeTab === index && "active"),
+                    role: "tab",
+                    "aria-selected": activeTab === index,
+                    "aria-controls": panelId(index),
+                    onClick: (event) => handleTabClick(event, index),
+                    children: top.label
+                  }
+                ) }, key(top, index))) }) }),
+                /* @__PURE__ */ jsx("div", { className: "submenu-wrap", children: items.map((top, index) => /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    id: panelId(index),
+                    className: "gnb-sub-list",
+                    role: "tabpanel",
+                    "aria-labelledby": tabId(index),
+                    children: [
+                      /* @__PURE__ */ jsx(Title, { className: "sub-title", children: top.label }),
+                      /* @__PURE__ */ jsx("ul", { children: (top.items ?? []).map((group, groupIndex) => {
+                        const groupKey = `${index}-${groupIndex}`;
+                        const items3 = group.items ?? [];
+                        if (items3.length === 0) {
+                          return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+                            MenuAction,
+                            {
+                              href: group.href,
+                              newWindow: group.newWindow,
+                              className: cx("gnb-sub-trigger", group.current && "selected"),
+                              "aria-current": group.current ? "page" : void 0,
+                              onClick: group.onSelect,
+                              children: group.label
+                            }
+                          ) }, key(group, groupIndex));
+                        }
+                        const expanded = openDepth3[groupKey] ?? false;
+                        const depth3Id = `${panelId(index)}-d3-${groupIndex}`;
+                        return /* @__PURE__ */ jsxs("li", { children: [
+                          /* @__PURE__ */ jsx(
+                            "button",
+                            {
+                              type: "button",
+                              className: cx(
+                                "gnb-sub-trigger",
+                                "has-depth3",
+                                expanded && "active",
+                                group.current && "selected"
+                              ),
+                              "aria-expanded": expanded,
+                              "aria-controls": depth3Id,
+                              onClick: () => {
+                                setOpenDepth3((current) => ({
+                                  ...current,
+                                  [groupKey]: !expanded
+                                }));
+                                group.onSelect?.();
+                              },
+                              children: group.label
+                            }
+                          ),
+                          /* @__PURE__ */ jsx("div", { id: depth3Id, className: cx("depth3-wrap", expanded && "is-open"), children: /* @__PURE__ */ jsx("ul", { children: items3.map((item, itemIndex) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+                            MenuAction,
+                            {
+                              href: item.href,
+                              newWindow: item.newWindow,
+                              className: cx("depth3-trigger", item.current && "active"),
+                              "aria-current": item.current ? "page" : void 0,
+                              onClick: item.onSelect,
+                              children: item.label
+                            }
+                          ) }, key(item, itemIndex))) }) })
+                        ] }, key(group, groupIndex));
+                      }) })
+                    ]
+                  },
+                  key(top, index)
+                )) })
+              ] }),
+              bottom && /* @__PURE__ */ jsx("div", { className: "gnb-bottom", children: bottom })
+            ] }),
+            /* @__PURE__ */ jsxs("button", { type: "button", className: "krds-btn medium icon", id: "close-nav", onClick: onClose, children: [
+              /* @__PURE__ */ jsx("span", { className: "sr-only", children: closeLabel }),
+              /* @__PURE__ */ jsx("i", { className: "svg-icon ico-popup-close", "aria-hidden": "true" })
+            ] })
+          ]
+        }
+      )
+    }
+  );
+}
+export {
+  MainMenu,
+  MainMenuMobile
+};
+//# sourceMappingURL=index.js.map