@itcase/ui-web 1.10.27 → 1.10.30

package/dist/cjs/components/DatePeriod.js

@@ -1 +1 @@
-"use strict";var e=require("react/jsx-runtime"),a=require("react"),r=require("clsx"),i=require("luxon"),s=require("@itcase/ui-core/hooks"),t=require("@itcase/ui-core/utils"),c=require("../../ChipsGroup_cjs_DmlWfqO5.js"),n=require("../../DatePicker_cjs_uTMwXLmJ.js");require("react-select"),require("../../primitives_cjs_EVP_2N_A.js");var p=require("../../SelectContainer_cjs_oasI4gzw.js");require("../../Group_cjs_CiLUYKP7.js");var d=require("@itcase/common");require("date-fns/locale"),require("react-datepicker"),require("../../Button_cjs_D0Fa5AsR.js"),require("../../Loader_cjs_4kGh3xPd.js"),require("axios"),require("../../Input_cjs_D9PxC_lJ.js"),require("../../default_cjs_BMdcKzhJ.js"),require("@rc-component/tooltip"),require("react-inlinesvg"),require("@itcase/ui-core/hoc"),require("react-select/creatable");const o={surfacePrimary:{fill:"surfacePrimary",chipsAppearance:"surfacePrimary sizeM ghost rounded",datePickerAppearance:"surfacePrimary sizeM solid rounded",datePickerInputAppearance:"defaultPrimary sizeM solid rounded",selectAppearance:"defaultPrimary sizeM solid rounded"},surfaceSecondary:{fill:"surfaceSecondary",chipsAppearance:"surfacePrimary sizeM ghost rounded",datePickerAppearance:"surfacePrimary sizeM solid rounded",datePickerInputAppearance:"defaultPrimary sizeM solid rounded",selectAppearance:"defaultPrimary sizeM solid rounded"},sizeL:{size:"l",chipsAppearanceSize:"sizeXL",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"},circular:{shape:"circular"},rounded:{chipsShape:"rounded",selectShape:"rounded",shape:"rounded"},roundedXL:{chipsShape:"roundedXL",selectShape:"roundedXL",shape:"roundedXL"},roundedL:{chipsShape:"roundedL",selectShape:"roundedL",shape:"roundedL"},roundedM:{chipsShape:"roundedM",selectShape:"roundedM",shape:"roundedM"},roundedS:{chipsShape:"roundedS",selectShape:"roundedS",shape:"roundedS"}},l=Object.values(d.DATE_PERIOD_INTERVALS);const u={appearance:o,setAppearance:e=>{u.appearance=e}};exports.DatePeriod=function(o){const{appearance:h,className:S,dataTestId:P,dataTour:z,type:m="year",datePeriodIntervalsList:_,datePeriodSelectFirstOptions:A,datePeriodSelectFirstPlaceholder:k="Выбрать",datePeriodSelectFirstValue:I,datePeriodSelectSecondOptions:f,datePeriodSelectSecondPlaceholder:y="Выбрать",datePeriodSelectSecondValue:j,datePeriodValueEnd:v,datePeriodValueStart:D,monthsShown:q=2,popperPlacement:L,selectFirstIsSearchable:C=!0,selectFirstWidth:g="180px",selectSecondIsSearchable:M=!0,selectSecondWidth:x="180px",selectsRange:b=!0,showWeekNumbers:w=!1,isDisabled:N,isSkeleton:F,onChangeDatePeriod:T,onChangeDatePeriodFirstSelect:E,onChangeDatePeriodSecondSelect:W,onKeyDown:O}=o,R=s.useAppearanceConfig(h,u,N),V=s.useDevicePropsGenerator(o,R),{fillClass:K,chipsAppearance:X,chipsAppearanceSize:G,chipsShape:$,datePickerAppearance:H,datePickerAppearanceSize:J,datePickerInputAppearance:B,datePickerInputAppearanceSize:Q,datePickerInputFillHover:U,datePickerInputTextSize:Y,selectAppearance:Z,selectAppearanceSize:ee,selectShape:ae,shapeClass:re,sizeClass:ie}=V,se=function(e="year",a){if("period"===e)return[];const r=a??l;if("year"===e)return r;const i="month"===e?d.DATE_PERIOD_INTERVALS.backMonth.value:d.DATE_PERIOD_INTERVALS.backQuarter.value,s=l.findIndex(e=>e.value===i),t=new Set(l.slice(0,s+1).map(e=>e.value));return r.filter(e=>t.has(e.value))}(V.type??m,_),te=a.useCallback(e=>{const a=e.dateIntervalsList[0],r=e.dateIntervalsList[1];T?.(new Date(a),new Date(r))},[T]),ce=a.useCallback(e=>{const a=e.dateIntervalsList[0],r=e.dateIntervalsList[1];let s=null,t=null;return D&&(s=i.DateTime.fromJSDate(new Date(D)).toISODate()),v&&(t=i.DateTime.fromJSDate(new Date(v)).toISODate()),a===s&&r===t},[v,D]);return e.jsxs("div",{className:r(S,"date-period",ie&&`date-period_size_${ie}`,F&&"skeleton"),"data-testid":P,"data-tour":z,children:[e.jsxs("div",{className:r("date-period__wrapper",re&&`shape_${re}`,K&&`fill_${K}`,"cursor_type_pointer"),children:[se.length>0&&e.jsx(c.ChipsGroup,{className:"date-period__choice",direction:"horizontal",children:se.map(a=>e.jsx(c.Chips,{appearance:t.mergeAppearanceKeys(X,G),label:a.label,shape:$,isActive:ce(a),onClick:()=>te(a)},a.value))}),e.jsx(n.DatePickerInput,{className:"date-period__datepicker",datePickerProps:{appearance:t.mergeAppearanceKeys(H,J),dateFormat:"dd/MM/yyyy",monthsShown:V.monthsShown??q,popperPlacement:L,selectsRange:b,showWeekNumbers:w,isClearable:!1,onKeyDown:O},endValue:v,inputProps:{appearance:t.mergeAppearanceKeys(B,Q,"ghost"),className:`date-period__datepicker-input date-period__datepicker-input_size_${ie} `,fillHover:U,textSize:Y,placeholder:"Выбрать период"},value:D,onChange:T})]}),A&&e.jsx(p.SelectContainer,{appearance:t.mergeAppearanceKeys(Z,ee),className:"date-period__select",width:V.selectFirstWidth??g,minWidth:V.selectFirstWidth??g,options:A,placeholder:k,shape:ae,value:I??null,isSearchable:V.selectFirstIsSearchable??C,onChange:E}),f&&e.jsx(p.SelectContainer,{appearance:t.mergeAppearanceKeys(Z,ee),className:"date-period__select",width:V.selectSecondWidth??x,minWidth:V.selectSecondWidth??x,options:f,placeholder:y,shape:ae,value:j??null,isSearchable:V.selectSecondIsSearchable??M,onChange:W})]})},exports.datePeriodAppearance=o,exports.datePeriodConfig=u;
+"use strict";var e=require("react/jsx-runtime"),a=require("react"),r=require("clsx"),t=require("luxon"),i=require("@itcase/ui-core/hooks"),s=require("@itcase/ui-core/utils"),c=require("../../ChipsGroup_cjs_DmlWfqO5.js"),n=require("../../DatePicker_cjs_uTMwXLmJ.js");require("react-select"),require("../../primitives_cjs_EVP_2N_A.js");var d=require("../../SelectContainer_cjs_oasI4gzw.js");require("../../Group_cjs_CiLUYKP7.js");var p=require("@itcase/common");require("date-fns/locale"),require("react-datepicker"),require("../../Button_cjs_D0Fa5AsR.js"),require("../../Loader_cjs_4kGh3xPd.js"),require("axios"),require("../../Input_cjs_D9PxC_lJ.js"),require("../../default_cjs_BMdcKzhJ.js"),require("@rc-component/tooltip"),require("react-inlinesvg"),require("@itcase/ui-core/hoc"),require("react-select/creatable");const o={surfacePrimary:{fill:"surfacePrimary",chipsAppearance:"surfacePrimary sizeM ghost rounded",datePickerAppearance:"surfacePrimary sizeM solid rounded",datePickerInputAppearance:"defaultPrimary sizeM solid rounded",selectAppearance:"defaultPrimary sizeM solid rounded"},surfaceSecondary:{fill:"surfaceSecondary",chipsAppearance:"surfacePrimary sizeM ghost rounded",datePickerAppearance:"surfacePrimary sizeM solid rounded",datePickerInputAppearance:"defaultPrimary sizeM solid rounded",selectAppearance:"defaultPrimary sizeM solid rounded"},sizeL:{size:"l",chipsAppearanceSize:"sizeXL",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"},circular:{shape:"circular"},rounded:{chipsShape:"rounded",selectShape:"rounded",shape:"rounded"},roundedXL:{chipsShape:"roundedXL",selectShape:"roundedXL",shape:"roundedXL"},roundedL:{chipsShape:"roundedL",selectShape:"roundedL",shape:"roundedL"},roundedM:{chipsShape:"roundedM",selectShape:"roundedM",shape:"roundedM"},roundedS:{chipsShape:"roundedS",selectShape:"roundedS",shape:"roundedS"}},l=Object.values(p.DATE_PERIOD_INTERVALS);function u(){const e=t.DateTime.now().startOf("day");return{label:"Год",dateIntervalsList:[e.minus({year:1}).toISODate(),e.toISODate()],value:"backYear"}}const h={appearance:o,setAppearance:e=>{h.appearance=e}};exports.DatePeriod=function(o){const{appearance:S,className:P,dataTestId:m,dataTour:z,type:_="year",datePeriodIntervalsList:A,datePeriodSelectFirstOptions:k,datePeriodSelectFirstPlaceholder:I="Выбрать",datePeriodSelectFirstValue:y,datePeriodSelectSecondOptions:f,datePeriodSelectSecondPlaceholder:v="Выбрать",datePeriodSelectSecondValue:D,datePeriodValueEnd:j,datePeriodValueStart:q,datePickerInputWidth:L,monthsShown:C=2,popperPlacement:b,selectFirstIsSearchable:g=!0,selectFirstWidth:w="180px",selectSecondIsSearchable:M=!0,selectSecondWidth:x="180px",selectsRange:N=!0,showWeekNumbers:T=!1,isDisabled:W,isSkeleton:F,onChangeDatePeriod:O,onChangeDatePeriodFirstSelect:E,onChangeDatePeriodSecondSelect:R,onKeyDown:V}=o,K=i.useAppearanceConfig(S,h,W),$=i.useDevicePropsGenerator(o,K),{fillClass:X,chipsAppearance:G,chipsAppearanceSize:H,chipsShape:J,datePickerAppearance:Y,datePickerAppearanceSize:B,datePickerInputAppearance:Q,datePickerInputAppearanceSize:U,datePickerInputFillHover:Z,datePickerInputTextSize:ee,selectAppearance:ae,selectAppearanceSize:re,selectShape:te,shapeClass:ie,sizeClass:se,widthClass:ce}=$,ne=function(e="year",a){if("period"===e)return[];const r=a??l;if("year"===e)return r.some(e=>"backYear"===e.value)?r:[...r,u()];const t="month"===e?p.DATE_PERIOD_INTERVALS.backMonth.value:p.DATE_PERIOD_INTERVALS.backQuarter.value,i=l.findIndex(e=>e.value===t),s=new Set(l.slice(0,i+1).map(e=>e.value));return r.filter(e=>s.has(e.value))}($.type??_,A),de=$.datePickerInputWidth??L,{styles:pe}=i.useStyles(o),oe=a.useCallback(e=>{const a=e.dateIntervalsList[0],r=e.dateIntervalsList[1];O?.(new Date(a),new Date(r))},[O]),le=a.useCallback(e=>{const a=e.dateIntervalsList[0],r=e.dateIntervalsList[1];let i=null,s=null;return q&&(i=t.DateTime.fromJSDate(new Date(q)).toISODate()),j&&(s=t.DateTime.fromJSDate(new Date(j)).toISODate()),a===i&&r===s},[j,q]);return e.jsxs("div",{className:r(P,"date-period",ce&&`width_${ce}`,se&&`date-period_size_${se}`,F&&"skeleton"),"data-testid":m,"data-tour":z,style:pe,children:[e.jsxs("div",{className:r("date-period__wrapper",ie&&`shape_${ie}`,X&&`fill_${X}`,ce&&`width_${ce}`,"cursor_type_pointer"),children:[ne.length>0&&e.jsx(c.ChipsGroup,{className:"date-period__choice",direction:"horizontal",children:ne.map(a=>e.jsx(c.Chips,{appearance:s.mergeAppearanceKeys(G,H),label:a.label,shape:J,isActive:le(a),onClick:()=>oe(a)},a.value))}),e.jsx(n.DatePickerInput,{className:"date-period__datepicker",width:de,datePickerProps:{appearance:s.mergeAppearanceKeys(Y,B),dateFormat:"dd/MM/yyyy",monthsShown:$.monthsShown??C,popperPlacement:b,selectsRange:N,showWeekNumbers:T,isClearable:!1,onKeyDown:V},endValue:j,inputProps:{appearance:s.mergeAppearanceKeys(Q,U,"ghost"),className:`date-period__datepicker-input date-period__datepicker-input_size_${se} `,fillHover:Z,textSize:ee,placeholder:"Выбрать период"},value:q,onChange:O})]}),k&&e.jsx(d.SelectContainer,{appearance:s.mergeAppearanceKeys(ae,re),className:"date-period__select",width:$.selectFirstWidth??w,minWidth:$.selectFirstWidth??w,options:k,placeholder:I,shape:te,value:y??null,isSearchable:$.selectFirstIsSearchable??g,onChange:E}),f&&e.jsx(d.SelectContainer,{appearance:s.mergeAppearanceKeys(ae,re),className:"date-period__select",width:$.selectSecondWidth??x,minWidth:$.selectSecondWidth??x,options:f,placeholder:v,shape:te,value:D??null,isSearchable:$.selectSecondIsSearchable??M,onChange:R})]})},exports.datePeriodAppearance=o,exports.datePeriodConfig=h;

package/dist/components/DatePeriod.js

@@ -1 +1 @@
-import{jsxs as e,jsx as a}from"react/jsx-runtime";import{useCallback as r}from"react";import t from"clsx";import{DateTime as i}from"luxon";import{useAppearanceConfig as s,useDevicePropsGenerator as c}from"@itcase/ui-core/hooks";import{mergeAppearanceKeys as p}from"@itcase/ui-core/utils";import{a as o,C as d}from"../ChipsGroup_es_D3y5WSL6.js";import{D as n}from"../DatePicker_es_Bq_AFDLO.js";import"react-select";import"../primitives_es_D7LYOijE.js";import{S as l}from"../SelectContainer_es_B4IWlcz3.js";import"../Group_es_DIuSNHx3.js";import{DATE_PERIOD_INTERVALS as u}from"@itcase/common";import"date-fns/locale";import"react-datepicker";import"../Button_es_DvzjOfyQ.js";import"../Loader_es_CdWc_Prk.js";import"axios";import"../Input_es_DabuPYuA.js";import"../default_es_CsYL84NN.js";import"@rc-component/tooltip";import"react-inlinesvg";import"@itcase/ui-core/hoc";import"react-select/creatable";const h={surfacePrimary:{fill:"surfacePrimary",chipsAppearance:"surfacePrimary sizeM ghost rounded",datePickerAppearance:"surfacePrimary sizeM solid rounded",datePickerInputAppearance:"defaultPrimary sizeM solid rounded",selectAppearance:"defaultPrimary sizeM solid rounded"},surfaceSecondary:{fill:"surfaceSecondary",chipsAppearance:"surfacePrimary sizeM ghost rounded",datePickerAppearance:"surfacePrimary sizeM solid rounded",datePickerInputAppearance:"defaultPrimary sizeM solid rounded",selectAppearance:"defaultPrimary sizeM solid rounded"},sizeL:{size:"l",chipsAppearanceSize:"sizeXL",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"},circular:{shape:"circular"},rounded:{chipsShape:"rounded",selectShape:"rounded",shape:"rounded"},roundedXL:{chipsShape:"roundedXL",selectShape:"roundedXL",shape:"roundedXL"},roundedL:{chipsShape:"roundedL",selectShape:"roundedL",shape:"roundedL"},roundedM:{chipsShape:"roundedM",selectShape:"roundedM",shape:"roundedM"},roundedS:{chipsShape:"roundedS",selectShape:"roundedS",shape:"roundedS"}},S=Object.values(u);const m={appearance:h,setAppearance:e=>{m.appearance=e}};function z(h){const{appearance:z,className:P,dataTestId:_,dataTour:f,type:k="year",datePeriodIntervalsList:A,datePeriodSelectFirstOptions:y,datePeriodSelectFirstPlaceholder:I="Выбрать",datePeriodSelectFirstValue:v,datePeriodSelectSecondOptions:L,datePeriodSelectSecondPlaceholder:M="Выбрать",datePeriodSelectSecondValue:b,datePeriodValueEnd:D,datePeriodValueStart:w,monthsShown:C=2,popperPlacement:g,selectFirstIsSearchable:j=!0,selectFirstWidth:F="180px",selectSecondIsSearchable:x=!0,selectSecondWidth:N="180px",selectsRange:W=!0,showWeekNumbers:O=!1,isDisabled:V,isSkeleton:X,onChangeDatePeriod:$,onChangeDatePeriodFirstSelect:T,onChangeDatePeriodSecondSelect:G,onKeyDown:H}=h,J=s(z,m,V),K=c(h,J),{fillClass:R,chipsAppearance:B,chipsAppearanceSize:E,chipsShape:Q,datePickerAppearance:q,datePickerAppearanceSize:U,datePickerInputAppearance:Y,datePickerInputAppearanceSize:Z,datePickerInputFillHover:ee,datePickerInputTextSize:ae,selectAppearance:re,selectAppearanceSize:te,selectShape:ie,shapeClass:se,sizeClass:ce}=K,pe=function(e="year",a){if("period"===e)return[];const r=a??S;if("year"===e)return r;const t="month"===e?u.backMonth.value:u.backQuarter.value,i=S.findIndex(e=>e.value===t),s=new Set(S.slice(0,i+1).map(e=>e.value));return r.filter(e=>s.has(e.value))}(K.type??k,A),oe=r(e=>{const a=e.dateIntervalsList[0],r=e.dateIntervalsList[1];$?.(new Date(a),new Date(r))},[$]),de=r(e=>{const a=e.dateIntervalsList[0],r=e.dateIntervalsList[1];let t=null,s=null;return w&&(t=i.fromJSDate(new Date(w)).toISODate()),D&&(s=i.fromJSDate(new Date(D)).toISODate()),a===t&&r===s},[D,w]);return e("div",{className:t(P,"date-period",ce&&`date-period_size_${ce}`,X&&"skeleton"),"data-testid":_,"data-tour":f,children:[e("div",{className:t("date-period__wrapper",se&&`shape_${se}`,R&&`fill_${R}`,"cursor_type_pointer"),children:[pe.length>0&&a(o,{className:"date-period__choice",direction:"horizontal",children:pe.map(e=>a(d,{appearance:p(B,E),label:e.label,shape:Q,isActive:de(e),onClick:()=>oe(e)},e.value))}),a(n,{className:"date-period__datepicker",datePickerProps:{appearance:p(q,U),dateFormat:"dd/MM/yyyy",monthsShown:K.monthsShown??C,popperPlacement:g,selectsRange:W,showWeekNumbers:O,isClearable:!1,onKeyDown:H},endValue:D,inputProps:{appearance:p(Y,Z,"ghost"),className:`date-period__datepicker-input date-period__datepicker-input_size_${ce} `,fillHover:ee,textSize:ae,placeholder:"Выбрать период"},value:w,onChange:$})]}),y&&a(l,{appearance:p(re,te),className:"date-period__select",width:K.selectFirstWidth??F,minWidth:K.selectFirstWidth??F,options:y,placeholder:I,shape:ie,value:v??null,isSearchable:K.selectFirstIsSearchable??j,onChange:T}),L&&a(l,{appearance:p(re,te),className:"date-period__select",width:K.selectSecondWidth??N,minWidth:K.selectSecondWidth??N,options:L,placeholder:M,shape:ie,value:b??null,isSearchable:K.selectSecondIsSearchable??x,onChange:G})]})}export{z as DatePeriod,h as datePeriodAppearance,m as datePeriodConfig};
+import{jsxs as e,jsx as a}from"react/jsx-runtime";import{useCallback as t}from"react";import r from"clsx";import{DateTime as i}from"luxon";import{useAppearanceConfig as s,useDevicePropsGenerator as c,useStyles as p}from"@itcase/ui-core/hooks";import{mergeAppearanceKeys as o}from"@itcase/ui-core/utils";import{a as d,C as n}from"../ChipsGroup_es_D3y5WSL6.js";import{D as l}from"../DatePicker_es_Bq_AFDLO.js";import"react-select";import"../primitives_es_D7LYOijE.js";import{S as u}from"../SelectContainer_es_B4IWlcz3.js";import"../Group_es_DIuSNHx3.js";import{DATE_PERIOD_INTERVALS as h}from"@itcase/common";import"date-fns/locale";import"react-datepicker";import"../Button_es_DvzjOfyQ.js";import"../Loader_es_CdWc_Prk.js";import"axios";import"../Input_es_DabuPYuA.js";import"../default_es_CsYL84NN.js";import"@rc-component/tooltip";import"react-inlinesvg";import"@itcase/ui-core/hoc";import"react-select/creatable";const S={surfacePrimary:{fill:"surfacePrimary",chipsAppearance:"surfacePrimary sizeM ghost rounded",datePickerAppearance:"surfacePrimary sizeM solid rounded",datePickerInputAppearance:"defaultPrimary sizeM solid rounded",selectAppearance:"defaultPrimary sizeM solid rounded"},surfaceSecondary:{fill:"surfaceSecondary",chipsAppearance:"surfacePrimary sizeM ghost rounded",datePickerAppearance:"surfacePrimary sizeM solid rounded",datePickerInputAppearance:"defaultPrimary sizeM solid rounded",selectAppearance:"defaultPrimary sizeM solid rounded"},sizeL:{size:"l",chipsAppearanceSize:"sizeXL",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"},circular:{shape:"circular"},rounded:{chipsShape:"rounded",selectShape:"rounded",shape:"rounded"},roundedXL:{chipsShape:"roundedXL",selectShape:"roundedXL",shape:"roundedXL"},roundedL:{chipsShape:"roundedL",selectShape:"roundedL",shape:"roundedL"},roundedM:{chipsShape:"roundedM",selectShape:"roundedM",shape:"roundedM"},roundedS:{chipsShape:"roundedS",selectShape:"roundedS",shape:"roundedS"}},m=Object.values(h);function z(){const e=i.now().startOf("day");return{label:"Год",dateIntervalsList:[e.minus({year:1}).toISODate(),e.toISODate()],value:"backYear"}}const P={appearance:S,setAppearance:e=>{P.appearance=e}};function _(S){const{appearance:_,className:f,dataTestId:k,dataTour:A,type:y="year",datePeriodIntervalsList:I,datePeriodSelectFirstOptions:v,datePeriodSelectFirstPlaceholder:L="Выбрать",datePeriodSelectFirstValue:w,datePeriodSelectSecondOptions:M,datePeriodSelectSecondPlaceholder:b="Выбрать",datePeriodSelectSecondValue:D,datePeriodValueEnd:C,datePeriodValueStart:g,datePickerInputWidth:W,monthsShown:j=2,popperPlacement:F,selectFirstIsSearchable:x=!0,selectFirstWidth:N="180px",selectSecondIsSearchable:O=!0,selectSecondWidth:$="180px",selectsRange:V=!0,showWeekNumbers:X=!1,isDisabled:T,isSkeleton:G,onChangeDatePeriod:H,onChangeDatePeriodFirstSelect:J,onChangeDatePeriodSecondSelect:K,onKeyDown:R}=S,Y=s(_,P,T),B=c(S,Y),{fillClass:E,chipsAppearance:Q,chipsAppearanceSize:q,chipsShape:U,datePickerAppearance:Z,datePickerAppearanceSize:ee,datePickerInputAppearance:ae,datePickerInputAppearanceSize:te,datePickerInputFillHover:re,datePickerInputTextSize:ie,selectAppearance:se,selectAppearanceSize:ce,selectShape:pe,shapeClass:oe,sizeClass:de,widthClass:ne}=B,le=function(e="year",a){if("period"===e)return[];const t=a??m;if("year"===e)return t.some(e=>"backYear"===e.value)?t:[...t,z()];const r="month"===e?h.backMonth.value:h.backQuarter.value,i=m.findIndex(e=>e.value===r),s=new Set(m.slice(0,i+1).map(e=>e.value));return t.filter(e=>s.has(e.value))}(B.type??y,I),ue=B.datePickerInputWidth??W,{styles:he}=p(S),Se=t(e=>{const a=e.dateIntervalsList[0],t=e.dateIntervalsList[1];H?.(new Date(a),new Date(t))},[H]),me=t(e=>{const a=e.dateIntervalsList[0],t=e.dateIntervalsList[1];let r=null,s=null;return g&&(r=i.fromJSDate(new Date(g)).toISODate()),C&&(s=i.fromJSDate(new Date(C)).toISODate()),a===r&&t===s},[C,g]);return e("div",{className:r(f,"date-period",ne&&`width_${ne}`,de&&`date-period_size_${de}`,G&&"skeleton"),"data-testid":k,"data-tour":A,style:he,children:[e("div",{className:r("date-period__wrapper",oe&&`shape_${oe}`,E&&`fill_${E}`,ne&&`width_${ne}`,"cursor_type_pointer"),children:[le.length>0&&a(d,{className:"date-period__choice",direction:"horizontal",children:le.map(e=>a(n,{appearance:o(Q,q),label:e.label,shape:U,isActive:me(e),onClick:()=>Se(e)},e.value))}),a(l,{className:"date-period__datepicker",width:ue,datePickerProps:{appearance:o(Z,ee),dateFormat:"dd/MM/yyyy",monthsShown:B.monthsShown??j,popperPlacement:F,selectsRange:V,showWeekNumbers:X,isClearable:!1,onKeyDown:R},endValue:C,inputProps:{appearance:o(ae,te,"ghost"),className:`date-period__datepicker-input date-period__datepicker-input_size_${de} `,fillHover:re,textSize:ie,placeholder:"Выбрать период"},value:g,onChange:H})]}),v&&a(u,{appearance:o(se,ce),className:"date-period__select",width:B.selectFirstWidth??N,minWidth:B.selectFirstWidth??N,options:v,placeholder:L,shape:pe,value:w??null,isSearchable:B.selectFirstIsSearchable??x,onChange:J}),M&&a(u,{appearance:o(se,ce),className:"date-period__select",width:B.selectSecondWidth??$,minWidth:B.selectSecondWidth??$,options:M,placeholder:b,shape:pe,value:D??null,isSearchable:B.selectSecondIsSearchable??O,onChange:K})]})}export{_ as DatePeriod,S as datePeriodAppearance,P as datePeriodConfig};

package/dist/css/styles/bundles.css

@@ -59932,12 +59932,15 @@ div.avatar-stack {
   display: flex;
   gap: 16px;
   &__wrapper {
+    min-width: 0;
     display: flex;
+    flex: 1;
     align-items: center;
     ^&__choice {
     }
     ^&__datepicker {
       min-width: 220px;
+      flex: 1;
     }
   }
   &__select {

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

@@ -17,6 +17,8 @@ type DatePeriodAppearanceProps<Option> = {
     datePickerInputAppearanceSize?: AppearanceSizeKey;
     datePickerInputFillHover?: SelectProps<Option>['fillHover'];
     datePickerInputTextSize?: SelectProps<Option>['inputTextSize'];
+    datePickerInputWidth?: InputProps['width'];
+    datePickerInputWidthMobile?: InputProps['width'];
     fill?: FillProps;
     fillHover?: FillHoverProps;
     monthsShown?: number;
@@ -34,6 +36,7 @@ type DatePeriodAppearanceProps<Option> = {
     size?: SizeProps;
     type?: DatePeriodType;
     typeMobile?: DatePeriodType;
+    typeTablet?: DatePeriodType;
 };
 type DatePeriodProps<Option = SelectOption> = DatePeriodAppearanceProps<Option> & StyleAttributes & {
     appearance?: CompositeAppearanceKeys;

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

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback } from 'react';
 import clsx from 'clsx';
 import { DateTime } from 'luxon';
-import { useAppearanceConfig, useDevicePropsGenerator, } from '@itcase/ui-core/hooks';
+import { useAppearanceConfig, useDevicePropsGenerator, useStyles, } 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';
@@ -16,11 +16,14 @@ const datePeriodConfig = {
     },
 };
 function DatePeriod(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 { appearance, className, dataTestId, dataTour, type = 'year', datePeriodIntervalsList, datePeriodSelectFirstOptions, datePeriodSelectFirstPlaceholder = 'Выбрать', datePeriodSelectFirstValue, datePeriodSelectSecondOptions, datePeriodSelectSecondPlaceholder = 'Выбрать', datePeriodSelectSecondValue, datePeriodValueEnd, datePeriodValueStart, datePickerInputWidth, 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 { fillClass, chipsAppearance, chipsAppearanceSize, chipsShape, datePickerAppearance, datePickerAppearanceSize, datePickerInputAppearance, datePickerInputAppearanceSize, datePickerInputFillHover, datePickerInputTextSize, selectAppearance, selectAppearanceSize, selectShape, shapeClass, sizeClass, } = propsGenerator;
+    const { fillClass, chipsAppearance, chipsAppearanceSize, chipsShape, datePickerAppearance, datePickerAppearanceSize, datePickerInputAppearance, datePickerInputAppearanceSize, datePickerInputFillHover, datePickerInputTextSize, selectAppearance, selectAppearanceSize, selectShape, shapeClass, sizeClass, widthClass, } = propsGenerator;
     const resolvedDatePeriodIntervalsList = getDatePeriodIntervalsList((propsGenerator.type ?? type), datePeriodIntervalsList);
+    const datePickerInputWidthValue = (propsGenerator.datePickerInputWidth ??
+        datePickerInputWidth);
+    const { styles: datePeriodStyles } = useStyles(props);
     const onClickPeriodChips = useCallback((selectedPeriodItem) => {
         const dateStartIso = selectedPeriodItem.dateIntervalsList[0];
         const dateEndIso = selectedPeriodItem.dateIntervalsList[1];
@@ -40,7 +43,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: [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: {
+    return (_jsxs("div", { className: clsx(className, 'date-period', widthClass && `width_${widthClass}`, sizeClass && `date-period_size_${sizeClass}`, isSkeleton && `skeleton`), "data-testid": dataTestId, "data-tour": dataTour, style: datePeriodStyles, children: [_jsxs("div", { className: clsx('date-period__wrapper', shapeClass && `shape_${shapeClass}`, fillClass && `fill_${fillClass}`, widthClass && `width_${widthClass}`, '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", width: datePickerInputWidthValue, datePickerProps: {
                             appearance: mergeAppearanceKeys(datePickerAppearance, datePickerAppearanceSize),
                             dateFormat: 'dd/MM/yyyy',
                             monthsShown: propsGenerator.monthsShown ?? monthsShown,

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

@@ -1,12 +1,25 @@
 import { DATE_PERIOD_INTERVALS } from '@itcase/common';
+import { DateTime } from 'luxon';
 const DATE_PERIOD_INTERVALS_LIST = Object.values(DATE_PERIOD_INTERVALS);
+function getDatePeriodYearItem() {
+    const todayDT = DateTime.now().startOf('day');
+    return {
+        label: 'Год',
+        dateIntervalsList: [
+            todayDT.minus({ year: 1 }).toISODate(),
+            todayDT.toISODate(),
+        ],
+        value: 'backYear',
+    };
+}
 function getDatePeriodIntervalsList(type = 'year', datePeriodIntervalsList) {
     if (type === 'period') {
         return [];
     }
     const sourceList = datePeriodIntervalsList ?? DATE_PERIOD_INTERVALS_LIST;
     if (type === 'year') {
-        return sourceList;
+        const hasYearItem = sourceList.some((item) => item.value === 'backYear');
+        return hasYearItem ? sourceList : [...sourceList, getDatePeriodYearItem()];
     }
     const lastValue = type === 'month'
         ? DATE_PERIOD_INTERVALS.backMonth.value

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itcase/ui-web",
-  "version": "1.10.27",
+  "version": "1.10.30",
   "description": "UI components",
   "keywords": "",
   "license": "MIT",
@@ -116,5 +116,5 @@
     "storybook": "^10.4.2",
     "typescript": "^6.0.3"
   },
-  "gitHead": "3d4d84c876ebc1173a6696cda865324de82ed77b"
+  "gitHead": "3b82d232bd7b1356690256ae1d4ba793b8e0cb2b"
 }