@itcase/ui 1.8.177 → 1.8.178

package/dist/components/DatePeriod.js

@@ -1,38 +1,43 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { useCallback } from 'react';
 import clsx from 'clsx';
 import { DateTime } from 'luxon';
 import { DATE_PERIOD_INTERVALS } from '@itcase/common';
-import { D as DatePickerInput } from '../DatePicker_es_CbKQCO3U.js';
+import { D as DatePickerInput } from '../DatePicker_es_B7Th76gy.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_BflE-5Q3.js';
-import 'date-fns/locale';
-import 'react-datepicker';
-import '../hooks/useStyles/useStyles.js';
+import 'react-select';
+import '../Icon_es_B02tKDTb.js';
+import { a as SelectContainer } from '../SelectContainer_es_gcm20n4I.js';
 import 'lodash/camelCase';
 import 'lodash/maxBy';
 import 'lodash/upperFirst';
 import '../context/Notifications.js';
-import 'uuid';
 import '../context/UIContext.js';
+import '../Group_es_BwTj-yH-.js';
+import 'date-fns/locale';
+import 'react-datepicker';
+import '../hooks/useStyles/useStyles.js';
+import '../hooks.js';
+import '../hooks/useStyles/styleAttributes.js';
+import 'uuid';
 import '../hooks/useMediaQueries/useMediaQueries.js';
 import 'react-responsive';
 import '../utils/setViewportProperty.js';
-import '../hooks.js';
-import '../hooks/useStyles/styleAttributes.js';
 import '../Button_es_Bns3_lNe.js';
-import '../Icon_es_B02tKDTb.js';
-import 'react-inlinesvg';
-import '../hoc/urlWithAssetPrefix.js';
-import '../context/UrlAssetPrefix.js';
 import '../Link_es_P2b6ya7P.js';
-import '../Text_es_RDU9GLCV.js';
 import '../Loader_es_Dq2-7sn2.js';
-import '../Input_es_Dboktsxf.js';
+import '../Text_es_RDU9GLCV.js';
+import '../Input_es_I8GPoibb.js';
 import '../Label_es_CwhSc0UL.js';
 import '@itcase/icons/default';
 import 'lodash/castArray';
+import 'react-inlinesvg';
+import '../hoc/urlWithAssetPrefix.js';
+import '../context/UrlAssetPrefix.js';
+import 'react-select/creatable';
+import '../Divider_es_BiYozVBS.js';
 
 const datePeriodAppearanceShape = {
     circular: {
@@ -40,22 +45,32 @@ const datePeriodAppearanceShape = {
     },
     rounded: {
         shape: 'rounded',
+        chipsShape: 'rounded',
+        selectShape: 'rounded',
     },
     roundedXL: {
         shape: 'rounded',
         shapeStrength: '2m',
+        chipsShape: 'rounded',
+        selectShape: 'rounded',
     },
     roundedL: {
         shape: 'rounded',
         shapeStrength: '1_5m',
+        chipsShape: 'rounded',
+        selectShape: 'rounded',
     },
     roundedM: {
         shape: 'rounded',
         shapeStrength: '1m',
+        chipsShape: 'rounded',
+        selectShape: 'rounded',
     },
     roundedS: {
         shape: 'rounded',
         shapeStrength: '0_5m',
+        chipsShape: 'rounded',
+        selectShape: 'rounded',
     },
 };
 
@@ -63,14 +78,23 @@ const datePeriodAppearanceSize = {
     sizeL: {
         size: 'l',
         chipsAppearanceSize: 'sizeXL',
-        datePickerAppearanceSize: 'sizeM',
-        datePickerInputAppearanceSize: 'sizeM',
+        datePickerAppearanceSize: 'sizeL',
+        datePickerInputAppearanceSize: 'sizeL',
+        selectAppearanceSize: 'sizeL',
     },
     sizeM: {
         size: 'm',
         chipsAppearanceSize: 'sizeL',
         datePickerAppearanceSize: 'sizeM',
         datePickerInputAppearanceSize: 'sizeM',
+        selectAppearanceSize: 'sizeM',
+    },
+    sizeS: {
+        size: 's',
+        chipsAppearanceSize: 'sizeM',
+        datePickerAppearanceSize: 'sizeS',
+        datePickerInputAppearanceSize: 'sizeS',
+        selectAppearanceSize: 'sizeS',
     },
 };
 
@@ -78,18 +102,16 @@ const datePeriodAppearanceSurface = {
     surfacePrimary: {
         fill: 'surfacePrimary',
         chipsAppearance: 'surfacePrimary ghost',
-        chipsShape: 'rounded',
         datePickerAppearance: 'surfacePrimary',
         datePickerInputAppearance: 'defaultPrimary',
-        shape: 'rounded',
+        selectAppearance: 'defaultPrimary solid',
     },
     surfaceSecondary: {
         fill: 'surfaceSecondary',
         chipsAppearance: 'surfacePrimary ghost',
-        chipsShape: 'rounded',
         datePickerAppearance: 'surfacePrimary',
         datePickerInputAppearance: 'defaultPrimary',
-        shape: 'rounded',
+        selectAppearance: 'defaultPrimary solid',
     },
 };
 
@@ -106,10 +128,10 @@ const datePeriodConfig = {
     },
 };
 function DatePeriod(props) {
-    const { appearance, className, datePeriodIntervalsList = Object.values(DATE_PERIOD_INTERVALS), datePeriodValueEnd, datePeriodValueStart, monthsShown, selectsRange = true, showWeekNumbers = true, isDisabled, isSkeleton, onChangeDatePeriod, onKeyDown, } = props;
+    const { appearance, className, datePeriodIntervalsList = Object.values(DATE_PERIOD_INTERVALS), datePeriodSelectOptions, datePeriodSelectValue, selectPlaceholder, datePeriodValueEnd, datePeriodValueStart, monthsShown, selectsRange = true, showWeekNumbers = true, isDisabled, isSkeleton, onChangeDatePeriod, onChangeDatePeriodSelect, onKeyDown, } = props;
     const appearanceConfig = useAppearanceConfig(appearance, datePeriodConfig, isDisabled);
     const propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
-    const { fillClass, chipsAppearance, chipsAppearanceSize, chipsShape, datePickerAppearance, datePickerAppearanceSize, datePickerInputAppearance, datePickerInputAppearanceSize, datePickerInputFillHover, datePickerInputSize, datePickerInputTextSize, shapeClass, shapeStrengthClass, sizeClass, } = propsGenerator;
+    const { fillClass, chipsAppearance, chipsAppearanceSize, selectAppearance, selectAppearanceSize, chipsShape, selectShape, datePickerAppearance, datePickerAppearanceSize, datePickerInputAppearance, datePickerInputAppearanceSize, datePickerInputFillHover, datePickerInputTextSize, shapeClass, shapeStrengthClass, sizeClass, } = propsGenerator;
     const onClickPeriodChips = useCallback((selectedPeriodItem) => {
         const dateStartIso = selectedPeriodItem.dateIntervalsList[0];
         const dateEndIso = selectedPeriodItem.dateIntervalsList[1];
@@ -129,22 +151,22 @@ function DatePeriod(props) {
         return (dateStartIso === normalizedDatePeriodValueStart &&
             dateEndIso === normalizedDatePeriodValueEnd);
     }, [datePeriodValueEnd, datePeriodValueStart]);
-    return (jsx("div", { className: clsx(className, 'date-period', shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, sizeClass && `date-period_size_${sizeClass}`, isSkeleton && `date-period_skeleton`, fillClass && `fill_${fillClass}`, 'cursor_type_pointer'), children: jsxs(ChipsGroup, { className: "date-period__choice", direction: "horizontal", children: [datePeriodIntervalsList.map((datePeriodItem) => (jsx(Chips, { appearance: `${chipsAppearance} ${chipsAppearanceSize}`, label: datePeriodItem.label, shape: chipsShape, isActive: checkIsChipsActive(datePeriodItem), onClick: () => onClickPeriodChips(datePeriodItem) }, datePeriodItem.value))), jsx(DatePickerInput, { className: "date-period__datepicker", datePickerProps: {
-                        appearance: `${datePickerAppearance} ${datePickerAppearanceSize}`,
-                        dateFormat: 'dd/MM/yyyy',
-                        monthsShown: monthsShown,
-                        selectsRange: selectsRange,
-                        showWeekNumbers: showWeekNumbers,
-                        isClearable: false,
-                        isStartDefaultNull: true,
-                        onKeyDown: onKeyDown,
-                    }, endValue: datePeriodValueEnd, inputProps: {
-                        appearance: `${datePickerInputAppearance} ${datePickerInputAppearanceSize} ghost`,
-                        className: `date-period__datepicker-input date-period__datepicker-input_size_${datePickerInputSize}`,
-                        fillHover: datePickerInputFillHover,
-                        textSize: datePickerInputTextSize,
-                        placeholder: 'Выбрать период',
-                    }, value: datePeriodValueStart, onChange: onChangeDatePeriod })] }) }));
+    return (jsxs("div", { className: clsx(className, 'date-period', sizeClass && `date-period_size_${sizeClass}`, isSkeleton && `date-period_skeleton`), children: [jsxs("div", { className: clsx('date-period__wrapper', shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, fillClass && `fill_${fillClass}`, 'cursor_type_pointer'), children: [jsx(ChipsGroup, { className: "date-period__choice", direction: "horizontal", children: datePeriodIntervalsList.map((datePeriodItem) => (jsx(Chips, { appearance: `${chipsAppearance} ${chipsAppearanceSize}`, label: datePeriodItem.label, shape: chipsShape, isActive: checkIsChipsActive(datePeriodItem), onClick: () => onClickPeriodChips(datePeriodItem) }, datePeriodItem.value))) }), jsx(DatePickerInput, { className: "date-period__datepicker", datePickerProps: {
+                            appearance: `${datePickerAppearance} ${datePickerAppearanceSize}`,
+                            dateFormat: 'dd/MM/yyyy',
+                            monthsShown: monthsShown,
+                            selectsRange: selectsRange,
+                            showWeekNumbers: showWeekNumbers,
+                            isClearable: false,
+                            isStartDefaultNull: true,
+                            onKeyDown: onKeyDown,
+                        }, endValue: datePeriodValueEnd, inputProps: {
+                            appearance: `${datePickerInputAppearance} ${datePickerInputAppearanceSize} ghost`,
+                            className: `date-period__datepicker-input date-period__datepicker-input_size_${sizeClass} `,
+                            fillHover: datePickerInputFillHover,
+                            textSize: datePickerInputTextSize,
+                            placeholder: 'Выбрать период',
+                        }, value: datePeriodValueStart, onChange: onChangeDatePeriod })] }), jsx(SelectContainer, { appearance: `${selectAppearance} ${selectAppearanceSize}`, className: "date-period__select", width: "180px", minWidth: "180px", options: datePeriodSelectOptions, placeholder: selectPlaceholder, shape: selectShape, value: datePeriodSelectValue, isSearchable: true, onChange: onChangeDatePeriodSelect })] }));
 }
 
 export { DatePeriod, datePeriodAppearance, datePeriodConfig };

package/dist/components/DatePicker.js

@@ -1,4 +1,4 @@
-export { D as DatePickerInput, a as datePickerAppearance, d as datePickerConfig } from '../DatePicker_es_CbKQCO3U.js';
+export { D as DatePickerInput, a as datePickerAppearance, d as datePickerConfig } from '../DatePicker_es_B7Th76gy.js';
 import 'react/jsx-runtime';
 import 'react';
 import 'clsx';
@@ -28,6 +28,6 @@ import '../context/UrlAssetPrefix.js';
 import '../Link_es_P2b6ya7P.js';
 import '../Text_es_RDU9GLCV.js';
 import '../Loader_es_Dq2-7sn2.js';
-import '../Input_es_Dboktsxf.js';
+import '../Input_es_I8GPoibb.js';
 import '../Label_es_CwhSc0UL.js';
 import '@itcase/icons/default';

package/dist/components/Input.js

@@ -1,4 +1,4 @@
-export { I as Input, a as inputAppearance, i as inputConfig } from '../Input_es_Dboktsxf.js';
+export { I as Input, a as inputAppearance, i as inputConfig } from '../Input_es_I8GPoibb.js';
 import 'react/jsx-runtime';
 import 'react';
 import 'clsx';