@itcase/ui-web 1.9.111 → 1.9.113

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.
Files changed (68) hide show
  1. package/dist/DatePicker_cjs_Cd7wsJCG.js +1 -0
  2. package/dist/DatePicker_es_BhrZj2OP.js +1 -0
  3. package/dist/cjs/components/AvatarStack.js +1 -1
  4. package/dist/cjs/components/DatePeriod.js +1 -1
  5. package/dist/cjs/components/DatePicker.js +1 -1
  6. package/dist/cjs/components/Dropzone.js +1 -1
  7. package/dist/components/AvatarStack.js +1 -1
  8. package/dist/components/DatePeriod.js +1 -1
  9. package/dist/components/DatePicker.js +1 -1
  10. package/dist/components/Dropzone.js +1 -1
  11. package/dist/css/styles/bundles.css +13 -1
  12. package/dist/stories/DatePickerOverview.mdx +1 -1
  13. package/dist/types/components/Avatar/stories/AvatarCount.stories.d.ts +4 -0
  14. package/dist/types/components/Avatar/stories/AvatarCount.stories.js +4 -0
  15. package/dist/types/components/Avatar/stories/AvatarDemo.stories.js +4 -0
  16. package/dist/types/components/Avatar/stories/AvatarImage.stories.d.ts +4 -0
  17. package/dist/types/components/Avatar/stories/AvatarImage.stories.js +4 -0
  18. package/dist/types/components/Avatar/stories/AvatarInteraction.stories.d.ts +4 -0
  19. package/dist/types/components/Avatar/stories/AvatarInteraction.stories.js +4 -0
  20. package/dist/types/components/Avatar/stories/AvatarLetters.stories.d.ts +4 -0
  21. package/dist/types/components/Avatar/stories/AvatarLetters.stories.js +4 -0
  22. package/dist/types/components/Avatar/stories/AvatarSkeleton.stories.d.ts +4 -0
  23. package/dist/types/components/Avatar/stories/AvatarSkeleton.stories.js +4 -0
  24. package/dist/types/components/AvatarStack/AvatarStack.interface.d.ts +6 -11
  25. package/dist/types/components/AvatarStack/AvatarStack.js +3 -13
  26. package/dist/types/components/AvatarStack/index.d.ts +1 -1
  27. package/dist/types/components/AvatarStack/stories/AvatarStackCount.stories.d.ts +12 -4
  28. package/dist/types/components/AvatarStack/stories/AvatarStackCount.stories.js +49 -13
  29. package/dist/types/components/AvatarStack/stories/AvatarStackDemo.stories.d.ts +6 -2
  30. package/dist/types/components/AvatarStack/stories/AvatarStackDemo.stories.js +7 -12
  31. package/dist/types/components/AvatarStack/stories/AvatarStackSize.stories.d.ts +9 -1
  32. package/dist/types/components/AvatarStack/stories/AvatarStackSize.stories.js +51 -37
  33. package/dist/types/components/AvatarStack/{__test__/AvatarStackTest.stories.d.ts → stories/AvatarStackSkeleton.stories.d.ts} +7 -2
  34. package/dist/types/components/AvatarStack/stories/AvatarStackSkeleton.stories.js +47 -0
  35. package/dist/types/components/AvatarStack/stories/__mock__/index.js +11 -5
  36. package/dist/types/components/Badge/stories/BadgeDotIconCounter.stories.d.ts +8 -9
  37. package/dist/types/components/Badge/stories/BadgeDotIconCounter.stories.js +33 -72
  38. package/dist/types/components/DatePicker/DatePicker.interface.d.ts +22 -28
  39. package/dist/types/components/DatePicker/DatePicker.js +3 -4
  40. package/dist/types/components/DatePicker/stories/DatePicker.stories.d.ts +10 -1
  41. package/dist/types/components/DatePicker/stories/DatePicker.stories.js +31 -33
  42. package/dist/types/components/DatePicker/stories/DatePickerClear.stories.d.ts +9 -1
  43. package/dist/types/components/DatePicker/stories/DatePickerClear.stories.js +20 -24
  44. package/dist/types/components/DatePicker/stories/DatePickerSize.stories.d.ts +8 -0
  45. package/dist/types/components/DatePicker/stories/DatePickerSize.stories.js +13 -24
  46. package/dist/types/components/DatePicker/stories/DatePickerStory.d.ts +2 -0
  47. package/dist/types/components/DatePicker/stories/DatePickerStory.js +18 -0
  48. package/dist/types/components/DatePicker/stories/DatePickerStyle.stories.d.ts +8 -0
  49. package/dist/types/components/DatePicker/stories/DatePickerStyle.stories.js +13 -29
  50. package/dist/types/components/DatePicker/stories/DatePickerWithButton.stories.d.ts +12 -1
  51. package/dist/types/components/DatePicker/stories/DatePickerWithButton.stories.js +30 -32
  52. package/dist/types/components/Divider/__test__/DividerTest.stories.js +3 -3
  53. package/dist/types/components/Dropzone/Dropzone.appearance.d.ts +1 -0
  54. package/dist/types/components/Dropzone/Dropzone.js +1 -1
  55. package/dist/types/components/Dropzone/appearance/dropzoneDefault.d.ts +1 -0
  56. package/dist/types/components/Dropzone/appearance/dropzoneDefault.js +1 -0
  57. package/dist/types/components/Dropzone/stories/DropzoneDemo.stories.d.ts +1 -0
  58. package/dist/types/components/Dropzone/stories/DropzoneDemo.stories.js +7 -0
  59. package/dist/types/components/Dropzone/stories/__mock__/index.d.ts +4 -0
  60. package/dist/types/components/Dropzone/stories/__mock__/index.js +19 -0
  61. package/package.json +2 -2
  62. package/dist/DatePicker_cjs_BhZXIBZm.js +0 -1
  63. package/dist/DatePicker_es_vJagTqXm.js +0 -1
  64. package/dist/types/components/AvatarStack/AvatarStack.appearance.d.ts +0 -21
  65. package/dist/types/components/AvatarStack/AvatarStack.appearance.js +0 -5
  66. package/dist/types/components/AvatarStack/__test__/AvatarStackTest.stories.js +0 -45
  67. package/dist/types/components/AvatarStack/appearance/avatarStackSize.d.ts +0 -21
  68. package/dist/types/components/AvatarStack/appearance/avatarStackSize.js +0 -21
@@ -1,65 +1,49 @@
1
- import { jsx as _jsx } from "react/jsx-runtime";
2
1
  import { DatePickerInput } from '../DatePicker';
2
+ import { createDatePickerStory } from './DatePickerStory';
3
3
  const meta = {
4
4
  title: 'Molecules / DatePicker / Style',
5
5
  component: DatePickerInput,
6
6
  args: {
7
7
  width: '220px',
8
- },
9
- parameters: {
10
- layout: 'centered',
11
- },
12
- };
13
- export default meta;
14
- export const Solid = {
15
- args: {
16
8
  datePickerProps: {
17
9
  appearance: 'surfacePrimary sizeM solid rounded',
10
+ dateFormat: 'dd.MM.yyyy',
11
+ placeholderText: 'Выберите дату',
18
12
  },
19
13
  inputProps: {
20
14
  appearance: 'defaultPrimary sizeM solid rounded',
21
15
  },
22
16
  },
23
- render: (args) => {
24
- return _jsx(DatePickerInput, { ...args });
17
+ parameters: {
18
+ layout: 'centered',
25
19
  },
26
20
  };
21
+ export default meta;
22
+ const DatePickerStory = createDatePickerStory(meta.args);
23
+ export const Solid = {
24
+ render: DatePickerStory,
25
+ };
27
26
  export const Outlined = {
28
27
  args: {
29
- datePickerProps: {
30
- appearance: 'surfacePrimary sizeM solid rounded',
31
- },
32
28
  inputProps: {
33
29
  appearance: 'defaultPrimary sizeM outlined rounded',
34
30
  },
35
31
  },
36
- render: (args) => {
37
- return _jsx(DatePickerInput, { ...args });
38
- },
32
+ render: DatePickerStory,
39
33
  };
40
34
  export const Ghost = {
41
35
  args: {
42
- datePickerProps: {
43
- appearance: 'surfacePrimary sizeM solid rounded',
44
- },
45
36
  inputProps: {
46
37
  appearance: 'defaultPrimary sizeM ghost rounded',
47
38
  },
48
39
  },
49
- render: (args) => {
50
- return _jsx(DatePickerInput, { ...args });
51
- },
40
+ render: DatePickerStory,
52
41
  };
53
42
  export const Full = {
54
43
  args: {
55
- datePickerProps: {
56
- appearance: 'surfacePrimary sizeM solid rounded',
57
- },
58
44
  inputProps: {
59
45
  appearance: 'defaultPrimary sizeM full rounded',
60
46
  },
61
47
  },
62
- render: (args) => {
63
- return _jsx(DatePickerInput, { ...args });
64
- },
48
+ render: DatePickerStory,
65
49
  };
@@ -5,6 +5,16 @@ declare const meta: {
5
5
  component: typeof DatePickerInput;
6
6
  args: {
7
7
  width: "220px";
8
+ datePickerProps: {
9
+ appearance: "surfacePrimary sizeM solid rounded";
10
+ customTimeInput: import("react/jsx-runtime").JSX.Element;
11
+ dateFormat: string;
12
+ placeholderText: string;
13
+ showTimeInput: true;
14
+ };
15
+ inputProps: {
16
+ appearance: "defaultPrimary sizeM solid rounded";
17
+ };
8
18
  };
9
19
  parameters: {
10
20
  layout: string;
@@ -12,6 +22,7 @@ declare const meta: {
12
22
  };
13
23
  export default meta;
14
24
  type Story = StoryObj<typeof meta>;
15
- export declare const Date: Story;
25
+ export declare const Default: Story;
26
+ export declare const WithInitialDate: Story;
16
27
  export declare const DateTime: Story;
17
28
  export declare const DateRange: Story;
@@ -1,68 +1,66 @@
1
1
  import { jsx as _jsx } from "react/jsx-runtime";
2
2
  import { Button } from '../../Button';
3
3
  import { DatePickerInput } from '../DatePicker';
4
+ import { createDatePickerStory } from './DatePickerStory';
4
5
  const meta = {
5
6
  title: 'Molecules / DatePicker / With Button',
6
7
  component: DatePickerInput,
7
8
  args: {
8
9
  width: '220px',
9
- },
10
- parameters: {
11
- layout: 'centered',
12
- },
13
- };
14
- export default meta;
15
- export const Date = {
16
- args: {
17
10
  datePickerProps: {
18
11
  appearance: 'surfacePrimary sizeM solid rounded',
19
12
  customTimeInput: (_jsx(Button, { appearance: "accentPrimary sizeL solid rounded", width: "fill", label: "OK" })),
20
- dateFormat: 'dd-MM-yyyy',
13
+ dateFormat: 'dd.MM.yyyy',
14
+ placeholderText: 'Выберите дату',
21
15
  showTimeInput: true,
22
16
  },
23
17
  inputProps: {
24
18
  appearance: 'defaultPrimary sizeM solid rounded',
25
19
  },
26
20
  },
27
- render: (args) => {
28
- return _jsx(DatePickerInput, { ...args });
21
+ parameters: {
22
+ layout: 'centered',
23
+ },
24
+ };
25
+ export default meta;
26
+ const DatePickerStory = createDatePickerStory(meta.args);
27
+ export const Default = {
28
+ render: DatePickerStory,
29
+ };
30
+ export const WithInitialDate = {
31
+ args: {
32
+ datePickerProps: {
33
+ placeholderText: 'Дата с начальным значением',
34
+ },
35
+ value: '2025-06-15',
29
36
  },
37
+ render: DatePickerStory,
30
38
  };
31
39
  export const DateTime = {
32
40
  args: {
33
41
  datePickerProps: {
34
- appearance: 'surfacePrimary sizeM solid rounded',
35
- customTimeInput: (_jsx(Button, { appearance: "accentPrimary sizeL solid rounded", width: "fill", label: "OK", shape: "rounded" })),
36
- dateFormat: 'dd-MM-yyyy hh:mm',
37
- showTimeInput: true,
42
+ dateFormat: 'dd.MM.yyyy HH:mm',
43
+ placeholderText: 'Дата и время',
44
+ popperPlacement: 'bottom',
38
45
  showTimeSelect: true,
39
46
  timeCaption: 'Время',
40
- timeFormat: 'p',
47
+ timeFormat: 'HH:mm',
41
48
  timeIntervals: 15,
42
49
  },
43
- inputProps: {
44
- appearance: 'defaultPrimary sizeM solid rounded',
45
- },
46
- },
47
- render: (args) => {
48
- return _jsx(DatePickerInput, { ...args });
50
+ value: '2025-06-15T14:30:00',
49
51
  },
52
+ render: DatePickerStory,
50
53
  };
51
54
  export const DateRange = {
52
55
  args: {
56
+ width: '360px',
53
57
  datePickerProps: {
54
- appearance: 'surfacePrimary sizeM solid rounded',
55
- customTimeInput: (_jsx(Button, { appearance: "accentPrimary sizeL solid rounded", width: "fill", label: "OK", shape: "rounded" })),
56
58
  monthsShown: 2,
57
- placeholderText: 'StartEnd (m/d/yyyy)',
59
+ placeholderText: 'Началоконец',
58
60
  selectsRange: true,
59
- showTimeInput: true,
60
61
  },
61
- inputProps: {
62
- appearance: 'defaultPrimary sizeM solid rounded',
63
- },
64
- },
65
- render: (args) => {
66
- return _jsx(DatePickerInput, { ...args });
62
+ endValue: '2025-06-20',
63
+ value: '2025-06-01',
67
64
  },
65
+ render: DatePickerStory,
68
66
  };
@@ -25,6 +25,9 @@ export const Children = {
25
25
  render: (args) => _jsx(Divider, { ...args }),
26
26
  };
27
27
  export const Skeleton = {
28
+ args: {
29
+ isSkeleton: true,
30
+ },
28
31
  play: async ({ args, canvas, step }) => {
29
32
  await step('Divider renders with skelton class', async () => {
30
33
  const divider = canvas.getByTestId(args.dataTestId);
@@ -32,8 +35,5 @@ export const Skeleton = {
32
35
  await storybookTest.expect(divider).toHaveClass('skeleton');
33
36
  });
34
37
  },
35
- args: {
36
- isSkeleton: true,
37
- },
38
38
  render: (args) => _jsx(Divider, { ...args }),
39
39
  };
@@ -79,6 +79,7 @@ declare const dropzoneAppearance: {
79
79
  hintTitle: string;
80
80
  hintTitleTextColor: "surfaceTextPrimary";
81
81
  hintTitleTextSize: "m";
82
+ removeThumbAppearance: "dangerPrimary sizeM solid rounded";
82
83
  removeThumbText: string;
83
84
  removeThumbTextColor: "errorTextPrimary";
84
85
  thumbBorderColor: "surfaceBorderTertiary";
@@ -17,7 +17,7 @@ const dropzoneConfig = {
17
17
  };
18
18
  const Dropzone = React.memo(function Dropzone(props) {
19
19
  const { appearance, maxFiles = 5, maxSize = 10485760, // 10mb
20
- dropzoneProps = {}, fieldValuesList: maybeFieldValuesList, fileErrorText, hintDescription, inputName, showFilename = true, thumbColumn, isSkeleton, isPreviews = true, onClickPreview, onAddFiles, onChangeFiles, onDeleteFile,
20
+ dropzoneProps = {}, fieldValuesList: maybeFieldValuesList, fileErrorText, hintDescription, inputName, showFilename = true, thumbColumn = 2, isSkeleton, isPreviews = true, onClickPreview, onAddFiles, onChangeFiles, onDeleteFile,
21
21
  // className, unused
22
22
  // size, unused
23
23
  } = props;
@@ -5,6 +5,7 @@ declare const dropzoneAppearanceDefault: {
5
5
  hintTitle: string;
6
6
  hintTitleTextColor: "surfaceTextPrimary";
7
7
  hintTitleTextSize: "m";
8
+ removeThumbAppearance: "dangerPrimary sizeM solid rounded";
8
9
  removeThumbText: string;
9
10
  removeThumbTextColor: "errorTextPrimary";
10
11
  thumbBorderColor: "surfaceBorderTertiary";
@@ -5,6 +5,7 @@ const dropzoneAppearanceDefault = {
5
5
  hintTitle: 'Перетащите изображение или выберите файл с компьютера',
6
6
  hintTitleTextColor: 'surfaceTextPrimary',
7
7
  hintTitleTextSize: 'm',
8
+ removeThumbAppearance: 'dangerPrimary sizeM solid rounded',
8
9
  removeThumbText: 'удалить',
9
10
  removeThumbTextColor: 'errorTextPrimary',
10
11
  thumbBorderColor: 'surfaceBorderTertiary',
@@ -11,4 +11,5 @@ declare const meta: {
11
11
  export default meta;
12
12
  type Story = StoryObj<typeof meta>;
13
13
  export declare const Default: Story;
14
+ export declare const WithFiles: Story;
14
15
  export declare const Skeleton: Story;
@@ -2,6 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
2
2
  /* eslint-disable react-hooks/rules-of-hooks */
3
3
  import { useState } from 'react';
4
4
  import { Dropzone } from '../';
5
+ import { dropzoneFieldValuesListMock } from './__mock__';
5
6
  const meta = {
6
7
  title: 'Molecules / Dropzone',
7
8
  component: Dropzone,
@@ -17,6 +18,12 @@ export const Default = {
17
18
  return (_jsx(Dropzone, { ...args, fieldValuesList: values, onChangeFiles: setValues }));
18
19
  },
19
20
  };
21
+ export const WithFiles = {
22
+ render: (args) => {
23
+ const [values, setValues] = useState(dropzoneFieldValuesListMock);
24
+ return (_jsx(Dropzone, { ...args, fieldValuesList: values, onChangeFiles: setValues }));
25
+ },
26
+ };
20
27
  export const Skeleton = {
21
28
  args: {
22
29
  isSkeleton: true,
@@ -0,0 +1,4 @@
1
+ import type { DropzoneFileItem } from '../../Dropzone.interface';
2
+ /** Form/backend values before hook converts them to DropzoneFileItem */
3
+ declare const dropzoneFieldValuesListMock: DropzoneFileItem[];
4
+ export { dropzoneFieldValuesListMock };
@@ -0,0 +1,19 @@
1
+ /** Form/backend values before hook converts them to DropzoneFileItem */
2
+ const dropzoneFieldValuesListMock = [
3
+ {
4
+ id: 'dropzone-story-mock-1',
5
+ name: 'image-1.png',
6
+ image: '/avatar/Man.png',
7
+ },
8
+ {
9
+ id: 'dropzone-story-mock-2',
10
+ name: 'image-2.png',
11
+ image: '/avatar/Woman.png',
12
+ },
13
+ {
14
+ id: 'dropzone-story-mock-3',
15
+ name: 'image-3.png',
16
+ image: '/avatar/Woman2.png',
17
+ },
18
+ ];
19
+ export { dropzoneFieldValuesListMock };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@itcase/ui-web",
3
- "version": "1.9.111",
3
+ "version": "1.9.113",
4
4
  "description": "UI components",
5
5
  "keywords": "",
6
6
  "license": "MIT",
@@ -114,5 +114,5 @@
114
114
  "storybook": "^10.4.0",
115
115
  "typescript": "^6.0.3"
116
116
  },
117
- "gitHead": "90a1c5a405c73d48360ee64d89e23812d6caacfe"
117
+ "gitHead": "1a3cb82207abc56131b2ba26fa8f837886168942"
118
118
  }
@@ -1 +0,0 @@
1
- "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;
@@ -1 +0,0 @@
1
- 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};
@@ -1,21 +0,0 @@
1
- declare const avatarStackAppearance: {
2
- size16: {
3
- size: "16";
4
- };
5
- size20: {
6
- size: "20";
7
- };
8
- size24: {
9
- size: "24";
10
- };
11
- size32: {
12
- size: "32";
13
- };
14
- size40: {
15
- size: "40";
16
- };
17
- size56: {
18
- size: "56";
19
- };
20
- };
21
- export { avatarStackAppearance };
@@ -1,5 +0,0 @@
1
- import { avatarStackAppearanceSize } from './appearance/avatarStackSize';
2
- const avatarStackAppearance = {
3
- ...avatarStackAppearanceSize,
4
- };
5
- export { avatarStackAppearance };
@@ -1,45 +0,0 @@
1
- import { jsx as _jsx } from "react/jsx-runtime";
2
- import * as storybookTest from 'storybook/test';
3
- import { AvatarStack } from '../AvatarStack';
4
- import { avatarsListMock } from '../stories/__mock__';
5
- const meta = {
6
- title: 'Molecules / Avatar Stack / __test__',
7
- component: AvatarStack,
8
- args: {
9
- dataTestId: 'avatarStackTestId',
10
- avatarAppearance: `surfaceSecondary size56 solid rounded`,
11
- avatarsList: avatarsListMock,
12
- },
13
- parameters: {
14
- layout: 'centered',
15
- },
16
- tags: ['test'],
17
- };
18
- export default meta;
19
- export const Skeleton = {
20
- play: async ({ args, canvas, step }) => {
21
- await step('AvatarStack renders with skeleton class', async () => {
22
- const avatarStack = canvas.getByTestId(args.dataTestId);
23
- await storybookTest.expect(avatarStack).toBeInTheDocument();
24
- await storybookTest.expect(avatarStack).toHaveClass('skeleton');
25
- });
26
- },
27
- args: {
28
- isSkeleton: true,
29
- },
30
- render: (args) => _jsx(AvatarStack, { ...args }),
31
- };
32
- export const Length = {
33
- play: async ({ args, canvas, step }) => {
34
- await step('AvatarStack renders with skeleton class', async () => {
35
- const avatarStack = canvas.getByTestId(args.dataTestId);
36
- await storybookTest.expect(avatarStack).toBeInTheDocument();
37
- const avatarsItems = avatarStack.children;
38
- await storybookTest.expect(avatarsItems.length).toBe(args.length);
39
- });
40
- },
41
- args: {
42
- length: 4,
43
- },
44
- render: (args) => _jsx(AvatarStack, { ...args }),
45
- };
@@ -1,21 +0,0 @@
1
- declare const avatarStackAppearanceSize: {
2
- size16: {
3
- size: "16";
4
- };
5
- size20: {
6
- size: "20";
7
- };
8
- size24: {
9
- size: "24";
10
- };
11
- size32: {
12
- size: "32";
13
- };
14
- size40: {
15
- size: "40";
16
- };
17
- size56: {
18
- size: "56";
19
- };
20
- };
21
- export { avatarStackAppearanceSize };
@@ -1,21 +0,0 @@
1
- const avatarStackAppearanceSize = {
2
- size16: {
3
- size: '16',
4
- },
5
- size20: {
6
- size: '20',
7
- },
8
- size24: {
9
- size: '24',
10
- },
11
- size32: {
12
- size: '32',
13
- },
14
- size40: {
15
- size: '40',
16
- },
17
- size56: {
18
- size: '56',
19
- },
20
- };
21
- export { avatarStackAppearanceSize };