@ozen-ui/kit 0.46.0 → 0.47.0

package/__inner__/esm/components/Calendar/components/CalendarSwitcher/CalendarSwitcher.js

@@ -0,0 +1,51 @@
+import { __assign, __read, __rest } from "tslib";
+import './CalendarSwitcher.css';
+import React, { forwardRef, useContext } from 'react';
+import { ChevronLeftIcon, ChevronRightIcon } from '@ozen-ui/icons';
+import { useDatePickerContext } from '@rehookify/datepicker';
+import { capitalizeFirstLetter as capitalize } from '../../../../utils/capitalizeFirstLetter';
+import { cn } from '../../../../utils/classname';
+import { Button } from '../../../ButtonNext';
+import { IconButton } from '../../../IconButtonNext';
+import { Typography } from '../../../Typography';
+import { CalendarContext } from '../../CalendarContext';
+import { getPeriodSwitchAriaLabel as createPeriodSwitchAriaLabel } from './utils';
+export var cnCalendarSwitcher = cn('CalendarSwitcher');
+export var CalendarSwitcher = forwardRef(function (_a, ref) {
+    var _b, _c;
+    var className = _a.className, _d = _a.getPeriodSwitchAriaLabel, getPeriodSwitchAriaLabel = _d === void 0 ? createPeriodSwitchAriaLabel : _d, other = __rest(_a, ["className", "getPeriodSwitchAriaLabel"]);
+    var _e = useContext(CalendarContext), step = _e.step, goStep = _e.goStep, size = _e.size;
+    var _f = useDatePickerContext(), _g = _f.data, calendars = _g.calendars, years = _g.years, _h = _f.propGetters, subtractOffset = _h.subtractOffset, addOffset = _h.addOffset, nextYearsButton = _h.nextYearsButton, previousYearsButton = _h.previousYearsButton;
+    var _j = calendars[0] || {}, year = _j.year, month = _j.month;
+    var handleClickOnMonths = function () {
+        goStep === null || goStep === void 0 ? void 0 : goStep('months');
+    };
+    var handleClickOnYears = function () {
+        goStep === null || goStep === void 0 ? void 0 : goStep('years');
+    };
+    var _k = __read(getPeriodSwitchAriaLabel(step), 2), PREVIOUS = _k[0], NEXT = _k[1];
+    return (React.createElement("div", __assign({ className: cnCalendarSwitcher({ size: size }, [className]) }, other, { ref: ref }),
+        step === 'days' && (React.createElement(React.Fragment, null,
+            React.createElement("div", { className: cnCalendarSwitcher('StartActions') },
+                React.createElement(Button, { variant: "function", type: "button", color: "primary", onClick: handleClickOnMonths, size: size }, month && capitalize(month)),
+                React.createElement(Button, { variant: "function", type: "button", color: "primary", onClick: handleClickOnYears, size: size }, year)),
+            React.createElement("div", { className: cnCalendarSwitcher('EndActions') },
+                React.createElement(IconButton, __assign({ variant: "function", type: "button", color: "primary", icon: ChevronLeftIcon, size: size, "aria-label": PREVIOUS, title: PREVIOUS }, subtractOffset({ months: 1 }))),
+                React.createElement(IconButton, __assign({ variant: "function", color: "primary", icon: ChevronRightIcon, size: size, "aria-label": NEXT, title: NEXT }, addOffset({ months: 1 })))))),
+        step === 'months' && (React.createElement(React.Fragment, null,
+            React.createElement("div", { className: cnCalendarSwitcher('StartActions') },
+                React.createElement(Button, { variant: "function", type: "button", color: "primary", onClick: handleClickOnYears, size: size }, year)),
+            React.createElement("div", { className: cnCalendarSwitcher('EndActions') },
+                React.createElement(IconButton, __assign({ variant: "function", type: "button", color: "primary", icon: ChevronLeftIcon, size: size, "aria-label": PREVIOUS, title: PREVIOUS }, subtractOffset({ years: 1 }))),
+                React.createElement(IconButton, __assign({ variant: "function", type: "button", color: "primary", icon: ChevronRightIcon, size: size, "aria-label": NEXT, title: NEXT }, addOffset({ years: 1 })))))),
+        step === 'years' && (React.createElement(React.Fragment, null,
+            React.createElement("div", { className: cnCalendarSwitcher('StartActions') },
+                React.createElement(Typography, __assign({ color: "primary" }, (size && { variant: "text-".concat(size) })), (_b = years === null || years === void 0 ? void 0 : years[0]) === null || _b === void 0 ? void 0 :
+                    _b.year,
+                    " - ", (_c = years === null || years === void 0 ? void 0 : years[years.length - 1]) === null || _c === void 0 ? void 0 :
+                    _c.year)),
+            React.createElement("div", { className: cnCalendarSwitcher('EndActions') },
+                React.createElement(IconButton, __assign({ variant: "function", type: "button", color: "primary", icon: ChevronLeftIcon, size: size, "aria-label": PREVIOUS, title: PREVIOUS }, previousYearsButton())),
+                React.createElement(IconButton, __assign({ variant: "function", type: "button", color: "primary", icon: ChevronRightIcon, size: size, "aria-label": NEXT, title: NEXT }, nextYearsButton())))))));
+});
+CalendarSwitcher.displayName = 'CalendarSwitcher';

package/__inner__/esm/components/Calendar/components/CalendarSwitcher/index.d.ts

@@ -0,0 +1 @@
+export * from './CalendarSwitcher';

package/__inner__/esm/components/Calendar/components/CalendarSwitcher/index.js

@@ -0,0 +1 @@
+export * from './CalendarSwitcher';

package/__inner__/esm/components/Calendar/components/CalendarSwitcher/utils.d.ts

@@ -0,0 +1,2 @@
+import type { CalendarStepVariant } from '../../index';
+export declare const getPeriodSwitchAriaLabel: (step: CalendarStepVariant) => string[];

package/__inner__/esm/components/Calendar/components/CalendarSwitcher/utils.js

@@ -0,0 +1,9 @@
+export var getPeriodSwitchAriaLabel = function (step) {
+    if (step === 'days') {
+        return ['Previous month', 'Next month'];
+    }
+    if (step === 'months') {
+        return ['Previous year', 'Next year'];
+    }
+    return ['Previous period', 'Next period'];
+};

package/__inner__/esm/components/Calendar/components/index.d.ts

@@ -0,0 +1,4 @@
+export * from './CalendarItem';
+export * from './CalendarSwitcher';
+export * from './CalendarGrid';
+export * from './CalendarAdditionalControls';

package/__inner__/esm/components/Calendar/components/index.js

@@ -0,0 +1,4 @@
+export * from './CalendarItem';
+export * from './CalendarSwitcher';
+export * from './CalendarGrid';
+export * from './CalendarAdditionalControls';

package/__inner__/esm/components/Calendar/constants.d.ts

@@ -0,0 +1,4 @@
+export declare const CALENDAR_DEFAULT_AS = "div";
+export declare const CALENDAR_DEFAULT_START_DAY = 1;
+export declare const CALENDAR_ITEM_DEFAULT_TAG = "button";
+export declare const CALENDAR_DEFAULT_SIZE = "m";

package/__inner__/esm/components/Calendar/constants.js

@@ -0,0 +1,4 @@
+export var CALENDAR_DEFAULT_AS = 'div';
+export var CALENDAR_DEFAULT_START_DAY = 1;
+export var CALENDAR_ITEM_DEFAULT_TAG = 'button';
+export var CALENDAR_DEFAULT_SIZE = 'm';

package/__inner__/esm/components/Calendar/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Calendar';
+export * from './types';

package/__inner__/esm/components/Calendar/index.js

@@ -0,0 +1,2 @@
+export * from './Calendar';
+export * from './types';

package/__inner__/esm/components/Calendar/types.d.ts

@@ -0,0 +1,54 @@
+import type { ElementType, MouseEvent, ReactElement } from 'react';
+import type { DPExcludeConfig, DPDayInteger } from '@rehookify/datepicker';
+import type { PolymorphicComponentPropsWithoutRef } from '../../utils/polymorphicComponentWithRef';
+import type { CalendarSwitcherProps } from './components';
+import type { CALENDAR_DEFAULT_AS } from './constants';
+export declare const calendarStepVariant: readonly ["days", "months", "years"];
+export declare const calendarSizeVariant: readonly ["s", "m", "l"];
+export type CalendarStepVariant = (typeof calendarStepVariant)[number];
+export type CalendarOnChange = (date: Date) => void;
+export type CalendarOnOffsetDateChange = (date: Date) => void;
+export type CalendarSizeVariant = (typeof calendarSizeVariant)[number];
+export type CalendarExclude = DPExcludeConfig;
+export type CalendarStartDay = DPDayInteger;
+export type CalendarRenderAdditionalControls = (props: {
+    date?: Date;
+}) => ReactElement;
+export type CalendarBaseProps = {
+    /** Выбранная дата */
+    value?: Date | null;
+    /** Выбранная дата по умолчанию (неконтролируемое состояние) */
+    defaultValue?: Date;
+    /** Смещение календаря – на какой странице показать календарь */
+    offsetDate?: Date;
+    /** Смещение календаря по умолчанию */
+    defaultOffsetDate?: Date;
+    /** Обработчик событий выбора даты */
+    onChange?: CalendarOnChange;
+    /** Обработчик событий на смещение календаря */
+    onOffsetDateChange?: CalendarOnOffsetDateChange;
+    /** Локализация */
+    locale?: Intl.LocalesArgument;
+    /** Первый день недели календаря */
+    startDay?: CalendarStartDay;
+    /** Размер */
+    size?: CalendarSizeVariant;
+    /** Исключенные даты календаря */
+    exclude?: CalendarExclude;
+    /** Ограничение выбора дат по меньшей дате */
+    minDate?: Date;
+    /** Ограничение выбора дат по большей дате */
+    maxDate?: Date;
+    /** Обработчик нажатия на кнопку месяца */
+    onMonthClick?: (e: MouseEvent<HTMLElement>, date: Date) => void;
+    /** Обработчик нажатия на кнопку дня */
+    onDayClick?: (e: MouseEvent<HTMLElement>, date: Date) => void;
+    /** Обработчик нажатия на кнопку года */
+    onYearClick?: (e: MouseEvent<HTMLElement>, date: Date) => void;
+    /** Дополнительные контролы – рендер функция */
+    renderAdditionalControls?: CalendarRenderAdditionalControls;
+    /** Cвойства компонента CalendarSwitcher */
+    calendarSwitcherProps?: CalendarSwitcherProps;
+    children?: never;
+};
+export type CalendarProps<As extends ElementType = typeof CALENDAR_DEFAULT_AS> = PolymorphicComponentPropsWithoutRef<CalendarBaseProps, As>;

package/__inner__/esm/components/Calendar/types.js

@@ -0,0 +1,2 @@
+export var calendarStepVariant = ['days', 'months', 'years'];
+export var calendarSizeVariant = ['s', 'm', 'l'];

package/__inner__/esm/components/ThemeProvider/types.d.ts

@@ -6,6 +6,7 @@ import type { BackdropProps } from '../Backdrop';
 import type { BadgeProps } from '../Badge';
 import type { ButtonProps } from '../Button';
 import type { ButtonProps as ButtonPropsNext } from '../ButtonNext';
+import type { CalendarProps } from '../Calendar';
 import type { CardProps } from '../Card';
 import type { CheckboxProps } from '../Checkbox';
 import type { CheckboxGroupProps } from '../CheckboxGroup';
@@ -75,6 +76,7 @@ export type Theme = {
         Badge?: Partial<BadgeProps>;
         Button?: Partial<ButtonProps>;
         ButtonNext?: Partial<ButtonPropsNext>;
+        Calendar?: Partial<CalendarProps>;
         Card?: Partial<CardProps>;
         Checkbox?: Partial<CheckboxProps>;
         CheckboxGroup?: Partial<CheckboxGroupProps>;

package/__inner__/esm/locale/locale.js

@@ -51,6 +51,20 @@ export var ruRU = {
                 return '';
             },
         },
+        Calendar: {
+            locale: 'ru-RU',
+            calendarSwitcherProps: {
+                getPeriodSwitchAriaLabel: function (step) {
+                    if (step === 'days') {
+                        return ['Предыдущий месяц', 'Следующий месяц'];
+                    }
+                    if (step === 'months') {
+                        return ['Предыдущий год', 'Следующий год'];
+                    }
+                    return ['Предыдущий период', 'Следующий период'];
+                },
+            },
+        },
     },
 };
 export var kkKZ = {
@@ -105,6 +119,20 @@ export var kkKZ = {
                 return '';
             },
         },
+        Calendar: {
+            locale: 'kk-KZ',
+            calendarSwitcherProps: {
+                getPeriodSwitchAriaLabel: function (step) {
+                    if (step === 'days') {
+                        return ['Алдыңғы ай', 'Келесі ай'];
+                    }
+                    if (step === 'months') {
+                        return ['Өткен жыл', 'Келесі жыл'];
+                    }
+                    return ['Алдыңғы кезең', 'Келесі кезең'];
+                },
+            },
+        },
     },
 };
 export var enUS = {
@@ -159,5 +187,20 @@ export var enUS = {
                 return '';
             },
         },
+        Calendar: {
+            locale: 'en-US',
+            startDay: 0,
+            calendarSwitcherProps: {
+                getPeriodSwitchAriaLabel: function (step) {
+                    if (step === 'days') {
+                        return ['Previous month', 'Next month'];
+                    }
+                    if (step === 'months') {
+                        return ['Previous year', 'Next year'];
+                    }
+                    return ['Previous period', 'Next period'];
+                },
+            },
+        },
     },
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ozen-ui/kit",
-  "version": "0.46.0",
+  "version": "0.47.0",
   "description": "React component library",
   "files": [
     "*"
@@ -22,14 +22,15 @@
     "@bem-react/classname": "^1.6.0",
     "@bem-react/classnames": "^1.3.10",
     "@popperjs/core": "^2.11.8",
+    "@rehookify/datepicker": "^6.6.1",
     "decimal.js": "^10.4.3",
     "react-is": "^18.2.0",
     "react-popper": "^2.3.0",
     "react-transition-group": "^4.4.5",
     "tslib": "^2.6.2",
-    "@ozen-ui/fonts": "0.46.0",
-    "@ozen-ui/icons": "0.46.0",
-    "@ozen-ui/logger": "0.46.0"
+    "@ozen-ui/fonts": "0.47.0",
+    "@ozen-ui/logger": "0.47.0",
+    "@ozen-ui/icons": "0.47.0"
   },
   "peerDependencies": {
     "react": ">=17.0.2 <19.0.0",

package/DatePicker/package.json

@@ -1,5 +0,0 @@
-{
-	"main": "../__inner__/cjs/components/DatePicker/index.js",
-	"module": "../__inner__/esm/components/DatePicker/index.js",
-	"types": "../__inner__/esm/components/DatePicker/index.d.ts"
-}