src/components/SingleWeekPicker.tsx

@@ -52,14 +52,6 @@ export interface SingleWeekPickerProps {
 		weekYear: number,
 		weekNum: number
 	}) => void
-
-	/**
-	 * 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. The close button for the screen reader is only available
-	 * when this prop is not `undefined`.
-	 * @default undefined
-	 */
-	onClose?: () => void
 }
 
 /**
@@ -70,7 +62,7 @@ export interface SingleWeekPickerProps {
  * 
  * @param 
  */
-export default ({ localization, mainColor = '#000000', accentColor = '#000000', reversedColor = '#ffffff', hoverColor = '#00000017', borderColor = '#e0e0e0', onClose }: SingleWeekPickerProps) => {
+export default ({ localization, mainColor = '#000000', accentColor = '#000000', reversedColor = '#ffffff', hoverColor = '#00000017', borderColor = '#e0e0e0' }: SingleWeekPickerProps) => {
 	const [currentMonth, setCurrentMonth] = useState(new Date().getMonth())
 	const [currentYear, setCurrentYear] = useState(new Date().getFullYear())
 	const [selectedWeek, setSelectedWeek] = useState<{ weekYear: number, weekNum: number }>(calculateWeekNum(new Date()))
@@ -128,45 +120,8 @@ export default ({ localization, mainColor = '#000000', accentColor = '#000000',
 		setSelectedWeek(calculateWeekNum(date))
 	}
 
-	function changeYear(year: string) {
-		if (isNaN(Number(year))) return
-		if (Number(year) < 0) return
-		setCurrentYear(Number(year))
-	}
-
-	function adjustYear() {
-		if (currentYear < 100) setCurrentYear(Number(`20${currentYear}`))
-	}
-
 	if (selectMonth) {
-		return <div className='datenel-component' role="dialog" aria-label="Week selection panel, you are now at month and year quick-select" id={`__datenel-${uniqueId}`}>
-			<div className='header'>
-				<button className='stepper' onClick={() => {
-					if (currentYear <= 100) return
-					setCurrentYear(currentYear - 1)
-				}} aria-label={`Go to last year, ${currentYear - 1}, you are now at year ${currentYear}`}><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M10.8284 12.0007L15.7782 16.9504L14.364 18.3646L8 12.0007L14.364 5.63672L15.7782 7.05093L10.8284 12.0007Z"></path></svg></button>
-				<input className='indicator'
-					value={currentYear}
-					onChange={e => changeYear(e.target.value)}
-					onBlur={adjustYear}
-					aria-label="Year input, type a year to go to that year"
-				/>
-				<button className='stepper' onClick={() => {
-					setCurrentYear(currentYear + 1)
-				}} aria-label={`Go to next year, ${currentYear + 1}, you are now at year ${currentYear}`}> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M13.1717 12.0007L8.22192 7.05093L9.63614 5.63672L16.0001 12.0007L9.63614 18.3646L8.22192 16.9504L13.1717 12.0007Z"></path></svg></button>
-			</div>
-			<div className='body'>
-				<div className='month-selector-body'>
-					{Array.from({ length: 12 }).map((_, index) => <button className={`item`} key={index} onClick={() => {
-						setCurrentMonth(index)
-						setSelectMonth(false)
-					}} aria-label={`Go to ${new Date(currentYear, index).toLocaleString(localization || navigator.language, { month: 'long' })} of the year ${currentYear}`}>
-						{new Date(currentYear, index).toLocaleString(localization || navigator.language, { month: 'long' })}
-					</button>)}
-				</div>
-			</div>
-			{!!onClose && <button className='sr-only' onClick={onClose}>Close the panel</button>}
-		</div>
+		return <div className='datenel-component' role="dialog" aria-label="Week selection panel, you are now at month and year quick-select" id={`__datenel-${uniqueId}`}></div>
 	} else {
 		return <div className='datenel-component' role="dialog" aria-label="Week selection panel" id={`__datenel-${uniqueId}`}>
 
@@ -195,7 +150,7 @@ export default ({ localization, mainColor = '#000000', accentColor = '#000000',
 
 					{calendarWeeks.map((week, index) => {
 						const isSelected = selectedWeek.weekYear === calculateWeekNum(week[0]).weekYear && selectedWeek.weekNum === calculateWeekNum(week[0]).weekNum
-						return <button className={`listitem ${isSelected ? 'active' : ''}`} key={index} onClick={() => selectWeek(week[0])} aria-label={`Select week ${calculateWeekNum(week[0]).weekNum} of the year ${calculateWeekNum(week[0]).weekYear}, from ${week[0].toLocaleString(localization || navigator.language, { dateStyle: "full" })} to ${week[6].toLocaleString(localization || navigator.language, { weekday: 'long' })}, ${week[6].toLocaleString(localization || navigator.language, { month: 'long' })} ${week[6].getDate()}, ${week[6].getFullYear()}`}>
+						return <button className={`listitem ${isSelected ? 'active' : ''}`} key={index} onClick={() => selectWeek(week[0])}>
 							{week.map(date => <div
 								className={`item date ${currentMonth !== date.getMonth() && 'extra-month'}`}
 								key={date.getDate()}
@@ -207,8 +162,6 @@ export default ({ localization, mainColor = '#000000', accentColor = '#000000',
 					})}
 				</div>
 			</div>
-
-			{!!onClose && <button className='sr-only' onClick={onClose}>Close the panel</button>}
 		</div>
 	}
 }