@televet/kibble-ui 4.0.0-beta.4 → 4.0.0-beta.41

package/dist/chunks/menu.component-B5OYYpa8.js

@@ -0,0 +1,668 @@
+import { j as e } from "./jsx-runtime-C5mzlN2N.js";
+import De, { forwardRef as x, useEffect as $, useId as B, useRef as Q, useCallback as j, useState as X, useMemo as y } from "react";
+import { B as F } from "./button.component-BWlRjD5a.js";
+import { I as te } from "./icon.component-BmcWaysM.js";
+import { W as L } from "./text.component-DZkwd4C0.js";
+import { F as w } from "./flex-C2d2LH-K.js";
+import { W as Ee } from "./textInput.component-c9ySCd-c.js";
+import { S as He } from "./spinner.component-DRQDBF8j.js";
+import { B as A } from "./box-y05hq0PT.js";
+import { W as Ke, u as Ue } from "./checkbox.component-BTG2oHN_.js";
+import { a as k, f as g, b as S, u as V, h as qe, i as Je, j as Qe, k as Xe, n as Ye, s as ne, l as oe, m as se, P as Ze } from "./use-locale-context-zakBNK5b.js";
+import { c as et } from "./create-slot-recipe-context-DJkLYvCT.js";
+import { b as tt } from "./icons-grAfs3Oz.js";
+import { c as nt, m as ot } from "./index-sWaESJRS.js";
+import { U as d } from "./index-DLvqBeH6.js";
+const [re, m] = k({
+  name: "MenuContext",
+  hookName: "useMenuContext",
+  providerName: "<MenuProvider />",
+  strict: !1
+}), ae = x((o, n) => {
+  const t = m(), s = d(t.getArrowProps(), o);
+  return /* @__PURE__ */ e.jsx(g.div, { ...s, ref: n });
+});
+ae.displayName = "MenuArrow";
+const ce = x((o, n) => {
+  const t = m(), s = d(t.getArrowTipProps(), o);
+  return /* @__PURE__ */ e.jsx(g.div, { ...s, ref: n });
+});
+ce.displayName = "MenuArrowTip";
+const [z, Bt] = k({
+  name: "MenuItemContext",
+  hookName: "useMenuItemContext",
+  providerName: "<MenuItemProvider />"
+}), [ue, ie] = k({
+  name: "MenuOptionItemPropsContext",
+  hookName: "useMenuOptionItemPropsContext",
+  providerName: "<MenuOptionItemPropsProvider />"
+}), le = x((o, n) => {
+  const [t, s] = S()(o, [
+    "checked",
+    "closeOnSelect",
+    "disabled",
+    "onCheckedChange",
+    "value",
+    "valueText"
+  ]), r = {
+    ...t,
+    type: "checkbox"
+  }, u = m(), c = d(u.getOptionItemProps(r), s), l = u.getOptionItemState(r);
+  return /* @__PURE__ */ e.jsx(ue, { value: r, children: /* @__PURE__ */ e.jsx(z, { value: l, children: /* @__PURE__ */ e.jsx(g.div, { ...c, ref: n }) }) });
+});
+le.displayName = "MenuCheckboxItem";
+const de = x((o, n) => {
+  const t = m(), s = V(), r = d(t.getContentProps(), s.getPresenceProps(), o);
+  return s.unmounted ? null : /* @__PURE__ */ e.jsx(g.div, { ...r, ref: qe(s.ref, n) });
+});
+de.displayName = "MenuContent";
+const me = x((o, n) => {
+  const t = m(), s = d(t.getContextTriggerProps(), o);
+  return /* @__PURE__ */ e.jsx(g.button, { ...s, ref: n });
+});
+me.displayName = "MenuContextTrigger";
+const pe = x((o, n) => {
+  const t = m(), s = d(t.getIndicatorProps(), o);
+  return /* @__PURE__ */ e.jsx(g.div, { ...s, ref: n });
+});
+pe.displayName = "MenuIndicator";
+const he = x((o, n) => {
+  const [t, s] = S()(o, [
+    "closeOnSelect",
+    "disabled",
+    "value",
+    "valueText",
+    "onSelect"
+  ]), r = m(), u = d(r.getItemProps(t), s), c = r.getItemState(t);
+  return $(() => r.addItemListener({ id: c.id, onSelect: t.onSelect }), [c.id, t.onSelect]), /* @__PURE__ */ e.jsx(z, { value: c, children: /* @__PURE__ */ e.jsx(g.div, { ...u, ref: n }) });
+});
+he.displayName = "MenuItem";
+const [xe, ge] = k({
+  name: "MenuItemGroupContext",
+  hookName: "useMenuItemGroupContext",
+  providerName: "<MenuItemGroupProvider />"
+}), Me = x((o, n) => {
+  const [t, s] = S()(o, ["id"]), r = m(), c = { id: B(), ...t }, l = d(r.getItemGroupProps(c), s);
+  return /* @__PURE__ */ e.jsx(xe, { value: c, children: /* @__PURE__ */ e.jsx(g.div, { ...l, ref: n }) });
+});
+Me.displayName = "MenuItemGroup";
+const fe = x((o, n) => {
+  const t = m(), s = ge(), r = d(t.getItemGroupLabelProps({ htmlFor: s.id }), o);
+  return /* @__PURE__ */ e.jsx(g.div, { ...r, ref: n });
+});
+fe.displayName = "MenuItemGroupLabel";
+const Pe = x((o, n) => {
+  const t = m(), s = ie(), r = d(t.getItemIndicatorProps(s), o);
+  return /* @__PURE__ */ e.jsx(g.div, { ...r, ref: n });
+});
+Pe.displayName = "MenuItemIndicator";
+const Ie = x((o, n) => {
+  const t = m(), s = ie(), r = d(t.getItemTextProps(s), o);
+  return /* @__PURE__ */ e.jsx(g.div, { ...r, ref: n });
+});
+Ie.displayName = "MenuItemText";
+const ve = x((o, n) => {
+  const t = m(), s = d(t.getPositionerProps(), o);
+  return V().unmounted ? null : /* @__PURE__ */ e.jsx(g.div, { ...s, ref: n });
+});
+ve.displayName = "MenuPositioner";
+const Ce = x((o, n) => {
+  const [t, s] = S()(o, [
+    "closeOnSelect",
+    "disabled",
+    "value",
+    "valueText"
+  ]), r = m(), u = ge(), c = {
+    ...t,
+    checked: u.value === t.value,
+    type: "radio",
+    onCheckedChange: () => u.onValueChange?.({ value: t.value })
+  }, l = d(r.getOptionItemProps(c), s), f = r.getOptionItemState(c);
+  return /* @__PURE__ */ e.jsx(ue, { value: c, children: /* @__PURE__ */ e.jsx(z, { value: f, children: /* @__PURE__ */ e.jsx(g.div, { ...l, ref: n }) }) });
+});
+Ce.displayName = "MenuRadioItem";
+const je = x((o, n) => {
+  const [t, s] = S()(o, [
+    "id",
+    "onValueChange",
+    "value"
+  ]), r = m(), c = { id: B(), ...t }, l = d(r.getItemGroupProps({ id: c.id }), s);
+  return /* @__PURE__ */ e.jsx(xe, { value: c, children: /* @__PURE__ */ e.jsx(g.div, { ...l, ref: n }) });
+});
+je.displayName = "MenuRadioItemGroup";
+const be = (o) => {
+  const n = Q(o), t = Q(!1);
+  $(() => {
+    n.current = o;
+  }), $(() => {
+    t.current !== !0 && (t.current = !0, n.current());
+  }, []);
+}, st = (o) => {
+  const n = B(), { getRootNode: t } = Je(), { dir: s } = Qe(), r = {
+    id: n,
+    dir: s,
+    getRootNode: t,
+    ...o
+  }, u = Xe(ot, r);
+  return { api: nt(u, Ye), service: u };
+}, [ke, Se] = k({
+  name: "MenuMachineContext",
+  hookName: "useMenuMachineContext",
+  providerName: "<MenuMachineProvider />",
+  strict: !1
+}), [Ne, rt] = k({
+  name: "MenuMachineContext",
+  hookName: "useMenuMachineContext",
+  providerName: "<MenuMachineProvider />",
+  strict: !1
+}), at = (o) => {
+  const [n, t] = ne(o), [s, r] = S()(t, [
+    "anchorPoint",
+    "aria-label",
+    "closeOnSelect",
+    "composite",
+    "defaultHighlightedValue",
+    "defaultOpen",
+    "highlightedValue",
+    "id",
+    "ids",
+    "loopFocus",
+    "navigate",
+    "onEscapeKeyDown",
+    "onFocusOutside",
+    "onHighlightChange",
+    "onInteractOutside",
+    "onOpenChange",
+    "onPointerDownOutside",
+    "onSelect",
+    "open",
+    "positioning",
+    "typeahead"
+  ]), u = m(), c = Se(), { api: l, service: f } = st(s), v = oe(d({ present: l.open }, n));
+  be(() => {
+    c && u && (u.setChild(f), l.setParent(c));
+  });
+  const P = j(() => u?.getTriggerItemProps(l), [l, u]);
+  return /* @__PURE__ */ e.jsx(Ne, { value: P, children: /* @__PURE__ */ e.jsx(ke, { value: f, children: /* @__PURE__ */ e.jsx(re, { value: l, children: /* @__PURE__ */ e.jsx(se, { value: v, ...r }) }) }) });
+}, ct = (o) => {
+  const n = m(), t = Se(), [s, { value: r, children: u }] = ne(o), { api: c, service: l } = r, f = oe(d({ present: c.open }, s));
+  be(() => {
+    t && n && (n.setChild(l), c.setParent(t));
+  });
+  const v = j(() => n?.getTriggerItemProps(c), [c, n]);
+  return /* @__PURE__ */ e.jsx(Ne, { value: v, children: /* @__PURE__ */ e.jsx(ke, { value: l, children: /* @__PURE__ */ e.jsx(re, { value: c, children: /* @__PURE__ */ e.jsx(se, { value: f, children: u }) }) }) });
+}, we = x((o, n) => {
+  const t = m(), s = d(t.getSeparatorProps(), o);
+  return /* @__PURE__ */ e.jsx(g.hr, { ...s, ref: n });
+});
+we.displayName = "MenuSeparator";
+const Te = x((o, n) => {
+  const t = m(), s = V(), r = d(
+    {
+      ...t.getTriggerProps(),
+      "aria-controls": s.unmounted ? void 0 : t.getTriggerProps()["aria-controls"]
+    },
+    o
+  );
+  return /* @__PURE__ */ e.jsx(g.button, { ...r, ref: n });
+});
+Te.displayName = "MenuTrigger";
+const ye = x((o, n) => {
+  const t = rt(), s = d(t?.() ?? {}, o);
+  return /* @__PURE__ */ e.jsx(g.div, { ...s, ref: n });
+});
+ye.displayName = "MenuTriggerItem";
+const {
+  withRootProvider: Ae,
+  withContext: p
+} = et({ key: "menu" });
+Ae(
+  ct
+);
+const ut = Ae(at, {
+  defaultProps: { lazyMount: !0, unmountOnExit: !0 }
+}), it = p(
+  Te,
+  "trigger",
+  { forwardAsChild: !0 }
+);
+p(me, "contextTrigger", { forwardAsChild: !0 });
+const lt = p(
+  ve,
+  "positioner",
+  { forwardAsChild: !0 }
+);
+p(
+  we,
+  "separator",
+  { forwardAsChild: !0 }
+);
+const dt = p(
+  de,
+  "content",
+  { forwardAsChild: !0 }
+), mt = p(
+  ce,
+  "arrowTip",
+  { forwardAsChild: !0 }
+);
+p(
+  ae,
+  "arrow",
+  { forwardAsChild: !0, defaultProps: { children: /* @__PURE__ */ e.jsx(mt, {}) } }
+);
+p(
+  pe,
+  "indicator",
+  { forwardAsChild: !0 }
+);
+const pt = p(
+  Me,
+  "itemGroup",
+  { forwardAsChild: !0 }
+), ht = p(fe, "itemGroupLabel", { forwardAsChild: !0 }), xt = p(
+  he,
+  "item",
+  { forwardAsChild: !0 }
+), gt = p(ye, "item", { forwardAsChild: !0 });
+p(
+  Ie,
+  "itemText",
+  { forwardAsChild: !0 }
+);
+p(
+  "kbd",
+  "itemCommand"
+);
+p(Pe, "itemIndicator", {
+  forwardAsChild: !0,
+  defaultProps: { children: /* @__PURE__ */ e.jsx(tt, { boxSize: "4" }) }
+});
+const Mt = p(le, "item", { forwardAsChild: !0 });
+p(je, "itemGroup", { forwardAsChild: !0 });
+p(
+  Ce,
+  "item",
+  { forwardAsChild: !0 }
+);
+const ft = ({
+  hideCaret: o = !1,
+  size: n = "md",
+  text: t,
+  textProps: s,
+  variant: r,
+  ...u
+}) => /* @__PURE__ */ e.jsxs(
+  F,
+  {
+    className: "Menu__Button",
+    "data-testid": "kibble-menu-button",
+    size: n,
+    variant: r,
+    ...u,
+    children: [
+      t && /* @__PURE__ */ e.jsx(
+        L,
+        {
+          className: "Menu__ButtonText",
+          "data-testid": "kibble-menu-button-text",
+          fontWeight: "semibold",
+          size: n,
+          color: r ? "inherit" : s?.color || "text.contrast",
+          truncate: !0,
+          ...s,
+          children: t
+        }
+      ),
+      !o && /* @__PURE__ */ e.jsx(
+        w,
+        {
+          className: "Menu__ButtonCaret",
+          "data-testid": "kibble-menu-button-caret",
+          children: /* @__PURE__ */ e.jsx(te, { name: "chevronDown", size: n === "lg" ? "sm" : "xs" })
+        }
+      )
+    ]
+  }
+), Pt = ({
+  label: o,
+  leftElement: n,
+  onSelect: t,
+  shouldTruncateText: s,
+  type: r = "default",
+  variant: u,
+  ...c
+}) => {
+  const l = j(() => {
+    t && t(c.value);
+  }, [t, c.value]);
+  if (r === "submenu")
+    return /* @__PURE__ */ e.jsx(
+      It,
+      {
+        submenuTrigger: /* @__PURE__ */ e.jsxs(
+          gt,
+          {
+            className: "Menu__Item--Submenu",
+            "data-testid": "kibble-menu-item-submenu",
+            justifyContent: "space-between",
+            children: [
+              /* @__PURE__ */ e.jsx(
+                R,
+                {
+                  label: o,
+                  leftElement: n,
+                  shouldTruncateText: s,
+                  variant: u
+                }
+              ),
+              /* @__PURE__ */ e.jsx(te, { name: "chevronRight", size: "sm" })
+            ]
+          }
+        ),
+        ...c
+      }
+    );
+  if (r === "checkbox") {
+    const { checked: f, value: v, ...P } = c;
+    return /* @__PURE__ */ e.jsxs(
+      Mt,
+      {
+        className: "Menu__Item--Checkbox",
+        "data-testid": "kibble-menu-item-checkbox",
+        value: v,
+        checked: !!f,
+        onCheckedChange: l,
+        closeOnSelect: c.closeOnSelect || !1,
+        gap: 3,
+        ...P,
+        children: [
+          /* @__PURE__ */ e.jsx(Ke, { checked: !!f, size: "md" }),
+          /* @__PURE__ */ e.jsx(
+            R,
+            {
+              label: o,
+              leftElement: n,
+              shouldTruncateText: s,
+              variant: u
+            }
+          )
+        ]
+      }
+    );
+  }
+  if (r === "default") {
+    const { selected: f, value: v, ...P } = c;
+    return /* @__PURE__ */ e.jsx(
+      xt,
+      {
+        className: "Menu__Item--Default",
+        "data-testid": "kibble-menu-item-default",
+        value: v,
+        onSelect: l,
+        ...f && { bgColor: "background.secondaryAlpha.hover" },
+        ...P,
+        children: /* @__PURE__ */ e.jsx(
+          R,
+          {
+            label: o,
+            leftElement: n,
+            shouldTruncateText: s,
+            variant: f ? "info" : u
+          }
+        )
+      }
+    );
+  }
+  return /* @__PURE__ */ e.jsx(e.Fragment, {});
+}, R = ({
+  label: o,
+  leftElement: n,
+  shouldTruncateText: t,
+  variant: s
+}) => /* @__PURE__ */ e.jsxs(w, { className: "Menu__ItemLabel", alignItems: "center", gap: 3, children: [
+  n,
+  typeof o == "string" ? /* @__PURE__ */ e.jsx(L, { size: "sm", truncated: t, variant: s, children: o }) : o
+] }), Y = ({
+  groupName: o,
+  hasSelectedItems: n = !1,
+  onToggle: t
+}) => {
+  const s = !!o;
+  return /* @__PURE__ */ e.jsx(
+    A,
+    {
+      className: "Menu__ToggleButtons",
+      "data-testid": "kibble-menu-toggle-buttons",
+      ...s ? { textAlign: "right", w: "50%" } : { mt: 2 },
+      children: s ? /* @__PURE__ */ e.jsx(e.Fragment, { children: n ? /* @__PURE__ */ e.jsx(
+        ee,
+        {
+          hasSelectedItems: n,
+          groupName: o,
+          onToggle: t
+        }
+      ) : /* @__PURE__ */ e.jsx(Z, { groupName: o, onToggle: t }) }) : /* @__PURE__ */ e.jsxs(w, { justifyContent: "space-between", children: [
+        /* @__PURE__ */ e.jsx(Z, { groupName: o, onToggle: t }),
+        /* @__PURE__ */ e.jsx(
+          ee,
+          {
+            hasSelectedItems: n,
+            groupName: o,
+            onToggle: t
+          }
+        )
+      ] })
+    }
+  );
+}, Z = ({
+  groupName: o,
+  onToggle: n
+}) => /* @__PURE__ */ e.jsx(
+  F,
+  {
+    variant: "ghost",
+    size: "xs",
+    onClick: () => n({ groupName: o, clear: !1 }),
+    children: "Select All"
+  }
+), ee = ({
+  hasSelectedItems: o,
+  groupName: n,
+  onToggle: t
+}) => /* @__PURE__ */ e.jsx(
+  F,
+  {
+    variant: "ghostNeutral",
+    iconName: "arrowCircle",
+    size: "xs",
+    disabled: !o,
+    onClick: () => t({ groupName: n, clear: !0 }),
+    children: "Clear All"
+  }
+), It = ({
+  buttonProps: o,
+  listProps: n,
+  portalled: t = !1,
+  submenuTrigger: s,
+  ...r
+}) => {
+  const {
+    canSelectAll: u,
+    canSelectGroups: c,
+    emptyStateText: l = "No results found",
+    loading: f,
+    maxH: v = "480px",
+    menuItems: P = [],
+    minW: Ge = "240px",
+    onSearch: G,
+    onSelect: W,
+    onSelectAll: D,
+    searchable: E,
+    searchPlaceholder: Oe = "Search...",
+    shouldTruncateText: _e,
+    ...Re
+  } = n || {}, [$e, O] = X(""), [H, _] = X(P), K = y(() => {
+    const a = {};
+    return H?.forEach((i) => {
+      const h = i.groupLabel || "default", M = i.type === "checkbox" ? "checkbox" : "default";
+      a[h] || (a[h] = {}), a[h][M] || (a[h][M] = []), a[h][M].push(i);
+    }), a;
+  }, [H]), U = y(() => Object.entries(K), [K]), b = y(
+    () => P?.filter((a) => a.type === "checkbox") || [],
+    [P]
+  ), Be = y(() => (b?.filter((i) => i.checked) || []).map((i) => i.value), [b]), I = Ue({
+    defaultValue: Be
+  }), q = j(
+    (a) => {
+      const i = a.target.value;
+      if (O(i), G)
+        G(a);
+      else if (i === "" || !i)
+        _(P);
+      else {
+        const h = P.filter((M) => !!(typeof M.label == "string" ? M.label : M.valueText)?.toLowerCase().includes(i.toLowerCase()));
+        _(h);
+      }
+    },
+    [P, G]
+  ), J = j(
+    ({ groupName: a, clear: i }) => {
+      let h = [];
+      if (a) {
+        const M = b.filter((C) => C.groupLabel === a).map((C) => C.value);
+        h = i ? I.value.filter((C) => !M.includes(C)) : [...I.value, ...M];
+      } else
+        h = i ? [] : b.map((M) => M.value);
+      D?.(h), I.setValue(h);
+    },
+    [b, D, I]
+  ), Fe = j(
+    (a) => {
+      a.onSelect?.(a.value);
+      const i = I.value, h = I.isChecked(a.value);
+      W?.(
+        a.value,
+        h ? i.filter((M) => M !== a.value) : [...i, a.value]
+      ), a.type === "checkbox" && I.toggleValue(a.value);
+    },
+    [W, I]
+  ), Le = j(
+    (a) => {
+      a || (O(""), _(P));
+    },
+    [P]
+  );
+  return /* @__PURE__ */ e.jsxs(
+    ut,
+    {
+      ...r,
+      onOpenChange: (a) => {
+        Le(a.open), r.onOpenChange?.(a);
+      },
+      children: [
+        s || /* @__PURE__ */ e.jsx(
+          it,
+          {
+            asChild: !0,
+            className: "Menu__Trigger",
+            "data-testid": "kibble-menu-trigger",
+            children: /* @__PURE__ */ e.jsx(ft, { ...o })
+          }
+        ),
+        /* @__PURE__ */ e.jsx(Ze, { disabled: !t, children: /* @__PURE__ */ e.jsx(lt, { className: "Menu", "data-testid": "kibble-menu", children: /* @__PURE__ */ e.jsxs(
+          dt,
+          {
+            className: "Menu__Content",
+            "data-testid": "kibble-menu-content",
+            maxH: v,
+            minW: Ge,
+            ...Re,
+            children: [
+              (E || u) && /* @__PURE__ */ e.jsxs(
+                A,
+                {
+                  className: "Menu__Header",
+                  "data-testid": "kibble-menu-header",
+                  m: "0 12px 8px",
+                  children: [
+                    E && /* @__PURE__ */ e.jsx(
+                      Ee,
+                      {
+                        className: "Menu__SearchBar",
+                        "data-testid": "kibble-menu-search-bar",
+                        placeholder: Oe,
+                        onChange: q,
+                        size: "sm",
+                        value: $e,
+                        clearable: !0,
+                        onClear: () => {
+                          O(""), q({
+                            target: { value: "" }
+                          });
+                        },
+                        formControlStyle: { mt: 1 }
+                      }
+                    ),
+                    u && !!b.length && /* @__PURE__ */ e.jsx(
+                      Y,
+                      {
+                        onToggle: J,
+                        hasSelectedItems: !!I.value.length
+                      }
+                    )
+                  ]
+                }
+              ),
+              f ? /* @__PURE__ */ e.jsx(w, { justifyContent: "center", py: 5, children: /* @__PURE__ */ e.jsx(He, {}) }) : /* @__PURE__ */ e.jsx(A, { className: "Menu__List", "data-testid": "kibble-menu-list", children: U.length ? /* @__PURE__ */ e.jsx(e.Fragment, { children: U.map(([a, i]) => {
+                const h = a === "default", M = Object.keys(i), C = h ? De.Fragment : pt, Ve = i.checkbox?.map(
+                  (N) => N.value
+                )?.some(
+                  (N) => I.value.includes(N)
+                );
+                return /* @__PURE__ */ e.jsxs(C, { children: [
+                  !h && /* @__PURE__ */ e.jsx(ht, { children: /* @__PURE__ */ e.jsxs(
+                    w,
+                    {
+                      alignItems: "center",
+                      justifyContent: "space-between",
+                      children: [
+                        a,
+                        c && M.includes("checkbox") && /* @__PURE__ */ e.jsx(
+                          Y,
+                          {
+                            groupName: a,
+                            onToggle: J,
+                            hasSelectedItems: Ve
+                          }
+                        )
+                      ]
+                    }
+                  ) }),
+                  Object.entries(i).map(
+                    ([N, ze]) => ze.map((T, We) => /* @__PURE__ */ e.jsx(
+                      Pt,
+                      {
+                        ...T,
+                        shouldTruncateText: _e,
+                        ...T.type === "checkbox" && {
+                          checked: I.isChecked(T.value)
+                        },
+                        onSelect: () => Fe(T)
+                      },
+                      `menu-item-${a}-${N}-${We}`
+                    ))
+                  )
+                ] }, a);
+              }) }) : /* @__PURE__ */ e.jsx(e.Fragment, { children: /* @__PURE__ */ e.jsx(A, { textAlign: "center", p: 3, children: /* @__PURE__ */ e.jsx(L, { size: "sm", variant: "subtle", children: l }) }) }) })
+            ]
+          }
+        ) }) })
+      ]
+    }
+  );
+};
+export {
+  It as M
+};
+//# sourceMappingURL=menu.component-B5OYYpa8.js.map