Chor/move table actions (#6157)

* Move table actions

* Move table actions

Co-authored-by: Peer Richelsen <peeroke@gmail.com>

apps/web/components/booking/BookingListItem.tsx

@@ -23,12 +23,12 @@ import {
   TextArea,
   Tooltip,
 } from "@calcom/ui";
+import { ActionType, TableActions } from "@calcom/ui";
 
 import useMeQuery from "@lib/hooks/useMeQuery";
 
 import { EditLocationDialog } from "@components/dialog/EditLocationDialog";
 import { RescheduleDialog } from "@components/dialog/RescheduleDialog";
-import TableActions, { ActionType } from "@components/ui/TableActions";
 
 type BookingListingStatus = RouterInputs["viewer"]["bookings"]["get"]["status"];
 

packages/ui/components/index.ts

@@ -29,3 +29,5 @@ export {
 } from "./form";
 export { TopBanner } from "./top-banner";
 export type { TopBannerProps } from "./top-banner";
+export { TableActions, DropdownActions } from "./table/TableActions";
+export type { ActionType } from "./table/TableActions";

packages/ui/components/table/TableActions.tsx

@@ -1,4 +1,5 @@
 import React, { FC } from "react";
+import { IconType } from "react-icons/lib";
 
 import {
   Button,
@@ -7,18 +8,17 @@ import {
   DropdownMenuItem,
   DropdownMenuPortal,
   DropdownMenuTrigger,
+  ButtonBaseProps,
   Icon,
 } from "@calcom/ui";
 
-import { SVGComponent } from "@lib/types/SVGComponent";
-
 export type ActionType = {
   id: string;
-  icon?: SVGComponent;
+  icon?: IconType;
   iconClassName?: string;
   label: string;
   disabled?: boolean;
-  color?: "primary" | "secondary";
+  color?: ButtonBaseProps["color"];
 } & (
   | { href: string; onClick?: never; actions?: never }
   | { href?: never; onClick: (e: React.MouseEvent<HTMLElement, MouseEvent>) => void; actions?: never }
@@ -33,7 +33,7 @@ const defaultAction = (e: React.MouseEvent<HTMLElement, MouseEvent>) => {
   e.stopPropagation();
 };
 
-const DropdownActions = ({
+export const DropdownActions = ({
   actions,
   actionTrigger,
 }: {
@@ -52,10 +52,10 @@ const DropdownActions = ({
       <DropdownMenuPortal>
         <DropdownMenuContent>
           {actions.map((action) => (
-            <DropdownMenuItem key={action.id} className="focus-visible:outline-none">
+            <DropdownMenuItem key={action.id}>
               <Button
                 type="button"
-                color="minimal"
+                color={action.color || "minimal"}
                 className="w-full rounded-none font-normal"
                 href={action.href}
                 StartIcon={action.icon}
@@ -71,7 +71,7 @@ const DropdownActions = ({
   );
 };
 
-const TableActions: FC<Props> = ({ actions }) => {
+export const TableActions: FC<Props> = ({ actions }) => {
   return (
     <>
       <div className="flex space-x-2 rtl:space-x-reverse">
@@ -99,5 +99,3 @@ const TableActions: FC<Props> = ({ actions }) => {
     </>
   );
 };
-
-export default TableActions;

packages/ui/index.tsx

@@ -27,7 +27,10 @@ export {
   Select,
   SelectField,
   SelectWithValidation,
+  TableActions,
+  DropdownActions,
 } from "./components";
+export type { ActionType } from "./components";
 export type { AvatarProps, BadgeProps, ButtonBaseProps, ButtonProps, TopBannerProps } from "./components";
 export { default as CheckboxField } from "./components/form/checkbox/Checkbox";
 /** ⬇️ TODO - Move these to components */