@pushwoosh/dumb-components 1.1.136 → 1.1.138

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 (8) hide show
  1. package/Drawer/components/Drawer/styles.js +15 -21
  2. package/DropdownMenu/components/DropdownMenuItem/DropdownMenuItem.js +9 -4
  3. package/DropdownMenu/components/DropdownMenuItem/styles.d.ts +1 -1
  4. package/DropdownMenu/components/DropdownMenuItem/styles.js +1 -1
  5. package/DropdownMenu/shared/styles.d.ts +1 -0
  6. package/DropdownMenu/shared/styles.js +6 -2
  7. package/Modal/components/Modal/styles.js +11 -5
  8. package/package.json +1 -1
package/Drawer/components/Drawer/styles.js CHANGED
@@ -5,12 +5,16 @@ import { ShapeRadius } from '@pushwoosh/kit-constants';
5
5
  import { DrawerBody, DrawerHeader } from '../DrawerContent';
6
6
  const animationTimeout = 300;
7
7
  export const LockBody = createGlobalStyle(["body{overflow:hidden;position:relative;height:100%;}"]);
8
- export const DrawerBox = styled.div.withConfig({
8
+ export const DrawerBox = styled.div.attrs(({
9
+ $zIndex
10
+ }) => ({
11
+ style: {
12
+ zIndex: $zIndex
13
+ }
14
+ })).withConfig({
9
15
  displayName: "DrawerBox",
10
16
  componentId: "sc-n2uxwd-0"
11
- })(["position:fixed;top:0;left:0;width:100vw;height:100vh;pointer-events:all;z-index:", ";"], ({
12
- $zIndex
13
- }) => $zIndex);
17
+ })(["position:fixed;top:0;left:0;width:100vw;height:100vh;pointer-events:all;"]);
14
18
  export const DrawerInner = styled.div.withConfig({
15
19
  displayName: "DrawerInner",
16
20
  componentId: "sc-n2uxwd-1"
@@ -50,26 +54,16 @@ const DrawerBoxBase = props => {
50
54
  children: children
51
55
  });
52
56
  };
57
+ const backdropHidden = ({
58
+ withoutLockScreen = false
59
+ }) => withoutLockScreen ? 'transparent' : 'rgb(0 0 0 / 0%)';
60
+ const backdropVisible = ({
61
+ withoutLockScreen = false
62
+ }) => withoutLockScreen ? 'transparent' : 'rgb(0 0 0 / 70%)';
53
63
  export const DrawerBoxTrans = styled(DrawerBoxBase).withConfig({
54
64
  displayName: "DrawerBoxTrans",
55
65
  componentId: "sc-n2uxwd-2"
56
- })(["&-appear{background-color:", ";transition:background-color ", "ms;", "{opacity:0;transform:translateX(100%);}}&-appear-active{background-color:", ";", "{opacity:0.99;transform:translateX(.1%);transition:opacity ", "ms,transform ", "ms;}}&-appear-done{background-color:", ";", "{opacity:1;transform:translateX(0);}}&-enter{background-color:", ";transition:background-color ", "ms;", "{opacity:0;transform:translateX(100%);}}&-enter-active{background-color:", ";", "{opacity:0.99;transform:translateX(.1%);transition:opacity ", "ms,transform ", "ms;}}&-enter-done{background-color:", ";", "{opacity:1;transform:translateX(0);}}&-exit{background-color:", ";", "{opacity:1;transform:translateX(0);transition:opacity ", "ms,transform ", "ms;}}&-exit-active{transition:background-color ", "ms;background-color:", ";", "{opacity:0;transform:translateX(100%);}}"], ({
57
- withoutLockScreen = false
58
- }) => withoutLockScreen ? 'transparent' : 'rgb(0 0 0 / 0%)', animationTimeout, DrawerInner, ({
59
- withoutLockScreen = false
60
- }) => withoutLockScreen ? 'transparent' : 'rgb(0 0 0 / 70%)', DrawerInner, animationTimeout, animationTimeout, ({
61
- withoutLockScreen = false
62
- }) => withoutLockScreen ? 'transparent' : 'rgb(0 0 0 / 70%)', DrawerInner, ({
63
- withoutLockScreen = false
64
- }) => withoutLockScreen ? 'transparent' : 'rgb(0 0 0 / 0%)', animationTimeout, DrawerInner, ({
65
- withoutLockScreen = false
66
- }) => withoutLockScreen ? 'transparent' : 'rgb(0 0 0 / 70%)', DrawerInner, animationTimeout, animationTimeout, ({
67
- withoutLockScreen = false
68
- }) => withoutLockScreen ? 'transparent' : 'rgb(0 0 0 / 70%)', DrawerInner, ({
69
- withoutLockScreen = false
70
- }) => withoutLockScreen ? 'transparent' : 'rgb(0 0 0 / 70%)', DrawerInner, animationTimeout, animationTimeout, animationTimeout, ({
71
- withoutLockScreen = false
72
- }) => withoutLockScreen ? 'transparent' : 'rgb(0 0 0 / 0%)', DrawerInner);
66
+ })(["&-appear,&-enter{background-color:", ";", "{opacity:0;transform:translateX(100%);}}&-appear-active,&-enter-active{background-color:", ";transition:background-color ", "ms;", "{opacity:1;transform:translateX(0);transition:opacity ", "ms,transform ", "ms;}}&-appear-done,&-enter-done{background-color:", ";}&-exit{background-color:", ";}&-exit-active{background-color:", ";transition:background-color ", "ms;", "{opacity:0;transform:translateX(100%);transition:opacity ", "ms,transform ", "ms;}}"], backdropHidden, DrawerInner, backdropVisible, animationTimeout, DrawerInner, animationTimeout, animationTimeout, backdropVisible, backdropVisible, backdropHidden, animationTimeout, DrawerInner, animationTimeout, animationTimeout);
73
67
  export const DrawerContainer = styled.div.withConfig({
74
68
  displayName: "DrawerContainer",
75
69
  componentId: "sc-n2uxwd-3"
package/DropdownMenu/components/DropdownMenuItem/DropdownMenuItem.js CHANGED
@@ -1,6 +1,7 @@
1
- import { jsx as _jsx } from "react/jsx-runtime";
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
2
  import { useContext } from 'react';
3
- import { DropdownMenuItemStyled } from './styles';
3
+ import { CheckIcon } from '@pushwoosh/kit-icons';
4
+ import { DropdownMenuItemStyled, DropdownMenuIconStyled } from './styles';
4
5
  import { DropdownContext } from '../../context';
5
6
  export const DropdownMenuItem = ({
6
7
  children,
@@ -16,7 +17,7 @@ export const DropdownMenuItem = ({
16
17
  console.error('DropdownMenuItem must be inside DropdownMenu');
17
18
  }
18
19
  }
19
- return _jsx(DropdownMenuItemStyled, {
20
+ return _jsxs(DropdownMenuItemStyled, {
20
21
  "$active": isActive,
21
22
  "$danger": isDanger,
22
23
  onClick: () => {
@@ -27,6 +28,10 @@ export const DropdownMenuItem = ({
27
28
  },
28
29
  disabled: disabled,
29
30
  "data-active": isActive || undefined,
30
- children: children
31
+ children: [children, isActive && _jsx(DropdownMenuIconStyled, {
32
+ children: _jsx(CheckIcon, {
33
+ size: "small"
34
+ })
35
+ })]
31
36
  });
32
37
  };
package/DropdownMenu/components/DropdownMenuItem/styles.d.ts CHANGED
@@ -1 +1 @@
1
- export { DropdownMenuItemStyled } from '../../shared/styles';
1
+ export { DropdownMenuItemStyled, DropdownMenuIconStyled } from '../../shared/styles';
package/DropdownMenu/components/DropdownMenuItem/styles.js CHANGED
@@ -1 +1 @@
1
- export { DropdownMenuItemStyled } from '../../shared/styles';
1
+ export { DropdownMenuItemStyled, DropdownMenuIconStyled } from '../../shared/styles';
package/DropdownMenu/shared/styles.d.ts CHANGED
@@ -20,3 +20,4 @@ export declare const DropdownMenuItemStyled: import("styled-components").StyledC
20
20
  $active?: boolean;
21
21
  $danger?: boolean;
22
22
  }, never>;
23
+ export declare const DropdownMenuIconStyled: import("styled-components").StyledComponent<"span", any, {}, never>;
package/DropdownMenu/shared/styles.js CHANGED
@@ -23,10 +23,14 @@ export const Place = styled(Vertical).withConfig({
23
23
  export const DropdownMenuItemStyled = styled.button.withConfig({
24
24
  displayName: "DropdownMenuItemStyled",
25
25
  componentId: "sc-hlq2pz-1"
26
- })(["appearance:none;display:flex;align-items:center;white-space:nowrap;padding:0 12px;min-height:", ";border:none;overflow:hidden;color:", ";background:none;cursor:pointer;&:hover{background:", ";color:", ";}&:disabled{color:", ";cursor:not-allowed;}"], UnitSize.FIELD_HEIGHT, ({
26
+ })(["appearance:none;display:flex;align-items:center;justify-content:space-between;gap:8px;white-space:nowrap;padding:0 12px;min-height:", ";border:none;overflow:hidden;color:", ";background:none;cursor:pointer;&:hover{background:", ";color:", ";}&:disabled{color:", ";cursor:not-allowed;}"], UnitSize.FIELD_HEIGHT, ({
27
27
  $active,
28
28
  $danger
29
29
  }) => {
30
30
  if ($danger) return Color.DANGER;
31
31
  return $active ? Color.PRIMARY : Color.MAIN;
32
- }, Color.SOFT_LIGHT, Color.MAIN, Color.LOCKED);
32
+ }, Color.SOFT_LIGHT, Color.MAIN, Color.LOCKED);
33
+ export const DropdownMenuIconStyled = styled.span.withConfig({
34
+ displayName: "DropdownMenuIconStyled",
35
+ componentId: "sc-hlq2pz-2"
36
+ })(["margin:-2px 0 0;line-height:0;"]);
package/Modal/components/Modal/styles.js CHANGED
@@ -4,12 +4,16 @@ import styled, { createGlobalStyle } from 'styled-components';
4
4
  import { ShapeRadius } from '@pushwoosh/kit-constants';
5
5
  const animationTimeout = 300;
6
6
  export const LockBody = createGlobalStyle(["body{overflow:hidden;position:relative;height:100%;}"]);
7
- export const ModalBox = styled.div.withConfig({
7
+ export const ModalBox = styled.div.attrs(({
8
+ $zIndex
9
+ }) => ({
10
+ style: {
11
+ zIndex: $zIndex
12
+ }
13
+ })).withConfig({
8
14
  displayName: "ModalBox",
9
15
  componentId: "sc-lejcgu-0"
10
- })(["position:fixed;top:0;left:0;width:100vw;height:100vh;pointer-events:all;z-index:", ";"], ({
11
- $zIndex
12
- }) => $zIndex);
16
+ })(["position:fixed;top:0;left:0;width:100vw;height:100vh;pointer-events:all;"]);
13
17
  export const ModalInner = styled.div.withConfig({
14
18
  displayName: "ModalInner",
15
19
  componentId: "sc-lejcgu-1"
@@ -31,10 +35,12 @@ function ModalBoxBase(props) {
31
35
  children: children
32
36
  });
33
37
  }
38
+ const backdropHidden = 'rgb(0 0 0 / 0%)';
39
+ const backdropVisible = 'rgb(0 0 0 / 70%)';
34
40
  export const ModalBoxTrans = styled(ModalBoxBase).withConfig({
35
41
  displayName: "ModalBoxTrans",
36
42
  componentId: "sc-lejcgu-2"
37
- })(["&-appear{background-color:rgb(0 0 0 / 0%);transition:background-color ", "ms;", "{opacity:0;transform:scale(0.5);}}&-appear-active{background-color:rgb(0 0 0 / 70%);", "{opacity:0.99;transform:scale(0.99);transition:opacity ", "ms,transform ", "ms;}}&-appear-done{background-color:rgb(0 0 0 / 70%);", "{opacity:1;transform:translateX(0);}}&-enter{background-color:rgb(0 0 0 / 0%);transition:background-color ", "ms;", "{opacity:0;transform:scale(0.5);}}&-enter-active{background-color:rgb(0 0 0 / 70%);", "{opacity:0.99;transform:scale(0.99);transition:opacity ", "ms,transform ", "ms;}}&-enter-done{background-color:rgb(0 0 0 / 70%);", "{opacity:1;transform:translateX(0);}}&-exit{background-color:rgba(0 0 0 / 70%);", "{opacity:1;transform:translateX(0);transition:opacity ", "ms,transform ", "ms;}}&-exit-active{transition:background-color ", "ms;background-color:rgb(0 0 0 / 0%);", "{opacity:0;transform:scale(0.5);}}"], animationTimeout, ModalInner, ModalInner, animationTimeout, animationTimeout, ModalInner, animationTimeout, ModalInner, ModalInner, animationTimeout, animationTimeout, ModalInner, ModalInner, animationTimeout, animationTimeout, animationTimeout, ModalInner);
43
+ })(["&-appear,&-enter{background-color:", ";", "{opacity:0;transform:scale(0.5);}}&-appear-active,&-enter-active{background-color:", ";transition:background-color ", "ms;", "{opacity:1;transform:scale(1);transition:opacity ", "ms,transform ", "ms;}}&-appear-done,&-enter-done{background-color:", ";}&-exit{background-color:", ";}&-exit-active{background-color:", ";transition:background-color ", "ms;", "{opacity:0;transform:scale(0.5);transition:opacity ", "ms,transform ", "ms;}}"], backdropHidden, ModalInner, backdropVisible, animationTimeout, ModalInner, animationTimeout, animationTimeout, backdropVisible, backdropVisible, backdropHidden, animationTimeout, ModalInner, animationTimeout, animationTimeout);
38
44
  export const ModalContainer = styled.div.withConfig({
39
45
  displayName: "ModalContainer",
40
46
  componentId: "sc-lejcgu-3"
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pushwoosh/dumb-components",
3
- "version": "1.1.136",
3
+ "version": "1.1.138",
4
4
  "description": "React components to build Pushwoosh products",
5
5
  "main": "index.js",
6
6
  "module": "index.js",