@skbkontur/react-ui 4.9.1 → 4.9.2-theme2022.2

package/components/TooltipMenu/TooltipMenu.d.ts

@@ -1,69 +1,69 @@
-import React from 'react';
-import { PopupMenuProps } from '../../internal/PopupMenu';
-import { MenuItemProps } from '../MenuItem';
-import { MenuHeaderProps } from '../MenuHeader';
-import { PopupPositionsType } from '../../internal/Popup';
-import { CommonProps } from '../../internal/CommonWrapper';
-export declare type TooltipMenuChildType = React.ReactElement<MenuItemProps | unknown | MenuHeaderProps>;
-export interface TooltipMenuProps extends CommonProps, Pick<PopupMenuProps, 'onOpen' | 'onClose'> {
-    children?: TooltipMenuChildType | TooltipMenuChildType[];
-    /** Максимальная высота меню */
-    menuMaxHeight?: number | string;
-    /** Ширина меню */
-    menuWidth?: number | string;
-    /**
-     * Элемент или функция возвращающая элемент,
-     * если передана, используется вместо `caption`,
-     * в таком случае управлять открытием и закрытием меню
-     * придется в этой функции
-     */
-    caption: PopupMenuProps['caption'];
-    /**
-     * Произвольный элемент, который будет отрендерен в шапке меню.
-     *
-     * _Примечание_: контрол [`MenuHeader`](#/Components/MenuHeader) передаётся только в `children` меню-контролов. Не стоит передавать `MenuHeader` в `header`.
-     */
-    header?: React.ReactNode;
-    /**
-     * Произвольный элемент, который будет отрендерен в подвале меню.
-     *
-     * Перед элементом переданным в `footer` будет отрендерен [`MenuSeparator`](#/Components/MenuSeparator).
-     */
-    footer?: React.ReactNode;
-    /**  Список позиций доступных для расположения выпадашки относительно `caption`.
-     *
-     * Если во всех позициях выпадашка вылезает за пределы `viewport`, будет использована первая из этого списка.
-     *
-     * **Возможные значения**: `top left`, `top center`, `top right`, `right top`, `right middle`, `right bottom`, `bottom left`, `bottom center`, `bottom right`, `left top`, `left middle`, `left bottom`
-     */
-    positions?: PopupPositionsType[];
-    /**
-     * Не показывать анимацию
-     */
-    disableAnimations?: boolean;
-}
-export declare const TooltipMenuDataTids: {
-    readonly root: "TooltipMenu__root";
-};
-declare type DefaultProps = Required<Pick<TooltipMenuProps, 'disableAnimations'>>;
-/**
- * Меню, раскрывающееся по клику на переданный в `caption` элемент.
- *
- * Положение меню задаётся с помощью массива `positions` и работает так:
- * первое значение в массиве - дефолтная позиция, меню раскроется на этой позиции, если оно не будет выходить за пределы `viewport`,
- * если раскрыться в дефолтной позиции не получится - будет использована следующая позиция, и так далее, пока не будет достигнут конец массива. Если все положения из списка будут выходить за пределы `viewport`, в качестве положения будет использовано первое значение в массиве.
- *
- * Если меню должно раскрываться только в одну сторону - массив `positions` должен содержать только один элемент: сторону, в которую должно открываться меню.
- *
- * Если массив `positions` не передан (или передан пустой массив), будут использованы всевозможные значения.
- */
-export declare class TooltipMenu extends React.Component<TooltipMenuProps> {
-    static __KONTUR_REACT_UI__: string;
-    private setRootNode;
-    static defaultProps: DefaultProps;
-    private getProps;
-    constructor(props: TooltipMenuProps);
-    render(): JSX.Element;
-    renderMain(): JSX.Element | null;
-}
-export {};
+import React from 'react';
+import { PopupMenuProps } from '../../internal/PopupMenu';
+import { MenuItemProps } from '../MenuItem';
+import { MenuHeaderProps } from '../MenuHeader';
+import { PopupPositionsType } from '../../internal/Popup';
+import { CommonProps } from '../../internal/CommonWrapper';
+export declare type TooltipMenuChildType = React.ReactElement<MenuItemProps | unknown | MenuHeaderProps>;
+export interface TooltipMenuProps extends CommonProps, Pick<PopupMenuProps, 'onOpen' | 'onClose'> {
+    children?: TooltipMenuChildType | TooltipMenuChildType[];
+    /** Максимальная высота меню */
+    menuMaxHeight?: number | string;
+    /** Ширина меню */
+    menuWidth?: number | string;
+    /**
+     * Элемент или функция возвращающая элемент,
+     * если передана, используется вместо `caption`,
+     * в таком случае управлять открытием и закрытием меню
+     * придется в этой функции
+     */
+    caption: PopupMenuProps['caption'];
+    /**
+     * Произвольный элемент, который будет отрендерен в шапке меню.
+     *
+     * _Примечание_: контрол [`MenuHeader`](#/Components/MenuHeader) передаётся только в `children` меню-контролов. Не стоит передавать `MenuHeader` в `header`.
+     */
+    header?: React.ReactNode;
+    /**
+     * Произвольный элемент, который будет отрендерен в подвале меню.
+     *
+     * Перед элементом переданным в `footer` будет отрендерен [`MenuSeparator`](#/Components/MenuSeparator).
+     */
+    footer?: React.ReactNode;
+    /**  Список позиций доступных для расположения выпадашки относительно `caption`.
+     *
+     * Если во всех позициях выпадашка вылезает за пределы `viewport`, будет использована первая из этого списка.
+     *
+     * **Возможные значения**: `top left`, `top center`, `top right`, `right top`, `right middle`, `right bottom`, `bottom left`, `bottom center`, `bottom right`, `left top`, `left middle`, `left bottom`
+     */
+    positions?: PopupPositionsType[];
+    /**
+     * Не показывать анимацию
+     */
+    disableAnimations?: boolean;
+}
+export declare const TooltipMenuDataTids: {
+    readonly root: "TooltipMenu__root";
+};
+declare type DefaultProps = Required<Pick<TooltipMenuProps, 'disableAnimations'>>;
+/**
+ * Меню, раскрывающееся по клику на переданный в `caption` элемент.
+ *
+ * Положение меню задаётся с помощью массива `positions` и работает так:
+ * первое значение в массиве - дефолтная позиция, меню раскроется на этой позиции, если оно не будет выходить за пределы `viewport`,
+ * если раскрыться в дефолтной позиции не получится - будет использована следующая позиция, и так далее, пока не будет достигнут конец массива. Если все положения из списка будут выходить за пределы `viewport`, в качестве положения будет использовано первое значение в массиве.
+ *
+ * Если меню должно раскрываться только в одну сторону - массив `positions` должен содержать только один элемент: сторону, в которую должно открываться меню.
+ *
+ * Если массив `positions` не передан (или передан пустой массив), будут использованы всевозможные значения.
+ */
+export declare class TooltipMenu extends React.Component<TooltipMenuProps> {
+    static __KONTUR_REACT_UI__: string;
+    private setRootNode;
+    static defaultProps: DefaultProps;
+    private getProps;
+    constructor(props: TooltipMenuProps);
+    render(): JSX.Element;
+    renderMain(): JSX.Element | null;
+}
+export {};

package/components/TooltipMenu/index.d.ts

@@ -1 +1 @@
-export * from './TooltipMenu';
+export * from './TooltipMenu';

package/hooks/useDrop.d.ts

@@ -1,11 +1,11 @@
-import { MutableRefObject } from 'react';
-interface IUseDropProps {
-    onDrop?: (event: Event) => void;
-}
-declare type IElementWithListener = Pick<HTMLElement, 'addEventListener' | 'removeEventListener'>;
-interface IUseDropResult<TElement extends IElementWithListener> {
-    isDraggable: boolean;
-    ref: MutableRefObject<TElement | null>;
-}
-export declare const useDrop: <TElement extends IElementWithListener>(props?: IUseDropProps) => IUseDropResult<TElement>;
-export {};
+import { MutableRefObject } from 'react';
+interface IUseDropProps {
+    onDrop?: (event: Event) => void;
+}
+declare type IElementWithListener = Pick<HTMLElement, 'addEventListener' | 'removeEventListener'>;
+interface IUseDropResult<TElement extends IElementWithListener> {
+    isDraggable: boolean;
+    ref: MutableRefObject<TElement | null>;
+}
+export declare const useDrop: <TElement extends IElementWithListener>(props?: IUseDropProps) => IUseDropResult<TElement>;
+export {};

package/hooks/useEffectWithoutInitCall.d.ts

@@ -1,2 +1,2 @@
-import { DependencyList } from 'react';
-export declare const useEffectWithoutInitCall: (effect: () => void, deps: DependencyList) => void;
+import { DependencyList } from 'react';
+export declare const useEffectWithoutInitCall: (effect: () => void, deps: DependencyList) => void;

package/hooks/useMemoObject.d.ts

@@ -1,2 +1,2 @@
-import { AnyObject } from '../lib/utils';
-export declare const useMemoObject: <TObject extends AnyObject>(objectValue: TObject) => TObject;
+import { AnyObject } from '../lib/utils';
+export declare const useMemoObject: <TObject extends AnyObject>(objectValue: TObject) => TObject;

package/index.d.ts

@@ -1,56 +1,56 @@
-export * from './components/Autocomplete';
-export * from './components/Button';
-export * from './components/Center';
-export * from './components/Checkbox';
-export * from './components/ComboBox';
-export * from './components/CurrencyInput';
-export * from './components/CurrencyLabel';
-export * from './components/DateInput';
-export * from './components/DatePicker';
-export * from './components/Dropdown';
-export * from './components/DropdownMenu';
-export * from './components/FileUploader';
-export * from './components/FxInput';
-export * from './components/Gapped';
-export * from './components/GlobalLoader';
-export * from './components/Group';
-export * from './components/Hint';
-export * from './components/Input';
-export * from './components/Kebab';
-export * from './components/Link';
-export * from './components/Loader';
-export * from './components/MenuHeader';
-export * from './components/MenuItem';
-export * from './components/MenuSeparator';
-export * from './components/Modal';
-export * from './components/Paging';
-export * from './components/PasswordInput';
-export * from './components/Radio';
-export * from './components/RadioGroup';
-export * from './components/ScrollContainer';
-export * from './components/Select';
-export * from './components/SidePage';
-export * from './components/Spinner';
-export * from './components/Sticky';
-export * from './components/Switcher';
-export * from './components/Tabs';
-export * from './components/Textarea';
-export * from './components/Toast';
-export * from './components/Toggle';
-export * from './components/Token';
-export * from './components/TokenInput';
-export * from './components/Tooltip';
-export * from './components/TooltipMenu';
-export * from './components/ResponsiveLayout';
-export * from './lib/locale';
-export * from './lib/theming/ThemeContext';
-export * from './lib/theming/ThemeFactory';
-export * from './lib/theming/themes/DefaultTheme';
-export * from './lib/theming/themes/DarkTheme';
-export * from './lib/theming/themes/DefaultTheme8pxOld';
-export * from './lib/theming/themes/FlatTheme8pxOld';
-export * from './lib/theming/themes/Theme2022';
-export * from './lib/theming/themes/Theme2022Dark';
-export * from './internal/Popup/types';
-export * as ColorFunctions from './lib/styles/ColorFunctions';
-export * as DimensionFunctions from './lib/styles/DimensionFunctions';
+export * from './components/Autocomplete';
+export * from './components/Button';
+export * from './components/Center';
+export * from './components/Checkbox';
+export * from './components/ComboBox';
+export * from './components/CurrencyInput';
+export * from './components/CurrencyLabel';
+export * from './components/DateInput';
+export * from './components/DatePicker';
+export * from './components/Dropdown';
+export * from './components/DropdownMenu';
+export * from './components/FileUploader';
+export * from './components/FxInput';
+export * from './components/Gapped';
+export * from './components/GlobalLoader';
+export * from './components/Group';
+export * from './components/Hint';
+export * from './components/Input';
+export * from './components/Kebab';
+export * from './components/Link';
+export * from './components/Loader';
+export * from './components/MenuHeader';
+export * from './components/MenuItem';
+export * from './components/MenuSeparator';
+export * from './components/Modal';
+export * from './components/Paging';
+export * from './components/PasswordInput';
+export * from './components/Radio';
+export * from './components/RadioGroup';
+export * from './components/ScrollContainer';
+export * from './components/Select';
+export * from './components/SidePage';
+export * from './components/Spinner';
+export * from './components/Sticky';
+export * from './components/Switcher';
+export * from './components/Tabs';
+export * from './components/Textarea';
+export * from './components/Toast';
+export * from './components/Toggle';
+export * from './components/Token';
+export * from './components/TokenInput';
+export * from './components/Tooltip';
+export * from './components/TooltipMenu';
+export * from './components/ResponsiveLayout';
+export * from './lib/locale';
+export * from './lib/theming/ThemeContext';
+export * from './lib/theming/ThemeFactory';
+export * from './lib/theming/themes/DefaultTheme';
+export * from './lib/theming/themes/DarkTheme';
+export * from './lib/theming/themes/DefaultTheme8pxOld';
+export * from './lib/theming/themes/FlatTheme8pxOld';
+export * from './lib/theming/themes/Theme2022';
+export * from './lib/theming/themes/Theme2022Dark';
+export * from './internal/Popup/types';
+export * as ColorFunctions from './lib/styles/ColorFunctions';
+export * as DimensionFunctions from './lib/styles/DimensionFunctions';

package/internal/BGRuler.d.ts

@@ -1,28 +1,28 @@
-import React from 'react';
-export interface BGRulerProps {
-    width?: string | number;
-    height?: string | number;
-    top?: string | number;
-    bottom?: string | number;
-    right?: string | number;
-    left?: string | number;
-    color?: string;
-}
-declare type DefaultProps = Required<Pick<BGRulerProps, 'height' | 'top' | 'left' | 'right' | 'color'>>;
-/**
- * Компонент рисует пиксельную линейку на заднем фоне.
- * Помогает контролировать размеры элементов при скриншотном тестировании.
- *
- * @see FxInput/__stories__/FxInput.stories.tsx
- */
-export declare class BGRuler extends React.Component<BGRulerProps> {
-    static defaultProps: DefaultProps;
-    private getProps;
-    private iframe;
-    componentDidMount: () => void;
-    componentWillUnmount: () => void;
-    update: () => void;
-    render(): JSX.Element;
-    private iframeRef;
-}
-export {};
+import React from 'react';
+export interface BGRulerProps {
+    width?: string | number;
+    height?: string | number;
+    top?: string | number;
+    bottom?: string | number;
+    right?: string | number;
+    left?: string | number;
+    color?: string;
+}
+declare type DefaultProps = Required<Pick<BGRulerProps, 'height' | 'top' | 'left' | 'right' | 'color'>>;
+/**
+ * Компонент рисует пиксельную линейку на заднем фоне.
+ * Помогает контролировать размеры элементов при скриншотном тестировании.
+ *
+ * @see FxInput/__stories__/FxInput.stories.tsx
+ */
+export declare class BGRuler extends React.Component<BGRulerProps> {
+    static defaultProps: DefaultProps;
+    private getProps;
+    private iframe;
+    componentDidMount: () => void;
+    componentWillUnmount: () => void;
+    update: () => void;
+    render(): JSX.Element;
+    private iframeRef;
+}
+export {};

package/internal/Calendar/Calendar.d.ts

@@ -1,63 +1,63 @@
-import React from 'react';
-import { Nullable } from '../../typings/utility-types';
-import { MonthViewModel } from './MonthViewModel';
-import { CalendarDateShape } from './CalendarDateShape';
-export interface CalendarProps {
-    initialMonth?: number;
-    initialYear?: number;
-    onSelect?: (date: CalendarDateShape) => void;
-    value?: Nullable<CalendarDateShape>;
-    maxDate?: CalendarDateShape;
-    minDate?: CalendarDateShape;
-    isHoliday?: (day: CalendarDateShape & {
-        isWeekend: boolean;
-    }) => boolean;
-}
-export interface CalendarState {
-    scrollPosition: number;
-    months: MonthViewModel[];
-    today: CalendarDateShape;
-    scrollDirection: number;
-    scrollTarget: number;
-    touchStart: number;
-}
-export declare const CalendarDataTids: {
-    readonly root: "Calendar";
-    readonly month: "MonthView__month";
-    readonly headerMonth: "MonthView__headerMonth";
-    readonly headerYear: "MonthView__headerYear";
-};
-declare type DefaultProps = Required<Pick<CalendarProps, 'minDate' | 'maxDate'>>;
-export declare class Calendar extends React.Component<CalendarProps, CalendarState> {
-    static __KONTUR_REACT_UI__: string;
-    static defaultProps: DefaultProps;
-    private getProps;
-    private theme;
-    private wheelEndTimeout;
-    private root;
-    private animation;
-    private touchStartY;
-    constructor(props: CalendarProps);
-    componentWillUnmount(): void;
-    render(): JSX.Element;
-    /**
-     * Scrolls calendar to given date
-     * @public
-     */
-    scrollToMonth: (month: number, year: number) => Promise<void>;
-    private renderMain;
-    private refRoot;
-    private renderMonth;
-    private getMonthPositions;
-    private handleMonthYearChange;
-    private executeAnimations;
-    private handleTouchStart;
-    private handleTouchMove;
-    private throttledHandleTouchMove;
-    private handleWheel;
-    private handleWheelEnd;
-    private scrollToNearestWeek;
-    private scrollTo;
-    private scrollAmount;
-}
-export {};
+import React from 'react';
+import { Nullable } from '../../typings/utility-types';
+import { MonthViewModel } from './MonthViewModel';
+import { CalendarDateShape } from './CalendarDateShape';
+export interface CalendarProps {
+    initialMonth?: number;
+    initialYear?: number;
+    onSelect?: (date: CalendarDateShape) => void;
+    value?: Nullable<CalendarDateShape>;
+    maxDate?: CalendarDateShape;
+    minDate?: CalendarDateShape;
+    isHoliday?: (day: CalendarDateShape & {
+        isWeekend: boolean;
+    }) => boolean;
+}
+export interface CalendarState {
+    scrollPosition: number;
+    months: MonthViewModel[];
+    today: CalendarDateShape;
+    scrollDirection: number;
+    scrollTarget: number;
+    touchStart: number;
+}
+export declare const CalendarDataTids: {
+    readonly root: "Calendar";
+    readonly month: "MonthView__month";
+    readonly headerMonth: "MonthView__headerMonth";
+    readonly headerYear: "MonthView__headerYear";
+};
+declare type DefaultProps = Required<Pick<CalendarProps, 'minDate' | 'maxDate'>>;
+export declare class Calendar extends React.Component<CalendarProps, CalendarState> {
+    static __KONTUR_REACT_UI__: string;
+    static defaultProps: DefaultProps;
+    private getProps;
+    private theme;
+    private wheelEndTimeout;
+    private root;
+    private animation;
+    private touchStartY;
+    constructor(props: CalendarProps);
+    componentWillUnmount(): void;
+    render(): JSX.Element;
+    /**
+     * Scrolls calendar to given date
+     * @public
+     */
+    scrollToMonth: (month: number, year: number) => Promise<void>;
+    private renderMain;
+    private refRoot;
+    private renderMonth;
+    private getMonthPositions;
+    private handleMonthYearChange;
+    private executeAnimations;
+    private handleTouchStart;
+    private handleTouchMove;
+    private throttledHandleTouchMove;
+    private handleWheel;
+    private handleWheelEnd;
+    private scrollToNearestWeek;
+    private scrollTo;
+    private scrollAmount;
+}
+export {};

package/internal/Calendar/Calendar.styles.d.ts

@@ -1,5 +1,5 @@
-import { Theme } from '../../lib/theming/Theme';
-export declare const styles: {
-    root(t: Theme): string;
-    wrapper(): string;
-};
+import { Theme } from '../../lib/theming/Theme';
+export declare const styles: {
+    root(t: Theme): string;
+    wrapper(): string;
+};

package/internal/Calendar/CalendarDateShape.d.ts

@@ -1,14 +1,14 @@
-import { Nullable } from '../../typings/utility-types';
-export interface CalendarDateShape {
-    year: number;
-    month: number;
-    date: number;
-}
-export declare const isEqual: (a: Nullable<CalendarDateShape>, b: Nullable<CalendarDateShape>) => boolean | null | undefined;
-export declare const comparator: (a: CalendarDateShape, b: CalendarDateShape) => 0 | 1 | -1;
-export declare const create: (date: number, month: number, year: number) => CalendarDateShape;
-export declare const isLess: (left: CalendarDateShape, right: CalendarDateShape) => boolean;
-export declare const isLessOrEqual: (left: CalendarDateShape, right: CalendarDateShape) => boolean | null | undefined;
-export declare const isGreater: (left: CalendarDateShape, right: CalendarDateShape) => boolean;
-export declare const isGreaterOrEqual: (left: CalendarDateShape, right: CalendarDateShape) => boolean;
-export declare const isBetween: (date: CalendarDateShape, left?: Nullable<CalendarDateShape>, right?: Nullable<CalendarDateShape>) => boolean;
+import { Nullable } from '../../typings/utility-types';
+export interface CalendarDateShape {
+    year: number;
+    month: number;
+    date: number;
+}
+export declare const isEqual: (a: Nullable<CalendarDateShape>, b: Nullable<CalendarDateShape>) => boolean | null | undefined;
+export declare const comparator: (a: CalendarDateShape, b: CalendarDateShape) => 0 | 1 | -1;
+export declare const create: (date: number, month: number, year: number) => CalendarDateShape;
+export declare const isLess: (left: CalendarDateShape, right: CalendarDateShape) => boolean;
+export declare const isLessOrEqual: (left: CalendarDateShape, right: CalendarDateShape) => boolean | null | undefined;
+export declare const isGreater: (left: CalendarDateShape, right: CalendarDateShape) => boolean;
+export declare const isGreaterOrEqual: (left: CalendarDateShape, right: CalendarDateShape) => boolean;
+export declare const isBetween: (date: CalendarDateShape, left?: Nullable<CalendarDateShape>, right?: Nullable<CalendarDateShape>) => boolean;

package/internal/Calendar/CalendarScrollEvents.d.ts

@@ -1,4 +1,4 @@
-export declare function addListener(callback: () => void): {
-    remove(): void;
-};
-export declare function emit(): void;
+export declare function addListener(callback: () => void): {
+    remove(): void;
+};
+export declare function emit(): void;

package/internal/Calendar/CalendarUtils.d.ts

@@ -1,19 +1,19 @@
-import { Theme } from '../../lib/theming/Theme';
-import { MonthViewModel } from './MonthViewModel';
-import { CalendarProps, CalendarState } from './Calendar';
-export declare const calculateScrollPosition: (months: MonthViewModel[], scrollPosition: number, deltaY: number, theme: Theme) => {
-    scrollPosition: number;
-    months: MonthViewModel[];
-    scrollDirection: number;
-};
-export declare const applyDelta: (deltaY: number, theme: Theme) => ({ scrollPosition, months }: Readonly<CalendarState>, { minDate, maxDate }: CalendarProps) => {
-    scrollPosition: number;
-    months: MonthViewModel[];
-    scrollDirection: number;
-} | {
-    scrollPosition: number;
-    scrollDirection: number;
-};
-export declare const isMonthVisible: (top: number, month: MonthViewModel, theme: Theme) => boolean;
-export declare const getMonthsHeight: (months: MonthViewModel[], theme: Theme) => number;
-export declare const getMonths: (month: number, year: number) => MonthViewModel[];
+import { Theme } from '../../lib/theming/Theme';
+import { MonthViewModel } from './MonthViewModel';
+import { CalendarProps, CalendarState } from './Calendar';
+export declare const calculateScrollPosition: (months: MonthViewModel[], scrollPosition: number, deltaY: number, theme: Theme) => {
+    scrollPosition: number;
+    months: MonthViewModel[];
+    scrollDirection: number;
+};
+export declare const applyDelta: (deltaY: number, theme: Theme) => ({ scrollPosition, months }: Readonly<CalendarState>, { minDate, maxDate }: CalendarProps) => {
+    scrollPosition: number;
+    months: MonthViewModel[];
+    scrollDirection: number;
+} | {
+    scrollPosition: number;
+    scrollDirection: number;
+};
+export declare const isMonthVisible: (top: number, month: MonthViewModel, theme: Theme) => boolean;
+export declare const getMonthsHeight: (months: MonthViewModel[], theme: Theme) => number;
+export declare const getMonths: (month: number, year: number) => MonthViewModel[];

package/internal/Calendar/DayCellView/DayCellView.js

@@ -1,8 +1,9 @@
 import React, { useContext } from 'react';
 import { ThemeContext } from "../../../lib/theming/ThemeContext";
 import { cx } from "../../../lib/theming/Emotion";
+import { isTheme2022 } from "../../../lib/theming/ThemeHelpers";
 import * as CDS from "../CalendarDateShape";
-import { styles } from "../DayCellView.styles";
+import { globalClasses, styles } from "../DayCellView.styles";
 export function DayCellView(props) {
   var _cx;
 
@@ -15,6 +16,8 @@ export function DayCellView(props) {
       onDateClick = props.onDateClick;
   var theme = useContext(ThemeContext);
 
+  var _isTheme2022 = isTheme2022(theme);
+
   var handleClick = function handleClick() {
     var _props$date = props.date,
         date = _props$date.date,
@@ -27,10 +30,14 @@ export function DayCellView(props) {
     });
   };
 
+  var child = _isTheme2022 ? /*#__PURE__*/React.createElement("span", {
+    className: cx(globalClasses.todayCaption, styles.todayCaption())
+  }, date.date) : date.date;
+  var isToday = Boolean(today && CDS.isEqual(date, today));
   return /*#__PURE__*/React.createElement("button", {
     tabIndex: -1,
     disabled: !CDS.isBetween(date, minDate, maxDate),
-    className: cx((_cx = {}, _cx[styles.cell(theme)] = true, _cx[styles.today(theme)] = Boolean(today && CDS.isEqual(date, today)), _cx[styles.selected(theme)] = Boolean(value && CDS.isEqual(date, value)), _cx[styles.weekend(theme)] = Boolean(isWeekend), _cx)),
+    className: cx((_cx = {}, _cx[styles.cell(theme)] = true, _cx[styles.today(theme)] = isToday && !_isTheme2022, _cx[styles.today2022()] = isToday && _isTheme2022, _cx[styles.selected(theme)] = Boolean(value && CDS.isEqual(date, value)), _cx[styles.weekend(theme)] = Boolean(isWeekend), _cx)),
     onClick: handleClick
-  }, date.date);
+  }, child);
 }

package/internal/Calendar/DayCellView/DayCellView.js.map

@@ -1 +1 @@
-{"version":3,"sources":["DayCellView.tsx"],"names":["React","useContext","ThemeContext","cx","CDS","styles","DayCellView","props","date","minDate","maxDate","today","value","isWeekend","onDateClick","theme","handleClick","month","year","isBetween","cell","Boolean","isEqual","selected","weekend"],"mappings":"AAAA,OAAOA,KAAP,IAAgBC,UAAhB,QAAkC,OAAlC;;;AAGA,SAASC,YAAT,QAA6B,gCAA7B;AACA,SAASC,EAAT,QAAmB,2BAAnB;;AAEA,OAAO,KAAKC,GAAZ,MAAqB,qBAArB;AACA,SAASC,MAAT,QAAuB,sBAAvB;;;;;;;;;;;;AAYA,OAAO,SAASC,WAAT,CAAqBC,KAArB,EAA8C;AACnD,MAAQC,IAAR,GAAyED,KAAzE,CAAQC,IAAR,CAAcC,OAAd,GAAyEF,KAAzE,CAAcE,OAAd,CAAuBC,OAAvB,GAAyEH,KAAzE,CAAuBG,OAAvB,CAAgCC,KAAhC,GAAyEJ,KAAzE,CAAgCI,KAAhC,CAAuCC,KAAvC,GAAyEL,KAAzE,CAAuCK,KAAvC,CAA8CC,SAA9C,GAAyEN,KAAzE,CAA8CM,SAA9C,CAAyDC,WAAzD,GAAyEP,KAAzE,CAAyDO,WAAzD;AACA,MAAMC,KAAK,GAAGd,UAAU,CAACC,YAAD,CAAxB;;AAEA,MAAMc,WAAW,GAAG,SAAdA,WAAc,GAAM;AACxB,sBAA8BT,KAAK,CAACC,IAApC,CAAQA,IAAR,eAAQA,IAAR,CAAcS,KAAd,eAAcA,KAAd,CAAqBC,IAArB,eAAqBA,IAArB;AACAJ,IAAAA,WAAW,QAAX,YAAAA,WAAW,CAAG,EAAEN,IAAI,EAAJA,IAAF,EAAQS,KAAK,EAALA,KAAR,EAAeC,IAAI,EAAJA,IAAf,EAAH,CAAX;AACD,GAHD;;AAKA;AACE;AACE,MAAA,QAAQ,EAAE,CAAC,CADb;AAEE,MAAA,QAAQ,EAAE,CAACd,GAAG,CAACe,SAAJ,CAAcX,IAAd,EAAoBC,OAApB,EAA6BC,OAA7B,CAFb;AAGE,MAAA,SAAS,EAAEP,EAAE;AACVE,MAAAA,MAAM,CAACe,IAAP,CAAYL,KAAZ,CADU,IACW,IADX;AAEVV,MAAAA,MAAM,CAACM,KAAP,CAAaI,KAAb,CAFU,IAEYM,OAAO,CAACV,KAAK,IAAIP,GAAG,CAACkB,OAAJ,CAAYd,IAAZ,EAAkBG,KAAlB,CAAV,CAFnB;AAGVN,MAAAA,MAAM,CAACkB,QAAP,CAAgBR,KAAhB,CAHU,IAGeM,OAAO,CAACT,KAAK,IAAIR,GAAG,CAACkB,OAAJ,CAAYd,IAAZ,EAAkBI,KAAlB,CAAV,CAHtB;AAIVP,MAAAA,MAAM,CAACmB,OAAP,CAAeT,KAAf,CAJU,IAIcM,OAAO,CAACR,SAAD,CAJrB,OAHf;;AASE,MAAA,OAAO,EAAEG,WATX;;AAWGR,IAAAA,IAAI,CAACA,IAXR,CADF;;;AAeD","sourcesContent":["import React, { useContext } from 'react';\n\nimport { Nullable } from '../../typings/utility-types';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { cx } from '../../lib/theming/Emotion';\n\nimport * as CDS from './CalendarDateShape';\nimport { styles } from './DayCellView.styles';\n\ninterface DayCellViewProps {\n  date: CDS.CalendarDateShape;\n  today?: CDS.CalendarDateShape;\n  value?: Nullable<CDS.CalendarDateShape>;\n  minDate?: CDS.CalendarDateShape;\n  maxDate?: CDS.CalendarDateShape;\n  onDateClick?: (day: CDS.CalendarDateShape) => void;\n  isWeekend?: boolean;\n}\n\nexport function DayCellView(props: DayCellViewProps) {\n  const { date, minDate, maxDate, today, value, isWeekend, onDateClick } = props;\n  const theme = useContext(ThemeContext);\n\n  const handleClick = () => {\n    const { date, month, year } = props.date;\n    onDateClick?.({ date, month, year });\n  };\n\n  return (\n    <button\n      tabIndex={-1}\n      disabled={!CDS.isBetween(date, minDate, maxDate)}\n      className={cx({\n        [styles.cell(theme)]: true,\n        [styles.today(theme)]: Boolean(today && CDS.isEqual(date, today)),\n        [styles.selected(theme)]: Boolean(value && CDS.isEqual(date, value)),\n        [styles.weekend(theme)]: Boolean(isWeekend),\n      })}\n      onClick={handleClick}\n    >\n      {date.date}\n    </button>\n  );\n}\n"]}
+{"version":3,"sources":["DayCellView.tsx"],"names":["React","useContext","ThemeContext","cx","isTheme2022","CDS","globalClasses","styles","DayCellView","props","date","minDate","maxDate","today","value","isWeekend","onDateClick","theme","_isTheme2022","handleClick","month","year","child","todayCaption","isToday","Boolean","isEqual","isBetween","cell","today2022","selected","weekend"],"mappings":"AAAA,OAAOA,KAAP,IAAgBC,UAAhB,QAAkC,OAAlC;;;AAGA,SAASC,YAAT,QAA6B,gCAA7B;AACA,SAASC,EAAT,QAAmB,2BAAnB;AACA,SAASC,WAAT,QAA4B,gCAA5B;;AAEA,OAAO,KAAKC,GAAZ,MAAqB,qBAArB;AACA,SAASC,aAAT,EAAwBC,MAAxB,QAAsC,sBAAtC;;;;;;;;;;;;AAYA,OAAO,SAASC,WAAT,CAAqBC,KAArB,EAA8C;AACnD,MAAQC,IAAR,GAAyED,KAAzE,CAAQC,IAAR,CAAcC,OAAd,GAAyEF,KAAzE,CAAcE,OAAd,CAAuBC,OAAvB,GAAyEH,KAAzE,CAAuBG,OAAvB,CAAgCC,KAAhC,GAAyEJ,KAAzE,CAAgCI,KAAhC,CAAuCC,KAAvC,GAAyEL,KAAzE,CAAuCK,KAAvC,CAA8CC,SAA9C,GAAyEN,KAAzE,CAA8CM,SAA9C,CAAyDC,WAAzD,GAAyEP,KAAzE,CAAyDO,WAAzD;AACA,MAAMC,KAAK,GAAGhB,UAAU,CAACC,YAAD,CAAxB;AACA,MAAMgB,YAAY,GAAGd,WAAW,CAACa,KAAD,CAAhC;;AAEA,MAAME,WAAW,GAAG,SAAdA,WAAc,GAAM;AACxB,sBAA8BV,KAAK,CAACC,IAApC,CAAQA,IAAR,eAAQA,IAAR,CAAcU,KAAd,eAAcA,KAAd,CAAqBC,IAArB,eAAqBA,IAArB;AACAL,IAAAA,WAAW,QAAX,YAAAA,WAAW,CAAG,EAAEN,IAAI,EAAJA,IAAF,EAAQU,KAAK,EAALA,KAAR,EAAeC,IAAI,EAAJA,IAAf,EAAH,CAAX;AACD,GAHD;;AAKA,MAAMC,KAAK,GAAGJ,YAAY;AACxB,gCAAM,SAAS,EAAEf,EAAE,CAACG,aAAa,CAACiB,YAAf,EAA6BhB,MAAM,CAACgB,YAAP,EAA7B,CAAnB,IAAyEb,IAAI,CAACA,IAA9E,CADwB;;AAGxBA,EAAAA,IAAI,CAACA,IAHP;;;AAMA,MAAMc,OAAO,GAAGC,OAAO,CAACZ,KAAK,IAAIR,GAAG,CAACqB,OAAJ,CAAYhB,IAAZ,EAAkBG,KAAlB,CAAV,CAAvB;;AAEA;AACE;AACE,MAAA,QAAQ,EAAE,CAAC,CADb;AAEE,MAAA,QAAQ,EAAE,CAACR,GAAG,CAACsB,SAAJ,CAAcjB,IAAd,EAAoBC,OAApB,EAA6BC,OAA7B,CAFb;AAGE,MAAA,SAAS,EAAET,EAAE;AACVI,MAAAA,MAAM,CAACqB,IAAP,CAAYX,KAAZ,CADU,IACW,IADX;AAEVV,MAAAA,MAAM,CAACM,KAAP,CAAaI,KAAb,CAFU,IAEYO,OAAO,IAAI,CAACN,YAFxB;AAGVX,MAAAA,MAAM,CAACsB,SAAP,EAHU,IAGWL,OAAO,IAAIN,YAHtB;AAIVX,MAAAA,MAAM,CAACuB,QAAP,CAAgBb,KAAhB,CAJU,IAIeQ,OAAO,CAACX,KAAK,IAAIT,GAAG,CAACqB,OAAJ,CAAYhB,IAAZ,EAAkBI,KAAlB,CAAV,CAJtB;AAKVP,MAAAA,MAAM,CAACwB,OAAP,CAAed,KAAf,CALU,IAKcQ,OAAO,CAACV,SAAD,CALrB,OAHf;;AAUE,MAAA,OAAO,EAAEI,WAVX;;AAYGG,IAAAA,KAZH,CADF;;;AAgBD","sourcesContent":["import React, { useContext } from 'react';\n\nimport { Nullable } from '../../typings/utility-types';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { cx } from '../../lib/theming/Emotion';\nimport { isTheme2022 } from '../../lib/theming/ThemeHelpers';\n\nimport * as CDS from './CalendarDateShape';\nimport { globalClasses, styles } from './DayCellView.styles';\n\ninterface DayCellViewProps {\n  date: CDS.CalendarDateShape;\n  today?: CDS.CalendarDateShape;\n  value?: Nullable<CDS.CalendarDateShape>;\n  minDate?: CDS.CalendarDateShape;\n  maxDate?: CDS.CalendarDateShape;\n  onDateClick?: (day: CDS.CalendarDateShape) => void;\n  isWeekend?: boolean;\n}\n\nexport function DayCellView(props: DayCellViewProps) {\n  const { date, minDate, maxDate, today, value, isWeekend, onDateClick } = props;\n  const theme = useContext(ThemeContext);\n  const _isTheme2022 = isTheme2022(theme);\n\n  const handleClick = () => {\n    const { date, month, year } = props.date;\n    onDateClick?.({ date, month, year });\n  };\n\n  const child = _isTheme2022 ? (\n    <span className={cx(globalClasses.todayCaption, styles.todayCaption())}>{date.date}</span>\n  ) : (\n    date.date\n  );\n\n  const isToday = Boolean(today && CDS.isEqual(date, today));\n\n  return (\n    <button\n      tabIndex={-1}\n      disabled={!CDS.isBetween(date, minDate, maxDate)}\n      className={cx({\n        [styles.cell(theme)]: true,\n        [styles.today(theme)]: isToday && !_isTheme2022,\n        [styles.today2022()]: isToday && _isTheme2022,\n        [styles.selected(theme)]: Boolean(value && CDS.isEqual(date, value)),\n        [styles.weekend(theme)]: Boolean(isWeekend),\n      })}\n      onClick={handleClick}\n    >\n      {child}\n    </button>\n  );\n}\n"]}