@economic/taco 2.47.0 → 2.48.0

Sign up to get free protection for your applications and to get access to all the features.
@@ -28,6 +28,5 @@ export declare type CalendarProps = Omit<React.HTMLAttributes<HTMLDivElement>, '
28
28
  onChange: (date: Date, event?: React.MouseEvent<Element>) => void;
29
29
  value?: Date;
30
30
  disabledDays?: Matcher[];
31
- visibleMonth?: Date;
32
31
  };
33
32
  export declare const Calendar: (props: CalendarProps) => JSX.Element;
@@ -93,23 +93,22 @@ const TodayButton = ({
93
93
  }, texts.calendar.actions.today);
94
94
  };
95
95
  const Calendar = props => {
96
- var _ref;
97
96
  const {
98
97
  onChange: handleChange,
99
98
  value,
100
99
  disabledDays,
101
- visibleMonth,
102
100
  ...otherProps
103
101
  } = props;
104
- const [internalVisibleMonth, setInternalVisibleMonth] = useState((_ref = visibleMonth !== null && visibleMonth !== void 0 ? visibleMonth : value) !== null && _ref !== void 0 ? _ref : new Date());
102
+ const [visibleMonth, setVisibleMonth] = useState(value !== null && value !== void 0 ? value : new Date());
105
103
  const {
106
104
  texts
107
105
  } = useLocalization();
108
106
  useEffect(() => {
109
- if (visibleMonth && visibleMonth !== internalVisibleMonth) {
110
- setInternalVisibleMonth(visibleMonth);
107
+ if (visibleMonth !== value) {
108
+ setVisibleMonth(value !== null && value !== void 0 ? value : new Date());
111
109
  }
112
- }, [visibleMonth]);
110
+ // visibleMonth in deps array breaking month switching logic. It should not be in deps array.
111
+ }, [value]);
113
112
  const handleDayClick = (date, modifiers, event) => {
114
113
  if (modifiers.outside || modifiers.disabled) {
115
114
  return;
@@ -123,13 +122,13 @@ const Calendar = props => {
123
122
  className: className,
124
123
  captionLayout: "dropdown-buttons",
125
124
  weekStartsOn: 1,
126
- month: internalVisibleMonth,
125
+ month: visibleMonth,
127
126
  numberOfMonths: 1,
128
127
  components: {
129
- Caption: props => (/*#__PURE__*/createElement(Navbar, Object.assign({}, props, {
130
- onMonthChange: setInternalVisibleMonth,
131
- value: internalVisibleMonth
132
- }))),
128
+ Caption: props => /*#__PURE__*/createElement(Navbar, Object.assign({}, props, {
129
+ onMonthChange: setVisibleMonth,
130
+ value: visibleMonth
131
+ })),
133
132
  Footer: () => (/*#__PURE__*/createElement("tfoot", null, /*#__PURE__*/createElement("tr", null, /*#__PURE__*/createElement("td", {
134
133
  colSpan: 7,
135
134
  className: "text-center"
@@ -1 +1 @@
1
- {"version":3,"file":"Calendar.js","sources":["../../../../../../../src/components/Calendar/Calendar.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport { Button, CaptionProps, DayClickEventHandler, DayPicker, Matcher } from 'react-day-picker';\nimport { useLocalization } from '../Provider/Localization';\nimport { IconButton } from '../IconButton/IconButton';\nimport { Tooltip } from '../Tooltip/Tooltip';\nimport './Calendar.css';\n\nexport type CalendarTextsActions = {\n /** Aria-label for previous month action button */\n previousMonth: string;\n /** Aria-label for next month action button */\n nextMonth: string;\n /** Aria-label for previous year action button */\n previousYear: string;\n /** Aria-label for next year action button */\n nextYear: string;\n /** Text displayed within today action button */\n today: string;\n};\n\nexport type CalendarTexts = {\n /** Text and aria-label for action buttons in Calendar */\n actions: CalendarTextsActions;\n /** Text abbreviation for months in Calendar's header, starting with January */\n months: string[];\n /** Text abbreviation for days in Calendar's header, starting with Sunday */\n weekdaysShort: string[];\n /** Text for days in Calendar's header, starting with Sunday */\n weekdays: string[];\n};\n\n/** @internal */\ntype CustomNavbarElementProps = {\n onMonthChange: (month: Date) => void;\n value?: Date;\n};\n\nconst thisYear = new Date().getFullYear();\nconst years: number[] = [];\n\nfor (let i = thisYear - 50; i <= thisYear + 10; i += 1) {\n years.push(i);\n}\n\nconst Navbar = React.memo(({ onMonthChange, value = new Date() }: CustomNavbarElementProps): JSX.Element => {\n const {\n texts: {\n calendar: { actions, months },\n },\n } = useLocalization();\n\n const handleChange = (event: React.ChangeEvent<HTMLSelectElement>) => {\n const { year, month } = event.target.form as HTMLFormElement;\n onMonthChange(new Date(year.value, month.value));\n };\n\n const onNextClick = () => {\n onMonthChange(new Date(value.getFullYear(), value.getMonth() + 1, value.getDay()));\n };\n\n const onPreviousClick = () => {\n onMonthChange(new Date(value.getFullYear(), value.getMonth() - 1, value.getDay()));\n };\n\n return (\n <div className=\"mb-3 flex items-center justify-between\">\n <form className=\"inline-flex space-x-1\">\n <select className=\"h-8 px-2\" name=\"month\" onChange={handleChange} value={value.getMonth()}>\n {months.map((month, i) => (\n <option key={month} value={i}>\n {month}\n </option>\n ))}\n </select>\n <select className=\"h-8 px-2\" name=\"year\" onChange={handleChange} value={value.getFullYear()}>\n {years.map(year => (\n <option key={year} value={year}>\n {String(year)}\n </option>\n ))}\n </select>\n </form>\n <div>\n <Tooltip title={actions.previousMonth}>\n <IconButton\n appearance=\"discrete\"\n icon=\"chevron-left\"\n aria-label={actions.previousMonth}\n onClick={onPreviousClick}\n rounded\n />\n </Tooltip>\n <Tooltip title={actions.nextMonth}>\n <IconButton\n appearance=\"discrete\"\n icon=\"chevron-right\"\n aria-label={actions.nextMonth}\n onClick={onNextClick}\n rounded\n />\n </Tooltip>\n </div>\n </div>\n );\n});\n\nexport type CalendarProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'value'> & {\n /** Handler called when a day is clicked in calendar */\n onChange: (date: Date, event?: React.MouseEvent<Element>) => void;\n value?: Date;\n disabledDays?: Matcher[];\n visibleMonth?: Date;\n};\n\nconst TodayButton = ({ handleChange }: { handleChange: (month: Date) => void }) => {\n const { texts } = useLocalization();\n\n const handleCalendarClickToday = (): void => {\n const today = new Date();\n\n // set to midday to avoid UTC offset causing dates to be mismatched server side\n today.setHours(12);\n today.setMinutes(0);\n today.setSeconds(0);\n\n handleChange(today);\n };\n return (\n <Button\n className=\"cursor-pointer border-none bg-transparent text-xs text-blue-500 hover:text-blue-300\"\n onClick={handleCalendarClickToday}>\n {texts.calendar.actions.today}\n </Button>\n );\n};\n\nexport const Calendar = (props: CalendarProps) => {\n const { onChange: handleChange, value, disabledDays, visibleMonth, ...otherProps } = props;\n const [internalVisibleMonth, setInternalVisibleMonth] = React.useState(visibleMonth ?? value ?? new Date());\n const { texts } = useLocalization();\n\n React.useEffect(() => {\n if (visibleMonth && visibleMonth !== internalVisibleMonth) {\n setInternalVisibleMonth(visibleMonth);\n }\n }, [visibleMonth]);\n\n const handleDayClick: DayClickEventHandler = (date, modifiers, event) => {\n if (modifiers.outside || modifiers.disabled) {\n return;\n }\n\n handleChange(date, event);\n };\n\n const className = cn('flex bg-white text-xs p-2', otherProps.className);\n\n return (\n <div data-taco=\"calendar\">\n <DayPicker\n className={className}\n captionLayout=\"dropdown-buttons\"\n weekStartsOn={1}\n month={internalVisibleMonth}\n numberOfMonths={1}\n components={{\n Caption: (props: CaptionProps) => (\n <Navbar {...props} onMonthChange={setInternalVisibleMonth} value={internalVisibleMonth} />\n ),\n Footer: () => (\n <tfoot>\n <tr>\n <td colSpan={7} className=\"text-center\">\n <TodayButton handleChange={handleChange} />\n </td>\n </tr>\n </tfoot>\n ),\n HeadRow: () => (\n <tr>\n {texts.calendar.weekdaysShort.map((weekday, index) => {\n const label = texts.calendar.weekdays && texts.calendar.weekdays[index];\n return (\n <th key={weekday} aria-label={label} className=\"rdp-head_cell\" title={label}>\n {weekday}\n </th>\n );\n })}\n </tr>\n ),\n }}\n onDayClick={handleDayClick}\n selected={value}\n disabled={disabledDays}\n />\n </div>\n );\n};\n"],"names":["thisYear","Date","getFullYear","years","i","push","Navbar","React","onMonthChange","value","texts","calendar","actions","months","useLocalization","handleChange","event","year","month","target","form","onNextClick","getMonth","getDay","onPreviousClick","className","name","onChange","map","key","String","Tooltip","title","previousMonth","IconButton","appearance","icon","onClick","rounded","nextMonth","TodayButton","handleCalendarClickToday","today","setHours","setMinutes","setSeconds","Button","Calendar","props","disabledDays","visibleMonth","otherProps","internalVisibleMonth","setInternalVisibleMonth","_ref","handleDayClick","date","modifiers","outside","disabled","cn","DayPicker","captionLayout","weekStartsOn","numberOfMonths","components","Caption","Footer","colSpan","HeadRow","weekdaysShort","weekday","index","label","weekdays","onDayClick","selected"],"mappings":"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"}
1
+ {"version":3,"file":"Calendar.js","sources":["../../../../../../../src/components/Calendar/Calendar.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport { Button, CaptionProps, DayClickEventHandler, DayPicker, Matcher } from 'react-day-picker';\nimport { useLocalization } from '../Provider/Localization';\nimport { IconButton } from '../IconButton/IconButton';\nimport { Tooltip } from '../Tooltip/Tooltip';\nimport './Calendar.css';\n\nexport type CalendarTextsActions = {\n /** Aria-label for previous month action button */\n previousMonth: string;\n /** Aria-label for next month action button */\n nextMonth: string;\n /** Aria-label for previous year action button */\n previousYear: string;\n /** Aria-label for next year action button */\n nextYear: string;\n /** Text displayed within today action button */\n today: string;\n};\n\nexport type CalendarTexts = {\n /** Text and aria-label for action buttons in Calendar */\n actions: CalendarTextsActions;\n /** Text abbreviation for months in Calendar's header, starting with January */\n months: string[];\n /** Text abbreviation for days in Calendar's header, starting with Sunday */\n weekdaysShort: string[];\n /** Text for days in Calendar's header, starting with Sunday */\n weekdays: string[];\n};\n\n/** @internal */\ntype CustomNavbarElementProps = {\n onMonthChange: (month: Date) => void;\n value?: Date;\n};\n\nconst thisYear = new Date().getFullYear();\nconst years: number[] = [];\n\nfor (let i = thisYear - 50; i <= thisYear + 10; i += 1) {\n years.push(i);\n}\n\nconst Navbar = React.memo(({ onMonthChange, value = new Date() }: CustomNavbarElementProps): JSX.Element => {\n const {\n texts: {\n calendar: { actions, months },\n },\n } = useLocalization();\n\n const handleChange = (event: React.ChangeEvent<HTMLSelectElement>) => {\n const { year, month } = event.target.form as HTMLFormElement;\n onMonthChange(new Date(year.value, month.value));\n };\n\n const onNextClick = () => {\n onMonthChange(new Date(value.getFullYear(), value.getMonth() + 1, value.getDay()));\n };\n\n const onPreviousClick = () => {\n onMonthChange(new Date(value.getFullYear(), value.getMonth() - 1, value.getDay()));\n };\n\n return (\n <div className=\"mb-3 flex items-center justify-between\">\n <form className=\"inline-flex space-x-1\">\n <select className=\"h-8 px-2\" name=\"month\" onChange={handleChange} value={value.getMonth()}>\n {months.map((month, i) => (\n <option key={month} value={i}>\n {month}\n </option>\n ))}\n </select>\n <select className=\"h-8 px-2\" name=\"year\" onChange={handleChange} value={value.getFullYear()}>\n {years.map(year => (\n <option key={year} value={year}>\n {String(year)}\n </option>\n ))}\n </select>\n </form>\n <div>\n <Tooltip title={actions.previousMonth}>\n <IconButton\n appearance=\"discrete\"\n icon=\"chevron-left\"\n aria-label={actions.previousMonth}\n onClick={onPreviousClick}\n rounded\n />\n </Tooltip>\n <Tooltip title={actions.nextMonth}>\n <IconButton\n appearance=\"discrete\"\n icon=\"chevron-right\"\n aria-label={actions.nextMonth}\n onClick={onNextClick}\n rounded\n />\n </Tooltip>\n </div>\n </div>\n );\n});\n\nexport type CalendarProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'value'> & {\n /** Handler called when a day is clicked in calendar */\n onChange: (date: Date, event?: React.MouseEvent<Element>) => void;\n value?: Date;\n disabledDays?: Matcher[];\n};\n\nconst TodayButton = ({ handleChange }: { handleChange: (month: Date) => void }) => {\n const { texts } = useLocalization();\n\n const handleCalendarClickToday = (): void => {\n const today = new Date();\n\n // set to midday to avoid UTC offset causing dates to be mismatched server side\n today.setHours(12);\n today.setMinutes(0);\n today.setSeconds(0);\n\n handleChange(today);\n };\n return (\n <Button\n className=\"cursor-pointer border-none bg-transparent text-xs text-blue-500 hover:text-blue-300\"\n onClick={handleCalendarClickToday}>\n {texts.calendar.actions.today}\n </Button>\n );\n};\n\nexport const Calendar = (props: CalendarProps) => {\n const { onChange: handleChange, value, disabledDays, ...otherProps } = props;\n const [visibleMonth, setVisibleMonth] = React.useState(value ?? new Date());\n const { texts } = useLocalization();\n\n React.useEffect(() => {\n if (visibleMonth !== value) {\n setVisibleMonth(value ?? new Date());\n }\n // visibleMonth in deps array breaking month switching logic. It should not be in deps array.\n }, [value]);\n\n const handleDayClick: DayClickEventHandler = (date, modifiers, event) => {\n if (modifiers.outside || modifiers.disabled) {\n return;\n }\n\n handleChange(date, event);\n };\n\n const className = cn('flex bg-white text-xs p-2', otherProps.className);\n\n return (\n <div data-taco=\"calendar\">\n <DayPicker\n className={className}\n captionLayout=\"dropdown-buttons\"\n weekStartsOn={1}\n month={visibleMonth}\n numberOfMonths={1}\n components={{\n Caption: (props: CaptionProps) => <Navbar {...props} onMonthChange={setVisibleMonth} value={visibleMonth} />,\n Footer: () => (\n <tfoot>\n <tr>\n <td colSpan={7} className=\"text-center\">\n <TodayButton handleChange={handleChange} />\n </td>\n </tr>\n </tfoot>\n ),\n HeadRow: () => (\n <tr>\n {texts.calendar.weekdaysShort.map((weekday, index) => {\n const label = texts.calendar.weekdays && texts.calendar.weekdays[index];\n return (\n <th key={weekday} aria-label={label} className=\"rdp-head_cell\" title={label}>\n {weekday}\n </th>\n );\n })}\n </tr>\n ),\n }}\n onDayClick={handleDayClick}\n selected={value}\n disabled={disabledDays}\n />\n </div>\n );\n};\n"],"names":["thisYear","Date","getFullYear","years","i","push","Navbar","React","onMonthChange","value","texts","calendar","actions","months","useLocalization","handleChange","event","year","month","target","form","onNextClick","getMonth","getDay","onPreviousClick","className","name","onChange","map","key","String","Tooltip","title","previousMonth","IconButton","appearance","icon","onClick","rounded","nextMonth","TodayButton","handleCalendarClickToday","today","setHours","setMinutes","setSeconds","Button","Calendar","props","disabledDays","otherProps","visibleMonth","setVisibleMonth","handleDayClick","date","modifiers","outside","disabled","cn","DayPicker","captionLayout","weekStartsOn","numberOfMonths","components","Caption","Footer","colSpan","HeadRow","weekdaysShort","weekday","index","label","weekdays","onDayClick","selected"],"mappings":"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"}
@@ -19,18 +19,14 @@ const useDatepicker = ({
19
19
  } = useLocalization();
20
20
  const [internalValue, setInternalValue] = useState((_format = format(value, formatting.date)) !== null && _format !== void 0 ? _format : '');
21
21
  const originalValueAsDate = parse(value);
22
- // Track the current view date (month/year) in the calendar
23
- const [calendarViewDate, setCalendarViewDate] = useState(originalValueAsDate || new Date());
22
+ // update internal value if it changed 'externally'
24
23
  useEffect(() => {
25
- // Only update the internal value when the input is not focused
26
- // This prevents the input value from being reset while user is typing
27
- if (inputRef.current !== document.activeElement) {
28
- const formattedValue = format(value, formatting.date);
29
- if (formattedValue !== internalValue) {
30
- setInternalValue(formattedValue !== null && formattedValue !== void 0 ? formattedValue : '');
31
- }
24
+ const formattedValue = format(value, formatting.date);
25
+ if (formattedValue !== internalValue) {
26
+ setInternalValue(formattedValue !== null && formattedValue !== void 0 ? formattedValue : '');
32
27
  }
33
28
  }, [value]);
29
+ // event handlers
34
30
  const handleInputBlur = event => {
35
31
  event.persist();
36
32
  const valueAsDate = parseFromCustomString(event.target.value, 'dd.mm.yy', originalValueAsDate === null || originalValueAsDate === void 0 ? void 0 : originalValueAsDate.getMonth(), originalValueAsDate === null || originalValueAsDate === void 0 ? void 0 : originalValueAsDate.getFullYear());
@@ -51,8 +47,6 @@ const useDatepicker = ({
51
47
  setInternalValue(event.target.value);
52
48
  };
53
49
  const handleChange = date => {
54
- // Update both the input value and calendar view date when selecting a date
55
- setCalendarViewDate(date);
56
50
  setInputValueByRef(inputRef.current, format(date, formatting.date), 'focusout');
57
51
  };
58
52
  const handleKeyDown = event => {
@@ -78,8 +72,7 @@ const useDatepicker = ({
78
72
  const calendarProps = {
79
73
  ...calendar,
80
74
  onChange: handleChange,
81
- value: originalValueAsDate,
82
- visibleMonth: calendarViewDate
75
+ value: originalValueAsDate
83
76
  };
84
77
  return {
85
78
  input: inputProps,
@@ -1 +1 @@
1
- {"version":3,"file":"useDatepicker.js","sources":["../../../../../../../src/components/Datepicker/useDatepicker.tsx"],"sourcesContent":["import * as React from 'react';\nimport { parseFromCustomString, format, parse } from '../../utils/date';\nimport { useLocalization } from '../Provider/Localization';\nimport { setInputValueByRef } from '../../utils/input';\nimport { useMergedRef } from '../../hooks/useMergedRef';\nimport { DatepickerProps } from './Datepicker';\nimport { CalendarProps } from '../Calendar/Calendar';\nimport { InputProps as BaseInputProps } from '../Input/Input';\n\ntype InputProps = BaseInputProps & { ref: React.RefObject<HTMLInputElement> };\ntype useDatepicker = React.HTMLAttributes<HTMLDivElement> & {\n calendar: CalendarProps;\n input: InputProps;\n};\n\nexport const useDatepicker = (\n { defaultValue: _, calendar, onBlur, onChange, value, ...props }: DatepickerProps,\n ref: React.Ref<HTMLInputElement>\n): useDatepicker => {\n const inputRef = useMergedRef<HTMLInputElement>(ref);\n const { formatting } = useLocalization();\n const [internalValue, setInternalValue] = React.useState(format(value, formatting.date) ?? '');\n const originalValueAsDate = parse(value);\n\n // Track the current view date (month/year) in the calendar\n const [calendarViewDate, setCalendarViewDate] = React.useState<Date | undefined>(originalValueAsDate || new Date());\n\n React.useEffect(() => {\n // Only update the internal value when the input is not focused\n // This prevents the input value from being reset while user is typing\n if (inputRef.current !== document.activeElement) {\n const formattedValue = format(value, formatting.date);\n if (formattedValue !== internalValue) {\n setInternalValue(formattedValue ?? '');\n }\n }\n }, [value]);\n\n const handleInputBlur = (event: React.FocusEvent<HTMLInputElement>): void => {\n event.persist();\n\n const valueAsDate = parseFromCustomString(\n event.target.value,\n 'dd.mm.yy',\n originalValueAsDate?.getMonth(),\n originalValueAsDate?.getFullYear()\n );\n const formattedValue = valueAsDate ? format(valueAsDate) || '' : '';\n\n event.target.value = formattedValue;\n\n if (onChange) {\n (event as any).detail = valueAsDate;\n onChange(event);\n } else {\n // update the internal value to use the formatted date\n setInternalValue(formattedValue);\n }\n\n if (onBlur) {\n onBlur(event);\n }\n };\n\n const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>): void => {\n setInternalValue(event.target.value);\n };\n\n const handleChange = date => {\n // Update both the input value and calendar view date when selecting a date\n setCalendarViewDate(date);\n setInputValueByRef(inputRef.current, format(date, formatting.date), 'focusout');\n };\n\n const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n if (props.onKeyDown) {\n props.onKeyDown(event);\n }\n\n if (event.key === 'Enter') {\n event.target.dispatchEvent(new Event('focusout', { bubbles: true }));\n }\n };\n\n const inputProps: InputProps = {\n ...props,\n autoComplete: 'off',\n onBlur: handleInputBlur,\n onChange: handleInputChange,\n onKeyDown: handleKeyDown,\n ref: inputRef,\n type: 'text',\n value: internalValue,\n };\n\n const calendarProps: CalendarProps = {\n ...calendar,\n onChange: handleChange,\n value: originalValueAsDate,\n visibleMonth: calendarViewDate,\n };\n\n return {\n input: inputProps,\n calendar: calendarProps,\n };\n};\n"],"names":["useDatepicker","defaultValue","_","calendar","onBlur","onChange","value","props","ref","inputRef","useMergedRef","formatting","useLocalization","internalValue","setInternalValue","React","_format","format","date","originalValueAsDate","parse","calendarViewDate","setCalendarViewDate","Date","current","document","activeElement","formattedValue","handleInputBlur","event","persist","valueAsDate","parseFromCustomString","target","getMonth","getFullYear","detail","handleInputChange","handleChange","setInputValueByRef","handleKeyDown","onKeyDown","key","dispatchEvent","Event","bubbles","inputProps","autoComplete","type","calendarProps","visibleMonth","input"],"mappings":"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"}
1
+ {"version":3,"file":"useDatepicker.js","sources":["../../../../../../../src/components/Datepicker/useDatepicker.tsx"],"sourcesContent":["import * as React from 'react';\nimport { parseFromCustomString, format, parse } from '../../utils/date';\nimport { useLocalization } from '../Provider/Localization';\nimport { setInputValueByRef } from '../../utils/input';\nimport { useMergedRef } from '../../hooks/useMergedRef';\nimport { DatepickerProps } from './Datepicker';\nimport { CalendarProps } from '../Calendar/Calendar';\nimport { InputProps as BaseInputProps } from '../Input/Input';\n\ntype InputProps = BaseInputProps & { ref: React.RefObject<HTMLInputElement> };\ntype useDatepicker = React.HTMLAttributes<HTMLDivElement> & {\n calendar: CalendarProps;\n input: InputProps;\n};\n\nexport const useDatepicker = (\n { defaultValue: _, calendar, onBlur, onChange, value, ...props }: DatepickerProps,\n ref: React.Ref<HTMLInputElement>\n): useDatepicker => {\n const inputRef = useMergedRef<HTMLInputElement>(ref);\n const { formatting } = useLocalization();\n const [internalValue, setInternalValue] = React.useState(format(value, formatting.date) ?? '');\n const originalValueAsDate = parse(value);\n\n // update internal value if it changed 'externally'\n React.useEffect(() => {\n const formattedValue = format(value, formatting.date);\n\n if (formattedValue !== internalValue) {\n setInternalValue(formattedValue ?? '');\n }\n }, [value]);\n\n // event handlers\n const handleInputBlur = (event: React.FocusEvent<HTMLInputElement>): void => {\n event.persist();\n\n const valueAsDate = parseFromCustomString(\n event.target.value,\n 'dd.mm.yy',\n originalValueAsDate?.getMonth(),\n originalValueAsDate?.getFullYear()\n );\n const formattedValue = valueAsDate ? format(valueAsDate) || '' : '';\n\n event.target.value = formattedValue;\n\n if (onChange) {\n (event as any).detail = valueAsDate;\n onChange(event);\n } else {\n // update the internal value to use the formatted date\n setInternalValue(formattedValue);\n }\n\n if (onBlur) {\n onBlur(event);\n }\n };\n\n const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>): void => {\n setInternalValue(event.target.value);\n };\n\n const handleChange = date => {\n setInputValueByRef(inputRef.current, format(date, formatting.date), 'focusout');\n };\n\n const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n if (props.onKeyDown) {\n props.onKeyDown(event);\n }\n\n if (event.key === 'Enter') {\n event.target.dispatchEvent(new Event('focusout', { bubbles: true }));\n }\n };\n\n const inputProps: InputProps = {\n ...props,\n autoComplete: 'off',\n onBlur: handleInputBlur,\n onChange: handleInputChange,\n onKeyDown: handleKeyDown,\n ref: inputRef,\n type: 'text',\n value: internalValue,\n };\n\n const calendarProps: CalendarProps = {\n ...calendar,\n onChange: handleChange,\n value: originalValueAsDate,\n };\n\n return {\n input: inputProps,\n calendar: calendarProps,\n };\n};\n"],"names":["useDatepicker","defaultValue","_","calendar","onBlur","onChange","value","props","ref","inputRef","useMergedRef","formatting","useLocalization","internalValue","setInternalValue","React","_format","format","date","originalValueAsDate","parse","formattedValue","handleInputBlur","event","persist","valueAsDate","parseFromCustomString","target","getMonth","getFullYear","detail","handleInputChange","handleChange","setInputValueByRef","current","handleKeyDown","onKeyDown","key","dispatchEvent","Event","bubbles","inputProps","autoComplete","type","calendarProps","input"],"mappings":"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"}
@@ -9,8 +9,9 @@ function IconExperiment(props, svgRef) {
9
9
  }, props), /*#__PURE__*/createElement("path", {
10
10
  fillRule: "evenodd",
11
11
  clipRule: "evenodd",
12
- d: "M9.035 9.468v-3.61h2.127v3.631c0 .376.14.736.393 1.008l.614.66c-1.059.457-2.171-.233-3.308-.99a1.49 1.49 0 00.174-.699zM8.952 5a.762.762 0 00-.752.772v3.696a.61.61 0 01-.177.43l-2.592 2.6C4.52 13.41 5.15 15 6.423 15h7.154c1.25 0 1.89-1.538 1.027-2.466l-2.446-2.63a.61.61 0 01-.162-.415V5.772A.762.762 0 0011.244 5H8.952z",
13
- fill: "currentColor"
12
+ d: "M8.962 9.26V5.313h2.843V9.28c0 .376.796 1.24 1.049 1.511L14.5 12.5c-.507.218-3.166-1.19-4.341-.211C7.159 14.789 6 13 6.5 12c.316-.632 2.462-1.803 2.462-2.74zm.24-4.469a.762.762 0 00-.752.772v3.696a.61.61 0 01-.177.43l-2.592 2.6c-.911.913-.281 2.502.992 2.502h7.154c1.25 0 1.89-1.538 1.027-2.466l-2.446-2.63a.61.61 0 01-.162-.415V5.563a.762.762 0 00-.752-.772H9.202z",
13
+ fill: "currentColor",
14
+ stroke: "currentColor"
14
15
  }));
15
16
  }
16
17
  var Experiment = /*#__PURE__*/forwardRef(IconExperiment);
@@ -1 +1 @@
1
- {"version":3,"file":"Experiment.js","sources":["../../../../../../../../src/components/Icon/components/Experiment.tsx"],"sourcesContent":["import * as React from 'react';\nfunction IconExperiment(props: React.SVGProps<SVGSVGElement>, svgRef?: React.Ref<SVGSVGElement>): JSX.Element {\n return (\n <svg fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" ref={svgRef} {...props}>\n <path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M9.035 9.468v-3.61h2.127v3.631c0 .376.14.736.393 1.008l.614.66c-1.059.457-2.171-.233-3.308-.99a1.49 1.49 0 00.174-.699zM8.952 5a.762.762 0 00-.752.772v3.696a.61.61 0 01-.177.43l-2.592 2.6C4.52 13.41 5.15 15 6.423 15h7.154c1.25 0 1.89-1.538 1.027-2.466l-2.446-2.63a.61.61 0 01-.162-.415V5.772A.762.762 0 0011.244 5H8.952z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\nexport default React.forwardRef(IconExperiment);\n"],"names":["IconExperiment","props","svgRef","React","fill","xmlns","viewBox","ref","fillRule","clipRule","d"],"mappings":";;AACA,SAASA,cAAcA,CAACC,KAAoC,EAAEC,MAAiC;EAC3F,oBACIC;IAAKC,IAAI,EAAC,MAAM;IAACC,KAAK,EAAC,4BAA4B;IAACC,OAAO,EAAC,WAAW;IAACC,GAAG,EAAEL;KAAYD,KAAK,gBAC1FE;IACIK,QAAQ,EAAC,SAAS;IAClBC,QAAQ,EAAC,SAAS;IAClBC,CAAC,EAAC,kUAAkU;IACpUN,IAAI,EAAC;IACP,CACA;AAEd;AACA,8BAAeD,UAAgB,CAACH,cAAc,CAAC;;;;"}
1
+ {"version":3,"file":"Experiment.js","sources":["../../../../../../../../src/components/Icon/components/Experiment.tsx"],"sourcesContent":["import * as React from 'react';\nfunction IconExperiment(props: React.SVGProps<SVGSVGElement>, svgRef?: React.Ref<SVGSVGElement>): JSX.Element {\n return (\n <svg fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" ref={svgRef} {...props}>\n <path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M8.962 9.26V5.313h2.843V9.28c0 .376.796 1.24 1.049 1.511L14.5 12.5c-.507.218-3.166-1.19-4.341-.211C7.159 14.789 6 13 6.5 12c.316-.632 2.462-1.803 2.462-2.74zm.24-4.469a.762.762 0 00-.752.772v3.696a.61.61 0 01-.177.43l-2.592 2.6c-.911.913-.281 2.502.992 2.502h7.154c1.25 0 1.89-1.538 1.027-2.466l-2.446-2.63a.61.61 0 01-.162-.415V5.563a.762.762 0 00-.752-.772H9.202z\"\n fill=\"currentColor\"\n stroke=\"currentColor\"\n />\n </svg>\n );\n}\nexport default React.forwardRef(IconExperiment);\n"],"names":["IconExperiment","props","svgRef","React","fill","xmlns","viewBox","ref","fillRule","clipRule","d","stroke"],"mappings":";;AACA,SAASA,cAAcA,CAACC,KAAoC,EAAEC,MAAiC;EAC3F,oBACIC;IAAKC,IAAI,EAAC,MAAM;IAACC,KAAK,EAAC,4BAA4B;IAACC,OAAO,EAAC,WAAW;IAACC,GAAG,EAAEL;KAAYD,KAAK,gBAC1FE;IACIK,QAAQ,EAAC,SAAS;IAClBC,QAAQ,EAAC,SAAS;IAClBC,CAAC,EAAC,+WAA+W;IACjXN,IAAI,EAAC,cAAc;IACnBO,MAAM,EAAC;IACT,CACA;AAEd;AACA,8BAAeR,UAAgB,CAACH,cAAc,CAAC;;;;"}
@@ -1626,8 +1626,9 @@ function IconExperiment(props, svgRef) {
1626
1626
  }, props), /*#__PURE__*/React.createElement("path", {
1627
1627
  fillRule: "evenodd",
1628
1628
  clipRule: "evenodd",
1629
- d: "M9.035 9.468v-3.61h2.127v3.631c0 .376.14.736.393 1.008l.614.66c-1.059.457-2.171-.233-3.308-.99a1.49 1.49 0 00.174-.699zM8.952 5a.762.762 0 00-.752.772v3.696a.61.61 0 01-.177.43l-2.592 2.6C4.52 13.41 5.15 15 6.423 15h7.154c1.25 0 1.89-1.538 1.027-2.466l-2.446-2.63a.61.61 0 01-.162-.415V5.772A.762.762 0 0011.244 5H8.952z",
1630
- fill: "currentColor"
1629
+ d: "M8.962 9.26V5.313h2.843V9.28c0 .376.796 1.24 1.049 1.511L14.5 12.5c-.507.218-3.166-1.19-4.341-.211C7.159 14.789 6 13 6.5 12c.316-.632 2.462-1.803 2.462-2.74zm.24-4.469a.762.762 0 00-.752.772v3.696a.61.61 0 01-.177.43l-2.592 2.6c-.911.913-.281 2.502.992 2.502h7.154c1.25 0 1.89-1.538 1.027-2.466l-2.446-2.63a.61.61 0 01-.162-.415V5.563a.762.762 0 00-.752-.772H9.202z",
1630
+ fill: "currentColor",
1631
+ stroke: "currentColor"
1631
1632
  }));
1632
1633
  }
1633
1634
  var Experiment = /*#__PURE__*/React.forwardRef(IconExperiment);
@@ -5099,23 +5100,22 @@ const TodayButton = ({
5099
5100
  }, texts.calendar.actions.today);
5100
5101
  };
5101
5102
  const Calendar$1 = props => {
5102
- var _ref;
5103
5103
  const {
5104
5104
  onChange: handleChange,
5105
5105
  value,
5106
5106
  disabledDays,
5107
- visibleMonth,
5108
5107
  ...otherProps
5109
5108
  } = props;
5110
- const [internalVisibleMonth, setInternalVisibleMonth] = React.useState((_ref = visibleMonth !== null && visibleMonth !== void 0 ? visibleMonth : value) !== null && _ref !== void 0 ? _ref : new Date());
5109
+ const [visibleMonth, setVisibleMonth] = React.useState(value !== null && value !== void 0 ? value : new Date());
5111
5110
  const {
5112
5111
  texts
5113
5112
  } = useLocalization();
5114
5113
  React.useEffect(() => {
5115
- if (visibleMonth && visibleMonth !== internalVisibleMonth) {
5116
- setInternalVisibleMonth(visibleMonth);
5114
+ if (visibleMonth !== value) {
5115
+ setVisibleMonth(value !== null && value !== void 0 ? value : new Date());
5117
5116
  }
5118
- }, [visibleMonth]);
5117
+ // visibleMonth in deps array breaking month switching logic. It should not be in deps array.
5118
+ }, [value]);
5119
5119
  const handleDayClick = (date, modifiers, event) => {
5120
5120
  if (modifiers.outside || modifiers.disabled) {
5121
5121
  return;
@@ -5129,13 +5129,13 @@ const Calendar$1 = props => {
5129
5129
  className: className,
5130
5130
  captionLayout: "dropdown-buttons",
5131
5131
  weekStartsOn: 1,
5132
- month: internalVisibleMonth,
5132
+ month: visibleMonth,
5133
5133
  numberOfMonths: 1,
5134
5134
  components: {
5135
- Caption: props => (/*#__PURE__*/React.createElement(Navbar, Object.assign({}, props, {
5136
- onMonthChange: setInternalVisibleMonth,
5137
- value: internalVisibleMonth
5138
- }))),
5135
+ Caption: props => /*#__PURE__*/React.createElement(Navbar, Object.assign({}, props, {
5136
+ onMonthChange: setVisibleMonth,
5137
+ value: visibleMonth
5138
+ })),
5139
5139
  Footer: () => (/*#__PURE__*/React.createElement("tfoot", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", {
5140
5140
  colSpan: 7,
5141
5141
  className: "text-center"
@@ -6390,18 +6390,14 @@ const useDatepicker = ({
6390
6390
  } = useLocalization();
6391
6391
  const [internalValue, setInternalValue] = React.useState((_format = format(value, formatting.date)) !== null && _format !== void 0 ? _format : '');
6392
6392
  const originalValueAsDate = parse(value);
6393
- // Track the current view date (month/year) in the calendar
6394
- const [calendarViewDate, setCalendarViewDate] = React.useState(originalValueAsDate || new Date());
6393
+ // update internal value if it changed 'externally'
6395
6394
  React.useEffect(() => {
6396
- // Only update the internal value when the input is not focused
6397
- // This prevents the input value from being reset while user is typing
6398
- if (inputRef.current !== document.activeElement) {
6399
- const formattedValue = format(value, formatting.date);
6400
- if (formattedValue !== internalValue) {
6401
- setInternalValue(formattedValue !== null && formattedValue !== void 0 ? formattedValue : '');
6402
- }
6395
+ const formattedValue = format(value, formatting.date);
6396
+ if (formattedValue !== internalValue) {
6397
+ setInternalValue(formattedValue !== null && formattedValue !== void 0 ? formattedValue : '');
6403
6398
  }
6404
6399
  }, [value]);
6400
+ // event handlers
6405
6401
  const handleInputBlur = event => {
6406
6402
  event.persist();
6407
6403
  const valueAsDate = parseFromCustomString(event.target.value, 'dd.mm.yy', originalValueAsDate === null || originalValueAsDate === void 0 ? void 0 : originalValueAsDate.getMonth(), originalValueAsDate === null || originalValueAsDate === void 0 ? void 0 : originalValueAsDate.getFullYear());
@@ -6422,8 +6418,6 @@ const useDatepicker = ({
6422
6418
  setInternalValue(event.target.value);
6423
6419
  };
6424
6420
  const handleChange = date => {
6425
- // Update both the input value and calendar view date when selecting a date
6426
- setCalendarViewDate(date);
6427
6421
  setInputValueByRef(inputRef.current, format(date, formatting.date), 'focusout');
6428
6422
  };
6429
6423
  const handleKeyDown = event => {
@@ -6449,8 +6443,7 @@ const useDatepicker = ({
6449
6443
  const calendarProps = {
6450
6444
  ...calendar,
6451
6445
  onChange: handleChange,
6452
- value: originalValueAsDate,
6453
- visibleMonth: calendarViewDate
6446
+ value: originalValueAsDate
6454
6447
  };
6455
6448
  return {
6456
6449
  input: inputProps,