@takaro/lib-components 0.0.13 → 0.0.15

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
+  /// 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,11 +336,11 @@ 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=""
-                        description="Items will appear here. Add your first item to begin!"
+                        description="Data will appear here."
                         actions={[
                           <Button
                             key={id + '-learn-more-button'}
@@ -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/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/dialogs/Dialog/DialogContent.tsx

@@ -10,10 +10,6 @@ const StyledFloatingOverlay = styled(FloatingOverlay)`
   place-items: center;
 `;
 
-const CardBody = styled.div`
-  min-width: 300px;
-`;
-
 export const DialogContent = forwardRef<HTMLDivElement, React.HTMLProps<HTMLDivElement>>(
   function DialogContent(props, propRef) {
     const { context: floatingContext, ...context } = useDialogContext();
@@ -37,7 +33,7 @@ export const DialogContent = forwardRef<HTMLDivElement, React.HTMLProps<HTMLDivE
                   ...props,
                 })}
               >
-                <CardBody>{props.children}</CardBody>
+                <Card.Body>{props.children}</Card.Body>
               </Card>
             </FloatingFocusManager>
           </StyledFloatingOverlay>

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

@@ -13,16 +13,7 @@ export default {
 
 export const Default: StoryFn<AlertProps> = (args) => <Alert {...args} />;
 
-export const Success: StoryObj<AlertProps> = {
-  args: {
-    title: 'Order complete',
-    text: 'Your order has been sucessfully processed. We are completing the report.',
-    variant: 'success',
-    dismiss: true,
-  },
-};
-
-export const Error: StoryObj<AlertProps> = {
+export const WithList: StoryObj<AlertProps> = {
   args: {
     title: 'There were errors with your submission',
     text: [

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

@@ -24,11 +24,10 @@ export interface AlertProps {
   elevation?: Elevation;
   dismiss?: boolean;
   action?: Action;
-  showIcon?: boolean;
 }
 
 export const Alert = forwardRef<HTMLDivElement, AlertProps>(function Alert(
-  { variant, title, text, dismiss = false, elevation = 4, action, showIcon = true },
+  { variant, title, text, dismiss = false, elevation = 4, action },
   ref,
 ) {
   const [visible, setVisible] = useState(true);
@@ -85,19 +84,16 @@ export const Alert = forwardRef<HTMLDivElement, AlertProps>(function Alert(
           ref={ref}
           role="status"
         >
-          <Grid hasTitle={hasTitle} showIcon={showIcon}>
-            {showIcon && <IconContainer variant={variant}>{getIcon()}</IconContainer>}
-
-            {/* If title is declared set title, otherwise put everything on single line */}
-            {title && (
-              <>
-                <h2>{title}</h2>
-                <div />
-              </>
-            )}
-            {renderText()}
-            {hasTitle ? <div /> : null}
-            <ButtonContainer hasTitle={hasTitle} show={dismiss || action ? true : false} variant={variant}>
+          <Grid>
+            <IconContainer variant={variant}>{getIcon()}</IconContainer>
+            {title && <h2>{title}</h2>}
+            <p>{renderText()}</p>
+            <ButtonContainer
+              hasTitle={hasTitle}
+              show={dismiss || action ? true : false}
+              variant={variant}
+              className="action"
+            >
               {action && (
                 <Button size="tiny" variant="outline" onClick={handleExecute} text={action.text} color={variant} />
               )}

package/src/components/feedback/Alert/style.ts

@@ -12,7 +12,8 @@ export const Container = styled(motion.div)<{
   $elevation: Elevation;
 }>`
   width: 100%;
-  padding: ${({ theme }) => `${theme.spacing['0_75']} ${theme.spacing[1]}`};
+  padding: ${({ theme }) =>
+    `${theme.spacing['0_75']} ${theme.spacing['0_75']} ${theme.spacing['0_75']} ${theme.spacing['0']}`};
   border-radius: ${({ theme }) => theme.borderRadius.large};
   box-shadow: ${({ theme, $elevation }) => theme.elevation[$elevation]};
   margin: ${({ theme }) => `${theme.spacing['1_5']} auto`};
@@ -58,24 +59,21 @@ export const Container = styled(motion.div)<{
   }}
 `;
 
-export const Grid = styled.div<{ hasTitle: boolean; showIcon: boolean }>`
+export const Grid = styled.div`
   display: grid;
-  grid-template-columns: ${({ theme, hasTitle, showIcon }) => {
-    const result = '';
-    if (showIcon) result.concat(`${theme.spacing[5]}`);
-    result.concat(' 1fr');
-    if (hasTitle) result.concat(' fit-content(100px)');
-    return result;
-  }}
+  grid-template-columns: 40px 1fr;
   align-items: center;
-  gap: ${({ theme, hasTitle }) => (hasTitle ? 0 : theme.spacing['0_5'])};
+
+  p,
+  .action {
+    grid-column: 2;
+  }
 `;
 
 export const IconContainer = styled.div<{ variant: AlertVariants }>`
   display: flex;
   align-items: center;
   justify-content: center;
-  margin-right: ${({ theme }) => theme.spacing['1']};
   svg {
     fill: ${({ variant, theme }): string => theme.colors[variant]};
   }

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

@@ -122,13 +122,13 @@ const defaultListItems = [
     icon: <AiOutlineBook />,
     title: 'Documentation',
     description: 'Learn how to integrate our tools with your app',
-    to: 'docs.takaro.io',
+    to: 'https://docs.takaro.io',
   },
   {
     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/snacks/Drawer/Drawer.stories.tsx

@@ -34,7 +34,7 @@ export const Downloads: StoryFn = () => {
       children: (
         <CustomContent>
           <h4>Pdf Ready</h4>
-          <p>
+          <p style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
             <CheckMarkIcon /> Download now
           </p>
         </CustomContent>

package/src/components/feedback/snacks/Drawer/index.tsx

@@ -43,6 +43,10 @@ const Content = styled.div<{ expanded: boolean }>`
   border-radius: ${({ theme }) => `0 0 ${theme.borderRadius.large} ${theme.borderRadius.large}`};
   border-radius-top-left: 0;
   border-radius-top-right: 0;
+
+  h4 {
+    margin-bottom: ${({ theme }) => theme.spacing['0_5']};
+  }
 `;
 
 export const DrawerSnack = forwardRef<HTMLDivElement, PropsWithChildren<CustomContentProps>>(function DrawerSnack(

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>