@takaro/lib-components 0.0.1 → 0.0.5

package/src/components/data/Table/index.tsx

@@ -1,5 +1,5 @@
 /// <reference path="./react-table.d.ts" />
-import { Dispatch, SetStateAction, useEffect, useMemo, useState } from 'react';
+import { Dispatch, SetStateAction, useEffect, useMemo, useState, JSX } from 'react';
 import { DndProvider } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
 import { Density } from '../../../styled';
@@ -18,19 +18,23 @@ import {
   ColumnPinningState,
   RowSelectionState,
 } from '@tanstack/react-table';
-import { Wrapper, StyledTable, Toolbar, PaginationContainer, Flex, TableWrapper } from './style';
-import { Empty, Spinner, ToggleButtonGroup } from '../../../components';
+import { Wrapper, StyledTable, Toolbar, Flex, TableWrapper } from './style';
+import { Button, Empty, Spinner, ToggleButtonGroup } from '../../../components';
 import { AiOutlinePicCenter as RelaxedDensityIcon, AiOutlinePicRight as TightDensityIcon } from 'react-icons/ai';
-import { ColumnHeader, ColumnVisibility, Filter, Pagination } from './subcomponents';
+
+import { ColumnHeader } from './subcomponents/ColumnHeader';
+import { ColumnVisibility } from './subcomponents/ColumnVisibility';
+import { Filter } from './subcomponents/Filter';
+import { PagePicker } from './subcomponents/Pagination/PagePicker';
+import { PageSizeSelect } from './subcomponents/Pagination/PageSizeSelect';
+
 import { ColumnFilter, PageOptions } from '../../../hooks/useTableActions';
 import { GenericCheckBox as CheckBox } from '../../inputs/CheckBox/Generic';
 import { useLocalStorage } from '../../../hooks';
 
 export interface TableProps<DataType extends object> {
   id: string;
-
   data: DataType[];
-
   isLoading?: boolean;
 
   // currently not possible to type this properly: https://github.com/TanStack/table/issues/4241
@@ -84,13 +88,16 @@ export function Table<DataType extends object>({
   isLoading = false,
 }: TableProps<DataType>) {
   const [columnVisibility, setColumnVisibility] = useState<VisibilityState>(() => {
-    return columns.reduce((acc, column) => {
-      if (column.id === undefined) {
-        throw new Error('ColumnDef must have an id');
-      }
-      acc[column.id] = column?.meta?.hiddenColumn ? !column.meta.hiddenColumn : true;
-      return acc;
-    }, {} as Record<string, boolean>);
+    return columns.reduce(
+      (acc, column) => {
+        if (column.id === undefined) {
+          throw new Error('ColumnDef must have an id');
+        }
+        acc[column.id] = column?.meta?.hiddenColumn ? !column.meta.hiddenColumn : true;
+        return acc;
+      },
+      {} as Record<string, boolean>,
+    );
   });
   const [columnPinning, setColumnPinning] = useState<ColumnPinningState>({});
   const { storedValue: density, setValue: setDensity } = useLocalStorage<Density>(`table-density-${id}`, 'tight');
@@ -103,19 +110,11 @@ export function Table<DataType extends object>({
         throw new Error('ColumnDef must have an id');
       }
       return column.id;
-    })
+    }),
   );
 
   const ROW_SELECTION_COL_SPAN = rowSelection ? 1 : 0;
-
-  // table size
-  useEffect(() => {
-    if (density === 'tight') {
-      table.setPageSize(19);
-    } else {
-      table.resetPageSize(true);
-    }
-  }, [density]);
+  const MINIMUM_ROW_COUNT_FOR_PAGINATION = 5;
 
   // handles the column visibility tooltip (shows tooltip when the first column is hidden)
   useEffect(() => {
@@ -155,6 +154,7 @@ export function Table<DataType extends object>({
     enableSorting: !!sorting,
     enableSortingRemoval: false,
     enableColumnResizing: true,
+    enablePinning: true,
     enableHiding: !!columnVisibility,
     enableRowSelection: !!rowSelection,
     autoResetPageIndex: false,
@@ -170,7 +170,8 @@ export function Table<DataType extends object>({
     onRowSelectionChange: rowSelection ? rowSelection?.setRowSelectionState : undefined,
 
     initialState: {
-      columnVisibility: columnVisibility,
+      columnVisibility,
+      columnOrder,
       sorting: sorting.sortingState,
       columnFilters: columnFiltering.columnFiltersState,
       globalFilter: columnSearch.columnSearchState,
@@ -181,15 +182,17 @@ export function Table<DataType extends object>({
     state: {
       columnVisibility,
       columnOrder,
-      sorting: sorting?.sortingState,
-      columnFilters: columnFiltering?.columnFiltersState,
-      globalFilter: columnSearch?.columnSearchState,
+      sorting: sorting.sortingState,
+      columnFilters: columnFiltering.columnFiltersState,
+      globalFilter: columnSearch.columnSearchState,
       pagination: pagination?.paginationState,
       rowSelection: rowSelection ? rowSelection.rowSelectionState : undefined,
       columnPinning,
     },
   });
 
+  const tableHasNoData = isLoading === false && table.getRowModel().rows.length === 0;
+
   // rowSelection.rowSelectionState has the following shape: { [rowId: string]: boolean }
   const hasRowSelection = useMemo(() => {
     return (
@@ -222,10 +225,10 @@ export function Table<DataType extends object>({
             orientation="horizontal"
             defaultValue={density}
           >
-            <ToggleButtonGroup.Button value="relaxed" tooltip="Relaxed layout">
+            <ToggleButtonGroup.Button value="relaxed" tooltip="Relaxed layout" disabled={tableHasNoData}>
               <RelaxedDensityIcon size={20} />
             </ToggleButtonGroup.Button>
-            <ToggleButtonGroup.Button value="tight" tooltip="Tight layout">
+            <ToggleButtonGroup.Button value="tight" tooltip="Tight layout" disabled={tableHasNoData}>
               <TightDensityIcon size={20} />
             </ToggleButtonGroup.Button>
           </ToggleButtonGroup>
@@ -285,11 +288,22 @@ export function Table<DataType extends object>({
               )}
 
               {/* empty state */}
-              {!isLoading && table.getRowModel().rows.length === 0 && (
+              {tableHasNoData && (
                 <tr>
                   <td colSpan={table.getAllColumns().length + ROW_SELECTION_COL_SPAN}>
                     <div style={{ width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
-                      <Empty header="No data" description="We couldn't find what you are looking for." actions={[]} />
+                      <Empty
+                        header=""
+                        description="Items will appear here. Add your first item to begin!"
+                        actions={[
+                          <Button
+                            key={id + '-learn-more-button'}
+                            variant="clear"
+                            onClick={() => window.open('https://docs.takaro.io')}
+                            text="Learn more"
+                          />,
+                        ]}
+                      />
                     </div>
                   </td>
                 </tr>
@@ -323,26 +337,25 @@ export function Table<DataType extends object>({
                   </tr>
                 ))}
             </tbody>
-            {!isLoading && table.getRowModel().rows.length > 1 && (
+
+            {!isLoading && table.getPageCount() * table.getRowCount() > MINIMUM_ROW_COUNT_FOR_PAGINATION && (
               <tfoot>
                 <tr>
-                  <td colSpan={1} />
+                  {/* This is the row selection */}
+                  {ROW_SELECTION_COL_SPAN ? <td colSpan={1} /> : null}
                   {pagination && (
-                    <td
-                      colSpan={
-                        columns.length +
-                        ROW_SELECTION_COL_SPAN /* +1 here is because we have an extra column for the selection */ -
-                        2 /* We use 2 columns for padding (1 start one at end) */
-                      }
-                    >
-                      <PaginationContainer>
+                    <>
+                      <td colSpan={table.getVisibleLeafColumns().length - 3 - ROW_SELECTION_COL_SPAN} />
+                      <td colSpan={1}>
                         <span>
                           showing {table.getState().pagination.pageIndex * table.getState().pagination.pageSize + 1}-
                           {table.getState().pagination.pageIndex * table.getState().pagination.pageSize +
                             table.getRowModel().rows.length}{' '}
                           of {pagination.pageOptions.total} entries
                         </span>
-                        <Pagination
+                      </td>
+                      <td colSpan={1}>
+                        <PagePicker
                           pageCount={table.getPageCount()}
                           hasNext={table.getCanNextPage()}
                           hasPrevious={table.getCanPreviousPage()}
@@ -351,8 +364,14 @@ export function Table<DataType extends object>({
                           pageIndex={table.getState().pagination.pageIndex}
                           setPageIndex={table.setPageIndex}
                         />
-                      </PaginationContainer>
-                    </td>
+                      </td>
+                      <td colSpan={1} style={{ paddingRight: '10px' }}>
+                        <PageSizeSelect
+                          onPageSizeChange={(pageSize) => table.setPageSize(Number(pageSize))}
+                          pageSize={table.getState().pagination.pageSize.toString()}
+                        />
+                      </td>
+                    </>
                   )}
                 </tr>
               </tfoot>

package/src/components/data/Table/style.ts

@@ -14,6 +14,7 @@ export const Toolbar = styled.div`
   border-left: 1px solid ${({ theme }) => theme.colors.backgroundAccent};
   border-right: 1px solid ${({ theme }) => theme.colors.backgroundAccent};
   border-top: 1px solid ${({ theme }) => theme.colors.backgroundAccent};
+  background: ${({ theme }) => theme.colors.backgroundAlt};
 
   border-top-left-radius: ${({ theme }) => theme.borderRadius.large};
   border-top-right-radius: ${({ theme }) => theme.borderRadius.large};
@@ -30,6 +31,7 @@ export const TableWrapper = styled.div`
   padding-bottom: ${({ theme }) => theme.spacing['0_5']};
   border-bottom-left-radius: ${({ theme }) => theme.borderRadius.large};
   border-bottom-right-radius: ${({ theme }) => theme.borderRadius.large};
+  overflow: hidden;
 `;
 
 export const StyledTable = styled.table<{ density: Density }>`
@@ -37,8 +39,8 @@ export const StyledTable = styled.table<{ density: Density }>`
   width: 100%;
   text-align: left;
   background-color: ${({ theme }) => theme.colors.background};
-  overflow: hidden;
   border-collapse: collapse;
+  position: relative;
 
   tr:last-child td {
     border-bottom: none;
@@ -57,7 +59,6 @@ export const StyledTable = styled.table<{ density: Density }>`
 
   tfoot {
     border-top: 1px solid ${({ theme }) => theme.colors.backgroundAccent};
-    padding: ${({ theme }) => theme.spacing[2]};
     tr {
       td {
         border-bottom: none;

package/src/components/data/Table/subcomponents/ColumnHeader/ColumnSettings.tsx

@@ -46,20 +46,19 @@ export function ColumnSettings<DataType extends object>({
             <Tooltip.Content>Toggle to ascending</Tooltip.Content>
           </Tooltip>
         );
-      } else {
-        return (
-          <Tooltip>
-            <Tooltip.Trigger asChild>
-              <IconButton
-                icon={<SortAscendingIcon />}
-                ariaLabel="toggle to descending"
-                onClick={() => toggleSorting(true)}
-              />
-            </Tooltip.Trigger>
-            <Tooltip.Content>Toggle to descending</Tooltip.Content>
-          </Tooltip>
-        );
       }
+      return (
+        <Tooltip>
+          <Tooltip.Trigger asChild>
+            <IconButton
+              icon={<SortAscendingIcon />}
+              ariaLabel="toggle to descending"
+              onClick={() => toggleSorting(true)}
+            />
+          </Tooltip.Trigger>
+          <Tooltip.Content>Toggle to descending</Tooltip.Content>
+        </Tooltip>
+      );
     }
   }, [table.getState().sorting, header.column.id]);
 
@@ -129,9 +128,11 @@ export function ColumnSettings<DataType extends object>({
             icon={<PinIcon />}
             label="Pin to left"
             onClick={() => {
-              !header.column.getIsPinned() && header.column.getCanPin()
-                ? header.column.pin('left')
-                : header.column.pin(false);
+              if (!header.column.getIsPinned() && header.column.getCanPin()) {
+                header.column.pin('left');
+              } else {
+                header.column.pin(false);
+              }
             }}
           />
           <Dropdown.Menu.Item
@@ -140,9 +141,11 @@ export function ColumnSettings<DataType extends object>({
             icon={<PinIcon style={{ transform: 'scaleX(-1)' }} />}
             label="Pin to right"
             onClick={() => {
-              !header.column.getIsPinned() && header.column.getCanPin()
-                ? header.column.pin('right')
-                : header.column.pin(false);
+              if (!header.column.getIsPinned() && header.column.getCanPin()) {
+                header.column.pin('right');
+              } else {
+                header.column.pin(false);
+              }
             }}
           />
           <Dropdown.Menu.Item disabled={true} icon={<DeleteIcon />} label="Delete column" onClick={() => {}} />

package/src/components/data/Table/subcomponents/ColumnHeader/index.tsx

@@ -27,7 +27,7 @@ const reorder = (draggedColumnId: string, targetColumnId: string, columnOrder: s
   columnOrder.splice(
     columnOrder.indexOf(targetColumnId),
     0,
-    columnOrder.splice(columnOrder.indexOf(draggedColumnId), 1)[0] as string
+    columnOrder.splice(columnOrder.indexOf(draggedColumnId), 1)[0] as string,
   );
   return [...columnOrder];
 };
@@ -134,7 +134,7 @@ export function ColumnHeader<DataType extends object>({ header, table, isLoading
       isRowSelection={false}
     >
       <InnerTh>
-        <Target ref={ref} isDragging={isDragging} role="DraggableBox" draggable={true} aria-dropeffect="move">
+        <Target ref={ref} isDragging={isDragging} role="DraggableBox" draggable={true}>
           <CustomDragLayer />
           <Content canDrag={canDrag}>
             {header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
@@ -175,7 +175,7 @@ export const Inner = styled.div<{ initialOffset: XYCoord | null; currentOffset:
   transform: ${({ currentOffset }) => `translate(${currentOffset?.x}px, ${currentOffset?.y}px)`};
 `;
 
-export const CustomDragLayer = forwardRef<HTMLDivElement>((_, ref) => {
+export const CustomDragLayer = forwardRef<HTMLDivElement>(function ColumnHeaderDragLayer(_, ref) {
   const { itemType, isDragging, initialOffset, currentOffset } = useDragLayer((monitor) => ({
     item: monitor.getItem(),
     itemType: monitor.getItemType(),

package/src/components/data/Table/subcomponents/ColumnHeader/style.ts

@@ -8,10 +8,11 @@ export const Th = styled.th<{
   canDrag: boolean;
   isRowSelection: boolean;
 }>`
-  position: relative;
+  top: 0;
   width: ${({ width }) => width}px;
   padding: ${({ theme }) => `${theme.spacing['0_75']} 0`};
   border-bottom: 1px solid ${({ theme }) => theme.colors.backgroundAccent};
+  box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.4);
 
   &:first-child {
     padding-left: ${({ theme, isRowSelection }) => (isRowSelection ? 0 : theme.spacing['1'])};

package/src/components/data/Table/subcomponents/Filter/field.tsx

@@ -1,7 +1,6 @@
 import { Control, UseFormSetValue, useWatch } from 'react-hook-form';
 import { SelectField, TextField } from '../../../../../components';
-import { FilterInputType, IFormInputs } from '.';
-import { Operators } from '.';
+import { Operators, FilterInputType, IFormInputs } from '.';
 import { Column } from '@tanstack/react-table';
 import { useLayoutEffect } from 'react';
 import { camelCaseToSpaces } from '../../../../../helpers';
@@ -45,7 +44,7 @@ export function FilterRow<DataType extends object>({
     }
 
     const meta = column?.columnDef?.meta as Record<string, unknown> | undefined;
-    switch (meta?.type) {
+    switch (meta?.dataType) {
       case 'uuid':
       case 'datetime':
         return [Operators.is];

package/src/components/data/Table/subcomponents/Filter/index.tsx

@@ -67,24 +67,18 @@ export function Filter<DataType extends object>({ table }: FilterProps<DataType>
           .discriminatedUnion('type', [
             z.object({
               type: z.literal(FilterInputType.string),
-              value: z.string().nonempty({
-                message: 'Value is required.',
-              }),
+              value: z.string().min(1),
             }),
             z.object({
               type: z.literal(FilterInputType.uuid),
-              value: z.string().uuid().nonempty({
-                message: 'Value is required.',
-              }),
+              value: z.string().uuid().min(1),
             }),
             z.object({
               type: z.literal(FilterInputType.datetime),
-              value: z.string().datetime().nonempty({
-                message: 'Value is required.',
-              }),
+              value: z.string().datetime().min(1),
             }),
           ])
-          .and(basedShape)
+          .and(basedShape),
       ),
     });
   }, [columnIds]);
@@ -165,6 +159,8 @@ export function Filter<DataType extends object>({ table }: FilterProps<DataType>
 
     table.setColumnFilters(columnFiltersArray);
     table.setGlobalFilter(globalFiltersArray);
+    table.resetPagination();
+
     setOpen(false);
   };
 

package/src/components/data/Table/subcomponents/Pagination/{index.tsx → PagePicker.tsx}

@@ -1,6 +1,6 @@
 import { FC, useMemo } from 'react';
 import { Button, IconButton } from '../../../../../components';
-import { PaginationContainer } from './style';
+import { PagePickerContainer } from './style';
 import {
   FaAngleRight as NextIcon,
   FaAnglesRight as LastIcon,
@@ -22,12 +22,11 @@ const getPageWindow = (pageCount: number, windowSize: number, currentPage: numbe
     return { start: 1, end: windowSize + 1 };
   } else if (currentPage + floor >= pageCount) {
     return { start: pageCount - windowSize + 1, end: pageCount + 1 };
-  } else {
-    return { start: currentPage - ceiling + 1, end: currentPage + floor + 1 };
   }
+  return { start: currentPage - ceiling + 1, end: currentPage + floor + 1 };
 };
 
-export interface PaginationProps {
+export interface PagePickerProps {
   setPageIndex: (index: number) => void;
   pageIndex: number;
   hasPrevious: boolean;
@@ -37,7 +36,7 @@ export interface PaginationProps {
   pageCount: number;
 }
 
-export const Pagination: FC<PaginationProps> = ({
+export const PagePicker: FC<PagePickerProps> = ({
   setPageIndex,
   hasPrevious,
   pageIndex,
@@ -63,7 +62,7 @@ export const Pagination: FC<PaginationProps> = ({
   };
 
   return (
-    <PaginationContainer border={false}>
+    <PagePickerContainer border={false}>
       {showJumps && (
         <IconButton
           size="tiny"
@@ -85,6 +84,7 @@ export const Pagination: FC<PaginationProps> = ({
       {showButtons &&
         pages.map((i) => (
           <Button
+            key={`page-${i}`}
             variant="outline"
             onClick={() => setPageIndex(i - 1)}
             className={i === pageIndex + 1 ? 'active' : ''}
@@ -103,6 +103,6 @@ export const Pagination: FC<PaginationProps> = ({
           ariaLabel="Last page"
         />
       )}
-    </PaginationContainer>
+    </PagePickerContainer>
   );
 };

package/src/components/data/Table/subcomponents/Pagination/PageSizeSelect.tsx

@@ -0,0 +1,37 @@
+import { FC } from 'react';
+import { UnControlledSelectField } from '../../../../../components';
+
+interface PageSizeSelectProps {
+  onPageSizeChange: (pageSize: string) => void;
+  pageSize: string;
+}
+
+export const PageSizeSelect: FC<PageSizeSelectProps> = ({ onPageSizeChange, pageSize }) => {
+  return (
+    <UnControlledSelectField
+      hasError={false}
+      hasDescription={false}
+      id="page-size"
+      multiple={false}
+      name="pageSize"
+      value={pageSize.toString() || '10'}
+      onChange={onPageSizeChange}
+      render={(selectedItems) => {
+        if (selectedItems.length === 0) {
+          return <div>Select...</div>;
+        }
+        return <div>{selectedItems[0].label} items</div>;
+      }}
+    >
+      <UnControlledSelectField.OptionGroup label="Options">
+        {[5, 10, 25, 50, 100, 200].map((val: number) => (
+          <UnControlledSelectField.Option key={`${val}-table`} value={val.toString()} label={val.toString()}>
+            <div>
+              <span>{val} items</span>
+            </div>
+          </UnControlledSelectField.Option>
+        ))}
+      </UnControlledSelectField.OptionGroup>
+    </UnControlledSelectField>
+  );
+};

package/src/components/data/Table/subcomponents/Pagination/style.ts

@@ -1,6 +1,6 @@
 import { styled } from '../../../../../styled';
 
-export const PaginationContainer = styled.div<{ border?: boolean }>`
+export const PagePickerContainer = styled.div<{ border?: boolean }>`
   display: flex;
   justify-content: flex-end;
 

package/src/components/dialogs/Dialog/Dialog.stories.tsx

@@ -1,5 +1,4 @@
-import React from 'react';
-import { useState } from 'react';
+import React, { useState } from 'react';
 import { SubmitHandler, useForm } from 'react-hook-form';
 import { Meta, StoryFn } from '@storybook/react';
 

package/src/components/dialogs/Dialog/DialogBody.tsx

@@ -41,22 +41,23 @@ export interface DialogBodyProps {
   size?: Size;
 }
 
-export const DialogBody = forwardRef<HTMLParagraphElement, PropsWithChildren<DialogBodyProps>>(
-  ({ children, size = 'medium', ...props }, ref) => {
-    const { setDescriptionId } = useDialogContext();
-    const id = useId();
+export const DialogBody = forwardRef<HTMLParagraphElement, PropsWithChildren<DialogBodyProps>>(function DialogBody(
+  { children, size = 'medium', ...props },
+  ref,
+) {
+  const { setDescriptionId } = useDialogContext();
+  const id = useId();
 
-    // Only sets `aria-describedby` on the Dialog root element
-    // if this component is mounted inside it.
-    useLayoutEffect(() => {
-      setDescriptionId(id);
-      return () => setDescriptionId(undefined);
-    }, [id, setDescriptionId]);
+  // Only sets `aria-describedby` on the Dialog root element
+  // if this component is mounted inside it.
+  useLayoutEffect(() => {
+    setDescriptionId(id);
+    return () => setDescriptionId(undefined);
+  }, [id, setDescriptionId]);
 
-    return (
-      <Container {...props} ref={ref} id={id} size={size}>
-        {children}
-      </Container>
-    );
-  }
-);
+  return (
+    <Container {...props} ref={ref} id={id} size={size}>
+      {children}
+    </Container>
+  );
+});

package/src/components/dialogs/Dialog/DialogContent.tsx

@@ -14,33 +14,35 @@ const CardBody = styled.div`
   min-width: 300px;
 `;
 
-export const DialogContent = forwardRef<HTMLDivElement, React.HTMLProps<HTMLDivElement>>((props, propRef) => {
-  const { context: floatingContext, ...context } = useDialogContext();
-  const ref = useMergeRefs([context.refs.setFloating, propRef]);
+export const DialogContent = forwardRef<HTMLDivElement, React.HTMLProps<HTMLDivElement>>(
+  function DialogContent(props, propRef) {
+    const { context: floatingContext, ...context } = useDialogContext();
+    const ref = useMergeRefs([context.refs.setFloating, propRef]);
 
-  const root = document.getElementById('dialog');
-  if (!root) {
-    throw new Error('Dialog need to render in a <div id="dialog"></div>');
-  }
+    const root = document.getElementById('dialog');
+    if (!root) {
+      throw new Error('Dialog need to render in a <div id="dialog"></div>');
+    }
 
-  return (
-    <FloatingPortal root={root}>
-      {context.open && (
-        <StyledFloatingOverlay lockScroll>
-          <FloatingFocusManager context={floatingContext}>
-            <Card
-              ref={ref}
-              aria-labelledby={context.labelId}
-              aria-describedby={context.descriptionId}
-              {...context.getFloatingProps({
-                ...props,
-              })}
-            >
-              <CardBody>{props.children}</CardBody>
-            </Card>
-          </FloatingFocusManager>
-        </StyledFloatingOverlay>
-      )}
-    </FloatingPortal>
-  );
-});
+    return (
+      <FloatingPortal root={root}>
+        {context.open && (
+          <StyledFloatingOverlay lockScroll>
+            <FloatingFocusManager context={floatingContext}>
+              <Card
+                ref={ref}
+                aria-labelledby={context.labelId}
+                aria-describedby={context.descriptionId}
+                {...context.getFloatingProps({
+                  ...props,
+                })}
+              >
+                <CardBody>{props.children}</CardBody>
+              </Card>
+            </FloatingFocusManager>
+          </StyledFloatingOverlay>
+        )}
+      </FloatingPortal>
+    );
+  },
+);

package/src/components/dialogs/Dialog/DialogHeading.tsx

@@ -21,7 +21,7 @@ interface DialogHeadingProps extends HTMLProps<HTMLHeadingElement> {
 
 export const DialogHeading = forwardRef<HTMLHeadingElement, DialogHeadingProps>(function DialogHeading(
   { children, hasClose = true, ...props },
-  ref
+  ref,
 ) {
   const { setLabelId, setOpen } = useDialogContext();
   const id = useId();

package/src/components/dialogs/Dialog/useDialog.tsx

@@ -45,6 +45,6 @@ export function useDialog({
       setLabelId,
       setDescriptionId,
     }),
-    [open, setOpen, interactions, data, labelId, descriptionId]
+    [open, setOpen, interactions, data, labelId, descriptionId],
   );
 }