@homecode/ui 4.13.0 → 4.14.0

package/dist/esm/index.js

@@ -4,6 +4,7 @@ export { ButtonGroup } from './src/components/ButtonGroup/ButtonGroup.js';
 export { Calendar } from './src/components/Calendar/Calendar.js';
 export { Checkbox } from './src/components/Checkbox/Checkbox.js';
 export { Container } from './src/components/Container/Container.js';
+export { DatePicker } from './src/components/DatePicker/DatePicker.js';
 export { DateTime, formatDate } from './src/components/DateTime/DateTime.js';
 export { Draggable } from './src/components/Draggable/Draggable.js';
 export { Expand } from './src/components/Expand/Expand.js';

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

@@ -11,17 +11,22 @@ const isWeekend = (day) => {
     const num = day % 7;
     return num === 5 || num === 6;
 };
-const getDaysArray = (year, month) => {
-    const key = `${year}-${month}`;
+const isSameDay = (day1, day2) => {
+    return (day1.day === day2.day &&
+        day1.month === day2.month &&
+        day1.year === day2.year);
+};
+const getDaysArray = (year, month, startOfWeek) => {
+    const key = `${year}-${month}-${startOfWeek}`;
     if (CACHE[key])
         return CACHE[key];
     let monthIndex = month - 1; // JavaScript's Date months are 0-indexed.
     let date = new Date(year, monthIndex, 1);
     let result = [];
-    let startDay = date.getDay();
+    let startDay = (date.getDay() - startOfWeek + 7) % 7;
     if (startDay > 0) {
         let prevMonthLastDay = new Date(year, monthIndex, 0).getDate();
-        for (let i = 0; i < startDay - 1; i++) {
+        for (let i = 0; i < startDay; i++) {
             result.unshift({
                 day: prevMonthLastDay - i,
                 month: monthIndex,
@@ -44,7 +49,7 @@ const getDaysArray = (year, month) => {
     for (let i = nextMonthStartDay; i < 7; i++) {
         result.push({
             day: nextMonthDay,
-            month: monthIndex + 2,
+            month: monthIndex + 2 > 12 ? 1 : monthIndex + 2,
             year: monthIndex === 11 ? year + 1 : year,
             currentMonth: false,
         });
@@ -55,4 +60,4 @@ const getDaysArray = (year, month) => {
 };
 const valueToDate = (day) => new Date(day.year, day.month - 1, day.day ?? 1);
 
-export { getDaysArray, getWeekDaysArray, isWeekend, valueToDate, weekDays };
+export { getDaysArray, getWeekDaysArray, isSameDay, isWeekend, valueToDate, weekDays };

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

@@ -1,8 +1,8 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { useMemo, useState, useCallback } from 'react';
 import cn from 'classnames';
 import S from './Calendar.styl.js';
-import { valueToDate, getWeekDaysArray, getDaysArray, isWeekend, weekDays } from './Calendar.helpers.js';
+import { valueToDate, getWeekDaysArray, getDaysArray, isWeekend, weekDays, isSameDay } from './Calendar.helpers.js';
 import { Input } from '../Input/Input.js';
 import { Select } from '../Select/Select.js';
 
@@ -21,12 +21,16 @@ const MONTHS = [
     'December',
 ];
 const MIN_YEAR = 1970;
-function Calendar({ value, onDayClick, renderWeekDayLabel, renderMonthLabel, renderMonthesLabel, renderYearLabel, startOfWeek, weekendClassName, size, }) {
+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, }) {
     const date = useMemo(() => valueToDate(value), [value]);
     const [month, setMonth] = useState(date.getMonth() + 1);
     const [year, setYear] = useState(date.getFullYear());
     const weekDaysArray = useMemo(() => getWeekDaysArray(startOfWeek), [startOfWeek]);
-    const daysArray = getDaysArray(year, month);
+    const daysArray = useMemo(() => getDaysArray(year, month, startOfWeek), [startOfWeek, month, year]);
     const monthOptions = useMemo(() => MONTHS.map((m, i) => ({
         id: i + 1,
         label: renderMonthLabel?.(i + 1) ?? m,
@@ -41,21 +45,18 @@ function Calendar({ value, onDayClick, renderWeekDayLabel, renderMonthLabel, ren
         if (year < MIN_YEAR)
             setYear(MIN_YEAR);
     };
-    const renderDay = useCallback((val, weekdayIndex) => {
-        const { day, year, month, currentMonth } = val;
-        const isWeekend$1 = isWeekend(weekdayIndex);
-        const classes = cn(S.day, currentMonth && S.currMonth, isWeekend$1 && weekendClassName);
-        return (jsx("div", { className: classes, onClick: () => onDayClick?.(val), children: day }, `${year}-${month}-${day}`));
-    }, []);
     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, 
                         // @ts-ignore
-                        size: size, 
-                        // @ts-ignore
-                        label: renderYearLabel?.(year) ?? 'Year', value: year, 
-                        // @ts-ignore
-                        onChange: onYearChange, onBlur: onYearBlur }), jsx(Select, { className: S.month, size: size, 
+                        size: size, label: renderYearLabel?.(year) ?? 'Year', value: year, 
                         // @ts-ignore
-                        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] }, day))) }), jsx("div", { className: S.days, children: daysArray.map((d, weekdayIndex) => renderDay(d, weekdayIndex)) })] }));
+                        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),
+                    };
+                    return renderDay?.(day, dayProps) ?? renderDayDefault(day, dayProps);
+                }) })] }));
 }
 
 export { Calendar };

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_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"};
+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-"};
 styleInject(css_248z);
 
 export { S as default };

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

@@ -0,0 +1,21 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useCallback, createElement } from 'react';
+import cn from 'classnames';
+import { Calendar } from '../Calendar/Calendar.js';
+import { Button } from '../Button/Button.js';
+import S from './DatePicker.styl.js';
+
+function DatePicker(props) {
+    const { value, onChange, size, calendarProps } = props;
+    const isRange = Array.isArray(value);
+    const onFirstDateChange = useCallback((val) => {
+        onChange(isRange ? [val, value[1]] : val);
+    }, [value, onChange, isRange]);
+    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 }))] }));
+}
+
+export { DatePicker };

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

@@ -0,0 +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"};
+styleInject(css_248z);
+
+export { S as default };

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

@@ -26,6 +26,7 @@ import '../../tools/queryParams.js';
 import '../Select/Select.styl.js';
 import '../Checkbox/Checkbox.styl.js';
 import '../Container/Container.styl.js';
+import '../DatePicker/DatePicker.styl.js';
 import 'moment';
 import '../Draggable/Draggable.styl.js';
 import '../Expand/Expand.styl.js';

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

@@ -29,6 +29,7 @@ import '../../tools/queryParams.js';
 import '../Select/Select.styl.js';
 import '../Checkbox/Checkbox.styl.js';
 import '../Container/Container.styl.js';
+import '../DatePicker/DatePicker.styl.js';
 import 'moment';
 import { Draggable } from '../Draggable/Draggable.js';
 import '../Expand/Expand.styl.js';

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

@@ -566,8 +566,9 @@ class Select extends Component {
     renderOptionsList() {
         const { size } = this.props;
         this.isTree = false;
+        const optionsList = this.renderOptions();
         const classes = cn(S.options, S[`size-${size}`], this.isTree && S.isTree);
-        return (jsxs("div", { ref: this.contentRef, children: [this.renderPresets(), jsx(Scroll, { y: true, offset: { y: { before: 10, after: 10 } }, className: classes, onInnerRef: this.onScrollInnerRef, children: this.renderOptions() }, "items-scroll")] }));
+        return (jsxs("div", { ref: this.contentRef, children: [this.renderPresets(), jsx(Scroll, { y: true, offset: { y: { before: 10, after: 10 } }, className: classes, onInnerRef: this.onScrollInnerRef, children: optionsList }, "items-scroll")] }));
     }
     render() {
         const { className, popupProps, size, error, blur } = this.props;

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

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

@@ -1,6 +1,8 @@
+import type { Date } from 'uilib/types';
 import * as T from './Calendar.types';
 export declare const weekDays: string[];
 export declare const getWeekDaysArray: (startOfWeek?: number) => any[];
 export declare const isWeekend: (day: number) => boolean;
-export declare const getDaysArray: (year: any, month: any) => any;
-export declare const valueToDate: (day: T.Value) => Date;
+export declare const isSameDay: (day1: Date, day2: Date) => boolean;
+export declare const getDaysArray: (year: any, month: any, startOfWeek: any) => T.Day[];
+export declare const valueToDate: (day: Date) => globalThis.Date;

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

@@ -1,19 +1,21 @@
-/// <reference types="react" />
-import { Size } from 'uilib/types';
-export type Value = {
-    year: number;
-    month: number;
-    day?: number;
+import { ReactNode } from 'react';
+import { Size, Date } from 'uilib/types';
+export type Day = Date & {
     currentMonth?: boolean;
 };
+export type DayProps = {
+    className: string;
+    onClick: () => void;
+};
 export type Props = {
-    value: Value;
-    onDayClick: (value: Value) => void;
+    value: Date;
+    onDayClick: (value: Date) => void;
     startOfWeek?: number;
     size?: Size;
-    renderWeekDayLabel?: (day: number) => React.ReactNode;
-    renderYearLabel?: (year: number) => React.ReactNode;
-    renderMonthesLabel?: (month: number) => React.ReactNode;
-    renderMonthLabel?: (month: number) => React.ReactNode;
+    renderDay?: (day: Day, dayProps: DayProps) => ReactNode;
+    renderWeekDayLabel?: (day: number) => ReactNode;
+    renderYearLabel?: (year: number) => string;
+    renderMonthesLabel?: (month: number) => string;
+    renderMonthLabel?: (month: number) => string;
     weekendClassName?: string;
 };

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

@@ -1,4 +1,3 @@
-export default function DatePicker({ value, onChange }: {
-    value: any;
-    onChange: any;
-}): number;
+/// <reference types="react" />
+import * as T from './DatePicker.types';
+export declare function DatePicker(props: T.Props): JSX.Element;

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

@@ -0,0 +1,9 @@
+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 = {
+    value: Value;
+    onChange: (value: Value) => void;
+    size?: Size;
+    calendarProps?: CalendarProps;
+};

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

@@ -73,7 +73,7 @@ export declare class Select extends Component<T.Props, T.State> {
     getNewSelected(id: any): T.State['selected'];
     getValue(): any;
     getInputVal(): T.Value;
-    getLabel(id: any): any;
+    getLabel(id: any): string;
     getFieldLabel(label: any): any;
     getSelectedLabel(): string;
     filterOption({ label }: {

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

@@ -7,7 +7,7 @@ export type Option = {
     id: Id;
     isGroupHeader?: boolean;
     parentId?: Id;
-    label: any;
+    label: string;
     sortingKey?: string | number;
     children?: Option[];
     render?: (label: string) => string;

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

@@ -4,6 +4,7 @@ export * from './ButtonGroup/ButtonGroup';
 export * from './Calendar/Calendar';
 export * from './Checkbox/Checkbox';
 export * from './Container/Container';
+export * from './DatePicker/DatePicker';
 export * from './DateTime/DateTime';
 export * from './Draggable/Draggable';
 export * from './Expand/Expand';

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

@@ -13,3 +13,9 @@ export type FormControl<T> = {
     name?: string;
     label?: string;
 };
+export type Date = {
+    year: number;
+    month: number;
+    day?: number;
+    ISO?: string;
+};

package/package.json

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