@seeqdev/qomponents 0.0.214 → 0.0.215

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 (86) hide show
  1. package/dist/index.esm.js +76 -29429
  2. package/dist/index.esm.js.map +1 -1
  3. package/dist/index.js +78 -29481
  4. package/dist/index.js.map +1 -1
  5. package/dist/src/Accordion/Accordion.d.ts +6 -3
  6. package/dist/src/Accordion/Accordion.types.d.ts +86 -83
  7. package/dist/src/Accordion/index.d.ts +2 -1
  8. package/dist/src/Alert/Alert.d.ts +8 -3
  9. package/dist/src/Alert/Alert.types.d.ts +58 -55
  10. package/dist/src/Alert/index.d.ts +2 -1
  11. package/dist/src/Button/Button.d.ts +6 -3
  12. package/dist/src/Button/Button.types.d.ts +151 -147
  13. package/dist/src/Button/index.d.ts +2 -1
  14. package/dist/src/ButtonGroup/ButtonGroup.d.ts +8 -3
  15. package/dist/src/ButtonGroup/ButtonGroup.types.d.ts +66 -62
  16. package/dist/src/ButtonGroup/index.d.ts +2 -1
  17. package/dist/src/ButtonWithDropdown/ButtonWithDropdown.d.ts +8 -5
  18. package/dist/src/ButtonWithDropdown/ButtonWithDropdown.types.d.ts +209 -204
  19. package/dist/src/ButtonWithDropdown/index.d.ts +2 -1
  20. package/dist/src/ButtonWithPopover/ButtonWithPopover.d.ts +7 -4
  21. package/dist/src/ButtonWithPopover/ButtonWithPopover.types.d.ts +134 -129
  22. package/dist/src/ButtonWithPopover/index.d.ts +2 -1
  23. package/dist/src/Carousel/Carousel.d.ts +7 -3
  24. package/dist/src/Carousel/Carousel.types.d.ts +84 -81
  25. package/dist/src/Carousel/index.d.ts +2 -1
  26. package/dist/src/Checkbox/Checkbox.d.ts +8 -3
  27. package/dist/src/Checkbox/Checkbox.types.d.ts +92 -89
  28. package/dist/src/Checkbox/index.d.ts +2 -1
  29. package/dist/src/Collapse/Collapse.d.ts +6 -3
  30. package/dist/src/Collapse/Collapse.types.d.ts +17 -14
  31. package/dist/src/Collapse/index.d.ts +2 -1
  32. package/dist/src/Icon/Icon.d.ts +7 -3
  33. package/dist/src/Icon/Icon.types.d.ts +89 -85
  34. package/dist/src/Icon/index.d.ts +2 -1
  35. package/dist/src/InputGroup/InputGroup.d.ts +8 -3
  36. package/dist/src/InputGroup/InputGroup.types.d.ts +42 -38
  37. package/dist/src/InputGroup/index.d.ts +3 -2
  38. package/dist/src/Modal/Modal.d.ts +8 -3
  39. package/dist/src/Modal/Modal.types.d.ts +253 -249
  40. package/dist/src/Modal/index.d.ts +2 -1
  41. package/dist/src/ProgressBar/ProgressBar.d.ts +6 -3
  42. package/dist/src/ProgressBar/ProgressBar.types.d.ts +71 -66
  43. package/dist/src/ProgressBar/index.d.ts +2 -1
  44. package/dist/src/SeeqActionDropdown/SeeqActionDropdown.d.ts +7 -4
  45. package/dist/src/SeeqActionDropdown/SeeqActionDropdown.types.d.ts +159 -154
  46. package/dist/src/SeeqActionDropdown/index.d.ts +2 -1
  47. package/dist/src/SeeqActionDropdown/variants.d.ts +9 -5
  48. package/dist/src/Select/Select.d.ts +9 -6
  49. package/dist/src/Select/Select.types.d.ts +219 -213
  50. package/dist/src/Select/index.d.ts +3 -2
  51. package/dist/src/Slider/Slider.d.ts +8 -3
  52. package/dist/src/Slider/Slider.types.d.ts +83 -80
  53. package/dist/src/Slider/index.d.ts +2 -1
  54. package/dist/src/SvgIcon/SvgIcon.d.ts +7 -3
  55. package/dist/src/SvgIcon/SvgIcon.types.d.ts +73 -69
  56. package/dist/src/SvgIcon/index.d.ts +2 -1
  57. package/dist/src/Tabs/Tabs.d.ts +6 -3
  58. package/dist/src/Tabs/Tabs.types.d.ts +83 -78
  59. package/dist/src/Tabs/index.d.ts +2 -1
  60. package/dist/src/TextArea/TextArea.d.ts +8 -3
  61. package/dist/src/TextArea/TextArea.types.d.ts +116 -111
  62. package/dist/src/TextArea/index.d.ts +2 -1
  63. package/dist/src/TextField/TextField.d.ts +8 -3
  64. package/dist/src/TextField/TextField.types.d.ts +198 -194
  65. package/dist/src/TextField/index.d.ts +2 -1
  66. package/dist/src/ToolbarButton/ToolbarButton.d.ts +7 -3
  67. package/dist/src/ToolbarButton/ToolbarButton.types.d.ts +121 -117
  68. package/dist/src/ToolbarButton/index.d.ts +2 -1
  69. package/dist/src/Tooltip/QTip.types.d.ts +16 -12
  70. package/dist/src/Tooltip/Qtip.d.ts +7 -2
  71. package/dist/src/Tooltip/Tooltip.d.ts +8 -3
  72. package/dist/src/Tooltip/Tooltip.types.d.ts +24 -20
  73. package/dist/src/Tooltip/index.d.ts +3 -2
  74. package/dist/src/Tooltip/qTip.utilities.d.ts +13 -3
  75. package/dist/src/TriggerWithDropdown/TriggerWithDropdown.d.ts +7 -4
  76. package/dist/src/TriggerWithDropdown/TriggerWithDropdown.types.d.ts +99 -94
  77. package/dist/src/TriggerWithDropdown/index.d.ts +2 -1
  78. package/dist/src/index.build.d.ts +50 -6
  79. package/dist/src/index.d.ts +50 -46
  80. package/dist/src/test-utils/is-browser-mode.d.ts +7 -4
  81. package/dist/src/types.d.ts +30 -28
  82. package/dist/src/utils/browserId.d.ts +8 -5
  83. package/dist/src/utils/svg.d.ts +6 -3
  84. package/dist/src/utils/validateStyleDimension.d.ts +6 -2
  85. package/package.json +9 -8
  86. package/dist/src/styles.build.css.d.ts +0 -1
@@ -1,137 +1,140 @@
1
- import { TooltipComponentProps } from '../Tooltip/Tooltip.types';
2
- import { ButtonProps } from '..';
1
+ import { TooltipComponentProps } from "../Tooltip/Tooltip.types.js";
2
+ import { ButtonProps } from "../Button/Button.types.js";
3
+
4
+ //#region src/ButtonWithDropdown/ButtonWithDropdown.types.d.ts
5
+
3
6
  /**
4
7
  * Interface for sub-menu items that appear in nested dropdown menus.
5
8
  * Used to create hierarchical menu structures within dropdown items.
6
9
  */
7
- export interface DropdownSubItem {
8
- /**
9
- * Icon class name to display next to the sub-item label.
10
- * Typically uses FontAwesome classes (e.g., 'fc-zoom', 'fc-delete').
11
- * Optional visual enhancement for better user recognition.
12
- */
13
- iconClass?: string;
14
- /**
15
- * Text label for the dropdown sub-item.
16
- * This is the clickable text that users will see and interact with.
17
- */
18
- label: string;
19
- /**
20
- * Callback function triggered when the sub-item is clicked.
21
- * Use this to define the action that should occur when users select this sub-item.
22
- */
23
- onClick?: (e?: Event) => void;
24
- /**
25
- * When true, disables the sub-item preventing user interaction.
26
- * Disabled items appear visually dimmed and don't respond to clicks.
27
- */
28
- disabled?: boolean;
29
- /**
30
- * Tooltip text to display when hovering over the sub-item.
31
- * Provides additional context or information about the sub-item's action.
32
- */
33
- tooltip?: string;
10
+ interface DropdownSubItem {
11
+ /**
12
+ * Icon class name to display next to the sub-item label.
13
+ * Typically uses FontAwesome classes (e.g., 'fc-zoom', 'fc-delete').
14
+ * Optional visual enhancement for better user recognition.
15
+ */
16
+ iconClass?: string;
17
+ /**
18
+ * Text label for the dropdown sub-item.
19
+ * This is the clickable text that users will see and interact with.
20
+ */
21
+ label: string;
22
+ /**
23
+ * Callback function triggered when the sub-item is clicked.
24
+ * Use this to define the action that should occur when users select this sub-item.
25
+ */
26
+ onClick?: (e?: Event) => void;
27
+ /**
28
+ * When true, disables the sub-item preventing user interaction.
29
+ * Disabled items appear visually dimmed and don't respond to clicks.
30
+ */
31
+ disabled?: boolean;
32
+ /**
33
+ * Tooltip text to display when hovering over the sub-item.
34
+ * Provides additional context or information about the sub-item's action.
35
+ */
36
+ tooltip?: string;
34
37
  }
35
38
  /**
36
39
  * Interface for main dropdown menu items that can contain sub-menus.
37
40
  * Extends TooltipComponentProps for enhanced tooltip functionality.
38
41
  */
39
- export interface DropdownItems extends TooltipComponentProps {
40
- /**
41
- * HTML ID attribute for the dropdown item element.
42
- * Should be unique for proper HTML semantics and accessibility.
43
- */
44
- id?: string;
45
- /**
46
- * Icon class name to display next to the item label.
47
- * Typically uses Seeq or FontAwesome classes for consistent visual styling.
48
- */
49
- icon?: string;
50
- /**
51
- * Type/style of the icon that determines its rendering and colors.
52
- * Common values include 'theme', 'text', 'color' based on the Icon component.
53
- */
54
- iconType?: string;
55
- /**
56
- * Custom color for the icon when using color-type icons.
57
- * Can be any valid CSS color value (hex, rgb, color names).
58
- */
59
- iconColor?: string;
60
- /**
61
- * Custom HTML ID attribute specifically for the icon element.
62
- * Useful for targeting the icon separately from the item container.
63
- */
64
- iconCustomId?: string;
65
- /**
66
- * Additional CSS classes to apply to the icon element.
67
- * Use this to customize icon appearance beyond standard styling.
68
- */
69
- iconExtraClassNames?: string;
70
- /**
71
- * Content to display as the item label.
72
- * Can be simple text or any React element for rich content like formatted text or badges.
73
- */
74
- label: string | React.ReactNode;
75
- /**
76
- * Custom HTML ID attribute specifically for the label element.
77
- * Useful for accessibility or when you need to target the label separately.
78
- */
79
- labelCustomId?: string;
80
- /**
81
- * When true, treats this item as a non-interactive label/header.
82
- * Label items typically appear different visually and don't trigger onClick events.
83
- */
84
- isLabel?: boolean;
85
- /**
86
- * Callback function triggered when the dropdown item is clicked.
87
- * Required for interactive items. Use this to define the primary action for the item.
88
- */
89
- onClick: (e?: Event) => void;
90
- /**
91
- * Additional CSS classes to apply to the label element.
92
- * Use this to customize label appearance, typography, or spacing.
93
- */
94
- labelClasses?: string;
95
- /**
96
- * When true, disables this dropdown item preventing user interaction.
97
- * Disabled items appear visually dimmed and don't respond to clicks.
98
- */
99
- disabled?: boolean;
100
- /**
101
- * Custom HTML ID attribute for the entire dropdown item container.
102
- * Useful for unique identification and accessibility purposes.
103
- */
104
- itemCustomId?: string;
105
- /**
106
- * Additional CSS classes to apply to the dropdown item container.
107
- * Use this to customize item appearance, spacing, or hover effects.
108
- */
109
- itemExtraClassNames?: string;
110
- /**
111
- * Test ID attribute for the label element used in automated testing.
112
- * Helps identify and interact with specific dropdown item labels in tests.
113
- */
114
- labelTestId?: string;
115
- /**
116
- * Test ID attribute for the icon element used in automated testing.
117
- * Helps identify and interact with specific dropdown item icons in tests.
118
- */
119
- iconTestId?: string;
120
- /**
121
- * When true, displays a visual divider line below this dropdown item.
122
- * Useful for grouping related items or separating different sections of the menu.
123
- */
124
- hasDivider?: boolean;
125
- /**
126
- * Test ID attribute for the dropdown item container used in automated testing.
127
- * Helps identify and interact with specific dropdown items in test suites.
128
- */
129
- testId?: string;
130
- /**
131
- * Array of sub-menu items that appear when this item is hovered or clicked.
132
- * Creates hierarchical dropdown menus for organizing related actions.
133
- */
134
- subMenuItems?: DropdownSubItem[];
42
+ interface DropdownItems extends TooltipComponentProps {
43
+ /**
44
+ * HTML ID attribute for the dropdown item element.
45
+ * Should be unique for proper HTML semantics and accessibility.
46
+ */
47
+ id?: string;
48
+ /**
49
+ * Icon class name to display next to the item label.
50
+ * Typically uses Seeq or FontAwesome classes for consistent visual styling.
51
+ */
52
+ icon?: string;
53
+ /**
54
+ * Type/style of the icon that determines its rendering and colors.
55
+ * Common values include 'theme', 'text', 'color' based on the Icon component.
56
+ */
57
+ iconType?: string;
58
+ /**
59
+ * Custom color for the icon when using color-type icons.
60
+ * Can be any valid CSS color value (hex, rgb, color names).
61
+ */
62
+ iconColor?: string;
63
+ /**
64
+ * Custom HTML ID attribute specifically for the icon element.
65
+ * Useful for targeting the icon separately from the item container.
66
+ */
67
+ iconCustomId?: string;
68
+ /**
69
+ * Additional CSS classes to apply to the icon element.
70
+ * Use this to customize icon appearance beyond standard styling.
71
+ */
72
+ iconExtraClassNames?: string;
73
+ /**
74
+ * Content to display as the item label.
75
+ * Can be simple text or any React element for rich content like formatted text or badges.
76
+ */
77
+ label: string | React.ReactNode;
78
+ /**
79
+ * Custom HTML ID attribute specifically for the label element.
80
+ * Useful for accessibility or when you need to target the label separately.
81
+ */
82
+ labelCustomId?: string;
83
+ /**
84
+ * When true, treats this item as a non-interactive label/header.
85
+ * Label items typically appear different visually and don't trigger onClick events.
86
+ */
87
+ isLabel?: boolean;
88
+ /**
89
+ * Callback function triggered when the dropdown item is clicked.
90
+ * Required for interactive items. Use this to define the primary action for the item.
91
+ */
92
+ onClick: (e?: Event) => void;
93
+ /**
94
+ * Additional CSS classes to apply to the label element.
95
+ * Use this to customize label appearance, typography, or spacing.
96
+ */
97
+ labelClasses?: string;
98
+ /**
99
+ * When true, disables this dropdown item preventing user interaction.
100
+ * Disabled items appear visually dimmed and don't respond to clicks.
101
+ */
102
+ disabled?: boolean;
103
+ /**
104
+ * Custom HTML ID attribute for the entire dropdown item container.
105
+ * Useful for unique identification and accessibility purposes.
106
+ */
107
+ itemCustomId?: string;
108
+ /**
109
+ * Additional CSS classes to apply to the dropdown item container.
110
+ * Use this to customize item appearance, spacing, or hover effects.
111
+ */
112
+ itemExtraClassNames?: string;
113
+ /**
114
+ * Test ID attribute for the label element used in automated testing.
115
+ * Helps identify and interact with specific dropdown item labels in tests.
116
+ */
117
+ labelTestId?: string;
118
+ /**
119
+ * Test ID attribute for the icon element used in automated testing.
120
+ * Helps identify and interact with specific dropdown item icons in tests.
121
+ */
122
+ iconTestId?: string;
123
+ /**
124
+ * When true, displays a visual divider line below this dropdown item.
125
+ * Useful for grouping related items or separating different sections of the menu.
126
+ */
127
+ hasDivider?: boolean;
128
+ /**
129
+ * Test ID attribute for the dropdown item container used in automated testing.
130
+ * Helps identify and interact with specific dropdown items in test suites.
131
+ */
132
+ testId?: string;
133
+ /**
134
+ * Array of sub-menu items that appear when this item is hovered or clicked.
135
+ * Creates hierarchical dropdown menus for organizing related actions.
136
+ */
137
+ subMenuItems?: DropdownSubItem[];
135
138
  }
136
139
  /**
137
140
  * Props for the ButtonWithDropdown component that creates a Qomponents-styled Button
@@ -143,83 +146,85 @@ export interface DropdownItems extends TooltipComponentProps {
143
146
  *
144
147
  * Uses the asChild prop on DropdownMenu.Trigger to avoid nesting <button> elements.
145
148
  */
146
- export type ButtonWithDropdownProps = TooltipComponentProps & ButtonProps & DropdownProps;
147
- export interface DropdownProps {
148
- children?: React.ReactNode;
149
- /**
150
- * Array of items to display in the dropdown menu.
151
- * Each item can be interactive (with onClick) or decorative (labels/dividers).
152
- * Items can also contain sub-menus for hierarchical organization.
153
- */
154
- dropdownItems: DropdownItems[];
155
- /**
156
- * HTML ID attribute for the dropdown trigger element.
157
- * Should be unique across the page for proper HTML semantics and accessibility.
158
- */
159
- id?: string;
160
- /**
161
- * Test ID attribute for the dropdown container element used in automated testing.
162
- * Applied to the main container that wraps both trigger and dropdown content.
163
- */
164
- containerTestId?: string;
165
- /**
166
- * Additional CSS classes to apply to the dropdown content container.
167
- * Use this to customize the dropdown menu's appearance, spacing, or styling.
168
- */
169
- contentExtraClassNames?: string;
170
- /**
171
- * Horizontal alignment of the dropdown content relative to the trigger:
172
- * - `start`: Aligns to the left edge of the trigger
173
- * - `center`: Centers the dropdown on the trigger
174
- * - `end`: Aligns to the right edge of the trigger
175
- */
176
- align?: 'start' | 'center' | 'end';
177
- /**
178
- * Numeric offset in pixels from the aligned position.
179
- * Positive values move the dropdown further from the trigger in the align direction.
180
- */
181
- alignOffset?: number;
182
- /**
183
- * Position of the dropdown relative to the trigger element:
184
- * - `top`: Dropdown appears above the trigger
185
- * - `bottom`: Dropdown appears below the trigger
186
- * - `left`: Dropdown appears to the left of the trigger
187
- * - `right`: Dropdown appears to the right of the trigger
188
- */
189
- placement?: 'top' | 'bottom' | 'left' | 'right';
190
- /**
191
- * Numeric offset in pixels from the placement position.
192
- * Positive values move the dropdown further away from the trigger.
193
- */
194
- placementOffset?: number;
195
- /**
196
- * When true, displays a visual arrow pointing from the dropdown to the trigger.
197
- * Helps users understand the relationship between trigger and dropdown content.
198
- */
199
- hasArrow?: boolean;
200
- /**
201
- * Controls whether the dropdown is currently open and visible.
202
- * Use this for controlled dropdown behavior where you manage open state externally.
203
- */
204
- isOpen?: boolean;
205
- /**
206
- * Callback function triggered when the dropdown open state changes.
207
- * Receives the new open state as a boolean parameter. Use this to sync with external state.
208
- */
209
- onOpenChange?: (isOpen: boolean) => void;
210
- /**
211
- * When true, automatically focuses the trigger button when the dropdown closes.
212
- * Improves keyboard navigation and accessibility by returning focus to the trigger.
213
- */
214
- setFocusOnTriggerOnClose?: boolean;
215
- /**
216
- * When true, traps keyboard focus within the dropdown when it's open.
217
- * Prevents users from tabbing outside the dropdown, improving accessibility.
218
- */
219
- keepFocusInsideDropdown?: boolean;
220
- /**
221
- * Callback function triggered when the dropdown container is clicked.
222
- * Receives the click event. Use this for handling container-level interactions.
223
- */
224
- onContainerClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
149
+ type ButtonWithDropdownProps = TooltipComponentProps & ButtonProps & DropdownProps;
150
+ interface DropdownProps {
151
+ children?: React.ReactNode;
152
+ /**
153
+ * Array of items to display in the dropdown menu.
154
+ * Each item can be interactive (with onClick) or decorative (labels/dividers).
155
+ * Items can also contain sub-menus for hierarchical organization.
156
+ */
157
+ dropdownItems: DropdownItems[];
158
+ /**
159
+ * HTML ID attribute for the dropdown trigger element.
160
+ * Should be unique across the page for proper HTML semantics and accessibility.
161
+ */
162
+ id?: string;
163
+ /**
164
+ * Test ID attribute for the dropdown container element used in automated testing.
165
+ * Applied to the main container that wraps both trigger and dropdown content.
166
+ */
167
+ containerTestId?: string;
168
+ /**
169
+ * Additional CSS classes to apply to the dropdown content container.
170
+ * Use this to customize the dropdown menu's appearance, spacing, or styling.
171
+ */
172
+ contentExtraClassNames?: string;
173
+ /**
174
+ * Horizontal alignment of the dropdown content relative to the trigger:
175
+ * - `start`: Aligns to the left edge of the trigger
176
+ * - `center`: Centers the dropdown on the trigger
177
+ * - `end`: Aligns to the right edge of the trigger
178
+ */
179
+ align?: 'start' | 'center' | 'end';
180
+ /**
181
+ * Numeric offset in pixels from the aligned position.
182
+ * Positive values move the dropdown further from the trigger in the align direction.
183
+ */
184
+ alignOffset?: number;
185
+ /**
186
+ * Position of the dropdown relative to the trigger element:
187
+ * - `top`: Dropdown appears above the trigger
188
+ * - `bottom`: Dropdown appears below the trigger
189
+ * - `left`: Dropdown appears to the left of the trigger
190
+ * - `right`: Dropdown appears to the right of the trigger
191
+ */
192
+ placement?: 'top' | 'bottom' | 'left' | 'right';
193
+ /**
194
+ * Numeric offset in pixels from the placement position.
195
+ * Positive values move the dropdown further away from the trigger.
196
+ */
197
+ placementOffset?: number;
198
+ /**
199
+ * When true, displays a visual arrow pointing from the dropdown to the trigger.
200
+ * Helps users understand the relationship between trigger and dropdown content.
201
+ */
202
+ hasArrow?: boolean;
203
+ /**
204
+ * Controls whether the dropdown is currently open and visible.
205
+ * Use this for controlled dropdown behavior where you manage open state externally.
206
+ */
207
+ isOpen?: boolean;
208
+ /**
209
+ * Callback function triggered when the dropdown open state changes.
210
+ * Receives the new open state as a boolean parameter. Use this to sync with external state.
211
+ */
212
+ onOpenChange?: (isOpen: boolean) => void;
213
+ /**
214
+ * When true, automatically focuses the trigger button when the dropdown closes.
215
+ * Improves keyboard navigation and accessibility by returning focus to the trigger.
216
+ */
217
+ setFocusOnTriggerOnClose?: boolean;
218
+ /**
219
+ * When true, traps keyboard focus within the dropdown when it's open.
220
+ * Prevents users from tabbing outside the dropdown, improving accessibility.
221
+ */
222
+ keepFocusInsideDropdown?: boolean;
223
+ /**
224
+ * Callback function triggered when the dropdown container is clicked.
225
+ * Receives the click event. Use this for handling container-level interactions.
226
+ */
227
+ onContainerClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
225
228
  }
229
+ //#endregion
230
+ export { ButtonWithDropdownProps, DropdownItems, DropdownProps, DropdownSubItem };
@@ -1 +1,2 @@
1
- export { default } from './ButtonWithDropdown';
1
+ import ButtonWithDropdown from "./ButtonWithDropdown.js";
2
+ export { ButtonWithDropdown as default };
@@ -1,4 +1,7 @@
1
- import * as React from 'react';
2
- import { ButtonWithPopoverProps } from './ButtonWithPopover.types';
3
- declare const ButtonWithPopover: React.FunctionComponent<ButtonWithPopoverProps>;
4
- export default ButtonWithPopover;
1
+ import { ButtonWithPopoverProps } from "./ButtonWithPopover.types.js";
2
+ import * as React$1 from "react";
3
+
4
+ //#region src/ButtonWithPopover/ButtonWithPopover.d.ts
5
+ declare const ButtonWithPopover: React$1.FunctionComponent<ButtonWithPopoverProps>;
6
+ //#endregion
7
+ export { ButtonWithPopover as default };