@bioturing/components 0.20.0 → 0.20.2

package/dist/components/code-block/component.js

@@ -7,12 +7,12 @@ import { Highlight as J, themes as K } from "prism-react-renderer";
 import './style.css';/* empty css          */
 import { WithAntdTokens as Q } from "../utils/WithAntdTokens.js";
 import { Segmented as R } from "../segmented/component.js";
-import { ScrollArea as U } from "../scroll-area/component.js";
-import { reactNodeToString as V } from "../utils/reactToString.js";
-import { useControlledState as X } from "../hooks/useControlledState.js";
-import { useCls as Y } from "../utils/antdUtils.js";
-import { clsx as Z } from "../utils/cn.js";
-import { IconButton as H } from "../icon-button/component.js";
+import { reactNodeToString as U } from "../utils/reactToString.js";
+import { useControlledState as V } from "../hooks/useControlledState.js";
+import { useCls as X } from "../utils/antdUtils.js";
+import { clsx as Y } from "../utils/cn.js";
+import { IconButton as Z } from "../icon-button/component.js";
+import { ScrollArea as H } from "../scroll-area/component.js";
 const fo = ({
   code: u,
   children: s,
@@ -29,7 +29,7 @@ const fo = ({
   maxHeight: c,
   ...O
 }) => {
-  const [i, k] = X(
+  const [i, k] = V(
     x,
     T,
     v
@@ -50,7 +50,7 @@ const fo = ({
     k
   ]);
   const [L, a] = p(g), [M, b] = p(!1), D = () => {
-    const t = l || V(s);
+    const t = l || U(s);
     try {
       navigator.clipboard.writeText(t).then(() => {
         a(w), b(!0);
@@ -60,11 +60,11 @@ const fo = ({
     }
   }, E = () => {
     a(g), b(!1);
-  }, d = Y();
+  }, d = X();
   return /* @__PURE__ */ o(G, { theme: "dark", children: /* @__PURE__ */ _(
     Q,
     {
-      className: Z(d("code-block"), S, e == null ? void 0 : e.root),
+      className: Y(d("code-block"), S, e == null ? void 0 : e.root),
       ...O,
       children: [
         h && /* @__PURE__ */ o("div", { className: d("code-block-header", e == null ? void 0 : e.header), children: /* @__PURE__ */ o(
@@ -79,7 +79,7 @@ const fo = ({
           }
         ) }),
         /* @__PURE__ */ o("div", { className: d("code-block-copy"), children: /* @__PURE__ */ o(
-          H,
+          Z,
           {
             onClick: D,
             label: L,
@@ -94,7 +94,7 @@ const fo = ({
             style: {
               maxHeight: c && (typeof c == "number" ? `${c}px` : c)
             },
-            children: /* @__PURE__ */ o(U, { children: l ? /* @__PURE__ */ o(
+            children: /* @__PURE__ */ o(H, { children: l ? /* @__PURE__ */ o(
               J,
               {
                 language: A,

package/dist/components/dropdown-menu/component.js

@@ -1,190 +1,206 @@
 "use client";
-import { jsxs as g, jsx as t } from "react/jsx-runtime";
-import { Menu as l } from "@base-ui-components/react/menu";
-import { useCallback as M, useRef as F } from "react";
-import { useControlled as H } from "@base-ui-components/react/utils";
-import { Command as i } from "../cmdk/index.js";
+import { jsx as e, jsxs as g } from "react/jsx-runtime";
+import { useCallback as M, useRef as j, createElement as q } from "react";
+import { Menu as f } from "@base-ui-components/react/menu";
+import { useControlled as F } from "@base-ui-components/react/utils";
+import { Popover as H } from "@base-ui-components/react/popover";
+import { Command as u } from "../cmdk/index.js";
+import { PopupPanelSize as S } from "../popup-panel/constants.js";
 import './style.css';/* empty css          */
-import { Popover as J } from "@base-ui-components/react";
-import { PopupPanelSize as A } from "../popup-panel/constants.js";
-import { useCls as K, useAntdCssVarClassname as Q, parseAntdPlacement as W } from "../utils/antdUtils.js";
+import { useCls as J, useAntdCssVarClassname as K, parseAntdPlacement as Q } from "../utils/antdUtils.js";
 import { Input as X } from "../input/component.js";
-import { clsx as p } from "../utils/cn.js";
-const no = ({
-  children: j,
-  items: x,
-  placement: z,
-  openOnHover: B,
-  open: D,
-  onOpenChange: m,
-  className: R,
-  itemRender: w,
+import { ScrollArea as R } from "../scroll-area/component.js";
+import { DROPDOWN_COLLISION_AVOIDANCE as Y } from "../utils/constants.js";
+import { clsx as d } from "../utils/cn.js";
+const lo = ({
+  children: V,
+  items: _,
+  placement: x,
+  openOnHover: z,
+  open: B,
+  onOpenChange: v,
+  className: O,
+  itemRender: I,
   classNames: r,
-  size: y = "auto",
-  showSearch: f,
-  searchProps: C = {
+  size: C = "auto",
+  showSearch: i,
+  searchProps: L = {
     placeholder: "Search..."
   }
 }) => {
-  const [T, I] = H({
-    controlled: D,
+  const [T, P] = F({
+    controlled: B,
     default: !1,
     name: "open"
-  }), U = M(
+  }), m = M(
     (o) => {
-      I(o), m == null || m(o);
+      P(o), v == null || v(o);
     },
-    [I, m]
-  ), n = K(), G = Q(), L = W(z), V = F(null), v = x.reduce((o, e) => (o.length === 0 && e.type !== "header" && o.push({
+    [P, v]
+  ), n = J(), c = K(), k = Q(x), U = j(null), w = _.reduce((o, t) => (o.length === 0 && t.type !== "header" && o.push({
     label: null,
     items: []
-  }), e.type === "header" ? o.push({
-    label: e.title,
+  }), t.type === "header" ? o.push({
+    label: t.title,
     items: []
-  }) : (e.type === "item" || e.type === "divider") && o.length > 0 && o[o.length - 1].items.push(e), o), []), P = f ? i.Item : l.Item, k = f ? i.Separator : l.Separator, h = M(
-    (o, e, d) => o.type === "item" ? /* @__PURE__ */ g(
-      P,
-      {
-        className: p(n("dropdown-menu-item"), r == null ? void 0 : r.item),
-        disabled: o.disabled,
-        "data-danger": o.danger,
-        ref: o.ref,
-        onClick: o.onClick,
-        onMouseEnter: o.onMouseEnter,
-        onMouseLeave: o.onMouseLeave,
-        onMouseOver: o.onMouseOver,
-        onMouseOut: o.onMouseOut,
-        render: w ? (u) => w(o, u) : void 0,
-        children: [
-          o.icon && /* @__PURE__ */ t(
-            "span",
-            {
-              className: p(
-                n("dropdown-menu-item-icon"),
-                r == null ? void 0 : r.itemIcon
-              ),
-              children: o.icon
-            }
-          ),
-          /* @__PURE__ */ t("span", { children: o.label })
-        ]
-      },
-      e + "-" + d
-    ) : o.type === "divider" ? /* @__PURE__ */ t(
-      k,
-      {
-        className: p(
-          n("dropdown-menu-divider"),
-          r == null ? void 0 : r.separator
-        )
-      },
-      e + "-" + d
-    ) : null,
-    [n, r, w, P, k]
-  ), E = M(
-    (o, e) => /* @__PURE__ */ g(
-      l.Group,
+  }) : (t.type === "item" || t.type === "divider") && o.length > 0 && o[o.length - 1].items.push(t), o), []), G = i ? u.Separator : f.Separator, b = M(
+    (o, t, p) => {
+      const l = i ? u.Item : f.Item;
+      if (o.type === "item") {
+        const D = {
+          className: d(n("dropdown-menu-item"), r == null ? void 0 : r.item),
+          disabled: o.disabled,
+          "data-danger": o.danger,
+          ref: o.ref,
+          onClick: o.onClick,
+          onMouseEnter: o.onMouseEnter,
+          onMouseLeave: o.onMouseLeave,
+          onMouseOver: o.onMouseOver,
+          onMouseOut: o.onMouseOut,
+          onSelect: i ? () => {
+            const y = new MouseEvent("click", {
+              bubbles: !0,
+              cancelable: !0
+            });
+            o.onClick(y), m == null || m(!1);
+          } : void 0,
+          render: I ? (y) => I(o, y) : void 0,
+          children: [
+            o.icon && /* @__PURE__ */ e(
+              "span",
+              {
+                className: d(
+                  n("dropdown-menu-item-icon"),
+                  r == null ? void 0 : r.itemIcon
+                ),
+                children: o.icon
+              },
+              "icon"
+            ),
+            /* @__PURE__ */ e("span", { children: o.label }, "label")
+          ]
+        };
+        return i ? /* @__PURE__ */ e(u.Item, { ...D }, t + "-" + p) : /* @__PURE__ */ e(l, { ...D }, t + "-" + p);
+      } else if (o.type === "divider")
+        return /* @__PURE__ */ e(
+          G,
+          {
+            className: d(
+              n("dropdown-menu-divider"),
+              r == null ? void 0 : r.separator
+            )
+          },
+          t + "-" + p
+        );
+      return null;
+    },
+    [n, r, I, m, i, G]
+  ), A = M(
+    (o, t) => /* @__PURE__ */ g(
+      f.Group,
       {
-        className: p(n("dropdown-menu-group"), r == null ? void 0 : r.group),
+        className: d(n("dropdown-menu-group"), r == null ? void 0 : r.group),
         children: [
-          o.label && /* @__PURE__ */ t(
-            l.GroupLabel,
+          o.label && /* @__PURE__ */ e(
+            f.GroupLabel,
             {
-              className: p(
+              className: d(
                 n("dropdown-menu-header"),
                 r == null ? void 0 : r.groupLabel
               ),
-              children: /* @__PURE__ */ t("span", { children: o.label })
+              children: /* @__PURE__ */ e("span", { children: o.label })
             }
           ),
-          o.items.map((d, u) => h(d, e, u))
+          o.items.map((p, l) => b(p, t, l))
         ]
       },
-      "group" + e
+      "group" + t
     ),
-    [n, r, h]
-  ), S = M(
-    (o, e) => o.label ? /* @__PURE__ */ t(
-      i.Group,
+    [n, r, b]
+  ), E = M(
+    (o, t) => o.label ? /* @__PURE__ */ e(
+      u.Group,
       {
-        className: p(n("dropdown-menu-group"), r == null ? void 0 : r.group),
-        heading: /* @__PURE__ */ t(
-          l.GroupLabel,
+        className: d(n("dropdown-menu-group"), r == null ? void 0 : r.group),
+        heading: /* @__PURE__ */ e(
+          f.GroupLabel,
           {
-            className: p(
+            className: d(
               n("dropdown-menu-header"),
               r == null ? void 0 : r.groupLabel
             ),
-            children: /* @__PURE__ */ t("span", { children: o.label })
+            children: /* @__PURE__ */ e("span", { children: o.label })
           }
         ),
-        children: o.items.map((d, u) => h(d, e, u))
+        children: o.items.map((p, l) => b(p, t, l))
       },
-      "group" + e
-    ) : o.items.map((d, u) => h(d, e, u)),
-    [n, r, h]
-  ), q = M(
-    () => f ? /* @__PURE__ */ g(i, { children: [
-      /* @__PURE__ */ t(
-        i.Input,
+      "group" + t
+    ) : o.items.map((p, l) => b(p, t, l)),
+    [n, r, b]
+  ), W = M(
+    () => i ? /* @__PURE__ */ g(u, { className: n("dropdown-menu-container"), children: [
+      /* @__PURE__ */ q(
+        u.Input,
         {
-          ...C,
-          render: /* @__PURE__ */ t(X, { allowClear: !0, className: n("dropdown-menu-search") })
+          ...L,
+          key: "search",
+          render: /* @__PURE__ */ e(X, { allowClear: !0, className: n("dropdown-menu-search") })
         }
       ),
-      /* @__PURE__ */ g(i.List, { children: [
-        /* @__PURE__ */ t(i.Empty, { className: n("dropdown-menu-empty"), children: "No results found." }),
-        v.map(S)
-      ] })
-    ] }) : v.map(E),
+      /* @__PURE__ */ e(R, { children: /* @__PURE__ */ g(u.List, { className: n("dropdown-menu-list"), children: [
+        /* @__PURE__ */ e(u.Empty, { className: n("dropdown-menu-empty"), children: "No results found." }),
+        w.map(E)
+      ] }) })
+    ] }) : /* @__PURE__ */ e("div", { className: n("dropdown-menu-container"), children: /* @__PURE__ */ e(R, { children: w.map(A) }) }),
     [
-      f,
-      v,
-      S,
+      i,
+      w,
       E,
-      C,
+      A,
+      L,
       n
     ]
-  ), b = f ? J : l;
+  ), h = i ? H : f;
   return /* @__PURE__ */ g(
-    b.Root,
+    h.Root,
     {
-      openOnHover: B,
+      openOnHover: z,
       open: T,
-      onOpenChange: U,
+      onOpenChange: m,
       children: [
-        /* @__PURE__ */ t(
-          b.Trigger,
+        /* @__PURE__ */ e(
+          h.Trigger,
           {
-            render: j,
-            ref: V,
-            className: p(
+            render: V,
+            ref: U,
+            className: d(
               n("dropdown-menu-trigger"),
               r == null ? void 0 : r.trigger,
-              G
+              c
             )
           }
         ),
-        /* @__PURE__ */ t(b.Portal, { children: /* @__PURE__ */ t(
-          b.Positioner,
+        /* @__PURE__ */ e(h.Portal, { children: /* @__PURE__ */ e(
+          h.Positioner,
           {
-            side: L.placement,
-            align: L.align,
+            side: k.placement,
+            align: k.align,
             sideOffset: 4,
-            className: p(n("dropdown-menu-root"), r == null ? void 0 : r.root),
-            children: /* @__PURE__ */ t(
-              b.Popup,
+            className: d(n("dropdown-menu-root"), r == null ? void 0 : r.root),
+            collisionAvoidance: Y,
+            children: /* @__PURE__ */ e(
+              h.Popup,
               {
-                className: p(
+                className: d(
                   n("dropdown-menu"),
-                  R,
+                  O,
                   r == null ? void 0 : r.popup,
-                  G
+                  c
                 ),
                 style: {
-                  "--size-width": y in A ? A[y] : void 0
+                  "--size-width": C in S ? S[C] : void 0
                 },
-                children: q()
+                children: W()
               }
             )
           }
@@ -194,6 +210,6 @@ const no = ({
   );
 };
 export {
-  no as DropdownMenu
+  lo as DropdownMenu
 };
 //# sourceMappingURL=component.js.map

package/dist/components/dropdown-menu/component.js.map

@@ -1 +1 @@
-{"version":3,"file":"component.js","sources":["../../../src/components/dropdown-menu/component.tsx"],"sourcesContent":["\"use client\";\nimport {\n  useCls,\n  clsx,\n  useAntdCssVarClassname,\n  parseAntdPlacement,\n  WithRenderPropProps,\n} from \"../utils\";\nimport { Menu } from \"@base-ui-components/react/menu\";\nimport { type PopoverProps } from \"antd/es/popover\";\nimport { Ref, useCallback, useRef } from \"react\";\nimport { useControlled } from \"@base-ui-components/react/utils\";\nimport { Command } from \"../cmdk\";\n\n// Import component-specific styles\nimport \"./style.css\";\nimport { Popover } from \"@base-ui-components/react\";\nimport { PopupPanelSize } from \"../popup-panel/constants\";\nimport { Input } from \"../input\";\n\nexport type DropdownMenuItemType =\n  | {\n      type: \"item\";\n      label?: React.ReactNode;\n      disabled?: boolean;\n      icon?: React.ReactNode;\n      key: React.Key;\n      onClick?: React.HTMLAttributes<HTMLElement>[\"onClick\"];\n      onMouseEnter?: React.HTMLAttributes<HTMLElement>[\"onMouseEnter\"];\n      onMouseLeave?: React.HTMLAttributes<HTMLElement>[\"onMouseLeave\"];\n      onMouseOver?: React.HTMLAttributes<HTMLElement>[\"onMouseOver\"];\n      onMouseOut?: React.HTMLAttributes<HTMLElement>[\"onMouseOut\"];\n      danger?: boolean;\n      ref?: React.Ref<HTMLElement>;\n    }\n  | {\n      type: \"divider\";\n    }\n  | {\n      type: \"header\";\n      title?: React.ReactNode;\n    };\n\nexport interface DropdownMenuProps {\n  /** Array of menu items to be displayed in the dropdown */\n  items: DropdownMenuItemType[];\n  /** Custom render function for the trigger element */\n  children?: React.ComponentProps<typeof Menu.Trigger>[\"render\"];\n  /**\n   * Placement of the dropdown relative to the trigger element\n   * @default \"bottomLeft\"\n   */\n  placement?: PopoverProps[\"placement\"];\n  /**\n   * Whether to open the dropdown on hover instead of click\n   * @default false\n   */\n  openOnHover?: boolean;\n  /**\n   * Controlled open state of the dropdown\n   */\n  open?: boolean;\n  /**\n   * Callback fired when the dropdown open state changes\n   */\n  onOpenChange?: (open: boolean) => void;\n  /**\n   * Additional CSS class for the dropdown component\n   */\n  className?: string;\n  /**\n   * Custom class names for different parts of the dropdown\n   * @default {}\n   */\n  classNames?: {\n    root?: string;\n    trigger?: string;\n    popup?: string;\n    group?: string;\n    groupLabel?: string;\n    item?: string;\n    itemIcon?: string;\n    itemText?: string;\n    separator?: string;\n    positioner?: string;\n  };\n  /**\n   * Custom render function for menu items\n   */\n  itemRender?: (\n    item: DropdownMenuItemType,\n    props: React.HTMLAttributes<HTMLElement>\n  ) => React.ReactElement;\n  /**\n   * Whether to show search input\n   * @default false\n   */\n  showSearch?: boolean;\n  /**\n   * Size of the dropdown menu\n   * @default \"auto\"\n   */\n  size?: \"auto\" | keyof typeof PopupPanelSize;\n  /**\n   * Search placeholder\n   */\n  searchProps?: Omit<\n    React.ComponentProps<typeof Command.Input>,\n    \"size\" | \"ref\"\n  >;\n}\n\ninterface DropdownMenuGroup {\n  label: React.ReactNode | null;\n  items: DropdownMenuItemType[];\n}\n\nexport const DropdownMenu = ({\n  children,\n  items,\n  placement,\n  openOnHover,\n  open: outsideOpen,\n  onOpenChange: outsideOnOpenChange,\n  className,\n  itemRender,\n  classNames,\n  size = \"auto\",\n  showSearch,\n  searchProps = {\n    placeholder: \"Search...\",\n  },\n}: DropdownMenuProps) => {\n  const [open, setOpen] = useControlled({\n    controlled: outsideOpen,\n    default: false,\n    name: \"open\",\n  });\n  const onOpenChange = useCallback(\n    (newValue: boolean) => {\n      setOpen(newValue);\n      outsideOnOpenChange?.(newValue);\n    },\n    [setOpen, outsideOnOpenChange]\n  );\n  const cls = useCls();\n  const antdCssVarClassname = useAntdCssVarClassname();\n  const headlessUIPlacement = parseAntdPlacement(placement);\n  const buttonRef = useRef<HTMLButtonElement>(null);\n  const itemGroups = items.reduce<DropdownMenuGroup[]>((acc, current) => {\n    // If no groups exist yet and current item is not a header, create default group\n    if (acc.length === 0 && current.type !== \"header\") {\n      acc.push({\n        label: null,\n        items: [],\n      });\n    }\n\n    // If it's a header, create a new group\n    if (current.type === \"header\") {\n      acc.push({\n        label: current.title,\n        items: [],\n      });\n    }\n    // If it's an item and we have at least one group, add it to the last group's items\n    else if (\n      (current.type === \"item\" || current.type === \"divider\") &&\n      acc.length > 0\n    ) {\n      acc[acc.length - 1].items.push(current);\n    }\n    // Skip dividers\n    return acc;\n  }, []);\n\n  const MenuItem = showSearch ? Command.Item : Menu.Item;\n  const MenuSeparator = showSearch ? Command.Separator : Menu.Separator;\n\n  const renderMenuItem = useCallback(\n    (item: DropdownMenuItemType, i: number, j: number) => {\n      if (item.type === \"item\") {\n        return (\n          <MenuItem\n            key={i + \"-\" + j}\n            className={clsx(cls(\"dropdown-menu-item\"), classNames?.item)}\n            disabled={item.disabled}\n            data-danger={item.danger}\n            ref={item.ref as Ref<HTMLDivElement>}\n            onClick={item.onClick}\n            onMouseEnter={item.onMouseEnter}\n            onMouseLeave={item.onMouseLeave}\n            onMouseOver={item.onMouseOver}\n            onMouseOut={item.onMouseOut}\n            render={\n              itemRender\n                ? (itemProps) => itemRender(item, itemProps)\n                : undefined\n            }\n          >\n            {item.icon && (\n              <span\n                className={clsx(\n                  cls(\"dropdown-menu-item-icon\"),\n                  classNames?.itemIcon\n                )}\n              >\n                {item.icon}\n              </span>\n            )}\n            <span>{item.label}</span>\n          </MenuItem>\n        );\n      } else if (item.type === \"divider\") {\n        return (\n          <MenuSeparator\n            key={i + \"-\" + j}\n            className={clsx(\n              cls(\"dropdown-menu-divider\"),\n              classNames?.separator\n            )}\n          />\n        );\n      }\n\n      // else if (item.type === \"header\") {\n      //   return (\n      //     <Menu.GroupLabel\n      //       key={i + \"-\" + j}\n      //       className={clsx(\n      //         cls(\"dropdown-menu-header\"),\n      //         classNames?.groupLabel\n      //       )}\n      //     >\n      //       <span>{item.title}</span>\n      //     </Menu.GroupLabel>\n      //   );\n      // }\n      return null;\n    },\n    [cls, classNames, itemRender, MenuItem, MenuSeparator]\n  );\n\n  const renderGroup = useCallback(\n    (group: DropdownMenuGroup, index: number) => (\n      <Menu.Group\n        key={\"group\" + index}\n        className={clsx(cls(\"dropdown-menu-group\"), classNames?.group)}\n      >\n        {group.label && (\n          <Menu.GroupLabel\n            className={clsx(\n              cls(\"dropdown-menu-header\"),\n              classNames?.groupLabel\n            )}\n          >\n            <span>{group.label}</span>\n          </Menu.GroupLabel>\n        )}\n        {group.items.map((item, j) => renderMenuItem(item, index, j))}\n      </Menu.Group>\n    ),\n    [cls, classNames, renderMenuItem]\n  );\n\n  const renderGroupShowSearch = useCallback(\n    (group: DropdownMenuGroup, index: number) =>\n      group.label ? (\n        <Command.Group\n          key={\"group\" + index}\n          className={clsx(cls(\"dropdown-menu-group\"), classNames?.group)}\n          heading={\n            <Menu.GroupLabel\n              className={clsx(\n                cls(\"dropdown-menu-header\"),\n                classNames?.groupLabel\n              )}\n            >\n              <span>{group.label}</span>\n            </Menu.GroupLabel>\n          }\n        >\n          {group.items.map((item, j) => renderMenuItem(item, index, j))}\n        </Command.Group>\n      ) : (\n        group.items.map((item, j) => renderMenuItem(item, index, j))\n      ),\n    [cls, classNames, renderMenuItem]\n  );\n\n  const renderMenuInner = useCallback(\n    () =>\n      showSearch ? (\n        <Command>\n          <Command.Input\n            {...searchProps}\n            render={\n              <Input allowClear className={cls(\"dropdown-menu-search\")} />\n            }\n          />\n          <Command.List>\n            <Command.Empty className={cls(\"dropdown-menu-empty\")}>\n              No results found.\n            </Command.Empty>\n            {itemGroups.map(renderGroupShowSearch)}\n          </Command.List>\n        </Command>\n      ) : (\n        itemGroups.map(renderGroup)\n      ),\n    [\n      showSearch,\n      itemGroups,\n      renderGroupShowSearch,\n      renderGroup,\n      searchProps,\n      cls,\n    ]\n  );\n\n  const BaseComponent = showSearch ? Popover : Menu;\n\n  return (\n    <BaseComponent.Root\n      openOnHover={openOnHover}\n      open={open}\n      onOpenChange={onOpenChange}\n    >\n      <BaseComponent.Trigger\n        render={children}\n        ref={buttonRef}\n        className={clsx(\n          cls(\"dropdown-menu-trigger\"),\n          classNames?.trigger,\n          antdCssVarClassname\n        )}\n      />\n      <BaseComponent.Portal>\n        <BaseComponent.Positioner\n          side={headlessUIPlacement.placement}\n          align={headlessUIPlacement.align}\n          sideOffset={4}\n          className={clsx(cls(\"dropdown-menu-root\"), classNames?.root)}\n        >\n          <BaseComponent.Popup\n            className={clsx(\n              cls(\"dropdown-menu\"),\n              className,\n              classNames?.popup,\n              antdCssVarClassname\n            )}\n            style={\n              {\n                \"--size-width\":\n                  size in PopupPanelSize ? PopupPanelSize[size] : undefined,\n              } as React.CSSProperties\n            }\n          >\n            {renderMenuInner()}\n          </BaseComponent.Popup>\n        </BaseComponent.Positioner>\n      </BaseComponent.Portal>\n    </BaseComponent.Root>\n  );\n};\n"],"names":["DropdownMenu","children","items","placement","openOnHover","outsideOpen","outsideOnOpenChange","className","itemRender","classNames","size","showSearch","searchProps","open","setOpen","useControlled","onOpenChange","useCallback","newValue","cls","useCls","antdCssVarClassname","useAntdCssVarClassname","headlessUIPlacement","parseAntdPlacement","buttonRef","useRef","itemGroups","acc","current","MenuItem","Command","Menu","MenuSeparator","renderMenuItem","item","i","j","jsxs","clsx","itemProps","jsx","renderGroup","group","index","renderGroupShowSearch","renderMenuInner","Input","BaseComponent","Popover","PopupPanelSize"],"mappings":"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"}
+{"version":3,"file":"component.js","sources":["../../../src/components/dropdown-menu/component.tsx"],"sourcesContent":["\"use client\";\nimport { Menu } from \"@base-ui-components/react/menu\";\nimport { useControlled } from \"@base-ui-components/react/utils\";\nimport { Popover } from \"@base-ui-components/react/popover\";\nimport { type PopoverProps } from \"antd/es/popover\";\nimport { Ref, useCallback, useRef } from \"react\";\nimport {\n  clsx,\n  DROPDOWN_COLLISION_AVOIDANCE,\n  parseAntdPlacement,\n  useAntdCssVarClassname,\n  useCls,\n} from \"../utils\";\nimport { Command } from \"../cmdk\";\nimport { ScrollArea } from \"../scroll-area\";\n\n// Import component-specific styles\nimport { Input } from \"../input\";\nimport { PopupPanelSize } from \"../popup-panel/constants\";\n\nimport \"./style.css\";\n\nexport type DropdownMenuItemType =\n  | {\n      type: \"item\";\n      label?: React.ReactNode;\n      disabled?: boolean;\n      icon?: React.ReactNode;\n      key: React.Key;\n      onClick?: React.HTMLAttributes<HTMLElement>[\"onClick\"];\n      onMouseEnter?: React.HTMLAttributes<HTMLElement>[\"onMouseEnter\"];\n      onMouseLeave?: React.HTMLAttributes<HTMLElement>[\"onMouseLeave\"];\n      onMouseOver?: React.HTMLAttributes<HTMLElement>[\"onMouseOver\"];\n      onMouseOut?: React.HTMLAttributes<HTMLElement>[\"onMouseOut\"];\n      danger?: boolean;\n      ref?: React.Ref<HTMLElement>;\n    }\n  | {\n      type: \"divider\";\n    }\n  | {\n      type: \"header\";\n      title?: React.ReactNode;\n    };\n\nexport interface DropdownMenuProps {\n  /** Array of menu items to be displayed in the dropdown */\n  items: DropdownMenuItemType[];\n  /** Custom render function for the trigger element */\n  children?: React.ComponentProps<typeof Menu.Trigger>[\"render\"];\n  /**\n   * Placement of the dropdown relative to the trigger element\n   * @default \"bottomLeft\"\n   */\n  placement?: PopoverProps[\"placement\"];\n  /**\n   * Whether to open the dropdown on hover instead of click\n   * @default false\n   */\n  openOnHover?: boolean;\n  /**\n   * Controlled open state of the dropdown\n   */\n  open?: boolean;\n  /**\n   * Callback fired when the dropdown open state changes\n   */\n  onOpenChange?: (open: boolean) => void;\n  /**\n   * Additional CSS class for the dropdown component\n   */\n  className?: string;\n  /**\n   * Custom class names for different parts of the dropdown\n   * @default {}\n   */\n  classNames?: {\n    root?: string;\n    trigger?: string;\n    popup?: string;\n    group?: string;\n    groupLabel?: string;\n    item?: string;\n    itemIcon?: string;\n    itemText?: string;\n    separator?: string;\n    positioner?: string;\n  };\n  /**\n   * Custom render function for menu items\n   */\n  itemRender?: (\n    item: DropdownMenuItemType,\n    props: React.HTMLAttributes<HTMLElement>\n  ) => React.ReactElement;\n  /**\n   * Whether to show search input\n   * @default false\n   */\n  showSearch?: boolean;\n  /**\n   * Size of the dropdown menu\n   * @default \"auto\"\n   */\n  size?: \"auto\" | keyof typeof PopupPanelSize;\n  /**\n   * Search placeholder\n   */\n  searchProps?: Omit<\n    React.ComponentProps<typeof Command.Input>,\n    \"size\" | \"ref\"\n  >;\n  /**\n   *\n   */\n}\n\ninterface DropdownMenuGroup {\n  label: React.ReactNode | null;\n  items: DropdownMenuItemType[];\n}\n\nexport const DropdownMenu = ({\n  children,\n  items,\n  placement,\n  openOnHover,\n  open: outsideOpen,\n  onOpenChange: outsideOnOpenChange,\n  className,\n  itemRender,\n  classNames,\n  size = \"auto\",\n  showSearch,\n  searchProps = {\n    placeholder: \"Search...\",\n  },\n}: DropdownMenuProps) => {\n  const [open, setOpen] = useControlled({\n    controlled: outsideOpen,\n    default: false,\n    name: \"open\",\n  });\n  const onOpenChange = useCallback(\n    (newValue: boolean) => {\n      setOpen(newValue);\n      outsideOnOpenChange?.(newValue);\n    },\n    [setOpen, outsideOnOpenChange]\n  );\n  const cls = useCls();\n  const antdCssVarClassname = useAntdCssVarClassname();\n  const headlessUIPlacement = parseAntdPlacement(placement);\n  const buttonRef = useRef<HTMLButtonElement>(null);\n  const itemGroups = items.reduce<DropdownMenuGroup[]>((acc, current) => {\n    // If no groups exist yet and current item is not a header, create default group\n    if (acc.length === 0 && current.type !== \"header\") {\n      acc.push({\n        label: null,\n        items: [],\n      });\n    }\n\n    // If it's a header, create a new group\n    if (current.type === \"header\") {\n      acc.push({\n        label: current.title,\n        items: [],\n      });\n    }\n    // If it's an item and we have at least one group, add it to the last group's items\n    else if (\n      (current.type === \"item\" || current.type === \"divider\") &&\n      acc.length > 0\n    ) {\n      acc[acc.length - 1].items.push(current);\n    }\n    // Skip dividers\n    return acc;\n  }, []);\n\n  const MenuSeparator = showSearch ? Command.Separator : Menu.Separator;\n\n  const renderMenuItem = useCallback(\n    (item: DropdownMenuItemType, i: number, j: number) => {\n      const MenuItem = showSearch ? Command.Item : Menu.Item;\n\n      if (item.type === \"item\") {\n        const props = {\n          className: clsx(cls(\"dropdown-menu-item\"), classNames?.item),\n          disabled: item.disabled,\n          \"data-danger\": item.danger,\n          ref: item.ref as Ref<HTMLDivElement>,\n          onClick: item.onClick,\n          onMouseEnter: item.onMouseEnter,\n          onMouseLeave: item.onMouseLeave,\n          onMouseOver: item.onMouseOver,\n          onMouseOut: item.onMouseOut,\n          onSelect: showSearch\n            ? () => {\n                const e = new MouseEvent(\"click\", {\n                  bubbles: true,\n                  cancelable: true,\n                }) as unknown as React.MouseEvent<HTMLElement, MouseEvent>;\n                item.onClick(e);\n                onOpenChange?.(false);\n              }\n            : undefined,\n          render: itemRender\n            ? (itemProps: React.HTMLAttributes<HTMLElement>) =>\n                itemRender(item, itemProps)\n            : undefined,\n          children: [\n            item.icon && (\n              <span\n                key=\"icon\"\n                className={clsx(\n                  cls(\"dropdown-menu-item-icon\"),\n                  classNames?.itemIcon\n                )}\n              >\n                {item.icon}\n              </span>\n            ),\n            <span key=\"label\">{item.label}</span>,\n          ],\n        };\n        return showSearch ? (\n          <Command.Item key={i + \"-\" + j} {...props}></Command.Item>\n        ) : (\n          <MenuItem key={i + \"-\" + j} {...props}></MenuItem>\n        );\n      } else if (item.type === \"divider\") {\n        return (\n          <MenuSeparator\n            key={i + \"-\" + j}\n            className={clsx(\n              cls(\"dropdown-menu-divider\"),\n              classNames?.separator\n            )}\n          />\n        );\n      }\n      return null;\n    },\n    [cls, classNames, itemRender, onOpenChange, showSearch, MenuSeparator]\n  );\n\n  const renderGroup = useCallback(\n    (group: DropdownMenuGroup, index: number) => (\n      <Menu.Group\n        key={\"group\" + index}\n        className={clsx(cls(\"dropdown-menu-group\"), classNames?.group)}\n      >\n        {group.label && (\n          <Menu.GroupLabel\n            className={clsx(\n              cls(\"dropdown-menu-header\"),\n              classNames?.groupLabel\n            )}\n          >\n            <span>{group.label}</span>\n          </Menu.GroupLabel>\n        )}\n        {group.items.map((item, j) => renderMenuItem(item, index, j))}\n      </Menu.Group>\n    ),\n    [cls, classNames, renderMenuItem]\n  );\n\n  const renderGroupShowSearch = useCallback(\n    (group: DropdownMenuGroup, index: number) =>\n      group.label ? (\n        <Command.Group\n          key={\"group\" + index}\n          className={clsx(cls(\"dropdown-menu-group\"), classNames?.group)}\n          heading={\n            <Menu.GroupLabel\n              className={clsx(\n                cls(\"dropdown-menu-header\"),\n                classNames?.groupLabel\n              )}\n            >\n              <span>{group.label}</span>\n            </Menu.GroupLabel>\n          }\n        >\n          {group.items.map((item, j) => renderMenuItem(item, index, j))}\n        </Command.Group>\n      ) : (\n        group.items.map((item, j) => renderMenuItem(item, index, j))\n      ),\n    [cls, classNames, renderMenuItem]\n  );\n\n  const renderMenuInner = useCallback(\n    () =>\n      showSearch ? (\n        <Command className={cls(\"dropdown-menu-container\")}>\n          <Command.Input\n            {...searchProps}\n            key=\"search\"\n            render={\n              <Input allowClear className={cls(\"dropdown-menu-search\")} />\n            }\n          />\n          <ScrollArea>\n            <Command.List className={cls(\"dropdown-menu-list\")}>\n              <Command.Empty className={cls(\"dropdown-menu-empty\")}>\n                No results found.\n              </Command.Empty>\n              {itemGroups.map(renderGroupShowSearch)}\n            </Command.List>\n          </ScrollArea>\n        </Command>\n      ) : (\n        <div className={cls(\"dropdown-menu-container\")}>\n          <ScrollArea>{itemGroups.map(renderGroup)}</ScrollArea>\n        </div>\n      ),\n    [\n      showSearch,\n      itemGroups,\n      renderGroupShowSearch,\n      renderGroup,\n      searchProps,\n      cls,\n    ]\n  );\n\n  const BaseComponent = showSearch ? Popover : Menu;\n\n  return (\n    <BaseComponent.Root\n      openOnHover={openOnHover}\n      open={open}\n      onOpenChange={onOpenChange}\n    >\n      <BaseComponent.Trigger\n        render={children}\n        ref={buttonRef}\n        className={clsx(\n          cls(\"dropdown-menu-trigger\"),\n          classNames?.trigger,\n          antdCssVarClassname\n        )}\n      />\n      <BaseComponent.Portal>\n        <BaseComponent.Positioner\n          side={headlessUIPlacement.placement}\n          align={headlessUIPlacement.align}\n          sideOffset={4}\n          className={clsx(cls(\"dropdown-menu-root\"), classNames?.root)}\n          collisionAvoidance={DROPDOWN_COLLISION_AVOIDANCE}\n        >\n          <BaseComponent.Popup\n            className={clsx(\n              cls(\"dropdown-menu\"),\n              className,\n              classNames?.popup,\n              antdCssVarClassname\n            )}\n            style={\n              {\n                \"--size-width\":\n                  size in PopupPanelSize ? PopupPanelSize[size] : undefined,\n              } as React.CSSProperties\n            }\n          >\n            {renderMenuInner()}\n          </BaseComponent.Popup>\n        </BaseComponent.Positioner>\n      </BaseComponent.Portal>\n    </BaseComponent.Root>\n  );\n};\n"],"names":["DropdownMenu","children","items","placement","openOnHover","outsideOpen","outsideOnOpenChange","className","itemRender","classNames","size","showSearch","searchProps","open","setOpen","useControlled","onOpenChange","useCallback","newValue","cls","useCls","antdCssVarClassname","useAntdCssVarClassname","headlessUIPlacement","parseAntdPlacement","buttonRef","useRef","itemGroups","acc","current","MenuSeparator","Command","Menu","renderMenuItem","item","i","j","MenuItem","props","clsx","e","itemProps","jsx","renderGroup","group","index","jsxs","renderGroupShowSearch","renderMenuInner","createElement","Input","ScrollArea","BaseComponent","Popover","DROPDOWN_COLLISION_AVOIDANCE","PopupPanelSize"],"mappings":"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"}

package/dist/components/dropdown-menu/style.css

@@ -1 +1 @@
-@layer components{.ds-dropdown-menu-root{z-index:2000}.ds-dropdown-menu{box-shadow:var(--ds-box-shadow-secondary);border-radius:var(--ds-border-radius);background:var(--ds-color-bg-elevated);list-style:none;padding:.25rem;color:var(--ds-color-text);font-size:var(--ds-font-size);font-family:var(--ds-font-family);transition-property:transform,scale,opacity;transition-duration:.2s;transition-timing-function:var(--ds-motion-ease-out);transform-origin:var(--transform-origin);max-width:min(var(--size-width),var(--available-width))}.ds-dropdown-menu[data-ending-style],.ds-dropdown-menu[data-starting-style]{transform:scale(.9);opacity:0}.ds-dropdown-menu:focus{outline:none}.ds-dropdown-menu-item{padding:.375rem .75rem;border-radius:var(--ds-border-radius-sm);transition:all .3s var(--ds-motion-ease-out);cursor:pointer;display:flex;align-items:center}.ds-dropdown-menu-item:focus{outline:none}.ds-dropdown-menu-item:hover{background:var(--ds-control-item-bg-hover)}.ds-dropdown-menu-item:active,.ds-dropdown-menu-item:focus,.ds-dropdown-menu-item[data-focus=true],.ds-dropdown-menu-item[data-selected=true]{background:var(--ds-control-item-bg-active)}.ds-dropdown-menu-item[data-disabled=true]{pointer-events:none;color:var(--ds-color-text-disabled)}.ds-dropdown-menu-item[data-danger=true]{color:var(--ds-color-error)}.ds-dropdown-menu-item[data-danger=true]:hover{background:var(--ds-color-error-bg)}.ds-dropdown-menu-item[data-danger=true]:active,.ds-dropdown-menu-item[data-danger=true]:focus,.ds-dropdown-menu-item[data-danger=true][data-focus=true]{background:var(--ds-color-error-bg-hover)}.ds-dropdown-menu-search{margin-bottom:.25rem}.ds-dropdown-menu-item-icon{display:flex;align-items:center;justify-content:center;margin-right:.5rem;font-size:1rem;color:var(--ds-color-icon)}[data-danger=true] .ds-dropdown-menu-item-icon{color:var(--ds-color-error)}.ds-dropdown-menu-divider{border-bottom:1px solid var(--ds-color-split);margin:.25rem 0}.ds-dropdown-menu-header{font-size:.75rem;font-weight:500;line-height:1rem;text-transform:uppercase;color:var(--ds-color-text-tertiary);padding:.75rem .75rem .25rem}.ds-dropdown-menu-header:first-child{padding-top:.5rem}.ds-dropdown-menu-empty{padding:.375rem .75rem;color:var(--ds-color-text-tertiary)}}
+@layer components{.ds-dropdown-menu-root{z-index:2000}.ds-dropdown-menu{box-shadow:var(--ds-box-shadow-secondary);border-radius:var(--ds-border-radius);background:var(--ds-color-bg-elevated);list-style:none;padding:.25rem;color:var(--ds-color-text);font-size:var(--ds-font-size);font-family:var(--ds-font-family);transition-property:transform,scale,opacity;transition-duration:.2s;transition-timing-function:var(--ds-motion-ease-out);transform-origin:var(--transform-origin);max-width:min(var(--size-width),var(--available-width));max-height:var(--available-height);display:flex;flex-direction:column}.ds-dropdown-menu[data-ending-style],.ds-dropdown-menu[data-starting-style]{transform:scale(.9);opacity:0}.ds-dropdown-menu:focus{outline:none}.ds-dropdown-menu .ds-dropdown-menu-container{flex-shrink:1;min-height:0;display:flex;flex-direction:column}.ds-dropdown-menu .ds-dropdown-menu-search{flex-shrink:0}.ds-dropdown-menu .ds-dropdown-menu-list{flex-shrink:1;min-height:0;display:flex;flex-direction:column}.ds-dropdown-menu-item{padding:.375rem .75rem;border-radius:var(--ds-border-radius-sm);transition:all .3s var(--ds-motion-ease-out);cursor:pointer;display:flex;align-items:center}.ds-dropdown-menu-item:focus{outline:none}.ds-dropdown-menu-item:hover{background:var(--ds-control-item-bg-hover)}.ds-dropdown-menu-item:active,.ds-dropdown-menu-item:focus,.ds-dropdown-menu-item[data-focus=true],.ds-dropdown-menu-item[data-selected=true]{background:var(--ds-control-item-bg-active)}.ds-dropdown-menu-item[data-disabled=true]{pointer-events:none;color:var(--ds-color-text-disabled)}.ds-dropdown-menu-item[data-danger=true]{color:var(--ds-color-error)}.ds-dropdown-menu-item[data-danger=true]:hover{background:var(--ds-color-error-bg)}.ds-dropdown-menu-item[data-danger=true]:active,.ds-dropdown-menu-item[data-danger=true]:focus,.ds-dropdown-menu-item[data-danger=true][data-focus=true]{background:var(--ds-color-error-bg-hover)}.ds-dropdown-menu-search{margin-bottom:.25rem}.ds-dropdown-menu-item-icon{display:flex;align-items:center;justify-content:center;margin-right:.5rem;font-size:1rem;color:var(--ds-color-icon)}[data-danger=true] .ds-dropdown-menu-item-icon{color:var(--ds-color-error)}.ds-dropdown-menu-divider{border-bottom:1px solid var(--ds-color-split);margin:.25rem 0}.ds-dropdown-menu-header{font-size:.75rem;font-weight:500;line-height:1rem;text-transform:uppercase;color:var(--ds-color-text-tertiary);padding:.75rem .75rem .25rem}.ds-dropdown-menu-header:first-child{padding-top:.5rem}.ds-dropdown-menu-empty{padding:.375rem .75rem;color:var(--ds-color-text-tertiary)}}

package/dist/components/form/item.js.map

@@ -1 +1 @@
-{"version":3,"file":"item.js","sources":["../../../src/components/form/item.tsx"],"sourcesContent":["\"use client\";\nimport { isValidElement } from \"react\";\nimport {\n  default as AntdFormItem,\n  type FormItemProps as AntdFormItemProps,\n} from \"antd/es/form/FormItem\";\nimport { Question } from \"@bioturing/assets\";\nimport { IconButton } from \"../icon-button\";\nimport { useCls } from \"../utils\";\n\nexport interface FormItemProps<Values = unknown>\n  extends AntdFormItemProps<Values> {\n  // tooltip?: React.ReactNode | TooltipProps;\n  optionalMark?: boolean | React.ReactNode;\n}\n\nexport const FormItem = <Values = unknown,>({\n  tooltip,\n  label,\n  optionalMark,\n  ...rest\n}: FormItemProps<Values>) => {\n  const cls = useCls();\n  const renderedLabel =\n    tooltip || optionalMark ? (\n      <span className={cls(\"form-item-label-inner\")}>\n        {label}\n        {tooltip && (\n          <IconButton\n            className={cls(\"form-item-explaination-icon\")}\n            label={\n              typeof tooltip == \"string\" || isValidElement(tooltip)\n                ? tooltip\n                : undefined\n            }\n          >\n            <Question />\n          </IconButton>\n        )}\n        {optionalMark && (\n          <span className={cls(\"form-item-label-optional-mark\")}>\n            {typeof optionalMark == \"boolean\" ? \"(optional)\" : optionalMark}\n          </span>\n        )}\n      </span>\n    ) : (\n      label\n    );\n  return <AntdFormItem label={renderedLabel} {...rest} />;\n};\n"],"names":["FormItem","tooltip","label","optionalMark","rest","cls","useCls","renderedLabel","jsxs","jsx","IconButton","isValidElement","Question","AntdFormItem"],"mappings":";;;;;;;AAgBO,MAAMA,IAAW,CAAoB;AAAA,EAC1C,SAAAC;AAAA,EACA,OAAAC;AAAA,EACA,cAAAC;AAAA,EACA,GAAGC;AACL,MAA6B;AAC3B,QAAMC,IAAMC,EAAO,GACbC,IACJN,KAAWE,IACT,gBAAAK,EAAC,UAAK,WAAWH,EAAI,uBAAuB,GACzC,UAAA;AAAA,IAAAH;AAAA,IACAD,KACC,gBAAAQ;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,WAAWL,EAAI,6BAA6B;AAAA,QAC5C,OACE,OAAOJ,KAAW,YAAYU,EAAeV,CAAO,IAChDA,IACA;AAAA,QAGN,4BAACW,GAAS,CAAA,CAAA;AAAA,MAAA;AAAA,IACZ;AAAA,IAEDT,KACE,gBAAAM,EAAA,QAAA,EAAK,WAAWJ,EAAI,+BAA+B,GACjD,UAAO,OAAAF,KAAgB,YAAY,eAAeA,EACrD,CAAA;AAAA,EAAA,EAAA,CAEJ,IAEAD;AAEJ,SAAQ,gBAAAO,EAAAI,GAAA,EAAa,OAAON,GAAgB,GAAGH,GAAM;AACvD;"}
+{"version":3,"file":"item.js","sources":["../../../src/components/form/item.tsx"],"sourcesContent":["\"use client\";\nimport { isValidElement } from \"react\";\nimport {\n  default as AntdFormItem,\n  type FormItemProps as AntdFormItemProps,\n} from \"antd/es/form/FormItem\";\nimport { Question } from \"@bioturing/assets\";\nimport { IconButton } from \"../icon-button\";\nimport { useCls } from \"../utils\";\n\nexport interface FormItemProps<Values = unknown>\n  extends AntdFormItemProps<Values> {\n  // tooltip?: React.ReactNode | TooltipProps;\n  /**\n   * Whether the field is optional. If true, the label will be marked as optional.\n   * @default false\n   */\n  optionalMark?: boolean | React.ReactNode;\n}\n\nexport const FormItem = <Values = unknown,>({\n  tooltip,\n  label,\n  optionalMark,\n  ...rest\n}: FormItemProps<Values>) => {\n  const cls = useCls();\n  const renderedLabel =\n    tooltip || optionalMark ? (\n      <span className={cls(\"form-item-label-inner\")}>\n        {label}\n        {tooltip && (\n          <IconButton\n            className={cls(\"form-item-explaination-icon\")}\n            label={\n              typeof tooltip == \"string\" || isValidElement(tooltip)\n                ? tooltip\n                : undefined\n            }\n          >\n            <Question />\n          </IconButton>\n        )}\n        {optionalMark && (\n          <span className={cls(\"form-item-label-optional-mark\")}>\n            {typeof optionalMark == \"boolean\" ? \"(optional)\" : optionalMark}\n          </span>\n        )}\n      </span>\n    ) : (\n      label\n    );\n  return <AntdFormItem label={renderedLabel} {...rest} />;\n};\n"],"names":["FormItem","tooltip","label","optionalMark","rest","cls","useCls","renderedLabel","jsxs","jsx","IconButton","isValidElement","Question","AntdFormItem"],"mappings":";;;;;;;AAoBO,MAAMA,IAAW,CAAoB;AAAA,EAC1C,SAAAC;AAAA,EACA,OAAAC;AAAA,EACA,cAAAC;AAAA,EACA,GAAGC;AACL,MAA6B;AAC3B,QAAMC,IAAMC,EAAO,GACbC,IACJN,KAAWE,IACT,gBAAAK,EAAC,UAAK,WAAWH,EAAI,uBAAuB,GACzC,UAAA;AAAA,IAAAH;AAAA,IACAD,KACC,gBAAAQ;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,WAAWL,EAAI,6BAA6B;AAAA,QAC5C,OACE,OAAOJ,KAAW,YAAYU,EAAeV,CAAO,IAChDA,IACA;AAAA,QAGN,4BAACW,GAAS,CAAA,CAAA;AAAA,MAAA;AAAA,IACZ;AAAA,IAEDT,KACE,gBAAAM,EAAA,QAAA,EAAK,WAAWJ,EAAI,+BAA+B,GACjD,UAAO,OAAAF,KAAgB,YAAY,eAAeA,EACrD,CAAA;AAAA,EAAA,EAAA,CAEJ,IAEAD;AAEJ,SAAQ,gBAAAO,EAAAI,GAAA,EAAa,OAAON,GAAgB,GAAGH,GAAM;AACvD;"}

package/dist/components/hooks/useCharts.js

@@ -1,30 +1,34 @@
 import { useDS as c } from "../ds-root/context.js";
 import { getTokensByTheme as C } from "../../tokens/utils.js";
 import { chartColorTokens as h } from "../../tokens/charts/palettes/cloudscape.js";
-import { CATEGORICAL_PALETTE_NAMES as m, getCategoricalChartColors as L, SEQUENTIAL_PALETTE_NAMES as A, getSequentialChartColors as p } from "../../tokens/charts/palettes/index.js";
-const S = (r = {
+import { useMemo as m } from "react";
+import { CATEGORICAL_PALETTE_NAMES as L, getCategoricalChartColors as A, SEQUENTIAL_PALETTE_NAMES as f, getSequentialChartColors as p } from "../../tokens/charts/palettes/index.js";
+const I = (t = {
   palette: "cloudscape",
   theme: void 0
 }) => {
-  const { theme: a } = c(), o = r.theme || a, t = C(h, o), s = t.colorChartsLineAxis, l = t.colorChartsLineGrid, i = t.colorChartsLabelAxis, e = r.palette, n = m.includes(
-    e
-  ) ? L(e, o) : A.includes(e) ? p(e, o) : [];
-  return {
-    axisLineColor: s,
-    splitLineColor: l,
-    axisLabelColor: i,
-    chartColors: n,
-    echartsAxisConfig: {
-      axisLine: { lineStyle: { color: s } },
-      splitLine: { lineStyle: { color: l } },
-      axisLabel: {
-        color: i,
-        fontFamily: "InterVariable, Inter, Helvetica, Arial, sans-serif"
+  const { theme: i } = c(), e = t.theme || i;
+  return m(() => {
+    const r = C(h, e), s = r.colorChartsLineAxis, l = r.colorChartsLineGrid, a = r.colorChartsLabelAxis, o = t.palette, n = L.includes(
+      o
+    ) ? A(o, e) : f.includes(o) ? p(o, e) : [];
+    return {
+      axisLineColor: s,
+      splitLineColor: l,
+      axisLabelColor: a,
+      chartColors: n,
+      echartsAxisConfig: {
+        axisLine: { lineStyle: { color: s } },
+        splitLine: { lineStyle: { color: l } },
+        axisLabel: {
+          color: a,
+          fontFamily: "InterVariable, Inter, Helvetica, Arial, sans-serif"
+        }
       }
-    }
-  };
+    };
+  }, [e, t.palette]);
 };
 export {
-  S as useCharts
+  I as useCharts
 };
 //# sourceMappingURL=useCharts.js.map

package/dist/components/hooks/useCharts.js.map

@@ -1 +1 @@
-{"version":3,"file":"useCharts.js","sources":["../../../src/components/hooks/useCharts.ts"],"sourcesContent":["import { useDS } from \"../ds-root/context\";\nimport { getTokensByTheme } from \"../../tokens/utils\";\nimport { chartColorTokens } from \"../../tokens/charts/palettes/cloudscape\";\n\nimport {\n  SequentialPaletteName,\n  CategoricalPaletteName,\n  CATEGORICAL_PALETTE_NAMES,\n  getCategoricalChartColors,\n  getSequentialChartColors,\n  SEQUENTIAL_PALETTE_NAMES,\n  Theme,\n} from \"../../tokens\";\n\nexport interface UseChartsOptions {\n  /**\n   * The palette to use for the charts.\n   * @default \"cloudscape\"\n   */\n  palette?: SequentialPaletteName | CategoricalPaletteName;\n  /**\n   * The theme to use for the charts.\n   * @default \"light\"\n   */\n  theme?: Theme;\n}\n\n/**\n * Get chart colors and axis configuration based on the current theme.\n * @param options\n * @returns\n */\nexport const useCharts = (\n  options: UseChartsOptions = {\n    palette: \"cloudscape\",\n    theme: undefined,\n  }\n) => {\n  const { theme: themeContext } = useDS();\n  const theme = options.theme || themeContext;\n  const themedChartColorTokens = getTokensByTheme(chartColorTokens, theme);\n  const axisLineColor = themedChartColorTokens[\"colorChartsLineAxis\"];\n  const splitLineColor = themedChartColorTokens[\"colorChartsLineGrid\"];\n  const axisLabelColor = themedChartColorTokens[\"colorChartsLabelAxis\"];\n\n  const palette = options.palette;\n\n  const chartColors = CATEGORICAL_PALETTE_NAMES.includes(\n    palette as CategoricalPaletteName\n  )\n    ? getCategoricalChartColors(palette as CategoricalPaletteName, theme)\n    : SEQUENTIAL_PALETTE_NAMES.includes(palette as SequentialPaletteName)\n    ? getSequentialChartColors(palette as SequentialPaletteName, theme)\n    : [];\n  const echartsAxisConfig = {\n    axisLine: { lineStyle: { color: axisLineColor } },\n    splitLine: { lineStyle: { color: splitLineColor } },\n    axisLabel: {\n      color: axisLabelColor,\n      fontFamily: \"InterVariable, Inter, Helvetica, Arial, sans-serif\",\n    },\n  };\n\n  return {\n    axisLineColor,\n    splitLineColor,\n    axisLabelColor,\n    chartColors,\n    echartsAxisConfig,\n  };\n};\n"],"names":["useCharts","options","themeContext","useDS","theme","themedChartColorTokens","getTokensByTheme","chartColorTokens","axisLineColor","splitLineColor","axisLabelColor","palette","chartColors","CATEGORICAL_PALETTE_NAMES","getCategoricalChartColors","SEQUENTIAL_PALETTE_NAMES","getSequentialChartColors"],"mappings":";;;;AAgCa,MAAAA,IAAY,CACvBC,IAA4B;AAAA,EAC1B,SAAS;AAAA,EACT,OAAO;AACT,MACG;AACH,QAAM,EAAE,OAAOC,EAAa,IAAIC,EAAM,GAChCC,IAAQH,EAAQ,SAASC,GACzBG,IAAyBC,EAAiBC,GAAkBH,CAAK,GACjEI,IAAgBH,EAAuB,qBACvCI,IAAiBJ,EAAuB,qBACxCK,IAAiBL,EAAuB,sBAExCM,IAAUV,EAAQ,SAElBW,IAAcC,EAA0B;AAAA,IAC5CF;AAAA,EAEE,IAAAG,EAA0BH,GAAmCP,CAAK,IAClEW,EAAyB,SAASJ,CAAgC,IAClEK,EAAyBL,GAAkCP,CAAK,IAChE,CAAC;AAUE,SAAA;AAAA,IACL,eAAAI;AAAA,IACA,gBAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,aAAAE;AAAA,IACA,mBAdwB;AAAA,MACxB,UAAU,EAAE,WAAW,EAAE,OAAOJ,IAAgB;AAAA,MAChD,WAAW,EAAE,WAAW,EAAE,OAAOC,IAAiB;AAAA,MAClD,WAAW;AAAA,QACT,OAAOC;AAAA,QACP,YAAY;AAAA,MAAA;AAAA,IAEhB;AAAA,EAQA;AACF;"}
+{"version":3,"file":"useCharts.js","sources":["../../../src/components/hooks/useCharts.ts"],"sourcesContent":["import { useDS } from \"../ds-root/context\";\nimport { getTokensByTheme } from \"../../tokens/utils\";\nimport { chartColorTokens } from \"../../tokens/charts/palettes/cloudscape\";\n\nimport {\n  SequentialPaletteName,\n  CategoricalPaletteName,\n  CATEGORICAL_PALETTE_NAMES,\n  getCategoricalChartColors,\n  getSequentialChartColors,\n  SEQUENTIAL_PALETTE_NAMES,\n  Theme,\n} from \"../../tokens\";\nimport { useMemo } from \"react\";\n\nexport interface UseChartsOptions {\n  /**\n   * The palette to use for the charts.\n   * @default \"cloudscape\"\n   */\n  palette?: SequentialPaletteName | CategoricalPaletteName;\n  /**\n   * The theme to use for the charts.\n   * @default \"light\"\n   */\n  theme?: Theme;\n}\n\n/**\n * Get chart colors and axis configuration based on the current theme.\n * @param options\n * @returns\n */\nexport const useCharts = (\n  options: UseChartsOptions = {\n    palette: \"cloudscape\",\n    theme: undefined,\n  }\n) => {\n  const { theme: themeContext } = useDS();\n  const theme = options.theme || themeContext;\n\n  const chartInfo = useMemo(() => {\n    const themedChartColorTokens = getTokensByTheme(chartColorTokens, theme);\n    const axisLineColor = themedChartColorTokens[\"colorChartsLineAxis\"];\n    const splitLineColor = themedChartColorTokens[\"colorChartsLineGrid\"];\n    const axisLabelColor = themedChartColorTokens[\"colorChartsLabelAxis\"];\n\n    const palette = options.palette;\n\n    const chartColors = CATEGORICAL_PALETTE_NAMES.includes(\n      palette as CategoricalPaletteName\n    )\n      ? getCategoricalChartColors(palette as CategoricalPaletteName, theme)\n      : SEQUENTIAL_PALETTE_NAMES.includes(palette as SequentialPaletteName)\n      ? getSequentialChartColors(palette as SequentialPaletteName, theme)\n      : [];\n    const echartsAxisConfig = {\n      axisLine: { lineStyle: { color: axisLineColor } },\n      splitLine: { lineStyle: { color: splitLineColor } },\n      axisLabel: {\n        color: axisLabelColor,\n        fontFamily: \"InterVariable, Inter, Helvetica, Arial, sans-serif\",\n      },\n    };\n    return {\n      axisLineColor,\n      splitLineColor,\n      axisLabelColor,\n      chartColors,\n      echartsAxisConfig,\n    };\n  }, [theme, options.palette]);\n\n  return chartInfo;\n};\n"],"names":["useCharts","options","themeContext","useDS","theme","useMemo","themedChartColorTokens","getTokensByTheme","chartColorTokens","axisLineColor","splitLineColor","axisLabelColor","palette","chartColors","CATEGORICAL_PALETTE_NAMES","getCategoricalChartColors","SEQUENTIAL_PALETTE_NAMES","getSequentialChartColors"],"mappings":";;;;;AAiCa,MAAAA,IAAY,CACvBC,IAA4B;AAAA,EAC1B,SAAS;AAAA,EACT,OAAO;AACT,MACG;AACH,QAAM,EAAE,OAAOC,EAAa,IAAIC,EAAM,GAChCC,IAAQH,EAAQ,SAASC;AAkCxB,SAhCWG,EAAQ,MAAM;AACxB,UAAAC,IAAyBC,EAAiBC,GAAkBJ,CAAK,GACjEK,IAAgBH,EAAuB,qBACvCI,IAAiBJ,EAAuB,qBACxCK,IAAiBL,EAAuB,sBAExCM,IAAUX,EAAQ,SAElBY,IAAcC,EAA0B;AAAA,MAC5CF;AAAA,IAEE,IAAAG,EAA0BH,GAAmCR,CAAK,IAClEY,EAAyB,SAASJ,CAAgC,IAClEK,EAAyBL,GAAkCR,CAAK,IAChE,CAAC;AASE,WAAA;AAAA,MACL,eAAAK;AAAA,MACA,gBAAAC;AAAA,MACA,gBAAAC;AAAA,MACA,aAAAE;AAAA,MACA,mBAbwB;AAAA,QACxB,UAAU,EAAE,WAAW,EAAE,OAAOJ,IAAgB;AAAA,QAChD,WAAW,EAAE,WAAW,EAAE,OAAOC,IAAiB;AAAA,QAClD,WAAW;AAAA,UACT,OAAOC;AAAA,UACP,YAAY;AAAA,QAAA;AAAA,MAEhB;AAAA,IAOA;AAAA,EACC,GAAA,CAACP,GAAOH,EAAQ,OAAO,CAAC;AAG7B;"}