@itcase/ui 1.8.142 → 1.8.143

package/dist/{DatePicker_cjs_CiH9nFzY.js → DatePicker_cjs_BOPN9WVz.js}

@@ -94,11 +94,11 @@ const datePickerConfig = {
 };
 function DatePickerInput(props) {
     const { className, datePickerProps = {}, endValue, inputProps = {}, value, onChange, } = props;
-    const datepickerRef = React.useRef(null);
-    const { customTimeInput, disablePastDays, monthsShown, selectsRange } = datePickerProps;
-    const appearanceConfig = useAppearanceConfig.useAppearanceConfig(datePickerProps.appearance, datePickerConfig);
+    const { appearance, customTimeInput, disablePastDays, monthsShown, selectsRange, showWeekPicker, } = datePickerProps;
+    const appearanceConfig = useAppearanceConfig.useAppearanceConfig(appearance, datePickerConfig);
     const propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(datePickerProps, appearanceConfig);
     const { daySize, dayTextColor, dayTextShape, dayTextSize, iconFill, iconFillHover, iconFillSize, iconItemFill, iconLeft, iconRight, iconShape, monthTextColor, monthTextSize, monthTextWeight, popper, popperPlacement, sizeClass, widthClass, yearTextColor, yearTextSize, yearTextWeight, isClearable, } = propsGenerator;
+    const datepickerRef = React.useRef(null);
     const [dateStart, dateEnd] = React.useMemo(() => {
         let dateStart;
         if (value) {
@@ -126,10 +126,27 @@ function DatePickerInput(props) {
         }
         return [dateStart, dateEnd];
     }, [value, endValue]);
-    const handleChange = React.useCallback((valuesList) => {
-        const [newDateStart, newDateEnd] = valuesList;
-        onChange(newDateStart, newDateEnd);
-    }, [onChange]);
+    const handleChange = React.useCallback((selected) => {
+        const valuesList = Array.isArray(selected) ? selected : [selected];
+        const [selectedDateStart, selectedDateEnd] = valuesList;
+        if (selectedDateStart && showWeekPicker) {
+            // "getDay" return from 0(sunday) to 6 (saturday).
+            // When 0(sunday) - we set as 7(end of week from 1(monday))
+            const weekDayIndex = selectedDateStart.getDay() || 7;
+            // Collect monday of week from selected date
+            const mondayDate = new Date(selectedDateStart);
+            mondayDate.setDate(selectedDateStart.getDate() - (weekDayIndex - 1));
+            // Collect sunday of week from selected date
+            const sundayDate = new Date(mondayDate);
+            sundayDate.setDate(mondayDate.getDate() + 6);
+            // Selected date can be wednesday, but for week picker
+            // we return start and end of selected week.
+            onChange(mondayDate, sundayDate);
+        }
+        else {
+            onChange(selectedDateStart, selectedDateEnd);
+        }
+    }, [showWeekPicker, onChange]);
     const renderDayContents = React.useCallback((day, date) => {
         return (jsxRuntime.jsx(Button.Button, { className: "react-datepicker__day-button", size: daySize, label: date.getDate().toString(), labelTextColor: dayTextColor, labelTextSize: dayTextSize, shape: dayTextShape }));
     }, [daySize, dayTextColor, dayTextShape, dayTextSize]);
@@ -149,7 +166,7 @@ function DatePickerInput(props) {
         yearTextWeight,
     ]);
     const { styles: datePickerStyles } = useStyles.useStyles(props);
-    return (jsxRuntime.jsx("div", { className: clsx(className, 'datepicker', monthsShown && 'datepicker_multiple-months', customTimeInput && 'datepicker_button', sizeClass && `datepicker_size_${sizeClass}`, widthClass && `datepicker_width_${widthClass}`), style: datePickerStyles, children: jsxRuntime.jsx(DatePicker, { ref: datepickerRef, minDate: disablePastDays ? new Date() : undefined, customInput: jsxRuntime.jsx(DatePickerCustomInput, { datepickerRef: datepickerRef, inputProps: inputProps, isClearable: isClearable }), endDate: selectsRange ? dateEnd : undefined, locale: locale.ru, popperClassName: popper && `react-datepicker-popper-${popper}`, popperPlacement: popperPlacement, renderCustomHeader: renderCustomHeader, renderDayContents: renderDayContents, selected: dateStart, startDate: dateStart, onChange: selectsRange ? handleChange : onChange, ...datePickerProps, 
+    return (jsxRuntime.jsx("div", { className: clsx(className, 'datepicker', monthsShown && 'datepicker_multiple-months', customTimeInput && 'datepicker_button', sizeClass && `datepicker_size_${sizeClass}`, widthClass && `datepicker_width_${widthClass}`), style: datePickerStyles, children: jsxRuntime.jsx(DatePicker, { ref: datepickerRef, minDate: disablePastDays ? new Date() : undefined, customInput: jsxRuntime.jsx(DatePickerCustomInput, { datepickerRef: datepickerRef, inputProps: inputProps, isClearable: isClearable }), endDate: selectsRange ? dateEnd : undefined, locale: locale.ru, popperClassName: popper && `react-datepicker-popper-${popper}`, popperPlacement: popperPlacement, renderCustomHeader: renderCustomHeader, renderDayContents: renderDayContents, selected: dateStart, startDate: dateStart, onChange: handleChange, ...datePickerProps, 
             // Important for use custom clear button
             isClearable: false }) }));
 }

package/dist/{DatePicker_es_DngPNvEg.js → DatePicker_es_-aO8EkK8.js}

@@ -92,11 +92,11 @@ const datePickerConfig = {
 };
 function DatePickerInput(props) {
     const { className, datePickerProps = {}, endValue, inputProps = {}, value, onChange, } = props;
-    const datepickerRef = useRef(null);
-    const { customTimeInput, disablePastDays, monthsShown, selectsRange } = datePickerProps;
-    const appearanceConfig = useAppearanceConfig(datePickerProps.appearance, datePickerConfig);
+    const { appearance, customTimeInput, disablePastDays, monthsShown, selectsRange, showWeekPicker, } = datePickerProps;
+    const appearanceConfig = useAppearanceConfig(appearance, datePickerConfig);
     const propsGenerator = useDevicePropsGenerator(datePickerProps, appearanceConfig);
     const { daySize, dayTextColor, dayTextShape, dayTextSize, iconFill, iconFillHover, iconFillSize, iconItemFill, iconLeft, iconRight, iconShape, monthTextColor, monthTextSize, monthTextWeight, popper, popperPlacement, sizeClass, widthClass, yearTextColor, yearTextSize, yearTextWeight, isClearable, } = propsGenerator;
+    const datepickerRef = useRef(null);
     const [dateStart, dateEnd] = useMemo(() => {
         let dateStart;
         if (value) {
@@ -124,10 +124,27 @@ function DatePickerInput(props) {
         }
         return [dateStart, dateEnd];
     }, [value, endValue]);
-    const handleChange = useCallback((valuesList) => {
-        const [newDateStart, newDateEnd] = valuesList;
-        onChange(newDateStart, newDateEnd);
-    }, [onChange]);
+    const handleChange = useCallback((selected) => {
+        const valuesList = Array.isArray(selected) ? selected : [selected];
+        const [selectedDateStart, selectedDateEnd] = valuesList;
+        if (selectedDateStart && showWeekPicker) {
+            // "getDay" return from 0(sunday) to 6 (saturday).
+            // When 0(sunday) - we set as 7(end of week from 1(monday))
+            const weekDayIndex = selectedDateStart.getDay() || 7;
+            // Collect monday of week from selected date
+            const mondayDate = new Date(selectedDateStart);
+            mondayDate.setDate(selectedDateStart.getDate() - (weekDayIndex - 1));
+            // Collect sunday of week from selected date
+            const sundayDate = new Date(mondayDate);
+            sundayDate.setDate(mondayDate.getDate() + 6);
+            // Selected date can be wednesday, but for week picker
+            // we return start and end of selected week.
+            onChange(mondayDate, sundayDate);
+        }
+        else {
+            onChange(selectedDateStart, selectedDateEnd);
+        }
+    }, [showWeekPicker, onChange]);
     const renderDayContents = useCallback((day, date) => {
         return (jsx(Button, { className: "react-datepicker__day-button", size: daySize, label: date.getDate().toString(), labelTextColor: dayTextColor, labelTextSize: dayTextSize, shape: dayTextShape }));
     }, [daySize, dayTextColor, dayTextShape, dayTextSize]);
@@ -147,7 +164,7 @@ function DatePickerInput(props) {
         yearTextWeight,
     ]);
     const { styles: datePickerStyles } = useStyles(props);
-    return (jsx("div", { className: clsx(className, 'datepicker', monthsShown && 'datepicker_multiple-months', customTimeInput && 'datepicker_button', sizeClass && `datepicker_size_${sizeClass}`, widthClass && `datepicker_width_${widthClass}`), style: datePickerStyles, children: jsx(DatePicker, { ref: datepickerRef, minDate: disablePastDays ? new Date() : undefined, customInput: jsx(DatePickerCustomInput, { datepickerRef: datepickerRef, inputProps: inputProps, isClearable: isClearable }), endDate: selectsRange ? dateEnd : undefined, locale: ru, popperClassName: popper && `react-datepicker-popper-${popper}`, popperPlacement: popperPlacement, renderCustomHeader: renderCustomHeader, renderDayContents: renderDayContents, selected: dateStart, startDate: dateStart, onChange: selectsRange ? handleChange : onChange, ...datePickerProps, 
+    return (jsx("div", { className: clsx(className, 'datepicker', monthsShown && 'datepicker_multiple-months', customTimeInput && 'datepicker_button', sizeClass && `datepicker_size_${sizeClass}`, widthClass && `datepicker_width_${widthClass}`), style: datePickerStyles, children: jsx(DatePicker, { ref: datepickerRef, minDate: disablePastDays ? new Date() : undefined, customInput: jsx(DatePickerCustomInput, { datepickerRef: datepickerRef, inputProps: inputProps, isClearable: isClearable }), endDate: selectsRange ? dateEnd : undefined, locale: ru, popperClassName: popper && `react-datepicker-popper-${popper}`, popperPlacement: popperPlacement, renderCustomHeader: renderCustomHeader, renderDayContents: renderDayContents, selected: dateStart, startDate: dateStart, onChange: handleChange, ...datePickerProps, 
             // Important for use custom clear button
             isClearable: false }) }));
 }

package/dist/cjs/components/DatePeriod.js

@@ -4,7 +4,7 @@ var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var clsx = require('clsx');
 var common = require('@itcase/common');
-var DatePicker = require('../../DatePicker_cjs_CiH9nFzY.js');
+var DatePicker = require('../../DatePicker_cjs_BOPN9WVz.js');
 var useAppearanceConfig = require('../hooks/useAppearanceConfig/useAppearanceConfig.js');
 var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
 var ChipsGroup = require('../../ChipsGroup_cjs_BNfzAmhc.js');

package/dist/cjs/components/DatePicker.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var DatePicker = require('../../DatePicker_cjs_CiH9nFzY.js');
+var DatePicker = require('../../DatePicker_cjs_BOPN9WVz.js');
 require('react/jsx-runtime');
 require('react');
 require('clsx');

package/dist/components/DatePeriod.js

@@ -2,7 +2,7 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import { useCallback } from 'react';
 import clsx from 'clsx';
 import { DATE_PERIOD_INTERVALS } from '@itcase/common';
-import { D as DatePickerInput } from '../DatePicker_es_DngPNvEg.js';
+import { D as DatePickerInput } from '../DatePicker_es_-aO8EkK8.js';
 import { useAppearanceConfig } from '../hooks/useAppearanceConfig/useAppearanceConfig.js';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import { b as ChipsGroup, C as Chips } from '../ChipsGroup_es_UTiUhYs7.js';

package/dist/components/DatePicker.js

@@ -1,4 +1,4 @@
-export { D as DatePickerInput, a as datePickerAppearance, d as datePickerConfig } from '../DatePicker_es_DngPNvEg.js';
+export { D as DatePickerInput, a as datePickerAppearance, d as datePickerConfig } from '../DatePicker_es_-aO8EkK8.js';
 import 'react/jsx-runtime';
 import 'react';
 import 'clsx';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itcase/ui",
-  "version": "1.8.142",
+  "version": "1.8.143",
   "description": "UI components (Modal, Loader, Popup, etc)",
   "keywords": [
     "Modal",
@@ -103,17 +103,17 @@
     "@emotion/is-prop-valid": "^1.4.0",
     "@itcase/common": "^1.2.32",
     "@itcase/icons": "^1.2.23",
-    "@itcase/storybook-config": "^1.2.12",
+    "@itcase/storybook-config": "^1.2.13",
     "@itcase/tokens-am": "^1.1.20",
     "@itcase/tokens-baikal": "^1.1.17",
     "@itcase/tokens-palette": "^1.1.20",
     "clsx": "^2.1.1",
     "date-fns": "^4.1.0",
-    "framer-motion": "^12.23.18",
+    "framer-motion": "^12.23.19",
     "js-cookie": "^3.0.5",
     "lodash": "^4.17.21",
     "luxon": "^3.7.2",
-    "motion": "^12.23.18",
+    "motion": "^12.23.19",
     "rc-slider": "^11.1.9",
     "react": "^18.3.1",
     "react-dadata": "^2.27.4",
@@ -171,13 +171,13 @@
     "lint-staged": "^16.2.0",
     "prettier": "^3.6.2",
     "react-docgen-typescript": "^2.4.0",
-    "rollup": "^4.52.0",
+    "rollup": "^4.52.2",
     "rollup-plugin-copy": "^3.5.0",
     "rollup-plugin-dts": "^6.2.3",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-preserve-directives": "^1.1.3",
     "semantic-release": "^24.2.9",
-    "storybook": "^9.1.7",
+    "storybook": "^9.1.8",
     "stylelint": "^16.24.0",
     "typescript": "^5.9.2"
   }