@kopexa/dropdown-menu
Version:
A dropdown menu
260 lines (256 loc) • 8.25 kB
JavaScript
"use client";
;
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
// If the importer is in node compatibility mode or this is not an ESM
// file that has been converted to a CommonJS file using a Babel-
// compatible transform (i.e. "__esModule" has not been set), then set
// "default" to the CommonJS "module.exports" for node compatibility.
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// src/index.ts
var index_exports = {};
__export(index_exports, {
DropdownMenu: () => namespace_exports
});
module.exports = __toCommonJS(index_exports);
// src/namespace.ts
var namespace_exports = {};
__export(namespace_exports, {
CheckboxItem: () => DropdownMenuCheckboxItem,
Content: () => DropdownMenuContent,
Group: () => DropdownMenuGroup,
Item: () => DropdownMenuItem,
Label: () => DropdownMenuLabel,
Portal: () => DropdownMenuPortal,
RadioGroup: () => DropdownMenuRadioGroup,
RadioItem: () => DropdownMenuRadioItem,
Root: () => DropdownMenuRoot,
Separator: () => DropdownMenuSeparator,
Shortcut: () => DropdownMenuShortcut,
Sub: () => DropdownMenuSub,
SubContent: () => DropdownMenuSubContent,
SubTrigger: () => DropdownMenuSubTrigger,
Trigger: () => DropdownMenuTrigger
});
// src/dropdown-menu.tsx
var import_icons = require("@kopexa/icons");
var import_react_utils = require("@kopexa/react-utils");
var import_shared_utils = require("@kopexa/shared-utils");
var import_theme = require("@kopexa/theme");
var DropdownMenuPrimitive = __toESM(require("@radix-ui/react-dropdown-menu"));
var import_jsx_runtime = require("react/jsx-runtime");
var [Provider, useDropdownMenuContext] = (0, import_react_utils.createContext)();
function DropdownMenuRoot(props) {
const styles = (0, import_theme.dropdownMenu)();
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Provider, { value: { styles }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DropdownMenuPrimitive.Root, { "data-slot": "dropdown-menu", ...props }) });
}
function DropdownMenuPortal({
...props
}) {
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DropdownMenuPrimitive.Portal, { "data-slot": "dropdown-menu-portal", ...props });
}
function DropdownMenuTrigger({ ...props }) {
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
DropdownMenuPrimitive.Trigger,
{
"data-slot": "dropdown-menu-trigger",
...props
}
);
}
function DropdownMenuContent({
className,
sideOffset = 4,
...props
}) {
const styles = (0, import_theme.dropdownMenu)();
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
DropdownMenuPrimitive.Content,
{
"data-slot": "dropdown-menu-content",
sideOffset,
className: styles.content({ className }),
...props
}
) });
}
function DropdownMenuGroup({ ...props }) {
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DropdownMenuPrimitive.Group, { "data-slot": "dropdown-menu-group", ...props });
}
function DropdownMenuItem({
className,
inset,
variant = "default",
...props
}) {
const { styles } = useDropdownMenuContext();
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
DropdownMenuPrimitive.Item,
{
"data-slot": "dropdown-menu-item",
"data-inset": inset,
"data-variant": variant,
className: styles.item({
className
}),
...props
}
);
}
function DropdownMenuCheckboxItem({
className,
children,
checked,
...props
}) {
const { styles } = useDropdownMenuContext();
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
DropdownMenuPrimitive.CheckboxItem,
{
"data-slot": "dropdown-menu-checkbox-item",
className: styles.checkboxItem({ className }),
checked,
...props,
children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: styles.iconWrapper(), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.CheckIcon, { className: styles.icon() }) }) }),
children
]
}
);
}
function DropdownMenuRadioGroup({
...props
}) {
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
DropdownMenuPrimitive.RadioGroup,
{
"data-slot": "dropdown-menu-radio-group",
...props
}
);
}
function DropdownMenuRadioItem({
className,
children,
...props
}) {
const { styles } = useDropdownMenuContext();
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
DropdownMenuPrimitive.RadioItem,
{
"data-slot": "dropdown-menu-radio-item",
className: styles.radioItem({ className }),
...props,
children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: styles.iconWrapper(), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.CircleIcon, { className: styles.radioItemIcon() }) }) }),
children
]
}
);
}
function DropdownMenuLabel({
className,
inset,
...props
}) {
const { styles } = useDropdownMenuContext();
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
DropdownMenuPrimitive.Label,
{
"data-slot": "dropdown-menu-label",
"data-inset": inset,
className: styles.label({ className }),
...props
}
);
}
function DropdownMenuSeparator({
className,
...props
}) {
const { styles } = useDropdownMenuContext();
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
DropdownMenuPrimitive.Separator,
{
"data-slot": "dropdown-menu-separator",
className: styles.separator({ className }),
...props
}
);
}
function DropdownMenuShortcut({
className,
...props
}) {
const { styles } = useDropdownMenuContext();
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
"span",
{
"data-slot": "dropdown-menu-shortcut",
className: styles.shortcut({ className }),
...props
}
);
}
function DropdownMenuSub({ ...props }) {
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DropdownMenuPrimitive.Sub, { "data-slot": "dropdown-menu-sub", ...props });
}
function DropdownMenuSubTrigger({
className,
inset,
children,
...props
}) {
const { styles } = useDropdownMenuContext();
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
DropdownMenuPrimitive.SubTrigger,
{
"data-slot": "dropdown-menu-sub-trigger",
"data-inset": (0, import_shared_utils.dataAttr)(inset),
className: styles.subTrigger({ className }),
...props,
children: [
children,
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.ChevronRightIcon, { className: styles.subTriggerIcon() })
]
}
);
}
function DropdownMenuSubContent({
className,
...props
}) {
const { styles } = useDropdownMenuContext();
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
DropdownMenuPrimitive.SubContent,
{
"data-slot": "dropdown-menu-sub-content",
className: styles.subContent({ className }),
...props
}
);
}
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
DropdownMenu
});