@uxf/ui - npm Package Compare versions

Comparing version 10.5.2 to 10.6.0

date-picker-input/date-picker-input.d.ts

@@ -7,9 +7,11 @@ import React, { ReactNode } from "react";
 export interface DatePickerInputProps extends Omit<InputWithPopoverProps<string | null>, "children" | "placeholder" | "triggerElement"> {
+    allowedDateFormats?: string[];
+    bottomContent?: ReactNode;
+    displayDateFormat?: string;
+    maxDate?: string;
+    minDate?: string;
     placeholder?: string;
     triggerElement?: ReactNode;
-    minDate?: string;
-    maxDate?: string;
     unavailableDates?: Date[];
-    bottomContent?: ReactNode;
 }
 export declare const DatePickerInput: React.ForwardRefExoticComponent<DatePickerInputProps & React.RefAttributes<HTMLInputElement>>;

date-picker-input/date-picker-input.js

@@ -41,6 +41,6 @@ "use strict";
 exports.OUTPUT_DATE_FORMAT = "YYYY-MM-DD";
-function getValue(value) {
+function getValue(value, format) {
     const parsedValue = (0, dayjs_1.default)(value, exports.OUTPUT_DATE_FORMAT, true);
     if (value && parsedValue.isValid()) {
-        return parsedValue.format(exports.DISPLAY_DATE_FORMAT);
+        return parsedValue.format(format);
     }
@@ -64,7 +64,9 @@ return value !== null && value !== void 0 ? value : "";
 exports.DatePickerInput = (0, react_1.forwardRef)((props, ref) => {
-    var _a, _b;
+    var _a, _b, _c, _d;
     const onChange = props.onChange;
     const className = (0, cx_1.cx)("uxf-date-picker-input", props.className);
+    const displayDateFormat = (_a = props.displayDateFormat) !== null && _a !== void 0 ? _a : exports.DISPLAY_DATE_FORMAT;
+    const allowedDateFormats = (_b = props.allowedDateFormats) !== null && _b !== void 0 ? _b : exports.ALLOWED_DATE_FORMAT;
     const onInputChange = (0, react_1.useCallback)((value) => {
-        const parsedValue = (0, dayjs_1.default)(value, exports.ALLOWED_DATE_FORMAT, true);
+        const parsedValue = (0, dayjs_1.default)(value, allowedDateFormats, true);
         if (value !== "" && parsedValue.isValid()) {
@@ -76,3 +78,3 @@ onChange(parsedValue.format(exports.OUTPUT_DATE_FORMAT));
         }
-    }, [onChange]);
+    }, [allowedDateFormats, onChange]);
     const onDatePickerChange = (0, react_1.useCallback)((value) => {
@@ -82,8 +84,8 @@ const parsedValue = (0, dayjs_1.default)(value);
     }, [onChange]);
-    const value = getValue(props.value);
+    const value = getValue(props.value, displayDateFormat);
     const selectedDate = getSelectedDate(props.value);
     const parsedMinDate = getBoundaryDate(props.minDate);
     const parsedMaxDate = getBoundaryDate(props.maxDate);
-    return (react_1.default.createElement(_input_with_popover_1._InputWithPopover, { ...props, className: className, onChange: onInputChange, placeholder: (_a = props.placeholder) !== null && _a !== void 0 ? _a : (0, dayjs_1.default)().format(exports.DISPLAY_DATE_FORMAT), ref: ref, value: value, triggerElement: (_b = props.triggerElement) !== null && _b !== void 0 ? _b : react_1.default.createElement(icon_1.Icon, { name: "calendar", size: 20 }) }, ({ close }) => (react_1.default.createElement(date_picker_1.DatePicker, { minDate: parsedMinDate, maxDate: parsedMaxDate, closePopoverHandler: close, onChange: onDatePickerChange, preventScroll: true, selectedDate: selectedDate, unavailableDates: props.unavailableDates, bottomContent: props.bottomContent }))));
+    return (react_1.default.createElement(_input_with_popover_1._InputWithPopover, { ...props, className: className, onChange: onInputChange, placeholder: (_c = props.placeholder) !== null && _c !== void 0 ? _c : (0, dayjs_1.default)().format(displayDateFormat), ref: ref, value: value, triggerElement: (_d = props.triggerElement) !== null && _d !== void 0 ? _d : react_1.default.createElement(icon_1.Icon, { name: "calendar", size: 20 }) }, ({ close }) => (react_1.default.createElement(date_picker_1.DatePicker, { minDate: parsedMinDate, maxDate: parsedMaxDate, closePopoverHandler: close, onChange: onDatePickerChange, preventScroll: true, selectedDate: selectedDate, unavailableDates: props.unavailableDates, bottomContent: props.bottomContent }))));
 });
 exports.DatePickerInput.displayName = "UxfUiDatePickerInput";

date-picker-input/date-picker-input.stories.js

@@ -44,3 +44,4 @@ "use strict";
         react_1.default.createElement(date_picker_input_1.DatePickerInput, { id: "date-test-invalid", isClearable: true, isInvalid: true, label: "Datum invalid", name: "date-invalid", onChange: onChange, value: date }),
-        react_1.default.createElement(date_picker_input_1.DatePickerInput, { id: "date-test-invalid", isClearable: true, minDate: "2023-06-06", maxDate: "2023-06-12", label: "Min/max", name: "date-invalid", onChange: onChange, placeholder: "", value: date })));
+        react_1.default.createElement(date_picker_input_1.DatePickerInput, { id: "date-test-invalid", isClearable: true, minDate: "2023-06-06", maxDate: "2023-06-12", label: "Min/max", name: "date-invalid", onChange: onChange, placeholder: "", value: date }),
+        react_1.default.createElement(date_picker_input_1.DatePickerInput, { allowedDateFormats: ["MM/DD/YYYY", "M/D/YYYY"], displayDateFormat: "MM/DD/YYYY", id: "date-custom-format", isClearable: true, label: "Datum s vlastn\u00EDm form\u00E1tem (US)", name: "date", onChange: onChange, value: date })));
     return (react_1.default.createElement(react_1.default.Fragment, null,
@@ -47,0 +48,0 @@ react_1.default.createElement("div", { className: "light max-w-[640px] space-y-4 rounded bg-white p-8" }, testDatePickers),

package.json

 {
   "name": "@uxf/ui",
-  "version": "10.5.2",
+  "version": "10.6.0",
   "description": "",
@@ -5,0 +5,0 @@ "publishConfig": {

No alert changes

Improved metrics

Total package byte prevSize

777285

increased by0.08%

Lines of code

16479

increased by0.04%

No dependency changes