npm - @gravity-ui/date-components - Versions diffs - 3.2.4 → 3.3.1 - Mend

@gravity-ui/date-components 3.2.4 → 3.3.1

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.

Files changed (172) hide show

package/dist/esm/components/CalendarView/hooks/useCalendarCellProps.js CHANGED Viewed

@@ -1,7 +1,9 @@
 import React from 'react';
+import { useLang } from '@gravity-ui/uikit';
 import { formatDateTime } from "../../utils/dates.js";
 export function useCalendarCellProps(date, state) {
     const ref = React.useRef(null);
+    const { lang } = useLang();
     const isFocused = state.isCellFocused(date);
     React.useEffect(() => {
         var _a;
@@ -21,7 +23,7 @@ export function useCalendarCellProps(date, state) {
     const isSelectable = !isDisabled && !isUnavailable;
     const isCurrent = state.isCurrent(date);
     const isWeekend = state.isWeekend(date);
-    const label = getDateLabel(date, state);
+    const label = getDateLabel(date, state, lang);
     const cellProps = {
         role: 'gridcell',
         'aria-selected': isSelected ? 'true' : undefined,
@@ -53,15 +55,15 @@ export function useCalendarCellProps(date, state) {
             }
         },
     };
-    let formattedDate = formatDateTime(date, 'D', state.timeZone);
+    let formattedDate = formatDateTime(date, 'D', state.timeZone, lang);
     if (state.mode === 'months') {
-        formattedDate = formatDateTime(date, 'MMM', state.timeZone);
+        formattedDate = formatDateTime(date, 'MMM', state.timeZone, lang);
     }
     else if (state.mode === 'quarters') {
-        formattedDate = formatDateTime(date, '[Q]Q', state.timeZone);
+        formattedDate = formatDateTime(date, '[Q]Q', state.timeZone, lang);
     }
     else if (state.mode === 'years') {
-        formattedDate = formatDateTime(date, 'YYYY', state.timeZone);
+        formattedDate = formatDateTime(date, 'YYYY', state.timeZone, lang);
     }
     return {
         cellProps,
@@ -78,19 +80,19 @@ export function useCalendarCellProps(date, state) {
         isWeekend,
     };
 }
-function getDateLabel(date, state) {
+function getDateLabel(date, state, lang) {
     switch (state.mode) {
         case 'days': {
-            return `${formatDateTime(date, 'dddd', state.timeZone)}, ${formatDateTime(date, 'LL', state.timeZone)}`;
+            return `${formatDateTime(date, 'dddd', state.timeZone, lang)}, ${formatDateTime(date, 'LL', state.timeZone, lang)}`;
         }
         case 'months': {
-            return `${formatDateTime(date, 'MMMM YYYY', state.timeZone)}`;
+            return `${formatDateTime(date, 'MMMM YYYY', state.timeZone, lang)}`;
         }
         case 'quarters': {
-            return `${formatDateTime(date, '[Q]Q YYYY', state.timeZone)}`;
+            return `${formatDateTime(date, '[Q]Q YYYY', state.timeZone, lang)}`;
         }
         case 'years': {
-            return `${formatDateTime(date, 'YYYY', state.timeZone)}`;
+            return `${formatDateTime(date, 'YYYY', state.timeZone, lang)}`;
         }
         default:
             return '';

package/dist/esm/components/CalendarView/hooks/useCalendarCellProps.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useCalendarCellProps.js","sourceRoot":"../../../../../src","sources":["components/CalendarView/hooks/useCalendarCellProps.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;~~AAI1B~~,OAAO,EAAC,cAAc,EAAC,6BAA0B;AAIjD,MAAM,UAAU,oBAAoB,CAAC,IAAc,EAAE,KAAyC;IAC1F,MAAM,GAAG,GAAG,KAAK,CAAC,MAAM,CAAiB,IAAI,CAAC,CAAC;IAE/C,MAAM,SAAS,GAAG,KAAK,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;IAC5C,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;;QACjB,IAAI,SAAS,EAAE,CAAC;YACZ,MAAA,GAAG,CAAC,OAAO,0CAAE,KAAK,CAAC,EAAC,aAAa,EAAE,IAAI,EAAC,CAAC,CAAC;QAC9C,CAAC;IACL,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IAEhB,MAAM,QAAQ,GAAG,KAAK,CAAC,WAAW,CAAC,MAAM,CAAC,IAAI,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IACrE,MAAM,UAAU,GAAG,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC;IAC9C,MAAM,UAAU,GAAG,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC;IAC1C,MAAM,gBAAgB,GAAG,kBAAkB,IAAI,KAAK,IAAI,KAAK,CAAC,gBAAgB,CAAC;IAC/E,MAAM,gBAAgB,GAAG,OAAO,CAAC,gBAAgB,IAAI,UAAU,CAAC,CAAC;IACjE,MAAM,gBAAgB,GAClB,UAAU,IAAI,gBAAgB,IAAI,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC;IACtF,MAAM,cAAc,GAChB,UAAU,IAAI,gBAAgB,IAAI,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC,GAAG,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC;IACpF,MAAM,qBAAqB,GACvB,KAAK,CAAC,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,WAAW,CAAC,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;IAC7E,MAAM,aAAa,GAAG,KAAK,CAAC,iBAAiB,CAAC,IAAI,CAAC,CAAC;IACpD,MAAM,YAAY,GAAG,CAAC,UAAU,IAAI,CAAC,aAAa,CAAC;IACnD,MAAM,SAAS,GAAG,KAAK,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC;IACxC,MAAM,SAAS,GAAG,KAAK,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC;IAExC,MAAM,KAAK,GAAG,YAAY,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;~~IAExC~~,MAAM,SAAS,GAAkC;QAC7C,IAAI,EAAE,UAAU;QAChB,eAAe,EAAE,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS;QAChD,eAAe,EAAE,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS;KACnD,CAAC;IAEF,MAAM,WAAW,GAAqE;QAClF,GAAG;QACH,IAAI,EAAE,QAAQ;QACd,QAAQ,EAAE,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,QAAQ;QAC3C,eAAe,EAAE,YAAY,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM;QAClD,YAAY,EAAE,KAAK;QACnB,OAAO,EAAE,YAAY;YACjB,CAAC,CAAC,GAAG,EAAE;gBACD,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC;gBAC3B,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC;YAC3B,CAAC;YACH,CAAC,CAAC,SAAS;QACf,cAAc;YACV,IAAI,eAAe,IAAI,KAAK,IAAI,YAAY,EAAE,CAAC;gBAC3C,IAAI,qBAAqB,EAAE,CAAC;oBACxB,MAAM,OAAO,GAAG,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,WAAW,CAAC;wBAC5C,CAAC,CAAC,KAAK,CAAC,WAAW,CAAC,OAAO,CAAC,OAAO,CAAC;wBACpC,CAAC,CAAC,KAAK,CAAC,WAAW,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;oBACvD,KAAK,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;gBACjC,CAAC;qBAAM,CAAC;oBACJ,KAAK,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;gBAC9B,CAAC;YACL,CAAC;QACL,CAAC;KACJ,CAAC;IAEF,IAAI,aAAa,GAAG,cAAc,CAAC,IAAI,EAAE,GAAG,EAAE,KAAK,CAAC,QAAQ,CAAC,CAAC;~~IAC9D~~,IAAI,KAAK,CAAC,IAAI,KAAK,QAAQ,EAAE,CAAC;QAC1B,aAAa,GAAG,cAAc,CAAC,IAAI,EAAE,KAAK,EAAE,KAAK,CAAC,QAAQ,CAAC,CAAC;~~IAChE~~,CAAC;SAAM,IAAI,KAAK,CAAC,IAAI,KAAK,UAAU,EAAE,CAAC;QACnC,aAAa,GAAG,cAAc,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,CAAC,QAAQ,CAAC,CAAC;~~IACjE~~,CAAC;SAAM,IAAI,KAAK,CAAC,IAAI,KAAK,OAAO,EAAE,CAAC;QAChC,aAAa,GAAG,cAAc,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,CAAC,QAAQ,CAAC,CAAC;~~IACjE~~,CAAC;IAED,OAAO;QACH,SAAS;QACT,WAAW;QACX,aAAa;QACb,UAAU;QACV,UAAU;QACV,gBAAgB;QAChB,gBAAgB;QAChB,cAAc;QACd,qBAAqB;QACrB,aAAa;QACb,SAAS;QACT,SAAS;KACZ,CAAC;AACN,CAAC;AAED,SAAS,YAAY,CAAC,IAAc,EAAE,KAAyC;~~IAC3E~~,QAAQ,KAAK,CAAC,IAAI,EAAE,CAAC;QACjB,KAAK,MAAM,CAAC,CAAC,CAAC;YACV,OAAO,GAAG,cAAc,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,cAAc,CAAC,IAAI,EAAE,IAAI,EAAE,KAAK,CAAC,QAAQ,CAAC,EAAE,CAAC;~~QAC5G~~,CAAC;QACD,KAAK,QAAQ,CAAC,CAAC,CAAC;YACZ,OAAO,GAAG,cAAc,CAAC,IAAI,EAAE,WAAW,EAAE,KAAK,CAAC,QAAQ,CAAC,EAAE,CAAC;~~QAClE~~,CAAC;QACD,KAAK,UAAU,CAAC,CAAC,CAAC;YACd,OAAO,GAAG,cAAc,CAAC,IAAI,EAAE,WAAW,EAAE,KAAK,CAAC,QAAQ,CAAC,EAAE,CAAC;~~QAClE~~,CAAC;QACD,KAAK,OAAO,CAAC,CAAC,CAAC;YACX,OAAO,GAAG,cAAc,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,CAAC,QAAQ,CAAC,EAAE,CAAC;~~QAC7D~~,CAAC;QACD;YACI,OAAO,EAAE,CAAC;IAClB,CAAC;AACL,CAAC","sourcesContent":["import React from 'react';\n\nimport type {DateTime} from '@gravity-ui/date-utils';\n\nimport {formatDateTime} from '../../utils/dates';\n\nimport type {CalendarState, RangeCalendarState} from './types';\n\nexport function useCalendarCellProps(date: DateTime, state: CalendarState \| RangeCalendarState) {\n const ref = React.useRef<HTMLDivElement>(null);\n\n const isFocused = state.isCellFocused(date);\n React.useEffect(() => {\n if (isFocused) {\n ref.current?.focus({preventScroll: true});\n }\n }, [isFocused]);\n\n const tabIndex = state.focusedDate.isSame(date, state.mode) ? 0 : -1;\n const isDisabled = state.isCellDisabled(date);\n const isSelected = state.isSelected(date);\n const highlightedRange = 'highlightedRange' in state && state.highlightedRange;\n const isRangeSelection = Boolean(highlightedRange && isSelected);\n const isSelectionStart =\n isSelected && highlightedRange && date.isSame(highlightedRange.start, state.mode);\n const isSelectionEnd =\n isSelected && highlightedRange && date.isSame(highlightedRange.end, state.mode);\n const isOutsideCurrentRange =\n state.mode === 'days' ? !state.focusedDate.isSame(date, 'month') : false;\n const isUnavailable = state.isCellUnavailable(date);\n const isSelectable = !isDisabled && !isUnavailable;\n const isCurrent = state.isCurrent(date);\n const isWeekend = state.isWeekend(date);\n\n const label = getDateLabel(date, state);\n\n const cellProps: React.HTMLAttributes<unknown> = {\n role: 'gridcell',\n 'aria-selected': isSelected ? 'true' : undefined,\n 'aria-disabled': isDisabled ? 'true' : undefined,\n };\n\n const buttonProps: React.HTMLAttributes<unknown> & {ref: React.Ref<HTMLDivElement>} = {\n ref,\n role: 'button',\n tabIndex: isDisabled ? undefined : tabIndex,\n 'aria-disabled': isSelectable ? undefined : 'true',\n 'aria-label': label,\n onClick: isSelectable\n ? () => {\n state.setFocusedDate(date);\n state.selectDate(date);\n }\n : undefined,\n onPointerEnter() {\n if ('highlightDate' in state && isSelectable) {\n if (isOutsideCurrentRange) {\n const newDate = date.isBefore(state.focusedDate)\n ? state.focusedDate.startOf('month')\n : state.focusedDate.endOf('month').startOf('date');\n state.highlightDate(newDate);\n } else {\n state.highlightDate(date);\n }\n }\n },\n };\n\n let formattedDate = formatDateTime(date, 'D', state.timeZone);\n if (state.mode === 'months') {\n formattedDate = formatDateTime(date, 'MMM', state.timeZone);\n } else if (state.mode === 'quarters') {\n formattedDate = formatDateTime(date, '[Q]Q', state.timeZone);\n } else if (state.mode === 'years') {\n formattedDate = formatDateTime(date, 'YYYY', state.timeZone);\n }\n\n return {\n cellProps,\n buttonProps,\n formattedDate,\n isDisabled,\n isSelected,\n isRangeSelection,\n isSelectionStart,\n isSelectionEnd,\n isOutsideCurrentRange,\n isUnavailable,\n isCurrent,\n isWeekend,\n };\n}\n\nfunction getDateLabel(date: DateTime, state: CalendarState \| RangeCalendarState) {\n switch (state.mode) {\n case 'days': {\n return `${formatDateTime(date, 'dddd', state.timeZone)}, ${formatDateTime(date, 'LL', state.timeZone)}`;\n }\n case 'months': {\n return `${formatDateTime(date, 'MMMM YYYY', state.timeZone)}`;\n }\n case 'quarters': {\n return `${formatDateTime(date, '[Q]Q YYYY', state.timeZone)}`;\n }\n case 'years': {\n return `${formatDateTime(date, 'YYYY', state.timeZone)}`;\n }\n default:\n return '';\n }\n}\n"]}
1	+ {"version":3,"file":"useCalendarCellProps.js","sourceRoot":"../../../../../src","sources":["components/CalendarView/hooks/useCalendarCellProps.ts"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\n\nimport type {DateTime} from '@gravity-ui/date-utils';\nimport {useLang} from '@gravity-ui/uikit';\n\nimport {formatDateTime} from '../../utils/dates';\n\nimport type {CalendarState, RangeCalendarState} from './types';\n\nexport function useCalendarCellProps(date: DateTime, state: CalendarState \| RangeCalendarState) {\n const ref = React.useRef<HTMLDivElement>(null);\n\n const {lang} = useLang();\n\n const isFocused = state.isCellFocused(date);\n React.useEffect(() => {\n if (isFocused) {\n ref.current?.focus({preventScroll: true});\n }\n }, [isFocused]);\n\n const tabIndex = state.focusedDate.isSame(date, state.mode) ? 0 : -1;\n const isDisabled = state.isCellDisabled(date);\n const isSelected = state.isSelected(date);\n const highlightedRange = 'highlightedRange' in state && state.highlightedRange;\n const isRangeSelection = Boolean(highlightedRange && isSelected);\n const isSelectionStart =\n isSelected && highlightedRange && date.isSame(highlightedRange.start, state.mode);\n const isSelectionEnd =\n isSelected && highlightedRange && date.isSame(highlightedRange.end, state.mode);\n const isOutsideCurrentRange =\n state.mode === 'days' ? !state.focusedDate.isSame(date, 'month') : false;\n const isUnavailable = state.isCellUnavailable(date);\n const isSelectable = !isDisabled && !isUnavailable;\n const isCurrent = state.isCurrent(date);\n const isWeekend = state.isWeekend(date);\n\n const label = getDateLabel(date, state, lang);\n\n const cellProps: React.HTMLAttributes<unknown> = {\n role: 'gridcell',\n 'aria-selected': isSelected ? 'true' : undefined,\n 'aria-disabled': isDisabled ? 'true' : undefined,\n };\n\n const buttonProps: React.HTMLAttributes<unknown> & {ref: React.Ref<HTMLDivElement>} = {\n ref,\n role: 'button',\n tabIndex: isDisabled ? undefined : tabIndex,\n 'aria-disabled': isSelectable ? undefined : 'true',\n 'aria-label': label,\n onClick: isSelectable\n ? () => {\n state.setFocusedDate(date);\n state.selectDate(date);\n }\n : undefined,\n onPointerEnter() {\n if ('highlightDate' in state && isSelectable) {\n if (isOutsideCurrentRange) {\n const newDate = date.isBefore(state.focusedDate)\n ? state.focusedDate.startOf('month')\n : state.focusedDate.endOf('month').startOf('date');\n state.highlightDate(newDate);\n } else {\n state.highlightDate(date);\n }\n }\n },\n };\n\n let formattedDate = formatDateTime(date, 'D', state.timeZone, lang);\n if (state.mode === 'months') {\n formattedDate = formatDateTime(date, 'MMM', state.timeZone, lang);\n } else if (state.mode === 'quarters') {\n formattedDate = formatDateTime(date, '[Q]Q', state.timeZone, lang);\n } else if (state.mode === 'years') {\n formattedDate = formatDateTime(date, 'YYYY', state.timeZone, lang);\n }\n\n return {\n cellProps,\n buttonProps,\n formattedDate,\n isDisabled,\n isSelected,\n isRangeSelection,\n isSelectionStart,\n isSelectionEnd,\n isOutsideCurrentRange,\n isUnavailable,\n isCurrent,\n isWeekend,\n };\n}\n\nfunction getDateLabel(date: DateTime, state: CalendarState \| RangeCalendarState, lang: string) {\n switch (state.mode) {\n case 'days': {\n return `${formatDateTime(date, 'dddd', state.timeZone, lang)}, ${formatDateTime(date, 'LL', state.timeZone, lang)}`;\n }\n case 'months': {\n return `${formatDateTime(date, 'MMMM YYYY', state.timeZone, lang)}`;\n }\n case 'quarters': {\n return `${formatDateTime(date, '[Q]Q YYYY', state.timeZone, lang)}`;\n }\n case 'years': {\n return `${formatDateTime(date, 'YYYY', state.timeZone, lang)}`;\n }\n default:\n return '';\n }\n}\n"]}

package/dist/esm/components/CalendarView/hooks/useCalendarGridProps.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { useFocusWithin } from '@gravity-ui/uikit';
+import { useFocusWithin, useLang } from '@gravity-ui/uikit';
 import { formatDateTime } from "../../utils/dates.js";
 export function useCalendarGridProps(state) {
     const { focusWithinProps } = useFocusWithin({
@@ -6,9 +6,10 @@ export function useCalendarGridProps(state) {
             state.setFocused(isFocused);
         },
     });
+    const { lang } = useLang();
     const gridProps = Object.assign(Object.assign({ role: 'grid', 'aria-label': state.mode === 'years' || state.mode === 'quarters'
             ? `${state.startDate.year()} — ${state.endDate.year()}`
-            : formatDateTime(state.focusedDate, state.mode === 'days' ? 'MMMM YYYY' : 'YYYY', state.timeZone), 'aria-disabled': state.disabled ? 'true' : undefined, 'aria-readonly': state.readOnly ? 'true' : undefined }, focusWithinProps), { onKeyDown: (e) => {
+            : formatDateTime(state.focusedDate, state.mode === 'days' ? 'MMMM YYYY' : 'YYYY', state.timeZone, lang), 'aria-disabled': state.disabled ? 'true' : undefined, 'aria-readonly': state.readOnly ? 'true' : undefined }, focusWithinProps), { onKeyDown: (e) => {
             if (e.key === 'ArrowRight') {
                 e.preventDefault();
                 state.focusNextCell();

package/dist/esm/components/CalendarView/hooks/useCalendarGridProps.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useCalendarGridProps.js","sourceRoot":"../../../../../src","sources":["components/CalendarView/hooks/useCalendarGridProps.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,cAAc,EAAC,MAAM,mBAAmB,CAAC;~~AAEjD~~,OAAO,EAAC,cAAc,EAAC,6BAA0B;AAIjD,MAAM,UAAU,oBAAoB,CAAC,KAAyC;IAC1E,MAAM,EAAC,gBAAgB,EAAC,GAAG,cAAc,CAAC;QACtC,mBAAmB,EAAE,CAAC,SAAS,EAAE,EAAE;YAC/B,KAAK,CAAC,UAAU,CAAC,SAAS,CAAC,CAAC;QAChC,CAAC;KACJ,CAAC,CAAC;IAEH,MAAM,SAAS,iCACX,IAAI,EAAE,MAAM,EACZ,YAAY,EACR,KAAK,CAAC,IAAI,KAAK,OAAO,IAAI,KAAK,CAAC,IAAI,KAAK,UAAU;YAC/C,CAAC,CAAC,GAAG,KAAK,CAAC,SAAS,CAAC,IAAI,EAAE,MAAM,KAAK,CAAC,OAAO,CAAC,IAAI,EAAE,EAAE;YACvD,CAAC,CAAC,cAAc,CACV,KAAK,CAAC,WAAW,EACjB,KAAK,CAAC,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,MAAM,EAC5C,KAAK,CAAC,QAAQ,~~CACjB~~,EACX,eAAe,EAAE,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EACpD,eAAe,EAAE,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,IACjD,gBAAgB,KACnB,SAAS,EAAE,CAAC,CAAC,EAAE,EAAE;YACb,IAAI,CAAC,CAAC,GAAG,KAAK,YAAY,EAAE,CAAC;gBACzB,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,KAAK,CAAC,aAAa,EAAE,CAAC;YAC1B,CAAC;iBAAM,IAAI,CAAC,CAAC,GAAG,KAAK,WAAW,EAAE,CAAC;gBAC/B,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,KAAK,CAAC,iBAAiB,EAAE,CAAC;YAC9B,CAAC;iBAAM,IAAI,CAAC,CAAC,GAAG,KAAK,WAAW,EAAE,CAAC;gBAC/B,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,KAAK,CAAC,YAAY,EAAE,CAAC;YACzB,CAAC;iBAAM,IAAI,CAAC,CAAC,GAAG,KAAK,SAAS,EAAE,CAAC;gBAC7B,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,KAAK,CAAC,gBAAgB,EAAE,CAAC;YAC7B,CAAC;iBAAM,IAAI,CAAC,CAAC,GAAG,KAAK,UAAU,EAAE,CAAC;gBAC9B,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC;YACpC,CAAC;iBAAM,IAAI,CAAC,CAAC,GAAG,KAAK,QAAQ,EAAE,CAAC;gBAC5B,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,KAAK,CAAC,iBAAiB,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC;YACxC,CAAC;iBAAM,IAAI,CAAC,CAAC,GAAG,KAAK,KAAK,EAAE,CAAC;gBACzB,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,KAAK,CAAC,eAAe,EAAE,CAAC;YAC5B,CAAC;iBAAM,IAAI,CAAC,CAAC,GAAG,KAAK,MAAM,EAAE,CAAC;gBAC1B,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,KAAK,CAAC,iBAAiB,EAAE,CAAC;YAC9B,CAAC;iBAAM,IAAI,CAAC,CAAC,IAAI,KAAK,OAAO,EAAE,CAAC;gBAC5B,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,KAAK,CAAC,OAAO,EAAE,CAAC;YACpB,CAAC;iBAAM,IAAI,CAAC,CAAC,IAAI,KAAK,OAAO,EAAE,CAAC;gBAC5B,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,KAAK,CAAC,MAAM,EAAE,CAAC;YACnB,CAAC;iBAAM,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,EAAE,CAAC;gBAC5C,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,KAAK,CAAC,UAAU,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC;YACxC,CAAC;QACL,CAAC,GACJ,CAAC;IAEF,OAAO;QACH,SAAS;KACZ,CAAC;AACN,CAAC","sourcesContent":["import {useFocusWithin} from '@gravity-ui/uikit';\n\nimport {formatDateTime} from '../../utils/dates';\n\nimport type {CalendarState, RangeCalendarState} from './types';\n\nexport function useCalendarGridProps(state: CalendarState \| RangeCalendarState) {\n const {focusWithinProps} = useFocusWithin({\n onFocusWithinChange: (isFocused) => {\n state.setFocused(isFocused);\n },\n });\n\n const gridProps: React.HTMLAttributes<HTMLElement> = {\n role: 'grid',\n 'aria-label':\n state.mode === 'years' \|\| state.mode === 'quarters'\n ? `${state.startDate.year()} — ${state.endDate.year()}`\n : formatDateTime(\n state.focusedDate,\n state.mode === 'days' ? 'MMMM YYYY' : 'YYYY',\n state.timeZone,\n ),\n 'aria-disabled': state.disabled ? 'true' : undefined,\n 'aria-readonly': state.readOnly ? 'true' : undefined,\n ...focusWithinProps,\n onKeyDown: (e) => {\n if (e.key === 'ArrowRight') {\n e.preventDefault();\n state.focusNextCell();\n } else if (e.key === 'ArrowLeft') {\n e.preventDefault();\n state.focusPreviousCell();\n } else if (e.key === 'ArrowDown') {\n e.preventDefault();\n state.focusNextRow();\n } else if (e.key === 'ArrowUp') {\n e.preventDefault();\n state.focusPreviousRow();\n } else if (e.key === 'PageDown') {\n e.preventDefault();\n state.focusNextPage(e.shiftKey);\n } else if (e.key === 'PageUp') {\n e.preventDefault();\n state.focusPreviousPage(e.shiftKey);\n } else if (e.key === 'End') {\n e.preventDefault();\n state.focusSectionEnd();\n } else if (e.key === 'Home') {\n e.preventDefault();\n state.focusSectionStart();\n } else if (e.code === 'Minus') {\n e.preventDefault();\n state.zoomOut();\n } else if (e.code === 'Equal') {\n e.preventDefault();\n state.zoomIn();\n } else if (e.key === 'Enter' \|\| e.key === ' ') {\n e.preventDefault();\n state.selectDate(state.focusedDate);\n }\n },\n };\n\n return {\n gridProps,\n };\n}\n"]}
1	+ {"version":3,"file":"useCalendarGridProps.js","sourceRoot":"../../../../../src","sources":["components/CalendarView/hooks/useCalendarGridProps.ts"],"names":[],"mappings":"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","sourcesContent":["import {useFocusWithin, useLang} from '@gravity-ui/uikit';\n\nimport {formatDateTime} from '../../utils/dates';\n\nimport type {CalendarState, RangeCalendarState} from './types';\n\nexport function useCalendarGridProps(state: CalendarState \| RangeCalendarState) {\n const {focusWithinProps} = useFocusWithin({\n onFocusWithinChange: (isFocused) => {\n state.setFocused(isFocused);\n },\n });\n\n const {lang} = useLang();\n const gridProps: React.HTMLAttributes<HTMLElement> = {\n role: 'grid',\n 'aria-label':\n state.mode === 'years' \|\| state.mode === 'quarters'\n ? `${state.startDate.year()} — ${state.endDate.year()}`\n : formatDateTime(\n state.focusedDate,\n state.mode === 'days' ? 'MMMM YYYY' : 'YYYY',\n state.timeZone,\n lang,\n ),\n 'aria-disabled': state.disabled ? 'true' : undefined,\n 'aria-readonly': state.readOnly ? 'true' : undefined,\n ...focusWithinProps,\n onKeyDown: (e) => {\n if (e.key === 'ArrowRight') {\n e.preventDefault();\n state.focusNextCell();\n } else if (e.key === 'ArrowLeft') {\n e.preventDefault();\n state.focusPreviousCell();\n } else if (e.key === 'ArrowDown') {\n e.preventDefault();\n state.focusNextRow();\n } else if (e.key === 'ArrowUp') {\n e.preventDefault();\n state.focusPreviousRow();\n } else if (e.key === 'PageDown') {\n e.preventDefault();\n state.focusNextPage(e.shiftKey);\n } else if (e.key === 'PageUp') {\n e.preventDefault();\n state.focusPreviousPage(e.shiftKey);\n } else if (e.key === 'End') {\n e.preventDefault();\n state.focusSectionEnd();\n } else if (e.key === 'Home') {\n e.preventDefault();\n state.focusSectionStart();\n } else if (e.code === 'Minus') {\n e.preventDefault();\n state.zoomOut();\n } else if (e.code === 'Equal') {\n e.preventDefault();\n state.zoomIn();\n } else if (e.key === 'Enter' \|\| e.key === ' ') {\n e.preventDefault();\n state.selectDate(state.focusedDate);\n }\n },\n };\n\n return {\n gridProps,\n };\n}\n"]}

package/dist/esm/components/CalendarView/hooks/useCalendarProps.js CHANGED Viewed

@@ -1,22 +1,26 @@
 import React from 'react';
-import { useFocusWithin } from '@gravity-ui/uikit';
+import { useFocusWithin, useLang } from '@gravity-ui/uikit';
 import { formatDateTime } from "../../utils/dates.js";
+import { filterDOMProps } from "../../utils/filterDOMProps.js";
 import { i18n } from "../i18n/index.js";
 const buttonDisabledClassName = 'yc-button_disabled g-button_disabled';
 export function useCalendarProps(props, state) {
+    const { lang } = useLang();
     const title = state.mode === 'years' || state.mode === 'quarters'
         ? `${state.startDate.year()} — ${state.endDate.year()}`
-        : formatDateTime(state.focusedDate, state.mode === 'days' ? 'MMMM YYYY' : 'YYYY', state.timeZone);
+        : formatDateTime(state.focusedDate, state.mode === 'days' ? 'MMMM YYYY' : 'YYYY', state.timeZone, lang);
     const { focusWithinProps } = useFocusWithin({
         onFocusWithin: props.onFocus,
         onBlurWithin: props.onBlur,
     });
-    const calendarProps = Object.assign({ role: 'group', id: props.id, 'aria-label': [props['aria-label'], title].filter(Boolean).join(', '), 'aria-labelledby': props['aria-labelledby'] || undefined, 'aria-describedby': props['aria-describedby'] || undefined, 'aria-details': props['aria-details'] || undefined, 'aria-disabled': state.disabled || undefined }, focusWithinProps);
+    const calendarProps = Object.assign(Object.assign(Object.assign({}, filterDOMProps(props, { labelable: true })), { role: 'group', 'aria-label': [props['aria-label'], title].filter(Boolean).join(', '), 'aria-disabled': state.disabled || undefined }), focusWithinProps);
     const modeIndex = state.availableModes.indexOf(state.mode);
     const isModeLast = modeIndex + 1 === state.availableModes.length;
     const isNextModeLast = modeIndex + 2 === state.availableModes.length;
     const modeDisabled = state.disabled || isModeLast;
     const modeButtonProps = {
+        // Always set a tabIndex so that Safari allows focusing native buttons
+        tabIndex: 0,
         disabled: state.disabled,
         // FIXME: do not use button class name
         className: modeDisabled ? buttonDisabledClassName : undefined,
@@ -29,7 +33,7 @@ export function useCalendarProps(props, state) {
                 }
             },
         'aria-disabled': modeDisabled ? 'true' : undefined,
-        'aria-description': getAriaDescriptionForModeButton(state.mode, state.availableModes),
+        'aria-description': useAriaDescriptionForModeButton(state.mode, state.availableModes),
         'aria-live': 'polite',
         children: title,
     };
@@ -41,7 +45,10 @@ export function useCalendarProps(props, state) {
             state.setFocused(true);
         }
     });
+    const { t } = i18n.useTranslation();
     const previousButtonProps = {
+        // Always set a tabIndex so that Safari allows focusing native buttons
+        tabIndex: 0,
         disabled: state.disabled,
         // FIXME: do not use button class name
         className: previousDisabled ? buttonDisabledClassName : undefined,
@@ -60,7 +67,7 @@ export function useCalendarProps(props, state) {
             : () => {
                 previousFocused.current = false;
             },
-        'aria-label': i18n('Previous'),
+        'aria-label': t('Previous'),
         'aria-disabled': previousDisabled ? 'true' : undefined,
     };
     const nextFocused = React.useRef(false);
@@ -72,6 +79,8 @@ export function useCalendarProps(props, state) {
         }
     });
     const nextButtonProps = {
+        // Always set a tabIndex so that Safari allows focusing native buttons
+        tabIndex: 0,
         disabled: state.disabled,
         // FIXME: do not use button class name
         className: nextDisabled ? buttonDisabledClassName : undefined,
@@ -90,7 +99,7 @@ export function useCalendarProps(props, state) {
             : () => {
                 nextFocused.current = false;
             },
-        'aria-label': i18n('Next'),
+        'aria-label': t('Next'),
         'aria-disabled': previousDisabled ? 'true' : undefined,
     };
     return {
@@ -100,7 +109,8 @@ export function useCalendarProps(props, state) {
         previousButtonProps,
     };
 }
-function getAriaDescriptionForModeButton(mode, availableModes) {
+function useAriaDescriptionForModeButton(mode, availableModes) {
+    const { t } = i18n.useTranslation();
     const nextModeIndex = availableModes.indexOf(mode) + 1;
     const isModeLast = nextModeIndex === availableModes.length;
     if (isModeLast) {
@@ -108,9 +118,9 @@ function getAriaDescriptionForModeButton(mode, availableModes) {
     }
     const ariaLabelMap = {
         days: '',
-        months: i18n('Switch to months view'),
-        quarters: i18n('Switch to quarters view'),
-        years: i18n('Switch to years view'),
+        months: t('Switch to months view'),
+        quarters: t('Switch to quarters view'),
+        years: t('Switch to years view'),
     };
     const nextMode = availableModes[nextModeIndex];
     return ariaLabelMap[nextMode];

package/dist/esm/components/CalendarView/hooks/useCalendarProps.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useCalendarProps.js","sourceRoot":"../../../../../src","sources":["components/CalendarView/hooks/useCalendarProps.ts"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\n\nimport {useFocusWithin} from '@gravity-ui/uikit';\nimport type {ButtonButtonProps} from '@gravity-ui/uikit';\n\nimport type {CalendarProps} from '../../Calendar/Calendar';\nimport {formatDateTime} from '../../utils/dates';\nimport {i18n} from '../i18n';\n\nimport type {CalendarLayout, CalendarState, RangeCalendarState} from './types';\n\nconst buttonDisabledClassName = 'yc-button_disabled g-button_disabled';\n\nexport function useCalendarProps(props: CalendarProps, state: CalendarState \| RangeCalendarState) {\n const title =\n state.mode === 'years' \|\| state.mode === 'quarters'\n ? `${state.startDate.year()} — ${state.endDate.year()}`\n : formatDateTime(\n state.focusedDate,\n state.mode === 'days' ? 'MMMM YYYY' : 'YYYY',\n state.timeZone,\n );\n\n const {focusWithinProps} = useFocusWithin({\n onFocusWithin: props.onFocus,\n onBlurWithin: props.onBlur,\n });\n\n const calendarProps: React.HTMLAttributes<HTMLElement> = {\n role: 'group',\n id: props.id,\n 'aria-label': [props['aria-label'], title].filter(Boolean).join(', '),\n 'aria-labelledby': props['aria-labelledby'] \|\| undefined,\n 'aria-describedby': props['aria-describedby'] \|\| undefined,\n 'aria-details': props['aria-details'] \|\| undefined,\n 'aria-disabled': state.disabled \|\| undefined,\n ...focusWithinProps,\n };\n\n const modeIndex = state.availableModes.indexOf(state.mode);\n const isModeLast = modeIndex + 1 === state.availableModes.length;\n const isNextModeLast = modeIndex + 2 === state.availableModes.length;\n const modeDisabled = state.disabled \|\| isModeLast;\n\n const modeButtonProps: ButtonButtonProps = {\n disabled: state.disabled,\n // FIXME: do not use button class name\n className: modeDisabled ? buttonDisabledClassName : undefined,\n onClick: modeDisabled\n ? undefined\n : () => {\n state.zoomOut();\n if (isNextModeLast) {\n state.setFocused(true);\n }\n },\n 'aria-disabled': modeDisabled ? 'true' : undefined,\n 'aria-description': getAriaDescriptionForModeButton(state.mode, state.availableModes),\n 'aria-live': 'polite',\n children: title,\n };\n\n const previousFocused = React.useRef(false);\n const previousDisabled = state.disabled \|\| state.isPreviousPageInvalid();\n\n React.useLayoutEffect(() => {\n if (previousDisabled && previousFocused.current) {\n previousFocused.current = false;\n state.setFocused(true);\n }\n });\n\n const previousButtonProps: ButtonButtonProps = {\n disabled: state.disabled,\n // FIXME: do not use button class name\n className: previousDisabled ? buttonDisabledClassName : undefined,\n onClick: previousDisabled\n ? undefined\n : () => {\n state.focusPreviousPage();\n },\n onFocus: previousDisabled\n ? undefined\n : () => {\n previousFocused.current = true;\n },\n onBlur: previousDisabled\n ? undefined\n : () => {\n previousFocused.current = false;\n },\n 'aria-label': i18n('Previous'),\n 'aria-disabled': previousDisabled ? 'true' : undefined,\n };\n\n const nextFocused = React.useRef(false);\n const nextDisabled = state.disabled \|\| state.isNextPageInvalid();\n\n React.useLayoutEffect(() => {\n if (nextDisabled && nextFocused.current) {\n nextFocused.current = false;\n state.setFocused(true);\n }\n });\n\n const nextButtonProps: ButtonButtonProps = {\n disabled: state.disabled,\n // FIXME: do not use button class name\n className: nextDisabled ? buttonDisabledClassName : undefined,\n onClick: nextDisabled\n ? undefined\n : () => {\n state.focusNextPage();\n },\n onFocus: nextDisabled\n ? undefined\n : () => {\n nextFocused.current = true;\n },\n onBlur: nextDisabled\n ? undefined\n : () => {\n nextFocused.current = false;\n },\n 'aria-label': i18n('Next'),\n 'aria-disabled': previousDisabled ? 'true' : undefined,\n };\n\n return {\n calendarProps,\n modeButtonProps,\n nextButtonProps,\n previousButtonProps,\n };\n}\n\nfunction getAriaDescriptionForModeButton(mode: CalendarLayout, availableModes: CalendarLayout[]) {\n const nextModeIndex = availableModes.indexOf(mode) + 1;\n const isModeLast = nextModeIndex === availableModes.length;\n if (isModeLast) {\n return undefined;\n }\n\n const ariaLabelMap: Record<CalendarLayout, string> = {\n days: '',\n months: i18n('Switch to months view'),\n quarters: i18n('Switch to quarters view'),\n years: i18n('Switch to years view'),\n };\n const nextMode = availableModes[nextModeIndex];\n return ariaLabelMap[nextMode];\n}\n"]}
1	+ {"version":3,"file":"useCalendarProps.js","sourceRoot":"../../../../../src","sources":["components/CalendarView/hooks/useCalendarProps.ts"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\n\nimport {useFocusWithin, useLang} from '@gravity-ui/uikit';\nimport type {ButtonButtonProps} from '@gravity-ui/uikit';\n\nimport type {CalendarProps} from '../../Calendar/Calendar';\nimport {formatDateTime} from '../../utils/dates';\nimport {filterDOMProps} from '../../utils/filterDOMProps';\nimport {i18n} from '../i18n';\n\nimport type {CalendarLayout, CalendarState, RangeCalendarState} from './types';\n\nconst buttonDisabledClassName = 'yc-button_disabled g-button_disabled';\n\nexport function useCalendarProps(props: CalendarProps, state: CalendarState \| RangeCalendarState) {\n const {lang} = useLang();\n const title =\n state.mode === 'years' \|\| state.mode === 'quarters'\n ? `${state.startDate.year()} — ${state.endDate.year()}`\n : formatDateTime(\n state.focusedDate,\n state.mode === 'days' ? 'MMMM YYYY' : 'YYYY',\n state.timeZone,\n lang,\n );\n\n const {focusWithinProps} = useFocusWithin({\n onFocusWithin: props.onFocus,\n onBlurWithin: props.onBlur,\n });\n\n const calendarProps: React.HTMLAttributes<HTMLElement> = {\n ...filterDOMProps(props, {labelable: true}),\n role: 'group',\n 'aria-label': [props['aria-label'], title].filter(Boolean).join(', '),\n 'aria-disabled': state.disabled \|\| undefined,\n ...focusWithinProps,\n };\n\n const modeIndex = state.availableModes.indexOf(state.mode);\n const isModeLast = modeIndex + 1 === state.availableModes.length;\n const isNextModeLast = modeIndex + 2 === state.availableModes.length;\n const modeDisabled = state.disabled \|\| isModeLast;\n\n const modeButtonProps: ButtonButtonProps = {\n // Always set a tabIndex so that Safari allows focusing native buttons\n tabIndex: 0,\n disabled: state.disabled,\n // FIXME: do not use button class name\n className: modeDisabled ? buttonDisabledClassName : undefined,\n onClick: modeDisabled\n ? undefined\n : () => {\n state.zoomOut();\n if (isNextModeLast) {\n state.setFocused(true);\n }\n },\n 'aria-disabled': modeDisabled ? 'true' : undefined,\n 'aria-description': useAriaDescriptionForModeButton(state.mode, state.availableModes),\n 'aria-live': 'polite',\n children: title,\n };\n\n const previousFocused = React.useRef(false);\n const previousDisabled = state.disabled \|\| state.isPreviousPageInvalid();\n\n React.useLayoutEffect(() => {\n if (previousDisabled && previousFocused.current) {\n previousFocused.current = false;\n state.setFocused(true);\n }\n });\n\n const {t} = i18n.useTranslation();\n\n const previousButtonProps: ButtonButtonProps = {\n // Always set a tabIndex so that Safari allows focusing native buttons\n tabIndex: 0,\n disabled: state.disabled,\n // FIXME: do not use button class name\n className: previousDisabled ? buttonDisabledClassName : undefined,\n onClick: previousDisabled\n ? undefined\n : () => {\n state.focusPreviousPage();\n },\n onFocus: previousDisabled\n ? undefined\n : () => {\n previousFocused.current = true;\n },\n onBlur: previousDisabled\n ? undefined\n : () => {\n previousFocused.current = false;\n },\n 'aria-label': t('Previous'),\n 'aria-disabled': previousDisabled ? 'true' : undefined,\n };\n\n const nextFocused = React.useRef(false);\n const nextDisabled = state.disabled \|\| state.isNextPageInvalid();\n\n React.useLayoutEffect(() => {\n if (nextDisabled && nextFocused.current) {\n nextFocused.current = false;\n state.setFocused(true);\n }\n });\n\n const nextButtonProps: ButtonButtonProps = {\n // Always set a tabIndex so that Safari allows focusing native buttons\n tabIndex: 0,\n disabled: state.disabled,\n // FIXME: do not use button class name\n className: nextDisabled ? buttonDisabledClassName : undefined,\n onClick: nextDisabled\n ? undefined\n : () => {\n state.focusNextPage();\n },\n onFocus: nextDisabled\n ? undefined\n : () => {\n nextFocused.current = true;\n },\n onBlur: nextDisabled\n ? undefined\n : () => {\n nextFocused.current = false;\n },\n 'aria-label': t('Next'),\n 'aria-disabled': previousDisabled ? 'true' : undefined,\n };\n\n return {\n calendarProps,\n modeButtonProps,\n nextButtonProps,\n previousButtonProps,\n };\n}\n\nfunction useAriaDescriptionForModeButton(mode: CalendarLayout, availableModes: CalendarLayout[]) {\n const {t} = i18n.useTranslation();\n\n const nextModeIndex = availableModes.indexOf(mode) + 1;\n const isModeLast = nextModeIndex === availableModes.length;\n if (isModeLast) {\n return undefined;\n }\n\n const ariaLabelMap: Record<CalendarLayout, string> = {\n days: '',\n months: t('Switch to months view'),\n quarters: t('Switch to quarters view'),\n years: t('Switch to years view'),\n };\n const nextMode = availableModes[nextModeIndex];\n return ariaLabelMap[nextMode];\n}\n"]}

package/dist/esm/components/CalendarView/i18n/index.d.ts CHANGED Viewed

@@ -1,4 +1,12 @@
 export declare const i18n: ((key: "Previous" | "Next" | "Switch to months view" | "Switch to quarters view" | "Switch to years view", params?: import("@gravity-ui/i18n").Params) => string) & {
+    Translation: import("react").ComponentType<{
+        children: (props: {
+            t: (key: "Previous" | "Next" | "Switch to months view" | "Switch to quarters view" | "Switch to years view", params?: import("@gravity-ui/i18n").Params) => string;
+        }) => React.ReactNode;
+    }>;
+    useTranslation: () => {
+        t: (key: "Previous" | "Next" | "Switch to months view" | "Switch to quarters view" | "Switch to years view", params?: import("@gravity-ui/i18n").Params) => string;
+    };
     keysetData: {
         "g-date-calendar": Record<"Previous" | "Next" | "Switch to months view" | "Switch to quarters view" | "Switch to years view", import("@gravity-ui/i18n").KeyData>;
     };

package/dist/esm/components/DateField/DateField.js CHANGED Viewed

@@ -5,6 +5,7 @@ import React from 'react';
 import { TextInput, useFocusWithin } from '@gravity-ui/uikit';
 import { block } from "../../utils/cn.js";
 import { HiddenInput } from "../HiddenInput/HiddenInput.js";
+import { filterDOMProps } from "../utils/filterDOMProps.js";
 import { useDateFieldProps } from "./hooks/useDateFieldProps.js";
 import { useDateFieldState } from "./hooks/useDateFieldState.js";
 import "./DateField.css";
@@ -19,7 +20,9 @@ export function DateField(_a) {
             setActive(isFocusWithin);
         },
     });
-    return (_jsxs("div", Object.assign({ className: b(null, className), style: props.style }, focusWithinProps, { children: [_jsx(TextInput, Object.assign({}, inputProps, { value: state.isEmpty && !isActive && props.placeholder ? '' : inputProps.value })), _jsx(HiddenInput, { name: props.name, value: state.value, toStringValue: (value) => { var _a; return (_a = value === null || value === void 0 ? void 0 : value.toISOString()) !== null && _a !== void 0 ? _a : ''; }, onReset: (value) => {
+    const DOMProps = filterDOMProps(props);
+    delete DOMProps.id;
+    return (_jsxs("div", Object.assign({}, DOMProps, { className: b(null, className), style: props.style }, focusWithinProps, { children: [_jsx(TextInput, Object.assign({}, inputProps, { value: state.isEmpty && !isActive && props.placeholder ? '' : inputProps.value })), _jsx(HiddenInput, { name: props.name, value: state.value, toStringValue: (value) => { var _a; return (_a = value === null || value === void 0 ? void 0 : value.toISOString()) !== null && _a !== void 0 ? _a : ''; }, onReset: (value) => {
                     state.setDate(value);
                 }, disabled: state.disabled, form: props.form })] })));
 }

package/dist/esm/components/DateField/DateField.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DateField.js","sourceRoot":"../../../../src","sources":["components/DateField/DateField.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;AAEb,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAC,SAAS,EAAE,cAAc,EAAC,MAAM,mBAAmB,CAAC;AAE5D,OAAO,EAAC,KAAK,EAAC,0BAAuB;AACrC,OAAO,EAAC,WAAW,EAAC,sCAAmC;AAEvD,OAAO,EAAC,iBAAiB,EAAC,qCAAkC;AAE5D,OAAO,EAAC,iBAAiB,EAAC,qCAAkC;AAE5D,yBAA0B;AAE1B,MAAM,CAAC,GAAG,KAAK,CAAC,YAAY,CAAC,CAAC;AAE9B,MAAM,UAAU,SAAS,CAAC,EAAqC;QAArC,EAAC,SAAS,OAA2B,EAAtB,KAAK,cAApB,aAAqB,CAAD;IAC1C,MAAM,KAAK,GAAG,iBAAiB,CAAC,KAAK,CAAC,CAAC;IAEvC,MAAM,EAAC,UAAU,EAAC,GAAG,iBAAiB,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;IAErD,MAAM,CAAC,QAAQ,EAAE,SAAS,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IACpD,MAAM,EAAC,gBAAgB,EAAC,GAAG,cAAc,CAAC;QACtC,mBAAmB,CAAC,aAAa;YAC7B,SAAS,CAAC,aAAa,CAAC,CAAC;QAC7B,CAAC;KACJ,CAAC,CAAC;IAEH,OAAO,CACH,~~6BAAK~~,SAAS,EAAE,CAAC,CAAC,IAAI,EAAE,SAAS,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,IAAM,gBAAgB,~~eACxE~~,KAAC,SAAS,oBACF,UAAU,IACd,KAAK,EAAE,KAAK,CAAC,OAAO,IAAI,CAAC,QAAQ,IAAI,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,UAAU,CAAC,KAAK,IAChF,EACF,KAAC,WAAW,IACR,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,aAAa,EAAE,CAAC,KAAK,EAAE,EAAE,WAAC,OAAA,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,WAAW,EAAE,mCAAI,EAAE,CAAA,EAAA,EACpD,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE;oBACf,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;gBACzB,CAAC,EACD,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,IAAI,EAAE,KAAK,CAAC,IAAI,GAClB,KACA,CACT,CAAC;AACN,CAAC","sourcesContent":["'use client';\n\nimport React from 'react';\n\nimport {TextInput, useFocusWithin} from '@gravity-ui/uikit';\n\nimport {block} from '../../utils/cn';\nimport {HiddenInput} from '../HiddenInput/HiddenInput';\n\nimport {useDateFieldProps} from './hooks/useDateFieldProps';\nimport type {DateFieldProps} from './hooks/useDateFieldProps';\nimport {useDateFieldState} from './hooks/useDateFieldState';\n\nimport './DateField.scss';\n\nconst b = block('date-field');\n\nexport function DateField({className, ...props}: DateFieldProps) {\n const state = useDateFieldState(props);\n\n const {inputProps} = useDateFieldProps(state, props);\n\n const [isActive, setActive] = React.useState(false);\n const {focusWithinProps} = useFocusWithin({\n onFocusWithinChange(isFocusWithin) {\n setActive(isFocusWithin);\n },\n });\n\n return (\n <div className={b(null, className)} style={props.style} {...focusWithinProps}>\n <TextInput\n {...inputProps}\n value={state.isEmpty && !isActive && props.placeholder ? '' : inputProps.value}\n />\n <HiddenInput\n name={props.name}\n value={state.value}\n toStringValue={(value) => value?.toISOString() ?? ''}\n onReset={(value) => {\n state.setDate(value);\n }}\n disabled={state.disabled}\n form={props.form}\n />\n </div>\n );\n}\n"]}
1	+ {"version":3,"file":"DateField.js","sourceRoot":"../../../../src","sources":["components/DateField/DateField.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;AAEb,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAC,SAAS,EAAE,cAAc,EAAC,MAAM,mBAAmB,CAAC;AAE5D,OAAO,EAAC,KAAK,EAAC,0BAAuB;AACrC,OAAO,EAAC,WAAW,EAAC,sCAAmC;AACvD,OAAO,EAAC,cAAc,EAAC,mCAAgC;AAEvD,OAAO,EAAC,iBAAiB,EAAC,qCAAkC;AAE5D,OAAO,EAAC,iBAAiB,EAAC,qCAAkC;AAE5D,yBAA0B;AAE1B,MAAM,CAAC,GAAG,KAAK,CAAC,YAAY,CAAC,CAAC;AAE9B,MAAM,UAAU,SAAS,CAAC,EAAqC;QAArC,EAAC,SAAS,OAA2B,EAAtB,KAAK,cAApB,aAAqB,CAAD;IAC1C,MAAM,KAAK,GAAG,iBAAiB,CAAC,KAAK,CAAC,CAAC;IAEvC,MAAM,EAAC,UAAU,EAAC,GAAG,iBAAiB,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;IAErD,MAAM,CAAC,QAAQ,EAAE,SAAS,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IACpD,MAAM,EAAC,gBAAgB,EAAC,GAAG,cAAc,CAAC;QACtC,mBAAmB,CAAC,aAAa;YAC7B,SAAS,CAAC,aAAa,CAAC,CAAC;QAC7B,CAAC;KACJ,CAAC,CAAC;IAEH,MAAM,QAAQ,GAAG,cAAc,CAAC,KAAK,CAAC,CAAC;IACvC,OAAO,QAAQ,CAAC,EAAE,CAAC;IAEnB,OAAO,CACH,+BAAS,QAAQ,IAAE,SAAS,EAAE,CAAC,CAAC,IAAI,EAAE,SAAS,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,IAAM,gBAAgB,eACtF,KAAC,SAAS,oBACF,UAAU,IACd,KAAK,EAAE,KAAK,CAAC,OAAO,IAAI,CAAC,QAAQ,IAAI,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,UAAU,CAAC,KAAK,IAChF,EACF,KAAC,WAAW,IACR,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,aAAa,EAAE,CAAC,KAAK,EAAE,EAAE,WAAC,OAAA,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,WAAW,EAAE,mCAAI,EAAE,CAAA,EAAA,EACpD,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE;oBACf,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;gBACzB,CAAC,EACD,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,IAAI,EAAE,KAAK,CAAC,IAAI,GAClB,KACA,CACT,CAAC;AACN,CAAC","sourcesContent":["'use client';\n\nimport React from 'react';\n\nimport {TextInput, useFocusWithin} from '@gravity-ui/uikit';\n\nimport {block} from '../../utils/cn';\nimport {HiddenInput} from '../HiddenInput/HiddenInput';\nimport {filterDOMProps} from '../utils/filterDOMProps';\n\nimport {useDateFieldProps} from './hooks/useDateFieldProps';\nimport type {DateFieldProps} from './hooks/useDateFieldProps';\nimport {useDateFieldState} from './hooks/useDateFieldState';\n\nimport './DateField.scss';\n\nconst b = block('date-field');\n\nexport function DateField({className, ...props}: DateFieldProps) {\n const state = useDateFieldState(props);\n\n const {inputProps} = useDateFieldProps(state, props);\n\n const [isActive, setActive] = React.useState(false);\n const {focusWithinProps} = useFocusWithin({\n onFocusWithinChange(isFocusWithin) {\n setActive(isFocusWithin);\n },\n });\n\n const DOMProps = filterDOMProps(props);\n delete DOMProps.id;\n\n return (\n <div {...DOMProps} className={b(null, className)} style={props.style} {...focusWithinProps}>\n <TextInput\n {...inputProps}\n value={state.isEmpty && !isActive && props.placeholder ? '' : inputProps.value}\n />\n <HiddenInput\n name={props.name}\n value={state.value}\n toStringValue={(value) => value?.toISOString() ?? ''}\n onReset={(value) => {\n state.setDate(value);\n }}\n disabled={state.disabled}\n form={props.form}\n />\n </div>\n );\n}\n"]}

package/dist/esm/components/DateField/i18n/index.d.ts CHANGED Viewed

@@ -1,4 +1,12 @@
 export declare const i18n: ((key: "year_placeholder" | "quarter_placeholder" | "month_placeholder" | "weekday_placeholder" | "day_placeholder" | "hour_placeholder" | "minute_placeholder" | "second_placeholder" | "dayPeriod_placeholder", params?: import("@gravity-ui/i18n").Params) => string) & {
+    Translation: import("react").ComponentType<{
+        children: (props: {
+            t: (key: "year_placeholder" | "quarter_placeholder" | "month_placeholder" | "weekday_placeholder" | "day_placeholder" | "hour_placeholder" | "minute_placeholder" | "second_placeholder" | "dayPeriod_placeholder", params?: import("@gravity-ui/i18n").Params) => string;
+        }) => React.ReactNode;
+    }>;
+    useTranslation: () => {
+        t: (key: "year_placeholder" | "quarter_placeholder" | "month_placeholder" | "weekday_placeholder" | "day_placeholder" | "hour_placeholder" | "minute_placeholder" | "second_placeholder" | "dayPeriod_placeholder", params?: import("@gravity-ui/i18n").Params) => string;
+    };
     keysetData: {
         "g-date-date-field": Record<"year_placeholder" | "quarter_placeholder" | "month_placeholder" | "weekday_placeholder" | "day_placeholder" | "hour_placeholder" | "minute_placeholder" | "second_placeholder" | "dayPeriod_placeholder", import("@gravity-ui/i18n").KeyData>;
     };

package/dist/esm/components/DateField/utils.d.ts CHANGED Viewed

@@ -1,4 +1,6 @@
 import type { DateTime } from '@gravity-ui/date-utils';
+import type { ExtractFunctionType } from "../types/index.js";
+import { i18n } from "./i18n/index.js";
 import type { AvailableSections, DateFieldSection, DateFieldSectionType, DateFieldSectionWithoutPosition, FormatInfo } from "./types.js";
 export declare const EDITABLE_SEGMENTS: AvailableSections;
 export declare function getSectionLimits(section: DateFieldSectionWithoutPosition, date: DateTime): {
@@ -12,7 +14,8 @@ export declare function getSectionValue(section: DateFieldSectionWithoutPosition
 export declare function getDurationUnitFromSectionType(type: DateFieldSectionType): "year" | "month" | "day" | "hour" | "minute" | "second" | "quarter" | "date";
 export declare function addSegment(section: DateFieldSection, date: DateTime, amount: number): DateTime;
 export declare function setSegment(section: DateFieldSection, date: DateTime, amount: number): DateTime;
-export declare function splitFormatIntoSections(format: string): DateFieldSectionWithoutPosition[];
+type TranslateFunction = ExtractFunctionType<typeof i18n>;
+export declare function splitFormatIntoSections(format: string, t?: TranslateFunction, lang?: string): DateFieldSectionWithoutPosition[];
 export declare function cleanString(dirtyString: string): string;
 export declare function getEditableSections(sections: DateFieldSectionWithoutPosition[], value: DateTime, validSegments: AvailableSections): DateFieldSection[];
 export declare function isEditableSection(section: DateFieldSectionWithoutPosition): boolean;
@@ -38,3 +41,4 @@ export declare function markValidSection(allSections: AvailableSections, editabl
     timeZoneName?: boolean | undefined;
     unknown?: boolean | undefined;
 };
+export {};

package/dist/esm/components/DateField/utils.js CHANGED Viewed

@@ -1,5 +1,7 @@
 import React from 'react';
 import { dateTime, expandFormat } from '@gravity-ui/date-utils';
+import dayjs from '@gravity-ui/date-utils/build/dayjs/index.js';
+import { useLang } from '@gravity-ui/uikit';
 import { mergeDateTime } from "../utils/dates.js";
 import { i18n } from "./i18n/index.js";
 export const EDITABLE_SEGMENTS = {
@@ -291,43 +293,44 @@ function doesSectionHaveLeadingZeros(contentType, sectionType, format) {
         }
     }
 }
-function getSectionPlaceholder(sectionConfig, currentTokenValue) {
+function getSectionPlaceholder(sectionConfig, currentTokenValue, t) {
     switch (sectionConfig.type) {
         case 'year': {
-            return i18n('year_placeholder').repeat(dateTime().format(currentTokenValue).length);
+            return t('year_placeholder').repeat(dateTime().format(currentTokenValue).length);
         }
         case 'quarter': {
-            return i18n('quarter_placeholder');
+            return t('quarter_placeholder');
         }
         case 'month': {
-            return i18n('month_placeholder').repeat(sectionConfig.contentType === 'letter' ? 4 : 2);
+            return t('month_placeholder').repeat(sectionConfig.contentType === 'letter' ? 4 : 2);
         }
         case 'day': {
-            return i18n('day_placeholder').repeat(2);
+            return t('day_placeholder').repeat(2);
         }
         case 'weekday': {
-            return i18n('weekday_placeholder').repeat(sectionConfig.contentType === 'letter' ? 4 : 2);
+            return t('weekday_placeholder').repeat(sectionConfig.contentType === 'letter' ? 4 : 2);
         }
         case 'hour': {
-            return i18n('hour_placeholder').repeat(2);
+            return t('hour_placeholder').repeat(2);
         }
         case 'minute': {
-            return i18n('minute_placeholder').repeat(2);
+            return t('minute_placeholder').repeat(2);
         }
         case 'second': {
-            return i18n('second_placeholder').repeat(2);
+            return t('second_placeholder').repeat(2);
         }
         case 'dayPeriod': {
-            return i18n('dayPeriod_placeholder');
+            return t('dayPeriod_placeholder');
         }
         default: {
             return currentTokenValue;
         }
     }
 }
-export function splitFormatIntoSections(format) {
+export function splitFormatIntoSections(format, t = i18n, lang = 'en') {
     const sections = [];
-    const expandedFormat = expandFormat(format);
+    const localeFormats = dayjs.Ls[lang].formats;
+    const expandedFormat = expandFormat(format, localeFormats);
     let currentTokenValue = '';
     let isSeparator = false;
     let isInEscapeBoundary = false;
@@ -350,7 +353,7 @@ export function splitFormatIntoSections(format) {
         }
         else {
             if (!isSeparator) {
-                addFormatSection(sections, currentTokenValue);
+                addFormatSection(sections, currentTokenValue, t);
                 currentTokenValue = '';
             }
             isSeparator = true;
@@ -367,18 +370,18 @@ export function splitFormatIntoSections(format) {
             addLiteralSection(sections, currentTokenValue);
         }
         else {
-            addFormatSection(sections, currentTokenValue);
+            addFormatSection(sections, currentTokenValue, t);
         }
     }
     return sections;
 }
-function addFormatSection(sections, token) {
+function addFormatSection(sections, token, t) {
     if (!token) {
         return;
     }
     const sectionConfig = getDateSectionConfigFromFormatToken(token);
     const hasLeadingZeros = doesSectionHaveLeadingZeros(sectionConfig.contentType, sectionConfig.type, token);
-    sections.push(Object.assign(Object.assign({}, sectionConfig), { format: token, placeholder: getSectionPlaceholder(sectionConfig, token), options: getSectionOptions(sectionConfig, token), hasLeadingZeros }));
+    sections.push(Object.assign(Object.assign({}, sectionConfig), { format: token, placeholder: getSectionPlaceholder(sectionConfig, token, t), options: getSectionOptions(sectionConfig, token), hasLeadingZeros }));
 }
 function addLiteralSection(sections, token) {
     if (!token) {
@@ -520,12 +523,13 @@ export function isAllSegmentsValid(allSegments, validSegments) {
     return Object.keys(allSegments).every((key) => validSegments[key]);
 }
 export function useFormatSections(format) {
-    const usedFormat = format;
-    const [sections, setSections] = React.useState(() => splitFormatIntoSections(usedFormat));
-    const [previousFormat, setFormat] = React.useState(usedFormat);
-    if (usedFormat !== previousFormat) {
-        setFormat(usedFormat);
-        setSections(splitFormatIntoSections(usedFormat));
+    const { t } = i18n.useTranslation();
+    const { lang } = useLang();
+    const [sections, setSections] = React.useState(() => splitFormatIntoSections(format, t));
+    const [previous, setFormat] = React.useState({ format, lang });
+    if (format !== previous.format || lang !== previous.lang) {
+        setFormat({ format, lang });
+        setSections(splitFormatIntoSections(format, t, lang));
     }
     return sections;
 }