@itcase/ui 1.9.18 → 1.9.19

package/dist/{ChipsGroup_cjs_mhZzYQ51.js → ChipsGroup_cjs_D0bGehZY.js}

@@ -336,7 +336,6 @@ function ChipsGroup(props) {
     const { directionClass, alignClass, alignDirectionClass, fillClass, borderColorClass, borderTypeClass, borderWidthClass, chipsAppearance, widthClass, wrapClass, } = propsGenerator;
     // @ts-expect-error
     const { styles: groupStyles } = useStyles.useStyles(props);
-    console.log();
     return (jsxRuntime.jsx("div", { className: clsx(className, 'chips-group', 'group', widthClass && `width_${widthClass}`, alignDirectionClass && `align_${alignDirectionClass}`, directionClass && `group_direction_${directionClass}`, alignClass && `align_${alignClass}`, fillClass && `fill_${fillClass}`, horizontalScroll && 'group_scroll_horizontal', wrapClass && `group_wrap_${wrapClass}`, borderColorClass && `border-color_${borderColorClass}`, borderWidthClass && `border-width_${borderWidthClass}`, borderTypeClass && `border_type_${borderTypeClass}`), "data-test-id": dataTestId, "data-tour": dataTour, style: Object.assign({}, groupStyles, style), children: children
             ? children
             : chipsList?.map((item) => (jsxRuntime.jsx(Chips, { appearance: chipsAppearance, label: item.label, iconAfter: item.iconAfter, iconBefore: item.iconBefore, isActive: item.isActive, isDisabled: item.isDisabled, onClick: () => onClick(item) }, item.id))) }));

package/dist/{ChipsGroup_es_CyW110FA.js → ChipsGroup_es_DWvsJ5bu.js}

@@ -334,7 +334,6 @@ function ChipsGroup(props) {
     const { directionClass, alignClass, alignDirectionClass, fillClass, borderColorClass, borderTypeClass, borderWidthClass, chipsAppearance, widthClass, wrapClass, } = propsGenerator;
     // @ts-expect-error
     const { styles: groupStyles } = useStyles(props);
-    console.log();
     return (jsx("div", { className: clsx(className, 'chips-group', 'group', widthClass && `width_${widthClass}`, alignDirectionClass && `align_${alignDirectionClass}`, directionClass && `group_direction_${directionClass}`, alignClass && `align_${alignClass}`, fillClass && `fill_${fillClass}`, horizontalScroll && 'group_scroll_horizontal', wrapClass && `group_wrap_${wrapClass}`, borderColorClass && `border-color_${borderColorClass}`, borderWidthClass && `border-width_${borderWidthClass}`, borderTypeClass && `border_type_${borderTypeClass}`), "data-test-id": dataTestId, "data-tour": dataTour, style: Object.assign({}, groupStyles, style), children: children
             ? children
             : chipsList?.map((item) => (jsx(Chips, { appearance: chipsAppearance, label: item.label, iconAfter: item.iconAfter, iconBefore: item.iconBefore, isActive: item.isActive, isDisabled: item.isDisabled, onClick: () => onClick(item) }, item.id))) }));

package/dist/{DatePicker_cjs_ChjvvsGh.js → DatePicker_cjs_Cm50AX0J.js}

@@ -86,16 +86,31 @@ const datePickerAppearance = {
     ...datePickerStyle,
 };
 
+const getWeekRange = (date) => {
+    // "getDay" return from 0(sunday) to 6 (saturday).
+    // When 0(sunday) - we set as 7(end of week from 1(monday))
+    const weekDayIndex = date.getDay() || 7;
+    // Collect monday of week from selected date
+    const mondayDate = new Date(date);
+    mondayDate.setDate(date.getDate() - (weekDayIndex - 1));
+    // Collect sunday of week from selected date
+    const sundayDate = new Date(mondayDate);
+    sundayDate.setDate(mondayDate.getDate() + 6);
+    return {
+        mondayDate,
+        sundayDate,
+    };
+};
+
 const datePickerConfig = {
     appearance: datePickerAppearance,
     setAppearance: (appearanceConfig) => {
         datePickerConfig.appearance = appearanceConfig;
     },
 };
-const INPUT_CLASSNAME = 'datepicker__input';
 function DatePickerInput(props) {
     const { className, datePickerProps = {}, endValue, inputProps = {}, value, onChange, } = props;
-    const { appearance, customTimeInput, disablePastDays, monthsShown, selectsRange, showWeekPicker, } = datePickerProps;
+    const { appearance, customTimeInput, disablePastDays, monthsShown, selectsRange, showWeekNumbers, 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;
@@ -124,16 +139,9 @@ function DatePickerInput(props) {
     const handleChange = React.useCallback((selected) => {
         const valuesList = Array.isArray(selected) ? selected : [selected];
         const [selectedDateStart, selectedDateEnd] = valuesList;
+        // "showWeekPicker" means to select full weak by one of day
         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);
+            const { mondayDate, sundayDate } = getWeekRange(selectedDateStart);
             // Selected date can be wednesday, but for week picker
             // we return start and end of selected week.
             onChange(mondayDate, sundayDate);
@@ -142,6 +150,10 @@ function DatePickerInput(props) {
             onChange(selectedDateStart, selectedDateEnd);
         }
     }, [showWeekPicker, onChange]);
+    const handleWeekSelect = React.useCallback((startDateOfSelectedWeek) => {
+        const { mondayDate, sundayDate } = getWeekRange(startDateOfSelectedWeek);
+        onChange(mondayDate, sundayDate);
+    }, [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]);
@@ -161,7 +173,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, outsideClickIgnoreClass: INPUT_CLASSNAME, popperClassName: popper && `react-datepicker-popper-${popper}`, popperPlacement: popperPlacement, preventOpenOnFocus: true, renderCustomHeader: renderCustomHeader, renderDayContents: renderDayContents, selected: dateStart, startDate: dateStart, onChange: handleChange, ...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, outsideClickIgnoreClass: "react-datepicker-popper", popperClassName: popper && `react-datepicker-popper-${popper}`, popperPlacement: popperPlacement, preventOpenOnFocus: true, renderCustomHeader: renderCustomHeader, renderDayContents: renderDayContents, selected: dateStart, startDate: dateStart, onChange: handleChange, onWeekSelect: showWeekNumbers ? handleWeekSelect : undefined, ...datePickerProps, 
             // Important for use custom clear button
             isClearable: false }) }));
 }
@@ -174,13 +186,14 @@ const DatePickerCustomInput = React.forwardRef((props, ref) => {
         }
         return '';
     }, [value]);
-    return (jsxRuntime.jsxs(React.Fragment, { children: [jsxRuntime.jsx(Input.Input, { ...props, ...inputProps, className: clsx(inputProps.className, INPUT_CLASSNAME), ref: ref, autocomplete: "off", value: multipleValue, isReadOnly: true }), inputIcon && jsxRuntime.jsx(DatePickerInputIcon, { ...inputProps }), isClearable && jsxRuntime.jsx(DatePickerClearButton, { ...inputProps })] }));
+    return (jsxRuntime.jsxs(React.Fragment, { children: [jsxRuntime.jsx(Input.Input, { ...props, ...inputProps, className: clsx(inputProps.className, 'datepicker__input'), ref: ref, autocomplete: "off", value: multipleValue, isReadOnly: true }), inputIcon && jsxRuntime.jsx(DatePickerInputIcon, { ...inputProps }), isClearable && jsxRuntime.jsx(DatePickerClearButton, { ...inputProps })] }));
 });
 function DatePickerClearButton(props) {
     const { clearIcon, clearIconFill, clearIconFillHover, clearIconFillSize, clearIconItemFill, clearIconItemFillHover, clearIconShape, clearIconSize, clearIconSrc, clearLabel, clearLabelTextColor, clearLabelTextColorHover, clearLabelTextSize, datepickerRef, } = props;
     const onClick = React.useCallback((event) => {
         datepickerRef?.current?.onClearClick(event);
         datepickerRef?.current?.handleFocus(event);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
     return (jsxRuntime.jsx(React.Fragment, { children: clearLabel ? (jsxRuntime.jsx(Label.Label, { className: clsx('react-datepicker__clear-label', 'cursor_type_pointer'), label: clearLabel, labelTextColor: clearLabelTextColor, labelTextColorHover: clearLabelTextColorHover, labelTextSize: clearLabelTextSize, onClick: onClick })) : ((clearIcon || clearIconSrc) && (jsxRuntime.jsx(Icon.Icon, { className: clsx('react-datepicker__clear-icon', 'cursor_type_pointer'), size: clearIconSize, fill: clearIconFill, fillHover: clearIconFillHover, fillSize: clearIconFillSize, iconFill: clearIconItemFill, iconFillHover: clearIconItemFillHover, imageSrc: clearIconSrc, shape: clearIconShape, SvgImage: clearIcon, onClick: onClick }))) }));
 }

package/dist/{DatePicker_es_D6PQaING.js → DatePicker_es_B-WPA9y9.js}

@@ -84,16 +84,31 @@ const datePickerAppearance = {
     ...datePickerStyle,
 };
 
+const getWeekRange = (date) => {
+    // "getDay" return from 0(sunday) to 6 (saturday).
+    // When 0(sunday) - we set as 7(end of week from 1(monday))
+    const weekDayIndex = date.getDay() || 7;
+    // Collect monday of week from selected date
+    const mondayDate = new Date(date);
+    mondayDate.setDate(date.getDate() - (weekDayIndex - 1));
+    // Collect sunday of week from selected date
+    const sundayDate = new Date(mondayDate);
+    sundayDate.setDate(mondayDate.getDate() + 6);
+    return {
+        mondayDate,
+        sundayDate,
+    };
+};
+
 const datePickerConfig = {
     appearance: datePickerAppearance,
     setAppearance: (appearanceConfig) => {
         datePickerConfig.appearance = appearanceConfig;
     },
 };
-const INPUT_CLASSNAME = 'datepicker__input';
 function DatePickerInput(props) {
     const { className, datePickerProps = {}, endValue, inputProps = {}, value, onChange, } = props;
-    const { appearance, customTimeInput, disablePastDays, monthsShown, selectsRange, showWeekPicker, } = datePickerProps;
+    const { appearance, customTimeInput, disablePastDays, monthsShown, selectsRange, showWeekNumbers, 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;
@@ -122,16 +137,9 @@ function DatePickerInput(props) {
     const handleChange = useCallback((selected) => {
         const valuesList = Array.isArray(selected) ? selected : [selected];
         const [selectedDateStart, selectedDateEnd] = valuesList;
+        // "showWeekPicker" means to select full weak by one of day
         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);
+            const { mondayDate, sundayDate } = getWeekRange(selectedDateStart);
             // Selected date can be wednesday, but for week picker
             // we return start and end of selected week.
             onChange(mondayDate, sundayDate);
@@ -140,6 +148,10 @@ function DatePickerInput(props) {
             onChange(selectedDateStart, selectedDateEnd);
         }
     }, [showWeekPicker, onChange]);
+    const handleWeekSelect = useCallback((startDateOfSelectedWeek) => {
+        const { mondayDate, sundayDate } = getWeekRange(startDateOfSelectedWeek);
+        onChange(mondayDate, sundayDate);
+    }, [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]);
@@ -159,7 +171,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, outsideClickIgnoreClass: INPUT_CLASSNAME, popperClassName: popper && `react-datepicker-popper-${popper}`, popperPlacement: popperPlacement, preventOpenOnFocus: true, renderCustomHeader: renderCustomHeader, renderDayContents: renderDayContents, selected: dateStart, startDate: dateStart, onChange: handleChange, ...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, outsideClickIgnoreClass: "react-datepicker-popper", popperClassName: popper && `react-datepicker-popper-${popper}`, popperPlacement: popperPlacement, preventOpenOnFocus: true, renderCustomHeader: renderCustomHeader, renderDayContents: renderDayContents, selected: dateStart, startDate: dateStart, onChange: handleChange, onWeekSelect: showWeekNumbers ? handleWeekSelect : undefined, ...datePickerProps, 
             // Important for use custom clear button
             isClearable: false }) }));
 }
@@ -172,13 +184,14 @@ const DatePickerCustomInput = React.forwardRef((props, ref) => {
         }
         return '';
     }, [value]);
-    return (jsxs(React.Fragment, { children: [jsx(Input, { ...props, ...inputProps, className: clsx(inputProps.className, INPUT_CLASSNAME), ref: ref, autocomplete: "off", value: multipleValue, isReadOnly: true }), inputIcon && jsx(DatePickerInputIcon, { ...inputProps }), isClearable && jsx(DatePickerClearButton, { ...inputProps })] }));
+    return (jsxs(React.Fragment, { children: [jsx(Input, { ...props, ...inputProps, className: clsx(inputProps.className, 'datepicker__input'), ref: ref, autocomplete: "off", value: multipleValue, isReadOnly: true }), inputIcon && jsx(DatePickerInputIcon, { ...inputProps }), isClearable && jsx(DatePickerClearButton, { ...inputProps })] }));
 });
 function DatePickerClearButton(props) {
     const { clearIcon, clearIconFill, clearIconFillHover, clearIconFillSize, clearIconItemFill, clearIconItemFillHover, clearIconShape, clearIconSize, clearIconSrc, clearLabel, clearLabelTextColor, clearLabelTextColorHover, clearLabelTextSize, datepickerRef, } = props;
     const onClick = useCallback((event) => {
         datepickerRef?.current?.onClearClick(event);
         datepickerRef?.current?.handleFocus(event);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
     return (jsx(React.Fragment, { children: clearLabel ? (jsx(Label, { className: clsx('react-datepicker__clear-label', 'cursor_type_pointer'), label: clearLabel, labelTextColor: clearLabelTextColor, labelTextColorHover: clearLabelTextColorHover, labelTextSize: clearLabelTextSize, onClick: onClick })) : ((clearIcon || clearIconSrc) && (jsx(Icon, { className: clsx('react-datepicker__clear-icon', 'cursor_type_pointer'), size: clearIconSize, fill: clearIconFill, fillHover: clearIconFillHover, fillSize: clearIconFillSize, iconFill: clearIconItemFill, iconFillHover: clearIconItemFillHover, imageSrc: clearIconSrc, shape: clearIconShape, SvgImage: clearIcon, onClick: onClick }))) }));
 }

package/dist/cjs/components/Chips.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var ChipsGroup = require('../../ChipsGroup_cjs_mhZzYQ51.js');
+var ChipsGroup = require('../../ChipsGroup_cjs_D0bGehZY.js');
 require('react/jsx-runtime');
 require('clsx');
 require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');

package/dist/cjs/components/DatePeriod.js

@@ -7,8 +7,8 @@ var luxon = require('luxon');
 var common = require('@itcase/common');
 var useAppearanceConfig = require('../hooks/useAppearanceConfig/useAppearanceConfig.js');
 var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
-var ChipsGroup = require('../../ChipsGroup_cjs_mhZzYQ51.js');
-var DatePicker = require('../../DatePicker_cjs_ChjvvsGh.js');
+var ChipsGroup = require('../../ChipsGroup_cjs_D0bGehZY.js');
+var DatePicker = require('../../DatePicker_cjs_Cm50AX0J.js');
 require('react-select');
 require('../../Icon_cjs_BgGtdviU.js');
 var SelectContainer = require('../../SelectContainer_cjs_tjM35jHG.js');

package/dist/cjs/components/DatePicker.js

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

package/dist/components/Chips.js

@@ -1,4 +1,4 @@
-export { C as Chips, b as ChipsGroup, a as chipsAppearance, c as chipsConfig } from '../ChipsGroup_es_CyW110FA.js';
+export { C as Chips, b as ChipsGroup, a as chipsAppearance, c as chipsConfig } from '../ChipsGroup_es_DWvsJ5bu.js';
 import 'react/jsx-runtime';
 import 'clsx';
 import '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';

package/dist/components/DatePeriod.js

@@ -5,8 +5,8 @@ import { DateTime } from 'luxon';
 import { DATE_PERIOD_INTERVALS } from '@itcase/common';
 import { useAppearanceConfig } from '../hooks/useAppearanceConfig/useAppearanceConfig.js';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
-import { b as ChipsGroup, C as Chips } from '../ChipsGroup_es_CyW110FA.js';
-import { D as DatePickerInput } from '../DatePicker_es_D6PQaING.js';
+import { b as ChipsGroup, C as Chips } from '../ChipsGroup_es_DWvsJ5bu.js';
+import { D as DatePickerInput } from '../DatePicker_es_B-WPA9y9.js';
 import 'react-select';
 import '../Icon_es_CtZHchZc.js';
 import { a as SelectContainer } from '../SelectContainer_es_BKIz5i19.js';

package/dist/components/DatePicker.js

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

package/dist/types/components/DatePicker/DatePicker.utils.d.ts

@@ -0,0 +1,6 @@
+type WeekRange = {
+    mondayDate: Date;
+    sundayDate: Date;
+};
+declare const getWeekRange: (date: Date) => WeekRange;
+export { getWeekRange };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itcase/ui",
-  "version": "1.9.18",
+  "version": "1.9.19",
   "description": "UI components (Modal, Loader, Popup, etc)",
   "keywords": [
     "Modal",