fix: add closable feature to SingleDatePicker and enhance documentation for new props

playground/app.tsx

@@ -19,6 +19,7 @@ export default () => {
 				}}
 				onSelect={onSelect}
 				localization="zh-CN"
+				closable
 			/>
 		</div>
 	</div>)

src/components/SingleDatePicker.tsx

@@ -8,6 +8,7 @@ interface Props {
 	 	* Control the selected
 		* date programmatically, including situations like provide a default value or control the selected 
 		* date by parent component.
+		* @default new Date()
 	 	*/
 	value?: Date | { year: number, month: number, day: number }
 
@@ -21,13 +22,27 @@ interface Props {
 		month: number,
 		day: number
 	}) => void
+
 	/**
 	 * The language code that will be used to localize the panel.
-	 * Accept standard ISO 639-1 language code, such as 'zh-CN', 'en-US', 'ja-JP', etc. Default to the
-	 * language of the user’s browser. Note that it will not effect to the screen reader, but the screen
-	 * reader will still read the date in the user’s language.
+	 * Accept standard ISO 639-1 language code, such as 'zh-CN', 'en-US', 'ja-JP', etc. Note 
+	 * that it will not effect to the screen reader, but the screen reader will still read the 
+	 * date in the user’s language.
+	 * @default navigator.language
 	 */
 	localization?: string
+
+	/**
+	 * User requires to close the panel without select a specific date. Note that the close button is not 
+	 * visible, but can be read by screen reader.
+	 */
+	onClose?: () => void
+
+	/**
+	 * Show a close button to the users with screen reader.
+	 * @default false
+	 */
+	closable?: boolean
 }
 
 /**
@@ -37,7 +52,7 @@ interface Props {
  * 
  * @param {Props} props
  */
-export default ({ value, onSelect, localization }: Props) => {
+export default ({ value, onSelect, localization, onClose, closable = false }: Props) => {
 	const [currentMonth, setCurrentMonth] = useState(new Date().getMonth())
 	const [currentYear, setCurrentYear] = useState(new Date().getFullYear())
 	const [selectedDate, setSelectedDate] = useState(new Date())
@@ -112,6 +127,7 @@ export default ({ value, onSelect, localization }: Props) => {
 					{new Date(currentYear, index).toLocaleString(localization || navigator.language, { month: 'long' })}
 				</button>)}
 			</div>
+			{ closable && <button className='sr-only' onClick={onClose}>Close the panel</button> }
 		</div>
 	)
 	else return (
@@ -138,6 +154,7 @@ export default ({ value, onSelect, localization }: Props) => {
 					{date.toDateString() === new Date().toDateString() && <svg xmlns="http://www.w3.org/2000/svg" className='today-indicator' viewBox="0 0 24 24" fill="currentColor"><path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"></path></svg>}
 				</button>)}
 			</div>
+			{ closable && <button className='sr-only' aria-hidden onClick={onClose}>Close the panel</button> }
 		</div>
 	)
 }

src/style.scss

@@ -18,6 +18,17 @@
 		}
 	}
 
+	button.sr-only {
+		position: absolute;
+		width: 1px;
+		height: 1px;
+		padding: 0;
+		margin: -1px;
+		overflow: hidden;
+		clip: rect(0, 0, 0, 0);
+		border: 0;
+	}
+
 	.header {
 		padding: 0.75rem;
 		display: flex;