@takaro/lib-components 0.0.11 → 0.0.14

package/Dockerfile.dev

@@ -1,4 +1,4 @@
-FROM node:20.17.0-alpine AS build
+FROM node:20.18.0-alpine AS build
 
 ENV NODE_ENV=development
 WORKDIR /app

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@takaro/lib-components",
-  "version": "0.0.11",
+  "version": "0.0.14",
   "private": false,
   "description": "Takaro UI is a simple and customizable component library to build React apps faster within the Takaro eco system",
   "license": "AGPL-3.0-or-later",
@@ -15,58 +15,58 @@
     "test:update": "jest --updateSnapshot"
   },
   "devDependencies": {
-    "@hookform/devtools": "^4.2.2",
-    "@mdx-js/react": "^2.1.5",
-    "@types/jest": "^29.0.0",
-    "@types/react-window": "^1.8.5",
-    "@types/styled-components": "^5.1.25",
-    "@types/topojson-client": "^3.1.4",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "@hookform/devtools": "4.3.1",
+    "@mdx-js/react": "3.0.1",
+    "@types/jest": "29.5.13",
+    "@types/react-window": "1.8.8",
+    "@types/styled-components": "5.1.34",
+    "@types/topojson-client": "3.1.5",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
     "storybook": "7.6.20"
   },
   "peerDependencies": {
-    "@floating-ui/react": "^0.24.0 || ^0.26.0",
-    "@monaco-editor/react": "^4.4.6",
-    "@rjsf/core": "^5.6.2",
-    "@rjsf/utils": "^5.6.2",
-    "@rjsf/validator-ajv8": "^5.6.2",
-    "@tanstack/react-table": "^8.7.9",
-    "@tanstack/react-router": "1.35.3",
+    "@floating-ui/react": "0.26.24",
+    "@monaco-editor/react": "4.6.0",
+    "@rjsf/core": "5.20.0",
+    "@rjsf/utils": "5.20.0",
+    "@rjsf/validator-ajv8": "5.20.0",
+    "@tanstack/react-table": "8.20.5",
+    "@tanstack/react-router": "1.58.15",
     "@types/luxon": "3.4.2",
-    "framer-motion": "^10.16.12 || ^11.0.0",
+    "framer-motion": "11.9.0",
     "luxon": "3.5.0",
-    "notistack": "^3.0.1",
-    "polished": "^4.1.3",
-    "react": "^18.2.0",
-    "react-dnd": "^16.0.1",
-    "@sentry/react": "^8.5.0",
-    "react-dnd-html5-backend": "^16.0.1",
-    "react-dom": "^18.2.0",
-    "react-hook-form": "^7.50.1",
-    "react-icons": "^4.11.0 || ^5.0.0",
-    "react-intersection-observer": "^9.5.1",
-    "react-virtualized-auto-sizer": "^1.0.9",
-    "react-window": "^1.8.8",
-    "simplebar-react": "^3.2.4",
-    "styled-components": "^5.3.5",
-    "web-vitals": "^2.1.2 || ^4.0.0",
-    "@visx/scale": "^3.5.0",
-    "@visx/responsive": "^3.3.0",
-    "@visx/group": "^3.3.0",
-    "@visx/heatmap": "^3.3.0",
-    "@visx/tooltip": "^3.3.0",
-    "@visx/event": "^3.3.0",
-    "@visx/shape": "^3.5.0",
-    "@visx/grid": "^3.5.0",
-    "@visx/vendor": "^3.5.0",
-    "@visx/brush": "^3.6.1",
-    "@visx/axis": "^3.5.0",
+    "notistack": "3.0.1",
+    "polished": "4.3.1",
+    "react": "18.3.1",
+    "react-dnd": "16.0.1",
+    "@sentry/react": "8.32.0",
+    "react-dnd-html5-backend": "16.0.1",
+    "react-dom": "18.3.1",
+    "react-hook-form": "7.53.0",
+    "react-icons": "5.3.0",
+    "react-intersection-observer": "9.13.1",
+    "react-virtualized-auto-sizer": "1.0.24",
+    "react-window": "1.8.10",
+    "simplebar-react": "3.2.6",
+    "styled-components": "5.3.11",
+    "web-vitals": "4.2.3",
+    "@visx/scale": "3.5.0",
+    "@visx/responsive": "3.10.2",
+    "@visx/group": "3.3.0",
+    "@visx/heatmap": "3.3.0",
+    "@visx/tooltip": "3.3.0",
+    "@visx/event": "3.3.0",
+    "@visx/shape": "3.5.0",
+    "@visx/grid": "3.5.0",
+    "@visx/vendor": "3.5.0",
+    "@visx/brush": "3.10.4",
+    "@visx/axis": "3.10.1",
     "@visx/pattern": "3.3.0",
-    "@visx/curve": "^3.3.0",
-    "@visx/gradient": "^3.3.0",
-    "@visx/mock-data": "^3.3.0",
+    "@visx/curve": "3.3.0",
+    "@visx/gradient": "3.3.0",
+    "@visx/mock-data": "3.3.0",
     "@visx/geo": "3.5.0",
-    "topojson-client": "^3.1.0"
+    "topojson-client": "3.1.0"
   }
 }

package/src/components/actions/IconButton/index.tsx

@@ -1,5 +1,6 @@
 import { cloneElement, forwardRef, ReactElement } from 'react';
 import { Color, Size } from '../../../styled/types';
+import { Badge } from '../../../components';
 import { Default } from './style';
 
 export interface IconButtonProps {
@@ -35,7 +36,7 @@ export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(functio
   return (
     <Default type="button" color={color} onClick={onClick} ref={ref} disabled={disabled} aria-label={ariaLabel}>
       {cloneElement(icon, { size: getSize(size) })}
-      {badge && <div>{badge}</div>}
+      {badge && <Badge>{badge}</Badge>}
     </Default>
   );
 });

package/src/components/actions/IconButton/style.ts

@@ -51,25 +51,6 @@ export const Default = styled.button<{ color: Color }>`
     }
   }
 
-  div {
-    background-color: ${({ theme }) => theme.colors.background};
-    color: ${({ theme }) => theme.colors.text};
-    font-size: ${({ theme }) => theme.fontSize.tiny};
-    font-weight: 600;
-    border-radius: ${({ theme }) => theme.borderRadius.small};
-    width: fit-content;
-    height: 1.5rem;
-    line-height: 1.1rem;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    position: absolute;
-    top: -${({ theme }) => theme.spacing['0_75']};
-    right: -${({ theme }) => theme.spacing['0_75']};
-    padding: ${({ theme }) => theme.spacing['0_25']};
-    border: 1px solid ${({ theme }) => theme.colors.backgroundAccent};
-  }
-
   svg {
     cursor: pointer;
     fill: ${({ theme }) => theme.colors.text};

package/src/components/actions/ToggleButton/ToggleButton.stories.tsx

@@ -22,6 +22,7 @@ export default {
   args: {
     exclusive: true,
     orientation: 'horizontal',
+    defaultValue: 'left',
     fullWidth: false,
   },
 } as Meta<ToggleButtonGroupProps>;

package/src/components/actions/ToggleButton/ToggleButton.tsx

@@ -17,7 +17,9 @@ export const ToggleButton = forwardRef<HTMLButtonElement, ToggleButtonProps>(fun
   { selected = false, disabled = false, onClick = undefined, value, parentClickEvent = () => {}, children, tooltip },
   ref,
 ) {
-  const handleOnClick = () => {
+  const handleOnClick = (m: MouseEvent) => {
+    m.preventDefault();
+    m.stopPropagation();
     if (disabled) return;
     parentClickEvent(value);
     if (onClick) {

package/src/components/actions/ToggleButton/ToggleButtonGroup.tsx

@@ -47,7 +47,12 @@ export const ToggleButtonGroup: FC<ToggleButtonGroupProps> & SubComponents = ({
     const m = new Map<string, boolean>();
     Children.forEach(children, (child) => {
       if (isValidElement(child)) {
-        m.set(child.props.value, false);
+        console.log(child.props.value, defaultValue);
+        if (child.props.value === defaultValue) {
+          m.set(child.props.value, true);
+        } else {
+          m.set(child.props.value, false);
+        }
       }
     });
     return m;
@@ -65,7 +70,16 @@ export const ToggleButtonGroup: FC<ToggleButtonGroupProps> & SubComponents = ({
       }
       return setSelected(value);
     }
-    // handle case that each button has a seperate state
+
+    // In case there always has to be one value selected, the clicked value is true and there is currently only one value selected then we don't do anything
+    if (
+      !canSelectNone &&
+      (selected as Map<string, boolean>).get(value) === true &&
+      Array.from((selected as Map<string, boolean>).values()).filter(Boolean).length === 1
+    ) {
+      return;
+    }
+
     setSelected(new Map((selected as Map<string, boolean>).set(value, !(selected as Map<string, boolean>).get(value))));
   };
 

package/src/components/data/Drawer/Drawer.stories.tsx

@@ -5,6 +5,7 @@ import { styled } from '../../../styled';
 import { SubmitHandler, useForm } from 'react-hook-form';
 import { z } from 'zod';
 import { zodResolver } from '@hookform/resolvers/zod';
+import { DrawerOptions } from './useDrawer';
 
 const ButtonContainer = styled.div`
   display: flex;
@@ -18,7 +19,10 @@ const Status = styled.div`
 export default {
   title: 'data/Drawer',
   component: Drawer,
-} as Meta;
+  args: {
+    promptCloseConfirmation: false,
+  },
+} as Meta<DrawerOptions>;
 
 export const Loading: StoryFn = () => {
   return <DrawerSkeleton />;
@@ -33,7 +37,7 @@ interface FormFields {
   onStoreFront: boolean;
 }
 
-export const Default: StoryFn = () => {
+export const Default: StoryFn<DrawerOptions> = ({ promptCloseConfirmation }) => {
   const [open, setOpen] = useState<boolean>(false);
 
   const validationSchema = useMemo(
@@ -57,7 +61,7 @@ export const Default: StoryFn = () => {
   return (
     <>
       <Button onClick={() => setOpen(true)} text="Open drawer" />
-      <Drawer open={open} onOpenChange={setOpen}>
+      <Drawer open={open} onOpenChange={setOpen} promptCloseConfirmation={promptCloseConfirmation}>
         <Drawer.Content>
           <Drawer.Heading>Product Details</Drawer.Heading>
           <Drawer.Body>
@@ -85,11 +89,8 @@ export const Default: StoryFn = () => {
                   />
                 </CollapseList.Item>
                 <CollapseList.Item title="Pricing">
-                  <RadioGroup
-                    control={control}
-                    label="Selection a price type"
-                    name="priceType"
-                    options={[
+                  <RadioGroup control={control} label="Selection a price type" name="priceType">
+                    {[
                       {
                         label: 'Fixed',
                         labelPosition: 'left',
@@ -100,8 +101,16 @@ export const Default: StoryFn = () => {
                         labelPosition: 'left',
                         value: 'variable',
                       },
-                    ]}
-                  />
+                    ].map(({ value, label }) => (
+                      <div
+                        key={`gender-${value}`}
+                        style={{ display: 'flex', alignItems: 'center', gap: '1rem', marginBottom: '1rem' }}
+                      >
+                        <RadioGroup.Item value={value} id={value} />
+                        <label htmlFor={value}>{label}</label>
+                      </div>
+                    ))}
+                  </RadioGroup>
                 </CollapseList.Item>
               </CollapseList>
               <CollapseList.Item title="Settings">

package/src/components/data/Drawer/DrawerContent.tsx

@@ -1,5 +1,6 @@
 import { forwardRef, HTMLProps, useState } from 'react';
 import { styled } from '../../../styled';
+import { Button } from '../../../components';
 import { AnimatePresence, motion, PanInfo } from 'framer-motion';
 import SimpleBar from 'simplebar-react';
 
@@ -15,6 +16,39 @@ const Container = styled(motion.div)`
   border-left: 1px solid ${({ theme }) => theme.colors.backgroundAccent};
 `;
 
+const ButtonContainer = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: ${({ theme }) => theme.spacing[1]};
+`;
+
+const CloseConfirmationWrapper = styled.div`
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.8);
+`;
+
+const CloseConfirmationContainer = styled.div`
+  height: 150px;
+  padding: ${({ theme }) => theme.spacing[2]};
+  width: calc(100% - 200px);
+  background-color: ${({ theme }) => theme.colors.background};
+  border: 1px solid ${({ theme }) => theme.colors.backgroundAccent};
+  border-radius: ${({ theme }) => theme.borderRadius.medium};
+
+  h2,
+  p {
+    margin-bottom: ${({ theme }) => theme.spacing[1]};
+  }
+`;
+
 export const HandleContainer = styled.div`
   height: 80vh;
   top: 10vh;
@@ -35,7 +69,16 @@ export const HandleContainer = styled.div`
 `;
 
 export const DrawerContent = forwardRef<HTMLElement, HTMLProps<HTMLDivElement>>(function DrawerContent(props, propRef) {
-  const { context, labelId, descriptionId, getFloatingProps, setOpen, canDrag } = useDrawerContext();
+  const {
+    context,
+    labelId,
+    descriptionId,
+    getFloatingProps,
+    setOpen,
+    canDrag,
+    showConfirmDialog,
+    setShowConfirmDialog,
+  } = useDrawerContext();
 
   const ref = useMergeRefs([context.refs.setFloating, propRef]);
   const [dragPosition, setDragPosition] = useState<number>(0);
@@ -100,6 +143,18 @@ export const DrawerContent = forwardRef<HTMLElement, HTMLProps<HTMLDivElement>>(
                   </HandleContainer>
                 )}
                 <SimpleBar style={{ maxHeight: '92vh' }}>{props.children}</SimpleBar>
+                {showConfirmDialog && (
+                  <CloseConfirmationWrapper>
+                    <CloseConfirmationContainer>
+                      <h2>Your progress will be lost</h2>
+                      <p>Are you sure you want to exit? Your progress will not be saved.</p>
+                      <ButtonContainer>
+                        <Button text="Cancel" color="secondary" onClick={() => setShowConfirmDialog(false)} />
+                        <Button text="Discard changes" onClick={() => setOpen(false)} color="error" />
+                      </ButtonContainer>
+                    </CloseConfirmationContainer>
+                  </CloseConfirmationWrapper>
+                )}
               </Container>
             </FloatingFocusManager>
           </FloatingOverlay>

package/src/components/data/Drawer/useDrawer.tsx

@@ -6,17 +6,20 @@ export interface DrawerOptions {
   initialOpen?: boolean;
   onOpenChange?: (open: boolean) => void;
   canDrag?: boolean;
+  promptCloseConfirmation?: boolean;
 }
 
 export function useDrawer({
   initialOpen = false,
   canDrag = false,
   open: controlledOpen,
+  promptCloseConfirmation = false,
   onOpenChange: setControlledOpen,
 }: DrawerOptions) {
   const [uncontrolledOpen, setUncontrolledOpen] = useState(initialOpen);
   const [labelId, setLabelId] = useState<string | undefined>();
   const [descriptionId, setDescriptionId] = useState<string | undefined>();
+  const [showConfirmDialog, setShowConfirmDialog] = useState<boolean>(false);
 
   const open = controlledOpen ?? uncontrolledOpen;
   const setOpen = setControlledOpen ?? setUncontrolledOpen;
@@ -32,13 +35,24 @@ export function useDrawer({
     useClick(context, {
       enabled: controlledOpen == null,
     }),
-    useDismiss(context, { outsidePressEvent: 'mousedown' }),
+    useDismiss(context, {
+      outsidePressEvent: 'mousedown',
+      outsidePress: (_mouseEvent) => {
+        if (promptCloseConfirmation === true) {
+          setShowConfirmDialog(true);
+          return false;
+        }
+        return true;
+      },
+    }),
   ]);
 
   return useMemo(
     () => ({
       open,
       setOpen,
+      showConfirmDialog,
+      setShowConfirmDialog,
       ...interactions,
       ...data,
       labelId,
@@ -47,6 +61,6 @@ export function useDrawer({
       setDescriptionId,
       canDrag,
     }),
-    [open, setOpen, interactions, data, labelId, descriptionId],
+    [open, setOpen, interactions, data, labelId, descriptionId, showConfirmDialog],
   );
 }

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

@@ -17,11 +17,18 @@ import {
   VisibilityState,
   ColumnPinningState,
   RowSelectionState,
+  ExpandedState,
+  getExpandedRowModel,
+  Row,
 } from '@tanstack/react-table';
 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 { Button, Empty, IconButton, Spinner, ToggleButtonGroup } from '../../../components';
+import {
+  AiOutlinePicCenter as RelaxedDensityIcon,
+  AiOutlinePicRight as TightDensityIcon,
+  AiOutlineRight as ExpandIcon,
+  AiOutlineUp as CollapseIcon,
+} from 'react-icons/ai';
 import { ColumnHeader } from './subcomponents/ColumnHeader';
 import { ColumnVisibility } from './subcomponents/ColumnVisibility';
 import { Filter } from './subcomponents/Filter';
@@ -37,8 +44,12 @@ export interface TableProps<DataType extends object> {
   data: DataType[];
   isLoading?: boolean;
 
-  // currently not possible to type this properly: https://github.com/TanStack/table/issues/4241
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  /// Condition for row to be expandable
+  canExpand?: (row: Row<DataType>) => boolean;
+  /// What to render when row can be expanded
+  renderDetailPanel?: (row: Row<DataType>) => JSX.Element;
+
+  /// currently not possible to type this properly: https://github.com/TanStack/table/issues/4241
   columns: ColumnDef<DataType, any>[];
 
   /// Renders actions that are always visible
@@ -83,7 +94,9 @@ export function Table<DataType extends object>({
   title,
   rowSelection,
   columnSearch,
+  renderDetailPanel,
   renderToolbar,
+  canExpand = () => false,
   renderRowSelectionActions,
   isLoading = false,
 }: TableProps<DataType>) {
@@ -111,9 +124,13 @@ export function Table<DataType extends object>({
       {} as Record<string, boolean>,
     );
   });
+
   const [columnPinning, setColumnPinning] = useState<ColumnPinningState>({});
   const { storedValue: density, setValue: setDensity } = useLocalStorage<Density>(`table-density-${id}`, 'tight');
 
+  // Might because potentially none fullfil the canExpand condtion.
+  const rowsMightExpand = renderDetailPanel ? true : false;
+  const [expanded, setExpanded] = useState<ExpandedState>({});
   const [openColumnVisibilityTooltip, setOpenColumnVisibilityTooltip] = useState<boolean>(false);
   const [hasShownColumnVisibilityTooltip, setHasShownColumnVisibilityTooltip] = useState<boolean>(false);
   const [columnOrder, setColumnOrder] = useState<ColumnOrderState>(
@@ -126,6 +143,7 @@ export function Table<DataType extends object>({
   );
 
   const ROW_SELECTION_COL_SPAN = rowSelection ? 1 : 0;
+  const EXPAND_ROW_COL_SPAN = rowsMightExpand ? 1 : 0;
   const MINIMUM_ROW_COUNT_FOR_PAGINATION = 5;
 
   // handles the column visibility tooltip (shows tooltip when the first column is hidden)
@@ -154,6 +172,7 @@ export function Table<DataType extends object>({
     data,
     columns,
     getCoreRowModel: getCoreRowModel(),
+    getExpandedRowModel: getExpandedRowModel(),
     pageCount: pagination?.pageOptions.pageCount ?? -1,
     manualPagination: true,
     paginateExpandedRows: true, // Expanded rows will be paginated this means that rows that take up more space will be shown on next page.
@@ -169,6 +188,7 @@ export function Table<DataType extends object>({
     enablePinning: true,
     enableHiding: !!columnVisibility,
     enableRowSelection: !!rowSelection,
+    getRowCanExpand: canExpand,
     autoResetPageIndex: false,
 
     columnResizeMode: 'onChange',
@@ -180,6 +200,7 @@ export function Table<DataType extends object>({
     onColumnOrderChange: setColumnOrder,
     onColumnPinningChange: setColumnPinning,
     onRowSelectionChange: rowSelection ? rowSelection?.setRowSelectionState : undefined,
+    onExpandedChange: setExpanded,
 
     initialState: {
       columnVisibility,
@@ -194,6 +215,7 @@ export function Table<DataType extends object>({
     state: {
       columnVisibility,
       columnOrder,
+      expanded,
       sorting: sorting.sortingState,
       columnFilters: columnFiltering.columnFiltersState,
       globalFilter: columnSearch.columnSearchState,
@@ -204,6 +226,7 @@ export function Table<DataType extends object>({
   });
 
   const tableHasNoData = isLoading === false && table.getRowModel().rows.length === 0;
+  const tableHasData = isLoading === false && table.getRowModel().rows.length !== 0;
 
   // rowSelection.rowSelectionState has the following shape: { [rowId: string]: boolean }
   const hasRowSelection = useMemo(() => {
@@ -254,7 +277,7 @@ export function Table<DataType extends object>({
             <thead>
               {table.getHeaderGroups().map((headerGroup) => (
                 <tr key={headerGroup.id}>
-                  {rowSelection && table.getRowModel().rows.length !== 0 && !isLoading && (
+                  {rowSelection && tableHasData && (
                     <Th
                       isActive={false}
                       isRight={false}
@@ -276,6 +299,17 @@ export function Table<DataType extends object>({
                       </div>
                     </Th>
                   )}
+                  {rowsMightExpand && tableHasData && (
+                    <Th
+                      isActive={false}
+                      isRight={false}
+                      isDragging={false}
+                      canDrag={false}
+                      isRowSelection={true}
+                      width={15}
+                    />
+                  )}
+
                   {headerGroup.headers.map((header) => (
                     <ColumnHeader
                       header={header}
@@ -291,7 +325,7 @@ export function Table<DataType extends object>({
               {/* loading state */}
               {isLoading && (
                 <tr>
-                  <td colSpan={table.getAllColumns().length + ROW_SELECTION_COL_SPAN}>
+                  <td colSpan={table.getAllColumns().length + ROW_SELECTION_COL_SPAN + EXPAND_ROW_COL_SPAN}>
                     <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '15px' }}>
                       <Spinner size="small" />
                     </div>
@@ -302,7 +336,7 @@ export function Table<DataType extends object>({
               {/* empty state */}
               {tableHasNoData && (
                 <tr>
-                  <td colSpan={table.getAllColumns().length + ROW_SELECTION_COL_SPAN}>
+                  <td colSpan={table.getAllColumns().length + ROW_SELECTION_COL_SPAN + EXPAND_ROW_COL_SPAN}>
                     <div style={{ width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                       <Empty
                         header=""
@@ -323,30 +357,51 @@ export function Table<DataType extends object>({
 
               {!isLoading &&
                 table.getRowModel().rows.map((row) => (
-                  <tr key={row.id}>
-                    {row.getCanSelect() && (
-                      <td style={{ paddingRight: '10px', width: '15px' }}>
-                        <CheckBox
-                          value={row.getIsSelected()}
-                          id={row.id}
-                          name={row.id}
-                          hasError={false}
-                          disabled={!row.getCanSelect()}
-                          onChange={() => row.toggleSelected()}
-                          hasDescription={false}
-                          size="small"
-                        />
-                      </td>
-                    )}
-                    {row.getVisibleCells().map(({ column, id, getContext }) => (
-                      <td key={id}>{flexRender(column.columnDef.cell, getContext())}</td>
-                    ))}
-                    {row.getIsExpanded() && (
-                      <tr>
-                        <td colSpan={table.getVisibleLeafColumns().length} />
-                      </tr>
-                    )}
-                  </tr>
+                  <>
+                    <tr key={row.id}>
+                      {row.getCanExpand() ? (
+                        <td style={{ paddingRight: '10px', width: '15px' }}>
+                          {row.getIsExpanded() ? (
+                            <IconButton
+                              size="tiny"
+                              icon={<CollapseIcon />}
+                              ariaLabel="Collapse expanded row"
+                              onClick={() => row.toggleExpanded(false)}
+                            />
+                          ) : (
+                            <IconButton
+                              size="tiny"
+                              icon={<ExpandIcon />}
+                              ariaLabel="expand row"
+                              onClick={() => row.toggleExpanded(true)}
+                            />
+                          )}
+                        </td>
+                      ) : rowsMightExpand ? (
+                        <td />
+                      ) : (
+                        <></>
+                      )}
+                      {row.getCanSelect() && (
+                        <td style={{ paddingRight: '10px', width: '15px' }}>
+                          <CheckBox
+                            value={row.getIsSelected()}
+                            id={row.id}
+                            name={row.id}
+                            hasError={false}
+                            disabled={!row.getCanSelect()}
+                            onChange={() => row.toggleSelected()}
+                            hasDescription={false}
+                            size="small"
+                          />
+                        </td>
+                      )}
+                      {row.getVisibleCells().map(({ column, id, getContext }) => (
+                        <td key={id}>{flexRender(column.columnDef.cell, getContext())}</td>
+                      ))}
+                    </tr>
+                    {row.getIsExpanded() && renderDetailPanel!(row)}
+                  </>
                 ))}
             </tbody>
 
@@ -355,9 +410,15 @@ export function Table<DataType extends object>({
                 <tr>
                   {/* This is the row selection */}
                   {ROW_SELECTION_COL_SPAN ? <td colSpan={1} /> : null}
+                  {/* This is for the row expansion icon */}
+                  {EXPAND_ROW_COL_SPAN ? <td colSpan={1} /> : null}
                   {pagination && (
                     <>
-                      <td colSpan={table.getVisibleLeafColumns().length - 3 - ROW_SELECTION_COL_SPAN} />
+                      <td
+                        colSpan={
+                          table.getVisibleLeafColumns().length - 3 - ROW_SELECTION_COL_SPAN - EXPAND_ROW_COL_SPAN
+                        }
+                      />
                       <td colSpan={1}>
                         <span>
                           showing {table.getState().pagination.pageIndex * table.getState().pagination.pageSize + 1}-

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

@@ -46,6 +46,27 @@ export const StyledTable = styled.table<{ density: Density }>`
     border-bottom: none;
   }
 
+  tr.subrow {
+    border-bottom: 1px solid ${({ theme }) => theme.colors.backgroundAccent};
+
+    &:nth-child(even) {
+      background-color: ${({ theme }) => theme.colors.background};
+    }
+
+    &:nth-child(odd) {
+      background-color: ${({ theme }) => theme.colors.backgroundAlt};
+    }
+
+    td {
+      &:first-child {
+        padding-left: 0;
+        padding-bottom: 0;
+      }
+      padding: ${({ theme, density }) =>
+        density === 'tight' ? `${theme.spacing['0_5']} 0` : `${theme.spacing['0_5']} 0`};
+    }
+  }
+
   td {
     border-right: none;
     border-bottom: 1px solid ${({ theme }) => theme.colors.backgroundAccent};

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

@@ -72,7 +72,7 @@ export function ColumnHeader<DataType extends object>({ header, table, isLoading
       const hoverMiddleX = (hoverBoundingRect.right - hoverBoundingRect.left) / 2;
 
       // Determine mouse position
-      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+
       const clientOffset = monitor.getClientOffset()!;
 
       // Get pixels to the top

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

@@ -14,6 +14,7 @@ export const PageSizeSelect: FC<PageSizeSelectProps> = ({ onPageSizeChange, page
       id="page-size"
       multiple={false}
       name="pageSize"
+      inPortal={true}
       value={pageSize.toString() || '10'}
       onChange={onPageSizeChange}
       render={(selectedItems) => {

package/src/components/feedback/Badge/Badge.stories.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { Meta, StoryFn } from '@storybook/react';
+import { Badge, BadgeProps } from '.';
+
+export default {
+  title: 'Feedback/Badge',
+  component: Badge,
+  args: {
+    variant: 'warning',
+    animate: false,
+  },
+} as Meta<BadgeProps>;
+
+export const Default: StoryFn<BadgeProps> = (args) => (
+  <div>
+    <h2 style={{ backgroundColor: 'orange', position: 'relative', width: 'fit-content' }}>
+      this is the title{' '}
+      <Badge variant={args.variant} animate={args.animate}>
+        here
+      </Badge>
+    </h2>
+  </div>
+);

package/src/components/feedback/Badge/index.tsx

@@ -0,0 +1,47 @@
+import { forwardRef, PropsWithChildren } from 'react';
+import { pulseAnimation, styled } from '../../../styled';
+import { AlertVariants, Color } from '../../../styled';
+import { shade } from 'polished';
+
+type ColorVariant = AlertVariants | Color | 'default';
+
+const Container = styled.div<{ variant: ColorVariant; animate: boolean }>`
+  background-color: ${({ theme, variant }) =>
+    variant === 'default' ? theme.colors.background : shade('0.8', theme.colors[variant])};
+  color: ${({ theme, variant }) => (variant === 'default' ? theme.colors.text : theme.colors[variant])};
+  font-size: ${({ theme }) => theme.fontSize.tiny};
+  font-weight: 600;
+  border-radius: ${({ theme }) => theme.borderRadius.small};
+  width: fit-content;
+  height: 1.5rem;
+  line-height: 1.1rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  top: -${({ theme }) => theme.spacing['1']};
+  right: -${({ theme }) => theme.spacing['0_75']};
+  padding: ${({ theme }) => theme.spacing['0_25']};
+  border: 1px solid
+    ${({ theme, variant }) => (variant === 'default' ? theme.colors.backgroundAccent : theme.colors[variant])};
+
+  animation: ${({ animate, variant, theme }) =>
+      animate ? pulseAnimation(variant === 'default' ? theme.colors.backgroundAccent : theme.colors[variant]) : 'none'}
+    5s infinite ease-in-out;
+`;
+
+export interface BadgeProps {
+  variant?: ColorVariant;
+  animate?: boolean;
+}
+
+export const Badge = forwardRef<HTMLDivElement, PropsWithChildren<BadgeProps>>(function Badge(
+  { variant = 'default', children, animate = false },
+  ref,
+) {
+  return (
+    <Container ref={ref} variant={variant} animate={animate}>
+      {children}
+    </Container>
+  );
+});

package/src/components/feedback/ErrorPage/index.tsx

@@ -128,7 +128,7 @@ const defaultListItems = [
     icon: <AiOutlineMenu />,
     title: 'Api reference',
     description: 'A complete API reference for our libraries',
-    to: 'https://api.stg.takaro.dev/api.html',
+    to: 'https://api.takaro.io/api.html',
   },
   /*
   {

package/src/components/feedback/index.ts

@@ -31,3 +31,6 @@ export type { ErrorPageProps } from './ErrorPage';
 
 export { FormError } from './FormError';
 export type { FormErrorProps } from './FormError';
+
+export { Badge } from './Badge';
+export type { BadgeProps } from './Badge';

package/src/components/inputs/Date/DatePicker/Controlled.tsx

@@ -29,6 +29,7 @@ export const ControlledDatePicker: FC<ControlledDatePickerProps> = (props) => {
     description,
     allowFutureDates = true,
     allowPastDates = true,
+    canClear,
     customDateFilter,
   } = defaultsApplier(props);
 
@@ -91,6 +92,7 @@ export const ControlledDatePicker: FC<ControlledDatePickerProps> = (props) => {
             format={format}
             placeholder={placeholder}
             mode={mode}
+            canClear={canClear}
           />
         )}
         {showError && error?.message && <ErrorMessage message={error.message} />}

package/src/components/inputs/Date/DatePicker/DatePicker.stories.tsx

@@ -253,7 +253,7 @@ export const AbsoluteSubmit = () => {
           name="date"
           required={false}
           loading={false}
-          description={'The role will be automatically removed after this date'}
+          description={'The role will be automatically removed after this date.'}
           popOverPlacement={'bottom'}
           timePickerOptions={{ interval: 30 }}
           allowPastDates={false}

package/src/components/inputs/Date/DatePicker/Generic.tsx

@@ -1,5 +1,5 @@
-import { FC, useLayoutEffect, useMemo, useState } from 'react';
-import { Button, Popover } from '../../../../components';
+import { FC, MouseEvent, useLayoutEffect, useMemo, useState } from 'react';
+import { Button, IconButton, Popover } from '../../../../components';
 import { DateTime, DateTimeFormatOptions, Settings } from 'luxon';
 import { dateFormats, timeFormats } from './formats';
 import { GenericInputProps } from '../../InputProps';
@@ -8,6 +8,7 @@ import { TimePicker } from '../subcomponents/TimePicker';
 import { Calendar } from '../subcomponents/Calendar';
 import { RelativePicker, timeDirection } from '../subcomponents/RelativePicker';
 import { Placement } from '@floating-ui/react';
+import { AiOutlineClose as ClearIcon } from 'react-icons/ai';
 
 interface TimePickerOptions {
   /// Determines the interval between time options
@@ -51,6 +52,9 @@ export interface DatePickerProps {
 
   /// Placeholder text for the input
   placeholder?: string;
+
+  /// Can set field back to undefined
+  canClear?: boolean;
 }
 
 export type GenericDatePickerProps = GenericInputProps<string, HTMLInputElement> & DatePickerProps;
@@ -71,6 +75,7 @@ export const GenericDatePicker: FC<GenericDatePickerProps> = ({
   format = DateTime.DATE_SHORT,
   allowPastDates = true,
   allowFutureDates = true,
+  canClear = false,
   customDateFilter,
   mode,
 }) => {
@@ -172,11 +177,22 @@ export const GenericDatePicker: FC<GenericDatePickerProps> = ({
     return renderPlaceholder();
   };
 
+  const handleClear = (e: MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (onChange) {
+      onChange(null as any);
+    }
+  };
+
   return (
     <Popover placement={popOverPlacement} open={open} onOpenChange={setOpen}>
-      <Popover.Trigger asChild>
+      <Popover.Trigger asChild readOnly={readOnly}>
         <ResultContainer readOnly={readOnly} hasError={hasError} onClick={() => setOpen(!open)}>
-          {renderResult()}
+          <span>{renderResult()}</span>
+          {!readOnly && canClear && value && !open && (
+            <IconButton size="tiny" icon={<ClearIcon />} ariaLabel="clear" onClick={handleClear} />
+          )}
         </ResultContainer>
       </Popover.Trigger>
       <Popover.Content>

package/src/components/inputs/Date/DatePicker/style.ts

@@ -18,10 +18,9 @@ export const ResultContainer = styled.div<{ readOnly: boolean; hasError: boolean
   z-index: ${({ theme }) => theme.zIndex.dropdown};
   cursor: ${({ readOnly }) => (readOnly ? 'not-allowed' : 'pointer')};
   user-select: none;
-
-  span {
-    color: ${({ theme }) => theme.colors.primary};
-  }
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
 `;
 
 export const ContentContainer = styled.div`

package/src/components/inputs/DurationField/Duration.stories.tsx

@@ -3,6 +3,7 @@ import { DurationField, DurationFieldProps } from '../../../components';
 import { z } from 'zod';
 import { StoryFn, Meta } from '@storybook/react';
 import { useForm, SubmitHandler } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
 
 export default {
   title: 'Inputs/DurationField',
@@ -26,7 +27,9 @@ export const Default: StoryFn<DurationFieldProps> = (args) => {
     duration: z.number().positive(),
   });
 
-  const { control, handleSubmit } = useForm<z.infer<typeof validationSchema>>();
+  const { control, handleSubmit } = useForm<z.infer<typeof validationSchema>>({
+    resolver: zodResolver(validationSchema),
+  });
   const onSubmit: SubmitHandler<z.infer<typeof validationSchema>> = ({ duration }) => {
     setResult(duration);
   };

package/src/components/inputs/index.ts

@@ -1,3 +1,10 @@
+export interface PaginationProps {
+  isFetching: boolean;
+  hasNextPage: boolean;
+  isFetchingNextPage: boolean;
+  fetchNextPage: () => void;
+}
+
 export { ControlledCheckBox as CheckBox } from './CheckBox';
 export type { ControlledCheckBoxProps as CheckBoxProps } from './CheckBox';
 export { GenericCheckBox as UnControlledCheckBox } from './CheckBox/Generic';

package/src/components/inputs/selects/SelectQueryField/Controlled.tsx

@@ -29,6 +29,11 @@ export const ControlledSelectQueryField: FC<ControlledSelectQueryFieldProps> & S
     inPortal,
     debounce,
     isLoadingData,
+    hasNextPage,
+    fetchNextPage,
+    isFetching,
+    isFetchingNextPage,
+    optionCount,
     handleInputValueChange,
   } = defaultsApplier(props);
 
@@ -85,7 +90,12 @@ export const ControlledSelectQueryField: FC<ControlledSelectQueryFieldProps> & S
           onFocus={handleOnFocus}
           value={field.value}
           debounce={debounce}
+          optionCount={optionCount}
           handleInputValueChange={handleInputValueChange}
+          isFetching={isFetching}
+          isFetchingNextPage={isFetchingNextPage}
+          hasNextPage={hasNextPage}
+          fetchNextPage={fetchNextPage}
         >
           {children}
         </GenericSelectQueryField>

package/src/components/inputs/selects/SelectQueryField/Generic/index.tsx

@@ -28,14 +28,15 @@ import { useDebounce } from '../../../../../hooks';
 import { setAriaDescribedBy } from '../../../layout';
 import { FeedBackContainer } from '../style';
 import { SelectItem, SelectContext, getLabelFromChildren } from '../../';
+import { PaginationProps } from '../../../';
 
 /* The SearchField depends on a few things of <Select/> */
 import { GroupLabel } from '../../SelectField/style';
 import { SelectContainer, SelectButton, StyledArrowIcon, StyledFloatingOverlay } from '../../sharedStyle';
-import { IconButton, Spinner } from '../../../../../components';
+import { IconButton, InfiniteScroll, Spinner } from '../../../../../components';
 import { GenericTextField } from '../../../TextField/Generic';
 
-interface SharedSelectQueryFieldProps {
+interface SharedSelectQueryFieldProps extends PaginationProps {
   // Enables loading data feedback for user
   isLoadingData?: boolean;
   /// The placeholder text to show when the input is empty
@@ -53,6 +54,9 @@ interface SharedSelectQueryFieldProps {
 
   /// The selected items shown in the select field
   render?: (selectedItems: SelectItem[]) => React.ReactNode;
+
+  /// The total options that will be visible when fully loaded
+  optionCount?: number;
 }
 
 interface SingleSelectQueryFieldProps extends SharedSelectQueryFieldProps {
@@ -100,12 +104,17 @@ export const GenericSelectQueryField = forwardRef<HTMLInputElement, GenericSelec
       hasError,
       children,
       readOnly,
+      isFetchingNextPage,
+      isFetching,
+      fetchNextPage,
+      hasNextPage,
       render,
       multiple = false,
       canClear = false,
       debounce = 250,
       isLoadingData: isLoading = false,
       handleInputValueChange,
+      optionCount,
     } = defaultsApplier(props);
 
     const [open, setOpen] = useState<boolean>(false);
@@ -201,6 +210,7 @@ export const GenericSelectQueryField = forwardRef<HTMLInputElement, GenericSelec
               name={`${name}-input`}
               hasDescription={false}
               icon={<SearchIcon />}
+              suffix={isLoading ? 'Loading' : optionCount !== undefined ? `Result: ${optionCount}` : undefined}
               hasError={hasError}
               value={inputValue.value}
               onChange={onInputChange}
@@ -215,6 +225,14 @@ export const GenericSelectQueryField = forwardRef<HTMLInputElement, GenericSelec
               </FeedBackContainer>
             )}
             {hasOptions && options}
+            {hasOptions && !isLoading && (
+              <InfiniteScroll
+                isFetching={isFetching}
+                hasNextPage={hasNextPage}
+                fetchNextPage={fetchNextPage}
+                isFetchingNextPage={isFetchingNextPage}
+              />
+            )}
             {/* Basically first interaction */}
             {!hasOptions && inputValue.value === '' && <FeedBackContainer>Start typing to search</FeedBackContainer>}
             {/* When there is no result */}

package/src/components/inputs/selects/SelectQueryField/SelectQueryField.stories.tsx

@@ -69,6 +69,11 @@ export const ServerSideSubmit: StoryFn<SelectQueryFieldProps> = (args) => {
           handleInputValueChange={mockAPICall}
           isLoadingData={loading}
           required={false}
+          hasNextPage={false}
+          optionCount={10}
+          isFetching={false}
+          isFetchingNextPage={false}
+          fetchNextPage={() => {}}
           name="film"
         >
           {/* In this case the label is the same as the value but ofcourse that can differ*/}
@@ -124,6 +129,11 @@ export const ClientSideSubmit: StoryFn<SelectQueryFieldProps> = (args) => {
           handleInputValueChange={handleInputChange}
           required={false}
           debounce={0}
+          hasNextPage={false}
+          optionCount={10}
+          isFetching={false}
+          isFetchingNextPage={false}
+          fetchNextPage={() => {}}
           name="film"
         >
           {/* In this case the label is the same as the value but ofcourse that can differ*/}
@@ -186,6 +196,11 @@ export const ClientSideMultiSelectSubmit: StoryFn<SelectQueryFieldProps> = (args
           required={false}
           canClear={args.canClear}
           debounce={0}
+          hasNextPage={false}
+          optionCount={10}
+          isFetching={false}
+          isFetchingNextPage={false}
+          fetchNextPage={() => {}}
           multiple
           name="films"
         >
@@ -240,6 +255,11 @@ export const Generic: StoryFn<SelectQueryFieldProps> = () => {
         hasDescription={false}
         value={result}
         name="film"
+        hasNextPage={false}
+        optionCount={10}
+        isFetching={false}
+        isFetchingNextPage={false}
+        fetchNextPage={() => {}}
       >
         {/* In this case the label is the same as the value but ofcourse that can differ*/}
         <SelectQueryField.OptionGroup>

package/src/components/inputs/selects/SubComponents/OptionGroup.tsx

@@ -6,10 +6,12 @@ export interface OptionGroupProps extends PropsWithChildren {
 }
 
 export const OptionGroup: FC<OptionGroupProps> = ({ children, label }) => {
-  /* Currently this is actually never rendered. in Select.index.tsx the OptionGroup is built based on the props*/
+  {
+    /* This is actually never rendered, the optiongroup is build in the select fields themself*/
+  }
   return (
     <li>
-      {label} && <div>{label}</div>
+      {label && <div>{label}</div>}
       <ul>{children}</ul>
     </li>
   );

package/src/components/inputs/selects/index.tsx

@@ -42,7 +42,6 @@ export const getLabelFromChildren = (children: ReactNode, value: string) => {
     }
   }
 
-  // eslint-disable-next-line no-console
   console.error(
     `No label found for value ${value}. This occurs when a value is passed through the defaultValue prop of useForm, but the value is not present in the options.`,
   );

package/src/components/other/CollapseList/index.tsx

@@ -1,7 +1,7 @@
 import { FC, PropsWithChildren, ReactElement, useState } from 'react';
 import { styled } from '../../../styled';
 import { IoMdArrowDropup as ArrowUp } from 'react-icons/io';
-import { AnimatePresence, motion } from 'framer-motion';
+import { motion } from 'framer-motion';
 import { useTheme } from '../../../hooks';
 
 const StyledList = styled.div`
@@ -78,36 +78,31 @@ const Item: FC<PropsWithChildren<ItemProps>> = ({ collapsed = false, title, chil
         <ArrowUp size={18} />
       </Header>
       {description && <p>{description}</p>}
-      <AnimatePresence>
-        {!isCollapsed && (
-          <motion.div
-            style={{ maxHeight: '100%', overflowY: 'hidden' }}
-            key={`collapse-item-${title}`}
-            variants={{
-              open: { opacity: 1, height: 'auto', flexGrow: 1, minHeight: 0, overflowY: 'auto' },
-              collapsed: { opacity: 0, height: 0 },
-            }}
-            initial="collapsed"
-            animate="open"
-            exit="collapsed"
-            transition={{ duration: 0.125, ease: 'linear' }}
-          >
-            <motion.div
-              variants={{
-                open: { y: 0 },
-                collapsed: { y: -6 },
-              }}
-              transition={{ duration: 0.125, ease: 'linear' }}
-              style={{
-                transformOrigin: 'top center',
-                padding: `${theme.spacing['0_75']} ${theme.spacing['0_5']} ${theme.spacing['1_5']} ${theme.spacing['1']}`,
-              }}
-            >
-              {children}
-            </motion.div>
-          </motion.div>
-        )}
-      </AnimatePresence>
+      <motion.div
+        style={{ maxHeight: '100%', overflowY: 'hidden' }}
+        key={`collapse-item-${title}`}
+        variants={{
+          open: { opacity: 1, height: 'auto', flexGrow: 1, minHeight: 0, overflowY: 'auto', visibility: 'visible' },
+          collapsed: { opacity: 0, height: 0, visibility: 'hidden' },
+        }}
+        initial="collapsed"
+        animate={isCollapsed ? 'collapsed' : 'open'}
+        transition={{ duration: 0.125, ease: 'linear' }}
+      >
+        <motion.div
+          variants={{
+            open: { y: 0 },
+            collapsed: { y: -6 },
+          }}
+          transition={{ duration: 0.125, ease: 'linear' }}
+          style={{
+            transformOrigin: 'top center',
+            padding: `${theme.spacing['0_75']} ${theme.spacing['0_5']} ${theme.spacing['1_5']} ${theme.spacing['1']}`,
+          }}
+        >
+          {children}
+        </motion.div>
+      </motion.div>
     </div>
   );
 };

package/src/helpers/getInitials.ts

@@ -1,5 +1,6 @@
 // TODO: add custom replace option
 export function getInitials(name: string) {
+  if (!name) return '?';
   const replacedName = name.replace(/[._]/g, ' ');
   const parts = replacedName.split(' ');
 

package/src/hooks/useLocalStorage.tsx

@@ -8,7 +8,6 @@ export function useLocalStorage<T>(key: string, initialValue: T) {
       const item = window.localStorage.getItem(key);
       return item ? JSON.parse(item) : initialValue;
     } catch (e) {
-      // eslint-disable-next-line no-console
       console.error('Error reading the local storage value', e);
       return initialValue;
     }
@@ -24,11 +23,9 @@ export function useLocalStorage<T>(key: string, initialValue: T) {
     } catch (e) {
       // DOMException code 22 for QuotaExceededError
       if (e instanceof DOMException && e.name === 'QuotaExceededError') {
-        // eslint-disable-next-line no-console
         console.error('LocalStorage quota exceeded', e);
         setError(e);
       } else {
-        // eslint-disable-next-line no-console
         console.error('Error setting the local storage value', e);
       }
     }