@uxf/ui 11.97.0 → 11.99.1

package/date-picker/date-picker.stories.js

@@ -39,6 +39,8 @@ const react_1 = __importStar(require("react"));
 const action_1 = require("../utils/action");
 const date_picker_1 = require("./date-picker");
 const today = (0, date_1.dayjsTz)();
+const minDate = today.subtract(10, "day").toDate();
+const maxDate = today.add(20, "days").toDate();
 const unavailableDates = [
     today.toDate(),
     today.add(5, "days").toDate(),
@@ -69,8 +71,8 @@ function Default() {
     const testDatePickers = (react_1.default.createElement("div", { className: "flex flex-col space-y-5 dark:text-white" },
         react_1.default.createElement("p", { className: "text-lg" }, "Date picker"),
         react_1.default.createElement(date_picker_1.DatePicker, { closePopoverHandler: onClose, onChange: onChange, selectedDate: value }),
-        react_1.default.createElement("p", { className: "text-lg" }, "Date picker with unavailable dates"),
-        react_1.default.createElement(date_picker_1.DatePicker, { onChange: onChange, selectedDate: value, unavailableDates: unavailableDates }),
+        react_1.default.createElement("p", { className: "text-lg" }, "Date picker with unavailable dates and min max dates"),
+        react_1.default.createElement(date_picker_1.DatePicker, { maxDate: maxDate, minDate: minDate, onChange: onChange, selectedDate: value, unavailableDates: unavailableDates }),
         react_1.default.createElement("p", { className: "text-lg" }, "Date picker with dates config"),
         react_1.default.createElement("ul", null,
             react_1.default.createElement("li", null, "now + 5 days & now + 6 days -> flag-1 className, not disabled"),

package/date-range-picker/date-range-picker.d.ts

@@ -4,6 +4,10 @@ import { DateRangePickerValueType } from "./types";
 export interface DateRangePickerProps {
     bottomContent?: ReactNode;
     datesConfig?: DatesConfig[];
+    exactSelectedDays?: number;
+    maxDate?: Date;
+    minDate?: Date;
+    minSelectedDays?: number;
     numberOfMonths?: number;
     onChange: (data: DateRangePickerValueType) => void;
     onClosePopover: () => void;

package/date-range-picker/date-range-picker.js

@@ -35,12 +35,13 @@ var __importStar = (this && this.__importStar) || (function () {
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DateRangePicker = void 0;
+const is_not_nil_1 = require("@uxf/core/utils/is-not-nil");
 const date_range_picker_context_1 = require("@uxf/datepicker/contexts/date-range-picker-context");
 const use_date_range_picker_1 = require("@uxf/datepicker/hooks/use-date-range-picker");
 const react_1 = __importStar(require("react"));
 const date_range_picker_content_1 = require("./date-range-picker-content");
 const DateRangePicker = (props) => {
-    var _a, _b, _c;
+    var _a, _b, _c, _d;
     const [focusedInput, setFocusedInput] = (0, react_1.useState)(use_date_range_picker_1.START_DATE);
     const onDatesChange = (0, react_1.useCallback)((data) => {
         props.onChange({ from: data.startDate, to: data.endDate });
@@ -49,11 +50,15 @@ const DateRangePicker = (props) => {
     const dateRangePickerProps = (0, use_date_range_picker_1.useDateRangePicker)({
         datesConfig: props.datesConfig,
         endDate: ((_a = props.selectedDates) === null || _a === void 0 ? void 0 : _a.to) || null,
+        exactMinBookingDays: (0, is_not_nil_1.isNotNil)(props.exactSelectedDays),
         firstDayOfWeek: 1,
         focusedInput: focusedInput,
-        numberOfMonths: (_b = props.numberOfMonths) !== null && _b !== void 0 ? _b : 1,
+        maxBookingDate: props.maxDate,
+        minBookingDate: props.minDate,
+        minBookingDays: (_b = props.minSelectedDays) !== null && _b !== void 0 ? _b : props.exactSelectedDays,
+        numberOfMonths: (_c = props.numberOfMonths) !== null && _c !== void 0 ? _c : 1,
         onDatesChange,
-        startDate: ((_c = props.selectedDates) === null || _c === void 0 ? void 0 : _c.from) || null,
+        startDate: ((_d = props.selectedDates) === null || _d === void 0 ? void 0 : _d.from) || null,
         unavailableDates: props.unavailableDates,
     });
     return (react_1.default.createElement(date_range_picker_context_1.DateRangePickerContext.Provider, { value: dateRangePickerProps },

package/date-range-picker/date-range-picker.stories.js

@@ -35,12 +35,29 @@ var __importStar = (this && this.__importStar) || (function () {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Default = Default;
 const noop_1 = require("@uxf/core/utils/noop");
+const date_1 = require("@uxf/localize/src/date");
 const react_1 = __importStar(require("react"));
 const action_1 = require("../utils/action");
 const date_range_picker_1 = require("./date-range-picker");
+const today = (0, date_1.dayjsTz)();
+const minDate = today.subtract(10, "day").toDate();
+const maxDate = today.add(20, "days").toDate();
+const unavailableDates = [
+    today.toDate(),
+    today.add(5, "days").toDate(),
+    today.add(6, "days").toDate(),
+    today.add(7, "days").toDate(),
+    today.add(11, "days").toDate(),
+    today.add(12, "days").toDate(),
+];
 function Default() {
     const [value, setValue] = (0, react_1.useState)(null);
     const onChange = (0, action_1.action)("onChange", setValue);
-    const testDatePickers = react_1.default.createElement(date_range_picker_1.DateRangePicker, { onChange: onChange, onClosePopover: noop_1.noop, selectedDates: value });
-    return react_1.default.createElement("div", { className: "max-w-screen-sm space-y-4 rounded p-8" }, testDatePickers);
+    return (react_1.default.createElement("div", { className: "max-w-screen-sm space-y-4 rounded p-8 dark:text-white" },
+        react_1.default.createElement("p", { className: "text-lg" }, "Date range picker with min max and unavailable dates"),
+        react_1.default.createElement(date_range_picker_1.DateRangePicker, { maxDate: maxDate, minDate: minDate, onChange: onChange, onClosePopover: noop_1.noop, selectedDates: value, unavailableDates: unavailableDates }),
+        react_1.default.createElement("p", { className: "text-lg" }, "Date range picker with min selected days"),
+        react_1.default.createElement(date_range_picker_1.DateRangePicker, { minSelectedDays: 6, onChange: onChange, onClosePopover: noop_1.noop, selectedDates: value }),
+        react_1.default.createElement("p", { className: "text-lg" }, "Date range picker with exact selected days"),
+        react_1.default.createElement(date_range_picker_1.DateRangePicker, { exactSelectedDays: 4, onChange: onChange, onClosePopover: noop_1.noop, selectedDates: value })));
 }

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

@@ -11,6 +11,10 @@ export declare const splitValueToRange: (value: string | undefined | null) => {
 export interface DateRangePickerInputProps extends Omit<InputWithPopoverProps<string | null>, "children" | "placeholder" | "triggerElement"> {
     bottomContent?: ReactNode;
     datesConfig?: DatesConfig[];
+    exactSelectedDays?: number;
+    maxDate?: Date;
+    minDate?: Date;
+    minSelectedDays?: number;
     numberOfMonths?: number;
     placeholder?: string;
     style?: CSSProperties;

package/date-range-picker-input/date-range-picker-input.js

@@ -67,6 +67,6 @@ exports.DateRangePickerInput = (0, react_1.forwardRef)((props, ref) => {
     const selectedDates = props.value
         ? { from: parsedFrom.isValid() ? parsedFrom.toDate() : null, to: parsedTo.isValid() ? parsedTo.toDate() : null }
         : null;
-    return (react_1.default.createElement(_input_with_popover_1._InputWithPopover, { ...restProps, placeholder: props.placeholder, ref: ref, triggerElement: (_a = props.triggerElement) !== null && _a !== void 0 ? _a : react_1.default.createElement(icon_1.Icon, { name: "calendar", size: 20 }), value: (_b = props.value) !== null && _b !== void 0 ? _b : "" }, ({ close }) => (react_1.default.createElement(date_range_picker_1.DateRangePicker, { bottomContent: props.bottomContent, datesConfig: props.datesConfig, numberOfMonths: numberOfMonths, onChange: onDatePickerChange, onClosePopover: close, selectedDates: selectedDates, style: props.style, unavailableDates: props.unavailableDates }))));
+    return (react_1.default.createElement(_input_with_popover_1._InputWithPopover, { ...restProps, placeholder: props.placeholder, ref: ref, triggerElement: (_a = props.triggerElement) !== null && _a !== void 0 ? _a : react_1.default.createElement(icon_1.Icon, { name: "calendar", size: 20 }), value: (_b = props.value) !== null && _b !== void 0 ? _b : "" }, ({ close }) => (react_1.default.createElement(date_range_picker_1.DateRangePicker, { bottomContent: props.bottomContent, datesConfig: props.datesConfig, exactSelectedDays: props.exactSelectedDays, maxDate: props.maxDate, minDate: props.minDate, minSelectedDays: props.minSelectedDays, numberOfMonths: numberOfMonths, onChange: onDatePickerChange, onClosePopover: close, selectedDates: selectedDates, style: props.style, unavailableDates: props.unavailableDates }))));
 });
 exports.DateRangePickerInput.displayName = "UxfUiDatePickerInput";

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@uxf/ui",
-    "version": "11.97.0",
+    "version": "11.99.1",
     "description": "",
     "publishConfig": {
         "access": "public"
@@ -21,16 +21,16 @@
     },
     "license": "MIT",
     "dependencies": {
-        "@floating-ui/react": "0.27.16",
+        "@floating-ui/react": "0.27.17",
         "@headlessui/react": "1.7.19",
         "@uxf/core": "11.97.0",
         "@uxf/core-react": "11.97.0",
-        "@uxf/datepicker": "11.94.0",
+        "@uxf/datepicker": "11.99.1",
         "@uxf/localize": "11.92.1",
         "@uxf/styles": "11.97.0",
         "color2k": "2.0.3",
         "dayjs": "1.11.19",
-        "react-dropzone": "14.3.8"
+        "react-dropzone": "14.4.0"
     },
     "peerDependencies": {
         "react": ">= 18.2.0",