@homecode/ui 4.14.0 → 4.16.0

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

@@ -46,14 +46,16 @@ const getDaysArray = (year, month, startOfWeek) => {
     }
     let nextMonthDay = 1;
     const nextMonthStartDay = result.length % 7;
-    for (let i = nextMonthStartDay; i < 7; i++) {
-        result.push({
-            day: nextMonthDay,
-            month: monthIndex + 2 > 12 ? 1 : monthIndex + 2,
-            year: monthIndex === 11 ? year + 1 : year,
-            currentMonth: false,
-        });
-        nextMonthDay++;
+    if (nextMonthStartDay > 0) {
+        for (let i = nextMonthStartDay; i < 7; i++) {
+            result.push({
+                day: nextMonthDay,
+                month: monthIndex + 2 > 12 ? 1 : monthIndex + 2,
+                year: monthIndex === 11 ? year + 1 : year,
+                currentMonth: false,
+            });
+            nextMonthDay++;
+        }
     }
     CACHE[key] = result;
     return result;

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({ value, onDayClick, renderDay, renderWeekDayLabel, renderMonthLabel, renderMonthesLabel, renderYearLabel, startOfWeek = 1, weekendClassName, size, }) {
+function Calendar({ className, value, onDayPointerDown, onDayPointerUp, renderDay, renderWeekDayLabel, renderMonthLabel, renderMonthesLabel, renderYearLabel, startOfWeek = 1, weekendClassName, hideOtherMonthDays, size, }) {
     const date = useMemo(() => valueToDate(value), [value]);
     const [month, setMonth] = useState(date.getMonth() + 1);
     const [year, setYear] = useState(date.getFullYear());
@@ -45,16 +45,20 @@ function Calendar({ value, onDayClick, renderDay, renderWeekDayLabel, renderMont
         if (year < MIN_YEAR)
             setYear(MIN_YEAR);
     };
-    return (jsxs("div", { className: cn(S.root, S[`size-${size}`]), children: [jsxs("div", { className: S.header, children: [jsx(Input, { className: S.year, type: "number", min: MIN_YEAR, 
+    const classes = cn(S.root, S[`size-${size}`], className, hideOtherMonthDays && S.hideOtherMonthDays);
+    return (jsxs("div", { className: classes, children: [jsxs("div", { className: S.header, children: [jsx(Input, { className: S.year, type: "number", min: MIN_YEAR, 
                         // @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 classes = cn(S.day, day.currentMonth && S.currMonth, isWeekend(weekdayIndex) && weekendClassName, isSameDay(day, value) && S.selected);
-                    const dayProps = {
-                        className: classes,
-                        onClick: () => onDayClick?.(day),
-                    };
+                    const className = cn(S.day, day.currentMonth && S.currMonth, isWeekend(weekdayIndex) && weekendClassName, isSameDay(day, value) && S.selected);
+                    const dayProps = { className };
+                    if (onDayPointerDown) {
+                        dayProps.onPointerDown = () => onDayPointerDown(day);
+                    }
+                    if (onDayPointerUp) {
+                        dayProps.onPointerUp = () => onDayPointerUp(day);
+                    }
                     return renderDay?.(day, dayProps) ?? renderDayDefault(day, dayProps);
                 }) })] }));
 }

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_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;width:14.28571%}.Calendar_day__A3NG-.Calendar_selected__ffB6-{background-color:var(--active-color-alpha-100)!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","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%!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-"};
 styleInject(css_248z);
 
 export { S as default };

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

@@ -0,0 +1,20 @@
+function isDateEqual(date1, date2) {
+    return (date1.year === date2.year &&
+        date1.month === date2.month &&
+        date1.day === date2.day);
+}
+function isDateBefore(date1, date2) {
+    return (date1.year < date2.year ||
+        (date1.year === date2.year && date1.month < date2.month) ||
+        (date1.year === date2.year &&
+            date1.month === date2.month &&
+            date1.day < date2.day));
+}
+function isDateAfter(date1, date2) {
+    return isDateBefore(date2, date1);
+}
+function isDateBetween(date, startDate, endDate) {
+    return isDateAfter(date, startDate) && isDateBefore(date, endDate);
+}
+
+export { isDateAfter, isDateBefore, isDateBetween, isDateEqual };

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

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

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

@@ -1,7 +1,7 @@
 import styleInject from '../../../node_modules/style-inject/dist/style-inject.es.js';
 
-var css_248z = ".DatePicker_root__hh-PP{display:flex;flex-direction:column}.DatePicker_day__kGD0i:hover{background-color:var(--accent-color-alpha-100)}";
-var S = {"root":"DatePicker_root__hh-PP","day":"DatePicker_day__kGD0i"};
+var css_248z = ".DatePicker_root__hh-PP{display:flex;flex-direction:column}.DatePicker_day__kGD0i.DatePicker_end__KYPnO,.DatePicker_day__kGD0i.DatePicker_start__qd0rW{background-color:var(--active-color-alpha-500)!important}.DatePicker_day__kGD0i.DatePicker_start__qd0rW{border-bottom-right-radius:0;border-top-right-radius:0}.DatePicker_day__kGD0i.DatePicker_end__KYPnO{border-bottom-left-radius:0;border-top-left-radius:0}.DatePicker_day__kGD0i.DatePicker_between__1Bifb{background-color:var(--active-color-alpha-100);border-radius:0}.DatePicker_day__kGD0i:hover{background-color:var(--accent-color-alpha-100)}";
+var S = {"root":"DatePicker_root__hh-PP","day":"DatePicker_day__kGD0i","start":"DatePicker_start__qd0rW","end":"DatePicker_end__KYPnO","between":"DatePicker_between__1Bifb"};
 styleInject(css_248z);
 
 export { S as default };

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({ value, onDayClick, renderDay, renderWeekDayLabel, renderMonthLabel, renderMonthesLabel, renderYearLabel, startOfWeek, weekendClassName, size, }: T.Props): JSX.Element;
+export declare function Calendar({ className, value, onDayPointerDown, onDayPointerUp, renderDay, renderWeekDayLabel, renderMonthLabel, renderMonthesLabel, renderYearLabel, startOfWeek, weekendClassName, hideOtherMonthDays, size, }: T.Props): JSX.Element;

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

@@ -5,11 +5,14 @@ export type Day = Date & {
 };
 export type DayProps = {
     className: string;
-    onClick: () => void;
+    onPointerDown: () => void;
+    onPointerUp: () => void;
 };
 export type Props = {
+    className?: string;
     value: Date;
-    onDayClick: (value: Date) => void;
+    onDayPointerDown: (value: Date) => void;
+    onDayPointerUp: (value: Date) => void;
     startOfWeek?: number;
     size?: Size;
     renderDay?: (day: Day, dayProps: DayProps) => ReactNode;
@@ -18,4 +21,5 @@ export type Props = {
     renderMonthesLabel?: (month: number) => string;
     renderMonthLabel?: (month: number) => string;
     weekendClassName?: string;
+    hideOtherMonthDays?: boolean;
 };

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

@@ -0,0 +1,5 @@
+import type { Date } from 'uilib/types';
+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;
+export declare function isDateBetween(date: Date, startDate: Date, endDate: Date): boolean;

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

@@ -2,6 +2,7 @@ import type { Size, Date } from 'uilib/types';
 import type { Props as CalendarProps } from 'uilib/components/Calendar/Calendar.types';
 export type Value = Date | [Date, Date];
 export type Props = {
+    className?: string;
     value: Value;
     onChange: (value: Value) => void;
     size?: Size;

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

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

package/package.json

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