@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.
Files changed (95) hide show
  1. package/DropdownMenu/components/DropdownMenu/DropdownMenu.d.ts +3 -3
  2. package/DropdownMenu/components/DropdownMenu/DropdownMenu.js +44 -25
  3. package/DropdownMenu/components/DropdownMenu/index.d.ts +1 -1
  4. package/DropdownMenu/components/DropdownMenu/index.js +1 -1
  5. package/DropdownMenu/components/DropdownMenu/styles.d.ts +28 -0
  6. package/DropdownMenu/components/DropdownMenu/styles.js +13 -0
  7. package/DropdownMenu/components/DropdownMenu/types.d.ts +11 -21
  8. package/DropdownMenu/components/DropdownMenuButton/DropdownMenuButton.d.ts +3 -0
  9. package/DropdownMenu/components/DropdownMenuButton/DropdownMenuButton.js +25 -0
  10. package/DropdownMenu/components/DropdownMenuButton/index.d.ts +1 -0
  11. package/DropdownMenu/components/DropdownMenuButton/index.js +1 -0
  12. package/DropdownMenu/components/DropdownMenuButton/types.d.ts +14 -0
  13. package/DropdownMenu/components/DropdownMenuItem/DropdownMenuItem.d.ts +3 -5
  14. package/DropdownMenu/components/DropdownMenuItem/DropdownMenuItem.js +25 -37
  15. package/DropdownMenu/components/DropdownMenuItem/index.d.ts +0 -2
  16. package/DropdownMenu/components/DropdownMenuItem/index.js +1 -2
  17. package/DropdownMenu/components/DropdownMenuItem/styles.d.ts +3 -4
  18. package/DropdownMenu/components/DropdownMenuItem/styles.js +9 -70
  19. package/DropdownMenu/components/DropdownMenuItem/types.d.ts +7 -24
  20. package/DropdownMenu/context.d.ts +1 -0
  21. package/DropdownMenu/context.js +2 -0
  22. package/DropdownMenu/index.d.ts +3 -9
  23. package/DropdownMenu/index.js +3 -9
  24. package/EmailTemplatePreview/components/NoEmailTemplatePreview/NoEmailTemplatePreview.js +3 -3
  25. package/EmailTemplatePreview/components/NoEmailTemplatePreview/assets/email.svg +5 -0
  26. package/Table/hooks/helpers.d.ts +3 -0
  27. package/Table/hooks/helpers.js +9 -0
  28. package/Table/hooks/index.d.ts +1 -1
  29. package/Table/hooks/index.js +1 -1
  30. package/Table/hooks/useDataTableGetParams.d.ts +11 -0
  31. package/Table/hooks/useDataTableGetParams.js +49 -0
  32. package/Table/index.d.ts +1 -1
  33. package/Table/index.js +1 -1
  34. package/index.d.ts +2 -2
  35. package/index.js +2 -2
  36. package/package.json +2 -1
  37. package/DropdownMenu/components/DropdownMenu/hooks.d.ts +0 -4
  38. package/DropdownMenu/components/DropdownMenu/hooks.js +0 -10
  39. package/DropdownMenu/components/DropdownMenuContainer/DropdownMenuContainer.d.ts +0 -3
  40. package/DropdownMenu/components/DropdownMenuContainer/DropdownMenuContainer.js +0 -79
  41. package/DropdownMenu/components/DropdownMenuContainer/index.d.ts +0 -1
  42. package/DropdownMenu/components/DropdownMenuContainer/index.js +0 -1
  43. package/DropdownMenu/components/DropdownMenuContainer/maps.d.ts +0 -26
  44. package/DropdownMenu/components/DropdownMenuContainer/maps.js +0 -11
  45. package/DropdownMenu/components/DropdownMenuContainer/styles.d.ts +0 -35
  46. package/DropdownMenu/components/DropdownMenuContainer/styles.js +0 -109
  47. package/DropdownMenu/components/DropdownMenuContainer/types.d.ts +0 -19
  48. package/DropdownMenu/components/DropdownMenuGroup/DropdownMenuGroup.d.ts +0 -3
  49. package/DropdownMenu/components/DropdownMenuGroup/DropdownMenuGroup.js +0 -12
  50. package/DropdownMenu/components/DropdownMenuGroup/index.d.ts +0 -1
  51. package/DropdownMenu/components/DropdownMenuGroup/index.js +0 -1
  52. package/DropdownMenu/components/DropdownMenuGroup/styles.d.ts +0 -1
  53. package/DropdownMenu/components/DropdownMenuGroup/styles.js +0 -7
  54. package/DropdownMenu/components/DropdownMenuGroup/types.d.ts +0 -5
  55. package/DropdownMenu/components/DropdownMenuGroup/types.js +0 -1
  56. package/DropdownMenu/components/DropdownMenuItemCheckbox/DropdownMenuItemCheckbox.d.ts +0 -3
  57. package/DropdownMenu/components/DropdownMenuItemCheckbox/DropdownMenuItemCheckbox.js +0 -9
  58. package/DropdownMenu/components/DropdownMenuItemCheckbox/index.d.ts +0 -1
  59. package/DropdownMenu/components/DropdownMenuItemCheckbox/index.js +0 -1
  60. package/DropdownMenu/components/DropdownMenuItemCheckbox/styles.d.ts +0 -1
  61. package/DropdownMenu/components/DropdownMenuItemCheckbox/styles.js +0 -8
  62. package/DropdownMenu/components/DropdownMenuItemPick/DropdownMenuItemPick.d.ts +0 -3
  63. package/DropdownMenu/components/DropdownMenuItemPick/DropdownMenuItemPick.js +0 -16
  64. package/DropdownMenu/components/DropdownMenuItemPick/index.d.ts +0 -1
  65. package/DropdownMenu/components/DropdownMenuItemPick/index.js +0 -1
  66. package/DropdownMenu/components/DropdownMenuItemPick/styles.d.ts +0 -3
  67. package/DropdownMenu/components/DropdownMenuItemPick/styles.js +0 -8
  68. package/DropdownMenu/components/DropdownMenuItemPick/types.d.ts +0 -2
  69. package/DropdownMenu/components/DropdownMenuItemPick/types.js +0 -1
  70. package/DropdownMenu/components/DropdownMenuItemRadio/DropdownMenuItemRadio.d.ts +0 -3
  71. package/DropdownMenu/components/DropdownMenuItemRadio/DropdownMenuItemRadio.js +0 -9
  72. package/DropdownMenu/components/DropdownMenuItemRadio/index.d.ts +0 -1
  73. package/DropdownMenu/components/DropdownMenuItemRadio/index.js +0 -1
  74. package/DropdownMenu/components/DropdownMenuItemRadio/styles.d.ts +0 -1
  75. package/DropdownMenu/components/DropdownMenuItemRadio/styles.js +0 -8
  76. package/DropdownMenu/components/DropdownMenuNested/DropdownMenuNested.d.ts +0 -3
  77. package/DropdownMenu/components/DropdownMenuNested/DropdownMenuNested.js +0 -69
  78. package/DropdownMenu/components/DropdownMenuNested/index.d.ts +0 -1
  79. package/DropdownMenu/components/DropdownMenuNested/index.js +0 -1
  80. package/DropdownMenu/components/DropdownMenuNested/styles.d.ts +0 -8
  81. package/DropdownMenu/components/DropdownMenuNested/styles.js +0 -35
  82. package/DropdownMenu/components/DropdownMenuNested/types.d.ts +0 -6
  83. package/DropdownMenu/components/DropdownMenuNested/types.js +0 -1
  84. package/DropdownMenu/components/DropdownMenuWindow/DropdownMenuWindow.d.ts +0 -3
  85. package/DropdownMenu/components/DropdownMenuWindow/DropdownMenuWindow.js +0 -12
  86. package/DropdownMenu/components/DropdownMenuWindow/index.d.ts +0 -1
  87. package/DropdownMenu/components/DropdownMenuWindow/index.js +0 -1
  88. package/DropdownMenu/components/DropdownMenuWindow/styles.d.ts +0 -1
  89. package/DropdownMenu/components/DropdownMenuWindow/styles.js +0 -7
  90. package/DropdownMenu/components/DropdownMenuWindow/types.d.ts +0 -5
  91. package/DropdownMenu/components/DropdownMenuWindow/types.js +0 -1
  92. package/EmailTemplatePreview/components/NoEmailTemplatePreview/assets/PW_logo.svg +0 -1
  93. package/Table/hooks/useDataTableParams.d.ts +0 -10
  94. package/Table/hooks/useDataTableParams.js +0 -39
  95. /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, DropdownMenuProvider, useDropdownMenuContext, DropdownMenuContainer, DropdownMenuGroup, DropdownMenuItem, DropdownMenuItemBox, DropdownMenuItemCheckbox, DropdownMenuItemPick, DropdownMenuItemRadio, DropdownMenuNested, DropdownMenuWindow } from './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, useDataTableParams, Table, Td, Tr, Th, ElementHover, ItemDetailLink, ItemName, LockedText, Description } from './Table';
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.11",
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,3 +0,0 @@
1
- import { type ReactElement } from 'react';
2
- import type { DropdownMenuContainerProps } from './types';
3
- export declare function DropdownMenuContainer(props: DropdownMenuContainerProps): ReactElement;
@@ -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,3 +0,0 @@
1
- import { type ReactElement } from 'react';
2
- import type { DropdownMenuGroupProps } from './types';
3
- export declare function DropdownMenuGroup(props: DropdownMenuGroupProps): ReactElement;
@@ -1,12 +0,0 @@
1
- import React from 'react';
2
- import { DropdownMenuGroupBox } from './styles';
3
- export function DropdownMenuGroup(props) {
4
- const {
5
- boxRef,
6
- ...rest
7
- } = props;
8
- return React.createElement(DropdownMenuGroupBox, {
9
- ...rest,
10
- ref: boxRef
11
- });
12
- }
@@ -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,5 +0,0 @@
1
- import type { Ref, ReactNode } from 'react';
2
- export type DropdownMenuGroupProps = Omit<JSX.IntrinsicElements['div'], 'ref'> & {
3
- readonly boxRef?: Ref<HTMLDivElement>;
4
- readonly children: ReactNode;
5
- };
@@ -1 +0,0 @@
1
- export {};
@@ -1,3 +0,0 @@
1
- import { type ReactElement } from 'react';
2
- import { type CheckboxProps } from '../../../Checkbox';
3
- export declare function DropdownMenuItemCheckbox(props: CheckboxProps): ReactElement;
@@ -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,3 +0,0 @@
1
- import { type ReactElement } from 'react';
2
- import type { DropdownMenuItemPickProps } from './types';
3
- export declare function DropdownMenuItemPick(props: DropdownMenuItemPickProps): ReactElement;
@@ -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,3 +0,0 @@
1
- export declare const DropdownMenuItemPickBox: import("styled-components").StyledComponent<"div", any, {
2
- $isChecked?: boolean;
3
- }, never>;
@@ -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,2 +0,0 @@
1
- import type { RadioProps } from '../../../Radio';
2
- export type DropdownMenuItemPickProps = Omit<RadioProps, 'color'>;
@@ -1 +0,0 @@
1
- export {};
@@ -1,3 +0,0 @@
1
- import { type ReactElement } from 'react';
2
- import { type RadioProps } from '../../../Radio';
3
- export declare function DropdownMenuItemRadio(props: RadioProps): ReactElement;
@@ -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,3 +0,0 @@
1
- import { type ReactElement } from 'react';
2
- import type { DropdownMenuNestedProps } from './types';
3
- export declare function DropdownMenuNested(props: DropdownMenuNestedProps): ReactElement;
@@ -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>;