feat(daterange): allow clear on selected daterange (#466)

* allow clearing selected date range

Author: Souravpakhira

.gitignore

@@ -1,3 +1,4 @@
 node_modules
 dist
-.DS_Store
+.DS_Store
+storybook-static

src/components/input-elements/DateRangePicker/DateRangePicker.tsx

@@ -50,6 +50,7 @@ export interface DateRangePickerProps
   disabled?: boolean;
   color?: Color;
   locale?: Locale;
+  enableClear?: boolean;
 }
 
 const DateRangePicker = React.forwardRef<HTMLDivElement, DateRangePickerProps>((props, ref) => {
@@ -67,6 +68,7 @@ const DateRangePicker = React.forwardRef<HTMLDivElement, DateRangePickerProps>((
     color = BaseColors.Blue,
     enableYearPagination = false,
     locale = enUS,
+    enableClear = true,
     className,
     ...other
   } = props;
@@ -129,6 +131,10 @@ const DateRangePicker = React.forwardRef<HTMLDivElement, DateRangePickerProps>((
     setShowDropdown(false);
   };
 
+  const handleClear = () => {
+    setSelectedValue([null, null, null]);
+    onValueChange?.([null, null, null]);
+  };
   const [hoveredDropdownValue, handleDropdownKeyDown] = useSelectOnKeyDown(
     handleDropdownOptionClick,
     dropdownOptions.map((option: DateRangePickerOption) => option.value),
@@ -160,6 +166,8 @@ const DateRangePicker = React.forwardRef<HTMLDivElement, DateRangePickerProps>((
           onDropdownKeyDown={handleDropdownKeyDown}
           locale={locale}
           dropdownPlaceholder={dropdownPlaceholder}
+          enableClear={enableClear}
+          onClear={handleClear}
         />
         {/* Calendar Modal */}
         <Modal

src/components/input-elements/DateRangePicker/DateRangePickerButton.tsx

@@ -1,7 +1,7 @@
 import React, { Dispatch, Ref, SetStateAction } from "react";
 import { twMerge } from "tailwind-merge";
 
-import { ArrowDownHeadIcon, CalendarIcon } from "assets";
+import { ArrowDownHeadIcon, CalendarIcon, XCircleIcon } from "assets";
 
 import {
   BaseColors,
@@ -36,6 +36,8 @@ interface DateRangePickerButtonProps {
   onDropdownKeyDown: (e: React.KeyboardEvent<HTMLButtonElement>) => void;
   locale?: Locale;
   dropdownPlaceholder?: string;
+  enableClear?: boolean;
+  onClear: () => void;
 }
 
 const DateRangePickerButton = ({
@@ -54,6 +56,8 @@ const DateRangePickerButton = ({
   onDropdownKeyDown,
   locale,
   dropdownPlaceholder = "Select",
+  enableClear,
+  onClear,
 }: DateRangePickerButtonProps) => {
   const [startDate, endDate, dropdownValue] = value;
 
@@ -110,13 +114,33 @@ const DateRangePickerButton = ({
         <p
           className={twMerge(
             makeDateRangePickerClassName("calendarButtonText"),
-            "whitespace-nowrap truncate",
+            "whitespace-nowrap truncate w-full text-start",
             fontSize.sm,
             fontWeight.md,
           )}
         >
           {calendarText}
         </p>
+        {enableClear && hasDateSelection ? (
+          <div
+            role="button"
+            className={twMerge(makeDateRangePickerClassName("resetButton"), spacing.xs.marginRight)}
+            onClick={(e) => {
+              e.stopPropagation(); // prevent firing parent button
+              onClear();
+            }}
+          >
+            <XCircleIcon
+              className={twMerge(
+                "flex-none",
+                sizing.md.height,
+                sizing.md.width,
+                getColorClassNames(DEFAULT_COLOR, colorPalette.lightText).textColor,
+              )}
+              aria-hidden="true"
+            />
+          </div>
+        ) : null}
       </button>
       {enableDropdown ? (
         <button

src/stories/input-elements/DateRangePicker.stories.tsx

@@ -201,3 +201,9 @@ ControlledWithDropdownOptionsWithEndDate.args = {
     },
   ],
 };
+
+export const UncontrolledWithoutAllowClear = UncontrolledTemplate.bind({});
+UncontrolledWithoutAllowClear.args = {
+  defaultValue: [new Date(2022, 10, 1), new Date()],
+  enableClear: false,
+};