@ck-ui/component-library 0.1.5 → 0.3.0

package/dist/IconSlot-CFKmSU2_.js

@@ -0,0 +1,33 @@
+import { jsx as r } from "react/jsx-runtime";
+import './assets/IconSlot-CLpdZgmb.css';const l = "_large_1efmj_41", c = "_medium_1efmj_50", n = "_small_1efmj_60", s = "_primary_1efmj_94", i = "_error_1efmj_108", a = "_secondary_1efmj_118", t = "_hyperlink_1efmj_140", d = "_combo_1efmj_164", e = {
+  "ckds-button": "_ckds-button_1efmj_1",
+  large: l,
+  medium: c,
+  small: n,
+  "icon-slot": "_icon-slot_1efmj_70",
+  "icon-slot--small": "_icon-slot--small_1efmj_81",
+  "icon-slot--medium": "_icon-slot--medium_1efmj_85",
+  "icon-slot--large": "_icon-slot--large_1efmj_89",
+  primary: s,
+  error: i,
+  secondary: a,
+  hyperlink: t,
+  combo: d,
+  "combo-divider": "_combo-divider_1efmj_186",
+  "combo-label-area": "_combo-label-area_1efmj_190",
+  "combo-label-area-with-divider": "_combo-label-area-with-divider_1efmj_195",
+  "combo-icon-area": "_combo-icon-area_1efmj_206",
+  "icon-only": "_icon-only_1efmj_213"
+};
+function j({
+  icon: o,
+  size: _
+}) {
+  if (!o) return null;
+  const m = e[`icon-slot--${_}`] ?? "";
+  return /* @__PURE__ */ r("span", { className: `${e["icon-slot"]} ${m}`, "aria-hidden": "true", children: o });
+}
+export {
+  j as I,
+  e as s
+};

package/dist/MenuItem-DlaRT10y.js

@@ -0,0 +1,139 @@
+import { jsx as o, jsxs as C } from "react/jsx-runtime";
+import { useState as p, useRef as b, useCallback as D, useEffect as K } from "react";
+import { s as t } from "./styles.module-B5fY7mP8.js";
+import { mergeClasses as I } from "./utils/mergeClasses.js";
+import { S as P } from "./chevron-down-Cm9R64Fe.js";
+import { Tooltip as j } from "./components/Tooltip/index.js";
+import { computeSubmenuPosition as w } from "./components/MenuOptions/_utils/computeSubmenuPosition.js";
+import { getMenuItemActiveState as H } from "./components/MenuOptions/_utils/getMenuItemActiveState.js";
+import { getIconStrokeColor as L } from "./components/MenuOptions/_utils/getIconStrokeColor.js";
+function W({
+  parentKey: e,
+  items: u,
+  position: n,
+  selectedKey: c,
+  onSelect: f,
+  onClose: r
+}) {
+  return /* @__PURE__ */ o(
+    "div",
+    {
+      className: t["ckds-submenu-panel"],
+      style: {
+        top: n.top,
+        ...n.right !== void 0 ? { right: n.right, left: "auto" } : { left: n.left, right: "auto" }
+      },
+      children: u.map((a) => {
+        const i = `${e}__${a.key}`;
+        return /* @__PURE__ */ o(
+          _,
+          {
+            item: { ...a, key: i },
+            onClose: r,
+            selectedKey: c,
+            onSelect: f,
+            activeSubmenuKey: void 0,
+            onSubmenuActivate: void 0
+          },
+          i
+        );
+      })
+    }
+  );
+}
+function _({
+  item: e,
+  onClose: u,
+  selectedKey: n,
+  onSelect: c,
+  activeSubmenuKey: f,
+  onSubmenuActivate: r
+}) {
+  const [a, i] = p(!1), [M, N] = p({ top: 0, left: 0 }), [T, k] = p(!1), h = b(null), m = b(null), v = b(null), l = !!e.subItems?.length, d = f === e.key, g = H(e, n, d), y = D(() => {
+    h.current && (N(
+      w(
+        h.current.getBoundingClientRect(),
+        e.subItems?.length ?? 0
+      )
+    ), r?.(e.key));
+  }, [e.key, e.subItems?.length, r]), R = () => {
+    e.disabled || (k(!0), l ? m.current = setTimeout(y, 80) : r?.(""));
+  }, x = () => {
+    m.current && (clearTimeout(m.current), m.current = null), k(!1);
+  }, S = () => {
+    if (!e.disabled) {
+      if (l) {
+        d ? r?.("") : y();
+        return;
+      }
+      c?.(e.key), e.onClick?.(e), u();
+    }
+  };
+  K(() => {
+    const s = v.current;
+    s && i(s.scrollWidth > s.clientWidth);
+  }, [e.label]);
+  const E = L(
+    g,
+    T,
+    e.activeColor,
+    e.defaultColor
+  );
+  return /* @__PURE__ */ C(
+    "div",
+    {
+      ref: h,
+      tabIndex: e.disabled ? -1 : 0,
+      className: I(
+        "ckds-body-sm-med",
+        t["ckds-menu-item"],
+        e.disabled && t["menu-item-disabled"],
+        g && t["menu-item-active"]
+      ),
+      onMouseEnter: R,
+      onMouseLeave: x,
+      onClick: S,
+      onKeyDown: (s) => {
+        (s.key === "Enter" || s.key === " ") && (s.preventDefault(), S());
+      },
+      children: [
+        e.icon && /* @__PURE__ */ o(
+          "span",
+          {
+            className: t["menu-item-icon"],
+            style: { "--icon-stroke": E },
+            children: e.icon
+          }
+        ),
+        /* @__PURE__ */ o(j, { title: a ? e.label : "", placement: "top", children: /* @__PURE__ */ o("span", { ref: v, className: t["menu-item-label"], children: e.label }) }),
+        (e.rightSlot || l) && /* @__PURE__ */ C("span", { className: t["menu-item-right"], children: [
+          e.rightSlot,
+          l && /* @__PURE__ */ o(
+            P,
+            {
+              className: I(
+                t["menu-item-chevron"],
+                d && t["menu-item-chevron-active"]
+              )
+            }
+          )
+        ] }),
+        l && d && /* @__PURE__ */ o(
+          W,
+          {
+            parentKey: e.key,
+            items: e.subItems,
+            position: M,
+            selectedKey: n,
+            onSelect: c,
+            onClose: u
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  _ as M,
+  W as S
+};