@astral/ui 1.52.1 → 1.53.1

package/ClickAwayListener/ClickAwayListener.d.ts

@@ -1,7 +1,8 @@
 /// <reference types="react" />
 import { UseClickAwayListenerOptions } from '../hooks';
-export type ClickAwayListenerProps = Omit<UseClickAwayListenerOptions, 'ref'> & {
+export type ClickAwayListenerProps = Omit<UseClickAwayListenerOptions, 'ref' | 'isActive'> & {
     children: JSX.Element;
+    isActive?: boolean;
 };
 /**
  * @description компонент предоставляющий обертку для работы с хуком useClickAwayEffect

package/ClickAwayListener/ClickAwayListener.js

@@ -6,7 +6,7 @@ const hooks_1 = require("../hooks");
 /**
  * @description компонент предоставляющий обертку для работы с хуком useClickAwayEffect
  */
-const ClickAwayListener = ({ onClickAway, preventBubbling, isActive, children, }) => {
+const ClickAwayListener = ({ onClickAway, preventBubbling, isActive = true, children, }) => {
     const ref = (0, react_1.useRef)(null);
     (0, hooks_1.useClickAwayEffect)({ ref, onClickAway, preventBubbling, isActive });
     return react_1.Children.only((0, react_1.cloneElement)(children, { ref }));

package/DatePicker/DatePicker.test.js

@@ -57,6 +57,12 @@ describe('DatePicker', () => {
         const btn = tests_1.screen.getAllByText('9')[0];
         expect(btn).not.toBeDisabled();
     }));
+    it('Props:maxDate: в пикере выбранной отображается правильная выбранная дата при использовании даты со смещением', () => __awaiter(void 0, void 0, void 0, function* () {
+        (0, tests_1.renderWithTheme)((0, jsx_runtime_1.jsx)(DatePicker_1.DatePicker, { value: new Date('2022-12-16T18:59:00Z') }));
+        tests_1.fireEvent.focus(tests_1.screen.getByRole('textbox'));
+        const selected = tests_1.screen.getAllByText('16')[0].getAttribute('aria-selected');
+        expect(selected).toBeTruthy();
+    }));
     it('Props:value: при изменении меняется выбранная дата в календаре', () => __awaiter(void 0, void 0, void 0, function* () {
         const callbacks = {
             setValue: () => undefined,

package/DatePicker/DayPicker/hooks/useDaysGrid/useDaysGrid.js

@@ -6,6 +6,7 @@ const counts_1 = require("../../../constants/counts");
 const date_1 = require("../../../../utils/date");
 const buildGridItem_1 = require("../../../utils/buildGridItem");
 const MinMaxDateContext_1 = require("../../../MinMaxDateContext");
+const compareDateDayByUTC_1 = require("../../../utils/compareDateDayByUTC");
 const MAX_ROWS = 6;
 const MAX_DAYS_IN_GRID = MAX_ROWS * counts_1.DAYS_IN_WEEK;
 const useDaysGrid = ({ baseDate, selectedDate, fullSize = false, isMondayFirst = true, }) => {
@@ -80,9 +81,7 @@ const useDaysGrid = ({ baseDate, selectedDate, fullSize = false, isMondayFirst =
             }
             grid.push({
                 isOutOfAvailableRange: dateMonth !== month,
-                selected: !!selectedDate &&
-                    Number(date) >= Number(selectedDate) &&
-                    Number(date) < Number((0, date_1.addDays)(selectedDate, 1)),
+                selected: (0, date_1.isDate)(selectedDate) && (0, compareDateDayByUTC_1.compareDateDayByUTC)(selectedDate, date),
                 isCurrent: date.getUTCFullYear() === currentDate.getFullYear() &&
                     date.getUTCDate() === currentDate.getDate() &&
                     date.getUTCMonth() === currentDate.getMonth(),

package/DatePicker/utils/compareDateDayByUTC/compareDateDayByUTC.d.ts

@@ -0,0 +1,5 @@
+/**
+ * @description утилита для сравнения двух дат на совпадение дня,
+ * пример применения DayPicker, для сравнения выбранной даты и каждой даты в пикере
+ */
+export declare const compareDateDayByUTC: (dateA: Date, dateB: Date) => boolean;

package/DatePicker/utils/compareDateDayByUTC/compareDateDayByUTC.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.compareDateDayByUTC = void 0;
+/**
+ * @description утилита для сравнения двух дат на совпадение дня,
+ * пример применения DayPicker, для сравнения выбранной даты и каждой даты в пикере
+ */
+const compareDateDayByUTC = (dateA, dateB) => dateA.getUTCFullYear() === dateB.getUTCFullYear() &&
+    dateA.getUTCMonth() === dateB.getUTCMonth() &&
+    dateA.getUTCDate() === dateB.getUTCDate();
+exports.compareDateDayByUTC = compareDateDayByUTC;

package/DatePicker/utils/compareDateDayByUTC/index.d.ts

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

package/DatePicker/utils/compareDateDayByUTC/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./compareDateDayByUTC"), exports);

package/esm/ClickAwayListener/ClickAwayListener.d.ts

@@ -1,7 +1,8 @@
 /// <reference types="react" />
 import { UseClickAwayListenerOptions } from '../hooks';
-export type ClickAwayListenerProps = Omit<UseClickAwayListenerOptions, 'ref'> & {
+export type ClickAwayListenerProps = Omit<UseClickAwayListenerOptions, 'ref' | 'isActive'> & {
     children: JSX.Element;
+    isActive?: boolean;
 };
 /**
  * @description компонент предоставляющий обертку для работы с хуком useClickAwayEffect

package/esm/ClickAwayListener/ClickAwayListener.js

@@ -3,7 +3,7 @@ import { useClickAwayEffect } from '../hooks';
 /**
  * @description компонент предоставляющий обертку для работы с хуком useClickAwayEffect
  */
-export const ClickAwayListener = ({ onClickAway, preventBubbling, isActive, children, }) => {
+export const ClickAwayListener = ({ onClickAway, preventBubbling, isActive = true, children, }) => {
     const ref = useRef(null);
     useClickAwayEffect({ ref, onClickAway, preventBubbling, isActive });
     return Children.only(cloneElement(children, { ref }));

package/esm/DatePicker/DatePicker.test.js

@@ -55,6 +55,12 @@ describe('DatePicker', () => {
         const btn = screen.getAllByText('9')[0];
         expect(btn).not.toBeDisabled();
     }));
+    it('Props:maxDate: в пикере выбранной отображается правильная выбранная дата при использовании даты со смещением', () => __awaiter(void 0, void 0, void 0, function* () {
+        renderWithTheme(_jsx(DatePicker, { value: new Date('2022-12-16T18:59:00Z') }));
+        fireEvent.focus(screen.getByRole('textbox'));
+        const selected = screen.getAllByText('16')[0].getAttribute('aria-selected');
+        expect(selected).toBeTruthy();
+    }));
     it('Props:value: при изменении меняется выбранная дата в календаре', () => __awaiter(void 0, void 0, void 0, function* () {
         const callbacks = {
             setValue: () => undefined,

package/esm/DatePicker/DayPicker/hooks/useDaysGrid/useDaysGrid.js

@@ -1,8 +1,9 @@
 import { useContext, useMemo } from 'react';
 import { DAYS_IN_WEEK, MONTHS_IN_YEAR } from '../../../constants/counts';
-import { DateCompareDeep, addDays, buildIsoDate, isDateOutOfRange, } from '../../../../utils/date';
+import { DateCompareDeep, addDays, buildIsoDate, isDate, isDateOutOfRange, } from '../../../../utils/date';
 import { buildGridResult } from '../../../utils/buildGridItem';
 import { MinMaxDateContext } from '../../../MinMaxDateContext';
+import { compareDateDayByUTC } from '../../../utils/compareDateDayByUTC';
 const MAX_ROWS = 6;
 const MAX_DAYS_IN_GRID = MAX_ROWS * DAYS_IN_WEEK;
 export const useDaysGrid = ({ baseDate, selectedDate, fullSize = false, isMondayFirst = true, }) => {
@@ -77,9 +78,7 @@ export const useDaysGrid = ({ baseDate, selectedDate, fullSize = false, isMonday
             }
             grid.push({
                 isOutOfAvailableRange: dateMonth !== month,
-                selected: !!selectedDate &&
-                    Number(date) >= Number(selectedDate) &&
-                    Number(date) < Number(addDays(selectedDate, 1)),
+                selected: isDate(selectedDate) && compareDateDayByUTC(selectedDate, date),
                 isCurrent: date.getUTCFullYear() === currentDate.getFullYear() &&
                     date.getUTCDate() === currentDate.getDate() &&
                     date.getUTCMonth() === currentDate.getMonth(),

package/esm/DatePicker/utils/compareDateDayByUTC/compareDateDayByUTC.d.ts

@@ -0,0 +1,5 @@
+/**
+ * @description утилита для сравнения двух дат на совпадение дня,
+ * пример применения DayPicker, для сравнения выбранной даты и каждой даты в пикере
+ */
+export declare const compareDateDayByUTC: (dateA: Date, dateB: Date) => boolean;

package/esm/DatePicker/utils/compareDateDayByUTC/compareDateDayByUTC.js

@@ -0,0 +1,7 @@
+/**
+ * @description утилита для сравнения двух дат на совпадение дня,
+ * пример применения DayPicker, для сравнения выбранной даты и каждой даты в пикере
+ */
+export const compareDateDayByUTC = (dateA, dateB) => dateA.getUTCFullYear() === dateB.getUTCFullYear() &&
+    dateA.getUTCMonth() === dateB.getUTCMonth() &&
+    dateA.getUTCDate() === dateB.getUTCDate();

package/esm/DatePicker/utils/compareDateDayByUTC/index.d.ts

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

package/esm/DatePicker/utils/compareDateDayByUTC/index.js

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

package/esm/utils/date/isDate/isDate.js

@@ -2,4 +2,4 @@ import dayjs from 'dayjs';
 /**
  * @description функция проверки значения на дату
  */
-export const isDate = (value) => dayjs(value).isValid();
+export const isDate = (value) => Boolean(value) && dayjs(value).isValid();

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@astral/ui",
-  "version": "1.52.1",
+  "version": "1.53.1",
   "browser": "./esm/index.js",
   "main": "./index.js",
   "dependencies": {
-    "@astral/icons": "^1.52.1",
+    "@astral/icons": "^1.53.1",
     "@emotion/cache": "11.7.1",
     "@emotion/react": "11.9.0",
     "@emotion/server": "11.4.0",

package/utils/date/isDate/isDate.js

@@ -8,5 +8,5 @@ const dayjs_1 = __importDefault(require("dayjs"));
 /**
  * @description функция проверки значения на дату
  */
-const isDate = (value) => (0, dayjs_1.default)(value).isValid();
+const isDate = (value) => Boolean(value) && (0, dayjs_1.default)(value).isValid();
 exports.isDate = isDate;