@itcase/ui-web 1.10.24 → 1.10.26

package/dist/types/components/DatePeriod/DatePeriod.js

@@ -2,13 +2,13 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback } from 'react';
 import clsx from 'clsx';
 import { DateTime } from 'luxon';
-import { DATE_PERIOD_INTERVALS } from '@itcase/common';
 import { useAppearanceConfig, useDevicePropsGenerator, } from '@itcase/ui-core/hooks';
 import { mergeAppearanceKeys } from '@itcase/ui-core/utils';
 import { Chips, ChipsGroup } from 'src/components/Chips';
 import { DatePickerInput } from 'src/components/DatePicker';
 import { Select } from 'src/components/Select';
 import { datePeriodAppearance } from './DatePeriod.appearance';
+import { resolveDatePeriodIntervalsList } from './DatePeriod.utils';
 const datePeriodConfig = {
     appearance: datePeriodAppearance,
     setAppearance: (appearanceConfig) => {
@@ -16,9 +16,10 @@ const datePeriodConfig = {
     },
 };
 function DatePeriod(props) {
-    const { appearance, className, dataTestId, dataTour, datePeriodIntervalsList = Object.values(DATE_PERIOD_INTERVALS), datePeriodSelectFirstOptions, datePeriodSelectFirstPlaceholder = 'Выбрать период', datePeriodSelectFirstValue, datePeriodSelectSecondOptions, datePeriodSelectSecondPlaceholder = 'Выбрать период', datePeriodSelectSecondValue, datePeriodValueEnd, datePeriodValueStart, monthsShown = 2, popperPlacement, selectFirstIsSearchable = true, selectFirstWidth = '180px', selectSecondIsSearchable = true, selectSecondWidth = '180px', selectsRange = true, showWeekNumbers = false, isDisabled, isSkeleton, onChangeDatePeriod, onChangeDatePeriodFirstSelect, onChangeDatePeriodSecondSelect, onKeyDown, } = props;
+    const { appearance, className, dataTestId, dataTour, type = 'year', datePeriodIntervalsList, datePeriodSelectFirstOptions, datePeriodSelectFirstPlaceholder = 'Выбрать период', datePeriodSelectFirstValue, datePeriodSelectSecondOptions, datePeriodSelectSecondPlaceholder = 'Выбрать период', datePeriodSelectSecondValue, datePeriodValueEnd, datePeriodValueStart, monthsShown = 2, popperPlacement, selectFirstIsSearchable = true, selectFirstWidth = '180px', selectSecondIsSearchable = true, selectSecondWidth = '180px', selectsRange = true, showWeekNumbers = false, isDisabled, isSkeleton, onChangeDatePeriod, onChangeDatePeriodFirstSelect, onChangeDatePeriodSecondSelect, onKeyDown, } = props;
     const appearanceConfig = useAppearanceConfig(appearance, datePeriodConfig, isDisabled);
     const propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
+    const resolvedDatePeriodIntervalsList = resolveDatePeriodIntervalsList(type, datePeriodIntervalsList);
     const { fillClass, chipsAppearance, chipsAppearanceSize, chipsShape, datePickerAppearance, datePickerAppearanceSize, datePickerInputAppearance, datePickerInputAppearanceSize, datePickerInputFillHover, datePickerInputTextSize, selectAppearance, selectAppearanceSize, selectShape, shapeClass, sizeClass, } = propsGenerator;
     const onClickPeriodChips = useCallback((selectedPeriodItem) => {
         const dateStartIso = selectedPeriodItem.dateIntervalsList[0];
@@ -39,7 +40,7 @@ function DatePeriod(props) {
         return (dateStartIso === normalizedDatePeriodValueStart &&
             dateEndIso === normalizedDatePeriodValueEnd);
     }, [datePeriodValueEnd, datePeriodValueStart]);
-    return (_jsxs("div", { className: clsx(className, 'date-period', sizeClass && `date-period_size_${sizeClass}`, isSkeleton && `skeleton`), "data-testid": dataTestId, "data-tour": dataTour, children: [_jsxs("div", { className: clsx('date-period__wrapper', shapeClass && `shape_${shapeClass}`, fillClass && `fill_${fillClass}`, 'cursor_type_pointer'), children: [_jsx(ChipsGroup, { className: "date-period__choice", direction: "horizontal", children: datePeriodIntervalsList.map((datePeriodItem) => (_jsx(Chips, { appearance: mergeAppearanceKeys(chipsAppearance, chipsAppearanceSize), label: datePeriodItem.label, shape: chipsShape, isActive: checkIsChipsActive(datePeriodItem), onClick: () => onClickPeriodChips(datePeriodItem) }, datePeriodItem.value))) }), _jsx(DatePickerInput, { className: "date-period__datepicker", datePickerProps: {
+    return (_jsxs("div", { className: clsx(className, 'date-period', sizeClass && `date-period_size_${sizeClass}`, isSkeleton && `skeleton`), "data-testid": dataTestId, "data-tour": dataTour, children: [_jsxs("div", { className: clsx('date-period__wrapper', shapeClass && `shape_${shapeClass}`, fillClass && `fill_${fillClass}`, 'cursor_type_pointer'), children: [resolvedDatePeriodIntervalsList.length > 0 && (_jsx(ChipsGroup, { className: "date-period__choice", direction: "horizontal", children: resolvedDatePeriodIntervalsList.map((datePeriodItem) => (_jsx(Chips, { appearance: mergeAppearanceKeys(chipsAppearance, chipsAppearanceSize), label: datePeriodItem.label, shape: chipsShape, isActive: checkIsChipsActive(datePeriodItem), onClick: () => onClickPeriodChips(datePeriodItem) }, datePeriodItem.value))) })), _jsx(DatePickerInput, { className: "date-period__datepicker", datePickerProps: {
                             appearance: mergeAppearanceKeys(datePickerAppearance, datePickerAppearanceSize),
                             dateFormat: 'dd/MM/yyyy',
                             monthsShown: propsGenerator.monthsShown ?? monthsShown,

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

@@ -0,0 +1,4 @@
+import type { DatePeriodItem } from '@itcase/common/types';
+import type { DatePeriodType } from './DatePeriod.interface';
+declare function resolveDatePeriodIntervalsList(type?: DatePeriodType, datePeriodIntervalsList?: DatePeriodItem[]): DatePeriodItem[];
+export { resolveDatePeriodIntervalsList };

package/dist/types/components/DatePeriod/DatePeriod.utils.js

@@ -0,0 +1,18 @@
+import { DATE_PERIOD_INTERVALS } from '@itcase/common';
+const DATE_PERIOD_INTERVALS_LIST = Object.values(DATE_PERIOD_INTERVALS);
+function resolveDatePeriodIntervalsList(type = 'year', datePeriodIntervalsList) {
+    if (type === 'period') {
+        return [];
+    }
+    const sourceList = datePeriodIntervalsList ?? DATE_PERIOD_INTERVALS_LIST;
+    if (type === 'year') {
+        return sourceList;
+    }
+    const lastValue = type === 'month'
+        ? DATE_PERIOD_INTERVALS.backMonth.value
+        : DATE_PERIOD_INTERVALS.backQuarter.value;
+    const lastIndex = DATE_PERIOD_INTERVALS_LIST.findIndex((item) => item.value === lastValue);
+    const allowedValues = new Set(DATE_PERIOD_INTERVALS_LIST.slice(0, lastIndex + 1).map((item) => item.value));
+    return sourceList.filter((item) => allowedValues.has(item.value));
+}
+export { resolveDatePeriodIntervalsList };

package/dist/types/components/DatePeriod/index.d.ts

@@ -1,3 +1,3 @@
 export { DatePeriod, datePeriodConfig } from './DatePeriod';
 export { datePeriodAppearance } from './DatePeriod.appearance';
-export type { DatePeriodAppearance, DatePeriodConfig, DatePeriodProps, } from './DatePeriod.interface';
+export type { DatePeriodAppearance, DatePeriodConfig, DatePeriodProps, DatePeriodType, } from './DatePeriod.interface';

package/dist/types/components/Dropdown/Dropdown.interface.d.ts

@@ -100,6 +100,7 @@ type DropdownItemAppearanceProps = {
     fillDisabled?: FillProps;
     fillHover?: FillHoverProps;
     iconAfter?: IconProps['SvgImage'];
+    iconAfterActive?: IconProps['SvgImage'];
     iconAfterFill?: IconProps['fill'];
     iconAfterFillIcon?: IconProps['iconFill'];
     iconAfterFillSize?: IconProps['fillSize'];
@@ -113,6 +114,7 @@ type DropdownItemAppearanceProps = {
     iconBadgeTextSize?: IconProps['badgeTextSize'];
     iconBadgeValue?: IconProps['badgeValue'];
     iconBefore?: IconProps['SvgImage'];
+    iconBeforeActive?: IconProps['SvgImage'];
     iconBeforeFill?: IconProps['fill'];
     iconBeforeFillIcon?: IconProps['iconFill'];
     iconBeforeFillSize?: IconProps['fillSize'];

package/dist/types/components/Dropdown/DropdownItem.js

@@ -17,13 +17,13 @@ function DropdownItem(props) {
     const { appearance, className, dataTestId, dataTour, label, desc, badgeValue, emptyMessage, showDivider, before, after, isActive, isDisabled, isSkeleton, isHover, onClick, onMouseEnter, children, } = props;
     const appearanceConfig = useAppearanceConfig(appearance, dropdownItemConfig);
     const propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
-    const { directionClass, justifyContentClass, fillActiveClass, fillActiveHoverClass, fillClass, fillDisabledClass, fillHoverClass, labelTextAlign, labelTextColor, labelTextColorActive, labelTextColorActiveHover, labelTextColorHover, labelTextSize, labelTextStyle, labelTextWeight, labelTextWrap, descTextColor, descTextColorHover, descTextGradient, descTextSize, descTextStyle, descTextWeight, descTextWrap, badgeAppearance, badgeShape, badgeSize, badgeTextColor, badgeTextSize, dividerDirection, dividerFill, dividerSize, emptyMessageTextColor, emptyMessageTextColorHover, emptyMessageTextSize, emptyMessageTextStyle, emptyMessageTextWeight, emptyMessageTextWrap, iconAfter, iconAfterFill, iconAfterFillIcon, iconAfterFillSize, iconAfterShape, iconAfterSize, iconAfterSrc, iconBadgeAppearance, iconBadgeShape, iconBadgeSize, iconBadgeTextColor, iconBadgeTextSize, iconBadgeValue, iconBefore, iconBeforeFill, iconBeforeFillIcon, iconBeforeFillSize, iconBeforeShape, iconBeforeSize, iconBeforeSrc, shapeClass, sizeClass, widthClass, } = propsGenerator;
+    const { directionClass, justifyContentClass, fillActiveClass, fillActiveHoverClass, fillClass, fillDisabledClass, fillHoverClass, labelTextAlign, labelTextColor, labelTextColorActive, labelTextColorActiveHover, labelTextColorHover, labelTextSize, labelTextStyle, labelTextWeight, labelTextWrap, descTextColor, descTextColorHover, descTextGradient, descTextSize, descTextStyle, descTextWeight, descTextWrap, badgeAppearance, badgeShape, badgeSize, badgeTextColor, badgeTextSize, dividerDirection, dividerFill, dividerSize, emptyMessageTextColor, emptyMessageTextColorHover, emptyMessageTextSize, emptyMessageTextStyle, emptyMessageTextWeight, emptyMessageTextWrap, iconAfter, iconAfterActive, iconAfterFill, iconAfterFillIcon, iconAfterFillSize, iconAfterShape, iconAfterSize, iconAfterSrc, iconBadgeAppearance, iconBadgeShape, iconBadgeSize, iconBadgeTextColor, iconBadgeTextSize, iconBadgeValue, iconBefore, iconBeforeActive, iconBeforeFill, iconBeforeFillIcon, iconBeforeFillSize, iconBeforeShape, iconBeforeSize, iconBeforeSrc, shapeClass, sizeClass, widthClass, } = propsGenerator;
     const { styles: dropdownItem } = useStyles(props);
     return (_jsxs("div", { className: clsx('dropdown__item', isActive && 'dropdown__item_state_active', isHover && 'dropdown__item_state_hover', directionClass && `dropdown__item_direction_${directionClass}`, className, !isActive
             ? fillClass && `fill_${fillClass}`
             : fillActiveClass && `fill_active_${fillActiveClass}`, !isActive
             ? fillHoverClass && `fill_hover_${fillHoverClass}`
             : fillActiveHoverClass && `fill_active_hover_${fillActiveHoverClass}`, fillDisabledClass && `fill_disabled_${fillDisabledClass}`, sizeClass && `dropdown__item_size_${sizeClass}`, shapeClass && `shape_${shapeClass}`, widthClass && `dropdown__item_width_${widthClass}`, isDisabled && `dropdown__item_state_disabled`, onClick && 'cursor_type_pointer', isSkeleton && `skeleton`, justifyContentClass &&
-            `dropdown__item_justify-content_${justifyContentClass}`), "data-testid": dataTestId, "data-tour": dataTour, style: dropdownItem, onClick: onClick, onMouseEnter: onMouseEnter, children: [_jsx("div", { className: "dropdown__item-wrapper", children: _jsxs(React.Fragment, { children: [before, (iconBefore || iconBeforeSrc) && (_jsx(Icon, { className: clsx('dropdown__item_before', iconBadgeValue && 'dropdown__item_before-badge'), fill: iconBeforeFill, fillSize: iconBeforeFillSize, badgeAppearance: iconBadgeAppearance, badgeClass: 'dropdown__item_before_badge', badgeShape: iconBadgeShape, badgeSize: iconBadgeSize, badgeTextColor: iconBadgeTextColor, badgeTextSize: iconBadgeTextSize, badgeValue: iconBadgeValue, iconFill: iconBeforeFillIcon, iconSize: iconBeforeSize, imageSrc: iconBeforeSrc, shape: iconBeforeShape, SvgImage: iconBefore })), children || (_jsxs(React.Fragment, { children: [label && (_jsx(Text, { className: "dropdown__item-label", size: labelTextSize, textAlign: labelTextAlign, textColor: labelTextColor, textColorActive: labelTextColorActive, textColorActiveHover: labelTextColorActiveHover, textColorHover: labelTextColorHover, textStyle: labelTextStyle, textWeight: labelTextWeight, textWrap: labelTextWrap, isActive: isActive, children: label })), badgeValue && (_jsx(Badge, { appearance: badgeAppearance, size: badgeSize, textColor: badgeTextColor, textSize: badgeTextSize, shape: badgeShape, value: badgeValue })), desc && (_jsx(Text, { className: "dropdown__item-desc", size: descTextSize, textColor: descTextColor, textColorGradient: descTextGradient, textColorHover: descTextColorHover, textStyle: descTextStyle, textWeight: descTextWeight, textWrap: descTextWrap, isActive: isActive, children: desc })), emptyMessage && (_jsx(Text, { className: "dropdown__item", size: emptyMessageTextSize, textColor: emptyMessageTextColor, textColorHover: emptyMessageTextColorHover, textStyle: emptyMessageTextStyle, textWeight: emptyMessageTextWeight, textWrap: emptyMessageTextWrap, isActive: isActive, children: emptyMessage }))] })), after, (iconAfter || iconAfterSrc) && (_jsx(Icon, { className: clsx('dropdown__item_after', iconBadgeValue && 'dropdown__item_after-badge'), fill: iconAfterFill, fillSize: iconAfterFillSize, badgeAppearance: iconBadgeAppearance, badgeClass: 'dropdown__item_after_badge', badgeShape: iconBadgeShape, badgeSize: iconBadgeSize, badgeTextColor: iconBadgeTextColor, badgeTextSize: iconBadgeTextSize, badgeValue: iconBadgeValue, iconFill: iconAfterFillIcon, iconSize: iconAfterSize, imageSrc: iconAfterSrc, shape: iconAfterShape, SvgImage: iconAfter }))] }) }), showDivider && (_jsx(Divider, { width: "fill", direction: dividerDirection, size: dividerSize, fill: dividerFill }))] }));
+            `dropdown__item_justify-content_${justifyContentClass}`), "data-testid": dataTestId, "data-tour": dataTour, style: dropdownItem, onClick: onClick, onMouseEnter: onMouseEnter, children: [_jsx("div", { className: "dropdown__item-wrapper", children: _jsxs(React.Fragment, { children: [before, (iconBefore || iconBeforeSrc || (iconBeforeActive && isActive)) && (_jsx(Icon, { className: clsx('dropdown__item_before', iconBadgeValue && 'dropdown__item_before-badge'), fill: iconBeforeFill, fillSize: iconBeforeFillSize, badgeAppearance: iconBadgeAppearance, badgeClass: 'dropdown__item_before_badge', badgeShape: iconBadgeShape, badgeSize: iconBadgeSize, badgeTextColor: iconBadgeTextColor, badgeTextSize: iconBadgeTextSize, badgeValue: iconBadgeValue, iconFill: iconBeforeFillIcon, iconSize: iconBeforeSize, imageSrc: iconBeforeSrc, shape: iconBeforeShape, SvgImage: iconBeforeActive && isActive ? iconBeforeActive : iconBefore })), children || (_jsxs(React.Fragment, { children: [label && (_jsx(Text, { className: "dropdown__item-label", size: labelTextSize, textAlign: labelTextAlign, textColor: labelTextColor, textColorActive: labelTextColorActive, textColorActiveHover: labelTextColorActiveHover, textColorHover: labelTextColorHover, textStyle: labelTextStyle, textWeight: labelTextWeight, textWrap: labelTextWrap, isActive: isActive, children: label })), badgeValue && (_jsx(Badge, { appearance: badgeAppearance, size: badgeSize, textColor: badgeTextColor, textSize: badgeTextSize, shape: badgeShape, value: badgeValue })), desc && (_jsx(Text, { className: "dropdown__item-desc", size: descTextSize, textColor: descTextColor, textColorGradient: descTextGradient, textColorHover: descTextColorHover, textStyle: descTextStyle, textWeight: descTextWeight, textWrap: descTextWrap, isActive: isActive, children: desc })), emptyMessage && (_jsx(Text, { className: "dropdown__item", size: emptyMessageTextSize, textColor: emptyMessageTextColor, textColorHover: emptyMessageTextColorHover, textStyle: emptyMessageTextStyle, textWeight: emptyMessageTextWeight, textWrap: emptyMessageTextWrap, isActive: isActive, children: emptyMessage }))] })), after, (iconAfter || iconAfterSrc || (iconAfterActive && isActive)) && (_jsx(Icon, { className: clsx('dropdown__item_after', iconBadgeValue && 'dropdown__item_after-badge'), fill: iconAfterFill, fillSize: iconAfterFillSize, badgeAppearance: iconBadgeAppearance, badgeClass: 'dropdown__item_after_badge', badgeShape: iconBadgeShape, badgeSize: iconBadgeSize, badgeTextColor: iconBadgeTextColor, badgeTextSize: iconBadgeTextSize, badgeValue: iconBadgeValue, iconFill: iconAfterFillIcon, iconSize: iconAfterSize, imageSrc: iconAfterSrc, shape: iconAfterShape, SvgImage: iconAfterActive && isActive ? iconAfterActive : iconAfter }))] }) }), showDivider && (_jsx(Divider, { width: "fill", direction: dividerDirection, size: dividerSize, fill: dividerFill }))] }));
 }
 export { DropdownItem, dropdownItemConfig };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itcase/ui-web",
-  "version": "1.10.24",
+  "version": "1.10.26",
   "description": "UI components",
   "keywords": "",
   "license": "MIT",
@@ -53,7 +53,7 @@
     "@itcase/tokens-am": "^1.1.57",
     "@itcase/tokens-baikal": "^1.1.54",
     "@itcase/tokens-palette": "^1.1.50",
-    "@itcase/ui-core": "^1.10.24",
+    "@itcase/ui-core": "^1.10.25",
     "@rc-component/tooltip": "^1.4.0",
     "axios": "^1.17.0",
     "clsx": "^2.1.1",
@@ -116,5 +116,5 @@
     "storybook": "^10.4.2",
     "typescript": "^6.0.3"
   },
-  "gitHead": "228a9c71351b273ccd1cb06e78c4adcb96d2ad68"
+  "gitHead": "1b42b5a5751ae3e8cd183985b64179b8ea9ffeaf"
 }