From 1ec12551d79e7de9604726efe371c4fd10532509 Mon Sep 17 00:00:00 2001
From: Bryce Osterhaus <bryce.osterhaus@liferay.com>
Date: Thu, 21 May 2020 11:51:15 -0700
Subject: [PATCH] feat(@clayui/date-picker): add props to control expand
 functionality

---
 packages/clay-date-picker/README.mdx        |  4 +++
 packages/clay-date-picker/src/index.tsx     | 38 +++++++++++++++++----
 packages/clay-date-picker/stories/index.tsx | 34 ++++++++++++++++++
 3 files changed, 70 insertions(+), 6 deletions(-)

diff --git a/packages/clay-date-picker/README.mdx b/packages/clay-date-picker/README.mdx
index 4de47baeb3..bb7831487b 100644
--- a/packages/clay-date-picker/README.mdx
+++ b/packages/clay-date-picker/README.mdx
@@ -82,6 +82,10 @@ To customize the Date Picker content footer you can use the [`footerElement`](#a
 
 <DatePickerCustomFooter />
 
+## Programatically Expand Dropdown
+
+If you want to expand or close the picker from outside of the component, use the props `expand` and `onExpandChange`.
+
 ## API
 
 <div>[APITable "clay-date-picker/src/index.tsx"]</div>
diff --git a/packages/clay-date-picker/src/index.tsx b/packages/clay-date-picker/src/index.tsx
index 9d961d1f7a..aff793dffa 100644
--- a/packages/clay-date-picker/src/index.tsx
+++ b/packages/clay-date-picker/src/index.tsx
@@ -58,7 +58,8 @@ interface IProps extends React.HTMLAttributes<HTMLInputElement> {
 	id?: string;
 
 	/**
-	 * Flag to indicate if date is expanded.
+	 * Flag to indicate if date is initially expanded when
+	 * `expand` and `onExpandChange` are not being used.
 	 */
 	initialExpanded?: boolean;
 
@@ -85,8 +86,13 @@ interface IProps extends React.HTMLAttributes<HTMLInputElement> {
 
 	/**
 	 * Called when the input change.
+	 *
+	 * Second argument gives the type that caused the value change
 	 */
-	onValueChange: (value: Date | string) => void;
+	onValueChange: (
+		value: Date | string,
+		type?: 'click' | 'input' | 'time'
+	) => void;
 
 	/**
 	 * Describe a brief tip to help users interact.
@@ -128,6 +134,16 @@ interface IProps extends React.HTMLAttributes<HTMLInputElement> {
 	 * List of years available for navigation within the selector.
 	 */
 	years?: IYears;
+
+	/**
+	 * Determines if menu is expanded or not
+	 */
+	expanded?: boolean;
+
+	/**
+	 * Callback for when dropdown changes its active state
+	 */
+	onExpandedChange?: (val: boolean) => void;
 }
 
 const DateNow = new Date();
@@ -149,6 +165,7 @@ const ClayDatePicker: React.FunctionComponent<IProps> = React.forwardRef<
 			},
 			dateFormat = 'YYYY-MM-DD',
 			disabled,
+			expanded,
 			firstDayOfWeek = 0,
 			footerElement,
 			id,
@@ -169,6 +186,7 @@ const ClayDatePicker: React.FunctionComponent<IProps> = React.forwardRef<
 				'November',
 				'December',
 			],
+			onExpandedChange,
 			onNavigation = () => {},
 			onValueChange = () => {},
 			placeholder,
@@ -226,7 +244,15 @@ const ClayDatePicker: React.FunctionComponent<IProps> = React.forwardRef<
 		/**
 		 * Flag to indicate if date is expanded.
 		 */
-		const [expanded, setExpanded] = React.useState(initialExpanded);
+		const [internalExpanded, setInternalExpanded] = React.useState(
+			initialExpanded
+		);
+
+		expanded = expanded !== undefined ? expanded : internalExpanded;
+
+		const setExpanded = onExpandedChange
+			? onExpandedChange
+			: setInternalExpanded;
 
 		/**
 		 * Create a ref to store the datepicker DOM element
@@ -260,7 +286,7 @@ const ClayDatePicker: React.FunctionComponent<IProps> = React.forwardRef<
 		 */
 		const handleDayClicked = (date: Date) => {
 			setDaySelected(date);
-			onValueChange(date);
+			onValueChange(date, 'click');
 		};
 
 		/**
@@ -283,7 +309,7 @@ const ClayDatePicker: React.FunctionComponent<IProps> = React.forwardRef<
 				}
 			}
 
-			onValueChange(value);
+			onValueChange(value, 'input');
 		};
 
 		/**
@@ -304,7 +330,7 @@ const ClayDatePicker: React.FunctionComponent<IProps> = React.forwardRef<
 			// Hack to force InputDate to add `currentTime` to the value of
 			// the input when the value was edited by the user.
 			if (typeof value === 'string' && moment(value, format).isValid()) {
-				onValueChange(moment(value, format).toDate());
+				onValueChange(moment(value, format).toDate(), 'time');
 			}
 
 			setCurrentTime(hours, minutes);
diff --git a/packages/clay-date-picker/stories/index.tsx b/packages/clay-date-picker/stories/index.tsx
index 7939b050ed..a1d6a44d56 100644
--- a/packages/clay-date-picker/stories/index.tsx
+++ b/packages/clay-date-picker/stories/index.tsx
@@ -105,6 +105,40 @@ storiesOf('Components|ClayDatePicker', module)
 			}}
 		/>
 	))
+	.add('w/ custom expand', () => {
+		const [expanded, setExpanded] = React.useState(false);
+		const [value, setValue] = React.useState<string | Date>('');
+
+		return (
+			<>
+				<button onClick={() => setExpanded(true)}>
+					{'Open Picker'}
+				</button>
+
+				<br />
+				<br />
+
+				<ClayDatePicker
+					expanded={expanded}
+					onExpandedChange={setExpanded}
+					onValueChange={(val, type) => {
+						setValue(val);
+
+						if (type === 'click') {
+							setExpanded(false);
+						}
+					}}
+					placeholder="YYYY-MM-DD"
+					spritemap={spritemap}
+					value={value as string}
+					years={{
+						end: 2024,
+						start: 1997,
+					}}
+				/>
+			</>
+		);
+	})
 	.add('native', () => (
 		<ClayDatePickerWithState
 			placeholder="YYYY-MM-DD"