@itcase/ui-web 1.10.28 → 1.10.30

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1 +1 @@
1
- "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 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);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:f,datePeriodSelectSecondOptions:y,datePeriodSelectSecondPlaceholder:v="Выбрать",datePeriodSelectSecondValue:D,datePeriodValueEnd:j,datePeriodValueStart:q,monthsShown:L=2,popperPlacement:b,selectFirstIsSearchable:C=!0,selectFirstWidth:g="180px",selectSecondIsSearchable:M=!0,selectSecondWidth:x="180px",selectsRange:w=!0,showWeekNumbers:N=!1,isDisabled:T,isSkeleton:F,onChangeDatePeriod:O,onChangeDatePeriodFirstSelect:E,onChangeDatePeriodSecondSelect:W,onKeyDown:R}=o,V=i.useAppearanceConfig(S,h,T),K=i.useDevicePropsGenerator(o,V),{fillClass:X,chipsAppearance:G,chipsAppearanceSize:$,chipsShape:H,datePickerAppearance:J,datePickerAppearanceSize:Y,datePickerInputAppearance:B,datePickerInputAppearanceSize:Q,datePickerInputFillHover:U,datePickerInputTextSize:Z,selectAppearance:ee,selectAppearanceSize:ae,selectShape:re,shapeClass:te,sizeClass:ie}=K,se=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?d.DATE_PERIOD_INTERVALS.backMonth.value:d.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))}(K.type??_,A),ce=a.useCallback(e=>{const a=e.dateIntervalsList[0],r=e.dateIntervalsList[1];O?.(new Date(a),new Date(r))},[O]),ne=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",ie&&`date-period_size_${ie}`,F&&"skeleton"),"data-testid":m,"data-tour":z,children:[e.jsxs("div",{className:r("date-period__wrapper",te&&`shape_${te}`,X&&`fill_${X}`,"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:s.mergeAppearanceKeys(G,$),label:a.label,shape:H,isActive:ne(a),onClick:()=>ce(a)},a.value))}),e.jsx(n.DatePickerInput,{className:"date-period__datepicker",datePickerProps:{appearance:s.mergeAppearanceKeys(J,Y),dateFormat:"dd/MM/yyyy",monthsShown:K.monthsShown??L,popperPlacement:b,selectsRange:w,showWeekNumbers:N,isClearable:!1,onKeyDown:R},endValue:j,inputProps:{appearance:s.mergeAppearanceKeys(B,Q,"ghost"),className:`date-period__datepicker-input date-period__datepicker-input_size_${ie} `,fillHover:U,textSize:Z,placeholder:"Выбрать период"},value:q,onChange:O})]}),k&&e.jsx(p.SelectContainer,{appearance:s.mergeAppearanceKeys(ee,ae),className:"date-period__select",width:K.selectFirstWidth??g,minWidth:K.selectFirstWidth??g,options:k,placeholder:I,shape:re,value:f??null,isSearchable:K.selectFirstIsSearchable??C,onChange:E}),y&&e.jsx(p.SelectContainer,{appearance:s.mergeAppearanceKeys(ee,ae),className:"date-period__select",width:K.selectSecondWidth??x,minWidth:K.selectSecondWidth??x,options:y,placeholder:v,shape:re,value:D??null,isSearchable:K.selectSecondIsSearchable??M,onChange:W})]})},exports.datePeriodAppearance=o,exports.datePeriodConfig=h;
1
+ "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;
@@ -1 +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 o}from"@itcase/ui-core/utils";import{a as p,C as n}from"../ChipsGroup_es_D3y5WSL6.js";import{D as d}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);function m(){const e=i.now().startOf("day");return{label:"Год",dateIntervalsList:[e.minus({year:1}).toISODate(),e.toISODate()],value:"backYear"}}const z={appearance:h,setAppearance:e=>{z.appearance=e}};function P(h){const{appearance:P,className:_,dataTestId:f,dataTour:k,type:A="year",datePeriodIntervalsList:y,datePeriodSelectFirstOptions:I,datePeriodSelectFirstPlaceholder:v="Выбрать",datePeriodSelectFirstValue:L,datePeriodSelectSecondOptions:M,datePeriodSelectSecondPlaceholder:b="Выбрать",datePeriodSelectSecondValue:D,datePeriodValueEnd:w,datePeriodValueStart:C,monthsShown:g=2,popperPlacement:j,selectFirstIsSearchable:F=!0,selectFirstWidth:x="180px",selectSecondIsSearchable:N=!0,selectSecondWidth:W="180px",selectsRange:O=!0,showWeekNumbers:V=!1,isDisabled:X,isSkeleton:$,onChangeDatePeriod:T,onChangeDatePeriodFirstSelect:G,onChangeDatePeriodSecondSelect:H,onKeyDown:J}=h,K=s(P,z,X),R=c(h,K),{fillClass:Y,chipsAppearance:B,chipsAppearanceSize:E,chipsShape:Q,datePickerAppearance:q,datePickerAppearanceSize:U,datePickerInputAppearance:Z,datePickerInputAppearanceSize:ee,datePickerInputFillHover:ae,datePickerInputTextSize:re,selectAppearance:te,selectAppearanceSize:ie,selectShape:se,shapeClass:ce,sizeClass:oe}=R,pe=function(e="year",a){if("period"===e)return[];const r=a??S;if("year"===e)return r.some(e=>"backYear"===e.value)?r:[...r,m()];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))}(R.type??A,y),ne=r(e=>{const a=e.dateIntervalsList[0],r=e.dateIntervalsList[1];T?.(new Date(a),new Date(r))},[T]),de=r(e=>{const a=e.dateIntervalsList[0],r=e.dateIntervalsList[1];let t=null,s=null;return C&&(t=i.fromJSDate(new Date(C)).toISODate()),w&&(s=i.fromJSDate(new Date(w)).toISODate()),a===t&&r===s},[w,C]);return e("div",{className:t(_,"date-period",oe&&`date-period_size_${oe}`,$&&"skeleton"),"data-testid":f,"data-tour":k,children:[e("div",{className:t("date-period__wrapper",ce&&`shape_${ce}`,Y&&`fill_${Y}`,"cursor_type_pointer"),children:[pe.length>0&&a(p,{className:"date-period__choice",direction:"horizontal",children:pe.map(e=>a(n,{appearance:o(B,E),label:e.label,shape:Q,isActive:de(e),onClick:()=>ne(e)},e.value))}),a(d,{className:"date-period__datepicker",datePickerProps:{appearance:o(q,U),dateFormat:"dd/MM/yyyy",monthsShown:R.monthsShown??g,popperPlacement:j,selectsRange:O,showWeekNumbers:V,isClearable:!1,onKeyDown:J},endValue:w,inputProps:{appearance:o(Z,ee,"ghost"),className:`date-period__datepicker-input date-period__datepicker-input_size_${oe} `,fillHover:ae,textSize:re,placeholder:"Выбрать период"},value:C,onChange:T})]}),I&&a(l,{appearance:o(te,ie),className:"date-period__select",width:R.selectFirstWidth??x,minWidth:R.selectFirstWidth??x,options:I,placeholder:v,shape:se,value:L??null,isSearchable:R.selectFirstIsSearchable??F,onChange:G}),M&&a(l,{appearance:o(te,ie),className:"date-period__select",width:R.selectSecondWidth??W,minWidth:R.selectSecondWidth??W,options:M,placeholder:b,shape:se,value:D??null,isSearchable:R.selectSecondIsSearchable??N,onChange:H})]})}export{P as DatePeriod,h as datePeriodAppearance,z as datePeriodConfig};
1
+ 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};
@@ -59932,12 +59932,15 @@ div.avatar-stack {
59932
59932
  display: flex;
59933
59933
  gap: 16px;
59934
59934
  &__wrapper {
59935
+ min-width: 0;
59935
59936
  display: flex;
59937
+ flex: 1;
59936
59938
  align-items: center;
59937
59939
  ^&__choice {
59938
59940
  }
59939
59941
  ^&__datepicker {
59940
59942
  min-width: 220px;
59943
+ flex: 1;
59941
59944
  }
59942
59945
  }
59943
59946
  &__select {
@@ -17,6 +17,8 @@ type DatePeriodAppearanceProps<Option> = {
17
17
  datePickerInputAppearanceSize?: AppearanceSizeKey;
18
18
  datePickerInputFillHover?: SelectProps<Option>['fillHover'];
19
19
  datePickerInputTextSize?: SelectProps<Option>['inputTextSize'];
20
+ datePickerInputWidth?: InputProps['width'];
21
+ datePickerInputWidthMobile?: InputProps['width'];
20
22
  fill?: FillProps;
21
23
  fillHover?: FillHoverProps;
22
24
  monthsShown?: number;
@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
2
  import { useCallback } from 'react';
3
3
  import clsx from 'clsx';
4
4
  import { DateTime } from 'luxon';
5
- import { useAppearanceConfig, useDevicePropsGenerator, } from '@itcase/ui-core/hooks';
5
+ import { useAppearanceConfig, useDevicePropsGenerator, useStyles, } from '@itcase/ui-core/hooks';
6
6
  import { mergeAppearanceKeys } from '@itcase/ui-core/utils';
7
7
  import { Chips, ChipsGroup } from 'src/components/Chips';
8
8
  import { DatePickerInput } from 'src/components/DatePicker';
@@ -16,11 +16,14 @@ const datePeriodConfig = {
16
16
  },
17
17
  };
18
18
  function DatePeriod(props) {
19
- 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;
19
+ 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;
20
20
  const appearanceConfig = useAppearanceConfig(appearance, datePeriodConfig, isDisabled);
21
21
  const propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
22
- const { fillClass, chipsAppearance, chipsAppearanceSize, chipsShape, datePickerAppearance, datePickerAppearanceSize, datePickerInputAppearance, datePickerInputAppearanceSize, datePickerInputFillHover, datePickerInputTextSize, selectAppearance, selectAppearanceSize, selectShape, shapeClass, sizeClass, } = propsGenerator;
22
+ const { fillClass, chipsAppearance, chipsAppearanceSize, chipsShape, datePickerAppearance, datePickerAppearanceSize, datePickerInputAppearance, datePickerInputAppearanceSize, datePickerInputFillHover, datePickerInputTextSize, selectAppearance, selectAppearanceSize, selectShape, shapeClass, sizeClass, widthClass, } = propsGenerator;
23
23
  const resolvedDatePeriodIntervalsList = getDatePeriodIntervalsList((propsGenerator.type ?? type), datePeriodIntervalsList);
24
+ const datePickerInputWidthValue = (propsGenerator.datePickerInputWidth ??
25
+ datePickerInputWidth);
26
+ const { styles: datePeriodStyles } = useStyles(props);
24
27
  const onClickPeriodChips = useCallback((selectedPeriodItem) => {
25
28
  const dateStartIso = selectedPeriodItem.dateIntervalsList[0];
26
29
  const dateEndIso = selectedPeriodItem.dateIntervalsList[1];
@@ -40,7 +43,7 @@ function DatePeriod(props) {
40
43
  return (dateStartIso === normalizedDatePeriodValueStart &&
41
44
  dateEndIso === normalizedDatePeriodValueEnd);
42
45
  }, [datePeriodValueEnd, datePeriodValueStart]);
43
- 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: {
46
+ 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: {
44
47
  appearance: mergeAppearanceKeys(datePickerAppearance, datePickerAppearanceSize),
45
48
  dateFormat: 'dd/MM/yyyy',
46
49
  monthsShown: propsGenerator.monthsShown ?? monthsShown,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@itcase/ui-web",
3
- "version": "1.10.28",
3
+ "version": "1.10.30",
4
4
  "description": "UI components",
5
5
  "keywords": "",
6
6
  "license": "MIT",
@@ -116,5 +116,5 @@
116
116
  "storybook": "^10.4.2",
117
117
  "typescript": "^6.0.3"
118
118
  },
119
- "gitHead": "ae63d242c0352a89179cc482c692ea4c938566d0"
119
+ "gitHead": "3b82d232bd7b1356690256ae1d4ba793b8e0cb2b"
120
120
  }