@pushwoosh/dumb-components 1.0.12 → 1.0.13
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.
- package/DropdownMenu/components/DropdownMenu/DropdownMenu.d.ts +3 -3
- package/DropdownMenu/components/DropdownMenu/DropdownMenu.js +44 -25
- package/DropdownMenu/components/DropdownMenu/index.d.ts +1 -1
- package/DropdownMenu/components/DropdownMenu/index.js +1 -1
- package/DropdownMenu/components/DropdownMenu/styles.d.ts +28 -0
- package/DropdownMenu/components/DropdownMenu/styles.js +13 -0
- package/DropdownMenu/components/DropdownMenu/types.d.ts +11 -21
- package/DropdownMenu/components/DropdownMenuButton/DropdownMenuButton.d.ts +3 -0
- package/DropdownMenu/components/DropdownMenuButton/DropdownMenuButton.js +25 -0
- package/DropdownMenu/components/DropdownMenuButton/index.d.ts +1 -0
- package/DropdownMenu/components/DropdownMenuButton/index.js +1 -0
- package/DropdownMenu/components/DropdownMenuButton/types.d.ts +14 -0
- package/DropdownMenu/components/DropdownMenuItem/DropdownMenuItem.d.ts +3 -5
- package/DropdownMenu/components/DropdownMenuItem/DropdownMenuItem.js +25 -37
- package/DropdownMenu/components/DropdownMenuItem/index.d.ts +0 -2
- package/DropdownMenu/components/DropdownMenuItem/index.js +1 -2
- package/DropdownMenu/components/DropdownMenuItem/styles.d.ts +3 -4
- package/DropdownMenu/components/DropdownMenuItem/styles.js +9 -70
- package/DropdownMenu/components/DropdownMenuItem/types.d.ts +7 -24
- package/DropdownMenu/context.d.ts +1 -0
- package/DropdownMenu/context.js +2 -0
- package/DropdownMenu/index.d.ts +3 -9
- package/DropdownMenu/index.js +3 -9
- package/Table/hooks/helpers.d.ts +3 -0
- package/Table/hooks/helpers.js +9 -0
- package/Table/hooks/useDataTableGetParams.d.ts +2 -2
- package/Table/hooks/useDataTableGetParams.js +16 -23
- package/index.d.ts +1 -1
- package/index.js +1 -1
- package/package.json +2 -1
- package/DropdownMenu/components/DropdownMenu/hooks.d.ts +0 -4
- package/DropdownMenu/components/DropdownMenu/hooks.js +0 -10
- package/DropdownMenu/components/DropdownMenuContainer/DropdownMenuContainer.d.ts +0 -3
- package/DropdownMenu/components/DropdownMenuContainer/DropdownMenuContainer.js +0 -79
- package/DropdownMenu/components/DropdownMenuContainer/index.d.ts +0 -1
- package/DropdownMenu/components/DropdownMenuContainer/index.js +0 -1
- package/DropdownMenu/components/DropdownMenuContainer/maps.d.ts +0 -26
- package/DropdownMenu/components/DropdownMenuContainer/maps.js +0 -11
- package/DropdownMenu/components/DropdownMenuContainer/styles.d.ts +0 -35
- package/DropdownMenu/components/DropdownMenuContainer/styles.js +0 -109
- package/DropdownMenu/components/DropdownMenuContainer/types.d.ts +0 -19
- package/DropdownMenu/components/DropdownMenuGroup/DropdownMenuGroup.d.ts +0 -3
- package/DropdownMenu/components/DropdownMenuGroup/DropdownMenuGroup.js +0 -12
- package/DropdownMenu/components/DropdownMenuGroup/index.d.ts +0 -1
- package/DropdownMenu/components/DropdownMenuGroup/index.js +0 -1
- package/DropdownMenu/components/DropdownMenuGroup/styles.d.ts +0 -1
- package/DropdownMenu/components/DropdownMenuGroup/styles.js +0 -7
- package/DropdownMenu/components/DropdownMenuGroup/types.d.ts +0 -5
- package/DropdownMenu/components/DropdownMenuGroup/types.js +0 -1
- package/DropdownMenu/components/DropdownMenuItemCheckbox/DropdownMenuItemCheckbox.d.ts +0 -3
- package/DropdownMenu/components/DropdownMenuItemCheckbox/DropdownMenuItemCheckbox.js +0 -9
- package/DropdownMenu/components/DropdownMenuItemCheckbox/index.d.ts +0 -1
- package/DropdownMenu/components/DropdownMenuItemCheckbox/index.js +0 -1
- package/DropdownMenu/components/DropdownMenuItemCheckbox/styles.d.ts +0 -1
- package/DropdownMenu/components/DropdownMenuItemCheckbox/styles.js +0 -8
- package/DropdownMenu/components/DropdownMenuItemPick/DropdownMenuItemPick.d.ts +0 -3
- package/DropdownMenu/components/DropdownMenuItemPick/DropdownMenuItemPick.js +0 -16
- package/DropdownMenu/components/DropdownMenuItemPick/index.d.ts +0 -1
- package/DropdownMenu/components/DropdownMenuItemPick/index.js +0 -1
- package/DropdownMenu/components/DropdownMenuItemPick/styles.d.ts +0 -3
- package/DropdownMenu/components/DropdownMenuItemPick/styles.js +0 -8
- package/DropdownMenu/components/DropdownMenuItemPick/types.d.ts +0 -2
- package/DropdownMenu/components/DropdownMenuItemPick/types.js +0 -1
- package/DropdownMenu/components/DropdownMenuItemRadio/DropdownMenuItemRadio.d.ts +0 -3
- package/DropdownMenu/components/DropdownMenuItemRadio/DropdownMenuItemRadio.js +0 -9
- package/DropdownMenu/components/DropdownMenuItemRadio/index.d.ts +0 -1
- package/DropdownMenu/components/DropdownMenuItemRadio/index.js +0 -1
- package/DropdownMenu/components/DropdownMenuItemRadio/styles.d.ts +0 -1
- package/DropdownMenu/components/DropdownMenuItemRadio/styles.js +0 -8
- package/DropdownMenu/components/DropdownMenuNested/DropdownMenuNested.d.ts +0 -3
- package/DropdownMenu/components/DropdownMenuNested/DropdownMenuNested.js +0 -69
- package/DropdownMenu/components/DropdownMenuNested/index.d.ts +0 -1
- package/DropdownMenu/components/DropdownMenuNested/index.js +0 -1
- package/DropdownMenu/components/DropdownMenuNested/styles.d.ts +0 -8
- package/DropdownMenu/components/DropdownMenuNested/styles.js +0 -35
- package/DropdownMenu/components/DropdownMenuNested/types.d.ts +0 -6
- package/DropdownMenu/components/DropdownMenuNested/types.js +0 -1
- package/DropdownMenu/components/DropdownMenuWindow/DropdownMenuWindow.d.ts +0 -3
- package/DropdownMenu/components/DropdownMenuWindow/DropdownMenuWindow.js +0 -12
- package/DropdownMenu/components/DropdownMenuWindow/index.d.ts +0 -1
- package/DropdownMenu/components/DropdownMenuWindow/index.js +0 -1
- package/DropdownMenu/components/DropdownMenuWindow/styles.d.ts +0 -1
- package/DropdownMenu/components/DropdownMenuWindow/styles.js +0 -7
- package/DropdownMenu/components/DropdownMenuWindow/types.d.ts +0 -5
- package/DropdownMenu/components/DropdownMenuWindow/types.js +0 -1
- /package/DropdownMenu/components/{DropdownMenuContainer → DropdownMenuButton}/types.js +0 -0
|
@@ -1,79 +0,0 @@
|
|
|
1
|
-
import React, { useLayoutEffect, useRef } from 'react';
|
|
2
|
-
import { DropdownIcon as Icon } from '@pushwoosh/kit-icons';
|
|
3
|
-
import { useOnClickOutside, useElementWidth } from '../../../hooks';
|
|
4
|
-
import { useDropdownMenuContext } from '../DropdownMenu';
|
|
5
|
-
import { DropdownMenuContainerButtonMap } from './maps';
|
|
6
|
-
import { DropdownMenuContainerBox, DropdownMenuContainerChevron, DropdownMenuContainerIcon, DropdownMenuContainerPortal, DropdownMenuContainerTitle, DropdownMenuContainerWindow } from './styles';
|
|
7
|
-
export function DropdownMenuContainer(props) {
|
|
8
|
-
const {
|
|
9
|
-
boxRef,
|
|
10
|
-
title,
|
|
11
|
-
color,
|
|
12
|
-
view,
|
|
13
|
-
minimal,
|
|
14
|
-
windowZIndex,
|
|
15
|
-
windowPlacement = 'bottom-start',
|
|
16
|
-
isDisabled,
|
|
17
|
-
hideChevron = false,
|
|
18
|
-
icon,
|
|
19
|
-
iconPlacement = 'left',
|
|
20
|
-
children,
|
|
21
|
-
isOpen,
|
|
22
|
-
onChangeIsOpen,
|
|
23
|
-
...rest
|
|
24
|
-
} = props;
|
|
25
|
-
const DropdownMenuContainerButton = DropdownMenuContainerButtonMap[color][view];
|
|
26
|
-
const {
|
|
27
|
-
closeDropdown
|
|
28
|
-
} = useDropdownMenuContext();
|
|
29
|
-
const internalButtonRef = useRef(null);
|
|
30
|
-
const internalWindowRef = useRef(null);
|
|
31
|
-
const [buttonWidth, recalculateWidth] = useElementWidth(internalButtonRef);
|
|
32
|
-
useOnClickOutside([internalButtonRef, internalWindowRef], closeDropdown);
|
|
33
|
-
useLayoutEffect(() => {
|
|
34
|
-
recalculateWidth();
|
|
35
|
-
}, [recalculateWidth, title]);
|
|
36
|
-
return React.createElement(DropdownMenuContainerBox, {
|
|
37
|
-
...rest,
|
|
38
|
-
ref: boxRef
|
|
39
|
-
}, React.createElement(DropdownMenuContainerButton, {
|
|
40
|
-
type: "button",
|
|
41
|
-
disabled: isDisabled,
|
|
42
|
-
isDisabled: isDisabled,
|
|
43
|
-
isActive: isOpen,
|
|
44
|
-
onClick: () => onChangeIsOpen(!isOpen),
|
|
45
|
-
minimal: minimal,
|
|
46
|
-
ref: internalButtonRef
|
|
47
|
-
}, icon && iconPlacement === 'left' && React.createElement(DropdownMenuContainerIcon, null, icon), title && React.createElement(React.Fragment, null, React.createElement(DropdownMenuContainerTitle, {
|
|
48
|
-
hideChevron: hideChevron
|
|
49
|
-
}, title), !hideChevron && React.createElement(DropdownMenuContainerChevron, null, React.createElement(Icon, {
|
|
50
|
-
direction: "down",
|
|
51
|
-
size: "small"
|
|
52
|
-
}))), icon && iconPlacement === 'right' && React.createElement(DropdownMenuContainerIcon, null, icon)), React.createElement(DropdownMenuContainerPortal, {
|
|
53
|
-
animation: false,
|
|
54
|
-
delay: 0,
|
|
55
|
-
duration: 0,
|
|
56
|
-
placement: windowPlacement,
|
|
57
|
-
reference: internalButtonRef,
|
|
58
|
-
visible: isOpen,
|
|
59
|
-
zIndex: windowZIndex,
|
|
60
|
-
content: React.createElement(DropdownMenuContainerWindow, {
|
|
61
|
-
"$minWidth": buttonWidth,
|
|
62
|
-
ref: internalWindowRef
|
|
63
|
-
}, isOpen && children),
|
|
64
|
-
popperOptions: {
|
|
65
|
-
strategy: 'fixed',
|
|
66
|
-
modifiers: [{
|
|
67
|
-
name: 'offset',
|
|
68
|
-
options: {
|
|
69
|
-
offset: [0, 4]
|
|
70
|
-
}
|
|
71
|
-
}, {
|
|
72
|
-
name: 'preventOverflow',
|
|
73
|
-
options: {
|
|
74
|
-
mainAxis: false
|
|
75
|
-
}
|
|
76
|
-
}]
|
|
77
|
-
}
|
|
78
|
-
}));
|
|
79
|
-
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { DropdownMenuContainer } from './DropdownMenuContainer';
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { DropdownMenuContainer } from './DropdownMenuContainer';
|
|
@@ -1,26 +0,0 @@
|
|
|
1
|
-
export declare const DropdownMenuContainerButtonMap: {
|
|
2
|
-
primary: {
|
|
3
|
-
ghost: import("styled-components").StyledComponent<"button", any, {
|
|
4
|
-
isDisabled?: boolean;
|
|
5
|
-
isActive: boolean;
|
|
6
|
-
minimal?: boolean;
|
|
7
|
-
}, never>;
|
|
8
|
-
shape: import("styled-components").StyledComponent<"button", any, {
|
|
9
|
-
isDisabled?: boolean;
|
|
10
|
-
isActive: boolean;
|
|
11
|
-
minimal?: boolean;
|
|
12
|
-
}, never>;
|
|
13
|
-
};
|
|
14
|
-
secondary: {
|
|
15
|
-
ghost: import("styled-components").StyledComponent<"button", any, {
|
|
16
|
-
isDisabled?: boolean;
|
|
17
|
-
isActive: boolean;
|
|
18
|
-
minimal?: boolean;
|
|
19
|
-
}, never>;
|
|
20
|
-
shape: import("styled-components").StyledComponent<"button", any, {
|
|
21
|
-
isDisabled?: boolean;
|
|
22
|
-
isActive: boolean;
|
|
23
|
-
minimal?: boolean;
|
|
24
|
-
}, never>;
|
|
25
|
-
};
|
|
26
|
-
};
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
import { DropdownMenuContainerButtonPrimaryGhost, DropdownMenuContainerButtonPrimaryShape, DropdownMenuContainerButtonSecondaryGhost, DropdownMenuContainerButtonSecondaryShape } from './styles';
|
|
2
|
-
export const DropdownMenuContainerButtonMap = {
|
|
3
|
-
primary: {
|
|
4
|
-
ghost: DropdownMenuContainerButtonPrimaryGhost,
|
|
5
|
-
shape: DropdownMenuContainerButtonPrimaryShape
|
|
6
|
-
},
|
|
7
|
-
secondary: {
|
|
8
|
-
ghost: DropdownMenuContainerButtonSecondaryGhost,
|
|
9
|
-
shape: DropdownMenuContainerButtonSecondaryShape
|
|
10
|
-
}
|
|
11
|
-
};
|
|
@@ -1,35 +0,0 @@
|
|
|
1
|
-
export declare const DropdownMenuContainerBox: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
2
|
-
export declare const DropdownMenuContainerButton: import("styled-components").StyledComponent<"button", any, {
|
|
3
|
-
isDisabled?: boolean;
|
|
4
|
-
isActive: boolean;
|
|
5
|
-
minimal?: boolean;
|
|
6
|
-
}, never>;
|
|
7
|
-
export declare const DropdownMenuContainerButtonPrimaryGhost: import("styled-components").StyledComponent<"button", any, {
|
|
8
|
-
isDisabled?: boolean;
|
|
9
|
-
isActive: boolean;
|
|
10
|
-
minimal?: boolean;
|
|
11
|
-
}, never>;
|
|
12
|
-
export declare const DropdownMenuContainerButtonPrimaryShape: import("styled-components").StyledComponent<"button", any, {
|
|
13
|
-
isDisabled?: boolean;
|
|
14
|
-
isActive: boolean;
|
|
15
|
-
minimal?: boolean;
|
|
16
|
-
}, never>;
|
|
17
|
-
export declare const DropdownMenuContainerButtonSecondaryGhost: import("styled-components").StyledComponent<"button", any, {
|
|
18
|
-
isDisabled?: boolean;
|
|
19
|
-
isActive: boolean;
|
|
20
|
-
minimal?: boolean;
|
|
21
|
-
}, never>;
|
|
22
|
-
export declare const DropdownMenuContainerButtonSecondaryShape: import("styled-components").StyledComponent<"button", any, {
|
|
23
|
-
isDisabled?: boolean;
|
|
24
|
-
isActive: boolean;
|
|
25
|
-
minimal?: boolean;
|
|
26
|
-
}, never>;
|
|
27
|
-
export declare const DropdownMenuContainerIcon: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
28
|
-
export declare const DropdownMenuContainerTitle: import("styled-components").StyledComponent<"div", any, {
|
|
29
|
-
hideChevron: boolean;
|
|
30
|
-
}, never>;
|
|
31
|
-
export declare const DropdownMenuContainerChevron: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
32
|
-
export declare const DropdownMenuContainerPortal: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@tippyjs/react").TippyProps>, any, {}, never>;
|
|
33
|
-
export declare const DropdownMenuContainerWindow: import("styled-components").StyledComponent<"div", any, {
|
|
34
|
-
$minWidth?: number | null;
|
|
35
|
-
}, never>;
|
|
@@ -1,109 +0,0 @@
|
|
|
1
|
-
import Tippy from '@tippyjs/react';
|
|
2
|
-
import styled from 'styled-components';
|
|
3
|
-
import { Color, FontSize, FontWeight, LineHeight, ShapeRadius, Spacing, UnitSize } from '@pushwoosh/kit-constants';
|
|
4
|
-
export const DropdownMenuContainerBox = styled.div.withConfig({
|
|
5
|
-
displayName: "DropdownMenuContainerBox",
|
|
6
|
-
componentId: "sc-1vy81n-0"
|
|
7
|
-
})(["position:relative;max-width:100%;"]);
|
|
8
|
-
export const DropdownMenuContainerButton = styled.button.withConfig({
|
|
9
|
-
displayName: "DropdownMenuContainerButton",
|
|
10
|
-
componentId: "sc-1vy81n-1"
|
|
11
|
-
})(["display:flex;flex-wrap:nowrap;align-items:center;justify-content:flex-start;max-width:100%;height:", ";padding:0 ", ";border:1px solid transparent;border-radius:", ";font-size:", ";font-weight:", ";line-height:", ";cursor:pointer;user-select:none;&:focus{outline:none;}&:disabled{cursor:not-allowed;}"], ({
|
|
12
|
-
minimal
|
|
13
|
-
}) => minimal ? UnitSize.ICON_MEDIUM : UnitSize.FIELD_HEIGHT, ({
|
|
14
|
-
minimal
|
|
15
|
-
}) => minimal ? 0 : `calc(${Spacing.S2} - 1px)`, ShapeRadius.CONTROL, FontSize.REGULAR, FontWeight.MEDIUM, LineHeight.REGULAR);
|
|
16
|
-
export const DropdownMenuContainerButtonPrimaryGhost = styled(DropdownMenuContainerButton).withConfig({
|
|
17
|
-
displayName: "DropdownMenuContainerButtonPrimaryGhost",
|
|
18
|
-
componentId: "sc-1vy81n-2"
|
|
19
|
-
})(["color:", ";background-color:", ";&:hover{color:", ";background-color:", ";}&:active{color:", ";background-color:", ";}&:disabled{color:", ";background-color:transparent;}"], ({
|
|
20
|
-
isActive
|
|
21
|
-
}) => isActive ? Color.CLEAR : Color.PRIMARY, ({
|
|
22
|
-
isActive
|
|
23
|
-
}) => isActive ? Color.MAIN : 'transparent', ({
|
|
24
|
-
isActive
|
|
25
|
-
}) => isActive ? Color.CLEAR : Color.PRIMARY_HOVER, ({
|
|
26
|
-
isActive
|
|
27
|
-
}) => isActive ? Color.MAIN : Color.BRIGHT_LIGHT, ({
|
|
28
|
-
isActive
|
|
29
|
-
}) => isActive ? Color.CLEAR : Color.PRIMARY_PRESSED, ({
|
|
30
|
-
isActive
|
|
31
|
-
}) => isActive ? Color.MAIN : Color.BRIGHT_LIGHT, Color.LOCKED);
|
|
32
|
-
export const DropdownMenuContainerButtonPrimaryShape = styled(DropdownMenuContainerButton).withConfig({
|
|
33
|
-
displayName: "DropdownMenuContainerButtonPrimaryShape",
|
|
34
|
-
componentId: "sc-1vy81n-3"
|
|
35
|
-
})(["color:", ";background-color:", ";&:hover{background-color:", ";}&:active{background-color:", ";}&:disabled{background-color:", ";}"], Color.CLEAR, ({
|
|
36
|
-
isActive
|
|
37
|
-
}) => isActive ? Color.MAIN : Color.PRIMARY, ({
|
|
38
|
-
isActive
|
|
39
|
-
}) => isActive ? Color.MAIN : Color.PRIMARY_HOVER, ({
|
|
40
|
-
isActive
|
|
41
|
-
}) => isActive ? Color.MAIN : Color.PRIMARY_PRESSED, Color.LOCKED);
|
|
42
|
-
export const DropdownMenuContainerButtonSecondaryGhost = styled(DropdownMenuContainerButton).withConfig({
|
|
43
|
-
displayName: "DropdownMenuContainerButtonSecondaryGhost",
|
|
44
|
-
componentId: "sc-1vy81n-4"
|
|
45
|
-
})(["color:", ";background-color:", ";&:hover{color:", ";background-color:", ";}&:active{color:", ";background-color:", ";}&:disabled{color:", ";background-color:transparent;}"], ({
|
|
46
|
-
isActive
|
|
47
|
-
}) => isActive ? Color.CLEAR : Color.MAIN, ({
|
|
48
|
-
isActive
|
|
49
|
-
}) => isActive ? Color.MAIN : 'transparent', ({
|
|
50
|
-
isActive
|
|
51
|
-
}) => isActive ? Color.CLEAR : Color.PRIMARY_HOVER, ({
|
|
52
|
-
isActive
|
|
53
|
-
}) => isActive ? Color.MAIN : Color.BRIGHT_LIGHT, ({
|
|
54
|
-
isActive
|
|
55
|
-
}) => isActive ? Color.CLEAR : Color.PRIMARY_PRESSED, ({
|
|
56
|
-
isActive
|
|
57
|
-
}) => isActive ? Color.MAIN : Color.BRIGHT_LIGHT, Color.LOCKED);
|
|
58
|
-
export const DropdownMenuContainerButtonSecondaryShape = styled(DropdownMenuContainerButton).withConfig({
|
|
59
|
-
displayName: "DropdownMenuContainerButtonSecondaryShape",
|
|
60
|
-
componentId: "sc-1vy81n-5"
|
|
61
|
-
})(["border:1px solid ", ";color:", ";background-color:", ";&:hover{color:", ";background-color:", ";}&:active{color:", ";background-color:", ";}&:disabled{color:", ";background-color:", ";}"], ({
|
|
62
|
-
isActive
|
|
63
|
-
}) => isActive ? 'transparent' : Color.FORM, ({
|
|
64
|
-
isActive
|
|
65
|
-
}) => isActive ? Color.CLEAR : Color.MAIN, ({
|
|
66
|
-
isActive
|
|
67
|
-
}) => isActive ? Color.MAIN : Color.FROZEN, ({
|
|
68
|
-
isActive
|
|
69
|
-
}) => isActive ? Color.CLEAR : Color.PRIMARY, ({
|
|
70
|
-
isActive
|
|
71
|
-
}) => isActive ? Color.MAIN : Color.FROZEN, ({
|
|
72
|
-
isActive
|
|
73
|
-
}) => isActive ? Color.CLEAR : Color.MAIN, ({
|
|
74
|
-
isActive
|
|
75
|
-
}) => isActive ? Color.MAIN : Color.FORM, Color.LOCKED, Color.FROZEN);
|
|
76
|
-
export const DropdownMenuContainerIcon = styled.div.withConfig({
|
|
77
|
-
displayName: "DropdownMenuContainerIcon",
|
|
78
|
-
componentId: "sc-1vy81n-6"
|
|
79
|
-
})(["flex:0 0 auto;"]);
|
|
80
|
-
export const DropdownMenuContainerTitle = styled.div.withConfig({
|
|
81
|
-
displayName: "DropdownMenuContainerTitle",
|
|
82
|
-
componentId: "sc-1vy81n-7"
|
|
83
|
-
})(["flex:1 1 auto;padding:", ";white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left;", " + &{padding:0 0 0 ", ";}"], ({
|
|
84
|
-
hideChevron
|
|
85
|
-
}) => hideChevron ? `0 ${Spacing.S2}` : `0 0 0 ${Spacing.S2}`, /* sc-selector */DropdownMenuContainerIcon, Spacing.S1);
|
|
86
|
-
export const DropdownMenuContainerChevron = styled.div.withConfig({
|
|
87
|
-
displayName: "DropdownMenuContainerChevron",
|
|
88
|
-
componentId: "sc-1vy81n-8"
|
|
89
|
-
})(["flex:0 0 auto;padding:0 ", " 0 ", ";"], Spacing.S0, Spacing.S1);
|
|
90
|
-
export const DropdownMenuContainerPortal = styled(Tippy).withConfig({
|
|
91
|
-
displayName: "DropdownMenuContainerPortal",
|
|
92
|
-
componentId: "sc-1vy81n-9"
|
|
93
|
-
})(["pointer-events:all;.tippy-box{position:static;background-color:transparent;color:inherit;border-radius:0;font-size:inherit;line-height:inherit;outline:0;transition:none;}.tippy-content{position:static;padding:0;z-index:auto;}.tippy-arrow{display:none;}"]);
|
|
94
|
-
export const DropdownMenuContainerWindow = styled.div.withConfig({
|
|
95
|
-
displayName: "DropdownMenuContainerWindow",
|
|
96
|
-
componentId: "sc-1vy81n-10"
|
|
97
|
-
})(["min-width:", ";"], ({
|
|
98
|
-
$minWidth
|
|
99
|
-
}) => $minWidth ? `${$minWidth}px` : 'auto');
|
|
100
|
-
DropdownMenuContainerBox.displayName = 'DropdownMenuContainerBox';
|
|
101
|
-
DropdownMenuContainerButton.displayName = 'DropdownMenuContainerButton';
|
|
102
|
-
DropdownMenuContainerButtonPrimaryGhost.displayName = 'DropdownMenuContainerButtonPrimaryGhost';
|
|
103
|
-
DropdownMenuContainerButtonPrimaryShape.displayName = 'DropdownMenuContainerButtonPrimaryShape';
|
|
104
|
-
DropdownMenuContainerButtonSecondaryGhost.displayName = 'DropdownMenuContainerButtonSecondaryGhost';
|
|
105
|
-
DropdownMenuContainerButtonSecondaryShape.displayName = 'DropdownMenuContainerButtonSecondaryShape';
|
|
106
|
-
DropdownMenuContainerIcon.displayName = 'DropdownMenuContainerIcon';
|
|
107
|
-
DropdownMenuContainerTitle.displayName = 'DropdownMenuContainerTitle';
|
|
108
|
-
DropdownMenuContainerChevron.displayName = 'DropdownMenuContainerChevron';
|
|
109
|
-
DropdownMenuContainerWindow.displayName = 'DropdownMenuContainerWindow';
|
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
import type { Ref, ReactNode } from 'react';
|
|
2
|
-
type WindowPlacement = 'auto' | 'auto-start' | 'auto-end' | 'top' | 'bottom' | 'right' | 'left' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'right-start' | 'right-end' | 'left-start' | 'left-end';
|
|
3
|
-
export type DropdownMenuContainerProps = {
|
|
4
|
-
readonly boxRef?: Ref<HTMLDivElement>;
|
|
5
|
-
readonly title?: ReactNode;
|
|
6
|
-
readonly color: 'primary' | 'secondary';
|
|
7
|
-
readonly view: 'shape' | 'ghost';
|
|
8
|
-
readonly minimal?: boolean;
|
|
9
|
-
readonly hideChevron?: boolean;
|
|
10
|
-
readonly icon?: ReactNode;
|
|
11
|
-
readonly iconPlacement?: 'left' | 'right';
|
|
12
|
-
readonly windowPlacement: WindowPlacement;
|
|
13
|
-
readonly windowZIndex: number;
|
|
14
|
-
readonly isDisabled?: boolean;
|
|
15
|
-
readonly isOpen: boolean;
|
|
16
|
-
readonly onChangeIsOpen: (isOpen: boolean) => any;
|
|
17
|
-
readonly children: ReactNode;
|
|
18
|
-
};
|
|
19
|
-
export {};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { DropdownMenuGroup } from './DropdownMenuGroup';
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { DropdownMenuGroup } from './DropdownMenuGroup';
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export declare const DropdownMenuGroupBox: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
import styled from 'styled-components';
|
|
2
|
-
import { Color, Spacing } from '@pushwoosh/kit-constants';
|
|
3
|
-
export const DropdownMenuGroupBox = styled.div.withConfig({
|
|
4
|
-
displayName: "DropdownMenuGroupBox",
|
|
5
|
-
componentId: "sc-hgafu1-0"
|
|
6
|
-
})(["padding:", " 0;& + &{border-top:1px solid ", ";}"], Spacing.S3, Color.FORM);
|
|
7
|
-
DropdownMenuGroupBox.displayName = 'DropdownMenuGroupBox';
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { DropdownMenuItemCheckboxBox } from './styles';
|
|
3
|
-
import { Checkbox } from '../../../Checkbox';
|
|
4
|
-
export function DropdownMenuItemCheckbox(props) {
|
|
5
|
-
return React.createElement(DropdownMenuItemCheckboxBox, null, React.createElement(Checkbox, {
|
|
6
|
-
color: "main",
|
|
7
|
-
...props
|
|
8
|
-
}));
|
|
9
|
-
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { DropdownMenuItemCheckbox } from './DropdownMenuItemCheckbox';
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { DropdownMenuItemCheckbox } from './DropdownMenuItemCheckbox';
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export declare const DropdownMenuItemCheckboxBox: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
import styled from 'styled-components';
|
|
2
|
-
import { FontWeight, Spacing } from '@pushwoosh/kit-constants';
|
|
3
|
-
import { DropdownMenuItemBox } from '../DropdownMenuItem';
|
|
4
|
-
export const DropdownMenuItemCheckboxBox = styled.div.withConfig({
|
|
5
|
-
displayName: "DropdownMenuItemCheckboxBox",
|
|
6
|
-
componentId: "sc-wl9da7-0"
|
|
7
|
-
})(["padding:", " ", ";", "{padding:", " ", " ", " calc(", " - 3px);}label{font-weight:", ";}"], Spacing.S1, Spacing.S3, DropdownMenuItemBox, Spacing.S3, Spacing.S4, Spacing.S3, Spacing.S4, FontWeight.REGULAR);
|
|
8
|
-
DropdownMenuItemCheckboxBox.displayName = 'DropdownMenuItemCheckboxBox';
|
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { Radio } from '../../../Radio';
|
|
3
|
-
import { DropdownMenuItem } from '../DropdownMenuItem';
|
|
4
|
-
import { DropdownMenuItemPickBox } from './styles';
|
|
5
|
-
export function DropdownMenuItemPick(props) {
|
|
6
|
-
const {
|
|
7
|
-
isChecked
|
|
8
|
-
} = props;
|
|
9
|
-
return React.createElement(DropdownMenuItemPickBox, {
|
|
10
|
-
"$isChecked": isChecked
|
|
11
|
-
}, React.createElement(DropdownMenuItem, {
|
|
12
|
-
as: Radio,
|
|
13
|
-
...props,
|
|
14
|
-
color: "main"
|
|
15
|
-
}));
|
|
16
|
-
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { DropdownMenuItemPick } from './DropdownMenuItemPick';
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { DropdownMenuItemPick } from './DropdownMenuItemPick';
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
import styled from 'styled-components';
|
|
2
|
-
import { DropdownMenuItemBox } from '../DropdownMenuItem';
|
|
3
|
-
export const DropdownMenuItemPickBox = styled.div.withConfig({
|
|
4
|
-
displayName: "DropdownMenuItemPickBox",
|
|
5
|
-
componentId: "sc-k4izj2-0"
|
|
6
|
-
})(["", "{pointer-events:", ";}"], DropdownMenuItemBox, ({
|
|
7
|
-
$isChecked
|
|
8
|
-
}) => $isChecked ? 'none' : 'all');
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { DropdownMenuItemRadioBox } from './styles';
|
|
3
|
-
import { Radio } from '../../../Radio';
|
|
4
|
-
export function DropdownMenuItemRadio(props) {
|
|
5
|
-
return React.createElement(DropdownMenuItemRadioBox, null, React.createElement(Radio, {
|
|
6
|
-
color: "main",
|
|
7
|
-
...props
|
|
8
|
-
}));
|
|
9
|
-
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { DropdownMenuItemRadio } from './DropdownMenuItemRadio';
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { DropdownMenuItemRadio } from './DropdownMenuItemRadio';
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export declare const DropdownMenuItemRadioBox: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
import styled from 'styled-components';
|
|
2
|
-
import { FontWeight, Spacing } from '@pushwoosh/kit-constants';
|
|
3
|
-
import { DropdownMenuItemBox } from '../DropdownMenuItem';
|
|
4
|
-
export const DropdownMenuItemRadioBox = styled.div.withConfig({
|
|
5
|
-
displayName: "DropdownMenuItemRadioBox",
|
|
6
|
-
componentId: "sc-xu32yy-0"
|
|
7
|
-
})(["padding:", " ", ";", "{padding:", " ", " ", " calc(", " - 3px);}label{font-weight:", ";}input{flex-shrink:0;}"], Spacing.S1, Spacing.S3, DropdownMenuItemBox, Spacing.S3, Spacing.S4, Spacing.S3, Spacing.S4, FontWeight.REGULAR);
|
|
8
|
-
DropdownMenuItemRadioBox.displayName = 'DropdownMenuItemRadioBox';
|
|
@@ -1,69 +0,0 @@
|
|
|
1
|
-
import React, { useCallback, useRef, useState } from 'react';
|
|
2
|
-
import { ChevronIcon } from '@pushwoosh/kit-icons';
|
|
3
|
-
import { useDropdownMenuContext } from '../DropdownMenu';
|
|
4
|
-
import { DropdownMenuNestedBox, DropdownMenuNestedButton, DropdownMenuNestedTitle, DropdownMenuNestedIcon, DropdownMenuNestedPortal, DropdownMenuNestedWindow } from './styles';
|
|
5
|
-
export function DropdownMenuNested(props) {
|
|
6
|
-
const {
|
|
7
|
-
boxRef,
|
|
8
|
-
title,
|
|
9
|
-
onMouseEnter,
|
|
10
|
-
onMouseLeave,
|
|
11
|
-
children,
|
|
12
|
-
...rest
|
|
13
|
-
} = props;
|
|
14
|
-
const {
|
|
15
|
-
windowZIndex
|
|
16
|
-
} = useDropdownMenuContext();
|
|
17
|
-
const [isOpen, setIsOpen] = useState(false);
|
|
18
|
-
const internalButtonRef = useRef(null);
|
|
19
|
-
const handleMouseEnter = useCallback(event => {
|
|
20
|
-
setIsOpen(true);
|
|
21
|
-
onMouseEnter === null || onMouseEnter === void 0 || onMouseEnter(event);
|
|
22
|
-
}, [onMouseEnter]);
|
|
23
|
-
const handleMouseLeave = useCallback(event => {
|
|
24
|
-
setIsOpen(false);
|
|
25
|
-
onMouseLeave === null || onMouseLeave === void 0 || onMouseLeave(event);
|
|
26
|
-
}, [onMouseLeave]);
|
|
27
|
-
return React.createElement(DropdownMenuNestedBox, {
|
|
28
|
-
onMouseEnter: handleMouseEnter,
|
|
29
|
-
onMouseLeave: handleMouseLeave,
|
|
30
|
-
ref: boxRef,
|
|
31
|
-
...rest
|
|
32
|
-
}, React.createElement(DropdownMenuNestedButton, {
|
|
33
|
-
"$isActive": isOpen,
|
|
34
|
-
ref: internalButtonRef
|
|
35
|
-
}, React.createElement(DropdownMenuNestedTitle, null, title), React.createElement(DropdownMenuNestedIcon, null, React.createElement(ChevronIcon, {
|
|
36
|
-
size: "small",
|
|
37
|
-
direction: "right"
|
|
38
|
-
}))), React.createElement(DropdownMenuNestedPortal, {
|
|
39
|
-
animation: false,
|
|
40
|
-
interactive: true,
|
|
41
|
-
delay: 0,
|
|
42
|
-
duration: 0,
|
|
43
|
-
placement: "right-start",
|
|
44
|
-
reference: internalButtonRef,
|
|
45
|
-
visible: isOpen,
|
|
46
|
-
zIndex: windowZIndex,
|
|
47
|
-
content: React.createElement(DropdownMenuNestedWindow, null, children),
|
|
48
|
-
popperOptions: {
|
|
49
|
-
strategy: 'fixed',
|
|
50
|
-
modifiers: [{
|
|
51
|
-
name: 'offset',
|
|
52
|
-
options: {
|
|
53
|
-
offset: [-8, 0]
|
|
54
|
-
}
|
|
55
|
-
}, {
|
|
56
|
-
name: 'preventOverflow',
|
|
57
|
-
options: {
|
|
58
|
-
mainAxis: true,
|
|
59
|
-
altAxis: true
|
|
60
|
-
}
|
|
61
|
-
}, {
|
|
62
|
-
name: 'flip',
|
|
63
|
-
options: {
|
|
64
|
-
fallbackPlacements: []
|
|
65
|
-
}
|
|
66
|
-
}]
|
|
67
|
-
}
|
|
68
|
-
}));
|
|
69
|
-
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { DropdownMenuNested } from './DropdownMenuNested';
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { DropdownMenuNested } from './DropdownMenuNested';
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
export declare const DropdownMenuNestedBox: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
2
|
-
export declare const DropdownMenuNestedButton: import("styled-components").StyledComponent<"div", any, {
|
|
3
|
-
$isActive: boolean;
|
|
4
|
-
}, never>;
|
|
5
|
-
export declare const DropdownMenuNestedTitle: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
6
|
-
export declare const DropdownMenuNestedIcon: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
7
|
-
export declare const DropdownMenuNestedPortal: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@tippyjs/react").TippyProps>, any, {}, never>;
|
|
8
|
-
export declare const DropdownMenuNestedWindow: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
@@ -1,35 +0,0 @@
|
|
|
1
|
-
import Tippy from '@tippyjs/react';
|
|
2
|
-
import styled from 'styled-components';
|
|
3
|
-
import { Color, FontSize, FontWeight, LineHeight, Shadow, ShapeRadius, Spacing } from '@pushwoosh/kit-constants';
|
|
4
|
-
export const DropdownMenuNestedBox = styled.div.withConfig({
|
|
5
|
-
displayName: "DropdownMenuNestedBox",
|
|
6
|
-
componentId: "sc-kzlzhf-0"
|
|
7
|
-
})(["width:100%;"]);
|
|
8
|
-
export const DropdownMenuNestedButton = styled.div.withConfig({
|
|
9
|
-
displayName: "DropdownMenuNestedButton",
|
|
10
|
-
componentId: "sc-kzlzhf-1"
|
|
11
|
-
})(["display:flex;flex-wrap:nowrap;align-items:center;justify-content:flex-start;width:100%;padding:", " ", " ", " ", ";background:", ";font-size:", ";font-weight:", ";line-height:", ";white-space:nowrap;text-decoration:none;text-align:left;cursor:pointer;user-select:none;"], Spacing.S3, Spacing.S3, Spacing.S3, Spacing.S4, ({
|
|
12
|
-
$isActive
|
|
13
|
-
}) => $isActive ? Color.SOFT_LIGHT : 'transparent', FontSize.REGULAR, FontWeight.REGULAR, LineHeight.REGULAR);
|
|
14
|
-
export const DropdownMenuNestedTitle = styled.div.withConfig({
|
|
15
|
-
displayName: "DropdownMenuNestedTitle",
|
|
16
|
-
componentId: "sc-kzlzhf-2"
|
|
17
|
-
})(["flex:1 1 auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;"]);
|
|
18
|
-
export const DropdownMenuNestedIcon = styled.div.withConfig({
|
|
19
|
-
displayName: "DropdownMenuNestedIcon",
|
|
20
|
-
componentId: "sc-kzlzhf-3"
|
|
21
|
-
})(["flex:0 0 auto;padding:0 0 0 ", ";"], Spacing.S4);
|
|
22
|
-
export const DropdownMenuNestedPortal = styled(Tippy).withConfig({
|
|
23
|
-
displayName: "DropdownMenuNestedPortal",
|
|
24
|
-
componentId: "sc-kzlzhf-4"
|
|
25
|
-
})([".tippy-box{position:static;background-color:transparent;color:inherit;border-radius:0;font-size:inherit;line-height:inherit;outline:0;transition:none;}.tippy-content{position:static;padding:0;z-index:auto;}.tippy-arrow{display:none;}"]);
|
|
26
|
-
export const DropdownMenuNestedWindow = styled.div.withConfig({
|
|
27
|
-
displayName: "DropdownMenuNestedWindow",
|
|
28
|
-
componentId: "sc-kzlzhf-5"
|
|
29
|
-
})(["border:1px solid ", ";background:", ";box-shadow:", ";border-radius:", ";"], Color.FORM, Color.FROZEN, Shadow.REGULAR, ShapeRadius.CONTROL);
|
|
30
|
-
DropdownMenuNestedBox.displayName = 'DropdownMenuNestedBox';
|
|
31
|
-
DropdownMenuNestedButton.displayName = 'DropdownMenuNestedButton';
|
|
32
|
-
DropdownMenuNestedTitle.displayName = 'DropdownMenuNestedTitle';
|
|
33
|
-
DropdownMenuNestedIcon.displayName = 'DropdownMenuNestedIcon';
|
|
34
|
-
DropdownMenuNestedPortal.displayName = 'DropdownMenuNestedPortal';
|
|
35
|
-
DropdownMenuNestedWindow.displayName = 'DropdownMenuNestedWindow';
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { DropdownMenuWindowBox } from './styles';
|
|
3
|
-
export function DropdownMenuWindow(props) {
|
|
4
|
-
const {
|
|
5
|
-
boxRef,
|
|
6
|
-
...rest
|
|
7
|
-
} = props;
|
|
8
|
-
return React.createElement(DropdownMenuWindowBox, {
|
|
9
|
-
...rest,
|
|
10
|
-
ref: boxRef
|
|
11
|
-
});
|
|
12
|
-
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { DropdownMenuWindow } from './DropdownMenuWindow';
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { DropdownMenuWindow } from './DropdownMenuWindow';
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export declare const DropdownMenuWindowBox: import("styled-components").StyledComponent<"div", any, {}, never>;
|