@codecademy/gamut
72.2.272.2.3-alpha.303f64.0
dist/DatePicker/DatePicker.js~
dist/DatePicker/DatePicker.jsModified+6−3
Index: package/dist/DatePicker/DatePicker.js
===================================================================
--- package/dist/DatePicker/DatePicker.js
+++ package/dist/DatePicker/DatePicker.js
@@ -24,8 +24,9 @@
const [isCalendarOpen, setIsCalendarOpen] = useState(false);
const [focusGridSignal, setFocusGridSignal] = useState(false);
const [gridFocusRequested, setGridFocusRequested] = useState(false);
const [activeRangePart, setActiveRangePart] = useState(null);
+ const [hasError, setHasError] = useState(false);
const inputRef = useRef(null);
const dialogId = useId();
const calendarDialogId = `datepicker-dialog-${dialogId.replace(/:/g, '')}`;
const isRtl = useElementDir() === 'rtl';
@@ -75,9 +76,11 @@
closeCalendar,
locale: resolvedLocale,
disableDate,
translations,
- quickActions: quickActions === null ? [] : resolvedQuickActions
+ quickActions: quickActions === null ? [] : resolvedQuickActions,
+ hasError,
+ setHasError
};
return mode === 'range' ? {
...base,
mode: 'range',
@@ -94,9 +97,9 @@
mode: 'single',
selectedDate: props.selectedDate,
onSelection: props.onSelected
};
- }, [translationsProp, quickActions, mode, resolvedLocale, isCalendarOpen, openCalendar, focusCalendar, focusGridSignal, gridFocusRequested, clearGridFocusRequest, closeCalendar, disableDate, props, activeRangePart]);
+ }, [translationsProp, quickActions, mode, resolvedLocale, isCalendarOpen, openCalendar, focusCalendar, focusGridSignal, gridFocusRequested, clearGridFocusRequest, closeCalendar, disableDate, props, activeRangePart, hasError, setHasError]);
const content = children !== undefined ? children : /*#__PURE__*/_jsxs(_Fragment, {
children: [/*#__PURE__*/_jsx(FlexBox, {
gap: inputSize === 'small' ? 4 : 8,
ref: inputRef,
@@ -129,9 +132,9 @@
invertAxis: "x",
isOpen: isCalendarOpen,
targetRef: inputRef,
x: -20,
- y: -16,
+ y: isCalendarOpen && hasError ? 0 : -16,
onRequestClose: closeCalendar,
children: /*#__PURE__*/_jsx("div", {
"aria-label": contextValue.translations.calendarDialogAriaLabel,
id: calendarDialogId,