@ck-ui/component-library 0.2.0 → 0.3.0

package/dist/components/GroupedSingleSelect/_helpers/OptionRow.js

@@ -1,30 +1,40 @@
-import { jsxs as e, jsx as i } from "react/jsx-runtime";
-import { memo as c, useCallback as l } from "react";
+import { jsxs as c, jsx as i } from "react/jsx-runtime";
+import { memo as l, useCallback as p } from "react";
 import { s as r } from "../../../styles.module-DGDgpLAB.js";
-import { RadioButton as p } from "../../RadioButton/index.js";
-const C = c(function({
+import { RadioButton as d } from "../../RadioButton/index.js";
+import { mergeClasses as m } from "../../../utils/mergeClasses.js";
+const h = l(function({
   value: s,
   label: o,
-  checked: n,
+  checked: e,
   onToggle: t,
-  classNames: m
+  classNames: n
 }) {
-  const a = l(
+  const a = p(
     () => t(s, o),
     [s, o, t]
   );
-  return /* @__PURE__ */ e(
+  return /* @__PURE__ */ c(
     "div",
     {
-      className: `${r["option-row"]} ${m?.optionRowClass ?? ""}`,
+      className: m(
+        r["option-row"],
+        n?.optionRowClass ?? ""
+      ),
       onClick: a,
       children: [
-        /* @__PURE__ */ i(p, { selected: n, radioSize: "small" }),
-        /* @__PURE__ */ i("span", { className: `ckds-body-sm-reg ${r["option-label"]}`, children: o })
+        /* @__PURE__ */ i(d, { selected: e, radioSize: "small" }),
+        /* @__PURE__ */ i(
+          "span",
+          {
+            className: m("ckds-body-sm-reg", r["option-label"]),
+            children: o
+          }
+        )
       ]
     }
   );
 });
 export {
-  C as default
+  h as default
 };

package/dist/components/GroupedSingleSelect/_helpers/OptionsList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"OptionsList.d.ts","sourceRoot":"","sources":["../../../../lib/components/GroupedSingleSelect/_helpers/OptionsList.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAEvD,QAAA,MAAM,WAAW,GAAI,qDAKlB,gBAAgB,4CA6BlB,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"OptionsList.d.ts","sourceRoot":"","sources":["../../../../lib/components/GroupedSingleSelect/_helpers/OptionsList.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAGvD,QAAA,MAAM,WAAW,GAAI,qDAKlB,gBAAgB,4CAuClB,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/dist/components/GroupedSingleSelect/_helpers/OptionsList.js

@@ -1,44 +1,55 @@
-import { jsx as a, jsxs as t } from "react/jsx-runtime";
-import { s as e } from "../../../styles.module-DGDgpLAB.js";
+import { jsx as e, jsxs as m } from "react/jsx-runtime";
+import { s as a } from "../../../styles.module-DGDgpLAB.js";
 import c from "./OptionRow.js";
-const u = ({
+import { mergeClasses as o } from "../../../utils/mergeClasses.js";
+const f = ({
   filteredGroups: i,
-  selected: o,
-  onToggle: p,
-  classNames: l
-}) => /* @__PURE__ */ a(
+  selected: p,
+  onToggle: d,
+  classNames: r
+}) => /* @__PURE__ */ e(
   "div",
   {
-    className: `${e["ckds-options-list"]} ${l?.optionsListWrapperClass ?? ""}`,
-    children: i?.map((s, d) => /* @__PURE__ */ t("div", { className: e["group-wrapper"], children: [
-      d > 0 && /* @__PURE__ */ a("div", { className: e["group-divider"] }),
-      /* @__PURE__ */ a(
+    className: o(
+      a["ckds-options-list"],
+      r?.optionsListWrapperClass ?? ""
+    ),
+    children: i?.map((l, t) => /* @__PURE__ */ m("div", { className: a["group-wrapper"], children: [
+      t > 0 && /* @__PURE__ */ e("div", { className: a["group-divider"] }),
+      /* @__PURE__ */ e(
         "div",
         {
-          className: `ckds-cap-med ${e["group-label"]} ${l?.groupLabelClass ?? ""}`,
-          children: s?.groupLabel
+          className: o(
+            "ckds-cap-med",
+            a["group-label"],
+            r?.groupLabelClass ?? ""
+          ),
+          children: l?.groupLabel
         }
       ),
-      /* @__PURE__ */ a(
+      /* @__PURE__ */ e(
         "div",
         {
-          className: `${e["option-row-wrapper"]} ${l?.optionRowWrapperClass ?? ""}`,
-          children: s?.options?.map((r) => /* @__PURE__ */ a(
+          className: o(
+            a["option-row-wrapper"],
+            r?.optionRowWrapperClass ?? ""
+          ),
+          children: l?.options?.map((s) => /* @__PURE__ */ e(
             c,
             {
-              value: r?.value,
-              label: r?.label,
-              checked: o?.value === r?.value,
-              onToggle: p,
-              classNames: l
+              value: s?.value,
+              label: s?.label,
+              checked: p?.value === s?.value,
+              onToggle: d,
+              classNames: r
             },
-            r?.value
+            s?.value
           ))
         }
       )
-    ] }, s?.groupLabel))
+    ] }, l?.groupLabel))
   }
 );
 export {
-  u as default
+  f as default
 };

package/dist/components/GroupedSingleSelect/_helpers/TriggerButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TriggerButton.d.ts","sourceRoot":"","sources":["../../../../lib/components/GroupedSingleSelect/_helpers/TriggerButton.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,gBAAgB,CAAC;AAEzD,QAAA,MAAM,aAAa,GAAI,4DAMpB,kBAAkB,4CAmDpB,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"TriggerButton.d.ts","sourceRoot":"","sources":["../../../../lib/components/GroupedSingleSelect/_helpers/TriggerButton.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,gBAAgB,CAAC;AAGzD,QAAA,MAAM,aAAa,GAAI,4DAMpB,kBAAkB,4CAoEpB,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/dist/components/GroupedSingleSelect/_helpers/TriggerButton.js

@@ -1,51 +1,69 @@
-import { jsxs as m, jsx as r } from "react/jsx-runtime";
+import { jsxs as p, jsx as r } from "react/jsx-runtime";
 import { s as e } from "../../../styles.module-DGDgpLAB.js";
-import { Tooltip as p } from "../../Tooltip/index.js";
-import { S as f } from "../../../chevron-down-Cm9R64Fe.js";
-import { useRef as h, useState as u, useLayoutEffect as g } from "react";
-const N = ({
-  open: t,
+import { Tooltip as f } from "../../Tooltip/index.js";
+import { S as h } from "../../../chevron-down-Cm9R64Fe.js";
+import { useRef as g, useState as u, useLayoutEffect as b } from "react";
+import { mergeClasses as l } from "../../../utils/mergeClasses.js";
+const x = ({
+  open: a,
   selected: s,
-  placeholder: n,
+  placeholder: i,
   onToggleOpen: c,
-  classNames: a
+  classNames: n
 }) => {
-  const l = h(null), [i, d] = u(!1);
-  return g(() => {
-    const o = l.current;
-    o && d(o?.scrollWidth > o?.clientWidth);
-  }, [s?.label]), /* @__PURE__ */ m(
+  const o = g(null), [m, d] = u(!1);
+  return b(() => {
+    const t = o.current;
+    t && d(t?.scrollWidth > t?.clientWidth);
+  }, [s?.label]), /* @__PURE__ */ p(
     "button",
     {
-      className: `${e.trigger} ${t ? e["trigger-open"] : ""} ${a?.dropdownOpenerWrapperClass ?? ""}`,
+      className: l(
+        e.trigger,
+        a ? e["trigger-open"] : "",
+        n?.dropdownOpenerWrapperClass ?? ""
+      ),
       onClick: c,
       type: "button",
       children: [
-        s ? i ? /* @__PURE__ */ r(p, { title: s?.label, placement: "bottom", children: /* @__PURE__ */ r(
+        s ? m ? /* @__PURE__ */ r(f, { title: s?.label, placement: "bottom", children: /* @__PURE__ */ r(
           "span",
           {
-            ref: l,
-            className: `ckds-body-sm-reg ${e["selected-value"]}`,
+            ref: o,
+            className: l(
+              "ckds-body-sm-reg",
+              e["selected-value"]
+            ),
             children: s?.label
           }
         ) }) : /* @__PURE__ */ r(
           "span",
           {
-            ref: l,
-            className: `ckds-body-sm-reg ${e["selected-value"]}`,
+            ref: o,
+            className: l(
+              "ckds-body-sm-reg",
+              e["selected-value"]
+            ),
             children: s?.label
           }
         ) : /* @__PURE__ */ r(
           "span",
           {
-            className: `ckds-body-sm-reg ${e.placeholder} ${a?.placeholderClass ?? ""}`,
-            children: n
+            className: l(
+              "ckds-body-sm-reg",
+              e.placeholder,
+              n?.placeholderClass ?? ""
+            ),
+            children: i
           }
         ),
         /* @__PURE__ */ r("div", { className: e["trigger-icons"], children: /* @__PURE__ */ r(
-          f,
+          h,
           {
-            className: `${e.chevron} ${t ? e["chevron-up"] : ""}`,
+            className: l(
+              e.chevron,
+              a ? e["chevron-up"] : ""
+            ),
             width: "14",
             height: "14"
           }
@@ -55,5 +73,5 @@ const N = ({
   );
 };
 export {
-  N as default
+  x as default
 };

package/dist/components/GroupedSingleSelect/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../lib/components/GroupedSingleSelect/index.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,eAAe,CAAC;AAC9D,YAAY,EACV,iBAAiB,EACjB,wBAAwB,GACzB,MAAM,eAAe,CAAC;AAGvB,wBAAgB,mBAAmB,CAAC,EAClC,KAAK,EACL,UAAU,EACV,QAAQ,EACR,WAA6B,EAC7B,iBAA4B,EAC5B,MAAM,EACN,eAAe,EACf,OAAO,EACP,OAAO,EACP,UAAe,GAChB,EAAE,wBAAwB,2CAuI1B"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../lib/components/GroupedSingleSelect/index.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,eAAe,CAAC;AAC9D,YAAY,EACV,iBAAiB,EACjB,wBAAwB,GACzB,MAAM,eAAe,CAAC;AAIvB,wBAAgB,mBAAmB,CAAC,EAClC,KAAK,EACL,UAAU,EACV,QAAQ,EACR,WAA6B,EAC7B,iBAA4B,EAC5B,MAAM,EACN,eAAe,EACf,OAAO,EACP,OAAO,EACP,UAAe,GAChB,EAAE,wBAAwB,2CAgJ1B"}

package/dist/components/GroupedSingleSelect/index.js

@@ -1,120 +1,130 @@
 import { jsxs as d, jsx as l } from "react/jsx-runtime";
-import { useState as m, useRef as z, useEffect as A, useMemo as B, useCallback as t } from "react";
+import { useState as m, useRef as B, useEffect as F, useMemo as M, useCallback as t } from "react";
 import { s as n } from "../../styles.module-DGDgpLAB.js";
-import { Search as F } from "../Search/index.js";
-import M from "./_helpers/TriggerButton.js";
-import W from "./_helpers/OptionsList.js";
-import H from "./_helpers/DropdownFooter.js";
-import { filterSeachedGroups as J } from "./_utils/filterSeachedGroups.js";
-import { getDefaultSelected as K } from "./_utils/getDefaultSelected.js";
-import { S as P } from "../../info-icon-ooYw3va_.js";
-function le({
-  label: C,
-  helperText: x,
-  required: y,
-  placeholder: L = "Choose option",
-  searchPlaceholder: D = "Search",
+import { Search as W } from "../Search/index.js";
+import H from "./_helpers/TriggerButton.js";
+import J from "./_helpers/OptionsList.js";
+import K from "./_helpers/DropdownFooter.js";
+import { filterSeachedGroups as P } from "./_utils/filterSeachedGroups.js";
+import { getDefaultSelected as U } from "./_utils/getDefaultSelected.js";
+import { S as V } from "../../info-icon-ooYw3va_.js";
+import { mergeClasses as x } from "../../utils/mergeClasses.js";
+function ae({
+  label: v,
+  helperText: y,
+  required: L,
+  placeholder: D = "Choose option",
+  searchPlaceholder: k = "Search",
   groups: a,
-  defaultSelected: $,
+  defaultSelected: N,
   onApply: h,
   onClear: S,
   classNames: i = {}
 }) {
-  const { labelWrapperClass: k, helperClass: N } = i, [f, s] = m(!1), [p, o] = m(""), b = () => K(a, $), [u, w] = m(b), [r, g] = m(b), v = z(null);
-  A(() => {
+  const { labelWrapperClass: O, helperClass: T } = i, [f, s] = m(!1), [p, o] = m(""), b = () => U(a, N), [u, w] = m(b), [r, g] = m(b), C = B(null);
+  F(() => {
     const e = (c) => {
-      v?.current && !v?.current?.contains(c.target) && (s(!1), o(""));
+      C?.current && !C?.current?.contains(c.target) && (s(!1), o(""));
     };
     return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
   }, []);
-  const O = B(
-    () => J(a, p),
+  const E = M(
+    () => P(a, p),
     [a, p]
-  ), T = t((e, c) => {
+  ), G = t((e, c) => {
     g({ value: e, label: c });
-  }, []), E = t(() => {
+  }, []), j = t(() => {
     S?.(), g(null);
-  }, [S]), G = t(() => {
+  }, [S]), I = t(() => {
     if (!r) {
       h({ value: "", label: "", groupLabel: "" }), w(r), s(!1), o("");
       return;
     }
     const e = a?.find(
-      (c) => c?.options?.some((q) => q?.value === r?.value)
+      (c) => c?.options?.some((A) => A?.value === r?.value)
     );
     h({ ...r, groupLabel: e?.groupLabel ?? "" }), w(r), s(!1), o("");
-  }, [a, r, h]), j = t(() => {
+  }, [a, r, h]), Q = t(() => {
     o(""), g(u), s(!1);
-  }, [u]), I = t(() => {
+  }, [u]), R = t(() => {
     s((e) => !e), o("");
-  }, []), Q = t((e) => {
+  }, []), q = t((e) => {
     o(e);
-  }, []), R = t(() => {
+  }, []), z = t(() => {
     o("");
   }, []);
-  return /* @__PURE__ */ d("div", { className: n.wrapper, ref: v, children: [
-    C && /* @__PURE__ */ d(
+  return /* @__PURE__ */ d("div", { className: n.wrapper, ref: C, children: [
+    v && /* @__PURE__ */ d(
       "span",
       {
-        className: `ckds-body-xs-med ${n["label-wrapper"]} ${k ?? ""}`,
+        className: x(
+          "ckds-body-xs-med",
+          n["label-wrapper"],
+          O ?? ""
+        ),
         children: [
-          C,
-          y && /* @__PURE__ */ l("span", { className: n.required, children: " *" })
+          v,
+          L && /* @__PURE__ */ l("span", { className: n.required, children: " *" })
         ]
       }
     ),
     /* @__PURE__ */ d("div", { children: [
       /* @__PURE__ */ l(
-        M,
+        H,
         {
           open: f,
           selected: u,
-          placeholder: L,
-          onToggleOpen: I,
+          placeholder: D,
+          onToggleOpen: R,
           classNames: i
         }
       ),
       /* @__PURE__ */ d(
         "div",
         {
-          className: `ckds-body-xs-reg ${n["helper-text"]} ${f ? n["helper-hide"] : ""} ${N ?? ""}`,
+          className: x(
+            "ckds-body-xs-reg",
+            n["helper-text"],
+            f ? n["helper-hide"] : "",
+            T ?? ""
+          ),
           children: [
-            /* @__PURE__ */ l(P, { width: "12", height: "12" }),
+            /* @__PURE__ */ l(V, { width: "12", height: "12" }),
             " ",
-            x
+            y
           ]
         }
       )
     ] }),
     f && /* @__PURE__ */ d("div", { className: n.dropdown, children: [
       /* @__PURE__ */ l(
-        F,
+        W,
         {
           size: "medium",
           value: p,
-          placeholder: D,
-          onChange: Q,
-          onClear: R,
+          placeholder: k,
+          onChange: q,
+          onClear: z,
           wrapperClassName: "",
           inputClassName: ""
         }
       ),
       /* @__PURE__ */ l(
-        W,
+        J,
         {
-          filteredGroups: O,
+          filteredGroups: E,
           selected: r,
           searchQuery: p,
-          onToggle: T,
+          onToggle: G,
           classNames: i
         }
       ),
       /* @__PURE__ */ l(
-        H,
+        K,
         {
-          onClear: E,
-          onCancel: j,
-          onApply: G,
+          onClear: j,
+          onCancel: Q,
+          onApply: I,
           classNames: i,
           isClearDisabled: !r?.value,
           isApplyDisabled: u?.value !== r?.value
@@ -124,5 +134,5 @@ function le({
   ] });
 }
 export {
-  le as GroupedSingleSelect
+  ae as GroupedSingleSelect
 };

package/dist/components/MenuOptions/_types/menuOptions.types.d.ts

@@ -22,21 +22,15 @@ export interface MenuOptionsProps {
     onClose: () => void;
     btnRef?: HTMLElement | null;
     parentRef?: HTMLElement | null;
-    className?: string;
-    /** Controlled: key of the currently selected menu or submenu item */
+    classname?: string;
     selectedKey?: string;
-    /** Called when a (non-submenu-parent) item is clicked */
     onSelect?: (key: string) => void;
-    /** Radio category values — Record<categoryKey, selectedItemKey> */
     selectedRadioValues?: Record<string, string>;
     onRadioChange?: (categoryKey: string, itemKey: string) => void;
-    /** Key of the submenu that is currently open (hover-driven). Lift to parent if needed. */
     activeSubmenuKey?: string;
     setActiveSubmenuKey?: (key: string) => void;
-    /** Renders a search input at the top of the menu that filters items by label */
     searchable?: boolean;
     searchPlaceholder?: string;
-    /** Debounce delay in ms for the search input. Defaults to 0. */
     searchDebounceMs?: number;
 }
 export interface MenuItemProps {

package/dist/components/MenuOptions/_types/menuOptions.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"menuOptions.types.d.ts","sourceRoot":"","sources":["../../../../lib/components/MenuOptions/_types/menuOptions.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,WAAW,cAAc;IAC7B,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,cAAc,EAAE,CAAC;IAC5B,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,cAAc,KAAK,IAAI,CAAC;CAC1C;AAED,MAAM,WAAW,YAAY;IAC3B,IAAI,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;IAC3B,KAAK,EAAE,cAAc,EAAE,CAAC;CACzB;AAED,MAAM,MAAM,kBAAkB,GAAG,MAAM,CAAC,MAAM,EAAE,YAAY,CAAC,CAAC;AAE9D,MAAM,WAAW,gBAAgB;IAC/B,UAAU,EAAE,kBAAkB,CAAC;IAC/B,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,MAAM,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC5B,SAAS,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qEAAqE;IACrE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,yDAAyD;IACzD,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,mEAAmE;IACnE,mBAAmB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC7C,aAAa,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/D,0FAA0F;IAC1F,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,mBAAmB,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,gFAAgF;IAChF,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,gEAAgE;IAChE,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAED,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,cAAc,CAAC;IACrB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,iBAAiB,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;CAC3C;AAED,MAAM,WAAW,kBAAkB;IACjC,IAAI,EAAE,cAAc,CAAC;IACrB,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;CACjC"}
+{"version":3,"file":"menuOptions.types.d.ts","sourceRoot":"","sources":["../../../../lib/components/MenuOptions/_types/menuOptions.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,WAAW,cAAc;IAC7B,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,cAAc,EAAE,CAAC;IAC5B,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,cAAc,KAAK,IAAI,CAAC;CAC1C;AAED,MAAM,WAAW,YAAY;IAC3B,IAAI,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;IAC3B,KAAK,EAAE,cAAc,EAAE,CAAC;CACzB;AAED,MAAM,MAAM,kBAAkB,GAAG,MAAM,CAAC,MAAM,EAAE,YAAY,CAAC,CAAC;AAE9D,MAAM,WAAW,gBAAgB;IAC/B,UAAU,EAAE,kBAAkB,CAAC;IAC/B,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,MAAM,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC5B,SAAS,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,mBAAmB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC7C,aAAa,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/D,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,mBAAmB,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAED,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,cAAc,CAAC;IACrB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,iBAAiB,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;CAC3C;AAED,MAAM,WAAW,kBAAkB;IACjC,IAAI,EAAE,cAAc,CAAC;IACrB,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;CACjC"}

package/dist/components/MenuOptions/_utils/computeMenuPosition.js

@@ -4,7 +4,7 @@ function G(i) {
 function g(i, r, c) {
   const n = i.getBoundingClientRect(), o = G(c), e = Math.min(
     r * 32 + 16,
-    o.height - 8 * 2
+    o.height - 16
   );
   let t = n.bottom + 4;
   return t + e > o.bottom - 8 && (t = n.top - e - 4), t < o.top + 8 && (t = o.top + 8), n.left + 238 > o.right - 8 ? { top: t, right: window.innerWidth - n.right } : { top: t, left: n.left };

package/dist/components/MenuOptions/_utils/computeSubmenuPosition.js

@@ -1,5 +1,5 @@
 function N(t, i) {
-  const E = window.innerWidth, o = window.innerHeight, G = Math.min(i * 32 + 16, o - 8 * 2);
+  const E = window.innerWidth, o = window.innerHeight, G = Math.min(i * 32 + 16, o - 16);
   let n = t.top;
   return n + G > o - 8 && (n = o - G - 8), n < 8 && (n = 8), t.right + 12 + 238 > E - 8 ? { top: n, right: E - t.left + 12 } : { top: n, left: t.right + 12 };
 }

package/dist/components/MenuOptions/index.d.ts

@@ -1,5 +1,5 @@
 import { MenuOptionsProps } from './_types/menuOptions.types';
 export type { MenuOptionsProps, MenuOptionItem, MenuCategoriesData, MenuCategory, } from './_types/menuOptions.types';
 export { MenuOptionsWrapper } from './MenuOptionsWrapper';
-export declare function MenuOptions({ categories, open, onClose, btnRef, parentRef, className, selectedKey, onSelect, selectedRadioValues, onRadioChange, activeSubmenuKey, setActiveSubmenuKey, searchable, searchPlaceholder, searchDebounceMs, }: MenuOptionsProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function MenuOptions({ categories, open, onClose, btnRef, parentRef, classname, selectedKey, onSelect, selectedRadioValues, onRadioChange, activeSubmenuKey, setActiveSubmenuKey, searchable, searchPlaceholder, searchDebounceMs, }: MenuOptionsProps): import("react/jsx-runtime").JSX.Element | null;
 //# sourceMappingURL=index.d.ts.map

package/dist/components/MenuOptions/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../lib/components/MenuOptions/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,4BAA4B,CAAC;AAQnE,YAAY,EACV,gBAAgB,EAChB,cAAc,EACd,kBAAkB,EAClB,YAAY,GACb,MAAM,4BAA4B,CAAC;AAEpC,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAE1D,wBAAgB,WAAW,CAAC,EAC1B,UAAU,EACV,IAAI,EACJ,OAAO,EACP,MAAM,EACN,SAAS,EACT,SAAS,EACT,WAAW,EACX,QAAQ,EACR,mBAAmB,EACnB,aAAa,EACb,gBAAgB,EAChB,mBAAmB,EACnB,UAAU,EACV,iBAA4B,EAC5B,gBAAsB,GACvB,EAAE,gBAAgB,kDAgJlB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../lib/components/MenuOptions/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,4BAA4B,CAAC;AAQnE,YAAY,EACV,gBAAgB,EAChB,cAAc,EACd,kBAAkB,EAClB,YAAY,GACb,MAAM,4BAA4B,CAAC;AAEpC,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAE1D,wBAAgB,WAAW,CAAC,EAC1B,UAAU,EACV,IAAI,EACJ,OAAO,EACP,MAAM,EACN,SAAS,EACT,SAAS,EACT,WAAW,EACX,QAAQ,EACR,mBAAmB,EACnB,aAAa,EACb,gBAAgB,EAChB,mBAAmB,EACnB,UAAU,EACV,iBAA4B,EAC5B,gBAAsB,GACvB,EAAE,gBAAgB,kDAkJlB"}

package/dist/components/MenuOptions/index.js

@@ -1,12 +1,12 @@
 import { jsxs as j, jsx as i } from "react/jsx-runtime";
-import { useRef as W, useState as v, useEffect as p, useCallback as $, useMemo as q } from "react";
+import { useRef as q, useState as v, useEffect as p, useCallback as B, useMemo as D } from "react";
 import { s as m } from "../../styles.module-B5fY7mP8.js";
-import { M as B } from "../../MenuItem-DlaRT10y.js";
-import { RadioMenuItem as D } from "./_helpers/RadioMenuItem.js";
-import { mergeClasses as G } from "../../utils/mergeClasses.js";
-import { Search as H } from "../Search/index.js";
-import { filterMenuCategories as J } from "./_utils/filterMenuCategories.js";
-import { computeMenuPosition as T } from "./_utils/computeMenuPosition.js";
+import { M as G } from "../../MenuItem-DlaRT10y.js";
+import { RadioMenuItem as H } from "./_helpers/RadioMenuItem.js";
+import { mergeClasses as x } from "../../utils/mergeClasses.js";
+import { Search as J } from "../Search/index.js";
+import { filterMenuCategories as T } from "./_utils/filterMenuCategories.js";
+import { computeMenuPosition as U } from "./_utils/computeMenuPosition.js";
 import { MenuOptionsWrapper as ne } from "./MenuOptionsWrapper.js";
 function ee({
   categories: a,
@@ -14,19 +14,19 @@ function ee({
   onClose: o,
   btnRef: u,
   parentRef: w,
-  className: x,
-  selectedKey: y,
-  onSelect: N,
-  selectedRadioValues: O,
-  onRadioChange: S,
-  activeSubmenuKey: z,
+  classname: y,
+  selectedKey: N,
+  onSelect: O,
+  selectedRadioValues: S,
+  onRadioChange: z,
+  activeSubmenuKey: I,
   setActiveSubmenuKey: l,
   searchable: c,
-  searchPlaceholder: I = "Search",
-  searchDebounceMs: P = 300
+  searchPlaceholder: P = "Search",
+  searchDebounceMs: Q = 300
 }) {
-  const h = W(null), [d, k] = v(null), [Q, C] = v(
-    O ?? {}
+  const h = q(null), [d, k] = v(null), [C, F] = v(
+    S ?? {}
   ), [f, E] = v("");
   p(() => {
     if (!r) return;
@@ -44,8 +44,8 @@ function ee({
   const g = Object.values(a).reduce(
     (e, t) => e + t.items.length,
     0
-  ), n = $(() => {
-    u && k(T(u, g, w));
+  ), n = B(() => {
+    u && k(U(u, g, w));
   }, [u, w, g]);
   p(() => {
     r ? (n(), l?.("")) : (k(null), E(""));
@@ -59,8 +59,8 @@ function ee({
       window.removeEventListener("scroll", n, !0), window.removeEventListener("resize", e);
     };
   }, [r, n, l]);
-  const M = q(
-    () => c ? J(a, f) : a,
+  const M = D(
+    () => c ? T(a, f) : a,
     [c, f, a]
   );
   return r ? /* @__PURE__ */ j(
@@ -68,7 +68,7 @@ function ee({
     {
       ref: h,
       tabIndex: -1,
-      className: G(m["ckds-menu-panel"], x),
+      className: x(m["ckds-menu-panel"], y),
       style: {
         top: d?.top,
         visibility: d ? "visible" : "hidden",
@@ -76,37 +76,43 @@ function ee({
       },
       children: [
         c && /* @__PURE__ */ i("div", { className: m["menu-search-wrapper"], children: /* @__PURE__ */ i(
-          H,
+          J,
           {
             value: f,
             onChange: E,
-            placeholder: I,
+            placeholder: P,
             size: "medium",
             autoFocus: !0,
-            debounceMs: P
+            debounceMs: Q
           }
         ) }),
-        c && f.trim() && Object.keys(M).length === 0 && /* @__PURE__ */ i("span", { className: `ckds-cap-reg ${m["menu-no-results"]}`, children: "0 Result" }),
-        Object.entries(M).map(([e, t], F) => /* @__PURE__ */ j("div", { className: m["menu-category"], children: [
-          F > 0 && /* @__PURE__ */ i("hr", { className: m["menu-divider"] }),
+        c && f.trim() && Object.keys(M).length === 0 && /* @__PURE__ */ i(
+          "span",
+          {
+            className: x("ckds-cap-reg", m["menu-no-results"]),
+            children: "0 Result"
+          }
+        ),
+        Object.entries(M).map(([e, t], R) => /* @__PURE__ */ j("div", { className: m["menu-category"], children: [
+          R > 0 && /* @__PURE__ */ i("hr", { className: m["menu-divider"] }),
           t.type === "radio" ? t.items.map((s) => /* @__PURE__ */ i(
-            D,
+            H,
             {
               item: s,
-              checked: Q[e] === s.key,
+              checked: C[e] === s.key,
               onSelect: (L) => {
-                C((R) => ({ ...R, [e]: L })), S?.(e, L);
+                F((W) => ({ ...W, [e]: L })), z?.(e, L);
               }
             },
             s.key
           )) : t.items.map((s) => /* @__PURE__ */ i(
-            B,
+            G,
             {
               item: s,
               onClose: o,
-              selectedKey: y,
-              onSelect: N,
-              activeSubmenuKey: z,
+              selectedKey: N,
+              onSelect: O,
+              activeSubmenuKey: I,
               onSubmenuActivate: l
             },
             s.key