@snack-uikit/drawer 0.13.14 → 0.13.15-preview-a4382420.0

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 (9) hide show
  1. package/README.md +4 -32
  2. package/dist/cjs/components/DrawerCustom/DrawerCustom.js +14 -12
  3. package/dist/cjs/components/DrawerCustom/constants.js +1 -1
  4. package/dist/cjs/components/DrawerCustom/styles.module.css +24 -6
  5. package/dist/esm/components/DrawerCustom/DrawerCustom.js +1 -1
  6. package/dist/esm/components/DrawerCustom/styles.module.css +24 -6
  7. package/package.json +2 -2
  8. package/src/components/DrawerCustom/DrawerCustom.tsx +11 -9
  9. package/src/components/DrawerCustom/styles.module.scss +17 -1
package/README.md CHANGED
@@ -101,57 +101,29 @@ function DrawerExample() {
101
101
  ### Props
102
102
  | name | type | default value | description |
103
103
  |------|------|---------------|-------------|
104
- | onClose* | `() => void` | - | Колбэк закрытия |
105
- | open* | `boolean` | - | Управление состоянием показан/не показан. |
106
- | mode | enum Mode: `"regular"`, `"soft"` | regular | Режим отображения |
107
- | position | enum Position: `"right"`, `"left"` | right | Расположение открытого Drawer |
108
- | className | `string` | - | CSS-класс для элемента с контентом |
109
- | rootClassName | `string` | - | CSS-класс для корневого элемента |
110
- | size | `string \| number` | s | Размер |
111
- | push | `boolean \| PushConfig` | - | Смещение при открытии "вложенного" компонента |
112
- | container | `string \| HTMLElement` | - | Контейнер в котором будет рендерится Drawer. По-умолчанию - body |
113
- | nestedDrawer | `ReactElement<DrawerCustomProps, string \| JSXElementConstructor<any>>` | - | Вложенный Drawer |
114
- | closeOnPopstate | `boolean` | - | Закрывать дровер при перемещении по истории браузера |
115
104
  ## DrawerCustom.Header
116
105
  ### Props
117
106
  | name | type | default value | description |
118
107
  |------|------|---------------|-------------|
119
- | title* | `ReactNode` | - | Заголовок |
120
- | image | `{ src: string; alt: string; }` | - | Изображение |
121
- | titleTooltip | `ReactNode` | - | Тултип для заголовка |
122
- | subtitle | `ReactNode` | - | Подзаголовок |
123
- | className | `string` | - | CSS-класс |
124
108
  ## DrawerCustom.Body
125
109
  ### Props
126
110
  | name | type | default value | description |
127
111
  |------|------|---------------|-------------|
128
- | content* | `ReactNode` | - | Контент |
129
- | className | `string` | - | CSS-класс |
130
112
  ## DrawerCustom.Footer
131
113
  ### Props
132
114
  | name | type | default value | description |
133
115
  |------|------|---------------|-------------|
134
- | actions* | `ReactNode` | - | Слот для добавления кнопок-действий |
135
- | className | `string` | - | CSS-класс |
136
116
  ## Drawer
137
117
  Готовый компонент Drawer
138
118
  ### Props
139
119
  | name | type | default value | description |
140
120
  |------|------|---------------|-------------|
141
121
  | title* | `string` | - | Заголовок |
142
- | content* | `ReactNode` | - | Контент |
143
- | onClose* | `() => void` | - | Колбэк закрытия |
144
- | open* | `boolean` | - | Управление состоянием показан/не показан. |
145
- | mode | enum Mode: `"regular"`, `"soft"` | - | Режим отображения |
146
- | position | enum Position: `"right"`, `"left"` | - | Расположение открытого Drawer |
147
- | className | `string` | - | CSS-класс для элемента с контентом |
148
- | rootClassName | `string` | - | CSS-класс для корневого элемента |
149
- | container | `string \| HTMLElement` | - | Контейнер в котором будет рендерится Drawer. По-умолчанию - body |
150
- | closeOnPopstate | `boolean` | - | Закрывать дровер при перемещении по истории браузера |
151
- | image | `{ src: string; alt: string; }` | - | Изображение |
152
- | titleTooltip | `ReactNode` | - | Тултип для заголовка |
122
+ | content* | `WithSupportProps<{ content: ReactNode; className?: string; }>` | - | |
123
+ | image* | `WithSupportProps<{ image?: { src: string; alt: string; }; title: ReactNode; titleTooltip?: TooltipProps; subtitle?: ReactNode; className?: string; }>` | - | |
124
+ | titleTooltip* | `WithSupportProps<{ image?: { src: string; alt: string; }; title: ReactNode; titleTooltip?: TooltipProps; subtitle?: ReactNode; className?: string; }>` | - | |
153
125
  | subtitle | `string` | - | Подзаголовок |
154
- | size | enum Size: `"s"`, `"m"`, `"l"` | - | Размер |
126
+ | size | `ValueOf<{ readonly S: "s"; readonly M: "m"; readonly L: "l"; }>` | - | Размер |
155
127
  | approveButton | `Omit<ButtonFilledProps, "size"> & { tooltip?: TooltipProps; }` | - | Основная кнопка |
156
128
  | cancelButton | `Omit<ButtonOutlineProps, "size"> & { tooltip?: TooltipProps; }` | - | Кнопка отмены |
157
129
  | additionalButton | `Omit<ButtonSimpleProps, "size"> & { tooltip?: TooltipProps; }` | - | Дополнительная кнопка |
package/dist/cjs/components/DrawerCustom/DrawerCustom.js CHANGED
@@ -47,7 +47,7 @@ function DrawerCustom(_a) {
47
47
  (0, utils_1.useModalOpenState)(open, onClose, {
48
48
  closeOnPopstate
49
49
  });
50
- return (0, jsx_runtime_1.jsxs)(rc_drawer_1.default, Object.assign({
50
+ return (0, jsx_runtime_1.jsx)(rc_drawer_1.default, Object.assign({
51
51
  mask: isRegular,
52
52
  maskClosable: isRegular,
53
53
  maskClassName: styles_module_scss_1.default.mask,
@@ -61,17 +61,19 @@ function DrawerCustom(_a) {
61
61
  getContainer: container,
62
62
  className: (0, classnames_1.default)(styles_module_scss_1.default.drawer, className),
63
63
  rootClassName: (0, classnames_1.default)(styles_module_scss_1.default.drawerRoot, rootClassName)
64
- }, (0, utils_1.extractSupportProps)(rest), {
65
- "data-content-wrapper": true,
66
- "data-size": isPredefinedSize ? size : undefined,
67
- "data-mode": mode
68
- }, constants_2.motionProps, {
69
- children: [(0, jsx_runtime_1.jsx)("div", {
70
- className: styles_module_scss_1.default.headerElements,
71
- children: (0, jsx_runtime_1.jsx)(helperComponents_1.ButtonClose, {
72
- onClick: onClose
73
- })
74
- }), children, nestedDrawer]
64
+ }, (0, utils_1.extractSupportProps)(rest), constants_2.motionProps, {
65
+ children: (0, jsx_runtime_1.jsxs)("div", {
66
+ className: styles_module_scss_1.default.drawerContentWrapper,
67
+ "data-content-wrapper": 'true',
68
+ "data-size": isPredefinedSize ? size : undefined,
69
+ "data-mode": mode,
70
+ children: [(0, jsx_runtime_1.jsx)("div", {
71
+ className: styles_module_scss_1.default.headerElements,
72
+ children: (0, jsx_runtime_1.jsx)(helperComponents_1.ButtonClose, {
73
+ onClick: onClose
74
+ })
75
+ }), children, nestedDrawer]
76
+ })
75
77
  }));
76
78
  }
77
79
  (function (DrawerCustom) {
package/dist/cjs/components/DrawerCustom/constants.js CHANGED
@@ -11,7 +11,7 @@ exports.maskMotion = {
11
11
  };
12
12
  const motion = placement => ({
13
13
  motionAppear: true,
14
- motionName: "panelMotion-".concat(placement)
14
+ motionName: `panelMotion-${placement}`
15
15
  });
16
16
  exports.motion = motion;
17
17
  exports.motionProps = {
package/dist/cjs/components/DrawerCustom/styles.module.css CHANGED
@@ -2,29 +2,47 @@
2
2
  z-index:initial !important;
3
3
  }
4
4
 
5
- div[data-content-wrapper=true]{
5
+ .drawerContentWrapper{
6
6
  will-change:transform;
7
7
  z-index:initial;
8
8
  overflow:unset;
9
9
  max-width:calc(100% - var(--space-drawer-outside-gap, 24px));
10
10
  height:100%;
11
11
  }
12
- div[data-content-wrapper=true][data-size=s]{
12
+ .drawerContentWrapper[data-content-wrapper=true][data-size=s]{
13
13
  min-width:var(--size-drawer-min-width-s, 304px);
14
14
  width:var(--size-drawer-width-s, 464px);
15
15
  }
16
- div[data-content-wrapper=true][data-size=m]{
16
+ .drawerContentWrapper[data-content-wrapper=true][data-size=m]{
17
17
  min-width:var(--size-drawer-min-width-m, 304px);
18
18
  width:var(--size-drawer-width-m, 864px);
19
19
  }
20
- div[data-content-wrapper=true][data-size=l]{
20
+ .drawerContentWrapper[data-content-wrapper=true][data-size=l]{
21
21
  min-width:var(--size-drawer-min-width-l, 304px);
22
22
  width:var(--size-drawer-width-l, 1872px);
23
23
  }
24
- div[data-content-wrapper=true][data-mode=regular] .drawer{
24
+ .drawerContentWrapper[data-content-wrapper=true][data-mode=regular] .drawer{
25
25
  background-color:var(--sys-neutral-background1-level, #fdfdfd);
26
26
  }
27
- div[data-content-wrapper=true][data-mode=soft] .drawer{
27
+ .drawerContentWrapper[data-content-wrapper=true][data-mode=soft] .drawer{
28
+ background-color:var(--sys-neutral-background2-level, #ffffff);
29
+ }
30
+ .drawerContentWrapper[data-size=s]{
31
+ min-width:var(--size-drawer-min-width-s, 304px);
32
+ width:var(--size-drawer-width-s, 464px);
33
+ }
34
+ .drawerContentWrapper[data-size=m]{
35
+ min-width:var(--size-drawer-min-width-m, 304px);
36
+ width:var(--size-drawer-width-m, 864px);
37
+ }
38
+ .drawerContentWrapper[data-size=l]{
39
+ min-width:var(--size-drawer-min-width-l, 304px);
40
+ width:var(--size-drawer-width-l, 1872px);
41
+ }
42
+ .drawerContentWrapper[data-mode=regular] .drawer{
43
+ background-color:var(--sys-neutral-background1-level, #fdfdfd);
44
+ }
45
+ .drawerContentWrapper[data-mode=soft] .drawer{
28
46
  background-color:var(--sys-neutral-background2-level, #ffffff);
29
47
  }
30
48
 
package/dist/esm/components/DrawerCustom/DrawerCustom.js CHANGED
@@ -23,7 +23,7 @@ export function DrawerCustom(_a) {
23
23
  const isRegular = mode === MODE.Regular;
24
24
  const isPredefinedSize = typeof size === 'string' && SIZE_AS_VALUES.includes(size);
25
25
  useModalOpenState(open, onClose, { closeOnPopstate });
26
- return (_jsxs(RcDrawer, Object.assign({ mask: isRegular, maskClosable: isRegular, maskClassName: styles.mask, keyboard: isRegular, width: isPredefinedSize ? 'null' : size, open: open, placement: position, destroyOnClose: true, push: push, onClose: onClose, getContainer: container, className: cn(styles.drawer, className), rootClassName: cn(styles.drawerRoot, rootClassName) }, extractSupportProps(rest), { "data-content-wrapper": true, "data-size": isPredefinedSize ? size : undefined, "data-mode": mode }, motionProps, { children: [_jsx("div", { className: styles.headerElements, children: _jsx(ButtonClose, { onClick: onClose }) }), children, nestedDrawer] })));
26
+ return (_jsx(RcDrawer, Object.assign({ mask: isRegular, maskClosable: isRegular, maskClassName: styles.mask, keyboard: isRegular, width: isPredefinedSize ? 'null' : size, open: open, placement: position, destroyOnClose: true, push: push, onClose: onClose, getContainer: container, className: cn(styles.drawer, className), rootClassName: cn(styles.drawerRoot, rootClassName) }, extractSupportProps(rest), motionProps, { children: _jsxs("div", { className: styles.drawerContentWrapper, "data-content-wrapper": 'true', "data-size": isPredefinedSize ? size : undefined, "data-mode": mode, children: [_jsx("div", { className: styles.headerElements, children: _jsx(ButtonClose, { onClick: onClose }) }), children, nestedDrawer] }) })));
27
27
  }
28
28
  (function (DrawerCustom) {
29
29
  DrawerCustom.Header = DrawerHeader;
package/dist/esm/components/DrawerCustom/styles.module.css CHANGED
@@ -2,29 +2,47 @@
2
2
  z-index:initial !important;
3
3
  }
4
4
 
5
- div[data-content-wrapper=true]{
5
+ .drawerContentWrapper{
6
6
  will-change:transform;
7
7
  z-index:initial;
8
8
  overflow:unset;
9
9
  max-width:calc(100% - var(--space-drawer-outside-gap, 24px));
10
10
  height:100%;
11
11
  }
12
- div[data-content-wrapper=true][data-size=s]{
12
+ .drawerContentWrapper[data-content-wrapper=true][data-size=s]{
13
13
  min-width:var(--size-drawer-min-width-s, 304px);
14
14
  width:var(--size-drawer-width-s, 464px);
15
15
  }
16
- div[data-content-wrapper=true][data-size=m]{
16
+ .drawerContentWrapper[data-content-wrapper=true][data-size=m]{
17
17
  min-width:var(--size-drawer-min-width-m, 304px);
18
18
  width:var(--size-drawer-width-m, 864px);
19
19
  }
20
- div[data-content-wrapper=true][data-size=l]{
20
+ .drawerContentWrapper[data-content-wrapper=true][data-size=l]{
21
21
  min-width:var(--size-drawer-min-width-l, 304px);
22
22
  width:var(--size-drawer-width-l, 1872px);
23
23
  }
24
- div[data-content-wrapper=true][data-mode=regular] .drawer{
24
+ .drawerContentWrapper[data-content-wrapper=true][data-mode=regular] .drawer{
25
25
  background-color:var(--sys-neutral-background1-level, #fdfdfd);
26
26
  }
27
- div[data-content-wrapper=true][data-mode=soft] .drawer{
27
+ .drawerContentWrapper[data-content-wrapper=true][data-mode=soft] .drawer{
28
+ background-color:var(--sys-neutral-background2-level, #ffffff);
29
+ }
30
+ .drawerContentWrapper[data-size=s]{
31
+ min-width:var(--size-drawer-min-width-s, 304px);
32
+ width:var(--size-drawer-width-s, 464px);
33
+ }
34
+ .drawerContentWrapper[data-size=m]{
35
+ min-width:var(--size-drawer-min-width-m, 304px);
36
+ width:var(--size-drawer-width-m, 864px);
37
+ }
38
+ .drawerContentWrapper[data-size=l]{
39
+ min-width:var(--size-drawer-min-width-l, 304px);
40
+ width:var(--size-drawer-width-l, 1872px);
41
+ }
42
+ .drawerContentWrapper[data-mode=regular] .drawer{
43
+ background-color:var(--sys-neutral-background1-level, #fdfdfd);
44
+ }
45
+ .drawerContentWrapper[data-mode=soft] .drawer{
28
46
  background-color:var(--sys-neutral-background2-level, #ffffff);
29
47
  }
30
48
 
package/package.json CHANGED
@@ -4,7 +4,7 @@
4
4
  "access": "public"
5
5
  },
6
6
  "title": "Drawer",
7
- "version": "0.13.14",
7
+ "version": "0.13.15-preview-a4382420.0",
8
8
  "sideEffects": [
9
9
  "*.css",
10
10
  "*.woff",
@@ -46,5 +46,5 @@
46
46
  "classnames": "2.5.1",
47
47
  "rc-drawer": "6.4.1"
48
48
  },
49
- "gitHead": "d1bb005216777d5730f95394b5f1b823feb694df"
49
+ "gitHead": "12622cf4eb4f620472483f4824a521424339758b"
50
50
  }
package/src/components/DrawerCustom/DrawerCustom.tsx CHANGED
@@ -83,18 +83,20 @@ export function DrawerCustom({
83
83
  className={cn(styles.drawer, className)}
84
84
  rootClassName={cn(styles.drawerRoot, rootClassName)}
85
85
  {...extractSupportProps(rest)}
86
- data-content-wrapper={true}
87
- data-size={isPredefinedSize ? size : undefined}
88
- data-mode={mode}
89
86
  {...motionProps}
90
87
  >
91
- <div className={styles.headerElements}>
92
- <ButtonClose onClick={onClose} />
88
+ <div
89
+ className={styles.drawerContentWrapper}
90
+ data-content-wrapper='true'
91
+ data-size={isPredefinedSize ? size : undefined}
92
+ data-mode={mode}
93
+ >
94
+ <div className={styles.headerElements}>
95
+ <ButtonClose onClick={onClose} />
96
+ </div>
97
+ {children}
98
+ {nestedDrawer}
93
99
  </div>
94
-
95
- {children}
96
-
97
- {nestedDrawer}
98
100
  </RcDrawer>
99
101
  );
100
102
  }
package/src/components/DrawerCustom/styles.module.scss CHANGED
@@ -11,7 +11,7 @@ $drawer-background-color: (
11
11
  z-index: initial !important; /* stylelint-disable-line declaration-no-important */
12
12
  }
13
13
 
14
- div[data-content-wrapper='true'] {
14
+ .drawerContentWrapper {
15
15
  will-change: transform;
16
16
 
17
17
  z-index: initial;
@@ -21,6 +21,22 @@ div[data-content-wrapper='true'] {
21
21
  max-width: calc(100% - styles-tokens-drawer.$space-drawer-outside-gap);
22
22
  height: 100%;
23
23
 
24
+ &[data-content-wrapper='true'] {
25
+ @each $size in $sizes {
26
+ &[data-size='#{$size}'] {
27
+ @include styles-tokens-drawer.composite-var(styles-tokens-drawer.$drawer, 'window', $size);
28
+ }
29
+ }
30
+
31
+ @each $mode in $modes {
32
+ &[data-mode='#{$mode}'] {
33
+ .drawer {
34
+ background-color: styles-tokens-drawer.simple-var($drawer-background-color, $mode);
35
+ }
36
+ }
37
+ }
38
+ }
39
+
24
40
  @each $size in $sizes {
25
41
  &[data-size='#{$size}'] {
26
42
  @include styles-tokens-drawer.composite-var(styles-tokens-drawer.$drawer, 'window', $size);