@pushwoosh/dumb-components 1.0.11 → 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/EmailTemplatePreview/components/NoEmailTemplatePreview/NoEmailTemplatePreview.js +3 -3
- package/EmailTemplatePreview/components/NoEmailTemplatePreview/assets/email.svg +5 -0
- package/Table/hooks/helpers.d.ts +3 -0
- package/Table/hooks/helpers.js +9 -0
- package/Table/hooks/index.d.ts +1 -1
- package/Table/hooks/index.js +1 -1
- package/Table/hooks/useDataTableGetParams.d.ts +11 -0
- package/Table/hooks/useDataTableGetParams.js +49 -0
- package/Table/index.d.ts +1 -1
- package/Table/index.js +1 -1
- package/index.d.ts +2 -2
- package/index.js +2 -2
- 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/EmailTemplatePreview/components/NoEmailTemplatePreview/assets/PW_logo.svg +0 -1
- package/Table/hooks/useDataTableParams.d.ts +0 -10
- package/Table/hooks/useDataTableParams.js +0 -39
- /package/DropdownMenu/components/{DropdownMenuContainer → DropdownMenuButton}/types.js +0 -0
package/index.js
CHANGED
|
@@ -5,7 +5,7 @@ export { Button, GhostButton } from './Button';
|
|
|
5
5
|
export { CardMetric } from './CardMetric';
|
|
6
6
|
export { Checkbox } from './Checkbox';
|
|
7
7
|
export { Drawer, DrawerHeader, DrawerTitle, DrawerBody, DrawerDocs, useDocs } from './Drawer';
|
|
8
|
-
export { DropdownMenu,
|
|
8
|
+
export { DropdownMenu, DropdownMenuButton, DropdownMenuSection, DropdownMenuItem } from './DropdownMenu';
|
|
9
9
|
export { EditableField } from './EditableField';
|
|
10
10
|
export { InputFile } from './InputFile';
|
|
11
11
|
export { Modal, ModalTitle, ModalConfirm, ModalConfirmProvider, useModalConfirm, ModalHeader, ModalBodyGroup, ModalBodyItem, ModalBody, ModalFooter } from './Modal';
|
|
@@ -26,7 +26,7 @@ export { StatisticCard } from './StatisticCard';
|
|
|
26
26
|
export { EmailTemplatePreview, NoEmailTemplatePreview } from './EmailTemplatePreview';
|
|
27
27
|
export { PushPreview } from './PushPreview';
|
|
28
28
|
export { Toast, ToastProvider, useToast } from './Toast';
|
|
29
|
-
export { ClearableInput, DataTable, DataTableList, DataTableGetContext, DataTablePagination, DataTableSearchInput, DataTableSortableCell, Loading, TableList, TablePagination, useDataTableContext,
|
|
29
|
+
export { ClearableInput, DataTable, DataTableList, DataTableGetContext, DataTablePagination, DataTableSearchInput, DataTableSortableCell, Loading, TableList, TablePagination, useDataTableContext, useDataTableGetParams, Table, Td, Tr, Th, ElementHover, ItemDetailLink, ItemName, LockedText, Description } from './Table';
|
|
30
30
|
export { AutosizeInput, PageHeader, PageHeaderEditable } from './PageHeader';
|
|
31
31
|
export { ExportResult } from './ExportResult';
|
|
32
32
|
export { NativeInput, NativeTextarea, NativeSelect } from './native';
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pushwoosh/dumb-components",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.13",
|
|
4
4
|
"description": "React components to build Pushwoosh products",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"module": "index.js",
|
|
@@ -35,6 +35,7 @@
|
|
|
35
35
|
"styled-components": "^5.3.11"
|
|
36
36
|
},
|
|
37
37
|
"dependencies": {
|
|
38
|
+
"@floating-ui/react-dom": "^2.1.2",
|
|
38
39
|
"@pushwoosh/kit-helpers": "^4.6.2",
|
|
39
40
|
"@pushwoosh/kit-icons": "^2.1.1",
|
|
40
41
|
"@pushwoosh/kit-typography": "^1.7.1",
|
|
@@ -1,4 +0,0 @@
|
|
|
1
|
-
import type { DropdownMenuContext } from './types';
|
|
2
|
-
export declare const Context: import("react").Context<DropdownMenuContext | undefined>;
|
|
3
|
-
export declare const DropdownMenuProvider: import("react").Provider<DropdownMenuContext | undefined>;
|
|
4
|
-
export declare function useDropdownMenuContext(): DropdownMenuContext;
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
import { createContext, useContext } from 'react';
|
|
2
|
-
export const Context = createContext(undefined);
|
|
3
|
-
export const DropdownMenuProvider = Context.Provider;
|
|
4
|
-
export function useDropdownMenuContext() {
|
|
5
|
-
const context = useContext(Context);
|
|
6
|
-
if (!context) {
|
|
7
|
-
throw new Error('DropdownMenuContext is not defined! Please check what are you using useDropdownMenuContext in a child of DropdownMenu component!');
|
|
8
|
-
}
|
|
9
|
-
return context;
|
|
10
|
-
}
|
|
@@ -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>;
|