first commit
This commit is contained in:
192
calcom/packages/ui/components/form/dropdown/Dropdown.tsx
Normal file
192
calcom/packages/ui/components/form/dropdown/Dropdown.tsx
Normal file
@@ -0,0 +1,192 @@
|
||||
import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
|
||||
import Link from "next/link";
|
||||
import type { ComponentProps } from "react";
|
||||
import { forwardRef } from "react";
|
||||
|
||||
import { classNames } from "@calcom/lib";
|
||||
import { Icon, type IconName } from "@calcom/ui";
|
||||
|
||||
import type { ButtonColor } from "../../button/Button";
|
||||
|
||||
export const Dropdown = DropdownMenuPrimitive.Root;
|
||||
|
||||
type DropdownMenuTriggerProps = ComponentProps<(typeof DropdownMenuPrimitive)["Trigger"]>;
|
||||
export const DropdownMenuTrigger = forwardRef<HTMLButtonElement, DropdownMenuTriggerProps>(
|
||||
({ className = "", ...props }, forwardedRef) => (
|
||||
<DropdownMenuPrimitive.Trigger
|
||||
{...props}
|
||||
className={classNames(
|
||||
!props.asChild &&
|
||||
`focus:bg-subtle hover:bg-muted text-default group-hover:text-emphasis inline-flex items-center rounded-md bg-transparent px-3 py-2 text-sm font-medium ring-0 ${className}`
|
||||
)}
|
||||
ref={forwardedRef}
|
||||
/>
|
||||
)
|
||||
);
|
||||
DropdownMenuTrigger.displayName = "DropdownMenuTrigger";
|
||||
|
||||
export const DropdownMenuTriggerItem = DropdownMenuPrimitive.Trigger;
|
||||
|
||||
export const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
|
||||
|
||||
type DropdownMenuContentProps = ComponentProps<(typeof DropdownMenuPrimitive)["Content"]>;
|
||||
export const DropdownMenuContent = forwardRef<HTMLDivElement, DropdownMenuContentProps>(
|
||||
({ children, sideOffset = 2, align = "end", ...props }, forwardedRef) => {
|
||||
return (
|
||||
<DropdownMenuPrimitive.Content
|
||||
align={align}
|
||||
{...props}
|
||||
sideOffset={sideOffset}
|
||||
className={classNames(
|
||||
"shadow-dropdown w-50 bg-default border-subtle relative z-10 ml-1.5 origin-top-right rounded-md border text-sm",
|
||||
"[&>*:first-child]:mt-1 [&>*:last-child]:mb-1",
|
||||
props.className
|
||||
)}
|
||||
ref={forwardedRef}>
|
||||
{children}
|
||||
</DropdownMenuPrimitive.Content>
|
||||
);
|
||||
}
|
||||
);
|
||||
DropdownMenuContent.displayName = "DropdownMenuContent";
|
||||
|
||||
type DropdownMenuLabelProps = ComponentProps<(typeof DropdownMenuPrimitive)["Label"]>;
|
||||
export const DropdownMenuLabel = (props: DropdownMenuLabelProps) => (
|
||||
<DropdownMenuPrimitive.Label {...props} className={classNames("text-subtle px-3 py-2", props.className)} />
|
||||
);
|
||||
|
||||
type DropdownMenuItemProps = ComponentProps<(typeof DropdownMenuPrimitive)["CheckboxItem"]>;
|
||||
export const DropdownMenuItem = forwardRef<HTMLDivElement, DropdownMenuItemProps>(
|
||||
({ className = "", ...props }, forwardedRef) => (
|
||||
<DropdownMenuPrimitive.Item
|
||||
className={`focus:ring-brand-800 hover:bg-subtle hover:text-emphasis text-default text-sm ring-inset first-of-type:rounded-t-[inherit] last-of-type:rounded-b-[inherit] focus:outline-none focus:ring-1 ${className}`}
|
||||
{...props}
|
||||
ref={forwardedRef}
|
||||
/>
|
||||
)
|
||||
);
|
||||
DropdownMenuItem.displayName = "DropdownMenuItem";
|
||||
|
||||
export const DropdownMenuGroup = DropdownMenuPrimitive.Group;
|
||||
|
||||
type DropdownMenuCheckboxItemProps = ComponentProps<(typeof DropdownMenuPrimitive)["CheckboxItem"]>;
|
||||
export const DropdownMenuCheckboxItem = forwardRef<HTMLDivElement, DropdownMenuCheckboxItemProps>(
|
||||
({ children, checked, onCheckedChange, ...props }, forwardedRef) => {
|
||||
return (
|
||||
<DropdownMenuPrimitive.CheckboxItem
|
||||
{...props}
|
||||
checked={checked}
|
||||
onCheckedChange={onCheckedChange}
|
||||
ref={forwardedRef}
|
||||
className="hover:text-emphasis text-default hover:bg-subtle flex flex-1 items-center space-x-2 px-3 py-2 hover:outline-none hover:ring-0 disabled:cursor-not-allowed">
|
||||
<div className="w-full">{children}</div>
|
||||
{!checked && (
|
||||
<input
|
||||
aria-disabled={true}
|
||||
aria-label={typeof children === "string" ? `Not active ${children}` : undefined}
|
||||
aria-readonly
|
||||
checked={false}
|
||||
type="checkbox"
|
||||
className="text-emphasis dark:text-muted focus:ring-emphasis border-default bg-default ml-auto h-4 w-4 rounded hover:cursor-pointer"
|
||||
/>
|
||||
)}
|
||||
<DropdownMenuPrimitive.ItemIndicator asChild>
|
||||
<input
|
||||
aria-disabled={true}
|
||||
aria-readonly
|
||||
aria-label={typeof children === "string" ? `Active ${children}` : undefined}
|
||||
checked={true}
|
||||
type="checkbox"
|
||||
className="text-emphasis dark:text-muted focus:ring-emphasis border-default bg-default h-4 w-4 rounded hover:cursor-pointer"
|
||||
/>
|
||||
</DropdownMenuPrimitive.ItemIndicator>
|
||||
</DropdownMenuPrimitive.CheckboxItem>
|
||||
);
|
||||
}
|
||||
);
|
||||
DropdownMenuCheckboxItem.displayName = "DropdownMenuCheckboxItem";
|
||||
|
||||
export const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
|
||||
|
||||
type DropdownMenuRadioItemProps = ComponentProps<(typeof DropdownMenuPrimitive)["RadioItem"]>;
|
||||
export const DropdownMenuRadioItem = forwardRef<HTMLDivElement, DropdownMenuRadioItemProps>(
|
||||
({ children, ...props }, forwardedRef) => {
|
||||
return (
|
||||
<DropdownMenuPrimitive.RadioItem {...props} ref={forwardedRef}>
|
||||
{children}
|
||||
<DropdownMenuPrimitive.ItemIndicator>
|
||||
<Icon name="circle-check" />
|
||||
</DropdownMenuPrimitive.ItemIndicator>
|
||||
</DropdownMenuPrimitive.RadioItem>
|
||||
);
|
||||
}
|
||||
);
|
||||
DropdownMenuRadioItem.displayName = "DropdownMenuRadioItem";
|
||||
|
||||
type DropdownItemProps = {
|
||||
children: React.ReactNode;
|
||||
color?: ButtonColor;
|
||||
StartIcon?: IconName;
|
||||
CustomStartIcon?: React.ReactNode;
|
||||
EndIcon?: IconName;
|
||||
href?: string;
|
||||
disabled?: boolean;
|
||||
childrenClassName?: string;
|
||||
} & ButtonOrLinkProps;
|
||||
|
||||
type ButtonOrLinkProps = ComponentProps<"button"> & ComponentProps<"a">;
|
||||
|
||||
export function ButtonOrLink({ href, ...props }: ButtonOrLinkProps) {
|
||||
const isLink = typeof href !== "undefined";
|
||||
const ButtonOrLink = isLink ? "a" : "button";
|
||||
|
||||
const content = <ButtonOrLink {...props} />;
|
||||
|
||||
if (isLink) {
|
||||
return (
|
||||
<Link href={href} legacyBehavior>
|
||||
{content}
|
||||
</Link>
|
||||
);
|
||||
}
|
||||
|
||||
return content;
|
||||
}
|
||||
|
||||
export const DropdownItem = (props: DropdownItemProps) => {
|
||||
const { CustomStartIcon, StartIcon, EndIcon, children, color, childrenClassName, ...rest } = props;
|
||||
|
||||
return (
|
||||
<ButtonOrLink
|
||||
{...rest}
|
||||
className={classNames(
|
||||
"hover:text-emphasis text-default inline-flex w-full items-center space-x-2 px-3 py-2 disabled:cursor-not-allowed",
|
||||
color === "destructive"
|
||||
? "hover:bg-error hover:text-red-700 dark:hover:text-red-100"
|
||||
: "hover:bg-subtle",
|
||||
props.className
|
||||
)}>
|
||||
<>
|
||||
{CustomStartIcon || (StartIcon && <Icon name={StartIcon} className="h-4 w-4" />)}
|
||||
<div className={classNames("text-sm font-medium leading-5", childrenClassName)}>{children}</div>
|
||||
{EndIcon && <Icon name={EndIcon} className="h-4 w-4" />}
|
||||
</>
|
||||
</ButtonOrLink>
|
||||
);
|
||||
};
|
||||
|
||||
type DropdownMenuSeparatorProps = ComponentProps<(typeof DropdownMenuPrimitive)["Separator"]>;
|
||||
export const DropdownMenuSeparator = forwardRef<HTMLDivElement, DropdownMenuSeparatorProps>(
|
||||
({ className = "", ...props }, forwardedRef) => {
|
||||
return (
|
||||
<DropdownMenuPrimitive.Separator
|
||||
className={classNames("bg-emphasis my-1 h-px", className)}
|
||||
{...props}
|
||||
ref={forwardedRef}
|
||||
/>
|
||||
);
|
||||
}
|
||||
);
|
||||
DropdownMenuSeparator.displayName = "DropdownMenuSeparator";
|
||||
|
||||
export default Dropdown;
|
||||
361
calcom/packages/ui/components/form/dropdown/dropdown.stories.mdx
Normal file
361
calcom/packages/ui/components/form/dropdown/dropdown.stories.mdx
Normal file
@@ -0,0 +1,361 @@
|
||||
import { Canvas, Story, Meta } from "@storybook/addon-docs";
|
||||
|
||||
import {
|
||||
Examples,
|
||||
Example,
|
||||
Title,
|
||||
CustomArgsTable,
|
||||
VariantRow,
|
||||
VariantsTable,
|
||||
} from "@calcom/storybook/components";
|
||||
import { Button } from "@calcom/ui";
|
||||
import { Icon } from "@calcom/ui";
|
||||
|
||||
import {
|
||||
Dropdown,
|
||||
DropdownMenuTrigger,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownItem,
|
||||
DropdownMenuLabel,
|
||||
DropdownMenuSeparator,
|
||||
} from "./Dropdown";
|
||||
|
||||
<Meta title="UI/Form/Dropdown" component={Dropdown} />
|
||||
|
||||
<Title title="Dropdown" suffix="Brief" subtitle="Version 1.0 — Last Update: 29 Aug 2023" />
|
||||
|
||||
## Definition
|
||||
|
||||
`Dropdown` is an element that displays a menu to the user—such as a set of actions or functions.
|
||||
|
||||
## Structure
|
||||
|
||||
The `Dropdown` component can be used to display a menu to the user.
|
||||
|
||||
<CustomArgsTable of={Dropdown} />
|
||||
|
||||
### Dropdown components that have arguments:
|
||||
|
||||
#### DropdownMenuTrigger
|
||||
|
||||
<CustomArgsTable of={DropdownMenuTrigger} />
|
||||
|
||||
#### DropdownMenuContent
|
||||
|
||||
<CustomArgsTable of={DropdownMenuContent} />
|
||||
|
||||
#### DropdownMenuItem
|
||||
|
||||
<CustomArgsTable of={DropdownMenuItem} />
|
||||
|
||||
#### DropdownMenuSeparator
|
||||
|
||||
<CustomArgsTable of={DropdownMenuSeparator} />
|
||||
|
||||
## Examples
|
||||
|
||||
<Examples title="Dropdown">
|
||||
<Example title="Simple">
|
||||
<Dropdown>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button>more</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent>
|
||||
<DropdownMenuItem>
|
||||
<DropdownItem>First</DropdownItem>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem>
|
||||
<DropdownItem>Second</DropdownItem>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem>
|
||||
<DropdownItem>Third</DropdownItem>
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</Dropdown>
|
||||
</Example>
|
||||
<Example title="No modal">
|
||||
<Dropdown modal={false}>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button>more</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent>
|
||||
<DropdownMenuItem>
|
||||
<DropdownItem>First</DropdownItem>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem>
|
||||
<DropdownItem>Second</DropdownItem>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem>
|
||||
<DropdownItem>Third</DropdownItem>
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</Dropdown>
|
||||
</Example>
|
||||
</Examples>
|
||||
<Examples title="Dropdown Menu Trigger">
|
||||
<Example title="Simple Button">
|
||||
<Dropdown>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button>more</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent>
|
||||
<DropdownMenuItem>
|
||||
<DropdownItem>First</DropdownItem>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem>
|
||||
<DropdownItem>Second</DropdownItem>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem>
|
||||
<DropdownItem>Third</DropdownItem>
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</Dropdown>
|
||||
</Example>
|
||||
<Example title="Button Icon">
|
||||
<Dropdown>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button StartIcon="plus" />
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent>
|
||||
<DropdownMenuItem>
|
||||
<DropdownItem>First</DropdownItem>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem>
|
||||
<DropdownItem>Second</DropdownItem>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem>
|
||||
<DropdownItem>Third</DropdownItem>
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</Dropdown>
|
||||
</Example>
|
||||
<Example title="Disabled">
|
||||
<Dropdown>
|
||||
<DropdownMenuTrigger disabled={true} asChild>
|
||||
<Button>more</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent>
|
||||
<DropdownMenuItem>
|
||||
<DropdownItem>First</DropdownItem>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem>
|
||||
<DropdownItem>Second</DropdownItem>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem>
|
||||
<DropdownItem>Third</DropdownItem>
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</Dropdown>
|
||||
</Example>
|
||||
<Example title="Not as child">
|
||||
<Dropdown>
|
||||
<DropdownMenuTrigger>
|
||||
<Button>more</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent>
|
||||
<DropdownMenuItem>
|
||||
<DropdownItem>First</DropdownItem>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem>
|
||||
<DropdownItem>Second</DropdownItem>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem>
|
||||
<DropdownItem>Third</DropdownItem>
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</Dropdown>
|
||||
</Example>
|
||||
</Examples>
|
||||
<Examples title="Dropdown Menu Content">
|
||||
<Example title="Custom width">
|
||||
<Dropdown>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button>more</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent style={{ minWidth: "200px" }}>
|
||||
<DropdownMenuItem>
|
||||
<DropdownItem>First</DropdownItem>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem>
|
||||
<DropdownItem>Second</DropdownItem>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem>
|
||||
<DropdownItem>Third</DropdownItem>
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</Dropdown>
|
||||
</Example>
|
||||
<Example title="Align start">
|
||||
<Dropdown>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button>more</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent style={{ minWidth: "80px" }} align={"start"}>
|
||||
<DropdownMenuItem>
|
||||
<DropdownItem>First</DropdownItem>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem>
|
||||
<DropdownItem>Second</DropdownItem>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem>
|
||||
<DropdownItem>Third</DropdownItem>
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</Dropdown>
|
||||
</Example>
|
||||
<Example title="Align center">
|
||||
<Dropdown>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button>more</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent style={{ minWidth: "80px" }} align={"center"}>
|
||||
<DropdownMenuItem>
|
||||
<DropdownItem>First</DropdownItem>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem>
|
||||
<DropdownItem>Second</DropdownItem>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem>
|
||||
<DropdownItem>Third</DropdownItem>
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</Dropdown>
|
||||
</Example>
|
||||
<Example title="With Menu Separator">
|
||||
<Dropdown>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button>more</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent>
|
||||
<DropdownMenuItem>
|
||||
<DropdownItem>First</DropdownItem>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem>
|
||||
<DropdownItem>Second</DropdownItem>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuItem>
|
||||
<DropdownItem>Third</DropdownItem>
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</Dropdown>
|
||||
</Example>
|
||||
<Example title="With side offset">
|
||||
<Dropdown>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button>more</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent sideOffset={50}>
|
||||
<DropdownMenuItem>
|
||||
<DropdownItem>First</DropdownItem>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem>
|
||||
<DropdownItem>Second</DropdownItem>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem>
|
||||
<DropdownItem>Third</DropdownItem>
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</Dropdown>
|
||||
</Example>
|
||||
<Example title="With Some icons">
|
||||
<Dropdown>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button>more</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent>
|
||||
<DropdownMenuItem>
|
||||
<DropdownItem StartIcon="trash">First</DropdownItem>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem>
|
||||
<DropdownItem StartIcon="plus">Second</DropdownItem>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuItem>
|
||||
<DropdownItem StartIcon="copy">Third</DropdownItem>
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</Dropdown>
|
||||
</Example>
|
||||
</Examples>
|
||||
<Examples title="Dropdown Menu Label">
|
||||
<Example title="Simple">
|
||||
<Dropdown>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button>more</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align={"start"}>
|
||||
<DropdownMenuLabel>Number</DropdownMenuLabel>
|
||||
<DropdownMenuItem>
|
||||
<DropdownItem>First</DropdownItem>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem>
|
||||
<DropdownItem>Second</DropdownItem>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem>
|
||||
<DropdownItem>Third</DropdownItem>
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</Dropdown>
|
||||
</Example>
|
||||
</Examples>
|
||||
|
||||
## Dropdown Story
|
||||
|
||||
<Canvas>
|
||||
<Story
|
||||
name="Dropdown"
|
||||
args={{
|
||||
asChild: false,
|
||||
align: "start",
|
||||
disabled: false,
|
||||
sideOffset: 0,
|
||||
}}
|
||||
argTypes={{
|
||||
sideOffset: {
|
||||
control: {
|
||||
type: "number",
|
||||
},
|
||||
},
|
||||
asChild: {
|
||||
control: {
|
||||
type: "boolean",
|
||||
},
|
||||
},
|
||||
align: {
|
||||
control: {
|
||||
type: "inline-radio",
|
||||
options: ["center", "start", "end"],
|
||||
},
|
||||
},
|
||||
disabled: {
|
||||
control: {
|
||||
type: "boolean",
|
||||
},
|
||||
},
|
||||
}}>
|
||||
{({ dir, asChild, sideOffset, align, disabled }) => (
|
||||
<VariantsTable titles={["Default"]} columnMinWidth={150}>
|
||||
<VariantRow>
|
||||
<Dropdown>
|
||||
<DropdownMenuTrigger disabled={disabled} asChild>
|
||||
<Button>more</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align={align} sideOffset={sideOffset}>
|
||||
<DropdownMenuItem>
|
||||
<DropdownItem StartIcon="trash">First</DropdownItem>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem>
|
||||
<DropdownItem StartIcon="plus">Second</DropdownItem>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem>
|
||||
<DropdownItem StartIcon="copy">Third</DropdownItem>
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</Dropdown>
|
||||
</VariantRow>
|
||||
</VariantsTable>
|
||||
)}
|
||||
</Story>
|
||||
</Canvas>
|
||||
16
calcom/packages/ui/components/form/dropdown/index.ts
Normal file
16
calcom/packages/ui/components/form/dropdown/index.ts
Normal file
@@ -0,0 +1,16 @@
|
||||
export {
|
||||
Dropdown,
|
||||
ButtonOrLink,
|
||||
DropdownItem,
|
||||
DropdownMenuCheckboxItem,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuGroup,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuLabel,
|
||||
DropdownMenuPortal,
|
||||
DropdownMenuRadioGroup,
|
||||
DropdownMenuRadioItem,
|
||||
DropdownMenuSeparator,
|
||||
DropdownMenuTrigger,
|
||||
DropdownMenuTriggerItem,
|
||||
} from "./Dropdown";
|
||||
Reference in New Issue
Block a user