@homecode/ui 4.17.0 → 4.17.1

package/dist/esm/index.js

@@ -45,6 +45,8 @@ export { env };
 export { config } from './src/tools/config.js';
 import * as array from './src/tools/array.js';
 export { array };
+import * as date from './src/tools/date.js';
+export { date };
 import * as string from './src/tools/string.js';
 export { string };
 import * as number from './src/tools/number.js';

package/dist/esm/src/components/Calendar/Calendar.js

@@ -50,7 +50,7 @@ function Calendar({ className, value, onDayPointerDown, onDayPointerUp, renderDa
                         // @ts-ignore
                         size: size, label: renderYearLabel?.(year) ?? 'Year', value: year, 
                         // @ts-ignore
-                        onChange: onYearChange, onBlur: onYearBlur }), jsx(Select, { className: S.month, size: size, label: renderMonthesLabel?.(month) ?? 'Month', options: monthOptions, value: month, onChange: val => setMonth(val) })] }), jsx("div", { className: S.weekDays, children: weekDaysArray.map((day, weekdayIndex) => (jsx("div", { className: cn(S.day, isWeekend(weekdayIndex) && weekendClassName), children: renderWeekDayLabel?.(day) ?? weekDays[day] }, `weekday-${day}`))) }), jsx("div", { className: S.days, children: daysArray.map((day, weekdayIndex) => {
+                        onChange: onYearChange, onBlur: onYearBlur }), jsx(Select, { className: S.month, size: size, label: renderMonthesLabel?.(month) ?? 'Month', options: monthOptions, value: month, onChange: val => setMonth(val), required: true, hideRequiredStar: true })] }), jsx("div", { className: S.weekDays, children: weekDaysArray.map((day, weekdayIndex) => (jsx("div", { className: cn(S.day, isWeekend(weekdayIndex) && weekendClassName), children: renderWeekDayLabel?.(day) ?? weekDays[day] }, `weekday-${day}`))) }), jsx("div", { className: S.days, children: daysArray.map((day, weekdayIndex) => {
                     const className = cn(S.day, day.currentMonth && S.currMonth, isWeekend(weekdayIndex) && weekendClassName, isSameDay(day, value) && S.selected);
                     const dayProps = { className };
                     if (onDayPointerDown) {

package/dist/esm/src/components/DatePicker/DatePicker.helpers.js

@@ -1,3 +1,14 @@
+function dateToString(date) {
+    return `${date.year}-${date.month}-${date.day}`;
+}
+function strigToDate(dateString) {
+    const [year, month, day] = dateString.split('-');
+    return {
+        year: Number(year),
+        month: Number(month),
+        day: Number(day),
+    };
+}
 function isDateEqual(date1, date2) {
     return (date1.year === date2.year &&
         date1.month === date2.month &&
@@ -17,4 +28,4 @@ function isDateBetween(date, startDate, endDate) {
     return isDateAfter(date, startDate) && isDateBefore(date, endDate);
 }
 
-export { isDateAfter, isDateBefore, isDateBetween, isDateEqual };
+export { dateToString, isDateAfter, isDateBefore, isDateBetween, isDateEqual, strigToDate };

package/dist/esm/src/components/DatePicker/DatePicker.js

@@ -3,7 +3,7 @@ import { useState, useCallback, createElement } from 'react';
 import cn from 'classnames';
 import { Calendar } from '../Calendar/Calendar.js';
 import { Button } from '../Button/Button.js';
-import { isDateAfter, isDateBetween, isDateEqual } from './DatePicker.helpers.js';
+import { dateToString, isDateAfter, strigToDate, isDateBetween, isDateEqual } from './DatePicker.helpers.js';
 import S from './DatePicker.styl.js';
 
 function DatePicker(props) {
@@ -11,32 +11,36 @@ function DatePicker(props) {
     const isRange = Array.isArray(value);
     const [isPicking, setIsPicking] = useState(false);
     const onFirstDateChange = useCallback((val) => {
-        onChange(isRange ? [val, value[1]] : val);
+        const valStr = dateToString(val);
+        onChange(isRange ? [valStr, value[1]] : valStr);
     }, [value, onChange, isRange]);
     const onPointerDown = () => setIsPicking(true);
     const onPointerUp = () => setIsPicking(false);
     const renderDay = useCallback((val, { className, ...props }) => {
         const { day, year, month } = val;
+        const valStr = dateToString(val);
         if (isRange && isPicking) {
             props.onPointerOver = () => {
-                const newVal = isDateAfter(value[0], val)
-                    ? [val, value[0]]
-                    : [value[0], val];
+                const newVal = isDateAfter(strigToDate(value[0]), val)
+                    ? [valStr, value[0]]
+                    : [value[0], valStr];
                 onChange(newVal);
             };
         }
         const classes = [className, S.day];
         if (isRange) {
-            if (isDateBetween(val, ...value))
+            const from = strigToDate(value[0]);
+            const to = strigToDate(value[1]);
+            if (isDateBetween(val, from, to))
                 classes.push(S.between);
-            if (isDateEqual(val, value[0]))
+            if (isDateEqual(val, from))
                 classes.push(S.start);
-            if (isDateEqual(val, value[1]))
+            if (isDateEqual(val, to))
                 classes.push(S.end);
         }
         return (createElement(Button, { ...props, variant: "clear", className: cn(classes), size: size, key: `${year}-${month}-${day}` }, day));
     }, [size, isPicking, isRange, value, onChange]);
-    return (jsxs("div", { className: cn(S.root, props.className), onPointerDown: onPointerDown, onPointerUp: onPointerUp, children: [jsx(Calendar, { size: size, hideOtherMonthDays: isRange, ...calendarProps, renderDay: renderDay, value: isRange ? value[0] : value, onDayPointerDown: onFirstDateChange, onDayPointerUp: undefined }), isRange && (jsx(Calendar, { size: size, hideOtherMonthDays: isRange, ...calendarProps, renderDay: renderDay, value: value[1], onDayPointerDown: val => onChange([value[0], val]), onDayPointerUp: val => onChange([value[0], val]) }))] }));
+    return (jsxs("div", { className: cn(S.root, props.className), onPointerDown: onPointerDown, onPointerUp: onPointerUp, children: [jsx(Calendar, { size: size, hideOtherMonthDays: isRange, ...calendarProps, renderDay: renderDay, value: strigToDate(isRange ? value[0] : value), onDayPointerDown: onFirstDateChange, onDayPointerUp: undefined }), isRange && (jsx(Calendar, { size: size, hideOtherMonthDays: isRange, ...calendarProps, renderDay: renderDay, value: strigToDate(value[1]), onDayPointerDown: val => onChange([value[0], dateToString(val)]), onDayPointerUp: val => onChange([value[0], dateToString(val)]) }))] }));
 }
 
 export { DatePicker };

package/dist/esm/src/components/DatePickerInput/DatePickerInput.js

@@ -1,5 +1,6 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import cn from 'classnames';
+import { strToDate } from '../../tools/date.js';
 import { DateTime } from '../DateTime/DateTime.js';
 import { DatePicker } from '../DatePicker/DatePicker.js';
 import { Button } from '../Button/Button.js';
@@ -9,7 +10,7 @@ import S from './DatePickerInput.styl.js';
 function DatePickerInput(props) {
     const { value, variant = 'default', size = 'm', popupProps, displayFormat = 'MMM Do YYYY', } = props;
     const isRange = Array.isArray(value);
-    return (jsx(Popup, { size: size, focusControl: true, direction: "bottom-right", ...popupProps, trigger: jsx(Button, { variant: variant, size: size, children: isRange ? (jsxs(Fragment, { children: [jsx(DateTime, { value: new Date(value[0].year, value[0].month - 1, value[0].day), format: displayFormat }), ' - ', jsx(DateTime, { value: new Date(value[1].year, value[1].month - 1, value[1].day), format: displayFormat })] })) : (jsx(DateTime, { value: new Date(value.year, value.month - 1, value.day), format: displayFormat })) }), contentProps: {
+    return (jsx(Popup, { size: size, focusControl: true, direction: "bottom-right", ...popupProps, trigger: jsx(Button, { variant: variant, size: size, children: isRange ? (jsxs(Fragment, { children: [jsx(DateTime, { value: strToDate(value[0]), format: displayFormat }), ' - ', jsx(DateTime, { value: strToDate(value[1]), format: displayFormat })] })) : (jsx(DateTime, { value: strToDate(value), format: displayFormat })) }), contentProps: {
             className: cn(S.popupContent, isRange && S.range, S[`size-${size}`]),
         }, content: jsx(DatePicker, { ...props, className: S.content, calendarProps: { className: S.calendar } }) }));
 }

package/dist/esm/src/components/Popup/Popup.js

@@ -242,7 +242,8 @@ class Popup extends Component {
             return;
         }
         // if scrolling outside this popup - close it
-        if (!this.isPointerOver(e.target, S.content)) {
+        if (!this.isPointerOver(e.target, S.content) &&
+            !childs[this.id]?.length) {
             this.needDropOffset = true;
             this.close();
         }
@@ -280,7 +281,7 @@ class Popup extends Component {
         this.focused = false;
         this.props.triggerProps?.onBlur?.(e);
         // give time to fire clicks inside popup
-        this.timers.after(80, () => {
+        this.timers.after(60, () => {
             if (!this.isLastClickInside())
                 this.close();
         });

package/dist/esm/src/tools/date.js

@@ -0,0 +1,11 @@
+/**
+ * Convert ISO 8601 format ("YYYY-MM-DD") to Date object
+ * @param str
+ * @returns Date
+ */
+const strToDate = (str) => {
+    const [year, month, day] = str.split('-').map(Number);
+    return new Date(year, month - 1, day);
+};
+
+export { strToDate };

package/dist/esm/types/src/components/DatePicker/DatePicker.helpers.d.ts

@@ -1,4 +1,10 @@
 import type { Date } from 'uilib/types';
+export declare function dateToString(date: Date): string;
+export declare function strigToDate(dateString: string): {
+    year: number;
+    month: number;
+    day: number;
+};
 export declare function isDateEqual(date1: Date, date2: Date): boolean;
 export declare function isDateBefore(date1: Date, date2: Date): boolean;
 export declare function isDateAfter(date1: Date, date2: Date): boolean;

package/dist/esm/types/src/components/DatePicker/DatePicker.types.d.ts

@@ -1,6 +1,6 @@
-import type { Size, Date } from 'uilib/types';
+import type { Size } from 'uilib/types';
 import type { Props as CalendarProps } from 'uilib/components/Calendar/Calendar.types';
-export type Value = Date | [Date, Date];
+export type Value = string | [string, string];
 export type Props = {
     className?: string;
     value: Value;

package/dist/esm/types/src/components/DatePickerInput/DatePickerInput.types.d.ts

@@ -1,6 +1,6 @@
-import type { Date, Size, Variant } from 'uilib/types';
+import type { Size, Variant } from 'uilib/types';
 import type { Props as PopupProps } from 'uilib/components/Popup/Popup.types';
-export type Value = Date | [Date, Date];
+export type Value = string | [string, string];
 export type Props = {
     className?: string;
     size?: Size;

package/dist/esm/types/src/components/Icon/Icon.example.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 declare const _default: () => JSX.Element;
 export default _default;

package/dist/esm/types/src/tools/date.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Convert ISO 8601 format ("YYYY-MM-DD") to Date object
+ * @param str
+ * @returns Date
+ */
+export declare const strToDate: (str: string) => Date;

package/dist/esm/types/src/tools/index.d.ts

@@ -1,6 +1,7 @@
 export * as env from './env';
 export { config } from './config';
 export * as array from './array';
+export * as date from './date';
 export * as string from './string';
 export * as number from './number';
 export * as object from './object';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@homecode/ui",
-  "version": "4.17.0",
+  "version": "4.17.1",
   "description": "React UI components library",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",