@transferwise/components 0.0.0-experimental-36fa940 → 0.0.0-experimental-1168b1c
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/Calendar/Calendar.js.map +1 -1
- package/build/Calendar/Calendar.mjs.map +1 -1
- package/build/Calendar/TableLink/TableLink.js +12 -12
- package/build/Calendar/TableLink/TableLink.js.map +1 -1
- package/build/Calendar/TableLink/TableLink.mjs +12 -12
- package/build/Calendar/TableLink/TableLink.mjs.map +1 -1
- package/package.json +1 -1
- package/src/Calendar/Calendar.tsx +1 -1
- package/src/Calendar/TableLink/TableLink.tsx +10 -10
- package/src/Calendar/_stories/Calendar.accessibility.docs.mdx +5 -4
- package/src/Calendar/_stories/Calendar.story.tsx +6 -1
- package/src/DateLookup/_stories/DateLookup.story.tsx +6 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Calendar.js","sources":["../../src/Calendar/Calendar.tsx"],"sourcesContent":["import { useState, useCallback, useEffect, useId, useRef, KeyboardEvent } from 'react';\n\nimport { MonthFormat } from '../common';\nimport {\n isWithinRange,\n moveToWithinRange,\n returnDateView,\n isDateDisabled,\n hasDisabledDatesInMonth,\n} from '../common/DateUtils';\nimport { InlinePrompt } from '../Prompt/InlinePrompt';\nimport type { DateChangeMeta, DisabledRules } from './Calendar.types';\nimport DayCalendar from './DayCalendar';\nimport { getStartOfDay } from './GetStartOfDay';\nimport MonthCalendar from './MonthCalendar';\nimport YearCalendar from './YearCalendar';\n\nexport interface CalendarProps {\n value: Date | null;\n min?: Date | null;\n max?: Date | null;\n monthFormat?: `${MonthFormat}`;\n placeholder?: string;\n disabledRules?: DisabledRules;\n onChange: (date: Date | null, meta: DateChangeMeta) => void;\n onSelect?: (date: Date) => void;\n}\n\nconst Calendar = ({\n value,\n min: minProp = null,\n max: maxProp = null,\n monthFormat = MonthFormat.LONG,\n placeholder,\n disabledRules,\n onChange,\n onSelect,\n}: CalendarProps) => {\n const selectedDate = getStartOfDay(value);\n const min = getStartOfDay(minProp);\n const max = getStartOfDay(maxProp);\n const disabledReasonId = useId();\n const [focusedDateDisabled, setFocusedDateDisabled] = useState(false);\n const disabledRulesRef = useRef(disabledRules);\n useEffect(() => {\n disabledRulesRef.current = disabledRules;\n });\n\n useEffect(() => {\n if (selectedDate && !isWithinRange(selectedDate, min, max)) {\n const clamped = moveToWithinRange(selectedDate, min, max);\n const isEnabled = !isDateDisabled(clamped, disabledRulesRef.current);\n onChange(clamped, { isEnabled });\n }\n }, [selectedDate?.getTime(), min?.getTime(), max?.getTime(), onChange]); // eslint-disable-line react-hooks/exhaustive-deps\n\n const dateView = returnDateView(selectedDate, min, max);\n const [viewMonth, setViewMonth] = useState(dateView.getMonth());\n const [viewYear, setViewYear] = useState(dateView.getFullYear());\n const [mode, setMode] = useState<'day' | 'month' | 'year'>('day');\n\n useEffect(() => {\n const view = returnDateView(selectedDate, min, max);\n // eslint-disable-next-line react-hooks/set-state-in-effect\n setViewMonth(view.getMonth());\n\n setViewYear(view.getFullYear());\n }, [selectedDate?.getTime(), min?.getTime(), max?.getTime()]); // eslint-disable-line react-hooks/exhaustive-deps\n\n useEffect(() => {\n if (selectedDate) {\n const isEnabled =\n isWithinRange(selectedDate, min, max) &&\n !isDateDisabled(selectedDate, disabledRulesRef.current);\n \n setFocusedDateDisabled(!isEnabled);\n }\n }, [selectedDate?.getTime(), min?.getTime(), max?.getTime(), disabledRules]); // eslint-disable-line react-hooks/exhaustive-deps\n\n const handleViewDateUpdate = useCallback(\n // eslint-disable-next-line react-hooks/preserve-manual-memoization\n ({ month, year }: { month?: number; year?: number }) => {\n if (month !== undefined) setViewMonth(month);\n if (year !== undefined) setViewYear(year);\n },\n [],\n );\n\n const switchToDays = useCallback(() => setMode('day'), []);\n const switchToMonths = useCallback(() => setMode('month'), []);\n const switchToYears = useCallback(() => setMode('year'), []);\n\n const handleSelectedDateUpdate = useCallback(\n // eslint-disable-next-line react-hooks/preserve-manual-memoization\n (date: Date) => {\n const isEnabled =\n isWithinRange(date, min, max) && !isDateDisabled(date, disabledRulesRef.current);\n setFocusedDateDisabled(!isEnabled);\n onChange(date, { isEnabled });\n if (isEnabled && onSelect) {\n onSelect(date);\n }\n },\n [min, max, onChange, onSelect],\n );\n\n const adjustDate = useCallback(\n // eslint-disable-next-line react-hooks/preserve-manual-memoization\n (daysToAdd: number, monthsToAdd: number, yearsToAdd: number) => {\n let date: Date | null;\n if (selectedDate) {\n date = new Date(\n mode === 'year' ? selectedDate.getFullYear() + yearsToAdd : selectedDate.getFullYear(),\n mode === 'month' ? selectedDate.getMonth() + monthsToAdd : selectedDate.getMonth(),\n mode === 'day' ? selectedDate.getDate() + daysToAdd : selectedDate.getDate(),\n );\n } else {\n date = getStartOfDay(new Date());\n }\n date &&= moveToWithinRange(date, min, max);\n if (date?.getTime() !== selectedDate?.getTime()) {\n const isEnabled = date\n ? isWithinRange(date, min, max) && !isDateDisabled(date, disabledRulesRef.current)\n : true;\n setFocusedDateDisabled(!isEnabled);\n onChange(date, { isEnabled });\n }\n },\n [selectedDate, min, max, mode, onChange],\n );\n\n const handleKeyDown = useCallback(\n (event: KeyboardEvent<HTMLDivElement>) => {\n switch (event.key) {\n case 'ArrowLeft':\n adjustDate(-1, -1, -1);\n event.preventDefault();\n break;\n case 'ArrowUp':\n adjustDate(-7, -4, -4);\n event.preventDefault();\n break;\n case 'ArrowRight':\n adjustDate(1, 1, 1);\n event.preventDefault();\n break;\n case 'ArrowDown':\n adjustDate(7, 4, 4);\n event.preventDefault();\n break;\n default:\n break;\n }\n },\n [adjustDate],\n );\n\n const showPrompt =\n mode === 'day' &&\n !!disabledRules?.reason &&\n hasDisabledDatesInMonth(viewMonth, viewYear, disabledRules, min, max);\n\n return (\n // eslint-disable-next-line jsx-a11y/no-static-element-interactions\n <div onKeyDown={handleKeyDown}>\n {mode === 'day' && (\n <DayCalendar\n selectedDate={selectedDate}\n min={min}\n max={max}\n viewMonth={viewMonth}\n viewYear={viewYear}\n monthFormat={monthFormat}\n disabledRules={disabledRules}\n disabledReasonId={showPrompt ? disabledReasonId : undefined}\n onSelect={handleSelectedDateUpdate}\n onLabelClick={switchToYears}\n onViewDateUpdate={handleViewDateUpdate}\n />\n )}\n {mode === 'month' && (\n <MonthCalendar\n selectedDate={selectedDate}\n min={min}\n max={max}\n viewYear={viewYear}\n {...(placeholder != null && { placeholder })}\n onSelect={switchToDays}\n onLabelClick={switchToYears}\n onViewDateUpdate={handleViewDateUpdate}\n />\n )}\n {mode === 'year' && (\n <YearCalendar\n selectedDate={selectedDate}\n min={min}\n max={max}\n viewYear={viewYear}\n {...(placeholder != null && { placeholder })}\n onSelect={switchToMonths}\n onViewDateUpdate={handleViewDateUpdate}\n />\n )}\n {showPrompt && (\n <InlinePrompt\n sentiment={focusedDateDisabled ? 'negative' : 'neutral'}\n width=\"full\"\n id={disabledReasonId}\n >\n {disabledRules.reason}\n </InlinePrompt>\n )}\n </div>\n );\n};\n\nexport default Calendar;\n"],"names":["Calendar","value","min","minProp","max","maxProp","monthFormat","MonthFormat","LONG","placeholder","disabledRules","onChange","onSelect","selectedDate","getStartOfDay","disabledReasonId","useId","focusedDateDisabled","setFocusedDateDisabled","useState","disabledRulesRef","useRef","useEffect","current","isWithinRange","clamped","moveToWithinRange","isEnabled","isDateDisabled","getTime","dateView","returnDateView","viewMonth","setViewMonth","getMonth","viewYear","setViewYear","getFullYear","mode","setMode","view","handleViewDateUpdate","useCallback","month","year","undefined","switchToDays","switchToMonths","switchToYears","handleSelectedDateUpdate","date","adjustDate","daysToAdd","monthsToAdd","yearsToAdd","Date","getDate","handleKeyDown","event","key","preventDefault","showPrompt","reason","hasDisabledDatesInMonth","_jsxs","onKeyDown","children","_jsx","DayCalendar","onLabelClick","onViewDateUpdate","MonthCalendar","YearCalendar","InlinePrompt","sentiment","width","id"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Calendar.js","sources":["../../src/Calendar/Calendar.tsx"],"sourcesContent":["import { useState, useCallback, useEffect, useId, useRef, KeyboardEvent } from 'react';\n\nimport { MonthFormat } from '../common';\nimport {\n isWithinRange,\n moveToWithinRange,\n returnDateView,\n isDateDisabled,\n hasDisabledDatesInMonth,\n} from '../common/DateUtils';\nimport { InlinePrompt } from '../Prompt/InlinePrompt';\nimport type { DateChangeMeta, DisabledRules } from './Calendar.types';\nimport DayCalendar from './DayCalendar';\nimport { getStartOfDay } from './GetStartOfDay';\nimport MonthCalendar from './MonthCalendar';\nimport YearCalendar from './YearCalendar';\n\nexport interface CalendarProps {\n value: Date | null;\n min?: Date | null;\n max?: Date | null;\n monthFormat?: `${MonthFormat}`;\n placeholder?: string;\n disabledRules?: DisabledRules;\n onChange: (date: Date | null, meta: DateChangeMeta) => void;\n onSelect?: (date: Date) => void;\n}\n\nconst Calendar = ({\n value,\n min: minProp = null,\n max: maxProp = null,\n monthFormat = MonthFormat.LONG,\n placeholder,\n disabledRules,\n onChange,\n onSelect,\n}: CalendarProps) => {\n const selectedDate = getStartOfDay(value);\n const min = getStartOfDay(minProp);\n const max = getStartOfDay(maxProp);\n const disabledReasonId = useId();\n const [focusedDateDisabled, setFocusedDateDisabled] = useState(false);\n const disabledRulesRef = useRef(disabledRules);\n useEffect(() => {\n disabledRulesRef.current = disabledRules;\n });\n\n useEffect(() => {\n if (selectedDate && !isWithinRange(selectedDate, min, max)) {\n const clamped = moveToWithinRange(selectedDate, min, max);\n const isEnabled = !isDateDisabled(clamped, disabledRulesRef.current);\n onChange(clamped, { isEnabled });\n }\n }, [selectedDate?.getTime(), min?.getTime(), max?.getTime(), onChange]); // eslint-disable-line react-hooks/exhaustive-deps\n\n const dateView = returnDateView(selectedDate, min, max);\n const [viewMonth, setViewMonth] = useState(dateView.getMonth());\n const [viewYear, setViewYear] = useState(dateView.getFullYear());\n const [mode, setMode] = useState<'day' | 'month' | 'year'>('day');\n\n useEffect(() => {\n const view = returnDateView(selectedDate, min, max);\n // eslint-disable-next-line react-hooks/set-state-in-effect\n setViewMonth(view.getMonth());\n\n setViewYear(view.getFullYear());\n }, [selectedDate?.getTime(), min?.getTime(), max?.getTime()]); // eslint-disable-line react-hooks/exhaustive-deps\n\n useEffect(() => {\n if (selectedDate) {\n const isEnabled =\n isWithinRange(selectedDate, min, max) &&\n !isDateDisabled(selectedDate, disabledRulesRef.current);\n\n setFocusedDateDisabled(!isEnabled);\n }\n }, [selectedDate?.getTime(), min?.getTime(), max?.getTime(), disabledRules]); // eslint-disable-line react-hooks/exhaustive-deps\n\n const handleViewDateUpdate = useCallback(\n // eslint-disable-next-line react-hooks/preserve-manual-memoization\n ({ month, year }: { month?: number; year?: number }) => {\n if (month !== undefined) setViewMonth(month);\n if (year !== undefined) setViewYear(year);\n },\n [],\n );\n\n const switchToDays = useCallback(() => setMode('day'), []);\n const switchToMonths = useCallback(() => setMode('month'), []);\n const switchToYears = useCallback(() => setMode('year'), []);\n\n const handleSelectedDateUpdate = useCallback(\n // eslint-disable-next-line react-hooks/preserve-manual-memoization\n (date: Date) => {\n const isEnabled =\n isWithinRange(date, min, max) && !isDateDisabled(date, disabledRulesRef.current);\n setFocusedDateDisabled(!isEnabled);\n onChange(date, { isEnabled });\n if (isEnabled && onSelect) {\n onSelect(date);\n }\n },\n [min, max, onChange, onSelect],\n );\n\n const adjustDate = useCallback(\n // eslint-disable-next-line react-hooks/preserve-manual-memoization\n (daysToAdd: number, monthsToAdd: number, yearsToAdd: number) => {\n let date: Date | null;\n if (selectedDate) {\n date = new Date(\n mode === 'year' ? selectedDate.getFullYear() + yearsToAdd : selectedDate.getFullYear(),\n mode === 'month' ? selectedDate.getMonth() + monthsToAdd : selectedDate.getMonth(),\n mode === 'day' ? selectedDate.getDate() + daysToAdd : selectedDate.getDate(),\n );\n } else {\n date = getStartOfDay(new Date());\n }\n date &&= moveToWithinRange(date, min, max);\n if (date?.getTime() !== selectedDate?.getTime()) {\n const isEnabled = date\n ? isWithinRange(date, min, max) && !isDateDisabled(date, disabledRulesRef.current)\n : true;\n setFocusedDateDisabled(!isEnabled);\n onChange(date, { isEnabled });\n }\n },\n [selectedDate, min, max, mode, onChange],\n );\n\n const handleKeyDown = useCallback(\n (event: KeyboardEvent<HTMLDivElement>) => {\n switch (event.key) {\n case 'ArrowLeft':\n adjustDate(-1, -1, -1);\n event.preventDefault();\n break;\n case 'ArrowUp':\n adjustDate(-7, -4, -4);\n event.preventDefault();\n break;\n case 'ArrowRight':\n adjustDate(1, 1, 1);\n event.preventDefault();\n break;\n case 'ArrowDown':\n adjustDate(7, 4, 4);\n event.preventDefault();\n break;\n default:\n break;\n }\n },\n [adjustDate],\n );\n\n const showPrompt =\n mode === 'day' &&\n !!disabledRules?.reason &&\n hasDisabledDatesInMonth(viewMonth, viewYear, disabledRules, min, max);\n\n return (\n // eslint-disable-next-line jsx-a11y/no-static-element-interactions\n <div onKeyDown={handleKeyDown}>\n {mode === 'day' && (\n <DayCalendar\n selectedDate={selectedDate}\n min={min}\n max={max}\n viewMonth={viewMonth}\n viewYear={viewYear}\n monthFormat={monthFormat}\n disabledRules={disabledRules}\n disabledReasonId={showPrompt ? disabledReasonId : undefined}\n onSelect={handleSelectedDateUpdate}\n onLabelClick={switchToYears}\n onViewDateUpdate={handleViewDateUpdate}\n />\n )}\n {mode === 'month' && (\n <MonthCalendar\n selectedDate={selectedDate}\n min={min}\n max={max}\n viewYear={viewYear}\n {...(placeholder != null && { placeholder })}\n onSelect={switchToDays}\n onLabelClick={switchToYears}\n onViewDateUpdate={handleViewDateUpdate}\n />\n )}\n {mode === 'year' && (\n <YearCalendar\n selectedDate={selectedDate}\n min={min}\n max={max}\n viewYear={viewYear}\n {...(placeholder != null && { placeholder })}\n onSelect={switchToMonths}\n onViewDateUpdate={handleViewDateUpdate}\n />\n )}\n {showPrompt && (\n <InlinePrompt\n sentiment={focusedDateDisabled ? 'negative' : 'neutral'}\n width=\"full\"\n id={disabledReasonId}\n >\n {disabledRules.reason}\n </InlinePrompt>\n )}\n </div>\n );\n};\n\nexport default Calendar;\n"],"names":["Calendar","value","min","minProp","max","maxProp","monthFormat","MonthFormat","LONG","placeholder","disabledRules","onChange","onSelect","selectedDate","getStartOfDay","disabledReasonId","useId","focusedDateDisabled","setFocusedDateDisabled","useState","disabledRulesRef","useRef","useEffect","current","isWithinRange","clamped","moveToWithinRange","isEnabled","isDateDisabled","getTime","dateView","returnDateView","viewMonth","setViewMonth","getMonth","viewYear","setViewYear","getFullYear","mode","setMode","view","handleViewDateUpdate","useCallback","month","year","undefined","switchToDays","switchToMonths","switchToYears","handleSelectedDateUpdate","date","adjustDate","daysToAdd","monthsToAdd","yearsToAdd","Date","getDate","handleKeyDown","event","key","preventDefault","showPrompt","reason","hasDisabledDatesInMonth","_jsxs","onKeyDown","children","_jsx","DayCalendar","onLabelClick","onViewDateUpdate","MonthCalendar","YearCalendar","InlinePrompt","sentiment","width","id"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Calendar.mjs","sources":["../../src/Calendar/Calendar.tsx"],"sourcesContent":["import { useState, useCallback, useEffect, useId, useRef, KeyboardEvent } from 'react';\n\nimport { MonthFormat } from '../common';\nimport {\n isWithinRange,\n moveToWithinRange,\n returnDateView,\n isDateDisabled,\n hasDisabledDatesInMonth,\n} from '../common/DateUtils';\nimport { InlinePrompt } from '../Prompt/InlinePrompt';\nimport type { DateChangeMeta, DisabledRules } from './Calendar.types';\nimport DayCalendar from './DayCalendar';\nimport { getStartOfDay } from './GetStartOfDay';\nimport MonthCalendar from './MonthCalendar';\nimport YearCalendar from './YearCalendar';\n\nexport interface CalendarProps {\n value: Date | null;\n min?: Date | null;\n max?: Date | null;\n monthFormat?: `${MonthFormat}`;\n placeholder?: string;\n disabledRules?: DisabledRules;\n onChange: (date: Date | null, meta: DateChangeMeta) => void;\n onSelect?: (date: Date) => void;\n}\n\nconst Calendar = ({\n value,\n min: minProp = null,\n max: maxProp = null,\n monthFormat = MonthFormat.LONG,\n placeholder,\n disabledRules,\n onChange,\n onSelect,\n}: CalendarProps) => {\n const selectedDate = getStartOfDay(value);\n const min = getStartOfDay(minProp);\n const max = getStartOfDay(maxProp);\n const disabledReasonId = useId();\n const [focusedDateDisabled, setFocusedDateDisabled] = useState(false);\n const disabledRulesRef = useRef(disabledRules);\n useEffect(() => {\n disabledRulesRef.current = disabledRules;\n });\n\n useEffect(() => {\n if (selectedDate && !isWithinRange(selectedDate, min, max)) {\n const clamped = moveToWithinRange(selectedDate, min, max);\n const isEnabled = !isDateDisabled(clamped, disabledRulesRef.current);\n onChange(clamped, { isEnabled });\n }\n }, [selectedDate?.getTime(), min?.getTime(), max?.getTime(), onChange]); // eslint-disable-line react-hooks/exhaustive-deps\n\n const dateView = returnDateView(selectedDate, min, max);\n const [viewMonth, setViewMonth] = useState(dateView.getMonth());\n const [viewYear, setViewYear] = useState(dateView.getFullYear());\n const [mode, setMode] = useState<'day' | 'month' | 'year'>('day');\n\n useEffect(() => {\n const view = returnDateView(selectedDate, min, max);\n // eslint-disable-next-line react-hooks/set-state-in-effect\n setViewMonth(view.getMonth());\n\n setViewYear(view.getFullYear());\n }, [selectedDate?.getTime(), min?.getTime(), max?.getTime()]); // eslint-disable-line react-hooks/exhaustive-deps\n\n useEffect(() => {\n if (selectedDate) {\n const isEnabled =\n isWithinRange(selectedDate, min, max) &&\n !isDateDisabled(selectedDate, disabledRulesRef.current);\n \n setFocusedDateDisabled(!isEnabled);\n }\n }, [selectedDate?.getTime(), min?.getTime(), max?.getTime(), disabledRules]); // eslint-disable-line react-hooks/exhaustive-deps\n\n const handleViewDateUpdate = useCallback(\n // eslint-disable-next-line react-hooks/preserve-manual-memoization\n ({ month, year }: { month?: number; year?: number }) => {\n if (month !== undefined) setViewMonth(month);\n if (year !== undefined) setViewYear(year);\n },\n [],\n );\n\n const switchToDays = useCallback(() => setMode('day'), []);\n const switchToMonths = useCallback(() => setMode('month'), []);\n const switchToYears = useCallback(() => setMode('year'), []);\n\n const handleSelectedDateUpdate = useCallback(\n // eslint-disable-next-line react-hooks/preserve-manual-memoization\n (date: Date) => {\n const isEnabled =\n isWithinRange(date, min, max) && !isDateDisabled(date, disabledRulesRef.current);\n setFocusedDateDisabled(!isEnabled);\n onChange(date, { isEnabled });\n if (isEnabled && onSelect) {\n onSelect(date);\n }\n },\n [min, max, onChange, onSelect],\n );\n\n const adjustDate = useCallback(\n // eslint-disable-next-line react-hooks/preserve-manual-memoization\n (daysToAdd: number, monthsToAdd: number, yearsToAdd: number) => {\n let date: Date | null;\n if (selectedDate) {\n date = new Date(\n mode === 'year' ? selectedDate.getFullYear() + yearsToAdd : selectedDate.getFullYear(),\n mode === 'month' ? selectedDate.getMonth() + monthsToAdd : selectedDate.getMonth(),\n mode === 'day' ? selectedDate.getDate() + daysToAdd : selectedDate.getDate(),\n );\n } else {\n date = getStartOfDay(new Date());\n }\n date &&= moveToWithinRange(date, min, max);\n if (date?.getTime() !== selectedDate?.getTime()) {\n const isEnabled = date\n ? isWithinRange(date, min, max) && !isDateDisabled(date, disabledRulesRef.current)\n : true;\n setFocusedDateDisabled(!isEnabled);\n onChange(date, { isEnabled });\n }\n },\n [selectedDate, min, max, mode, onChange],\n );\n\n const handleKeyDown = useCallback(\n (event: KeyboardEvent<HTMLDivElement>) => {\n switch (event.key) {\n case 'ArrowLeft':\n adjustDate(-1, -1, -1);\n event.preventDefault();\n break;\n case 'ArrowUp':\n adjustDate(-7, -4, -4);\n event.preventDefault();\n break;\n case 'ArrowRight':\n adjustDate(1, 1, 1);\n event.preventDefault();\n break;\n case 'ArrowDown':\n adjustDate(7, 4, 4);\n event.preventDefault();\n break;\n default:\n break;\n }\n },\n [adjustDate],\n );\n\n const showPrompt =\n mode === 'day' &&\n !!disabledRules?.reason &&\n hasDisabledDatesInMonth(viewMonth, viewYear, disabledRules, min, max);\n\n return (\n // eslint-disable-next-line jsx-a11y/no-static-element-interactions\n <div onKeyDown={handleKeyDown}>\n {mode === 'day' && (\n <DayCalendar\n selectedDate={selectedDate}\n min={min}\n max={max}\n viewMonth={viewMonth}\n viewYear={viewYear}\n monthFormat={monthFormat}\n disabledRules={disabledRules}\n disabledReasonId={showPrompt ? disabledReasonId : undefined}\n onSelect={handleSelectedDateUpdate}\n onLabelClick={switchToYears}\n onViewDateUpdate={handleViewDateUpdate}\n />\n )}\n {mode === 'month' && (\n <MonthCalendar\n selectedDate={selectedDate}\n min={min}\n max={max}\n viewYear={viewYear}\n {...(placeholder != null && { placeholder })}\n onSelect={switchToDays}\n onLabelClick={switchToYears}\n onViewDateUpdate={handleViewDateUpdate}\n />\n )}\n {mode === 'year' && (\n <YearCalendar\n selectedDate={selectedDate}\n min={min}\n max={max}\n viewYear={viewYear}\n {...(placeholder != null && { placeholder })}\n onSelect={switchToMonths}\n onViewDateUpdate={handleViewDateUpdate}\n />\n )}\n {showPrompt && (\n <InlinePrompt\n sentiment={focusedDateDisabled ? 'negative' : 'neutral'}\n width=\"full\"\n id={disabledReasonId}\n >\n {disabledRules.reason}\n </InlinePrompt>\n )}\n </div>\n );\n};\n\nexport default Calendar;\n"],"names":["Calendar","value","min","minProp","max","maxProp","monthFormat","MonthFormat","LONG","placeholder","disabledRules","onChange","onSelect","selectedDate","getStartOfDay","disabledReasonId","useId","focusedDateDisabled","setFocusedDateDisabled","useState","disabledRulesRef","useRef","useEffect","current","isWithinRange","clamped","moveToWithinRange","isEnabled","isDateDisabled","getTime","dateView","returnDateView","viewMonth","setViewMonth","getMonth","viewYear","setViewYear","getFullYear","mode","setMode","view","handleViewDateUpdate","useCallback","month","year","undefined","switchToDays","switchToMonths","switchToYears","handleSelectedDateUpdate","date","adjustDate","daysToAdd","monthsToAdd","yearsToAdd","Date","getDate","handleKeyDown","event","key","preventDefault","showPrompt","reason","hasDisabledDatesInMonth","_jsxs","onKeyDown","children","_jsx","DayCalendar","onLabelClick","onViewDateUpdate","MonthCalendar","YearCalendar","InlinePrompt","sentiment","width","id"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Calendar.mjs","sources":["../../src/Calendar/Calendar.tsx"],"sourcesContent":["import { useState, useCallback, useEffect, useId, useRef, KeyboardEvent } from 'react';\n\nimport { MonthFormat } from '../common';\nimport {\n isWithinRange,\n moveToWithinRange,\n returnDateView,\n isDateDisabled,\n hasDisabledDatesInMonth,\n} from '../common/DateUtils';\nimport { InlinePrompt } from '../Prompt/InlinePrompt';\nimport type { DateChangeMeta, DisabledRules } from './Calendar.types';\nimport DayCalendar from './DayCalendar';\nimport { getStartOfDay } from './GetStartOfDay';\nimport MonthCalendar from './MonthCalendar';\nimport YearCalendar from './YearCalendar';\n\nexport interface CalendarProps {\n value: Date | null;\n min?: Date | null;\n max?: Date | null;\n monthFormat?: `${MonthFormat}`;\n placeholder?: string;\n disabledRules?: DisabledRules;\n onChange: (date: Date | null, meta: DateChangeMeta) => void;\n onSelect?: (date: Date) => void;\n}\n\nconst Calendar = ({\n value,\n min: minProp = null,\n max: maxProp = null,\n monthFormat = MonthFormat.LONG,\n placeholder,\n disabledRules,\n onChange,\n onSelect,\n}: CalendarProps) => {\n const selectedDate = getStartOfDay(value);\n const min = getStartOfDay(minProp);\n const max = getStartOfDay(maxProp);\n const disabledReasonId = useId();\n const [focusedDateDisabled, setFocusedDateDisabled] = useState(false);\n const disabledRulesRef = useRef(disabledRules);\n useEffect(() => {\n disabledRulesRef.current = disabledRules;\n });\n\n useEffect(() => {\n if (selectedDate && !isWithinRange(selectedDate, min, max)) {\n const clamped = moveToWithinRange(selectedDate, min, max);\n const isEnabled = !isDateDisabled(clamped, disabledRulesRef.current);\n onChange(clamped, { isEnabled });\n }\n }, [selectedDate?.getTime(), min?.getTime(), max?.getTime(), onChange]); // eslint-disable-line react-hooks/exhaustive-deps\n\n const dateView = returnDateView(selectedDate, min, max);\n const [viewMonth, setViewMonth] = useState(dateView.getMonth());\n const [viewYear, setViewYear] = useState(dateView.getFullYear());\n const [mode, setMode] = useState<'day' | 'month' | 'year'>('day');\n\n useEffect(() => {\n const view = returnDateView(selectedDate, min, max);\n // eslint-disable-next-line react-hooks/set-state-in-effect\n setViewMonth(view.getMonth());\n\n setViewYear(view.getFullYear());\n }, [selectedDate?.getTime(), min?.getTime(), max?.getTime()]); // eslint-disable-line react-hooks/exhaustive-deps\n\n useEffect(() => {\n if (selectedDate) {\n const isEnabled =\n isWithinRange(selectedDate, min, max) &&\n !isDateDisabled(selectedDate, disabledRulesRef.current);\n\n setFocusedDateDisabled(!isEnabled);\n }\n }, [selectedDate?.getTime(), min?.getTime(), max?.getTime(), disabledRules]); // eslint-disable-line react-hooks/exhaustive-deps\n\n const handleViewDateUpdate = useCallback(\n // eslint-disable-next-line react-hooks/preserve-manual-memoization\n ({ month, year }: { month?: number; year?: number }) => {\n if (month !== undefined) setViewMonth(month);\n if (year !== undefined) setViewYear(year);\n },\n [],\n );\n\n const switchToDays = useCallback(() => setMode('day'), []);\n const switchToMonths = useCallback(() => setMode('month'), []);\n const switchToYears = useCallback(() => setMode('year'), []);\n\n const handleSelectedDateUpdate = useCallback(\n // eslint-disable-next-line react-hooks/preserve-manual-memoization\n (date: Date) => {\n const isEnabled =\n isWithinRange(date, min, max) && !isDateDisabled(date, disabledRulesRef.current);\n setFocusedDateDisabled(!isEnabled);\n onChange(date, { isEnabled });\n if (isEnabled && onSelect) {\n onSelect(date);\n }\n },\n [min, max, onChange, onSelect],\n );\n\n const adjustDate = useCallback(\n // eslint-disable-next-line react-hooks/preserve-manual-memoization\n (daysToAdd: number, monthsToAdd: number, yearsToAdd: number) => {\n let date: Date | null;\n if (selectedDate) {\n date = new Date(\n mode === 'year' ? selectedDate.getFullYear() + yearsToAdd : selectedDate.getFullYear(),\n mode === 'month' ? selectedDate.getMonth() + monthsToAdd : selectedDate.getMonth(),\n mode === 'day' ? selectedDate.getDate() + daysToAdd : selectedDate.getDate(),\n );\n } else {\n date = getStartOfDay(new Date());\n }\n date &&= moveToWithinRange(date, min, max);\n if (date?.getTime() !== selectedDate?.getTime()) {\n const isEnabled = date\n ? isWithinRange(date, min, max) && !isDateDisabled(date, disabledRulesRef.current)\n : true;\n setFocusedDateDisabled(!isEnabled);\n onChange(date, { isEnabled });\n }\n },\n [selectedDate, min, max, mode, onChange],\n );\n\n const handleKeyDown = useCallback(\n (event: KeyboardEvent<HTMLDivElement>) => {\n switch (event.key) {\n case 'ArrowLeft':\n adjustDate(-1, -1, -1);\n event.preventDefault();\n break;\n case 'ArrowUp':\n adjustDate(-7, -4, -4);\n event.preventDefault();\n break;\n case 'ArrowRight':\n adjustDate(1, 1, 1);\n event.preventDefault();\n break;\n case 'ArrowDown':\n adjustDate(7, 4, 4);\n event.preventDefault();\n break;\n default:\n break;\n }\n },\n [adjustDate],\n );\n\n const showPrompt =\n mode === 'day' &&\n !!disabledRules?.reason &&\n hasDisabledDatesInMonth(viewMonth, viewYear, disabledRules, min, max);\n\n return (\n // eslint-disable-next-line jsx-a11y/no-static-element-interactions\n <div onKeyDown={handleKeyDown}>\n {mode === 'day' && (\n <DayCalendar\n selectedDate={selectedDate}\n min={min}\n max={max}\n viewMonth={viewMonth}\n viewYear={viewYear}\n monthFormat={monthFormat}\n disabledRules={disabledRules}\n disabledReasonId={showPrompt ? disabledReasonId : undefined}\n onSelect={handleSelectedDateUpdate}\n onLabelClick={switchToYears}\n onViewDateUpdate={handleViewDateUpdate}\n />\n )}\n {mode === 'month' && (\n <MonthCalendar\n selectedDate={selectedDate}\n min={min}\n max={max}\n viewYear={viewYear}\n {...(placeholder != null && { placeholder })}\n onSelect={switchToDays}\n onLabelClick={switchToYears}\n onViewDateUpdate={handleViewDateUpdate}\n />\n )}\n {mode === 'year' && (\n <YearCalendar\n selectedDate={selectedDate}\n min={min}\n max={max}\n viewYear={viewYear}\n {...(placeholder != null && { placeholder })}\n onSelect={switchToMonths}\n onViewDateUpdate={handleViewDateUpdate}\n />\n )}\n {showPrompt && (\n <InlinePrompt\n sentiment={focusedDateDisabled ? 'negative' : 'neutral'}\n width=\"full\"\n id={disabledReasonId}\n >\n {disabledRules.reason}\n </InlinePrompt>\n )}\n </div>\n );\n};\n\nexport default Calendar;\n"],"names":["Calendar","value","min","minProp","max","maxProp","monthFormat","MonthFormat","LONG","placeholder","disabledRules","onChange","onSelect","selectedDate","getStartOfDay","disabledReasonId","useId","focusedDateDisabled","setFocusedDateDisabled","useState","disabledRulesRef","useRef","useEffect","current","isWithinRange","clamped","moveToWithinRange","isEnabled","isDateDisabled","getTime","dateView","returnDateView","viewMonth","setViewMonth","getMonth","viewYear","setViewYear","getFullYear","mode","setMode","view","handleViewDateUpdate","useCallback","month","year","undefined","switchToDays","switchToMonths","switchToYears","handleSelectedDateUpdate","date","adjustDate","daysToAdd","monthsToAdd","yearsToAdd","Date","getDate","handleKeyDown","event","key","preventDefault","showPrompt","reason","hasDisabledDatesInMonth","_jsxs","onKeyDown","children","_jsx","DayCalendar","onLabelClick","onViewDateUpdate","MonthCalendar","YearCalendar","InlinePrompt","sentiment","width","id"],"mappings":"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"}
|
|
@@ -44,10 +44,15 @@ const TableLink = ({
|
|
|
44
44
|
}
|
|
45
45
|
return label;
|
|
46
46
|
};
|
|
47
|
-
return /*#__PURE__*/jsxRuntime.jsx(SentimentSurface.default
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
47
|
+
return /*#__PURE__*/jsxRuntime.jsx(SentimentSurface.default
|
|
48
|
+
// @ts-expect-error - Generic forwardRef limitation in SentimentSurface
|
|
49
|
+
, {
|
|
50
|
+
ref: buttonRef,
|
|
51
|
+
as: "button",
|
|
52
|
+
"aria-describedby": disabled ? disabledReasonId : undefined,
|
|
53
|
+
"aria-disabled": disabled || undefined,
|
|
54
|
+
"aria-label": calculateAriaLabel(),
|
|
55
|
+
"aria-pressed": active,
|
|
51
56
|
className: clsx.clsx(`wds-Calendar__option--${type}`, `tw-date-lookup-${type}-option np-text-body-default-bold`, {
|
|
52
57
|
active: !!active
|
|
53
58
|
}, {
|
|
@@ -55,16 +60,11 @@ const TableLink = ({
|
|
|
55
60
|
}, {
|
|
56
61
|
disabled: !!disabled
|
|
57
62
|
}),
|
|
58
|
-
|
|
59
|
-
|
|
63
|
+
hasBaseStyles: false,
|
|
64
|
+
sentiment: disabled ? 'negative' : 'neutral',
|
|
60
65
|
tabIndex: autofocus ? 0 : -1,
|
|
61
|
-
"
|
|
62
|
-
"aria-pressed": active,
|
|
66
|
+
type: "button",
|
|
63
67
|
onClick: onCalendarClick,
|
|
64
|
-
as: "button"
|
|
65
|
-
// @ts-expect-error - Generic forwardRef limitation in SentimentSurface
|
|
66
|
-
,
|
|
67
|
-
ref: buttonRef,
|
|
68
68
|
children: title || item
|
|
69
69
|
});
|
|
70
70
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TableLink.js","sources":["../../../src/Calendar/TableLink/TableLink.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useEffect, useRef } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport messages from '../Calendar.messages';\nimport SentimentSurface from '../../SentimentSurface';\n\ninterface TableLinkProps {\n item: number;\n type: 'day' | 'month' | 'year';\n title?: string;\n longTitle?: string;\n active: boolean;\n disabled: boolean;\n today: boolean;\n autofocus?: boolean;\n disabledReasonId?: string;\n onClick: (item: number) => void;\n}\n\nconst TableLink = ({\n item,\n type,\n title,\n longTitle,\n active,\n disabled,\n today,\n autofocus,\n disabledReasonId,\n onClick,\n}: TableLinkProps) => {\n const buttonRef = useRef<HTMLButtonElement>(null);\n const intl = useIntl();\n\n useEffect(() => {\n if (autofocus) {\n setTimeout(() => {\n buttonRef.current?.focus();\n }, 0);\n }\n }, [autofocus]);\n\n const onCalendarClick = (event: React.MouseEvent) => {\n event.preventDefault();\n onClick(item);\n };\n\n const calculateAriaLabel = () => {\n let label = longTitle || title || '';\n if (active) {\n label += `, ${intl.formatMessage(messages.selected)} ${intl.formatMessage(messages[type])}`;\n }\n if (disabled) {\n label += `, ${intl.formatMessage(messages.notAvailable)}`;\n }\n return label;\n };\n\n return (\n <SentimentSurface\n
|
|
1
|
+
{"version":3,"file":"TableLink.js","sources":["../../../src/Calendar/TableLink/TableLink.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useEffect, useRef } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport messages from '../Calendar.messages';\nimport SentimentSurface from '../../SentimentSurface';\n\ninterface TableLinkProps {\n item: number;\n type: 'day' | 'month' | 'year';\n title?: string;\n longTitle?: string;\n active: boolean;\n disabled: boolean;\n today: boolean;\n autofocus?: boolean;\n disabledReasonId?: string;\n onClick: (item: number) => void;\n}\n\nconst TableLink = ({\n item,\n type,\n title,\n longTitle,\n active,\n disabled,\n today,\n autofocus,\n disabledReasonId,\n onClick,\n}: TableLinkProps) => {\n const buttonRef = useRef<HTMLButtonElement>(null);\n const intl = useIntl();\n\n useEffect(() => {\n if (autofocus) {\n setTimeout(() => {\n buttonRef.current?.focus();\n }, 0);\n }\n }, [autofocus]);\n\n const onCalendarClick = (event: React.MouseEvent) => {\n event.preventDefault();\n onClick(item);\n };\n\n const calculateAriaLabel = () => {\n let label = longTitle || title || '';\n if (active) {\n label += `, ${intl.formatMessage(messages.selected)} ${intl.formatMessage(messages[type])}`;\n }\n if (disabled) {\n label += `, ${intl.formatMessage(messages.notAvailable)}`;\n }\n return label;\n };\n\n return (\n <SentimentSurface\n // @ts-expect-error - Generic forwardRef limitation in SentimentSurface\n ref={buttonRef}\n as=\"button\"\n aria-describedby={disabled ? disabledReasonId : undefined}\n aria-disabled={disabled || undefined}\n aria-label={calculateAriaLabel()}\n aria-pressed={active}\n className={clsx(\n `wds-Calendar__option--${type}`,\n `tw-date-lookup-${type}-option np-text-body-default-bold`,\n { active: !!active },\n { today: !!today },\n { disabled: !!disabled },\n )}\n hasBaseStyles={false}\n sentiment={disabled ? 'negative' : 'neutral'}\n tabIndex={autofocus ? 0 : -1}\n type=\"button\"\n onClick={onCalendarClick}\n >\n {title || item}\n </SentimentSurface>\n );\n};\n\nexport default TableLink;\n"],"names":["TableLink","item","type","title","longTitle","active","disabled","today","autofocus","disabledReasonId","onClick","buttonRef","useRef","intl","useIntl","useEffect","setTimeout","current","focus","onCalendarClick","event","preventDefault","calculateAriaLabel","label","formatMessage","messages","selected","notAvailable","_jsx","SentimentSurface","ref","as","undefined","className","clsx","hasBaseStyles","sentiment","tabIndex","children"],"mappings":";;;;;;;;;;;AAoBA,MAAMA,SAAS,GAAGA,CAAC;EACjBC,IAAI;EACJC,IAAI;EACJC,KAAK;EACLC,SAAS;EACTC,MAAM;EACNC,QAAQ;EACRC,KAAK;EACLC,SAAS;EACTC,gBAAgB;AAChBC,EAAAA;AAAO,CACQ,KAAI;AACnB,EAAA,MAAMC,SAAS,GAAGC,YAAM,CAAoB,IAAI,CAAC;AACjD,EAAA,MAAMC,IAAI,GAAGC,iBAAO,EAAE;AAEtBC,EAAAA,eAAS,CAAC,MAAK;AACb,IAAA,IAAIP,SAAS,EAAE;AACbQ,MAAAA,UAAU,CAAC,MAAK;AACdL,QAAAA,SAAS,CAACM,OAAO,EAAEC,KAAK,EAAE;MAC5B,CAAC,EAAE,CAAC,CAAC;AACP,IAAA;AACF,EAAA,CAAC,EAAE,CAACV,SAAS,CAAC,CAAC;EAEf,MAAMW,eAAe,GAAIC,KAAuB,IAAI;IAClDA,KAAK,CAACC,cAAc,EAAE;IACtBX,OAAO,CAACT,IAAI,CAAC;EACf,CAAC;EAED,MAAMqB,kBAAkB,GAAGA,MAAK;AAC9B,IAAA,IAAIC,KAAK,GAAGnB,SAAS,IAAID,KAAK,IAAI,EAAE;AACpC,IAAA,IAAIE,MAAM,EAAE;MACVkB,KAAK,IAAI,KAAKV,IAAI,CAACW,aAAa,CAACC,yBAAQ,CAACC,QAAQ,CAAC,IAAIb,IAAI,CAACW,aAAa,CAACC,yBAAQ,CAACvB,IAAI,CAAC,CAAC,CAAA,CAAE;AAC7F,IAAA;AACA,IAAA,IAAII,QAAQ,EAAE;MACZiB,KAAK,IAAI,CAAA,EAAA,EAAKV,IAAI,CAACW,aAAa,CAACC,yBAAQ,CAACE,YAAY,CAAC,CAAA,CAAE;AAC3D,IAAA;AACA,IAAA,OAAOJ,KAAK;EACd,CAAC;AAED,EAAA,oBACEK,cAAA,CAACC;AACC;AAAA,IAAA;AACAC,IAAAA,GAAG,EAAEnB,SAAU;AACfoB,IAAAA,EAAE,EAAC,QAAQ;AACX,IAAA,kBAAA,EAAkBzB,QAAQ,GAAGG,gBAAgB,GAAGuB,SAAU;IAC1D,eAAA,EAAe1B,QAAQ,IAAI0B,SAAU;IACrC,YAAA,EAAYV,kBAAkB,EAAG;AACjC,IAAA,cAAA,EAAcjB,MAAO;IACrB4B,SAAS,EAAEC,SAAI,CACb,CAAA,sBAAA,EAAyBhC,IAAI,EAAE,EAC/B,CAAA,eAAA,EAAkBA,IAAI,CAAA,iCAAA,CAAmC,EACzD;MAAEG,MAAM,EAAE,CAAC,CAACA;AAAM,KAAE,EACpB;MAAEE,KAAK,EAAE,CAAC,CAACA;AAAK,KAAE,EAClB;MAAED,QAAQ,EAAE,CAAC,CAACA;AAAQ,KAAE,CACxB;AACF6B,IAAAA,aAAa,EAAE,KAAM;AACrBC,IAAAA,SAAS,EAAE9B,QAAQ,GAAG,UAAU,GAAG,SAAU;AAC7C+B,IAAAA,QAAQ,EAAE7B,SAAS,GAAG,CAAC,GAAG,EAAG;AAC7BN,IAAAA,IAAI,EAAC,QAAQ;AACbQ,IAAAA,OAAO,EAAES,eAAgB;IAAAmB,QAAA,EAExBnC,KAAK,IAAIF;AAAI,GACE,CAAC;AAEvB;;;;"}
|
|
@@ -40,10 +40,15 @@ const TableLink = ({
|
|
|
40
40
|
}
|
|
41
41
|
return label;
|
|
42
42
|
};
|
|
43
|
-
return /*#__PURE__*/jsx(SentimentSurface
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
43
|
+
return /*#__PURE__*/jsx(SentimentSurface
|
|
44
|
+
// @ts-expect-error - Generic forwardRef limitation in SentimentSurface
|
|
45
|
+
, {
|
|
46
|
+
ref: buttonRef,
|
|
47
|
+
as: "button",
|
|
48
|
+
"aria-describedby": disabled ? disabledReasonId : undefined,
|
|
49
|
+
"aria-disabled": disabled || undefined,
|
|
50
|
+
"aria-label": calculateAriaLabel(),
|
|
51
|
+
"aria-pressed": active,
|
|
47
52
|
className: clsx(`wds-Calendar__option--${type}`, `tw-date-lookup-${type}-option np-text-body-default-bold`, {
|
|
48
53
|
active: !!active
|
|
49
54
|
}, {
|
|
@@ -51,16 +56,11 @@ const TableLink = ({
|
|
|
51
56
|
}, {
|
|
52
57
|
disabled: !!disabled
|
|
53
58
|
}),
|
|
54
|
-
|
|
55
|
-
|
|
59
|
+
hasBaseStyles: false,
|
|
60
|
+
sentiment: disabled ? 'negative' : 'neutral',
|
|
56
61
|
tabIndex: autofocus ? 0 : -1,
|
|
57
|
-
"
|
|
58
|
-
"aria-pressed": active,
|
|
62
|
+
type: "button",
|
|
59
63
|
onClick: onCalendarClick,
|
|
60
|
-
as: "button"
|
|
61
|
-
// @ts-expect-error - Generic forwardRef limitation in SentimentSurface
|
|
62
|
-
,
|
|
63
|
-
ref: buttonRef,
|
|
64
64
|
children: title || item
|
|
65
65
|
});
|
|
66
66
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TableLink.mjs","sources":["../../../src/Calendar/TableLink/TableLink.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useEffect, useRef } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport messages from '../Calendar.messages';\nimport SentimentSurface from '../../SentimentSurface';\n\ninterface TableLinkProps {\n item: number;\n type: 'day' | 'month' | 'year';\n title?: string;\n longTitle?: string;\n active: boolean;\n disabled: boolean;\n today: boolean;\n autofocus?: boolean;\n disabledReasonId?: string;\n onClick: (item: number) => void;\n}\n\nconst TableLink = ({\n item,\n type,\n title,\n longTitle,\n active,\n disabled,\n today,\n autofocus,\n disabledReasonId,\n onClick,\n}: TableLinkProps) => {\n const buttonRef = useRef<HTMLButtonElement>(null);\n const intl = useIntl();\n\n useEffect(() => {\n if (autofocus) {\n setTimeout(() => {\n buttonRef.current?.focus();\n }, 0);\n }\n }, [autofocus]);\n\n const onCalendarClick = (event: React.MouseEvent) => {\n event.preventDefault();\n onClick(item);\n };\n\n const calculateAriaLabel = () => {\n let label = longTitle || title || '';\n if (active) {\n label += `, ${intl.formatMessage(messages.selected)} ${intl.formatMessage(messages[type])}`;\n }\n if (disabled) {\n label += `, ${intl.formatMessage(messages.notAvailable)}`;\n }\n return label;\n };\n\n return (\n <SentimentSurface\n
|
|
1
|
+
{"version":3,"file":"TableLink.mjs","sources":["../../../src/Calendar/TableLink/TableLink.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useEffect, useRef } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport messages from '../Calendar.messages';\nimport SentimentSurface from '../../SentimentSurface';\n\ninterface TableLinkProps {\n item: number;\n type: 'day' | 'month' | 'year';\n title?: string;\n longTitle?: string;\n active: boolean;\n disabled: boolean;\n today: boolean;\n autofocus?: boolean;\n disabledReasonId?: string;\n onClick: (item: number) => void;\n}\n\nconst TableLink = ({\n item,\n type,\n title,\n longTitle,\n active,\n disabled,\n today,\n autofocus,\n disabledReasonId,\n onClick,\n}: TableLinkProps) => {\n const buttonRef = useRef<HTMLButtonElement>(null);\n const intl = useIntl();\n\n useEffect(() => {\n if (autofocus) {\n setTimeout(() => {\n buttonRef.current?.focus();\n }, 0);\n }\n }, [autofocus]);\n\n const onCalendarClick = (event: React.MouseEvent) => {\n event.preventDefault();\n onClick(item);\n };\n\n const calculateAriaLabel = () => {\n let label = longTitle || title || '';\n if (active) {\n label += `, ${intl.formatMessage(messages.selected)} ${intl.formatMessage(messages[type])}`;\n }\n if (disabled) {\n label += `, ${intl.formatMessage(messages.notAvailable)}`;\n }\n return label;\n };\n\n return (\n <SentimentSurface\n // @ts-expect-error - Generic forwardRef limitation in SentimentSurface\n ref={buttonRef}\n as=\"button\"\n aria-describedby={disabled ? disabledReasonId : undefined}\n aria-disabled={disabled || undefined}\n aria-label={calculateAriaLabel()}\n aria-pressed={active}\n className={clsx(\n `wds-Calendar__option--${type}`,\n `tw-date-lookup-${type}-option np-text-body-default-bold`,\n { active: !!active },\n { today: !!today },\n { disabled: !!disabled },\n )}\n hasBaseStyles={false}\n sentiment={disabled ? 'negative' : 'neutral'}\n tabIndex={autofocus ? 0 : -1}\n type=\"button\"\n onClick={onCalendarClick}\n >\n {title || item}\n </SentimentSurface>\n );\n};\n\nexport default TableLink;\n"],"names":["TableLink","item","type","title","longTitle","active","disabled","today","autofocus","disabledReasonId","onClick","buttonRef","useRef","intl","useIntl","useEffect","setTimeout","current","focus","onCalendarClick","event","preventDefault","calculateAriaLabel","label","formatMessage","messages","selected","notAvailable","_jsx","SentimentSurface","ref","as","undefined","className","clsx","hasBaseStyles","sentiment","tabIndex","children"],"mappings":";;;;;;;AAoBA,MAAMA,SAAS,GAAGA,CAAC;EACjBC,IAAI;EACJC,IAAI;EACJC,KAAK;EACLC,SAAS;EACTC,MAAM;EACNC,QAAQ;EACRC,KAAK;EACLC,SAAS;EACTC,gBAAgB;AAChBC,EAAAA;AAAO,CACQ,KAAI;AACnB,EAAA,MAAMC,SAAS,GAAGC,MAAM,CAAoB,IAAI,CAAC;AACjD,EAAA,MAAMC,IAAI,GAAGC,OAAO,EAAE;AAEtBC,EAAAA,SAAS,CAAC,MAAK;AACb,IAAA,IAAIP,SAAS,EAAE;AACbQ,MAAAA,UAAU,CAAC,MAAK;AACdL,QAAAA,SAAS,CAACM,OAAO,EAAEC,KAAK,EAAE;MAC5B,CAAC,EAAE,CAAC,CAAC;AACP,IAAA;AACF,EAAA,CAAC,EAAE,CAACV,SAAS,CAAC,CAAC;EAEf,MAAMW,eAAe,GAAIC,KAAuB,IAAI;IAClDA,KAAK,CAACC,cAAc,EAAE;IACtBX,OAAO,CAACT,IAAI,CAAC;EACf,CAAC;EAED,MAAMqB,kBAAkB,GAAGA,MAAK;AAC9B,IAAA,IAAIC,KAAK,GAAGnB,SAAS,IAAID,KAAK,IAAI,EAAE;AACpC,IAAA,IAAIE,MAAM,EAAE;MACVkB,KAAK,IAAI,KAAKV,IAAI,CAACW,aAAa,CAACC,QAAQ,CAACC,QAAQ,CAAC,IAAIb,IAAI,CAACW,aAAa,CAACC,QAAQ,CAACvB,IAAI,CAAC,CAAC,CAAA,CAAE;AAC7F,IAAA;AACA,IAAA,IAAII,QAAQ,EAAE;MACZiB,KAAK,IAAI,CAAA,EAAA,EAAKV,IAAI,CAACW,aAAa,CAACC,QAAQ,CAACE,YAAY,CAAC,CAAA,CAAE;AAC3D,IAAA;AACA,IAAA,OAAOJ,KAAK;EACd,CAAC;AAED,EAAA,oBACEK,GAAA,CAACC;AACC;AAAA,IAAA;AACAC,IAAAA,GAAG,EAAEnB,SAAU;AACfoB,IAAAA,EAAE,EAAC,QAAQ;AACX,IAAA,kBAAA,EAAkBzB,QAAQ,GAAGG,gBAAgB,GAAGuB,SAAU;IAC1D,eAAA,EAAe1B,QAAQ,IAAI0B,SAAU;IACrC,YAAA,EAAYV,kBAAkB,EAAG;AACjC,IAAA,cAAA,EAAcjB,MAAO;IACrB4B,SAAS,EAAEC,IAAI,CACb,CAAA,sBAAA,EAAyBhC,IAAI,EAAE,EAC/B,CAAA,eAAA,EAAkBA,IAAI,CAAA,iCAAA,CAAmC,EACzD;MAAEG,MAAM,EAAE,CAAC,CAACA;AAAM,KAAE,EACpB;MAAEE,KAAK,EAAE,CAAC,CAACA;AAAK,KAAE,EAClB;MAAED,QAAQ,EAAE,CAAC,CAACA;AAAQ,KAAE,CACxB;AACF6B,IAAAA,aAAa,EAAE,KAAM;AACrBC,IAAAA,SAAS,EAAE9B,QAAQ,GAAG,UAAU,GAAG,SAAU;AAC7C+B,IAAAA,QAAQ,EAAE7B,SAAS,GAAG,CAAC,GAAG,EAAG;AAC7BN,IAAAA,IAAI,EAAC,QAAQ;AACbQ,IAAAA,OAAO,EAAES,eAAgB;IAAAmB,QAAA,EAExBnC,KAAK,IAAIF;AAAI,GACE,CAAC;AAEvB;;;;"}
|
package/package.json
CHANGED
|
@@ -72,7 +72,7 @@ const Calendar = ({
|
|
|
72
72
|
const isEnabled =
|
|
73
73
|
isWithinRange(selectedDate, min, max) &&
|
|
74
74
|
!isDateDisabled(selectedDate, disabledRulesRef.current);
|
|
75
|
-
|
|
75
|
+
|
|
76
76
|
setFocusedDateDisabled(!isEnabled);
|
|
77
77
|
}
|
|
78
78
|
}, [selectedDate?.getTime(), min?.getTime(), max?.getTime(), disabledRules]); // eslint-disable-line react-hooks/exhaustive-deps
|
|
@@ -59,9 +59,13 @@ const TableLink = ({
|
|
|
59
59
|
|
|
60
60
|
return (
|
|
61
61
|
<SentimentSurface
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
62
|
+
// @ts-expect-error - Generic forwardRef limitation in SentimentSurface
|
|
63
|
+
ref={buttonRef}
|
|
64
|
+
as="button"
|
|
65
|
+
aria-describedby={disabled ? disabledReasonId : undefined}
|
|
66
|
+
aria-disabled={disabled || undefined}
|
|
67
|
+
aria-label={calculateAriaLabel()}
|
|
68
|
+
aria-pressed={active}
|
|
65
69
|
className={clsx(
|
|
66
70
|
`wds-Calendar__option--${type}`,
|
|
67
71
|
`tw-date-lookup-${type}-option np-text-body-default-bold`,
|
|
@@ -69,15 +73,11 @@ const TableLink = ({
|
|
|
69
73
|
{ today: !!today },
|
|
70
74
|
{ disabled: !!disabled },
|
|
71
75
|
)}
|
|
72
|
-
|
|
73
|
-
|
|
76
|
+
hasBaseStyles={false}
|
|
77
|
+
sentiment={disabled ? 'negative' : 'neutral'}
|
|
74
78
|
tabIndex={autofocus ? 0 : -1}
|
|
75
|
-
|
|
76
|
-
aria-pressed={active}
|
|
79
|
+
type="button"
|
|
77
80
|
onClick={onCalendarClick}
|
|
78
|
-
as="button"
|
|
79
|
-
// @ts-expect-error - Generic forwardRef limitation in SentimentSurface
|
|
80
|
-
ref={buttonRef}
|
|
81
81
|
>
|
|
82
82
|
{title || item}
|
|
83
83
|
</SentimentSurface>
|
|
@@ -41,15 +41,16 @@ Calendar is a fully keyboard-accessible date picker grid. All dates — includin
|
|
|
41
41
|
<td>Move focus down by one week (7 days) / 4 months / 4 years</td>
|
|
42
42
|
</tr>
|
|
43
43
|
<tr>
|
|
44
|
-
<td
|
|
44
|
+
<td>
|
|
45
|
+
<code>Enter</code> / <code>Space</code>
|
|
46
|
+
</td>
|
|
45
47
|
<td>Select the focused date (if enabled)</td>
|
|
46
48
|
</tr>
|
|
47
49
|
</tbody>
|
|
48
50
|
</table>
|
|
49
51
|
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
enabled state.
|
|
52
|
+
<br /> Navigation **does not skip** disabled dates. Users can arrow through every date in the grid
|
|
53
|
+
regardless of its enabled state.
|
|
53
54
|
|
|
54
55
|
## Screen Reader Announcements
|
|
55
56
|
|
|
@@ -31,12 +31,17 @@ thePast.setUTCDate(epoch.getUTCDate() - 10);
|
|
|
31
31
|
|
|
32
32
|
export const Sandbox = createSandboxStory({
|
|
33
33
|
code: `const App = () => {
|
|
34
|
-
const [value, setValue] = React.useState(new Date(
|
|
34
|
+
const [value, setValue] = React.useState(new Date(2024, 5, 18));
|
|
35
35
|
|
|
36
36
|
return (
|
|
37
37
|
<Calendar
|
|
38
38
|
monthFormat="long"
|
|
39
39
|
value={value}
|
|
40
|
+
disabledRules={{
|
|
41
|
+
weekdays: ['sat', 'sun'],
|
|
42
|
+
dates: [new Date(2024, 5, 19)],
|
|
43
|
+
reason: 'Weekends and holidays are unavailable.',
|
|
44
|
+
}}
|
|
40
45
|
onChange={(date) => setValue(date)}
|
|
41
46
|
/>
|
|
42
47
|
);
|
|
@@ -35,7 +35,7 @@ thePast.setUTCDate(epoch.getUTCDate() - 10);
|
|
|
35
35
|
|
|
36
36
|
export const Sandbox = createSandboxStory({
|
|
37
37
|
code: `const App = () => {
|
|
38
|
-
const [value, setValue] = React.useState(new Date(
|
|
38
|
+
const [value, setValue] = React.useState(new Date(2024, 5, 14));
|
|
39
39
|
|
|
40
40
|
return (
|
|
41
41
|
<DateLookup
|
|
@@ -45,6 +45,11 @@ export const Sandbox = createSandboxStory({
|
|
|
45
45
|
placeholder="Choose date"
|
|
46
46
|
clearable
|
|
47
47
|
value={value}
|
|
48
|
+
disabledRules={{
|
|
49
|
+
weekdays: ['sat', 'sun'],
|
|
50
|
+
dates: [new Date(2024, 5, 19)],
|
|
51
|
+
reason: 'Weekends and holidays are unavailable.',
|
|
52
|
+
}}
|
|
48
53
|
onChange={(date) => setValue(date)}
|
|
49
54
|
/>
|
|
50
55
|
);
|