From 9b7f18bea7042e7c1b6e94b6a62ee145c8d99e61 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Carlos=20Avi=C3=B1a?= <carlosavilu11@gmail.com>
Date: Fri, 18 Oct 2024 14:14:53 -0600
Subject: [PATCH 1/2] DateRange: make onCancel and onSubmit events optional
 (web)

---
 packages/gestalt-datepicker/src/DateRange.tsx | 42 ++++++++++---------
 1 file changed, 22 insertions(+), 20 deletions(-)

diff --git a/packages/gestalt-datepicker/src/DateRange.tsx b/packages/gestalt-datepicker/src/DateRange.tsx
index 88568d18f6..c6d2e64621 100644
--- a/packages/gestalt-datepicker/src/DateRange.tsx
+++ b/packages/gestalt-datepicker/src/DateRange.tsx
@@ -35,7 +35,7 @@ type Props = {
   /**
    * Callback triggered when the user clicks the Cancel button to not persist the selected dates. It should be used to close DateRange. See the [controlled component variant](https://gestalt.pinterest.systems/web/daterange#Controlled-component) to learn more.
    */
-  onCancel: () => void;
+  onCancel?: () => void;
   /**
    * Callback triggered when the end date input loses focus. See the [error messaging variant](https://gestalt.pinterest.systems/web/daterange#Error-messaging) to learn more.
    */
@@ -92,7 +92,7 @@ type Props = {
   /**
    * Callback triggered when the user clicks the Apply button to persist the selected dates. It should be used to persist the dates selected and close the DateRange. See the [controlled component variant](https://gestalt.pinterest.systems/web/daterange#Controlled-component) to learn more.
    */
-  onSubmit: () => void;
+  onSubmit?: () => void;
   /**
    * An optional RadioGroup to provide preestablished date range options. See the [with RadioGroup variant](https://gestalt.pinterest.systems/web/daterange#With-RadioGroup) to learn more.
    */
@@ -364,25 +364,27 @@ function DateRange({
                 }
               />
             </Box>
-            <Flex.Item alignSelf={isMobile ? 'center' : 'end'}>
-              <Box marginBottom={4} marginEnd={4}>
-                <ButtonGroup>
-                  <Button color="gray" onClick={() => onCancel()} text={cancelText} />
+            {onSubmit && onCancel ? (
+              <Flex.Item alignSelf={isMobile ? 'center' : 'end'}>
+                <Box marginBottom={4} marginEnd={4}>
+                  <ButtonGroup>
+                    <Button color="gray" onClick={() => onCancel()} text={cancelText} />
 
-                  <Button
-                    color="red"
-                    disabled={
-                      !!dateErrorMessage?.startDate ||
-                      !!dateErrorMessage?.endDate ||
-                      !dateValue.startDate ||
-                      !dateValue.endDate
-                    }
-                    onClick={() => onSubmit()}
-                    text={applyText}
-                  />
-                </ButtonGroup>
-              </Box>
-            </Flex.Item>
+                    <Button
+                      color="red"
+                      disabled={
+                        !!dateErrorMessage?.startDate ||
+                        !!dateErrorMessage?.endDate ||
+                        !dateValue.startDate ||
+                        !dateValue.endDate
+                      }
+                      onClick={() => onSubmit()}
+                      text={applyText}
+                    />
+                  </ButtonGroup>
+                </Box>
+              </Flex.Item>
+            ) : null}
           </Flex>
         </Box>
       </Flex>

From 3607b5a6e165f2d22fc4948afc64fbda6ba54e0f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Carlos=20Avi=C3=B1a?= <carlosavilu11@gmail.com>
Date: Fri, 18 Oct 2024 15:40:55 -0600
Subject: [PATCH 2/2] Add unit tests

---
 .../src/DateRange.jsdom.test.tsx              | 26 +++++++++++++++++++
 1 file changed, 26 insertions(+)

diff --git a/packages/gestalt-datepicker/src/DateRange.jsdom.test.tsx b/packages/gestalt-datepicker/src/DateRange.jsdom.test.tsx
index 2b80d59423..539ac6c799 100644
--- a/packages/gestalt-datepicker/src/DateRange.jsdom.test.tsx
+++ b/packages/gestalt-datepicker/src/DateRange.jsdom.test.tsx
@@ -258,4 +258,30 @@ describe('DateRange', () => {
     await userEvent.click(secondaryEndDateButton);
     expect(screen.getByDisplayValue('10 / 09 / 2024')).toBeInTheDocument();
   });
+
+  it('renders apply and cancel buttons', () => {
+    render(
+      <DateRange
+        dateValue={{ startDate: new Date(), endDate: new Date() }}
+        onCancel={() => {}}
+        onDateChange={() => {}}
+        onDateError={{ startDate: () => {}, endDate: () => {} }}
+        onSubmit={() => {}}
+      />,
+    );
+    expect(screen.getByRole('button', { name: /cancel/i })).toBeVisible();
+    expect(screen.getByRole('button', { name: /apply/i })).toBeVisible();
+  });
+
+  it('not renders apply and cancel buttons if event handlers are not present', () => {
+    render(
+      <DateRange
+        dateValue={{ startDate: new Date(), endDate: new Date() }}
+        onDateChange={() => {}}
+        onDateError={{ startDate: () => {}, endDate: () => {} }}
+      />,
+    );
+    expect(screen.queryByRole('button', { name: /cancel/i })).toBeNull();
+    expect(screen.queryByRole('button', { name: /apply/i })).toBeNull();
+  });
 });