Revert datepicker datagrid (#1427)

* revert datepicker datagrid

* add null checks

package.json

@@ -1,5 +1,5 @@
 {
-  "version": "14.0.1",
+  "version": "14.2.0",
   "license": "MIT",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
@@ -139,4 +139,4 @@
     "*.{ts,tsx}": "eslint --cache --fix",
     "*.{ts,tsx,js,css,md}": "prettier --write"
   }
-}
+}

src/components/data-grid/filters/ColumnFilters.tsx

@@ -1,17 +1,18 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import { ColumnFiltersProps, Filter, FilterType, FilterValue } from '../types';
+import { TcDate } from '@timechimp/timechimp-typescript-helpers';
 import { SIZE } from 'baseui/button';
 import { Dropdown, DropdownItem } from '../../dropdown';
 import { MinusIcon } from '../../icons/minus';
 import { AddLineIcon } from '../../icons/add-line';
 import { useTheme } from '../../../providers';
+import { DatepickerPopover } from '../../datepicker-popover';
 import { FilterButton } from './FilterButton';
 import { Button } from '../../button';
 import { ButtonKind } from '../../../models';
 import { ParagraphSmall } from 'baseui/typography';
 import { FixedSizeSelect } from '../../fixed-size-select';
 import { MultiFilter } from './MultiFilter';
-import { CustomDatepicker } from '../../datepicker';
 
 const LESS_FILTERS_BUTTON_TEST_ID = 'less-filters-button';
 const MORE_FILTERS_BUTTON_TEST_ID = 'more-filters-button';
@@ -37,6 +38,7 @@ export const ColumnFilters = ({
   onShowLessFiltersChange,
 }: ColumnFiltersProps) => {
   const [showLessFilters, setShowLessFilters] = useState<boolean>(initialShowLessFilters ?? true);
+  const [datepickerIsOpen, setDatepickerIsOpen] = useState<boolean>(false);
   const [internalDates, setInternalDates] = useState<Date[]>([]);
 
   const {
@@ -105,8 +107,12 @@ export const ColumnFilters = ({
     [filterOnValue, isSelectValueActive],
   );
 
+  const dateFilterIsActive = () => dates?.length === 2;
+
   const isSetFilterActive = (columnField: string) => !!selectedFilterIds[columnField]?.length;
 
+  const getDateIconColor = () => (dateFilterIsActive() ? primary : contentSecondary);
+
   const getSetIconColor = (columnField: string) => (isSetFilterActive(columnField) ? primary : contentSecondary);
 
   const getSelectActiveItem = (columnField: string, values?: string[] | FilterValue[]) => {
@@ -129,6 +135,11 @@ export const ColumnFilters = ({
     };
   };
 
+  const getDateTitleFormat = (date: Date) => new TcDate(date).format(dateFormat);
+
+  const getDateTitle = (title: string) =>
+    dates && dateFilterIsActive() ? `${getDateTitleFormat(dates[0])} - ${getDateTitleFormat(dates[1])}` : title;
+
   const getSetTitle = (columnField: string, title: string) => {
     if (!isSetFilterActive(columnField)) {
       return title;
@@ -137,6 +148,14 @@ export const ColumnFilters = ({
     return `${length} ${title}`;
   };
 
+  const toggleDatePicker = () => {
+    if (datepickerIsOpen) {
+      setDatepickerIsOpen(false);
+      return setInternalDates([]);
+    }
+    return setDatepickerIsOpen(true);
+  };
+
   const onDateSelect = ({ date: selectedDates, columnField }: { date: Date | Date[]; columnField: string }) => {
     if (!setDates) {
       return;
@@ -150,6 +169,7 @@ export const ColumnFilters = ({
 
     if (selectedDates.length > 1) {
       setDates(selectedDates);
+      toggleDatePicker();
       filterOnDate(columnField, selectedDates);
     }
   };
@@ -220,13 +240,23 @@ export const ColumnFilters = ({
     const filterTypes = {
       [FilterType.date]: (
         <>
-          <CustomDatepicker
+          <FilterButton
+            onClick={() => setDatepickerIsOpen(!datepickerIsOpen)}
+            startEnhancer={Icon && <Icon color={getDateIconColor()} />}
+            size={SIZE.compact}
+            title={getDateTitle(title)}
+            arrows
+          />
+          <DatepickerPopover
             onChange={(date) => onDateSelect({ date, columnField })}
             date={internalDates.length ? internalDates : dates}
-            locale={locale}
+            isOpen={datepickerIsOpen}
+            setIsOpen={toggleDatePicker}
+            monthsShown={2}
             range
+            quickSelect
+            locale={locale}
             translations={datepickerTranslations}
-            dateFormat={dateFormat}
           />
         </>
       ),

src/components/datepicker/index.ts

@@ -1,4 +1,3 @@
 export * from './Datepicker';
 export * from './DatePickerTemplate';
 export * from './types';
-export * from './CustomDatepicker';

src/components/select/multi-select/MultiSelect.tsx

@@ -290,9 +290,9 @@ export const MultiSelect = <
       ) : (
         <>
           {creatable ? (
-            <SelectCreatable {...props} onCreateOption={onCreateOption} menuPortalTarget={document.body} />
+            <SelectCreatable {...props} onCreateOption={onCreateOption} menuPortalTarget={document?.body} />
           ) : (
-            <Select {...props} menuPortalTarget={document.body} />
+            <Select {...props} menuPortalTarget={document?.body} />
           )}
         </>
       )}

src/components/select/single-select/SingleSelect.tsx

@@ -305,7 +305,7 @@ export const SingleSelect = <
   const SelectComponent = useMemo(() => {
     if (creatable) {
       return (
-        <SelectCreatable name={name} {...props} onCreateOption={onCreateOption} menuPortalTarget={document.body} />
+        <SelectCreatable name={name} {...props} onCreateOption={onCreateOption} menuPortalTarget={document?.body} />
       );
     }
     if (loadOptions) {
@@ -319,7 +319,7 @@ export const SingleSelect = <
         />
       );
     }
-    return <Select name={name} {...props} menuPortalTarget={document.body} />;
+    return <Select name={name} {...props} menuPortalTarget={document?.body} />;
   }, [cacheOptions, creatable, loadOptions, onCreateOption, props]);
 
   return <>{showSkeleton ? <Skeleton width="100%" height={scale975} animation /> : <>{SelectComponent}</>}</>;