@homecode/ui 4.17.0 → 4.17.2

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

@@ -25,7 +25,7 @@ const renderDayDefault = (val, props) => {
     const { day, year, month } = val;
     return (jsx("div", { ...props, children: day }, `${year}-${month}-${day}`));
 };
-function Calendar({ className, value, onDayPointerDown, onDayPointerUp, renderDay, renderWeekDayLabel, renderMonthLabel, renderMonthesLabel, renderYearLabel, startOfWeek = 1, weekendClassName, hideOtherMonthDays, size, }) {
+function Calendar({ className, value, onDayPointerDown, onDayPointerUp, renderDay, renderWeekDayLabel, renderMonthLabel, renderMonthesLabel, renderYearLabel, startOfWeek = 1, weekendClassName, hideOtherMonthDays, isDayDisabled, size, }) {
     const date = useMemo(() => valueToDate(value), [value]);
     const [month, setMonth] = useState(date.getMonth() + 1);
     const [year, setYear] = useState(date.getFullYear());
@@ -50,8 +50,8 @@ 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) => {
-                    const className = cn(S.day, day.currentMonth && S.currMonth, isWeekend(weekdayIndex) && weekendClassName, isSameDay(day, value) && S.selected);
+                        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, isDayDisabled?.(day) && S.disabled);
                     const dayProps = { className };
                     if (onDayPointerDown) {
                         dayProps.onPointerDown = () => onDayPointerDown(day);

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

@@ -1,7 +1,7 @@
 import styleInject from '../../../node_modules/style-inject/dist/style-inject.es.js';
 
-var css_248z = ".Calendar_size-s__MFLPb{font-size:.5em}.Calendar_size-m__IGeoI{font-size:.75em}.Calendar_size-l__a2zct{font-size:1em}.Calendar_root__v8Jg6{display:flex;flex-direction:column}.Calendar_header__IHzS-{align-items:center;display:flex;justify-content:space-between}.Calendar_month__gi10Q{width:100%!important}.Calendar_year__UlmLM{min-width:5em}.Calendar_year__UlmLM input{min-width:0;min-width:auto}.Calendar_month__gi10Q{margin-left:var(--indent-s)}.Calendar_weekDays__Pglyw{align-items:center;color:var(--accent-color-alpha-500);display:flex;font-size:.75em;margin-top:var(--indent-s);width:100%}.Calendar_weekDays__Pglyw .Calendar_day__A3NG-{padding:1.5em 0}.Calendar_size-s__MFLPb .Calendar_weekDays__Pglyw .Calendar_day__A3NG-:first-child{border-top-left-radius:4px}.Calendar_size-s__MFLPb .Calendar_weekDays__Pglyw .Calendar_day__A3NG-:last-child{border-top-right-radius:4px}.Calendar_size-m__IGeoI .Calendar_weekDays__Pglyw .Calendar_day__A3NG-:first-child{border-top-left-radius:6px}.Calendar_size-m__IGeoI .Calendar_weekDays__Pglyw .Calendar_day__A3NG-:last-child{border-top-right-radius:6px}.Calendar_size-l__a2zct .Calendar_weekDays__Pglyw .Calendar_day__A3NG-:first-child{border-top-left-radius:8px}.Calendar_size-l__a2zct .Calendar_weekDays__Pglyw .Calendar_day__A3NG-:last-child{border-top-right-radius:8px}.Calendar_days__64U-y{display:flex;flex-wrap:wrap;justify-content:space-between;-webkit-user-select:none;-moz-user-select:none;user-select:none}.Calendar_days__64U-y .Calendar_day__A3NG-:not(.Calendar_currMonth__oL4nl){color:var(--accent-color-alpha-500)}.Calendar_hideOtherMonthDays__DydjR .Calendar_days__64U-y .Calendar_day__A3NG-:not(.Calendar_currMonth__oL4nl){opacity:0;pointer-events:none}.Calendar_size-s__MFLPb .Calendar_days__64U-y .Calendar_day__A3NG-:last-child{border-bottom-right-radius:4px}.Calendar_size-m__IGeoI .Calendar_days__64U-y .Calendar_day__A3NG-:last-child{border-bottom-right-radius:6px}.Calendar_size-l__a2zct .Calendar_days__64U-y .Calendar_day__A3NG-:last-child{border-bottom-right-radius:8px}.Calendar_day__A3NG-{align-items:center;display:flex;height:2em;justify-content:center;min-width:0;min-width:auto;padding:0;width:14.28571%}.Calendar_day__A3NG-.Calendar_selected__ffB6-{background-color:var(--active-color-alpha-500)!important}.Calendar_day__A3NG-.Calendar_currMonth__oL4nl{font-weight:700}";
-var S = {"size-s":"Calendar_size-s__MFLPb","size-m":"Calendar_size-m__IGeoI","size-l":"Calendar_size-l__a2zct","root":"Calendar_root__v8Jg6","header":"Calendar_header__IHzS-","month":"Calendar_month__gi10Q","year":"Calendar_year__UlmLM","weekDays":"Calendar_weekDays__Pglyw","day":"Calendar_day__A3NG-","days":"Calendar_days__64U-y","currMonth":"Calendar_currMonth__oL4nl","hideOtherMonthDays":"Calendar_hideOtherMonthDays__DydjR","selected":"Calendar_selected__ffB6-"};
+var css_248z = ".Calendar_size-s__MFLPb{font-size:.5em}.Calendar_size-m__IGeoI{font-size:.75em}.Calendar_size-l__a2zct{font-size:1em}.Calendar_root__v8Jg6{display:flex;flex-direction:column}.Calendar_header__IHzS-{align-items:center;display:flex;justify-content:space-between}.Calendar_month__gi10Q{width:100%}.Calendar_year__UlmLM{min-width:5em}.Calendar_year__UlmLM input{min-width:0;min-width:auto}.Calendar_month__gi10Q{margin-left:var(--indent-s)}.Calendar_weekDays__Pglyw{align-items:center;color:var(--accent-color-alpha-500);display:flex;font-size:.75em;margin-top:var(--indent-s);width:100%}.Calendar_weekDays__Pglyw .Calendar_day__A3NG-{padding:1.5em 0}.Calendar_size-s__MFLPb .Calendar_weekDays__Pglyw .Calendar_day__A3NG-:first-child{border-top-left-radius:4px}.Calendar_size-s__MFLPb .Calendar_weekDays__Pglyw .Calendar_day__A3NG-:last-child{border-top-right-radius:4px}.Calendar_size-m__IGeoI .Calendar_weekDays__Pglyw .Calendar_day__A3NG-:first-child{border-top-left-radius:6px}.Calendar_size-m__IGeoI .Calendar_weekDays__Pglyw .Calendar_day__A3NG-:last-child{border-top-right-radius:6px}.Calendar_size-l__a2zct .Calendar_weekDays__Pglyw .Calendar_day__A3NG-:first-child{border-top-left-radius:8px}.Calendar_size-l__a2zct .Calendar_weekDays__Pglyw .Calendar_day__A3NG-:last-child{border-top-right-radius:8px}.Calendar_days__64U-y{display:flex;flex-wrap:wrap;justify-content:space-between;-webkit-user-select:none;-moz-user-select:none;user-select:none}.Calendar_days__64U-y .Calendar_day__A3NG-:not(.Calendar_currMonth__oL4nl){color:var(--accent-color-alpha-500)}.Calendar_hideOtherMonthDays__DydjR .Calendar_days__64U-y .Calendar_day__A3NG-:not(.Calendar_currMonth__oL4nl){opacity:0;pointer-events:none}.Calendar_size-s__MFLPb .Calendar_days__64U-y .Calendar_day__A3NG-:first-child{border-top-left-radius:4px}.Calendar_size-m__IGeoI .Calendar_days__64U-y .Calendar_day__A3NG-:first-child{border-top-left-radius:6px}.Calendar_size-l__a2zct .Calendar_days__64U-y .Calendar_day__A3NG-:first-child{border-top-left-radius:8px}.Calendar_size-s__MFLPb .Calendar_days__64U-y .Calendar_day__A3NG-:last-child{border-bottom-right-radius:4px}.Calendar_size-m__IGeoI .Calendar_days__64U-y .Calendar_day__A3NG-:last-child{border-bottom-right-radius:6px}.Calendar_size-l__a2zct .Calendar_days__64U-y .Calendar_day__A3NG-:last-child{border-bottom-right-radius:8px}.Calendar_size-s__MFLPb .Calendar_days__64U-y .Calendar_day__A3NG-:nth-child(7){border-top-right-radius:4px}.Calendar_size-m__IGeoI .Calendar_days__64U-y .Calendar_day__A3NG-:nth-child(7){border-top-right-radius:6px}.Calendar_size-l__a2zct .Calendar_days__64U-y .Calendar_day__A3NG-:nth-child(7){border-top-right-radius:8px}.Calendar_size-s__MFLPb .Calendar_days__64U-y .Calendar_day__A3NG-:nth-last-child(7){border-bottom-left-radius:4px}.Calendar_size-m__IGeoI .Calendar_days__64U-y .Calendar_day__A3NG-:nth-last-child(7){border-bottom-left-radius:6px}.Calendar_size-l__a2zct .Calendar_days__64U-y .Calendar_day__A3NG-:nth-last-child(7){border-bottom-left-radius:8px}.Calendar_day__A3NG-{align-items:center;display:flex;height:2em;justify-content:center;min-width:0;min-width:auto;padding:0;width:14.28571%}.Calendar_day__A3NG-.Calendar_disabled__sZi-f{background-color:var(--accent-color-alpha-100);border-radius:0;opacity:.3;pointer-events:none}.Calendar_day__A3NG-.Calendar_selected__ffB6-{background-color:var(--active-color-alpha-500)!important}.Calendar_day__A3NG-.Calendar_currMonth__oL4nl{font-weight:700}";
+var S = {"size-s":"Calendar_size-s__MFLPb","size-m":"Calendar_size-m__IGeoI","size-l":"Calendar_size-l__a2zct","root":"Calendar_root__v8Jg6","header":"Calendar_header__IHzS-","month":"Calendar_month__gi10Q","year":"Calendar_year__UlmLM","weekDays":"Calendar_weekDays__Pglyw","day":"Calendar_day__A3NG-","days":"Calendar_days__64U-y","currMonth":"Calendar_currMonth__oL4nl","hideOtherMonthDays":"Calendar_hideOtherMonthDays__DydjR","disabled":"Calendar_disabled__sZi-f","selected":"Calendar_selected__ffB6-"};
 styleInject(css_248z);
 
 export { S as default };

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/Calendar/Calendar.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
 import * as T from './Calendar.types';
-export declare function Calendar({ className, value, onDayPointerDown, onDayPointerUp, renderDay, renderWeekDayLabel, renderMonthLabel, renderMonthesLabel, renderYearLabel, startOfWeek, weekendClassName, hideOtherMonthDays, size, }: T.Props): JSX.Element;
+export declare function Calendar({ className, value, onDayPointerDown, onDayPointerUp, renderDay, renderWeekDayLabel, renderMonthLabel, renderMonthesLabel, renderYearLabel, startOfWeek, weekendClassName, hideOtherMonthDays, isDayDisabled, size, }: T.Props): JSX.Element;

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

@@ -22,4 +22,5 @@ export type Props = {
     renderMonthLabel?: (month: number) => string;
     weekendClassName?: string;
     hideOtherMonthDays?: boolean;
+    isDayDisabled?: (day: Day) => boolean;
 };

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/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.2",
   "description": "React UI components library",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
@@ -40,7 +40,7 @@
   "types": "dist/esm/types/index.d.ts",
   "type": "module",
   "dependencies": {
-    "@homecode/ui": "^4.11.1",
+    "@homecode/ui": "^4.17.1",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.10",
     "@rollup/plugin-typescript": "^11.0.0",
     "classnames": "^2.3.2",