Skip to content

Commit ded27ef

Browse files
feat(ui): added anchor prop to Popover, Tooltip, and PreviewCard components
1 parent eca5fdd commit ded27ef

File tree

21 files changed

+53
-11
lines changed

21 files changed

+53
-11
lines changed

apps/ui/public/r/autocomplete.json

Lines changed: 1 addition & 1 deletion
Large diffs are not rendered by default.

apps/ui/public/r/combobox.json

Lines changed: 1 addition & 1 deletion
Large diffs are not rendered by default.

apps/ui/public/r/menu.json

Lines changed: 1 addition & 1 deletion
Large diffs are not rendered by default.

apps/ui/public/r/popover.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
"files": [
99
{
1010
"path": "registry/default/ui/popover.tsx",
11-
"content": "\"use client\";\n\nimport { Popover as PopoverPrimitive } from \"@base-ui/react/popover\";\n\nimport { cn } from \"@/registry/default/lib/utils\";\n\nconst PopoverCreateHandle = PopoverPrimitive.createHandle;\n\nconst Popover = PopoverPrimitive.Root;\n\nfunction PopoverTrigger(props: PopoverPrimitive.Trigger.Props) {\n return <PopoverPrimitive.Trigger data-slot=\"popover-trigger\" {...props} />;\n}\n\nfunction PopoverPopup({\n children,\n className,\n side = \"bottom\",\n align = \"center\",\n sideOffset = 4,\n alignOffset = 0,\n tooltipStyle = false,\n ...props\n}: PopoverPrimitive.Popup.Props & {\n side?: PopoverPrimitive.Positioner.Props[\"side\"];\n align?: PopoverPrimitive.Positioner.Props[\"align\"];\n sideOffset?: PopoverPrimitive.Positioner.Props[\"sideOffset\"];\n alignOffset?: PopoverPrimitive.Positioner.Props[\"alignOffset\"];\n tooltipStyle?: boolean;\n}) {\n return (\n <PopoverPrimitive.Portal>\n <PopoverPrimitive.Positioner\n align={align}\n alignOffset={alignOffset}\n className=\"z-50 h-(--positioner-height) w-(--positioner-width) max-w-(--available-width) transition-[top,left,right,bottom,transform] data-instant:transition-none\"\n data-slot=\"popover-positioner\"\n side={side}\n sideOffset={sideOffset}\n >\n <PopoverPrimitive.Popup\n className={cn(\n \"relative flex h-(--popup-height,auto) w-(--popup-width,auto) origin-(--transform-origin) rounded-lg border bg-popover not-dark:bg-clip-padding text-popover-foreground shadow-lg/5 transition-[width,height,scale,opacity] before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] data-starting-style:scale-98 data-starting-style:opacity-0 dark:before:shadow-[0_-1px_--theme(--color-white/6%)]\",\n tooltipStyle &&\n \"w-fit text-balance rounded-md text-xs shadow-md/5 before:rounded-[calc(var(--radius-md)-1px)]\",\n className,\n )}\n data-slot=\"popover-popup\"\n {...props}\n >\n <PopoverPrimitive.Viewport\n className={cn(\n \"relative size-full max-h-(--available-height) overflow-clip px-(--viewport-inline-padding) py-4 outline-none [--viewport-inline-padding:--spacing(4)] data-instant:transition-none **:data-current:data-ending-style:opacity-0 **:data-current:data-starting-style:opacity-0 **:data-previous:data-ending-style:opacity-0 **:data-previous:data-starting-style:opacity-0 **:data-current:w-[calc(var(--popup-width)-2*var(--viewport-inline-padding)-2px)] **:data-previous:w-[calc(var(--popup-width)-2*var(--viewport-inline-padding)-2px)] **:data-current:opacity-100 **:data-previous:opacity-100 **:data-current:transition-opacity **:data-previous:transition-opacity\",\n tooltipStyle\n ? \"py-1 [--viewport-inline-padding:--spacing(2)]\"\n : \"not-data-transitioning:overflow-y-auto\",\n )}\n data-slot=\"popover-viewport\"\n >\n {children}\n </PopoverPrimitive.Viewport>\n </PopoverPrimitive.Popup>\n </PopoverPrimitive.Positioner>\n </PopoverPrimitive.Portal>\n );\n}\n\nfunction PopoverClose({ ...props }: PopoverPrimitive.Close.Props) {\n return <PopoverPrimitive.Close data-slot=\"popover-close\" {...props} />;\n}\n\nfunction PopoverTitle({ className, ...props }: PopoverPrimitive.Title.Props) {\n return (\n <PopoverPrimitive.Title\n className={cn(\"font-semibold text-lg leading-none\", className)}\n data-slot=\"popover-title\"\n {...props}\n />\n );\n}\n\nfunction PopoverDescription({\n className,\n ...props\n}: PopoverPrimitive.Description.Props) {\n return (\n <PopoverPrimitive.Description\n className={cn(\"text-muted-foreground text-sm\", className)}\n data-slot=\"popover-description\"\n {...props}\n />\n );\n}\n\nexport {\n PopoverCreateHandle,\n Popover,\n PopoverTrigger,\n PopoverPopup,\n PopoverPopup as PopoverContent,\n PopoverTitle,\n PopoverDescription,\n PopoverClose,\n};\n",
11+
"content": "\"use client\";\n\nimport { Popover as PopoverPrimitive } from \"@base-ui/react/popover\";\n\nimport { cn } from \"@/registry/default/lib/utils\";\n\nconst PopoverCreateHandle = PopoverPrimitive.createHandle;\n\nconst Popover = PopoverPrimitive.Root;\n\nfunction PopoverTrigger(props: PopoverPrimitive.Trigger.Props) {\n return <PopoverPrimitive.Trigger data-slot=\"popover-trigger\" {...props} />;\n}\n\nfunction PopoverPopup({\n children,\n className,\n side = \"bottom\",\n align = \"center\",\n sideOffset = 4,\n alignOffset = 0,\n tooltipStyle = false,\n anchor,\n ...props\n}: PopoverPrimitive.Popup.Props & {\n side?: PopoverPrimitive.Positioner.Props[\"side\"];\n align?: PopoverPrimitive.Positioner.Props[\"align\"];\n sideOffset?: PopoverPrimitive.Positioner.Props[\"sideOffset\"];\n alignOffset?: PopoverPrimitive.Positioner.Props[\"alignOffset\"];\n tooltipStyle?: boolean;\n anchor?: PopoverPrimitive.Positioner.Props[\"anchor\"];\n}) {\n return (\n <PopoverPrimitive.Portal>\n <PopoverPrimitive.Positioner\n align={align}\n alignOffset={alignOffset}\n anchor={anchor}\n className=\"z-50 h-(--positioner-height) w-(--positioner-width) max-w-(--available-width) transition-[top,left,right,bottom,transform] data-instant:transition-none\"\n data-slot=\"popover-positioner\"\n side={side}\n sideOffset={sideOffset}\n >\n <PopoverPrimitive.Popup\n className={cn(\n \"relative flex h-(--popup-height,auto) w-(--popup-width,auto) origin-(--transform-origin) rounded-lg border bg-popover not-dark:bg-clip-padding text-popover-foreground shadow-lg/5 transition-[width,height,scale,opacity] before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] data-starting-style:scale-98 data-starting-style:opacity-0 dark:before:shadow-[0_-1px_--theme(--color-white/6%)]\",\n tooltipStyle &&\n \"w-fit text-balance rounded-md text-xs shadow-md/5 before:rounded-[calc(var(--radius-md)-1px)]\",\n className,\n )}\n data-slot=\"popover-popup\"\n {...props}\n >\n <PopoverPrimitive.Viewport\n className={cn(\n \"relative size-full max-h-(--available-height) overflow-clip px-(--viewport-inline-padding) py-4 outline-none [--viewport-inline-padding:--spacing(4)] data-instant:transition-none **:data-current:data-ending-style:opacity-0 **:data-current:data-starting-style:opacity-0 **:data-previous:data-ending-style:opacity-0 **:data-previous:data-starting-style:opacity-0 **:data-current:w-[calc(var(--popup-width)-2*var(--viewport-inline-padding)-2px)] **:data-previous:w-[calc(var(--popup-width)-2*var(--viewport-inline-padding)-2px)] **:data-current:opacity-100 **:data-previous:opacity-100 **:data-current:transition-opacity **:data-previous:transition-opacity\",\n tooltipStyle\n ? \"py-1 [--viewport-inline-padding:--spacing(2)]\"\n : \"not-data-transitioning:overflow-y-auto\",\n )}\n data-slot=\"popover-viewport\"\n >\n {children}\n </PopoverPrimitive.Viewport>\n </PopoverPrimitive.Popup>\n </PopoverPrimitive.Positioner>\n </PopoverPrimitive.Portal>\n );\n}\n\nfunction PopoverClose({ ...props }: PopoverPrimitive.Close.Props) {\n return <PopoverPrimitive.Close data-slot=\"popover-close\" {...props} />;\n}\n\nfunction PopoverTitle({ className, ...props }: PopoverPrimitive.Title.Props) {\n return (\n <PopoverPrimitive.Title\n className={cn(\"font-semibold text-lg leading-none\", className)}\n data-slot=\"popover-title\"\n {...props}\n />\n );\n}\n\nfunction PopoverDescription({\n className,\n ...props\n}: PopoverPrimitive.Description.Props) {\n return (\n <PopoverPrimitive.Description\n className={cn(\"text-muted-foreground text-sm\", className)}\n data-slot=\"popover-description\"\n {...props}\n />\n );\n}\n\nexport {\n PopoverCreateHandle,\n Popover,\n PopoverTrigger,\n PopoverPopup,\n PopoverPopup as PopoverContent,\n PopoverTitle,\n PopoverDescription,\n PopoverClose,\n};\n",
1212
"type": "registry:ui"
1313
}
1414
]

apps/ui/public/r/preview-card.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
"files": [
99
{
1010
"path": "registry/default/ui/preview-card.tsx",
11-
"content": "\"use client\";\n\nimport { PreviewCard as PreviewCardPrimitive } from \"@base-ui/react/preview-card\";\n\nimport { cn } from \"@/registry/default/lib/utils\";\n\nconst PreviewCard = PreviewCardPrimitive.Root;\n\nfunction PreviewCardTrigger({ ...props }: PreviewCardPrimitive.Trigger.Props) {\n return (\n <PreviewCardPrimitive.Trigger data-slot=\"preview-card-trigger\" {...props} />\n );\n}\n\nfunction PreviewCardPopup({\n className,\n children,\n align = \"center\",\n sideOffset = 4,\n ...props\n}: PreviewCardPrimitive.Popup.Props & {\n align?: PreviewCardPrimitive.Positioner.Props[\"align\"];\n sideOffset?: PreviewCardPrimitive.Positioner.Props[\"sideOffset\"];\n}) {\n return (\n <PreviewCardPrimitive.Portal>\n <PreviewCardPrimitive.Positioner\n align={align}\n className=\"z-50\"\n data-slot=\"preview-card-positioner\"\n sideOffset={sideOffset}\n >\n <PreviewCardPrimitive.Popup\n className={cn(\n \"relative flex w-64 origin-(--transform-origin) text-balance rounded-lg border bg-popover not-dark:bg-clip-padding p-4 text-popover-foreground text-sm shadow-lg/5 transition-[scale,opacity] before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] data-ending-style:scale-98 data-starting-style:scale-98 data-ending-style:opacity-0 data-starting-style:opacity-0 dark:before:shadow-[0_-1px_--theme(--color-white/6%)]\",\n className,\n )}\n data-slot=\"preview-card-content\"\n {...props}\n >\n {children}\n </PreviewCardPrimitive.Popup>\n </PreviewCardPrimitive.Positioner>\n </PreviewCardPrimitive.Portal>\n );\n}\n\nexport {\n PreviewCard,\n PreviewCard as HoverCard,\n PreviewCardTrigger,\n PreviewCardTrigger as HoverCardTrigger,\n PreviewCardPopup,\n PreviewCardPopup as HoverCardContent,\n};\n",
11+
"content": "\"use client\";\n\nimport { PreviewCard as PreviewCardPrimitive } from \"@base-ui/react/preview-card\";\n\nimport { cn } from \"@/registry/default/lib/utils\";\n\nconst PreviewCard = PreviewCardPrimitive.Root;\n\nfunction PreviewCardTrigger({ ...props }: PreviewCardPrimitive.Trigger.Props) {\n return (\n <PreviewCardPrimitive.Trigger data-slot=\"preview-card-trigger\" {...props} />\n );\n}\n\nfunction PreviewCardPopup({\n className,\n children,\n align = \"center\",\n sideOffset = 4,\n anchor,\n ...props\n}: PreviewCardPrimitive.Popup.Props & {\n align?: PreviewCardPrimitive.Positioner.Props[\"align\"];\n sideOffset?: PreviewCardPrimitive.Positioner.Props[\"sideOffset\"];\n anchor?: PreviewCardPrimitive.Positioner.Props[\"anchor\"];\n}) {\n return (\n <PreviewCardPrimitive.Portal>\n <PreviewCardPrimitive.Positioner\n align={align}\n anchor={anchor}\n className=\"z-50\"\n data-slot=\"preview-card-positioner\"\n sideOffset={sideOffset}\n >\n <PreviewCardPrimitive.Popup\n className={cn(\n \"relative flex w-64 origin-(--transform-origin) text-balance rounded-lg border bg-popover not-dark:bg-clip-padding p-4 text-popover-foreground text-sm shadow-lg/5 transition-[scale,opacity] before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] data-ending-style:scale-98 data-starting-style:scale-98 data-ending-style:opacity-0 data-starting-style:opacity-0 dark:before:shadow-[0_-1px_--theme(--color-white/6%)]\",\n className,\n )}\n data-slot=\"preview-card-content\"\n {...props}\n >\n {children}\n </PreviewCardPrimitive.Popup>\n </PreviewCardPrimitive.Positioner>\n </PreviewCardPrimitive.Portal>\n );\n}\n\nexport {\n PreviewCard,\n PreviewCard as HoverCard,\n PreviewCardTrigger,\n PreviewCardTrigger as HoverCardTrigger,\n PreviewCardPopup,\n PreviewCardPopup as HoverCardContent,\n};\n",
1212
"type": "registry:ui"
1313
}
1414
]

0 commit comments

Comments
 (0)