@homecode/ui 4.16.0 → 4.17.1

package/dist/esm/index.js

@@ -5,6 +5,7 @@ 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 { DatePickerInput } from './src/components/DatePickerInput/DatePickerInput.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';
@@ -44,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: 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]) }))] }));
+    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

@@ -0,0 +1,18 @@
+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';
+import { Popup } from '../Popup/Popup.js';
+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: 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 } }) }));
+}
+
+export { DatePickerInput };

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

@@ -0,0 +1,7 @@
+import styleInject from '../../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".DatePickerInput_popupContent__rcVHH{min-width:-moz-fit-content;min-width:fit-content}.DatePickerInput_content__yll-b{padding:.5em}.DatePickerInput_range__xWj9K .DatePickerInput_content__yll-b{display:flex;flex-direction:row;flex-wrap:nowrap;gap:1em}.DatePickerInput_range__xWj9K .DatePickerInput_calendar__vf0za{width:50%}.DatePickerInput_size-s__5t05o{border-radius:6px!important}.DatePickerInput_size-s__5t05o .DatePickerInput_content__yll-b{min-width:12em;padding:8px}.DatePickerInput_range__xWj9K.DatePickerInput_size-s__5t05o .DatePickerInput_content__yll-b{min-width:25em}.DatePickerInput_size-m__TTkHV{border-radius:9px!important}.DatePickerInput_size-m__TTkHV .DatePickerInput_content__yll-b{min-width:16em;padding:12px}.DatePickerInput_range__xWj9K.DatePickerInput_size-m__TTkHV .DatePickerInput_content__yll-b{min-width:33em}.DatePickerInput_size-l__-fWkE{border-radius:12px!important}.DatePickerInput_size-l__-fWkE .DatePickerInput_content__yll-b{min-width:20em;padding:14px}.DatePickerInput_range__xWj9K.DatePickerInput_size-l__-fWkE .DatePickerInput_content__yll-b{min-width:41em}";
+var S = {"popupContent":"DatePickerInput_popupContent__rcVHH","content":"DatePickerInput_content__yll-b","range":"DatePickerInput_range__xWj9K","calendar":"DatePickerInput_calendar__vf0za","size-s":"DatePickerInput_size-s__5t05o","size-m":"DatePickerInput_size-m__TTkHV","size-l":"DatePickerInput_size-l__-fWkE"};
+styleInject(css_248z);
+
+export { S as default };

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

@@ -28,6 +28,7 @@ import '../Checkbox/Checkbox.styl.js';
 import '../Container/Container.styl.js';
 import '../DatePicker/DatePicker.styl.js';
 import 'moment';
+import '../DatePickerInput/DatePickerInput.styl.js';
 import '../Draggable/Draggable.styl.js';
 import '../Expand/Expand.styl.js';
 import '../Form/Form.styl.js';
@@ -334,7 +335,7 @@ class Input extends Component {
         const classes = cn(S.root, isTextArea && S.isTextArea, S[`size-${size}`], S[`variant-${variant}`], isFocused && S.isFocused, error && S.hasError, hasClear && S.hasClear, disabled && S.isDisabled, className);
         return (
         // @ts-ignore
-        jsxs("div", { className: classes, title: value, children: [jsxs("label", { className: S.main, children: [jsx("div", { className: S.border, suppressHydrationWarning: true, style: { clipPath: labelClipPath } }, "border"), this.renderAddon('left'), this.wrapControll(createElement(Control, { ...controlProps, className: cn(S.control, controlProps?.className), ref: this.inputRef, key: "control" })), isNumber && (jsxs("div", { className: S.numberArrows, children: [jsx(Button, { variant: "clear", onClick: () => this.onNumberWheel(1), children: jsx(Icon, { type: "chevronUp", size: size }) }), jsx(Button, { variant: "clear", onClick: () => this.onNumberWheel(-1), children: jsx(Icon, { type: "chevronDown", size: size }) })] })), isTextArea && controlProps.placeholder && (jsx("span", { className: S.placeholder, spellCheck: false, children: controlProps.placeholder })), jsx(Label, { className: S.label, size: size, isOnTop: isLabelOnTop, isError: Boolean(error), onClipPathChange: this.onLabelClipPathChange, children: label }, "label"), this.renderAddon('right'), required && jsx(RequiredStar, { size: size }, "required-star")] }, "main"), hasClear && !disabled && hasValue && (jsx(Button, { className: S.clearButton, variant: "clear", size: size, square: true, onClick: this.onClearPress, title: "", children: jsx(Icon, { className: S.clearIcon, size: size, type: "close" }) }, "clear")), !disabled && typeof error === 'string' && (jsx(AssistiveText, { variant: "danger", size: size, children: error }, "assistive-text"))] }));
+        jsxs("div", { className: classes, title: value, children: [jsxs("label", { className: S.main, children: [jsx("div", { className: S.border, suppressHydrationWarning: true, style: { clipPath: labelClipPath } }, "border"), this.renderAddon('left'), this.wrapControll(createElement(Control, { ...controlProps, className: cn(S.control, controlProps?.className), ref: this.inputRef, key: "control" })), isNumber && (jsxs("div", { className: S.numberArrows, children: [jsx(Button, { variant: "clear", onClick: () => this.onNumberWheel(1), tabIndex: -1, children: jsx(Icon, { type: "chevronUp", size: size }) }), jsx(Button, { variant: "clear", onClick: () => this.onNumberWheel(-1), tabIndex: -1, children: jsx(Icon, { type: "chevronDown", size: size }) })] })), isTextArea && controlProps.placeholder && (jsx("span", { className: S.placeholder, spellCheck: false, children: controlProps.placeholder })), jsx(Label, { className: S.label, size: size, isOnTop: isLabelOnTop, isError: Boolean(error), onClipPathChange: this.onLabelClipPathChange, children: label }, "label"), this.renderAddon('right'), required && jsx(RequiredStar, { size: size }, "required-star")] }, "main"), hasClear && !disabled && hasValue && (jsx(Button, { className: S.clearButton, variant: "clear", size: size, square: true, onClick: this.onClearPress, title: "", children: jsx(Icon, { className: S.clearIcon, size: size, type: "close" }) }, "clear")), !disabled && typeof error === 'string' && (jsx(AssistiveText, { variant: "danger", size: size, children: error }, "assistive-text"))] }));
     }
 }
 

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

@@ -31,6 +31,7 @@ import '../Checkbox/Checkbox.styl.js';
 import '../Container/Container.styl.js';
 import '../DatePicker/DatePicker.styl.js';
 import 'moment';
+import '../DatePickerInput/DatePickerInput.styl.js';
 import { Draggable } from '../Draggable/Draggable.js';
 import '../Expand/Expand.styl.js';
 import '../Form/Form.styl.js';

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.types.d.ts

@@ -5,14 +5,14 @@ export type Day = Date & {
 };
 export type DayProps = {
     className: string;
-    onPointerDown: () => void;
-    onPointerUp: () => void;
+    onPointerDown?: () => void;
+    onPointerUp?: () => void;
 };
 export type Props = {
     className?: string;
     value: Date;
-    onDayPointerDown: (value: Date) => void;
-    onDayPointerUp: (value: Date) => void;
+    onDayPointerDown?: (value: Date) => void;
+    onDayPointerUp?: (value: Date) => void;
     startOfWeek?: number;
     size?: Size;
     renderDay?: (day: Day, dayProps: DayProps) => ReactNode;

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

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

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import * as T from './DatePickerInput.types';
+export declare function DatePickerInput(props: T.Props): JSX.Element;

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

@@ -0,0 +1,12 @@
+import type { Size, Variant } from 'uilib/types';
+import type { Props as PopupProps } from 'uilib/components/Popup/Popup.types';
+export type Value = string | [string, string];
+export type Props = {
+    className?: string;
+    size?: Size;
+    displayFormat?: string;
+    value: Value;
+    onChange: (value: Value) => void;
+    variant?: Variant;
+    popupProps?: PopupProps;
+};

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

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

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/dist/esm/types/src/types.d.ts

@@ -19,3 +19,4 @@ export type Date = {
     day?: number;
     ISO?: string;
 };
+export type Variant = 'default' | 'outlined';

package/package.json

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