fix: datatable toolbar (#12757)

* Fix toolbar

* Slide animation

* Animate out and fix selection model

* Disable on mobile - fix tablet position

---------

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

packages/features/users/components/UserTable/BulkActions/DeleteBulkUsers.tsx

@@ -8,9 +8,10 @@ import type { User } from "../UserListTable";
 
 interface Props {
   users: User[];
+  onRemove: () => void;
 }
 
-export function DeleteBulkUsers({ users }: Props) {
+export function DeleteBulkUsers({ users, onRemove }: Props) {
   const { t } = useLocale();
   const selectedRows = users; // Get selected rows from table
   const utils = trpc.useContext();
@@ -37,6 +38,7 @@ export function DeleteBulkUsers({ users }: Props) {
           deleteMutation.mutateAsync({
             userIds: selectedRows.map((user) => user.id),
           });
+          onRemove();
         }}>
         <p className="mt-5">
           {t("remove_users_from_org_confirm", {

packages/features/users/components/UserTable/UserListTable.tsx

@@ -290,7 +290,10 @@ export function UserListTable() {
           {
             type: "render",
             render: (table) => (
-              <DeleteBulkUsers users={table.getSelectedRowModel().flatRows.map((row) => row.original)} />
+              <DeleteBulkUsers
+                users={table.getSelectedRowModel().flatRows.map((row) => row.original)}
+                onRemove={() => table.toggleAllPageRowsSelected(false)}
+              />
             ),
           },
         ]}

packages/ui/components/data-table/DataTableSelectionBar.tsx

@@ -1,4 +1,5 @@
 import type { Table } from "@tanstack/react-table";
+import { motion, AnimatePresence } from "framer-motion";
 import { Fragment } from "react";
 
 import type { SVGComponent } from "@calcom/types/SVGComponent";
@@ -24,23 +25,30 @@ interface DataTableSelectionBarProps<TData> {
 
 export function DataTableSelectionBar<TData>({ table, actions }: DataTableSelectionBarProps<TData>) {
   const numberOfSelectedRows = table.getSelectedRowModel().rows.length;
-
-  if (numberOfSelectedRows === 0) return null;
+  const isVisible = numberOfSelectedRows > 0;
 
   return (
-    <div className="bg-brand-default text-brand item-center absolute bottom-0 left-1/2 flex -translate-x-1/2 gap-4 rounded-lg p-2">
-      <div className="text-brand-subtle my-auto px-2">{numberOfSelectedRows} selected</div>
-      {actions?.map((action, index) => (
-        <Fragment key={index}>
-          {action.type === "action" ? (
-            <Button aria-label={action.label} onClick={action.onClick} StartIcon={action.icon}>
-              {action.label}
-            </Button>
-          ) : action.type === "render" ? (
-            action.render(table)
-          ) : null}
-        </Fragment>
-      ))}
-    </div>
+    <AnimatePresence>
+      {isVisible ? (
+        <motion.div
+          initial={{ opacity: 0, y: 0 }}
+          animate={{ opacity: 1, y: 20 }}
+          exit={{ opacity: 0, y: 0 }}
+          className="bg-brand-default text-brand item-center fixed bottom-6 left-1/4 hidden gap-4 rounded-lg p-2 md:flex lg:left-1/2">
+          <div className="text-brand-subtle my-auto px-2">{numberOfSelectedRows} selected</div>
+          {actions?.map((action, index) => (
+            <Fragment key={index}>
+              {action.type === "action" ? (
+                <Button aria-label={action.label} onClick={action.onClick} StartIcon={action.icon}>
+                  {action.label}
+                </Button>
+              ) : action.type === "render" ? (
+                action.render(table)
+              ) : null}
+            </Fragment>
+          ))}
+        </motion.div>
+      ) : null}
+    </AnimatePresence>
   );
 }

packages/ui/components/data-table/index.tsx

@@ -95,7 +95,7 @@ export function DataTable<TData, TValue>({
     virtualRows.length > 0 ? totalSize - (virtualRows?.[virtualRows.length - 1]?.end || 0) : 0;
 
   return (
-    <div className="relative space-y-4">
+    <div className="space-y-4">
       <DataTableToolbar
         table={table}
         filterableItems={filterableItems}