From 399f72d948dd6ddfaf62150bfa1bb8a27cefbc89 Mon Sep 17 00:00:00 2001
From: andy-commonsku <andy@commonsku.com>
Date: Thu, 16 May 2024 14:52:11 -0400
Subject: [PATCH 1/4] CORE-579: add ClearIcon to align with clear icon with
 react-select

---
 src/@commonsku/styles/DateRangeDropdown.tsx | 46 ++++++++++------
 src/@commonsku/styles/icons/ClearIcon.tsx   | 58 +++++++++++++++++++++
 src/@commonsku/styles/icons/index.ts        |  1 +
 src/App.tsx                                 |  1 +
 4 files changed, 90 insertions(+), 16 deletions(-)
 create mode 100644 src/@commonsku/styles/icons/ClearIcon.tsx

diff --git a/src/@commonsku/styles/DateRangeDropdown.tsx b/src/@commonsku/styles/DateRangeDropdown.tsx
index a2d8e2a9..01159611 100644
--- a/src/@commonsku/styles/DateRangeDropdown.tsx
+++ b/src/@commonsku/styles/DateRangeDropdown.tsx
@@ -7,7 +7,7 @@ import React, {
   useState,
 } from "react";
 import { Input, InputProps } from "./Input";
-import { CalendarIcon, XIcon } from "./icons";
+import { CalendarIcon, ClearIcon } from "./icons";
 import { format } from "date-fns";
 import DateRangePicker, {
   DateRange,
@@ -98,16 +98,26 @@ export const DateRangeInput = ({
         autoComplete="off"
         {...props}
       />
-      {((value && isClearable) || !value) && <span style={inputStyles} onClick={() => {
-        if (value && isClearable) {
-          onClear?.();
-          return;
-        }
-        onInputSelect();
-      }}>
-        {(value && isClearable) ? <XIcon color="var(--color-errors-main)" style={{ width: "1.9rem", verticalAlign: "middle" }} /> : null}
-        {!value && <CalendarIcon color="var(--color-primary1-main)" style={{ width: "1.9rem", verticalAlign: "middle" }} />}
-      </span>}
+      {((value && isClearable) || !value) && (
+        <span
+          style={inputStyles}
+          onClick={() => {
+            if (value && isClearable) {
+              onClear?.();
+              return;
+            }
+            onInputSelect();
+          }}
+        >
+          {value && isClearable ? <ClearIcon /> : null}
+          {!value && (
+            <CalendarIcon
+              color="var(--color-primary1-main)"
+              style={{ width: "1.9rem", verticalAlign: "middle" }}
+            />
+          )}
+        </span>
+      )}
     </div>
   );
 };
@@ -147,22 +157,26 @@ export const DateRangeDropdown = (props: DateRangeDropdownProps) => {
 
   const handleChange = useCallback(
     (range: DateRange, event?: SyntheticEvent<any>, closeDropdown = false) => {
-        if (!onChange) { return; }
-        onChange(range, event);
-        closeDropdown && setOpen(false);
+      if (!onChange) {
+        return;
+      }
+      onChange(range, event);
+      closeDropdown && setOpen(false);
     },
     [onChange],
   );
 
   const onClear = useCallback(() => {
-    handleChange({category: '', endDate: null, startDate: null});
+    handleChange({ category: "", endDate: null, startDate: null });
   }, [handleChange]);
 
   return (
     <>
       <DateRangeInput
         noMargin
-        value={!dateText ? getDateInputText(range, dateFormat, presets) : dateText}
+        value={
+          !dateText ? getDateInputText(range, dateFormat, presets) : dateText
+        }
         onInputSelect={() => setOpen(true)}
         onClear={onClear}
         error={error}
diff --git a/src/@commonsku/styles/icons/ClearIcon.tsx b/src/@commonsku/styles/icons/ClearIcon.tsx
new file mode 100644
index 00000000..226f0442
--- /dev/null
+++ b/src/@commonsku/styles/icons/ClearIcon.tsx
@@ -0,0 +1,58 @@
+import React from "react";
+import SVG, { SVGIconProps } from "./SvgIcon";
+import { errors } from "../colors";
+
+const iconSizes = {
+  tiny: {
+    width: 12,
+    height: 12,
+    viewBox: "0 0 12 12",
+  },
+  small: {
+    width: 16,
+    height: 16,
+    viewBox: "0 0 16 16",
+  },
+  medium: {
+    width: 20,
+    height: 20,
+    viewBox: "0 0 20 20",
+  },
+  large: {
+    width: 32,
+    height: 32,
+    viewBox: "0 0 32 32",
+  },
+  huge: {
+    width: 48,
+    height: 48,
+    viewBox: "0 0 48 48",
+  },
+  default: {
+    width: 64,
+    height: 64,
+    viewBox: "0 0 64 64",
+  },
+};
+
+export default function ClearIcon({
+  color = errors["60"],
+  size = "medium",
+  altText = "clear",
+  ...props
+}: SVGIconProps) {
+  return (
+    <SVG
+      size={size}
+      iconSizes={iconSizes}
+      aria-labelledby="ClearIcon"
+      {...props}
+    >
+      <title id="ClearIcon">{altText}</title>
+      <path
+        fill={color}
+        d="M14.348 14.849c-0.469 0.469-1.229 0.469-1.697 0l-2.651-3.030-2.651 3.029c-0.469 0.469-1.229 0.469-1.697 0-0.469-0.469-0.469-1.229 0-1.697l2.758-3.15-2.759-3.152c-0.469-0.469-0.469-1.228 0-1.697s1.228-0.469 1.697 0l2.652 3.031 2.651-3.031c0.469-0.469 1.228-0.469 1.697 0s0.469 1.229 0 1.697l-2.758 3.152 2.758 3.15c0.469 0.469 0.469 1.229 0 1.698z"
+      ></path>
+    </SVG>
+  );
+}
diff --git a/src/@commonsku/styles/icons/index.ts b/src/@commonsku/styles/icons/index.ts
index e22eb33b..28047c5d 100644
--- a/src/@commonsku/styles/icons/index.ts
+++ b/src/@commonsku/styles/icons/index.ts
@@ -116,3 +116,4 @@ export { default as CommentBubbleIcon} from './CommentBubbleIcon';
 
 export { default as WarnIcon} from './WarnIcon';
 export { default as LayersIcon } from './LayersIcon';
+export { default as ClearIcon } from './ClearIcon';
diff --git a/src/App.tsx b/src/App.tsx
index 980d58fe..501fba30 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -5763,6 +5763,7 @@ const App = () => {
                       name="SubtractIcon"
                     />
                     <IconsShowcase Icons={[<icons.XIcon />]} name="XIcon" />
+                    <IconsShowcase Icons={[<icons.ClearIcon />]} name="ClearIcon"  />
                     <IconsShowcase
                       Icons={[<icons.SearchIcon />]}
                       name="SearchIcon"

From 61db9837a80dfe42f24af84980cb450e3ab98f0d Mon Sep 17 00:00:00 2001
From: andy-commonsku <andy@commonsku.com>
Date: Thu, 16 May 2024 16:41:42 -0400
Subject: [PATCH 2/4] CORE-579: modify styles for clear icon in date range
 dropdown

---
 src/@commonsku/styles/DateRangeDropdown.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/@commonsku/styles/DateRangeDropdown.tsx b/src/@commonsku/styles/DateRangeDropdown.tsx
index 01159611..9549ae9f 100644
--- a/src/@commonsku/styles/DateRangeDropdown.tsx
+++ b/src/@commonsku/styles/DateRangeDropdown.tsx
@@ -109,7 +109,9 @@ export const DateRangeInput = ({
             onInputSelect();
           }}
         >
-          {value && isClearable ? <ClearIcon /> : null}
+          {value && isClearable ? (
+            <ClearIcon style={{ verticalAlign: "middle" }} />
+          ) : null}
           {!value && (
             <CalendarIcon
               color="var(--color-primary1-main)"

From a00eecb45fd9ca3b58bcf605c72887b58454b2c3 Mon Sep 17 00:00:00 2001
From: andy-commonsku <andy@commonsku.com>
Date: Fri, 17 May 2024 12:50:29 -0400
Subject: [PATCH 3/4] CORE-579: check invalid date

---
 src/@commonsku/styles/DateRangeDropdown.tsx |   2 +-
 src/@commonsku/styles/DateRangePicker.tsx   | 452 +++++++++++---------
 2 files changed, 248 insertions(+), 206 deletions(-)

diff --git a/src/@commonsku/styles/DateRangeDropdown.tsx b/src/@commonsku/styles/DateRangeDropdown.tsx
index 9549ae9f..e66d9b6d 100644
--- a/src/@commonsku/styles/DateRangeDropdown.tsx
+++ b/src/@commonsku/styles/DateRangeDropdown.tsx
@@ -110,7 +110,7 @@ export const DateRangeInput = ({
           }}
         >
           {value && isClearable ? (
-            <ClearIcon style={{ verticalAlign: "middle" }} />
+            <ClearIcon style={{ verticalAlign: "middle", marginRight: 8 }} />
           ) : null}
           {!value && (
             <CalendarIcon
diff --git a/src/@commonsku/styles/DateRangePicker.tsx b/src/@commonsku/styles/DateRangePicker.tsx
index 900c44f4..445dc53d 100644
--- a/src/@commonsku/styles/DateRangePicker.tsx
+++ b/src/@commonsku/styles/DateRangePicker.tsx
@@ -1,100 +1,118 @@
-import React, { CSSProperties, SyntheticEvent, forwardRef, useCallback, useState } from 'react';
-import Datepicker, { DatepickerProps } from './Datepicker';
-import { LabeledRadioInButton } from './Input';
+import React, {
+  CSSProperties,
+  SyntheticEvent,
+  forwardRef,
+  useCallback,
+  useState,
+} from "react";
+import Datepicker, { DatepickerProps } from "./Datepicker";
+import { LabeledRadioInButton } from "./Input";
 
-import { Text } from './Text';
-import { Col, Row } from './FlexboxGrid';
-import colors from './colors';
+import { Text } from "./Text";
+import { Col, Row } from "./FlexboxGrid";
+import colors from "./colors";
+import { isValid } from "date-fns";
 
 const tabStyles: CSSProperties = {
-    fontSize: '20px',
-    fontWeight: '500',
-    color: '#768B98',
-    cursor: 'pointer',
+  fontSize: "20px",
+  fontWeight: "500",
+  color: "#768B98",
+  cursor: "pointer",
 };
 
 const activeTabStyles: CSSProperties = {
-    ...tabStyles,
-    color: colors.neutrals['darkest'],
-    textDecorationLine: 'underline',
-    textUnderlineOffset: '1rem',
-    textDecorationColor: colors.secondary1[50],
-    textDecorationThickness: '8px',
+  ...tabStyles,
+  color: colors.neutrals["darkest"],
+  textDecorationLine: "underline",
+  textUnderlineOffset: "1rem",
+  textDecorationColor: colors.secondary1[50],
+  textDecorationThickness: "8px",
 };
 
 const presetListStyles: CSSProperties = {
-    display: 'flex',
-    flexWrap: 'wrap',
-    width: '520px',
-    gap: '0.5rem 1rem',
+  display: "flex",
+  flexWrap: "wrap",
+  width: "520px",
+  gap: "0.5rem 1rem",
 };
 
 const presetLabelStyles: CSSProperties = {
-    margin: '0',
-    flexGrow: '1',
-    flexBasis: '200px',
-    justifyContent: 'left',
-    padding: '13px',
+  margin: "0",
+  flexGrow: "1",
+  flexBasis: "200px",
+  justifyContent: "left",
+  padding: "13px",
 };
 
 const dateRangeLabelStyles: CSSProperties = {
-    color: colors.neutrals['darkest'],
-    marginBottom: '0.25rem',
+  color: colors.neutrals["darkest"],
+  marginBottom: "0.25rem",
 };
 
 export interface DateRange {
-    category: string
-    startDate?: Date | null
-    endDate?: Date | null
+  category: string;
+  startDate?: Date | null;
+  endDate?: Date | null;
 }
 
 export interface DateRangePreset {
-    name: string
-    label: string
+  name: string;
+  label: string;
 }
 
-export type DateRangePickerProps = Omit<DatepickerProps, 'value' | 'onChange' | 'dateFormat'> & {
-    range: DateRange
-    dateFormat?: string
-    onChange?: (
-        range: DateRange,
-        event?: SyntheticEvent<any>,
-        closeDropdown?: boolean
-    ) => void
-    presets?: DateRangePreset[],
-    initialActiveTab?: 'custom' | 'preset'
-}
+export type DateRangePickerProps = Omit<
+  DatepickerProps,
+  "value" | "onChange" | "dateFormat"
+> & {
+  range: DateRange;
+  dateFormat?: string;
+  onChange?: (
+    range: DateRange,
+    event?: SyntheticEvent<any>,
+    closeDropdown?: boolean,
+  ) => void;
+  presets?: DateRangePreset[];
+  initialActiveTab?: "custom" | "preset";
+};
+
+export const checkDateYear = (date: Date | null | undefined): boolean => {
+  if (!date || !isValid(date)) {
+    return false;
+  }
+  return date.getFullYear() > 1900 && date.getFullYear() < 3000;
+};
 
-export const DateRangePicker = forwardRef<HTMLDivElement, DateRangePickerProps>((
+export const DateRangePicker = forwardRef<HTMLDivElement, DateRangePickerProps>(
+  (
     {
-        range,
-        onChange,
-        presets,
-        error,
-        customInput,
-        locale='en',
-        todayButton='Today',
-        placeholder,
-        placeholderText,
-        dateFormat='yyyy-MM-dd',
-        isClearable=true,
-        peekNextMonth=true,
-        showMonthDropdown=false,
-        showYearDropdown=false,
-        showPopperArrow=false,
-        dropdownMode="select",
-        nextMonthButtonLabel="",
-        nextYearButtonLabel="",
-        previousMonthButtonLabel="",
-        previousYearButtonLabel="",
-        initialActiveTab = 'preset' ,
-        popperClassName,
-        wrapperClassName,
-        style,
-        ...props
+      range,
+      onChange,
+      presets,
+      error,
+      customInput,
+      locale = "en",
+      todayButton = "Today",
+      placeholder,
+      placeholderText,
+      dateFormat = "yyyy-MM-dd",
+      isClearable = true,
+      peekNextMonth = true,
+      showMonthDropdown = false,
+      showYearDropdown = false,
+      showPopperArrow = false,
+      dropdownMode = "select",
+      nextMonthButtonLabel = "",
+      nextYearButtonLabel = "",
+      previousMonthButtonLabel = "",
+      previousYearButtonLabel = "",
+      initialActiveTab = "preset",
+      popperClassName,
+      wrapperClassName,
+      style,
+      ...props
     },
-    ref
-) => {
+    ref,
+  ) => {
     const { startDate, endDate } = range;
     const [selectedPreset, setSelectedPreset] = useState<
       DateRangePreset | undefined
@@ -119,155 +137,179 @@ export const DateRangePicker = forwardRef<HTMLDivElement, DateRangePickerProps>(
     const hasPresets = presets != null && presets.length > 0;
 
     const handleChange = useCallback(
-        (selected: 'start' | 'end', newStart?: Date | null, newEnd?: Date | null, event?: SyntheticEvent<any>) => {
-            if (newStart != null && newEnd != null && newStart > newEnd) {
-                if (selected === 'start') {
-                    newEnd = newStart;
-                } else {
-                    newStart = newEnd;
-                }
-            }
-
-            // Forces the calendars to re-render on date change
-            setStartDateKey(startDateKey + 1);
-            setEndDateKey(endDateKey + 1);
+      (
+        selected: "start" | "end",
+        newStart?: Date | null,
+        newEnd?: Date | null,
+        event?: SyntheticEvent<any>,
+      ) => {
+        if (newStart != null && newEnd != null && newStart > newEnd) {
+          if (selected === "start") {
+            newEnd = newStart;
+          } else {
+            newStart = newEnd;
+          }
+        }
 
-            if (onChange != null) {
-                const newDateRange: DateRange = {
-                    category: "custom",
-                    startDate: newStart,
-                    endDate: newEnd,
-                };
+        // Forces the calendars to re-render on date change
+        setStartDateKey(startDateKey + 1);
+        setEndDateKey(endDateKey + 1);
 
-                onChange(newDateRange, event, newStart != null && newEnd != null);
-            }
-        },
-        [endDateKey, onChange, startDateKey]
+        if (onChange != null) {
+          const newDateRange: DateRange = {
+            category: "custom",
+            startDate: newStart,
+            endDate: newEnd,
+          };
+          onChange(newDateRange, event, newStart != null && newEnd != null);
+        }
+      },
+      [endDateKey, onChange, startDateKey],
     );
 
-    const handleSelectPreset = useCallback((preset: DateRangePreset) => {
+    const handleSelectPreset = useCallback(
+      (preset: DateRangePreset) => {
         setSelectedPreset(preset);
         if (onChange != null) {
-            onChange({ category: preset.name }, undefined, true);
+          onChange({ category: preset.name }, undefined, true);
         }
-    }, [onChange, setSelectedPreset]);
+      },
+      [onChange, setSelectedPreset],
+    );
 
     const renderCustomTab = () => (
-        <Row style={{ flexFlow: 'row', gap: '2rem' }}>
-            <Col>
-                <div style={dateRangeLabelStyles}>
-                    From
-                </div>
-                <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
-                    <Datepicker
-                        open={false}
-                        locale={locale}
-                        selected={startDate}
-                        dateFormat={dateFormat}
-                        isClearable={isClearable}
-                        onChange={(newStart, event) => handleChange('start', newStart, endDate, event)}
-                    />
-                    <Datepicker
-                        key={startDateKey}
-                        inline
-                        locale={locale}
-                        selected={startDate}
-                        selectsStart
-                        startDate={startDate ?? (endDate ? new Date(0) : null)}
-                        endDate={endDate ?? (startDate ? new Date(9999, 1, 1) : null)}
-                        todayButton={todayButton}
-                        dateFormat={dateFormat}
-                        isClearable={isClearable}
-                        showMonthDropdown={showMonthDropdown}
-                        showYearDropdown={showYearDropdown}
-                        nextMonthButtonLabel={nextMonthButtonLabel}
-                        nextYearButtonLabel={nextYearButtonLabel}
-                        previousMonthButtonLabel={previousMonthButtonLabel}
-                        previousYearButtonLabel={previousYearButtonLabel}
-                        dropdownMode={dropdownMode}
-                        peekNextMonth={peekNextMonth}
-                        calendarClassName={`commonsku-styles-datepicker daterangepicker ${popperClassName || ''}`}
-                        onChange={(newStart, event) => handleChange('start', newStart, endDate, event)}
-                        {...props}
-                    />
-                </div>
-            </Col>
-            <Col>
-                <div style={dateRangeLabelStyles}>
-                    To
-                </div>
-                <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
-                    <Datepicker
-                        open={false}
-                        locale={locale}
-                        selected={endDate}
-                        dateFormat={dateFormat}
-                        isClearable={isClearable}
-                        onChange={(newEnd, event) => handleChange('end', startDate, newEnd, event)}
-                    />
-                    <Datepicker
-                        key={endDateKey}
-                        inline
-                        locale={locale}
-                        selected={endDate}
-                        selectsEnd
-                        startDate={startDate ?? (endDate ? new Date(0) : null)}
-                        endDate={endDate ?? (startDate ? new Date(9999, 1, 1) : null)}
-                        todayButton={todayButton}
-                        dateFormat={dateFormat}
-                        isClearable={isClearable}
-                        showMonthDropdown={showMonthDropdown}
-                        showYearDropdown={showYearDropdown}
-                        nextMonthButtonLabel={nextMonthButtonLabel}
-                        nextYearButtonLabel={nextYearButtonLabel}
-                        previousMonthButtonLabel={previousMonthButtonLabel}
-                        previousYearButtonLabel={previousYearButtonLabel}
-                        dropdownMode={dropdownMode}
-                        peekNextMonth={peekNextMonth}
-                        calendarClassName={`commonsku-styles-datepicker daterangepicker ${popperClassName || ''}`}
-                        onChange={(newEnd, event) => handleChange('end', startDate, newEnd, event)}
-                        {...props}
-                    />
-                </div>
-            </Col>
-        </Row>
+      <Row style={{ flexFlow: "row", gap: "2rem" }}>
+        <Col>
+          <div style={dateRangeLabelStyles}>From</div>
+          <div
+            style={{ display: "flex", flexDirection: "column", gap: "1rem" }}
+          >
+            <Datepicker
+              open={false}
+              locale={locale}
+              selected={startDate}
+              dateFormat={dateFormat}
+              isClearable={isClearable}
+              onChange={(newStart, event) => {
+                if (!checkDateYear(newStart)) return;
+                handleChange("start", newStart, endDate, event);
+              }}
+            />
+            <Datepicker
+              key={startDateKey}
+              inline
+              locale={locale}
+              selected={startDate}
+              selectsStart
+              startDate={startDate ?? (endDate ? new Date(0) : null)}
+              endDate={endDate ?? (startDate ? new Date(9999, 1, 1) : null)}
+              todayButton={todayButton}
+              dateFormat={dateFormat}
+              isClearable={isClearable}
+              showMonthDropdown={showMonthDropdown}
+              showYearDropdown={showYearDropdown}
+              nextMonthButtonLabel={nextMonthButtonLabel}
+              nextYearButtonLabel={nextYearButtonLabel}
+              previousMonthButtonLabel={previousMonthButtonLabel}
+              previousYearButtonLabel={previousYearButtonLabel}
+              dropdownMode={dropdownMode}
+              peekNextMonth={peekNextMonth}
+              calendarClassName={`commonsku-styles-datepicker daterangepicker ${
+                popperClassName || ""
+              }`}
+              onChange={(newStart, event) =>
+                handleChange("start", newStart, endDate, event)
+              }
+              {...props}
+            />
+          </div>
+        </Col>
+        <Col>
+          <div style={dateRangeLabelStyles}>To</div>
+          <div
+            style={{ display: "flex", flexDirection: "column", gap: "1rem" }}
+          >
+            <Datepicker
+              open={false}
+              locale={locale}
+              selected={endDate}
+              dateFormat={dateFormat}
+              isClearable={isClearable}
+              onChange={(newEnd, event) => {
+                if (!checkDateYear(newEnd)) return;
+                handleChange("end", startDate, newEnd, event);
+              }}
+            />
+            <Datepicker
+              key={endDateKey}
+              inline
+              locale={locale}
+              selected={endDate}
+              selectsEnd
+              startDate={startDate ?? (endDate ? new Date(0) : null)}
+              endDate={endDate ?? (startDate ? new Date(9999, 1, 1) : null)}
+              todayButton={todayButton}
+              dateFormat={dateFormat}
+              isClearable={isClearable}
+              showMonthDropdown={showMonthDropdown}
+              showYearDropdown={showYearDropdown}
+              nextMonthButtonLabel={nextMonthButtonLabel}
+              nextYearButtonLabel={nextYearButtonLabel}
+              previousMonthButtonLabel={previousMonthButtonLabel}
+              previousYearButtonLabel={previousYearButtonLabel}
+              dropdownMode={dropdownMode}
+              peekNextMonth={peekNextMonth}
+              calendarClassName={`commonsku-styles-datepicker daterangepicker ${
+                popperClassName || ""
+              }`}
+              onChange={(newEnd, event) =>
+                handleChange("end", startDate, newEnd, event)
+              }
+              {...props}
+            />
+          </div>
+        </Col>
+      </Row>
     );
 
     const renderPresetTab = () => (
-        <div style={presetListStyles}>
-            {presets?.map((preset, idx) => (
-                <LabeledRadioInButton
-                    key={idx}
-                    labelStyle={presetLabelStyles}
-                    label={preset.label}
-                    onChange={() => handleSelectPreset(preset)}
-                    checked={selectedPreset != null && preset.label === selectedPreset.label}
-                />
-            ))}
-        </div>
+      <div style={presetListStyles}>
+        {presets?.map((preset, idx) => (
+          <LabeledRadioInButton
+            key={idx}
+            labelStyle={presetLabelStyles}
+            label={preset.label}
+            onChange={() => handleSelectPreset(preset)}
+            checked={
+              selectedPreset != null && preset.label === selectedPreset.label
+            }
+          />
+        ))}
+      </div>
     );
 
     return (
-        <div ref={ref} style={style}>
-            {hasPresets &&
-                <Row style={{ gap: '2rem', marginBottom: '2rem' }}>
-                    <Text
-                        style={activeTab === 'preset' ? activeTabStyles : tabStyles}
-                        onClick={() => setActiveTab('preset')}
-                    >
-                        Preset
-                    </Text>
-                    <Text
-                        style={activeTab === 'custom' ? activeTabStyles : tabStyles}
-                        onClick={() => setActiveTab('custom')}
-                    >
-                        Custom
-                    </Text>
-                </Row>
-            }
-            {activeTab === 'custom' ? renderCustomTab() : renderPresetTab()}
-        </div>
+      <div ref={ref} style={style}>
+        {hasPresets && (
+          <Row style={{ gap: "2rem", marginBottom: "2rem" }}>
+            <Text
+              style={activeTab === "preset" ? activeTabStyles : tabStyles}
+              onClick={() => setActiveTab("preset")}
+            >
+              Preset
+            </Text>
+            <Text
+              style={activeTab === "custom" ? activeTabStyles : tabStyles}
+              onClick={() => setActiveTab("custom")}
+            >
+              Custom
+            </Text>
+          </Row>
+        )}
+        {activeTab === "custom" ? renderCustomTab() : renderPresetTab()}
+      </div>
     );
-});
+  },
+);
 
 export default DateRangePicker;

From 60c567d7a3a1dae384ff369dfd2e9b444370fbe6 Mon Sep 17 00:00:00 2001
From: andy-commonsku <andy@commonsku.com>
Date: Fri, 24 May 2024 13:23:25 -0400
Subject: [PATCH 4/4] CORE-579: remove unnecessary export

---
 src/@commonsku/styles/DateRangePicker.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/@commonsku/styles/DateRangePicker.tsx b/src/@commonsku/styles/DateRangePicker.tsx
index 445dc53d..909ccaa0 100644
--- a/src/@commonsku/styles/DateRangePicker.tsx
+++ b/src/@commonsku/styles/DateRangePicker.tsx
@@ -75,7 +75,7 @@ export type DateRangePickerProps = Omit<
   initialActiveTab?: "custom" | "preset";
 };
 
-export const checkDateYear = (date: Date | null | undefined): boolean => {
+const checkDateYear = (date: Date | null | undefined): boolean => {
   if (!date || !isValid(date)) {
     return false;
   }