Skip to content

fix: ContextMenuLabel does not exist. #197

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

fix: ContextMenuLabel does not exist. #197

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion apps/docs/public/r/context-menu.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
"files": [
{
"path": "src/registry/ui/context-menu.tsx",
"content": "import type { Component, ComponentProps, JSX, ValidComponent } from \"solid-js\"\nimport { splitProps } from \"solid-js\"\n\nimport * as ContextMenuPrimitive from \"@kobalte/core/context-menu\"\nimport type { PolymorphicProps } from \"@kobalte/core/polymorphic\"\n\nimport { cn } from \"~/lib/utils\"\n\nconst ContextMenuTrigger = ContextMenuPrimitive.Trigger\nconst ContextMenuPortal = ContextMenuPrimitive.Portal\nconst ContextMenuSub = ContextMenuPrimitive.Sub\nconst ContextMenuGroup = ContextMenuPrimitive.Group\nconst ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup\n\nconst ContextMenu: Component<ContextMenuPrimitive.ContextMenuRootProps> = (props) => {\n return <ContextMenuPrimitive.Root gutter={4} {...props} />\n}\n\ntype ContextMenuContentProps<T extends ValidComponent = \"div\"> =\n ContextMenuPrimitive.ContextMenuContentProps<T> & {\n class?: string | undefined\n }\n\nconst ContextMenuContent = <T extends ValidComponent = \"div\">(\n props: PolymorphicProps<T, ContextMenuContentProps<T>>\n) => {\n const [local, others] = splitProps(props as ContextMenuContentProps, [\"class\"])\n return (\n <ContextMenuPrimitive.Portal>\n <ContextMenuPrimitive.Content\n class={cn(\n \"z-50 min-w-32 origin-[var(--kb-menu-content-transform-origin)] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md animate-in\",\n local.class\n )}\n {...others}\n />\n </ContextMenuPrimitive.Portal>\n )\n}\n\ntype ContextMenuItemProps<T extends ValidComponent = \"div\"> =\n ContextMenuPrimitive.ContextMenuItemProps<T> & {\n class?: string | undefined\n }\n\nconst ContextMenuItem = <T extends ValidComponent = \"div\">(\n props: PolymorphicProps<T, ContextMenuItemProps<T>>\n) => {\n const [local, others] = splitProps(props as ContextMenuItemProps, [\"class\"])\n return (\n <ContextMenuPrimitive.Item\n class={cn(\n \"relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n local.class\n )}\n {...others}\n />\n )\n}\n\nconst ContextMenuShortcut: Component<ComponentProps<\"span\">> = (props) => {\n const [local, others] = splitProps(props, [\"class\"])\n return <span class={cn(\"ml-auto text-xs tracking-widest opacity-60\", local.class)} {...others} />\n}\n\ntype ContextMenuSeparatorProps<T extends ValidComponent = \"hr\"> =\n ContextMenuPrimitive.ContextMenuSeparatorProps<T> & {\n class?: string | undefined\n }\n\nconst ContextMenuSeparator = <T extends ValidComponent = \"hr\">(\n props: PolymorphicProps<T, ContextMenuSeparatorProps<T>>\n) => {\n const [local, others] = splitProps(props as ContextMenuSeparatorProps, [\"class\"])\n return (\n <ContextMenuPrimitive.Separator\n class={cn(\"-mx-1 my-1 h-px bg-muted\", local.class)}\n {...others}\n />\n )\n}\n\ntype ContextMenuSubTriggerProps<T extends ValidComponent = \"div\"> =\n ContextMenuPrimitive.ContextMenuSubTriggerProps<T> & {\n class?: string | undefined\n children?: JSX.Element\n }\n\nconst ContextMenuSubTrigger = <T extends ValidComponent = \"div\">(\n props: PolymorphicProps<T, ContextMenuSubTriggerProps<T>>\n) => {\n const [local, others] = splitProps(props as ContextMenuSubTriggerProps, [\"class\", \"children\"])\n return (\n <ContextMenuPrimitive.SubTrigger\n class={cn(\n \"flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent\",\n local.class\n )}\n {...others}\n >\n {local.children}\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n class=\"ml-auto size-4\"\n >\n <path d=\"M9 6l6 6l-6 6\" />\n </svg>\n </ContextMenuPrimitive.SubTrigger>\n )\n}\n\ntype ContextMenuSubContentProps<T extends ValidComponent = \"div\"> =\n ContextMenuPrimitive.ContextMenuSubContentProps<T> & {\n class?: string | undefined\n }\n\nconst ContextMenuSubContent = <T extends ValidComponent = \"div\">(\n props: PolymorphicProps<T, ContextMenuSubContentProps<T>>\n) => {\n const [local, others] = splitProps(props as ContextMenuSubContentProps, [\"class\"])\n return (\n <ContextMenuPrimitive.SubContent\n class={cn(\n \"z-50 min-w-32 origin-[var(--kb-menu-content-transform-origin)] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md animate-in\",\n local.class\n )}\n {...others}\n />\n )\n}\n\ntype ContextMenuCheckboxItemProps<T extends ValidComponent = \"div\"> =\n ContextMenuPrimitive.ContextMenuCheckboxItemProps<T> & {\n class?: string | undefined\n children?: JSX.Element\n }\n\nconst ContextMenuCheckboxItem = <T extends ValidComponent = \"div\">(\n props: PolymorphicProps<T, ContextMenuCheckboxItemProps<T>>\n) => {\n const [local, others] = splitProps(props as ContextMenuCheckboxItemProps, [\"class\", \"children\"])\n return (\n <ContextMenuPrimitive.CheckboxItem\n class={cn(\n \"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n local.class\n )}\n {...others}\n >\n <span class=\"absolute left-2 flex size-3.5 items-center justify-center\">\n <ContextMenuPrimitive.ItemIndicator>\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n class=\"size-4\"\n >\n <path d=\"M5 12l5 5l10 -10\" />\n </svg>\n </ContextMenuPrimitive.ItemIndicator>\n </span>\n {local.children}\n </ContextMenuPrimitive.CheckboxItem>\n )\n}\n\ntype ContextMenuGroupLabelProps<T extends ValidComponent = \"span\"> =\n ContextMenuPrimitive.ContextMenuGroupLabelProps<T> & {\n class?: string | undefined\n }\n\nconst ContextMenuGroupLabel = <T extends ValidComponent = \"span\">(\n props: PolymorphicProps<T, ContextMenuGroupLabelProps<T>>\n) => {\n const [local, others] = splitProps(props as ContextMenuGroupLabelProps, [\"class\"])\n return (\n <ContextMenuPrimitive.GroupLabel\n class={cn(\"px-2 py-1.5 text-sm font-semibold\", local.class)}\n {...others}\n />\n )\n}\n\ntype ContextMenuRadioItemProps<T extends ValidComponent = \"div\"> =\n ContextMenuPrimitive.ContextMenuRadioItemProps<T> & {\n class?: string | undefined\n children?: JSX.Element\n }\n\nconst ContextMenuRadioItem = <T extends ValidComponent = \"div\">(\n props: PolymorphicProps<T, ContextMenuRadioItemProps<T>>\n) => {\n const [local, others] = splitProps(props as ContextMenuRadioItemProps, [\"class\", \"children\"])\n return (\n <ContextMenuPrimitive.RadioItem\n class={cn(\n \"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n local.class\n )}\n {...others}\n >\n <span class=\"absolute left-2 flex size-3.5 items-center justify-center\">\n <ContextMenuPrimitive.ItemIndicator>\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n class=\"size-2 fill-current\"\n >\n <path d=\"M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0\" />\n </svg>\n </ContextMenuPrimitive.ItemIndicator>\n </span>\n {local.children}\n </ContextMenuPrimitive.RadioItem>\n )\n}\n\nexport {\n ContextMenu,\n ContextMenuTrigger,\n ContextMenuPortal,\n ContextMenuContent,\n ContextMenuItem,\n ContextMenuShortcut,\n ContextMenuSeparator,\n ContextMenuSub,\n ContextMenuSubTrigger,\n ContextMenuSubContent,\n ContextMenuCheckboxItem,\n ContextMenuGroup,\n ContextMenuGroupLabel,\n ContextMenuRadioGroup,\n ContextMenuRadioItem\n}\n",
"content": "import type { Component, ComponentProps, JSX, ValidComponent } from \"solid-js\"\nimport { splitProps } from \"solid-js\"\n\nimport * as ContextMenuPrimitive from \"@kobalte/core/context-menu\"\nimport type { PolymorphicProps } from \"@kobalte/core/polymorphic\"\n\nimport { cn } from \"~/lib/utils\"\n\nconst ContextMenuTrigger = ContextMenuPrimitive.Trigger\nconst ContextMenuPortal = ContextMenuPrimitive.Portal\nconst ContextMenuSub = ContextMenuPrimitive.Sub\nconst ContextMenuGroup = ContextMenuPrimitive.Group\nconst ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup\n\nconst ContextMenu: Component<ContextMenuPrimitive.ContextMenuRootProps> = (props) => {\n return <ContextMenuPrimitive.Root gutter={4} {...props} />\n}\n\ntype ContextMenuContentProps<T extends ValidComponent = \"div\"> =\n ContextMenuPrimitive.ContextMenuContentProps<T> & {\n class?: string | undefined\n }\n\nconst ContextMenuContent = <T extends ValidComponent = \"div\">(\n props: PolymorphicProps<T, ContextMenuContentProps<T>>\n) => {\n const [local, others] = splitProps(props as ContextMenuContentProps, [\"class\"])\n return (\n <ContextMenuPrimitive.Portal>\n <ContextMenuPrimitive.Content\n class={cn(\n \"z-50 min-w-32 origin-[var(--kb-menu-content-transform-origin)] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md animate-in\",\n local.class\n )}\n {...others}\n />\n </ContextMenuPrimitive.Portal>\n )\n}\n\ntype ContextMenuItemProps<T extends ValidComponent = \"div\"> =\n ContextMenuPrimitive.ContextMenuItemProps<T> & {\n class?: string | undefined\n }\n\nconst ContextMenuItem = <T extends ValidComponent = \"div\">(\n props: PolymorphicProps<T, ContextMenuItemProps<T>>\n) => {\n const [local, others] = splitProps(props as ContextMenuItemProps, [\"class\"])\n return (\n <ContextMenuPrimitive.Item\n class={cn(\n \"relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n local.class\n )}\n {...others}\n />\n )\n}\n\nconst ContextMenuShortcut: Component<ComponentProps<\"span\">> = (props) => {\n const [local, others] = splitProps(props, [\"class\"])\n return <span class={cn(\"ml-auto text-xs tracking-widest opacity-60\", local.class)} {...others} />\n}\n\nconst ContextMenuLabel: Component<ComponentProps<'div'> & { inset?: boolean }> = (props) => {\n const [, rest] = splitProps(props, ['class', 'inset']);\n return (\n <div\n class={cn('px-2 py-1.5 text-sm font-semibold', props.inset && 'pl-8', props.class)}\n {...rest}\n />\n );\n};\n\ntype ContextMenuSeparatorProps<T extends ValidComponent = \"hr\"> =\n ContextMenuPrimitive.ContextMenuSeparatorProps<T> & {\n class?: string | undefined\n }\n\nconst ContextMenuSeparator = <T extends ValidComponent = \"hr\">(\n props: PolymorphicProps<T, ContextMenuSeparatorProps<T>>\n) => {\n const [local, others] = splitProps(props as ContextMenuSeparatorProps, [\"class\"])\n return (\n <ContextMenuPrimitive.Separator\n class={cn(\"-mx-1 my-1 h-px bg-muted\", local.class)}\n {...others}\n />\n )\n}\n\ntype ContextMenuSubTriggerProps<T extends ValidComponent = \"div\"> =\n ContextMenuPrimitive.ContextMenuSubTriggerProps<T> & {\n class?: string | undefined\n children?: JSX.Element\n }\n\nconst ContextMenuSubTrigger = <T extends ValidComponent = \"div\">(\n props: PolymorphicProps<T, ContextMenuSubTriggerProps<T>>\n) => {\n const [local, others] = splitProps(props as ContextMenuSubTriggerProps, [\"class\", \"children\"])\n return (\n <ContextMenuPrimitive.SubTrigger\n class={cn(\n \"flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent\",\n local.class\n )}\n {...others}\n >\n {local.children}\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n class=\"ml-auto size-4\"\n >\n <path d=\"M9 6l6 6l-6 6\" />\n </svg>\n </ContextMenuPrimitive.SubTrigger>\n )\n}\n\ntype ContextMenuSubContentProps<T extends ValidComponent = \"div\"> =\n ContextMenuPrimitive.ContextMenuSubContentProps<T> & {\n class?: string | undefined\n }\n\nconst ContextMenuSubContent = <T extends ValidComponent = \"div\">(\n props: PolymorphicProps<T, ContextMenuSubContentProps<T>>\n) => {\n const [local, others] = splitProps(props as ContextMenuSubContentProps, [\"class\"])\n return (\n <ContextMenuPrimitive.SubContent\n class={cn(\n \"z-50 min-w-32 origin-[var(--kb-menu-content-transform-origin)] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md animate-in\",\n local.class\n )}\n {...others}\n />\n )\n}\n\ntype ContextMenuCheckboxItemProps<T extends ValidComponent = \"div\"> =\n ContextMenuPrimitive.ContextMenuCheckboxItemProps<T> & {\n class?: string | undefined\n children?: JSX.Element\n }\n\nconst ContextMenuCheckboxItem = <T extends ValidComponent = \"div\">(\n props: PolymorphicProps<T, ContextMenuCheckboxItemProps<T>>\n) => {\n const [local, others] = splitProps(props as ContextMenuCheckboxItemProps, [\"class\", \"children\"])\n return (\n <ContextMenuPrimitive.CheckboxItem\n class={cn(\n \"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n local.class\n )}\n {...others}\n >\n <span class=\"absolute left-2 flex size-3.5 items-center justify-center\">\n <ContextMenuPrimitive.ItemIndicator>\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n class=\"size-4\"\n >\n <path d=\"M5 12l5 5l10 -10\" />\n </svg>\n </ContextMenuPrimitive.ItemIndicator>\n </span>\n {local.children}\n </ContextMenuPrimitive.CheckboxItem>\n )\n}\n\ntype ContextMenuGroupLabelProps<T extends ValidComponent = \"span\"> =\n ContextMenuPrimitive.ContextMenuGroupLabelProps<T> & {\n class?: string | undefined\n }\n\nconst ContextMenuGroupLabel = <T extends ValidComponent = \"span\">(\n props: PolymorphicProps<T, ContextMenuGroupLabelProps<T>>\n) => {\n const [local, others] = splitProps(props as ContextMenuGroupLabelProps, [\"class\"])\n return (\n <ContextMenuPrimitive.GroupLabel\n class={cn(\"px-2 py-1.5 text-sm font-semibold\", local.class)}\n {...others}\n />\n )\n}\n\ntype ContextMenuRadioItemProps<T extends ValidComponent = \"div\"> =\n ContextMenuPrimitive.ContextMenuRadioItemProps<T> & {\n class?: string | undefined\n children?: JSX.Element\n }\n\nconst ContextMenuRadioItem = <T extends ValidComponent = \"div\">(\n props: PolymorphicProps<T, ContextMenuRadioItemProps<T>>\n) => {\n const [local, others] = splitProps(props as ContextMenuRadioItemProps, [\"class\", \"children\"])\n return (\n <ContextMenuPrimitive.RadioItem\n class={cn(\n \"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n local.class\n )}\n {...others}\n >\n <span class=\"absolute left-2 flex size-3.5 items-center justify-center\">\n <ContextMenuPrimitive.ItemIndicator>\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n class=\"size-2 fill-current\"\n >\n <path d=\"M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0\" />\n </svg>\n </ContextMenuPrimitive.ItemIndicator>\n </span>\n {local.children}\n </ContextMenuPrimitive.RadioItem>\n )\n}\n\nexport {\n ContextMenu,\n ContextMenuTrigger,\n ContextMenuPortal,\n ContextMenuContent,\n ContextMenuItem,\n ContextMenuLabel,\n ContextMenuShortcut,\n ContextMenuSeparator,\n ContextMenuSub,\n ContextMenuSubTrigger,\n ContextMenuSubContent,\n ContextMenuCheckboxItem,\n ContextMenuGroup,\n ContextMenuGroupLabel,\n ContextMenuRadioGroup,\n ContextMenuRadioItem\n}\n",
"type": "registry:ui"
}
]
Expand Down
11 changes: 11 additions & 0 deletions apps/docs/src/registry/ui/context-menu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,6 +63,16 @@ const ContextMenuShortcut: Component<ComponentProps<"span">> = (props) => {
return <span class={cn("ml-auto text-xs tracking-widest opacity-60", local.class)} {...others} />
}

const ContextMenuLabel: Component<ComponentProps<'div'> & { inset?: boolean }> = (props) => {
const [, rest] = splitProps(props, ['class', 'inset']);
return (
<div
class={cn('px-2 py-1.5 text-sm font-semibold', props.inset && 'pl-8', props.class)}
{...rest}
/>
);
};

type ContextMenuSeparatorProps<T extends ValidComponent = "hr"> =
ContextMenuPrimitive.ContextMenuSeparatorProps<T> & {
class?: string | undefined
Expand Down Expand Up @@ -236,6 +246,7 @@ export {
ContextMenuPortal,
ContextMenuContent,
ContextMenuItem,
ContextMenuLabel,
ContextMenuShortcut,
ContextMenuSeparator,
ContextMenuSub,
Expand Down