@itcase/ui-web 1.9.111 → 1.9.112

package/dist/DatePicker_cjs_Cd7wsJCG.js

@@ -0,0 +1 @@
+"use strict";var e=require("react/jsx-runtime"),t=require("react"),a=require("clsx"),r=require("date-fns/locale"),i=require("react-datepicker"),n=require("@itcase/ui-core/hooks"),o=require("./Button_cjs_CDr9zTdB.js"),c=require("./primitives_cjs_ocTnUpml.js"),s=require("./Input_cjs_D9PxC_lJ.js"),l=require("./default_cjs_BMbs2it-.js");const p={surfacePrimary:{dayTextColor:"surfaceTextPrimary",dayTextShape:"rounded",iconFillHover:"surfaceSecondary",iconItemFill:"surfaceItemPrimary",iconShape:"circular",monthTextColor:"surfaceTextPrimary",monthTextWeight:"400",yearTextColor:"surfaceTextPrimary",yearTextWeight:"400"},...{sizeL:{size:"l",daySize:"xs",dayTextSize:"m",iconFillSize:"24",iconLeft:l.icons14.Arrow.ChevronLeft,iconRight:l.icons14.Arrow.ChevronRight},sizeM:{size:"m",daySize:"xxl",dayTextSize:"m",iconFillSize:"24",iconLeft:l.icons14.Arrow.ChevronLeft,iconRight:l.icons14.Arrow.ChevronRight,iconSize:"14",monthTextSize:"m",yearTextSize:"m"},sizeS:{size:"s",daySize:"xs",dayTextSize:"m",iconFillSize:"24",iconLeft:l.icons14.Arrow.ChevronLeft,iconRight:l.icons14.Arrow.ChevronRight}},solid:{inputProps:{borderColor:"none"}},outlined:{inputProps:{fill:"none"}},full:{},ghost:{inputProps:{fill:"none",borderColor:"none"}}},u=e=>{const t=e.getDay()||7,a=new Date(e);a.setDate(e.getDate()-(t-1));const r=new Date(a);return r.setDate(a.getDate()+6),{mondayDate:a,sundayDate:r}},d={appearance:p,setAppearance:e=>{d.appearance=e}};const m=t.forwardRef((r,i)=>{const{inputIcon:n,inputProps:o,value:c,isClearable:l}=r,p=t.useMemo(()=>{if(c){const e=c.split(" - ");return e[0]===e[1]?e[0]:c}return""},[c]);return e.jsxs(t.Fragment,{children:[e.jsx(s.Input,{...r,...o,className:a(o?.className,"datepicker__input"),ref:i,autocomplete:"off",value:p}),n&&e.jsx(x,{...o}),l&&e.jsx(h,{datepickerRef:r.datepickerRef,...o})]})});function h(r){const{clearButton:i,clearButtonAppearance:n,clearIcon:s,clearIconAppearance:l,clearIconSrc:p,datepickerRef:u}=r,d=t.useCallback(e=>{u?.current?.onClearClick(e),u?.current?.handleFocus(e)},[]);return e.jsx(t.Fragment,{children:i?e.jsx(o.Button,{appearance:n,className:a("react-datepicker__clear-button","cursor_type_pointer"),label:i,onClick:d}):(s||p)&&e.jsx(c.Icon,{appearance:l,className:a("react-datepicker__clear-icon","cursor_type_pointer"),imageSrc:p,SvgImage:s,onClick:d})})}function x(t){const{inputIcon:r,inputIconFill:i,inputIconFillHover:n,inputIconFillSize:o,inputIconItemFill:s,inputIconShape:l,inputIconSize:p,inputIconSrc:u,onClick:d}=t;return e.jsx(c.Icon,{className:a("react-datepicker__input-icon","cursor_type_pointer"),size:p,fill:i,fillHover:n,fillSize:o,iconFill:s,imageSrc:u,shape:l,SvgImage:r,onClick:()=>d&&d()})}exports.DatePickerInput=function(s){const{className:l,dataTestId:p,dataTour:h,datePickerProps:x={},endValue:f,inputProps:y={},value:k,onChange:C}=s,{appearance:S,customTimeInput:g,disablePastDays:_,monthsShown:z,selectsRange:I,showWeekNumbers:v,showWeekPicker:T}=x,j=n.useAppearanceConfig(S,d),D=n.useDevicePropsGenerator(x,j),{daySize:P,dayTextColor:b,dayTextShape:F,dayTextSize:w,iconFill:N,iconFillHover:R,iconFillSize:A,iconItemFill:q,iconLeft:L,iconRight:W,iconShape:H,monthTextColor:B,monthTextSize:M,monthTextWeight:$,popper:O,popperPlacement:U,sizeClass:G,widthClass:V,yearTextColor:E,yearTextSize:J,yearTextWeight:K,isClearable:Q}=D,X=t.useRef(null),[Y,Z]=t.useMemo(()=>{let e,t;return k&&(e="string"==typeof k?new Date(k):k),f&&(t="string"==typeof f?new Date(f):f),[e,t]},[k,f]),ee=t.useCallback(e=>{const t=Array.isArray(e)?e:[e],[a,r]=t;if(a&&T){const{mondayDate:e,sundayDate:t}=u(a);C?.(e,t)}else C?.(a,r)},[T,C]),te=t.useCallback(e=>{const{mondayDate:t,sundayDate:a}=u(e);C?.(t,a)},[C]),ae=t.useCallback((t,a)=>e.jsx(o.Button,{className:"react-datepicker__day-button",size:P,label:a.getDate().toString(),labelTextColor:b,labelTextSize:w,shape:F}),[P,b,F,w]),re=t.useCallback(({decreaseMonth:t,increaseMonth:a,monthDate:r})=>e.jsxs("div",{className:"react-datepicker__header--div",children:[L&&e.jsx(c.Icon,{className:"react-datepicker__icon",fill:N,fillHover:R,fillSize:A,iconFill:q,shape:H,SvgImage:L,onClick:t}),e.jsxs("div",{className:"react-datepicker__data",children:[e.jsx(c.Text,{className:"react-datepicker__month",size:M,textColor:B,textWeight:$,children:r.toLocaleString("ru-RU",{month:"long"})}),e.jsx(c.Text,{className:"react-datepicker__year",size:J,textColor:E,textWeight:K,children:r.toLocaleString("ru-RU",{year:"numeric"})})]}),W&&e.jsx(c.Icon,{className:"react-datepicker__icon",fill:N,fillHover:R,fillSize:A,iconFill:q,shape:H,SvgImage:W,onClick:a})]}),[N,R,A,q,L,W,H,B,M,$,E,J,K]),{styles:ie}=n.useStyles(s);return e.jsx("div",{className:a(l,"datepicker",z&&"datepicker_multiple-months",g&&"datepicker_button",G&&`datepicker_size_${G}`,V&&`datepicker_width_${V}`),"data-testid":p,"data-tour":h,style:ie,children:e.jsx(i,{ref:X,...x,minDate:_?new Date:void 0,customInput:e.jsx(m,{datepickerRef:X,inputProps:y,isClearable:Q}),endDate:I?Z:void 0,locale:r.ru,outsideClickIgnoreClass:"react-datepicker-popper",popperClassName:O&&`react-datepicker-popper-${O}`,popperPlacement:U,preventOpenOnFocus:!0,renderCustomHeader:re,renderDayContents:ae,selected:Y,startDate:Y,isClearable:!1,onChange:ee,onWeekSelect:v?te:void 0})})},exports.datePickerAppearance=p,exports.datePickerConfig=d;

package/dist/DatePicker_es_BhrZj2OP.js

@@ -0,0 +1 @@
+import{jsxs as e,jsx as t}from"react/jsx-runtime";import a,{useMemo as r,useCallback as i,useRef as o}from"react";import n from"clsx";import{ru as c}from"date-fns/locale";import l from"react-datepicker";import{useAppearanceConfig as s,useDevicePropsGenerator as p,useStyles as d}from"@itcase/ui-core/hooks";import{B as m}from"./Button_es_M2ryMLoI.js";import{I as u,T as h}from"./primitives_es_BQqNcRQk.js";import{I as f}from"./Input_es_DabuPYuA.js";import{a as y}from"./default_es_CaWUd9iO.js";const S={surfacePrimary:{dayTextColor:"surfaceTextPrimary",dayTextShape:"rounded",iconFillHover:"surfaceSecondary",iconItemFill:"surfaceItemPrimary",iconShape:"circular",monthTextColor:"surfaceTextPrimary",monthTextWeight:"400",yearTextColor:"surfaceTextPrimary",yearTextWeight:"400"},...{sizeL:{size:"l",daySize:"xs",dayTextSize:"m",iconFillSize:"24",iconLeft:y.Arrow.ChevronLeft,iconRight:y.Arrow.ChevronRight},sizeM:{size:"m",daySize:"xxl",dayTextSize:"m",iconFillSize:"24",iconLeft:y.Arrow.ChevronLeft,iconRight:y.Arrow.ChevronRight,iconSize:"14",monthTextSize:"m",yearTextSize:"m"},sizeS:{size:"s",daySize:"xs",dayTextSize:"m",iconFillSize:"24",iconLeft:y.Arrow.ChevronLeft,iconRight:y.Arrow.ChevronRight}},solid:{inputProps:{borderColor:"none"}},outlined:{inputProps:{fill:"none"}},full:{},ghost:{inputProps:{fill:"none",borderColor:"none"}}},_=e=>{const t=e.getDay()||7,a=new Date(e);a.setDate(e.getDate()-(t-1));const r=new Date(a);return r.setDate(a.getDate()+6),{mondayDate:a,sundayDate:r}},g={appearance:S,setAppearance:e=>{g.appearance=e}};function C(a){const{className:f,dataTestId:y,dataTour:S,datePickerProps:C={},endValue:x,inputProps:z={},value:T,onChange:v}=a,{appearance:I,customTimeInput:D,disablePastDays:F,monthsShown:w,selectsRange:P,showWeekNumbers:N,showWeekPicker:b}=C,R=s(I,g),A=p(C,R),{daySize:L,dayTextColor:W,dayTextShape:H,dayTextSize:j,iconFill:B,iconFillHover:M,iconFillSize:$,iconItemFill:O,iconLeft:U,iconRight:V,iconShape:q,monthTextColor:E,monthTextSize:G,monthTextWeight:J,popper:K,popperPlacement:Q,sizeClass:X,widthClass:Y,yearTextColor:Z,yearTextSize:ee,yearTextWeight:te,isClearable:ae}=A,re=o(null),[ie,oe]=r(()=>{let e,t;return T&&(e="string"==typeof T?new Date(T):T),x&&(t="string"==typeof x?new Date(x):x),[e,t]},[T,x]),ne=i(e=>{const t=Array.isArray(e)?e:[e],[a,r]=t;if(a&&b){const{mondayDate:e,sundayDate:t}=_(a);v?.(e,t)}else v?.(a,r)},[b,v]),ce=i(e=>{const{mondayDate:t,sundayDate:a}=_(e);v?.(t,a)},[v]),le=i((e,a)=>t(m,{className:"react-datepicker__day-button",size:L,label:a.getDate().toString(),labelTextColor:W,labelTextSize:j,shape:H}),[L,W,H,j]),se=i(({decreaseMonth:a,increaseMonth:r,monthDate:i})=>e("div",{className:"react-datepicker__header--div",children:[U&&t(u,{className:"react-datepicker__icon",fill:B,fillHover:M,fillSize:$,iconFill:O,shape:q,SvgImage:U,onClick:a}),e("div",{className:"react-datepicker__data",children:[t(h,{className:"react-datepicker__month",size:G,textColor:E,textWeight:J,children:i.toLocaleString("ru-RU",{month:"long"})}),t(h,{className:"react-datepicker__year",size:ee,textColor:Z,textWeight:te,children:i.toLocaleString("ru-RU",{year:"numeric"})})]}),V&&t(u,{className:"react-datepicker__icon",fill:B,fillHover:M,fillSize:$,iconFill:O,shape:q,SvgImage:V,onClick:r})]}),[B,M,$,O,U,V,q,E,G,J,Z,ee,te]),{styles:pe}=d(a);return t("div",{className:n(f,"datepicker",w&&"datepicker_multiple-months",D&&"datepicker_button",X&&`datepicker_size_${X}`,Y&&`datepicker_width_${Y}`),"data-testid":y,"data-tour":S,style:pe,children:t(l,{ref:re,...C,minDate:F?new Date:void 0,customInput:t(k,{datepickerRef:re,inputProps:z,isClearable:ae}),endDate:P?oe:void 0,locale:c,outsideClickIgnoreClass:"react-datepicker-popper",popperClassName:K&&`react-datepicker-popper-${K}`,popperPlacement:Q,preventOpenOnFocus:!0,renderCustomHeader:se,renderDayContents:le,selected:ie,startDate:ie,isClearable:!1,onChange:ne,onWeekSelect:N?ce:void 0})})}const k=a.forwardRef((i,o)=>{const{inputIcon:c,inputProps:l,value:s,isClearable:p}=i,d=r(()=>{if(s){const e=s.split(" - ");return e[0]===e[1]?e[0]:s}return""},[s]);return e(a.Fragment,{children:[t(f,{...i,...l,className:n(l?.className,"datepicker__input"),ref:o,autocomplete:"off",value:d}),c&&t(z,{...l}),p&&t(x,{datepickerRef:i.datepickerRef,...l})]})});function x(e){const{clearButton:r,clearButtonAppearance:o,clearIcon:c,clearIconAppearance:l,clearIconSrc:s,datepickerRef:p}=e,d=i(e=>{p?.current?.onClearClick(e),p?.current?.handleFocus(e)},[]);return t(a.Fragment,{children:r?t(m,{appearance:o,className:n("react-datepicker__clear-button","cursor_type_pointer"),label:r,onClick:d}):(c||s)&&t(u,{appearance:l,className:n("react-datepicker__clear-icon","cursor_type_pointer"),imageSrc:s,SvgImage:c,onClick:d})})}function z(e){const{inputIcon:a,inputIconFill:r,inputIconFillHover:i,inputIconFillSize:o,inputIconItemFill:c,inputIconShape:l,inputIconSize:s,inputIconSrc:p,onClick:d}=e;return t(u,{className:n("react-datepicker__input-icon","cursor_type_pointer"),size:s,fill:r,fillHover:i,fillSize:o,iconFill:c,imageSrc:p,shape:l,SvgImage:a,onClick:()=>d&&d()})}export{C as D,g as a,S as d};

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/common"),t=require("@itcase/ui-core/hooks"),c=require("@itcase/ui-core/utils"),p=require("../../ChipsGroup_cjs_BfWpClti.js"),d=require("../../DatePicker_cjs_BhZXIBZm.js");require("react-select"),require("../../primitives_cjs_ocTnUpml.js");var n=require("../../SelectContainer_cjs_DEG3N6SX.js");require("../../Group_cjs_CiLUYKP7.js"),require("date-fns/locale"),require("react-datepicker"),require("../../Button_cjs_CDr9zTdB.js"),require("../../Loader_cjs_nwF8h8Ku.js"),require("../../Input_cjs_D9PxC_lJ.js"),require("../../Label_cjs_DI2LmDIX.js"),require("@rc-component/tooltip"),require("../../default_cjs_BMbs2it-.js"),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={appearance:o,setAppearance:e=>{l.appearance=e}};exports.DatePeriod=function(o){const{appearance:u,className:h,dataTestId:S,dataTour:P,datePeriodIntervalsList:z=Object.values(s.DATE_PERIOD_INTERVALS),datePeriodSelectFirstOptions:_,datePeriodSelectFirstPlaceholder:m,datePeriodSelectFirstValue:A,datePeriodSelectSecondOptions:k,datePeriodSelectSecondPlaceholder:j,datePeriodSelectSecondValue:f,datePeriodValueEnd:q,datePeriodValueStart:y,monthsShown:D,popperPlacement:L,selectsRange:C=!0,showWeekNumbers:I=!0,isDisabled:v,isSkeleton:g,onChangeDatePeriod:x,onChangeDatePeriodFirstSelect:M,onChangeDatePeriodSecondSelect:b,onKeyDown:w}=o,N=t.useAppearanceConfig(u,l,v),K=t.useDevicePropsGenerator(o,N),{fillClass:T,chipsAppearance:F,chipsAppearanceSize:O,chipsShape:V,datePickerAppearance:X,datePickerAppearanceSize:E,datePickerInputAppearance:G,datePickerInputAppearanceSize:R,datePickerInputFillHover:W,datePickerInputTextSize:$,selectAppearance:H,selectAppearanceSize:J,selectShape:B,shapeClass:Q,sizeClass:U}=K,Y=a.useCallback(e=>{const a=e.dateIntervalsList[0],r=e.dateIntervalsList[1];x?.(new Date(a),new Date(r))},[x]),Z=a.useCallback(e=>{const a=e.dateIntervalsList[0],r=e.dateIntervalsList[1];let s=null,t=null;return y&&(s=i.DateTime.fromJSDate(new Date(y)).toISODate()),q&&(t=i.DateTime.fromJSDate(new Date(q)).toISODate()),a===s&&r===t},[q,y]);return e.jsxs("div",{className:r(h,"date-period",U&&`date-period_size_${U}`,g&&"skeleton"),"data-testid":S,"data-tour":P,children:[e.jsxs("div",{className:r("date-period__wrapper",Q&&`shape_${Q}`,T&&`fill_${T}`,"cursor_type_pointer"),children:[e.jsx(p.ChipsGroup,{className:"date-period__choice",direction:"horizontal",children:z.map(a=>e.jsx(p.Chips,{appearance:c.mergeAppearanceKeys(F,O),label:a.label,shape:V,isActive:Z(a),onClick:()=>Y(a)},a.value))}),e.jsx(d.DatePickerInput,{className:"date-period__datepicker",datePickerProps:{appearance:c.mergeAppearanceKeys(X,E),dateFormat:"dd/MM/yyyy",monthsShown:D,popperPlacement:L,selectsRange:C,showWeekNumbers:I,isClearable:!1,onKeyDown:w},endValue:q,inputProps:{appearance:c.mergeAppearanceKeys(G,R,"ghost"),className:`date-period__datepicker-input date-period__datepicker-input_size_${U} `,fillHover:W,textSize:$,placeholder:"Выбрать период"},value:y,onChange:x})]}),_&&e.jsx(n.SelectContainer,{appearance:c.mergeAppearanceKeys(H,J),className:"date-period__select",width:"180px",minWidth:"180px",options:_,placeholder:m,shape:B,value:A,isSearchable:!0,onChange:M}),k&&e.jsx(n.SelectContainer,{appearance:c.mergeAppearanceKeys(H,J),className:"date-period__select",width:"180px",minWidth:"180px",options:k,placeholder:j,shape:B,value:f,isSearchable:!0,onChange:b})]})},exports.datePeriodAppearance=o,exports.datePeriodConfig=l;
+"use strict";var e=require("react/jsx-runtime"),a=require("react"),r=require("clsx"),i=require("luxon"),s=require("@itcase/common"),t=require("@itcase/ui-core/hooks"),c=require("@itcase/ui-core/utils"),p=require("../../ChipsGroup_cjs_BfWpClti.js"),d=require("../../DatePicker_cjs_Cd7wsJCG.js");require("react-select"),require("../../primitives_cjs_ocTnUpml.js");var n=require("../../SelectContainer_cjs_DEG3N6SX.js");require("../../Group_cjs_CiLUYKP7.js"),require("date-fns/locale"),require("react-datepicker"),require("../../Button_cjs_CDr9zTdB.js"),require("../../Loader_cjs_nwF8h8Ku.js"),require("../../Input_cjs_D9PxC_lJ.js"),require("../../default_cjs_BMbs2it-.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={appearance:o,setAppearance:e=>{l.appearance=e}};exports.DatePeriod=function(o){const{appearance:u,className:h,dataTestId:S,dataTour:P,datePeriodIntervalsList:z=Object.values(s.DATE_PERIOD_INTERVALS),datePeriodSelectFirstOptions:m,datePeriodSelectFirstPlaceholder:_,datePeriodSelectFirstValue:A,datePeriodSelectSecondOptions:k,datePeriodSelectSecondPlaceholder:j,datePeriodSelectSecondValue:f,datePeriodValueEnd:y,datePeriodValueStart:q,monthsShown:D,popperPlacement:C,selectsRange:I=!0,showWeekNumbers:L=!0,isDisabled:v,isSkeleton:g,onChangeDatePeriod:x,onChangeDatePeriodFirstSelect:M,onChangeDatePeriodSecondSelect:b,onKeyDown:w}=o,N=t.useAppearanceConfig(u,l,v),K=t.useDevicePropsGenerator(o,N),{fillClass:T,chipsAppearance:F,chipsAppearanceSize:O,chipsShape:V,datePickerAppearance:X,datePickerAppearanceSize:E,datePickerInputAppearance:G,datePickerInputAppearanceSize:R,datePickerInputFillHover:W,datePickerInputTextSize:$,selectAppearance:H,selectAppearanceSize:J,selectShape:B,shapeClass:Q,sizeClass:U}=K,Y=a.useCallback(e=>{const a=e.dateIntervalsList[0],r=e.dateIntervalsList[1];x?.(new Date(a),new Date(r))},[x]),Z=a.useCallback(e=>{const a=e.dateIntervalsList[0],r=e.dateIntervalsList[1];let s=null,t=null;return q&&(s=i.DateTime.fromJSDate(new Date(q)).toISODate()),y&&(t=i.DateTime.fromJSDate(new Date(y)).toISODate()),a===s&&r===t},[y,q]);return e.jsxs("div",{className:r(h,"date-period",U&&`date-period_size_${U}`,g&&"skeleton"),"data-testid":S,"data-tour":P,children:[e.jsxs("div",{className:r("date-period__wrapper",Q&&`shape_${Q}`,T&&`fill_${T}`,"cursor_type_pointer"),children:[e.jsx(p.ChipsGroup,{className:"date-period__choice",direction:"horizontal",children:z.map(a=>e.jsx(p.Chips,{appearance:c.mergeAppearanceKeys(F,O),label:a.label,shape:V,isActive:Z(a),onClick:()=>Y(a)},a.value))}),e.jsx(d.DatePickerInput,{className:"date-period__datepicker",datePickerProps:{appearance:c.mergeAppearanceKeys(X,E),dateFormat:"dd/MM/yyyy",monthsShown:D,popperPlacement:C,selectsRange:I,showWeekNumbers:L,isClearable:!1,onKeyDown:w},endValue:y,inputProps:{appearance:c.mergeAppearanceKeys(G,R,"ghost"),className:`date-period__datepicker-input date-period__datepicker-input_size_${U} `,fillHover:W,textSize:$,placeholder:"Выбрать период"},value:q,onChange:x})]}),m&&e.jsx(n.SelectContainer,{appearance:c.mergeAppearanceKeys(H,J),className:"date-period__select",width:"180px",minWidth:"180px",options:m,placeholder:_,shape:B,value:A,isSearchable:!0,onChange:M}),k&&e.jsx(n.SelectContainer,{appearance:c.mergeAppearanceKeys(H,J),className:"date-period__select",width:"180px",minWidth:"180px",options:k,placeholder:j,shape:B,value:f,isSearchable:!0,onChange:b})]})},exports.datePeriodAppearance=o,exports.datePeriodConfig=l;

package/dist/cjs/components/DatePicker.js

@@ -1 +1 @@
-"use strict";var e=require("../../DatePicker_cjs_BhZXIBZm.js");require("react/jsx-runtime"),require("react"),require("clsx"),require("date-fns/locale"),require("react-datepicker"),require("@itcase/ui-core/hooks"),require("../../Button_cjs_CDr9zTdB.js"),require("@itcase/ui-core/utils"),require("../../primitives_cjs_ocTnUpml.js"),require("@rc-component/tooltip"),require("react-inlinesvg"),require("@itcase/ui-core/hoc"),require("../../Loader_cjs_nwF8h8Ku.js"),require("@itcase/common"),require("../../Input_cjs_D9PxC_lJ.js"),require("../../Label_cjs_DI2LmDIX.js"),require("../../default_cjs_BMbs2it-.js"),exports.DatePickerInput=e.DatePickerInput,exports.datePickerAppearance=e.datePickerAppearance,exports.datePickerConfig=e.datePickerConfig;
+"use strict";var e=require("../../DatePicker_cjs_Cd7wsJCG.js");require("react/jsx-runtime"),require("react"),require("clsx"),require("date-fns/locale"),require("react-datepicker"),require("@itcase/ui-core/hooks"),require("../../Button_cjs_CDr9zTdB.js"),require("@itcase/ui-core/utils"),require("../../primitives_cjs_ocTnUpml.js"),require("@rc-component/tooltip"),require("react-inlinesvg"),require("@itcase/ui-core/hoc"),require("../../Loader_cjs_nwF8h8Ku.js"),require("@itcase/common"),require("../../Input_cjs_D9PxC_lJ.js"),require("../../default_cjs_BMbs2it-.js"),exports.DatePickerInput=e.DatePickerInput,exports.datePickerAppearance=e.datePickerAppearance,exports.datePickerConfig=e.datePickerConfig;

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 i from"clsx";import{DateTime as t}from"luxon";import{DATE_PERIOD_INTERVALS as s}from"@itcase/common";import{useAppearanceConfig as p,useDevicePropsGenerator as o}from"@itcase/ui-core/hooks";import{mergeAppearanceKeys as c}from"@itcase/ui-core/utils";import{a as d,C as n}from"../ChipsGroup_es_CrKRN7eQ.js";import{D as l}from"../DatePicker_es_vJagTqXm.js";import"react-select";import"../primitives_es_BQqNcRQk.js";import{a as u}from"../SelectContainer_es_CXIvftMU.js";import"../Group_es_DIuSNHx3.js";import"date-fns/locale";import"react-datepicker";import"../Button_es_M2ryMLoI.js";import"../Loader_es_CwVQZ1L0.js";import"../Input_es_DabuPYuA.js";import"../Label_es_C4QnITZA.js";import"@rc-component/tooltip";import"../default_es_CaWUd9iO.js";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"}},m={appearance:h,setAppearance:e=>{m.appearance=e}};function S(h){const{appearance:S,className:z,dataTestId:P,dataTour:_,datePeriodIntervalsList:f=Object.values(s),datePeriodSelectFirstOptions:A,datePeriodSelectFirstPlaceholder:k,datePeriodSelectFirstValue:L,datePeriodSelectSecondOptions:y,datePeriodSelectSecondPlaceholder:M,datePeriodSelectSecondValue:I,datePeriodValueEnd:v,datePeriodValueStart:D,monthsShown:C,popperPlacement:w,selectsRange:b=!0,showWeekNumbers:g=!0,isDisabled:j,isSkeleton:x,onChangeDatePeriod:N,onChangeDatePeriodFirstSelect:F,onChangeDatePeriodSecondSelect:O,onKeyDown:V}=h,X=p(S,m,j),W=o(h,X),{fillClass:$,chipsAppearance:T,chipsAppearanceSize:G,chipsShape:H,datePickerAppearance:J,datePickerAppearanceSize:K,datePickerInputAppearance:R,datePickerInputAppearanceSize:B,datePickerInputFillHover:E,datePickerInputTextSize:q,selectAppearance:Q,selectAppearanceSize:U,selectShape:Y,shapeClass:Z,sizeClass:ee}=W,ae=r(e=>{const a=e.dateIntervalsList[0],r=e.dateIntervalsList[1];N?.(new Date(a),new Date(r))},[N]),re=r(e=>{const a=e.dateIntervalsList[0],r=e.dateIntervalsList[1];let i=null,s=null;return D&&(i=t.fromJSDate(new Date(D)).toISODate()),v&&(s=t.fromJSDate(new Date(v)).toISODate()),a===i&&r===s},[v,D]);return e("div",{className:i(z,"date-period",ee&&`date-period_size_${ee}`,x&&"skeleton"),"data-testid":P,"data-tour":_,children:[e("div",{className:i("date-period__wrapper",Z&&`shape_${Z}`,$&&`fill_${$}`,"cursor_type_pointer"),children:[a(d,{className:"date-period__choice",direction:"horizontal",children:f.map(e=>a(n,{appearance:c(T,G),label:e.label,shape:H,isActive:re(e),onClick:()=>ae(e)},e.value))}),a(l,{className:"date-period__datepicker",datePickerProps:{appearance:c(J,K),dateFormat:"dd/MM/yyyy",monthsShown:C,popperPlacement:w,selectsRange:b,showWeekNumbers:g,isClearable:!1,onKeyDown:V},endValue:v,inputProps:{appearance:c(R,B,"ghost"),className:`date-period__datepicker-input date-period__datepicker-input_size_${ee} `,fillHover:E,textSize:q,placeholder:"Выбрать период"},value:D,onChange:N})]}),A&&a(u,{appearance:c(Q,U),className:"date-period__select",width:"180px",minWidth:"180px",options:A,placeholder:k,shape:Y,value:L,isSearchable:!0,onChange:F}),y&&a(u,{appearance:c(Q,U),className:"date-period__select",width:"180px",minWidth:"180px",options:y,placeholder:M,shape:Y,value:I,isSearchable:!0,onChange:O})]})}export{S as DatePeriod,h as datePeriodAppearance,m as datePeriodConfig};
+import{jsxs as e,jsx as a}from"react/jsx-runtime";import{useCallback as r}from"react";import i from"clsx";import{DateTime as t}from"luxon";import{DATE_PERIOD_INTERVALS as s}from"@itcase/common";import{useAppearanceConfig as p,useDevicePropsGenerator as c}from"@itcase/ui-core/hooks";import{mergeAppearanceKeys as o}from"@itcase/ui-core/utils";import{a as d,C as n}from"../ChipsGroup_es_CrKRN7eQ.js";import{D as l}from"../DatePicker_es_BhrZj2OP.js";import"react-select";import"../primitives_es_BQqNcRQk.js";import{a as u}from"../SelectContainer_es_CXIvftMU.js";import"../Group_es_DIuSNHx3.js";import"date-fns/locale";import"react-datepicker";import"../Button_es_M2ryMLoI.js";import"../Loader_es_CwVQZ1L0.js";import"../Input_es_DabuPYuA.js";import"../default_es_CaWUd9iO.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"}},m={appearance:h,setAppearance:e=>{m.appearance=e}};function S(h){const{appearance:S,className:z,dataTestId:P,dataTour:_,datePeriodIntervalsList:f=Object.values(s),datePeriodSelectFirstOptions:A,datePeriodSelectFirstPlaceholder:k,datePeriodSelectFirstValue:L,datePeriodSelectSecondOptions:y,datePeriodSelectSecondPlaceholder:M,datePeriodSelectSecondValue:I,datePeriodValueEnd:v,datePeriodValueStart:D,monthsShown:C,popperPlacement:w,selectsRange:g=!0,showWeekNumbers:b=!0,isDisabled:j,isSkeleton:x,onChangeDatePeriod:N,onChangeDatePeriodFirstSelect:F,onChangeDatePeriodSecondSelect:O,onKeyDown:V}=h,X=p(S,m,j),W=c(h,X),{fillClass:$,chipsAppearance:T,chipsAppearanceSize:G,chipsShape:H,datePickerAppearance:J,datePickerAppearanceSize:K,datePickerInputAppearance:R,datePickerInputAppearanceSize:B,datePickerInputFillHover:E,datePickerInputTextSize:q,selectAppearance:Q,selectAppearanceSize:U,selectShape:Y,shapeClass:Z,sizeClass:ee}=W,ae=r(e=>{const a=e.dateIntervalsList[0],r=e.dateIntervalsList[1];N?.(new Date(a),new Date(r))},[N]),re=r(e=>{const a=e.dateIntervalsList[0],r=e.dateIntervalsList[1];let i=null,s=null;return D&&(i=t.fromJSDate(new Date(D)).toISODate()),v&&(s=t.fromJSDate(new Date(v)).toISODate()),a===i&&r===s},[v,D]);return e("div",{className:i(z,"date-period",ee&&`date-period_size_${ee}`,x&&"skeleton"),"data-testid":P,"data-tour":_,children:[e("div",{className:i("date-period__wrapper",Z&&`shape_${Z}`,$&&`fill_${$}`,"cursor_type_pointer"),children:[a(d,{className:"date-period__choice",direction:"horizontal",children:f.map(e=>a(n,{appearance:o(T,G),label:e.label,shape:H,isActive:re(e),onClick:()=>ae(e)},e.value))}),a(l,{className:"date-period__datepicker",datePickerProps:{appearance:o(J,K),dateFormat:"dd/MM/yyyy",monthsShown:C,popperPlacement:w,selectsRange:g,showWeekNumbers:b,isClearable:!1,onKeyDown:V},endValue:v,inputProps:{appearance:o(R,B,"ghost"),className:`date-period__datepicker-input date-period__datepicker-input_size_${ee} `,fillHover:E,textSize:q,placeholder:"Выбрать период"},value:D,onChange:N})]}),A&&a(u,{appearance:o(Q,U),className:"date-period__select",width:"180px",minWidth:"180px",options:A,placeholder:k,shape:Y,value:L,isSearchable:!0,onChange:F}),y&&a(u,{appearance:o(Q,U),className:"date-period__select",width:"180px",minWidth:"180px",options:y,placeholder:M,shape:Y,value:I,isSearchable:!0,onChange:O})]})}export{S as DatePeriod,h as datePeriodAppearance,m as datePeriodConfig};

package/dist/components/DatePicker.js

@@ -1 +1 @@
-export{D as DatePickerInput,d as datePickerAppearance,a as datePickerConfig}from"../DatePicker_es_vJagTqXm.js";import"react/jsx-runtime";import"react";import"clsx";import"date-fns/locale";import"react-datepicker";import"@itcase/ui-core/hooks";import"../Button_es_M2ryMLoI.js";import"@itcase/ui-core/utils";import"../primitives_es_BQqNcRQk.js";import"@rc-component/tooltip";import"react-inlinesvg";import"@itcase/ui-core/hoc";import"../Loader_es_CwVQZ1L0.js";import"@itcase/common";import"../Input_es_DabuPYuA.js";import"../Label_es_C4QnITZA.js";import"../default_es_CaWUd9iO.js";
+export{D as DatePickerInput,d as datePickerAppearance,a as datePickerConfig}from"../DatePicker_es_BhrZj2OP.js";import"react/jsx-runtime";import"react";import"clsx";import"date-fns/locale";import"react-datepicker";import"@itcase/ui-core/hooks";import"../Button_es_M2ryMLoI.js";import"@itcase/ui-core/utils";import"../primitives_es_BQqNcRQk.js";import"@rc-component/tooltip";import"react-inlinesvg";import"@itcase/ui-core/hoc";import"../Loader_es_CwVQZ1L0.js";import"@itcase/common";import"../Input_es_DabuPYuA.js";import"../default_es_CaWUd9iO.js";

package/dist/css/styles/bundles.css

@@ -61264,8 +61264,12 @@ h2.react-datepicker__current-month {
     right: 12px;
     transform: translateY(-50%);
   }
-  &__clear-label {
+  &__clear-button {
+    position: absolute;
+    top: 50%;
+    right: 12px;
     width: auto;
+    transform: translateY(-50%);
   }
   &__input-icon.icon {
     background: #fff;
@@ -61340,6 +61344,12 @@ h2.react-datepicker__current-month {
       &__input-time-container {
         grid-row-start: 2;
         grid-column-start: span 2;
+        &:not(:last-child) {
+          display: none;
+        }
+        &:last-child {
+          grid-column: 1 / -1;
+        }
       }
     }
   }
@@ -61347,12 +61357,14 @@ h2.react-datepicker__current-month {
 :root {
   --date-picker-padding: 24px 12px;
   --date-picker-fill: var(--color-surface-fill-primary);
+  --date-picker-background: var(--date-picker-fill);
   --date-picker-box-shadow: 0px 4px 24px 0px rgb(0, 0, 0, 0.2);
   --date-picker-border-radius: 12px;
   --date-picker-border: solid 1px var(--color-surface-fill-tertiary);
 
   --date-picker-input-container-padding: 9px 15px;
   --date-picker-input-border-radius: 6px;
+  --date-picker-input-min-width: 70px;
 
   --date-picker-selected-weight: 400;
   --date-picker-week-width: 40px;

package/dist/stories/DatePickerOverview.mdx

@@ -8,5 +8,5 @@ import * as DatePickerStories from '../stories/DatePicker.stories'
 
 `DatePicker` — это календарь, который используется для выбора даты, либо диапазона дат.
 
-<Story of={DatePickerStories.Date} />
+<Story of={DatePickerStories.Default} />
 

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

@@ -6,14 +6,13 @@ import type { AppearancePartialRecord, AppearanceRecord } from '@itcase/types-ui
 import { ButtonProps } from 'src/components/Button/Button.interface';
 import { IconProps } from 'src/components/Icon/Icon.interface';
 import { InputProps } from 'src/components/Input/Input.interface';
-import { LabelProps } from 'src/components/Label/Label.interface';
 import { TextProps } from 'src/components/Text/Text.interface';
 type DatePickerInputAppearanceProps = {
     appearance?: CompositeAppearanceKeys;
-    clearLabel?: LabelProps['label'];
-    clearLabelTextColor?: LabelProps['labelTextColor'];
-    clearLabelTextColorHover?: LabelProps['labelTextColorHover'];
-    clearLabelTextSize?: TextSizeProps;
+    clearButton?: ButtonProps['label'];
+    clearButtonAppearance?: ButtonProps['appearance'];
+    clearIcon?: IconProps['SvgImage'];
+    clearIconAppearance?: IconProps['appearance'];
     daySize?: ButtonProps['size'];
     dayTextColor?: ButtonProps['labelTextColor'];
     dayTextShape?: ButtonProps['shape'];
@@ -40,32 +39,12 @@ type DatePickerInputAppearanceProps = {
     yearTextSize?: TextProps['size'];
     yearTextWeight?: TextProps['textWeight'];
 };
-type DatePickerInputProps = DatePickerInputAppearanceProps & Omit<DatePickerProps, 'onChange'> & {
-    className?: string;
-    dataTestId?: string;
-    dataTour?: string;
-    datePickerProps?: DatePickerInputAppearanceProps & Omit<DatePickerProps, 'selectsRange'> & {
-        selectsRange?: boolean;
-    };
-    endValue?: string | Date | DateIso;
-    onChange?: (dateStart: Date | null, dateEnd: Date | null) => void;
-    popperPlacement?: ReactNode;
-    value?: string | Date | DateIso;
-};
 type DatePickerCustomInput = {
+    clearButton?: ButtonProps['label'];
+    clearButtonAppearance?: ButtonProps['appearance'];
     clearIcon?: IconProps['SvgImage'];
-    clearIconFill?: IconProps['fill'];
-    clearIconFillHover?: IconProps['fillHover'];
-    clearIconFillSize?: IconProps['fillSize'];
-    clearIconItemFill?: IconProps['iconFill'];
-    clearIconItemFillHover?: IconProps['iconFillHover'];
-    clearIconShape?: IconProps['shape'];
-    clearIconSize?: IconProps['size'];
+    clearIconAppearance?: IconProps['appearance'];
     clearIconSrc?: IconProps['imageSrc'];
-    clearLabel?: LabelProps['label'];
-    clearLabelTextColor?: LabelProps['labelTextColor'];
-    clearLabelTextColorHover?: LabelProps['labelTextColorHover'];
-    clearLabelTextSize?: LabelProps['labelTextSize'];
     datepickerRef?: RefObject<DatePicker | null>;
     inputIcon?: IconProps['SvgImage'];
     inputIconFill?: IconProps['fill'];
@@ -80,6 +59,21 @@ type DatePickerCustomInput = {
     labelTextSize?: TextSizeProps;
     value?: string;
 };
+type DatePickerInputClearProps = Pick<DatePickerCustomInput, 'clearButton' | 'clearButtonAppearance' | 'clearIcon' | 'clearIconAppearance' | 'clearIconSrc'>;
+type DatePickerInputProps = DatePickerInputAppearanceProps & Omit<DatePickerProps, 'onChange'> & {
+    className?: string;
+    dataTestId?: string;
+    dataTour?: string;
+    datePickerProps?: DatePickerInputAppearanceProps & Omit<DatePickerProps, 'selectsRange'> & {
+        isClearable?: boolean;
+        selectsRange?: boolean;
+    };
+    endValue?: string | Date | DateIso;
+    inputProps?: DatePickerInputClearProps & InputProps;
+    onChange?: (dateStart: Date | null, dateEnd: Date | null) => void;
+    popperPlacement?: ReactNode;
+    value?: string | Date | DateIso;
+};
 type DatePickerInputIcon = {
     inputIcon?: IconProps['SvgImage'];
     inputIconFill?: IconProps['fill'];

package/dist/types/components/DatePicker/DatePicker.js

@@ -7,7 +7,6 @@ import { useAppearanceConfig, useDevicePropsGenerator, useStyles, } from '@itcas
 import { Button } from 'src/components/Button';
 import { Icon } from 'src/components/Icon';
 import { Input } from 'src/components/Input';
-import { Label } from 'src/components/Label';
 import { Text } from 'src/components/Text';
 import { datePickerAppearance } from './DatePicker.appearance';
 import { getWeekRange } from './DatePicker.utils';
@@ -90,16 +89,16 @@ const DatePickerCustomInput = React.forwardRef((props, ref) => {
         }
         return '';
     }, [value]);
-    return (_jsxs(React.Fragment, { children: [_jsx(Input, { ...props, ...inputProps, className: clsx(inputProps?.className, 'datepicker__input'), ref: ref, autocomplete: "off", value: multipleValue }), 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 }), inputIcon && _jsx(DatePickerInputIcon, { ...inputProps }), isClearable && (_jsx(DatePickerClearButton, { datepickerRef: props.datepickerRef, ...inputProps }))] }));
 });
 function DatePickerClearButton(props) {
-    const { clearIcon, clearIconFill, clearIconFillHover, clearIconFillSize, clearIconItemFill, clearIconItemFillHover, clearIconShape, clearIconSize, clearIconSrc, clearLabel, clearLabelTextColor, clearLabelTextColorHover, clearLabelTextSize, datepickerRef, } = props;
+    const { clearButton, clearButtonAppearance, clearIcon, clearIconAppearance, clearIconSrc, 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 }))) }));
+    return (_jsx(React.Fragment, { children: clearButton ? (_jsx(Button, { appearance: clearButtonAppearance, className: clsx('react-datepicker__clear-button', 'cursor_type_pointer'), label: clearButton, onClick: onClick })) : ((clearIcon || clearIconSrc) && (_jsx(Icon, { appearance: clearIconAppearance, className: clsx('react-datepicker__clear-icon', 'cursor_type_pointer'), imageSrc: clearIconSrc, SvgImage: clearIcon, onClick: onClick }))) }));
 }
 function DatePickerInputIcon(props) {
     const { inputIcon, inputIconFill, inputIconFillHover, inputIconFillSize, inputIconItemFill, inputIconShape, inputIconSize, inputIconSrc, onClick, } = props;

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

@@ -5,6 +5,14 @@ declare const meta: {
     component: typeof DatePickerInput;
     args: {
         width: "220px";
+        datePickerProps: {
+            appearance: "surfacePrimary sizeM solid rounded";
+            dateFormat: string;
+            placeholderText: string;
+        };
+        inputProps: {
+            appearance: "defaultPrimary sizeM solid rounded";
+        };
     };
     parameters: {
         layout: string;
@@ -12,7 +20,8 @@ declare const meta: {
 };
 export default meta;
 type Story = StoryObj<typeof meta>;
-export declare const Date: Story;
+export declare const Default: Story;
+export declare const WithInitialDate: Story;
 export declare const DateTime: Story;
 export declare const DateRange: Story;
 export declare const DateWeek: Story;

package/dist/types/components/DatePicker/stories/DatePicker.stories.js

@@ -1,82 +1,80 @@
-import { jsx as _jsx } from "react/jsx-runtime";
 import { DatePickerInput } from '../DatePicker';
+import { createDatePickerStory } from './DatePickerStory';
 const meta = {
     title: 'Molecules / DatePicker',
     component: DatePickerInput,
     args: {
         width: '220px',
+        datePickerProps: {
+            appearance: 'surfacePrimary sizeM solid rounded',
+            dateFormat: 'dd.MM.yyyy',
+            placeholderText: 'Выберите дату',
+        },
+        inputProps: {
+            appearance: 'defaultPrimary sizeM solid rounded',
+        },
     },
     parameters: {
         layout: 'centered',
     },
 };
 export default meta;
-export const Date = {
+const DatePickerStory = createDatePickerStory(meta.args);
+export const Default = {
+    render: DatePickerStory,
+};
+export const WithInitialDate = {
     args: {
         datePickerProps: {
-            appearance: 'surfacePrimary sizeM solid rounded',
-        },
-        inputProps: {
-            appearance: 'defaultPrimary sizeM solid rounded',
+            placeholderText: 'Дата с начальным значением',
         },
+        value: '2025-06-15',
     },
-    render: (args) => {
-        return _jsx(DatePickerInput, { ...args });
-    },
+    render: DatePickerStory,
 };
 export const DateTime = {
     args: {
         datePickerProps: {
-            appearance: 'surfacePrimary sizeM solid rounded',
-            dateFormat: 'dd-MM-yyyy hh:mm',
+            dateFormat: 'dd.MM.yyyy HH:mm',
+            placeholderText: 'Дата и время',
             popperPlacement: 'bottom',
             showTimeSelect: true,
             timeCaption: 'Время',
-            timeFormat: 'p',
+            timeFormat: 'HH:mm',
             timeIntervals: 15,
         },
-        inputProps: {
-            appearance: 'defaultPrimary sizeM solid rounded',
-        },
-    },
-    render: (args) => {
-        return _jsx(DatePickerInput, { ...args });
+        value: '2025-06-15T14:30:00',
     },
+    render: DatePickerStory,
 };
 export const DateRange = {
     args: {
         width: '360px',
         datePickerProps: {
-            appearance: 'surfacePrimary sizeM solid rounded',
             monthsShown: 2,
-            placeholderText: 'Start – End (m/d/yyyy)',
+            placeholderText: 'Начало – конец',
             selectsRange: true,
         },
-        inputProps: {
-            appearance: 'defaultPrimary sizeM solid rounded',
-        },
-    },
-    render: (args) => {
-        return _jsx(DatePickerInput, { ...args });
+        endValue: '2025-06-20',
+        value: '2025-06-01',
     },
+    render: DatePickerStory,
 };
 export const DateWeek = {
     args: {
+        width: '360px',
         datePickerProps: {
-            appearance: 'surfacePrimary sizeM solid rounded',
             dateFormat: 'I неделя',
             monthsShown: 2,
+            placeholderText: 'Выберите неделю',
             readOnly: false,
             selectsRange: true,
             showWeekNumbers: true,
             showWeekPicker: false,
             isClearable: false,
         },
-        inputProps: {
-            appearance: 'defaultPrimary sizeM solid rounded',
-        },
-    },
-    render: (args) => {
-        return _jsx(DatePickerInput, { ...args });
+        endValue: '2025-06-15',
+        value: '2025-06-09',
     },
+    render: DatePickerStory,
 };

package/dist/types/components/DatePicker/stories/DatePickerClear.stories.d.ts

@@ -5,6 +5,14 @@ declare const meta: {
     component: typeof DatePickerInput;
     args: {
         width: "220px";
+        datePickerProps: {
+            appearance: "surfacePrimary sizeM solid rounded";
+            dateFormat: string;
+            placeholderText: string;
+            readOnly: false;
+            isClearable: true;
+            onKeyDown: (event: import("react").KeyboardEvent<HTMLElement>) => void;
+        };
     };
     parameters: {
         layout: string;
@@ -13,4 +21,4 @@ declare const meta: {
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const ClearIcon: Story;
-export declare const ClearLabel: Story;
+export declare const ClearButton: Story;

package/dist/types/components/DatePicker/stories/DatePickerClear.stories.js

@@ -1,50 +1,46 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { icons24 } from '@itcase/icons-default';
 import { DatePickerInput } from '../DatePicker';
+import { createDatePickerStory } from './DatePickerStory';
 const meta = {
     title: 'Molecules / DatePicker / Clear',
     component: DatePickerInput,
     args: {
         width: '220px',
+        datePickerProps: {
+            appearance: 'surfacePrimary sizeM solid rounded',
+            dateFormat: 'dd.MM.yyyy',
+            placeholderText: 'Выберите дату',
+            readOnly: false,
+            isClearable: true,
+            onKeyDown: (event) => event.preventDefault(),
+        },
     },
     parameters: {
         layout: 'centered',
     },
 };
 export default meta;
+const DatePickerStory = createDatePickerStory(meta.args);
 export const ClearIcon = {
     args: {
-        datePickerProps: {
-            appearance: 'surfacePrimary sizeM solid rounded',
-            readOnly: false,
-            isClearable: true,
-            onKeyDown: (e) => {
-                e.preventDefault();
-            },
-        },
         inputProps: {
             appearance: 'defaultPrimary sizeM solid rounded',
+            clearIcon: icons24.Action.Clear,
+            clearIconAppearance: 'surfaceTertiary size24_24 ghost circular',
         },
+        value: '2025-06-15',
     },
-    render: (args) => {
-        return _jsx(DatePickerInput, { ...args });
-    },
+    render: DatePickerStory,
 };
-export const ClearLabel = {
+export const ClearButton = {
     args: {
         width: '360px',
-        datePickerProps: {
-            appearance: 'surfacePrimary sizeM solid rounded',
-            readOnly: false,
-            isClearable: true,
-            onKeyDown: (e) => {
-                e.preventDefault();
-            },
-        },
         inputProps: {
             appearance: 'defaultPrimary sizeM solid rounded',
+            clearButton: 'Очистить',
+            clearButtonAppearance: 'surfaceSecondary sizeM solid rounded',
         },
+        value: '2025-06-15',
     },
-    render: (args) => {
-        return _jsx(DatePickerInput, { ...args });
-    },
+    render: DatePickerStory,
 };

package/dist/types/components/DatePicker/stories/DatePickerSize.stories.d.ts

@@ -5,6 +5,14 @@ declare const meta: {
     component: typeof DatePickerInput;
     args: {
         width: "220px";
+        datePickerProps: {
+            appearance: "surfacePrimary sizeM solid rounded";
+            dateFormat: string;
+            placeholderText: string;
+        };
+        inputProps: {
+            appearance: "defaultPrimary sizeM solid rounded";
+        };
     };
     parameters: {
         layout: string;

package/dist/types/components/DatePicker/stories/DatePickerSize.stories.js

@@ -1,52 +1,41 @@
-import { jsx as _jsx } from "react/jsx-runtime";
 import { DatePickerInput } from '../DatePicker';
+import { createDatePickerStory } from './DatePickerStory';
 const meta = {
     title: 'Molecules / DatePicker / Size',
     component: DatePickerInput,
     args: {
         width: '220px',
+        datePickerProps: {
+            appearance: 'surfacePrimary sizeM solid rounded',
+            dateFormat: 'dd.MM.yyyy',
+            placeholderText: 'Выберите дату',
+        },
+        inputProps: {
+            appearance: 'defaultPrimary sizeM solid rounded',
+        },
     },
     parameters: {
         layout: 'centered',
     },
 };
 export default meta;
+const DatePickerStory = createDatePickerStory(meta.args);
 export const SizeL = {
     args: {
-        datePickerProps: {
-            appearance: 'surfacePrimary sizeM solid rounded',
-        },
         inputProps: {
             appearance: 'defaultPrimary sizeL solid rounded',
         },
     },
-    render: (args) => {
-        return _jsx(DatePickerInput, { ...args });
-    },
+    render: DatePickerStory,
 };
 export const SizeM = {
-    args: {
-        datePickerProps: {
-            appearance: 'surfacePrimary sizeM solid rounded',
-        },
-        inputProps: {
-            appearance: 'defaultPrimary sizeM solid rounded',
-        },
-    },
-    render: (args) => {
-        return _jsx(DatePickerInput, { ...args });
-    },
+    render: DatePickerStory,
 };
 export const SizeS = {
     args: {
-        datePickerProps: {
-            appearance: 'surfacePrimary sizeM solid rounded',
-        },
         inputProps: {
             appearance: 'defaultPrimary sizeS solid rounded',
         },
     },
-    render: (args) => {
-        return _jsx(DatePickerInput, { ...args });
-    },
+    render: DatePickerStory,
 };

package/dist/types/components/DatePicker/stories/DatePickerStory.d.ts

@@ -0,0 +1,2 @@
+import type { DatePickerInputProps } from '../DatePicker.interface';
+export declare function createDatePickerStory(defaultArgs?: Partial<DatePickerInputProps>): (args: DatePickerInputProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/DatePicker/stories/DatePickerStory.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from 'react';
+import { DatePickerInput } from '../DatePicker';
+export function createDatePickerStory(defaultArgs = {}) {
+    return function DatePickerStory(args) {
+        const [dates, setDates] = useState(() => ({
+            end: args.endValue ? new Date(args.endValue) : null,
+            start: args.value ? new Date(args.value) : null,
+        }));
+        return (_jsx(DatePickerInput, { ...defaultArgs, ...args, datePickerProps: {
+                ...defaultArgs.datePickerProps,
+                ...args.datePickerProps,
+            }, endValue: dates.end?.toISOString(), inputProps: {
+                ...defaultArgs.inputProps,
+                ...args.inputProps,
+            }, value: dates.start?.toISOString(), onChange: (start, end) => setDates({ end, start }) }));
+    };
+}

package/dist/types/components/DatePicker/stories/DatePickerStyle.stories.d.ts

@@ -5,6 +5,14 @@ declare const meta: {
     component: typeof DatePickerInput;
     args: {
         width: "220px";
+        datePickerProps: {
+            appearance: "surfacePrimary sizeM solid rounded";
+            dateFormat: string;
+            placeholderText: string;
+        };
+        inputProps: {
+            appearance: "defaultPrimary sizeM solid rounded";
+        };
     };
     parameters: {
         layout: string;

package/dist/types/components/DatePicker/stories/DatePickerStyle.stories.js

@@ -1,65 +1,49 @@
-import { jsx as _jsx } from "react/jsx-runtime";
 import { DatePickerInput } from '../DatePicker';
+import { createDatePickerStory } from './DatePickerStory';
 const meta = {
     title: 'Molecules / DatePicker / Style',
     component: DatePickerInput,
     args: {
         width: '220px',
-    },
-    parameters: {
-        layout: 'centered',
-    },
-};
-export default meta;
-export const Solid = {
-    args: {
         datePickerProps: {
             appearance: 'surfacePrimary sizeM solid rounded',
+            dateFormat: 'dd.MM.yyyy',
+            placeholderText: 'Выберите дату',
         },
         inputProps: {
             appearance: 'defaultPrimary sizeM solid rounded',
         },
     },
-    render: (args) => {
-        return _jsx(DatePickerInput, { ...args });
+    parameters: {
+        layout: 'centered',
     },
 };
+export default meta;
+const DatePickerStory = createDatePickerStory(meta.args);
+export const Solid = {
+    render: DatePickerStory,
+};
 export const Outlined = {
     args: {
-        datePickerProps: {
-            appearance: 'surfacePrimary sizeM solid rounded',
-        },
         inputProps: {
             appearance: 'defaultPrimary sizeM outlined rounded',
         },
     },
-    render: (args) => {
-        return _jsx(DatePickerInput, { ...args });
-    },
+    render: DatePickerStory,
 };
 export const Ghost = {
     args: {
-        datePickerProps: {
-            appearance: 'surfacePrimary sizeM solid rounded',
-        },
         inputProps: {
             appearance: 'defaultPrimary sizeM ghost rounded',
         },
     },
-    render: (args) => {
-        return _jsx(DatePickerInput, { ...args });
-    },
+    render: DatePickerStory,
 };
 export const Full = {
     args: {
-        datePickerProps: {
-            appearance: 'surfacePrimary sizeM solid rounded',
-        },
         inputProps: {
             appearance: 'defaultPrimary sizeM full rounded',
         },
     },
-    render: (args) => {
-        return _jsx(DatePickerInput, { ...args });
-    },
+    render: DatePickerStory,
 };

package/dist/types/components/DatePicker/stories/DatePickerWithButton.stories.d.ts

@@ -5,6 +5,16 @@ declare const meta: {
     component: typeof DatePickerInput;
     args: {
         width: "220px";
+        datePickerProps: {
+            appearance: "surfacePrimary sizeM solid rounded";
+            customTimeInput: import("react/jsx-runtime").JSX.Element;
+            dateFormat: string;
+            placeholderText: string;
+            showTimeInput: true;
+        };
+        inputProps: {
+            appearance: "defaultPrimary sizeM solid rounded";
+        };
     };
     parameters: {
         layout: string;
@@ -12,6 +22,7 @@ declare const meta: {
 };
 export default meta;
 type Story = StoryObj<typeof meta>;
-export declare const Date: Story;
+export declare const Default: Story;
+export declare const WithInitialDate: Story;
 export declare const DateTime: Story;
 export declare const DateRange: Story;

package/dist/types/components/DatePicker/stories/DatePickerWithButton.stories.js

@@ -1,68 +1,66 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Button } from '../../Button';
 import { DatePickerInput } from '../DatePicker';
+import { createDatePickerStory } from './DatePickerStory';
 const meta = {
     title: 'Molecules / DatePicker / With Button',
     component: DatePickerInput,
     args: {
         width: '220px',
-    },
-    parameters: {
-        layout: 'centered',
-    },
-};
-export default meta;
-export const Date = {
-    args: {
         datePickerProps: {
             appearance: 'surfacePrimary sizeM solid rounded',
             customTimeInput: (_jsx(Button, { appearance: "accentPrimary sizeL solid rounded", width: "fill", label: "OK" })),
-            dateFormat: 'dd-MM-yyyy',
+            dateFormat: 'dd.MM.yyyy',
+            placeholderText: 'Выберите дату',
             showTimeInput: true,
         },
         inputProps: {
             appearance: 'defaultPrimary sizeM solid rounded',
         },
     },
-    render: (args) => {
-        return _jsx(DatePickerInput, { ...args });
+    parameters: {
+        layout: 'centered',
+    },
+};
+export default meta;
+const DatePickerStory = createDatePickerStory(meta.args);
+export const Default = {
+    render: DatePickerStory,
+};
+export const WithInitialDate = {
+    args: {
+        datePickerProps: {
+            placeholderText: 'Дата с начальным значением',
+        },
+        value: '2025-06-15',
     },
+    render: DatePickerStory,
 };
 export const DateTime = {
     args: {
         datePickerProps: {
-            appearance: 'surfacePrimary sizeM solid rounded',
-            customTimeInput: (_jsx(Button, { appearance: "accentPrimary sizeL solid rounded", width: "fill", label: "OK", shape: "rounded" })),
-            dateFormat: 'dd-MM-yyyy hh:mm',
-            showTimeInput: true,
+            dateFormat: 'dd.MM.yyyy HH:mm',
+            placeholderText: 'Дата и время',
+            popperPlacement: 'bottom',
             showTimeSelect: true,
             timeCaption: 'Время',
-            timeFormat: 'p',
+            timeFormat: 'HH:mm',
             timeIntervals: 15,
         },
-        inputProps: {
-            appearance: 'defaultPrimary sizeM solid rounded',
-        },
-    },
-    render: (args) => {
-        return _jsx(DatePickerInput, { ...args });
+        value: '2025-06-15T14:30:00',
     },
+    render: DatePickerStory,
 };
 export const DateRange = {
     args: {
+        width: '360px',
         datePickerProps: {
-            appearance: 'surfacePrimary sizeM solid rounded',
-            customTimeInput: (_jsx(Button, { appearance: "accentPrimary sizeL solid rounded", width: "fill", label: "OK", shape: "rounded" })),
             monthsShown: 2,
-            placeholderText: 'Start – End (m/d/yyyy)',
+            placeholderText: 'Начало – конец',
             selectsRange: true,
-            showTimeInput: true,
         },
-        inputProps: {
-            appearance: 'defaultPrimary sizeM solid rounded',
-        },
-    },
-    render: (args) => {
-        return _jsx(DatePickerInput, { ...args });
+        endValue: '2025-06-20',
+        value: '2025-06-01',
     },
+    render: DatePickerStory,
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itcase/ui-web",
-  "version": "1.9.111",
+  "version": "1.9.112",
   "description": "UI components",
   "keywords": "",
   "license": "MIT",
@@ -114,5 +114,5 @@
     "storybook": "^10.4.0",
     "typescript": "^6.0.3"
   },
-  "gitHead": "90a1c5a405c73d48360ee64d89e23812d6caacfe"
+  "gitHead": "985b7cd49b2f7db7233d288d4561b5af826037f0"
 }

package/dist/DatePicker_cjs_BhZXIBZm.js

@@ -1 +0,0 @@
-"use strict";var e=require("react/jsx-runtime"),t=require("react"),r=require("clsx"),a=require("date-fns/locale"),i=require("react-datepicker"),o=require("@itcase/ui-core/hooks"),l=require("./Button_cjs_CDr9zTdB.js"),c=require("./primitives_cjs_ocTnUpml.js"),n=require("./Input_cjs_D9PxC_lJ.js"),s=require("./Label_cjs_DI2LmDIX.js"),p=require("./default_cjs_BMbs2it-.js");const u={surfacePrimary:{dayTextColor:"surfaceTextPrimary",dayTextShape:"rounded",iconFillHover:"surfaceSecondary",iconItemFill:"surfaceItemPrimary",iconShape:"circular",monthTextColor:"surfaceTextPrimary",monthTextWeight:"400",yearTextColor:"surfaceTextPrimary",yearTextWeight:"400"},...{sizeL:{size:"l",daySize:"xs",dayTextSize:"m",iconFillSize:"24",iconLeft:p.icons14.Arrow.ChevronLeft,iconRight:p.icons14.Arrow.ChevronRight},sizeM:{size:"m",daySize:"xxl",dayTextSize:"m",iconFillSize:"24",iconLeft:p.icons14.Arrow.ChevronLeft,iconRight:p.icons14.Arrow.ChevronRight,iconSize:"14",monthTextSize:"m",yearTextSize:"m"},sizeS:{size:"s",daySize:"xs",dayTextSize:"m",iconFillSize:"24",iconLeft:p.icons14.Arrow.ChevronLeft,iconRight:p.icons14.Arrow.ChevronRight}},solid:{inputProps:{borderColor:"none"}},outlined:{inputProps:{fill:"none"}},full:{},ghost:{inputProps:{fill:"none",borderColor:"none"}}},d=e=>{const t=e.getDay()||7,r=new Date(e);r.setDate(e.getDate()-(t-1));const a=new Date(r);return a.setDate(r.getDate()+6),{mondayDate:r,sundayDate:a}},m={appearance:u,setAppearance:e=>{m.appearance=e}};const x=t.forwardRef((a,i)=>{const{inputIcon:o,inputProps:l,value:c,isClearable:s}=a,p=t.useMemo(()=>{if(c){const e=c.split(" - ");return e[0]===e[1]?e[0]:c}return""},[c]);return e.jsxs(t.Fragment,{children:[e.jsx(n.Input,{...a,...l,className:r(l?.className,"datepicker__input"),ref:i,autocomplete:"off",value:p}),o&&e.jsx(S,{...l}),s&&e.jsx(h,{...l})]})});function h(a){const{clearIcon:i,clearIconFill:o,clearIconFillHover:l,clearIconFillSize:n,clearIconItemFill:p,clearIconItemFillHover:u,clearIconShape:d,clearIconSize:m,clearIconSrc:x,clearLabel:h,clearLabelTextColor:S,clearLabelTextColorHover:C,clearLabelTextSize:f,datepickerRef:y}=a,_=t.useCallback(e=>{y?.current?.onClearClick(e),y?.current?.handleFocus(e)},[]);return e.jsx(t.Fragment,{children:h?e.jsx(s.Label,{className:r("react-datepicker__clear-label","cursor_type_pointer"),label:h,labelTextColor:S,labelTextColorHover:C,labelTextSize:f,onClick:_}):(i||x)&&e.jsx(c.Icon,{className:r("react-datepicker__clear-icon","cursor_type_pointer"),size:m,fill:o,fillHover:l,fillSize:n,iconFill:p,iconFillHover:u,imageSrc:x,shape:d,SvgImage:i,onClick:_})})}function S(t){const{inputIcon:a,inputIconFill:i,inputIconFillHover:o,inputIconFillSize:l,inputIconItemFill:n,inputIconShape:s,inputIconSize:p,inputIconSrc:u,onClick:d}=t;return e.jsx(c.Icon,{className:r("react-datepicker__input-icon","cursor_type_pointer"),size:p,fill:i,fillHover:o,fillSize:l,iconFill:n,imageSrc:u,shape:s,SvgImage:a,onClick:()=>d&&d()})}exports.DatePickerInput=function(n){const{className:s,dataTestId:p,dataTour:u,datePickerProps:h={},endValue:S,inputProps:C={},value:f,onChange:y}=n,{appearance:_,customTimeInput:k,disablePastDays:g,monthsShown:z,selectsRange:I,showWeekNumbers:v,showWeekPicker:T}=h,b=o.useAppearanceConfig(_,m),j=o.useDevicePropsGenerator(h,b),{daySize:F,dayTextColor:D,dayTextShape:P,dayTextSize:w,iconFill:L,iconFillHover:N,iconFillSize:R,iconItemFill:H,iconLeft:q,iconRight:A,iconShape:W,monthTextColor:M,monthTextSize:$,monthTextWeight:B,popper:O,popperPlacement:U,sizeClass:G,widthClass:V,yearTextColor:E,yearTextSize:J,yearTextWeight:K,isClearable:Q}=j,X=t.useRef(null),[Y,Z]=t.useMemo(()=>{let e,t;return f&&(e="string"==typeof f?new Date(f):f),S&&(t="string"==typeof S?new Date(S):S),[e,t]},[f,S]),ee=t.useCallback(e=>{const t=Array.isArray(e)?e:[e],[r,a]=t;if(r&&T){const{mondayDate:e,sundayDate:t}=d(r);y?.(e,t)}else y?.(r,a)},[T,y]),te=t.useCallback(e=>{const{mondayDate:t,sundayDate:r}=d(e);y?.(t,r)},[y]),re=t.useCallback((t,r)=>e.jsx(l.Button,{className:"react-datepicker__day-button",size:F,label:r.getDate().toString(),labelTextColor:D,labelTextSize:w,shape:P}),[F,D,P,w]),ae=t.useCallback(({decreaseMonth:t,increaseMonth:r,monthDate:a})=>e.jsxs("div",{className:"react-datepicker__header--div",children:[q&&e.jsx(c.Icon,{className:"react-datepicker__icon",fill:L,fillHover:N,fillSize:R,iconFill:H,shape:W,SvgImage:q,onClick:t}),e.jsxs("div",{className:"react-datepicker__data",children:[e.jsx(c.Text,{className:"react-datepicker__month",size:$,textColor:M,textWeight:B,children:a.toLocaleString("ru-RU",{month:"long"})}),e.jsx(c.Text,{className:"react-datepicker__year",size:J,textColor:E,textWeight:K,children:a.toLocaleString("ru-RU",{year:"numeric"})})]}),A&&e.jsx(c.Icon,{className:"react-datepicker__icon",fill:L,fillHover:N,fillSize:R,iconFill:H,shape:W,SvgImage:A,onClick:r})]}),[L,N,R,H,q,A,W,M,$,B,E,J,K]),{styles:ie}=o.useStyles(n);return e.jsx("div",{className:r(s,"datepicker",z&&"datepicker_multiple-months",k&&"datepicker_button",G&&`datepicker_size_${G}`,V&&`datepicker_width_${V}`),"data-testid":p,"data-tour":u,style:ie,children:e.jsx(i,{ref:X,...h,minDate:g?new Date:void 0,customInput:e.jsx(x,{datepickerRef:X,inputProps:C,isClearable:Q}),endDate:I?Z:void 0,locale:a.ru,outsideClickIgnoreClass:"react-datepicker-popper",popperClassName:O&&`react-datepicker-popper-${O}`,popperPlacement:U,preventOpenOnFocus:!0,renderCustomHeader:ae,renderDayContents:re,selected:Y,startDate:Y,isClearable:!1,onChange:ee,onWeekSelect:v?te:void 0})})},exports.datePickerAppearance=u,exports.datePickerConfig=m;

package/dist/DatePicker_es_vJagTqXm.js

@@ -1 +0,0 @@
-import{jsxs as e,jsx as t}from"react/jsx-runtime";import r,{useMemo as a,useCallback as i,useRef as o}from"react";import l from"clsx";import{ru as n}from"date-fns/locale";import c from"react-datepicker";import{useAppearanceConfig as s,useDevicePropsGenerator as p,useStyles as m}from"@itcase/ui-core/hooks";import{B as d}from"./Button_es_M2ryMLoI.js";import{I as u,T as h}from"./primitives_es_BQqNcRQk.js";import{I as f}from"./Input_es_DabuPYuA.js";import{L as S}from"./Label_es_C4QnITZA.js";import{a as y}from"./default_es_CaWUd9iO.js";const _={surfacePrimary:{dayTextColor:"surfaceTextPrimary",dayTextShape:"rounded",iconFillHover:"surfaceSecondary",iconItemFill:"surfaceItemPrimary",iconShape:"circular",monthTextColor:"surfaceTextPrimary",monthTextWeight:"400",yearTextColor:"surfaceTextPrimary",yearTextWeight:"400"},...{sizeL:{size:"l",daySize:"xs",dayTextSize:"m",iconFillSize:"24",iconLeft:y.Arrow.ChevronLeft,iconRight:y.Arrow.ChevronRight},sizeM:{size:"m",daySize:"xxl",dayTextSize:"m",iconFillSize:"24",iconLeft:y.Arrow.ChevronLeft,iconRight:y.Arrow.ChevronRight,iconSize:"14",monthTextSize:"m",yearTextSize:"m"},sizeS:{size:"s",daySize:"xs",dayTextSize:"m",iconFillSize:"24",iconLeft:y.Arrow.ChevronLeft,iconRight:y.Arrow.ChevronRight}},solid:{inputProps:{borderColor:"none"}},outlined:{inputProps:{fill:"none"}},full:{},ghost:{inputProps:{fill:"none",borderColor:"none"}}},x=e=>{const t=e.getDay()||7,r=new Date(e);r.setDate(e.getDate()-(t-1));const a=new Date(r);return a.setDate(r.getDate()+6),{mondayDate:r,sundayDate:a}},C={appearance:_,setAppearance:e=>{C.appearance=e}};function z(r){const{className:f,dataTestId:S,dataTour:y,datePickerProps:_={},endValue:z,inputProps:k={},value:I,onChange:T}=r,{appearance:v,customTimeInput:F,disablePastDays:D,monthsShown:b,selectsRange:w,showWeekNumbers:P,showWeekPicker:L}=_,N=s(v,C),H=p(_,N),{daySize:R,dayTextColor:A,dayTextShape:W,dayTextSize:j,iconFill:M,iconFillHover:$,iconFillSize:B,iconItemFill:O,iconLeft:U,iconRight:V,iconShape:q,monthTextColor:E,monthTextSize:G,monthTextWeight:J,popper:K,popperPlacement:Q,sizeClass:X,widthClass:Y,yearTextColor:Z,yearTextSize:ee,yearTextWeight:te,isClearable:re}=H,ae=o(null),[ie,oe]=a(()=>{let e,t;return I&&(e="string"==typeof I?new Date(I):I),z&&(t="string"==typeof z?new Date(z):z),[e,t]},[I,z]),le=i(e=>{const t=Array.isArray(e)?e:[e],[r,a]=t;if(r&&L){const{mondayDate:e,sundayDate:t}=x(r);T?.(e,t)}else T?.(r,a)},[L,T]),ne=i(e=>{const{mondayDate:t,sundayDate:r}=x(e);T?.(t,r)},[T]),ce=i((e,r)=>t(d,{className:"react-datepicker__day-button",size:R,label:r.getDate().toString(),labelTextColor:A,labelTextSize:j,shape:W}),[R,A,W,j]),se=i(({decreaseMonth:r,increaseMonth:a,monthDate:i})=>e("div",{className:"react-datepicker__header--div",children:[U&&t(u,{className:"react-datepicker__icon",fill:M,fillHover:$,fillSize:B,iconFill:O,shape:q,SvgImage:U,onClick:r}),e("div",{className:"react-datepicker__data",children:[t(h,{className:"react-datepicker__month",size:G,textColor:E,textWeight:J,children:i.toLocaleString("ru-RU",{month:"long"})}),t(h,{className:"react-datepicker__year",size:ee,textColor:Z,textWeight:te,children:i.toLocaleString("ru-RU",{year:"numeric"})})]}),V&&t(u,{className:"react-datepicker__icon",fill:M,fillHover:$,fillSize:B,iconFill:O,shape:q,SvgImage:V,onClick:a})]}),[M,$,B,O,U,V,q,E,G,J,Z,ee,te]),{styles:pe}=m(r);return t("div",{className:l(f,"datepicker",b&&"datepicker_multiple-months",F&&"datepicker_button",X&&`datepicker_size_${X}`,Y&&`datepicker_width_${Y}`),"data-testid":S,"data-tour":y,style:pe,children:t(c,{ref:ae,..._,minDate:D?new Date:void 0,customInput:t(g,{datepickerRef:ae,inputProps:k,isClearable:re}),endDate:w?oe:void 0,locale:n,outsideClickIgnoreClass:"react-datepicker-popper",popperClassName:K&&`react-datepicker-popper-${K}`,popperPlacement:Q,preventOpenOnFocus:!0,renderCustomHeader:se,renderDayContents:ce,selected:ie,startDate:ie,isClearable:!1,onChange:le,onWeekSelect:P?ne:void 0})})}const g=r.forwardRef((i,o)=>{const{inputIcon:n,inputProps:c,value:s,isClearable:p}=i,m=a(()=>{if(s){const e=s.split(" - ");return e[0]===e[1]?e[0]:s}return""},[s]);return e(r.Fragment,{children:[t(f,{...i,...c,className:l(c?.className,"datepicker__input"),ref:o,autocomplete:"off",value:m}),n&&t(I,{...c}),p&&t(k,{...c})]})});function k(e){const{clearIcon:a,clearIconFill:o,clearIconFillHover:n,clearIconFillSize:c,clearIconItemFill:s,clearIconItemFillHover:p,clearIconShape:m,clearIconSize:d,clearIconSrc:h,clearLabel:f,clearLabelTextColor:y,clearLabelTextColorHover:_,clearLabelTextSize:x,datepickerRef:C}=e,z=i(e=>{C?.current?.onClearClick(e),C?.current?.handleFocus(e)},[]);return t(r.Fragment,{children:f?t(S,{className:l("react-datepicker__clear-label","cursor_type_pointer"),label:f,labelTextColor:y,labelTextColorHover:_,labelTextSize:x,onClick:z}):(a||h)&&t(u,{className:l("react-datepicker__clear-icon","cursor_type_pointer"),size:d,fill:o,fillHover:n,fillSize:c,iconFill:s,iconFillHover:p,imageSrc:h,shape:m,SvgImage:a,onClick:z})})}function I(e){const{inputIcon:r,inputIconFill:a,inputIconFillHover:i,inputIconFillSize:o,inputIconItemFill:n,inputIconShape:c,inputIconSize:s,inputIconSrc:p,onClick:m}=e;return t(u,{className:l("react-datepicker__input-icon","cursor_type_pointer"),size:s,fill:a,fillHover:i,fillSize:o,iconFill:n,imageSrc:p,shape:c,SvgImage:r,onClick:()=>m&&m()})}export{z as D,C as a,_ as d};