@homecode/ui 4.15.0 → 4.17.0

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';

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, 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,7 +45,8 @@ function Calendar({ className, value, onDayPointerDown, onDayPointerUp, renderDa
         if (year < MIN_YEAR)
             setYear(MIN_YEAR);
     };
-    return (jsxs("div", { className: cn(S.root, S[`size-${size}`], className), 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

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;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","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.js

@@ -36,7 +36,7 @@ function DatePicker(props) {
         }
         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, ...calendarProps, renderDay: renderDay, value: isRange ? value[0] : value, onDayPointerDown: onFirstDateChange }), isRange && (jsx(Calendar, { size: size, ...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: 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]) }))] }));
 }
 
 export { DatePicker };

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

@@ -0,0 +1,17 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import cn from 'classnames';
+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: 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: {
+            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/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, 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,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;
@@ -21,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.types.d.ts

@@ -6,5 +6,5 @@ export type Props = {
     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 { Date, Size, Variant } from 'uilib/types';
+import type { Props as PopupProps } from 'uilib/components/Popup/Popup.types';
+export type Value = Date | [Date, Date];
+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,2 +1,3 @@
+/// <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/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.15.0",
+  "version": "4.17.0",
   "description": "React UI components library",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",