@serendie/ui/dist/components/DropdownMenu/DropdownMenu.js

Adaptive UI component library as part of Serendie Design System by Mitsubishi Electric

import { jsxs as m, jsx as e } from "react/jsx-runtime";
import { menu_exports as t } from "../../node_modules/@ark-ui/react/dist/components/menu/menu.js";
import { Portal as u } from "../../node_modules/@ark-ui/react/dist/components/portal/portal.js";
import { SerendieSymbolMenu as g, SerendieSymbolChevronDown as h } from "@serendie/symbols";
import { Button as x } from "../Button/Button.js";
import { IconButton as f } from "../IconButton/IconButton.js";
import { useAutoPortalContainer as b } from "../../hooks/useAutoPortalContainer.js";
import { sva as S } from "../../styled-system/css/sva.js";
const I = S({
  slots: ["content", "itemGroup", "item", "itemIcon", "button", "buttonIcon"],
  base: {
    content: {
      bgColor: "sd.system.color.component.surfaceContainerBright",
      borderRadius: "sd.system.dimension.radius.medium",
      bg: "sd.system.color.component.surfaceContainerBright",
      boxShadow: "sd.system.elevation.shadow.level1",
      outline: "none",
      zIndex: "sd.system.elevation.zIndex.dropdown"
    },
    itemGroup: {
      width: 240
    },
    item: {
      display: "flex",
      height: "48px",
      alignItems: "center",
      gap: "sd.system.dimension.spacing.small",
      paddingX: "sd.system.dimension.spacing.medium",
      paddingY: "sd.system.dimension.spacing.extraSmall",
      cursor: "pointer",
      textStyle: "sd.system.typography.body.medium_compact",
      expanded: {
        textStyle: "sd.system.typography.body.medium_expanded"
      },
      _hover: {
        bgColor: "sd.system.color.interaction.hoveredVariant"
      },
      _highlighted: {
        bgColor: "sd.system.color.interaction.hoveredVariant"
      }
    },
    itemIcon: {
      "& svg": {
        width: "sd.reference.dimension.scale.8",
        height: "sd.reference.dimension.scale.8"
      }
    },
    button: {
      paddingY: "sd.system.dimension.spacing.small",
      paddingInlineStart: "sd.system.dimension.spacing.medium",
      paddingRight: "sd.system.dimension.spacing.small",
      color: "sd.system.color.component.onSurfaceVariant",
      gap: "sd.system.dimension.spacing.extraSmall",
      textStyle: "sd.system.typography.body.medium_compact",
      expanded: {
        textStyle: "sd.system.typography.body.medium_expanded"
      },
      _disabled: {
        outline: "solid",
        outlineOffset: "0px",
        outlineColor: "sd.system.color.component.outline",
        outlineWidth: "sd.system.dimension.border.medium"
      },
      _expanded: {
        textStyle: "sd.system.typography.body.medium_compact",
        expanded: {
          textStyle: "sd.system.typography.body.medium_expanded"
        },
        // Note: leftIcon が _open を受け取れないため button 側で制御
        "& svg": {
          transform: "rotate(180deg)"
        }
      }
    },
    buttonIcon: {
      color: "sd.system.color.component.onSurface",
      marginLeft: "2px",
      transition: "transform 0.2s"
    }
  }
}), z = ({
  styleType: a = "default",
  title: s,
  items: l,
  disabled: i,
  icon: c,
  portalled: d = !0,
  ...p
}) => {
  const o = I(), { triggerRef: r, portalContainerRef: y } = b(d);
  return /* @__PURE__ */ m(
    t.Root,
    {
      positioning: {
        offset: {
          mainAxis: 1,
          crossAxis: 0
        }
      },
      ...p,
      children: [
        /* @__PURE__ */ e(t.Trigger, { asChild: !0, children: a === "iconButton" ? /* @__PURE__ */ e(
          f,
          {
            ref: r,
            icon: c || /* @__PURE__ */ e(g, { className: o.buttonIcon }),
            shape: "rectangle",
            disabled: i,
            styleType: "outlined",
            title: s
          }
        ) : /* @__PURE__ */ e(
          x,
          {
            ref: r,
            styleType: "rectangle",
            size: "medium",
            disabled: i,
            rightIcon: /* @__PURE__ */ e(h, { className: o.buttonIcon }),
            className: o.button,
            children: s
          }
        ) }),
        /* @__PURE__ */ e(u, { disabled: !d, container: y, children: /* @__PURE__ */ e(t.Positioner, { children: /* @__PURE__ */ e(t.Content, { className: o.content, children: /* @__PURE__ */ e(t.ItemGroup, { className: o.itemGroup, children: l.map((n) => /* @__PURE__ */ m(
          t.Item,
          {
            value: n.value,
            className: o.item,
            children: [
              n.icon && /* @__PURE__ */ e("div", { className: o.itemIcon, children: n.icon }),
              n.label
            ]
          },
          n.value
        )) }) }) }) })
      ]
    }
  );
};
export {
  z as DropdownMenu,
  I as DropdownMenuStyle
};