@homecode/ui 4.16.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/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, 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: 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.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.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/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.16.0",
+  "version": "4.17.0",
   "description": "React UI components library",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",