@sikka/hawa/dist/dropdownMenu/index.mjs

Modern UI Kit made with Tailwind

"use client";

// elements/dropdownMenu/DropdownMenu.tsx
import * as React from "react";
import { Portal } from "@headlessui/react";
import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";

// util/index.ts
import { clsx } from "clsx";
import { twMerge } from "tailwind-merge";
function cn(...inputs) {
  return twMerge(clsx(inputs));
}

// elements/dropdownMenu/DropdownMenu.tsx
var DropdownMenuRoot = DropdownMenuPrimitive.Root;
var DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
var DropdownMenuGroup = DropdownMenuPrimitive.Group;
var DropdownMenuSub = DropdownMenuPrimitive.Sub;
var DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
var DropdownMenuSubTrigger = React.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ React.createElement(
  DropdownMenuPrimitive.SubTrigger,
  {
    ref,
    className: cn(
      "hawa-flex hawa-cursor-default hawa-select-none hawa-items-center hawa-justify-between hawa-rounded-sm hawa-text-sm hawa-outline-none focus:hawa-bg-accent data-[state=open]:hawa-bg-accent",
      inset && "hawa-pl-8",
      className
    ),
    ...props
  },
  /* @__PURE__ */ React.createElement("div", { className: "hawa-flex hawa-flex-row hawa-items-center hawa-gap-2" }, children),
  " ",
  /* @__PURE__ */ React.createElement(
    "svg",
    {
      "aria-label": "Chevron Right Icon",
      stroke: "currentColor",
      fill: "currentColor",
      strokeWidth: "0",
      viewBox: "0 0 16 16",
      height: "1em",
      width: "1em",
      className: cn(props.dir === "rtl" ? "hawa-rotate-180" : "")
    },
    /* @__PURE__ */ React.createElement(
      "path",
      {
        fillRule: "evenodd",
        d: "M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"
      }
    )
  )
));
DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;
var DropdownMenuSubContent = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React.createElement(
  DropdownMenuPrimitive.SubContent,
  {
    ref,
    className: cn(
      "hawa-z-50 hawa-min-w-[8rem] hawa-gap-1 hawa-overflow-hidden hawa-rounded-md hawa-border hawa-bg-popover hawa-p-1 hawa-text-popover-foreground hawa-shadow-lg data-[state=open]:hawa-animate-in data-[state=closed]:hawa-animate-out data-[state=closed]:hawa-fade-out-0 data-[state=open]:hawa-fade-in-0 data-[state=closed]:hawa-zoom-out-95 data-[state=open]:hawa-zoom-in-95 data-[side=bottom]:hawa-slide-in-from-top-2 data-[side=left]:hawa-slide-in-from-right-2 data-[side=right]:hawa-slide-in-from-left-2 data-[side=top]:hawa-slide-in-from-bottom-2",
      className
    ),
    ...props
  }
));
DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
var DropdownMenuContent = React.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ React.createElement(Portal, null, /* @__PURE__ */ React.createElement(
  DropdownMenuPrimitive.Content,
  {
    ref,
    sideOffset,
    className: cn(
      "hawa-z-50 hawa-overflow-hidden hawa-rounded-md hawa-border hawa-bg-popover hawa-p-1 hawa-text-popover-foreground hawa-shadow-md data-[state=open]:hawa-animate-in data-[state=closed]:hawa-animate-out data-[state=closed]:hawa-fade-out-0 data-[state=open]:hawa-fade-in-0 data-[state=closed]:hawa-zoom-out-95 data-[state=open]:hawa-zoom-in-95 data-[side=bottom]:hawa-slide-in-from-top-2 data-[side=left]:hawa-slide-in-from-right-2 data-[side=right]:hawa-slide-in-from-left-2 data-[side=top]:hawa-slide-in-from-bottom-2",
      className
    ),
    ...props
  }
)));
DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
var DropdownMenuItem = React.forwardRef(({ className, inset, badged, slug, LinkComponent = "a", ...props }, ref) => {
  return /* @__PURE__ */ React.createElement(LinkComponent, { href: slug }, /* @__PURE__ */ React.createElement(
    DropdownMenuPrimitive.Item,
    {
      disabled: props.disabled,
      ref,
      className: cn(
        "hawa-relative hawa-flex hawa-cursor-pointer hawa-select-none hawa-items-center hawa-justify-between hawa-rounded-sm hawa-text-sm hawa-outline-none hawa-transition-colors focus:hawa-text-accent-foreground data-[disabled]:hawa-pointer-events-none data-[disabled]:hawa-opacity-50",
        inset && "hawa-pl-8",
        props.end && Array.isArray(props.children) && props.children[1] && "hawa-gap-6",
        className
      ),
      ...props
    },
    /* @__PURE__ */ React.createElement("div", { className: "hawa-flex hawa-flex-row hawa-items-center hawa-gap-2" }, props.children),
    props.end && props.end,
    !props.end && props.shortcut && /* @__PURE__ */ React.createElement(DropdownMenuShortcut, null, props.shortcut),
    !props.end && badged && /* @__PURE__ */ React.createElement("div", { className: "hawa-h-3 hawa-w-3 hawa-rounded-full hawa-bg-red-500" })
  ));
});
DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
var DropdownMenuCheckboxItem = React.forwardRef(({ className, children, checked, ...props }, ref) => /* @__PURE__ */ React.createElement(
  DropdownMenuPrimitive.CheckboxItem,
  {
    ref,
    className: cn(
      "hawa-relative hawa-flex hawa-cursor-default hawa-select-none hawa-items-center hawa-rounded-sm hawa-py-1.5 hawa-pl-8 hawa-pr-2 hawa-text-sm hawa-outline-none hawa-transition-colors focus:hawa-bg-accent focus:hawa-text-accent-foreground data-[disabled]:hawa-pointer-events-none data-[disabled]:hawa-opacity-50",
      className
    ),
    checked,
    ...props
  },
  /* @__PURE__ */ React.createElement("span", { className: "hawa-absolute hawa-left-2 hawa-flex hawa-h-3.5 hawa-w-3.5 hawa-items-center hawa-justify-center" }, /* @__PURE__ */ React.createElement(DropdownMenuPrimitive.ItemIndicator, null, /* @__PURE__ */ React.createElement(
    "svg",
    {
      "aria-label": "Check Mark",
      stroke: "currentColor",
      fill: "currentColor",
      strokeWidth: "0",
      viewBox: "0 0 512 512",
      height: "0.60em",
      width: "0.60em"
    },
    /* @__PURE__ */ React.createElement("path", { d: "M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z" })
  ), " ")),
  children
));
DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName;
var DropdownMenuRadioItem = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ React.createElement(
  DropdownMenuPrimitive.RadioItem,
  {
    ref,
    className: cn(
      "hawa-relative hawa-flex hawa-cursor-pointer hawa-select-none hawa-items-center hawa-rounded-sm hawa-py-1.5 hawa-pl-8 hawa-pr-2 hawa-text-sm hawa-outline-none hawa-transition-colors focus:hawa-bg-accent focus:hawa-text-accent-foreground data-[disabled]:hawa-pointer-events-none data-[disabled]:hawa-opacity-50",
      className
    ),
    ...props
  },
  /* @__PURE__ */ React.createElement("span", { className: "hawa-absolute hawa-left-2 hawa-flex hawa-h-3.5 hawa-w-3.5 hawa-items-center hawa-justify-center" }, /* @__PURE__ */ React.createElement(DropdownMenuPrimitive.ItemIndicator, null, /* @__PURE__ */ React.createElement(
    "svg",
    {
      xmlns: "http://www.w3.org/2000/svg",
      width: "24",
      "aria-label": "Circle",
      height: "24",
      viewBox: "0 0 24 24",
      fill: "none",
      stroke: "currentColor",
      strokeWidth: "2",
      strokeLinecap: "round",
      strokeLinejoin: "round",
      className: "hawa-h-2 hawa-w-2 hawa-fill-current"
    },
    /* @__PURE__ */ React.createElement("circle", { cx: "12", cy: "12", r: "10" })
  ))),
  children
));
DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
var DropdownMenuLabel = React.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ React.createElement(
  DropdownMenuPrimitive.Label,
  {
    ref,
    className: cn(
      "hawa-px-2 hawa-py-1.5 hawa-text-sm hawa-font-semibold",
      inset && "hawa-pl-8",
      className
    ),
    ...props
  }
));
DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
var DropdownMenuSeparator = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React.createElement(
  DropdownMenuPrimitive.Separator,
  {
    ref,
    className: cn("hawa--mx-1 hawa-my-1 hawa-h-px hawa-bg-muted", className),
    ...props
  }
));
DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
var DropdownMenuShortcut = ({
  className,
  ...props
}) => {
  return /* @__PURE__ */ React.createElement(
    "span",
    {
      className: cn(
        "hawa-text-xs hawa-tracking-widest hawa-opacity-60",
        className
      ),
      ...props
    }
  );
};
DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
var DropdownMenu = ({
  trigger,
  items,
  direction,
  sideOffset,
  side,
  className,
  classNames,
  contentProps,
  triggerClassname,
  triggerProps,
  align,
  alignOffset,
  onItemSelect,
  size = "default",
  width = "default",
  header,
  onOpenChange,
  open,
  LinkComponent
}) => {
  const widthStyles = {
    default: "hawa-min-w-[8rem]",
    sm: "hawa-w-fit",
    lg: "hawa-w-[200px]",
    parent: "ddm-w-parent"
  };
  const sizeStyles = {
    default: "hawa-px-2 hawa-py-3 ",
    sm: "hawa-text-xs hawa-px-1.5 hawa-py-1.5 "
  };
  let [values, setValues] = React.useState(
    items.map((item) => item.currentOption)
  );
  return /* @__PURE__ */ React.createElement(
    DropdownMenuRoot,
    {
      onOpenChange,
      open,
      modal: false,
      dir: direction
    },
    /* @__PURE__ */ React.createElement(
      DropdownMenuTrigger,
      {
        asChild: true,
        className: cn(classNames == null ? void 0 : classNames.trigger, triggerClassname),
        ...triggerProps
      },
      trigger
    ),
    /* @__PURE__ */ React.createElement(Portal, null, /* @__PURE__ */ React.createElement(
      DropdownMenuContent,
      {
        side,
        sideOffset,
        align,
        alignOffset,
        className: cn(
          className,
          classNames == null ? void 0 : classNames.content,
          widthStyles[width],
          "hawa-flex hawa-flex-col hawa-gap-1 hawa-overflow-y-auto"
        ),
        style: {
          maxHeight: "var(--radix-dropdown-menu-content-available-height)"
        },
        ...contentProps
      },
      header && header,
      items && items.map((item, index) => {
        var _a;
        const ItemLinkComponent = item.slug ? LinkComponent : "a";
        if (item.itemType === "separator") {
          return /* @__PURE__ */ React.createElement(
            DropdownMenuSeparator,
            {
              key: index,
              className: classNames == null ? void 0 : classNames.separator
            }
          );
        } else if (item.itemType === "label") {
          return /* @__PURE__ */ React.createElement(DropdownMenuLabel, { key: index }, item.label);
        } else if (item.itemType === "radio") {
          let dd = item.currentOption;
          return /* @__PURE__ */ React.createElement(DropdownMenuSub, { key: index }, /* @__PURE__ */ React.createElement(
            DropdownMenuSubTrigger,
            {
              dir: direction,
              className: cn(sizeStyles[size])
            },
            item.icon && item.icon,
            item.label && item.label
          ), /* @__PURE__ */ React.createElement(DropdownMenuSubContent, null, /* @__PURE__ */ React.createElement(
            DropdownMenuRadioGroup,
            {
              value: values[index],
              onValueChange: (e) => {
                let newValues = [...values];
                newValues[index] = e;
                setValues(newValues);
                console.log("changing to ", e);
                if (item.onOptionChange) {
                  item.onOptionChange(e);
                }
              }
            },
            (_a = item.options) == null ? void 0 : _a.map((opt, i) => /* @__PURE__ */ React.createElement(DropdownMenuRadioItem, { key: i, value: opt.value }, opt.label))
          )));
        } else if (item.itemType === "custom") {
          return /* @__PURE__ */ React.createElement("div", { key: index }, item.content);
        } else {
          return item.subitems ? /* @__PURE__ */ React.createElement(DropdownMenuSub, { key: index }, /* @__PURE__ */ React.createElement(
            DropdownMenuSubTrigger,
            {
              dir: direction,
              className: cn(sizeStyles[size])
            },
            item.icon && item.icon,
            item.label && item.label
          ), /* @__PURE__ */ React.createElement(Portal, null, /* @__PURE__ */ React.createElement(DropdownMenuSubContent, null, item.subitems.map((subitem, subIndex) => {
            const SubitemLinkComponent = subitem.slug ? LinkComponent : "a";
            return /* @__PURE__ */ React.createElement(
              DropdownMenuItem,
              {
                key: subIndex,
                LinkComponent: SubitemLinkComponent,
                slug: subitem.slug,
                disabled: subitem.disabled,
                className: cn(
                  sizeStyles[size],
                  !item.icon && !item.label ? "hawa-px-0 hawa-py-0 focus:hawa-bg-transparent" : "focus:hawa-bg-accent"
                ),
                onMouseDown: (event) => {
                  if (event.button === 1 || event.button === 0 && event.ctrlKey) {
                    event.preventDefault();
                    if (subitem.onMiddleClick) {
                      subitem.onMiddleClick(item.value);
                    }
                  }
                },
                onSelect: () => {
                  subitem.action && subitem.action();
                  if (onItemSelect) {
                    onItemSelect(subitem.value);
                  }
                }
              },
              subitem.icon && subitem.icon,
              subitem.label && subitem.label
            );
          })))) : /* @__PURE__ */ React.createElement(
            DropdownMenuItem,
            {
              LinkComponent: ItemLinkComponent,
              slug: item.slug,
              key: index,
              disabled: item.disabled,
              onMouseDown: (event) => {
                if (event.button === 1 || event.button === 0 && event.ctrlKey) {
                  event.preventDefault();
                  if (item.onMiddleClick) {
                    item.onMiddleClick(item.value);
                  }
                }
              },
              onClick: (event) => {
                if (item.onClick) {
                  item.onClick(item.value);
                }
              },
              onSelect: (e) => {
                if (item.presist) {
                  e.preventDefault();
                }
                if (item.action) {
                  item.action();
                  if (onItemSelect) {
                    onItemSelect(item.value);
                  }
                } else {
                  if (onItemSelect) {
                    onItemSelect(item.value);
                  }
                }
              },
              end: item.end,
              shortcut: item.shortcut,
              badged: item.badged,
              className: cn(
                sizeStyles[size],
                !item.icon && !item.label ? "hawa-px-0 hawa-py-0 focus:hawa-bg-transparent" : "focus:hawa-bg-accent",
                item.presist && "focus:hawa-bg-transparent",
                classNames == null ? void 0 : classNames.item
              )
            },
            item.icon && item.icon,
            item.label && item.label
          );
        }
      })
    ))
  );
};
var DropdownMenuRadio = (props) => {
  const ariaLabel = props.label ? `${props.label} radio group` : void 0;
  const ariaLabelledby = props.label ? `${props.label}-label` : void 0;
  return /* @__PURE__ */ React.createElement(DropdownMenuRoot, null, /* @__PURE__ */ React.createElement(DropdownMenuTrigger, { asChild: true }, props.trigger), /* @__PURE__ */ React.createElement(
    DropdownMenuContent,
    {
      align: props.align,
      side: props.side,
      "aria-label": ariaLabel,
      "aria-labelledby": ariaLabelledby,
      ...props.contentProps
    },
    props.label && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(DropdownMenuLabel, { id: `${props.label}-label` }, props.label), /* @__PURE__ */ React.createElement(DropdownMenuSeparator, null)),
    /* @__PURE__ */ React.createElement(
      DropdownMenuRadioGroup,
      {
        value: props.value,
        onValueChange: props.onValueChange,
        ...props.radioGroupProps
      },
      props.options.map((opt, i) => /* @__PURE__ */ React.createElement(
        DropdownMenuRadioItem,
        {
          key: i,
          ...opt.props,
          value: opt.value,
          "aria-checked": props.value === opt.value
        },
        opt.label
      ))
    )
  ));
};
export {
  DropdownMenu,
  DropdownMenuCheckboxItem,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuItem,
  DropdownMenuLabel,
  Portal as DropdownMenuPortal,
  DropdownMenuRadio,
  DropdownMenuRadioGroup,
  DropdownMenuRadioItem,
  DropdownMenuRoot,
  DropdownMenuSeparator,
  DropdownMenuShortcut,
  DropdownMenuSub,
  DropdownMenuSubContent,
  DropdownMenuSubTrigger,
  DropdownMenuTrigger
};
//# sourceMappingURL=index.mjs.map