@itcase/ui-web 1.9.110 → 1.9.112

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.110",
+  "version": "1.9.112",
   "description": "UI components",
   "keywords": "",
   "license": "MIT",
@@ -114,5 +114,5 @@
     "storybook": "^10.4.0",
     "typescript": "^6.0.3"
   },
-  "gitHead": "a2332abbbcce2d42aa3f41f52f56032006c5247f"
+  "gitHead": "985b7cd49b2f7db7233d288d4561b5af826037f0"
 }

package/dist/DatePicker_cjs_BnCUToKG.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_ConzdKae.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_CQ__CIKJ.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_Ob6KGKAf.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};