@linzjs/step-ag-grid 20.0.0 → 21.0.0

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 (180) hide show
  1. package/dist/src/components/ComponentLoadingWrapper.d.ts +9 -9
  2. package/dist/src/components/Grid.d.ts +80 -80
  3. package/dist/src/components/GridCell.d.ts +63 -27
  4. package/dist/src/components/GridCell.test.d.ts +1 -1
  5. package/dist/src/components/GridCellFiller.d.ts +5 -4
  6. package/dist/src/components/GridCellMultiEditor.d.ts +18 -18
  7. package/dist/src/components/GridCellMultiSelectClassRules.d.ts +2 -2
  8. package/dist/src/components/GridIcon.d.ts +9 -9
  9. package/dist/src/components/GridLoadableCell.d.ts +1 -1
  10. package/dist/src/components/GridNoRowsOverlay.d.ts +9 -9
  11. package/dist/src/components/GridPopoverHook.d.ts +12 -12
  12. package/dist/src/components/GridWrapper.d.ts +5 -5
  13. package/dist/src/components/PostSortRowsHook.d.ts +11 -11
  14. package/dist/src/components/gridFilter/GridFilterButtons.d.ts +16 -16
  15. package/dist/src/components/gridFilter/GridFilterColumnsToggle.d.ts +5 -5
  16. package/dist/src/components/gridFilter/GridFilterDownloadCsvButton.d.ts +2 -2
  17. package/dist/src/components/gridFilter/GridFilterHeaderIconButton.d.ts +11 -11
  18. package/dist/src/components/gridFilter/GridFilterQuick.d.ts +5 -5
  19. package/dist/src/components/gridFilter/GridFilters.d.ts +2 -2
  20. package/dist/src/components/gridFilter/index.d.ts +7 -7
  21. package/dist/src/components/gridFilter/useGridFilter.d.ts +3 -3
  22. package/dist/src/components/gridForm/GridFormDropDown.d.ts +37 -37
  23. package/dist/src/components/gridForm/GridFormEditBearing.d.ts +12 -12
  24. package/dist/src/components/gridForm/GridFormMessage.d.ts +7 -7
  25. package/dist/src/components/gridForm/GridFormMultiSelect.d.ts +36 -36
  26. package/dist/src/components/gridForm/GridFormMultiSelectGrid.d.ts +24 -24
  27. package/dist/src/components/gridForm/GridFormPopoverMenu.d.ts +36 -36
  28. package/dist/src/components/gridForm/GridFormSubComponentTextArea.d.ts +12 -12
  29. package/dist/src/components/gridForm/GridFormSubComponentTextInput.d.ts +11 -11
  30. package/dist/src/components/gridForm/GridFormTextArea.d.ts +14 -14
  31. package/dist/src/components/gridForm/GridFormTextInput.d.ts +14 -14
  32. package/dist/src/components/gridForm/index.d.ts +10 -10
  33. package/dist/src/components/gridHeader/GridHeaderSelect.d.ts +7 -7
  34. package/dist/src/components/gridHeader/index.d.ts +1 -1
  35. package/dist/src/components/gridHook/index.d.ts +1 -1
  36. package/dist/src/components/gridHook/useGridContextMenu.d.ts +19 -19
  37. package/dist/src/components/gridPopoverEdit/GridPopoutEditMultiSelect.d.ts +5 -5
  38. package/dist/src/components/gridPopoverEdit/GridPopoutEditMultiSelectGrid.d.ts +5 -5
  39. package/dist/src/components/gridPopoverEdit/GridPopoverEditBearing.d.ts +16 -16
  40. package/dist/src/components/gridPopoverEdit/GridPopoverEditDropDown.d.ts +5 -5
  41. package/dist/src/components/gridPopoverEdit/GridPopoverMenu.d.ts +8 -8
  42. package/dist/src/components/gridPopoverEdit/GridPopoverMessage.d.ts +5 -5
  43. package/dist/src/components/gridPopoverEdit/GridPopoverTextArea.d.ts +5 -5
  44. package/dist/src/components/gridPopoverEdit/GridPopoverTextInput.d.ts +5 -5
  45. package/dist/src/components/gridPopoverEdit/index.d.ts +9 -9
  46. package/dist/src/components/gridRender/GridRenderGenericCell.d.ts +16 -37
  47. package/dist/src/components/gridRender/GridRenderPopoutMenuCell.d.ts +2 -2
  48. package/dist/src/components/gridRender/index.d.ts +2 -2
  49. package/dist/src/components/gridUtil.d.ts +3 -3
  50. package/dist/src/components/index.d.ts +18 -18
  51. package/dist/src/contexts/GridContext.d.ts +67 -67
  52. package/dist/src/contexts/GridContextProvider.d.ts +15 -15
  53. package/dist/src/contexts/GridContextProvider.test.d.ts +1 -1
  54. package/dist/src/contexts/GridPopoverContext.d.ts +15 -15
  55. package/dist/src/contexts/GridPopoverContextProvider.d.ts +7 -7
  56. package/dist/src/contexts/GridSubComponentContext.d.ts +10 -10
  57. package/dist/src/contexts/GridUpdatingContext.d.ts +8 -8
  58. package/dist/src/contexts/GridUpdatingContextProvider.d.ts +3 -3
  59. package/dist/src/index.d.ts +17 -17
  60. package/dist/src/lui/ActionButton.d.ts +20 -20
  61. package/dist/src/lui/FormError.d.ts +7 -7
  62. package/dist/src/lui/TextAreaInput.d.ts +11 -11
  63. package/dist/src/lui/TextInputFormatted.d.ts +10 -10
  64. package/dist/src/lui/reactUtils.d.ts +6 -6
  65. package/dist/src/lui/reactUtils.test.d.ts +1 -1
  66. package/dist/src/lui/stateDeferredHook.d.ts +4 -4
  67. package/dist/src/lui/timeoutHook.d.ts +14 -14
  68. package/dist/src/lui/timeoutHook.test.d.ts +1 -1
  69. package/dist/src/react-menu3/components/ControlledMenu.d.ts +8 -8
  70. package/dist/src/react-menu3/components/FocusableItem.d.ts +9 -9
  71. package/dist/src/react-menu3/components/Menu.d.ts +16 -16
  72. package/dist/src/react-menu3/components/MenuButton.d.ts +8 -8
  73. package/dist/src/react-menu3/components/MenuDivider.d.ts +3 -3
  74. package/dist/src/react-menu3/components/MenuGroup.d.ts +12 -12
  75. package/dist/src/react-menu3/components/MenuHeader.d.ts +4 -4
  76. package/dist/src/react-menu3/components/MenuItem.d.ts +59 -59
  77. package/dist/src/react-menu3/components/MenuList.d.ts +2 -2
  78. package/dist/src/react-menu3/components/MenuRadioGroup.d.ts +25 -25
  79. package/dist/src/react-menu3/components/SubMenu.d.ts +110 -110
  80. package/dist/src/react-menu3/contexts/EventHandlersContext.d.ts +7 -7
  81. package/dist/src/react-menu3/contexts/HoverItemContext.d.ts +2 -2
  82. package/dist/src/react-menu3/contexts/ItemSettingsContext.d.ts +5 -5
  83. package/dist/src/react-menu3/contexts/MenuListContext.d.ts +9 -9
  84. package/dist/src/react-menu3/contexts/MenuListItemContext.d.ts +11 -11
  85. package/dist/src/react-menu3/contexts/RadioGroupContext.d.ts +7 -7
  86. package/dist/src/react-menu3/contexts/SettingsContext.d.ts +20 -20
  87. package/dist/src/react-menu3/hooks/index.d.ts +9 -9
  88. package/dist/src/react-menu3/hooks/useBEM.d.ts +10 -10
  89. package/dist/src/react-menu3/hooks/useCombinedRef.d.ts +2 -2
  90. package/dist/src/react-menu3/hooks/useIsomorphicLayoutEffect.d.ts +3 -3
  91. package/dist/src/react-menu3/hooks/useItemEffect.d.ts +2 -2
  92. package/dist/src/react-menu3/hooks/useItemState.d.ts +7 -7
  93. package/dist/src/react-menu3/hooks/useItems.d.ts +7 -7
  94. package/dist/src/react-menu3/hooks/useMenuChange.d.ts +2 -2
  95. package/dist/src/react-menu3/hooks/useMenuState.d.ts +23 -14
  96. package/dist/src/react-menu3/hooks/useMenuStateAndFocus.d.ts +2 -2
  97. package/dist/src/react-menu3/index.d.ts +11 -11
  98. package/dist/src/react-menu3/positionUtils/getPositionHelpers.d.ts +11 -11
  99. package/dist/src/react-menu3/positionUtils/index.d.ts +3 -3
  100. package/dist/src/react-menu3/positionUtils/placeArrowHorizontal.d.ts +8 -8
  101. package/dist/src/react-menu3/positionUtils/placeArrowVertical.d.ts +8 -8
  102. package/dist/src/react-menu3/positionUtils/placeLeftorRight.d.ts +19 -19
  103. package/dist/src/react-menu3/positionUtils/placeToporBottom.d.ts +19 -19
  104. package/dist/src/react-menu3/positionUtils/positionContextMenu.d.ts +13 -13
  105. package/dist/src/react-menu3/positionUtils/positionMenu.d.ts +26 -26
  106. package/dist/src/react-menu3/style-utils/index.d.ts +11 -11
  107. package/dist/src/react-menu3/types.d.ts +401 -401
  108. package/dist/src/react-menu3/utils/constants.d.ts +54 -54
  109. package/dist/src/react-menu3/utils/index.d.ts +3 -3
  110. package/dist/src/react-menu3/utils/propTypes2.d.ts +56 -56
  111. package/dist/src/react-menu3/utils/utils.d.ts +37 -37
  112. package/dist/src/react-menu3/utils/withHovering.d.ts +7 -7
  113. package/dist/src/utils/bearing.d.ts +19 -19
  114. package/dist/src/utils/bearing.test.d.ts +1 -1
  115. package/dist/src/utils/deferredPromise.d.ts +5 -5
  116. package/dist/src/utils/storybookTestUtil.d.ts +3 -3
  117. package/dist/src/utils/testQuick.d.ts +62 -62
  118. package/dist/src/utils/testUtil.d.ts +46 -45
  119. package/dist/src/utils/textMatcher.d.ts +13 -13
  120. package/dist/src/utils/textMatcher.test.d.ts +1 -1
  121. package/dist/src/utils/textValidator.d.ts +18 -18
  122. package/dist/src/utils/textValidator.test.d.ts +1 -1
  123. package/dist/src/utils/util.d.ts +8 -8
  124. package/dist/src/utils/util.test.d.ts +1 -1
  125. package/dist/step-ag-grid.cjs.js +4652 -4651
  126. package/dist/step-ag-grid.cjs.js.map +1 -1
  127. package/dist/step-ag-grid.esm.js +4652 -4651
  128. package/dist/step-ag-grid.esm.js.map +1 -1
  129. package/dist/vite.config.d.ts +2 -0
  130. package/package.json +21 -20
  131. package/src/components/Grid.tsx +4 -4
  132. package/src/components/GridCell.test.tsx +2 -3
  133. package/src/components/GridCell.tsx +75 -23
  134. package/src/components/GridCellFiller.tsx +2 -1
  135. package/src/components/GridCellMultiEditor.tsx +9 -9
  136. package/src/components/GridCellMultiSelectClassRules.tsx +4 -4
  137. package/src/components/GridPopoverHook.tsx +4 -4
  138. package/src/components/PostSortRowsHook.ts +2 -2
  139. package/src/components/gridFilter/GridFilterButtons.tsx +6 -6
  140. package/src/components/gridFilter/GridFilterColumnsToggle.tsx +2 -5
  141. package/src/components/gridFilter/GridFilterDownloadCsvButton.tsx +1 -1
  142. package/src/components/gridFilter/useGridFilter.ts +1 -1
  143. package/src/components/gridForm/GridFormDropDown.tsx +9 -9
  144. package/src/components/gridForm/GridFormEditBearing.tsx +5 -5
  145. package/src/components/gridForm/GridFormMessage.tsx +4 -4
  146. package/src/components/gridForm/GridFormMultiSelect.tsx +9 -9
  147. package/src/components/gridForm/GridFormMultiSelectGrid.tsx +11 -11
  148. package/src/components/gridForm/GridFormPopoverMenu.tsx +13 -13
  149. package/src/components/gridForm/GridFormSubComponentTextArea.tsx +4 -4
  150. package/src/components/gridForm/GridFormSubComponentTextInput.tsx +4 -4
  151. package/src/components/gridForm/GridFormTextArea.tsx +6 -6
  152. package/src/components/gridForm/GridFormTextInput.tsx +7 -7
  153. package/src/components/gridHook/useGridContextMenu.tsx +8 -8
  154. package/src/components/gridPopoverEdit/GridPopoutEditMultiSelect.ts +6 -6
  155. package/src/components/gridPopoverEdit/GridPopoutEditMultiSelectGrid.ts +6 -6
  156. package/src/components/gridPopoverEdit/GridPopoverEditBearing.ts +16 -16
  157. package/src/components/gridPopoverEdit/GridPopoverEditDropDown.ts +6 -6
  158. package/src/components/gridPopoverEdit/GridPopoverMenu.tsx +5 -5
  159. package/src/components/gridPopoverEdit/GridPopoverMessage.ts +5 -5
  160. package/src/components/gridPopoverEdit/GridPopoverTextArea.ts +5 -4
  161. package/src/components/gridPopoverEdit/GridPopoverTextInput.ts +5 -5
  162. package/src/components/gridRender/GridRenderGenericCell.tsx +6 -36
  163. package/src/contexts/GridContext.tsx +7 -7
  164. package/src/contexts/GridContextProvider.test.tsx +1 -1
  165. package/src/contexts/GridContextProvider.tsx +10 -10
  166. package/src/contexts/GridPopoverContext.tsx +6 -6
  167. package/src/stories/grid/GridDragRow.stories.tsx +4 -4
  168. package/src/stories/grid/GridNonEditableRow.stories.tsx +2 -3
  169. package/src/stories/grid/GridPopoutContextMenu.stories.tsx +2 -2
  170. package/src/stories/grid/GridPopoutEditGenericTextArea.stories.tsx +1 -1
  171. package/src/stories/grid/GridPopoverEditBearing.stories.tsx +2 -2
  172. package/src/stories/grid/GridPopoverEditDropDown.stories.tsx +3 -3
  173. package/src/stories/grid/GridPopoverEditMultiSelect.stories.tsx +2 -2
  174. package/src/stories/grid/GridPopoverEditMultiSelectGrid.stories.tsx +2 -2
  175. package/src/stories/grid/GridReadOnly.stories.tsx +6 -6
  176. package/src/stories/grid/GridViewList.stories.tsx +5 -7
  177. package/src/stories/grid/interactions/GridKeyboardInteractions.stories.tsx +3 -3
  178. package/src/utils/testUtil.ts +49 -7
  179. package/src/utils/textValidator.ts +5 -5
  180. package/src/utils/util.ts +1 -1
@@ -1,401 +1,401 @@
1
- import { ForwardedRef, MutableRefObject } from "react";
2
- export type MenuState = "opening" | "open" | "closing" | "closed";
3
- export type MenuAlign = "start" | "center" | "end";
4
- export type MenuDirection = "left" | "right" | "top" | "bottom";
5
- export type MenuPosition = "auto" | "anchor" | "initial";
6
- export type MenuOverflow = "auto" | "visible" | "hidden";
7
- export type MenuReposition = "auto" | "initial";
8
- export type MenuViewScroll = "auto" | "close" | "initial";
9
- export type MenuItemTypeProp = "checkbox" | "radio";
10
- export type CloseReason = "click" | "cancel" | "blur" | "scroll";
11
- /**
12
- * - `'first'` focus the first item in the menu.
13
- * - `'last'` focus the last item in the menu.
14
- * - `number` focus item at the specific position (zero-based).
15
- */
16
- export type FocusPosition = "first" | "last" | number;
17
- export type ClassNameProp<M = undefined> = string | ((modifiers: M) => string);
18
- export type RenderProp<M, R = React.ReactNode> = R | ((modifiers: M) => R);
19
- export interface BaseProps<M = undefined> extends Omit<React.HTMLAttributes<HTMLElement>, "className" | "children"> {
20
- ref?: React.Ref<any>;
21
- /**
22
- * Can be a string or a function which receives a modifier object and returns a CSS `class` string.
23
- */
24
- className?: ClassNameProp<M>;
25
- }
26
- export interface BasePropsWithChildren<M = undefined> extends Omit<React.HTMLAttributes<HTMLElement>, "className"> {
27
- ref?: React.Ref<any>;
28
- /**
29
- * Can be a string or a function which receives a modifier object and returns a CSS `class` string.
30
- */
31
- className?: ClassNameProp<M>;
32
- }
33
- export interface Event {
34
- /**
35
- * The `value` prop passed to the `MenuItem` being clicked.
36
- * It's useful for identifying which menu item is clicked.
37
- */
38
- value?: any;
39
- /**
40
- * Indicates the key if the event is triggered by keyboard. Can be 'Enter', ' '(Space) or 'Escape'.
41
- */
42
- key?: string;
43
- shiftKey?: boolean;
44
- }
45
- export interface MenuCloseEvent extends Event {
46
- /**
47
- * The reason that causes the close event.
48
- */
49
- reason: CloseReason;
50
- }
51
- export interface MenuChangeEvent {
52
- /**
53
- * Indicates if the menu is open or closed.
54
- */
55
- open: boolean;
56
- }
57
- export interface EventHandler<E> {
58
- (event: E): void;
59
- }
60
- export interface RectElement {
61
- getBoundingClientRect(): {
62
- left: number;
63
- right: number;
64
- top: number;
65
- bottom: number;
66
- width: number;
67
- height: number;
68
- };
69
- }
70
- export type MenuModifiers = Readonly<{
71
- /**
72
- * Indicates the state of menu.
73
- */
74
- state: MenuState;
75
- /**
76
- * Computed direction in which the menu expands.
77
- */
78
- dir: MenuDirection;
79
- }>;
80
- export type MenuArrowModifiers = Readonly<{
81
- /**
82
- * Computed direction in which the menu expands.
83
- *
84
- * *Please note arrow points to the opposite direction of this value.*
85
- */
86
- dir: MenuDirection;
87
- }>;
88
- export type TransitionFieldType = boolean | {
89
- open?: boolean;
90
- close?: boolean;
91
- item?: boolean;
92
- };
93
- export interface MenuStateOptions {
94
- /**
95
- * By default menu isn't mounted into DOM until it's opened for the first time.
96
- * Setting the prop to `true` will change this behaviour,
97
- * which also enables menu and its items to be server rendered.
98
- */
99
- initialMounted?: boolean;
100
- /**
101
- * By default menu remains in DOM when it's closed.
102
- * Setting the prop to `true` will change this behaviour.
103
- */
104
- unmountOnClose?: boolean;
105
- /**
106
- * Enable or disable transition effects in `Menu`, `MenuItem`, and any descendent `SubMenu`.
107
- *
108
- * You can set 'open', 'close' and 'item' at the same time with one boolean value or separately with an object.
109
- *
110
- * *If you enable transition on menu, make sure to add your own animation styles,
111
- * or import `'@szhsin/react-menu/dist/transitions/slide.css'`,
112
- * otherwise menu cannot be closed or have visible delay when closed.*
113
- *
114
- * @example [CodeSandbox Demo](https://codesandbox.io/s/react-menu-sass-i1wxo)
115
- */
116
- transition?: TransitionFieldType;
117
- /**
118
- * A fallback timeout in `ms` to stop transition if `onAnimationEnd` events are not fired.
119
- *
120
- * *Note: this value should be greater than or equal to the duration of
121
- * transition animation applied on menu.*
122
- *
123
- * @default 500
124
- */
125
- transitionTimeout?: number;
126
- }
127
- export interface Hoverable {
128
- disabled?: boolean;
129
- index?: number;
130
- }
131
- /**
132
- * Common props for `Menu`, `SubMenu` and `ControlledMenu`
133
- */
134
- interface BaseMenuProps extends Omit<BaseProps, "style"> {
135
- /**
136
- * Can be a string or a function which receives a modifier object and returns a CSS `class` string.
137
- */
138
- menuClassName?: ClassNameProp<MenuModifiers>;
139
- /**
140
- * This prop is forwarded to the `style` prop of menu DOM element.
141
- */
142
- menuStyle?: React.CSSProperties;
143
- /**
144
- * Can be a string or a function which receives a modifier object and returns a CSS `class` string.
145
- */
146
- arrowClassName?: ClassNameProp<MenuArrowModifiers>;
147
- /**
148
- * This prop is forwarded to the `style` prop of menu arrow DOM element.
149
- */
150
- arrowStyle?: React.CSSProperties;
151
- /**
152
- * Set `true` to display an arrow pointing to its anchor element.
153
- */
154
- arrow?: boolean;
155
- /**
156
- * Set the horizontal distance (in pixels) between menu and its anchor element.
157
- * The value can be negative.
158
- * @default 0
159
- */
160
- offsetX?: number;
161
- /**
162
- * Set the vertical distance (in pixels) between menu and its anchor element.
163
- * The value can be negative.
164
- * @default 0
165
- */
166
- offsetY?: number;
167
- /**
168
- * Set alignment of menu with anchor element.
169
- * @default 'start'
170
- */
171
- align?: MenuAlign;
172
- /**
173
- * Set direction in which menu expands against anchor element.
174
- * @default 'bottom'
175
- */
176
- direction?: MenuDirection;
177
- /**
178
- * Set the position of menu related to its anchor element:
179
- *
180
- * - 'auto' menu position is adjusted to have it contained within the viewport,
181
- * even if it will be detached from the anchor element.
182
- * This option allows to display menu in the viewport as much as possible.
183
- *
184
- * - 'anchor' menu position is adjusted to have it contained within the viewport,
185
- * but it will be kept attached to the edges of anchor element.
186
- *
187
- * - 'initial' menu always stays at its initial position.
188
- * @default 'auto'
189
- */
190
- position?: MenuPosition;
191
- /**
192
- * Make the menu list scrollable or hidden when there is not enough viewport space to
193
- * display all menu items. The prop is similar to the CSS `overflow` property.
194
- * @default 'visible'
195
- */
196
- overflow?: MenuOverflow;
197
- /**
198
- * Set computed overflow amount down to a child `MenuGroup`.
199
- * The `MenuGroup` should have `takeOverflow` prop set as `true` accordingly.
200
- */
201
- setDownOverflow?: boolean;
202
- children?: React.ReactNode;
203
- }
204
- export type MenuButtonModifiers = Readonly<{
205
- /**
206
- * Indicates if the associated menu is open.
207
- */
208
- open: boolean;
209
- }>;
210
- export interface MenuInstance {
211
- /**
212
- * Open menu and optionally request which menu item will be hovered.
213
- */
214
- openMenu: (position?: FocusPosition, alwaysUpdate?: boolean) => void;
215
- /**
216
- * Close menu
217
- */
218
- closeMenu: () => void;
219
- }
220
- /**
221
- * Common props for `Menu` and `SubMenu`
222
- */
223
- export interface UncontrolledMenuProps {
224
- /**
225
- * Menu component ref which can be used to programmatically open or close menu.
226
- */
227
- instanceRef?: React.Ref<MenuInstance>;
228
- /**
229
- * Event fired after menu is open or closed.
230
- */
231
- onMenuChange?: EventHandler<MenuChangeEvent>;
232
- }
233
- export interface RadioChangeEvent extends Event {
234
- /**
235
- * The `name` prop passed to the `MenuRadioGroup` when the menu item is in a radio group.
236
- */
237
- name?: string;
238
- /**
239
- * Set this property on event object to control whether to keep menu open after menu item is activated.
240
- * Leaving it `undefined` will behave in accordance with WAI-ARIA Authoring Practices.
241
- */
242
- keepOpen?: boolean;
243
- /**
244
- * Setting this property on event object to `true` will skip `onItemClick` event on root menu component.
245
- */
246
- stopPropagation?: boolean;
247
- /**
248
- * DOM event object (React synthetic event)
249
- */
250
- syntheticEvent: MouseEvent | KeyboardEvent;
251
- }
252
- export interface ClickEvent extends RadioChangeEvent {
253
- /**
254
- * Indicates if the menu item is checked, only for `MenuItem` type="checkbox".
255
- */
256
- checked?: boolean;
257
- }
258
- export type PortalFieldType = boolean | {
259
- /**
260
- * A DOM node under which menu will be rendered.
261
- */
262
- target?: Element | null;
263
- /**
264
- * When `target` is null, setting this value `true` prevents menu from rendering into the DOM hierarchy of its parent component.
265
- */
266
- stablePosition?: boolean;
267
- };
268
- /**
269
- * Common props for `Menu` and `ControlledMenu`
270
- */
271
- export interface RootMenuProps extends BaseMenuProps, MenuStateOptions {
272
- /**
273
- * Properties of this object are spread to the root DOM element containing the menu.
274
- */
275
- containerProps?: Omit<React.HTMLAttributes<HTMLElement>, "className">;
276
- /**
277
- * A ref object attached to a DOM element within which menu will be positioned.
278
- * If not provided, the nearest ancestor which has CSS `overflow` set to a value
279
- * other than 'visible' or the browser viewport will serve as the bounding box.
280
- */
281
- boundingBoxRef?: React.RefObject<Element | RectElement>;
282
- /**
283
- * Specify bounding box padding in pixels. Use a syntax similar to the CSS
284
- * `padding` property but sizing units are discarded.
285
- * @example '10', '5 10', '1 2 4', or '2 5 3 1'
286
- */
287
- boundingBoxPadding?: string;
288
- /**
289
- * Set the behaviour of menu and any of its descendent submenus when window is scrolling:
290
- * - 'initial' The window scroll event is ignored and has no effect on menu.
291
- * - 'auto' Menu will reposition itself based on the value of `position` prop when window is scrolling.
292
- * - 'close' menu will be closed when window is scrolled.
293
- * @default 'initial'
294
- */
295
- viewScroll?: MenuViewScroll;
296
- /**
297
- * - If `true`, menu is rendered as a direct child of `document.body`,
298
- * - or you can specify a target element in the DOM as menu container.
299
- *
300
- * Portal allows menu to visually “break out” of its container. Typical use cases may include:
301
- * - An ancestor container is positioned and CSS `overflow` is set to a value other than `visible`.
302
- * - You have a DOM structure that creates a complex hierarchy of stacking contexts,
303
- * and menu is overlapped regardless of `z-index` value.
304
- */
305
- portal?: PortalFieldType;
306
- /**
307
- * Specify when menu is repositioned:
308
- * - 'initial' Don't automatically reposition menu. Set to this value when you want
309
- * to explicitly reposition menu using the `repositionFlag` prop.
310
- * - 'auto' Reposition menu whenever its size has changed, using the `ResizeObserver` API.
311
- * @default 'auto'
312
- */
313
- reposition?: MenuReposition;
314
- /**
315
- * Use this prop to explicitly reposition menu. Whenever the prop has a new value,
316
- * menu position will be recalculated and updated.
317
- * You might use a counter and increase it every time.
318
- *
319
- * *Warning: don't update this prop in rapid succession,
320
- * which is inefficient and might cause infinite rendering of component.
321
- * E.g., don't change the value of this prop in `window` scroll event.*
322
- */
323
- repositionFlag?: number | string;
324
- /**
325
- * Set a delay in `ms` before opening a submenu when mouse moves over it.
326
- * @default 300
327
- */
328
- submenuOpenDelay?: number;
329
- /**
330
- * Set a delay in `ms` before closing a submenu when it's open and mouse is
331
- * moving over other items in the parent menu list.
332
- * @default 150
333
- */
334
- submenuCloseDelay?: number;
335
- /**
336
- * Set a CSS `class` on the container element of menu for theming purpose.
337
- */
338
- theming?: string;
339
- /**
340
- * Event fired when descendent menu items are clicked.
341
- */
342
- onItemClick?: EventHandler<ClickEvent>;
343
- /**
344
- * NEW Don't shrink container if menu direction is "top"
345
- */
346
- dontShrinkIfDirectionIsTop?: boolean;
347
- }
348
- export interface ExtraMenuProps {
349
- isDisabled?: boolean;
350
- ariaLabel?: string;
351
- containerRef?: MutableRefObject<HTMLElement | undefined>;
352
- externalRef?: ForwardedRef<HTMLUListElement>;
353
- parentScrollingRef?: MutableRefObject<any>;
354
- }
355
- export interface ControlledMenuProps extends RootMenuProps, ExtraMenuProps {
356
- /**
357
- * Viewport coordinates to which context menu will be positioned.
358
- *
359
- * *Use this prop only for context menu*
360
- */
361
- anchorPoint?: {
362
- x: number;
363
- y: number;
364
- };
365
- /**
366
- * A ref object attached to a DOM element to which menu will be positioned.
367
- *
368
- * *Don't set this prop for context menu*
369
- */
370
- anchorRef?: React.RefObject<Element>;
371
- skipOpen?: React.MutableRefObject<boolean>;
372
- /**
373
- * If `true`, the menu list element will gain focus after menu is open.
374
- * @default true
375
- */
376
- captureFocus?: boolean;
377
- /**
378
- * Controls the state of menu. When the prop is `undefined`, menu will be unmounted from DOM.
379
- */
380
- state?: MenuState;
381
- /**
382
- * Sets which menu item receives focus (hover) when menu opens.
383
- * You will usually set this prop when the menu is opened by keyboard events.
384
- *
385
- * *Note: If you don't intend to update focus (hover) position,
386
- * it's important to keep this prop's identity stable when your component re-renders.*
387
- */
388
- menuItemFocus?: {
389
- position?: FocusPosition;
390
- alwaysUpdate?: boolean;
391
- };
392
- /**
393
- * Set the return value of `useMenuState` to this prop.
394
- */
395
- endTransition?: () => void;
396
- /**
397
- * Event fired when menu is about to close.
398
- */
399
- onClose?: EventHandler<MenuCloseEvent>;
400
- }
401
- export {};
1
+ import { ForwardedRef, MutableRefObject } from "react";
2
+ export type MenuState = "opening" | "open" | "closing" | "closed";
3
+ export type MenuAlign = "start" | "center" | "end";
4
+ export type MenuDirection = "left" | "right" | "top" | "bottom";
5
+ export type MenuPosition = "auto" | "anchor" | "initial";
6
+ export type MenuOverflow = "auto" | "visible" | "hidden";
7
+ export type MenuReposition = "auto" | "initial";
8
+ export type MenuViewScroll = "auto" | "close" | "initial";
9
+ export type MenuItemTypeProp = "checkbox" | "radio";
10
+ export type CloseReason = "click" | "cancel" | "blur" | "scroll";
11
+ /**
12
+ * - `'first'` focus the first item in the menu.
13
+ * - `'last'` focus the last item in the menu.
14
+ * - `number` focus item at the specific position (zero-based).
15
+ */
16
+ export type FocusPosition = "first" | "last" | number;
17
+ export type ClassNameProp<M = undefined> = string | ((modifiers: M) => string);
18
+ export type RenderProp<M, R = React.ReactNode> = R | ((modifiers: M) => R);
19
+ export interface BaseProps<M = undefined> extends Omit<React.HTMLAttributes<HTMLElement>, "className" | "children"> {
20
+ ref?: React.Ref<any>;
21
+ /**
22
+ * Can be a string or a function which receives a modifier object and returns a CSS `class` string.
23
+ */
24
+ className?: ClassNameProp<M>;
25
+ }
26
+ export interface BasePropsWithChildren<M = undefined> extends Omit<React.HTMLAttributes<HTMLElement>, "className"> {
27
+ ref?: React.Ref<any>;
28
+ /**
29
+ * Can be a string or a function which receives a modifier object and returns a CSS `class` string.
30
+ */
31
+ className?: ClassNameProp<M>;
32
+ }
33
+ export interface Event {
34
+ /**
35
+ * The `value` prop passed to the `MenuItem` being clicked.
36
+ * It's useful for identifying which menu item is clicked.
37
+ */
38
+ value?: any;
39
+ /**
40
+ * Indicates the key if the event is triggered by keyboard. Can be 'Enter', ' '(Space) or 'Escape'.
41
+ */
42
+ key?: string;
43
+ shiftKey?: boolean;
44
+ }
45
+ export interface MenuCloseEvent extends Event {
46
+ /**
47
+ * The reason that causes the close event.
48
+ */
49
+ reason: CloseReason;
50
+ }
51
+ export interface MenuChangeEvent {
52
+ /**
53
+ * Indicates if the menu is open or closed.
54
+ */
55
+ open: boolean;
56
+ }
57
+ export interface EventHandler<E> {
58
+ (event: E): void;
59
+ }
60
+ export interface RectElement {
61
+ getBoundingClientRect(): {
62
+ left: number;
63
+ right: number;
64
+ top: number;
65
+ bottom: number;
66
+ width: number;
67
+ height: number;
68
+ };
69
+ }
70
+ export type MenuModifiers = Readonly<{
71
+ /**
72
+ * Indicates the state of menu.
73
+ */
74
+ state: MenuState;
75
+ /**
76
+ * Computed direction in which the menu expands.
77
+ */
78
+ dir: MenuDirection;
79
+ }>;
80
+ export type MenuArrowModifiers = Readonly<{
81
+ /**
82
+ * Computed direction in which the menu expands.
83
+ *
84
+ * *Please note arrow points to the opposite direction of this value.*
85
+ */
86
+ dir: MenuDirection;
87
+ }>;
88
+ export type TransitionFieldType = boolean | {
89
+ open?: boolean;
90
+ close?: boolean;
91
+ item?: boolean;
92
+ };
93
+ export interface MenuStateOptions {
94
+ /**
95
+ * By default menu isn't mounted into DOM until it's opened for the first time.
96
+ * Setting the prop to `true` will change this behaviour,
97
+ * which also enables menu and its items to be server rendered.
98
+ */
99
+ initialMounted?: boolean;
100
+ /**
101
+ * By default menu remains in DOM when it's closed.
102
+ * Setting the prop to `true` will change this behaviour.
103
+ */
104
+ unmountOnClose?: boolean;
105
+ /**
106
+ * Enable or disable transition effects in `Menu`, `MenuItem`, and any descendent `SubMenu`.
107
+ *
108
+ * You can set 'open', 'close' and 'item' at the same time with one boolean value or separately with an object.
109
+ *
110
+ * *If you enable transition on menu, make sure to add your own animation styles,
111
+ * or import `'@szhsin/react-menu/dist/transitions/slide.css'`,
112
+ * otherwise menu cannot be closed or have visible delay when closed.*
113
+ *
114
+ * @example [CodeSandbox Demo](https://codesandbox.io/s/react-menu-sass-i1wxo)
115
+ */
116
+ transition?: TransitionFieldType;
117
+ /**
118
+ * A fallback timeout in `ms` to stop transition if `onAnimationEnd` events are not fired.
119
+ *
120
+ * *Note: this value should be greater than or equal to the duration of
121
+ * transition animation applied on menu.*
122
+ *
123
+ * @default 500
124
+ */
125
+ transitionTimeout?: number;
126
+ }
127
+ export interface Hoverable {
128
+ disabled?: boolean;
129
+ index?: number;
130
+ }
131
+ /**
132
+ * Common props for `Menu`, `SubMenu` and `ControlledMenu`
133
+ */
134
+ interface BaseMenuProps extends Omit<BaseProps, "style"> {
135
+ /**
136
+ * Can be a string or a function which receives a modifier object and returns a CSS `class` string.
137
+ */
138
+ menuClassName?: ClassNameProp<MenuModifiers>;
139
+ /**
140
+ * This prop is forwarded to the `style` prop of menu DOM element.
141
+ */
142
+ menuStyle?: React.CSSProperties;
143
+ /**
144
+ * Can be a string or a function which receives a modifier object and returns a CSS `class` string.
145
+ */
146
+ arrowClassName?: ClassNameProp<MenuArrowModifiers>;
147
+ /**
148
+ * This prop is forwarded to the `style` prop of menu arrow DOM element.
149
+ */
150
+ arrowStyle?: React.CSSProperties;
151
+ /**
152
+ * Set `true` to display an arrow pointing to its anchor element.
153
+ */
154
+ arrow?: boolean;
155
+ /**
156
+ * Set the horizontal distance (in pixels) between menu and its anchor element.
157
+ * The value can be negative.
158
+ * @default 0
159
+ */
160
+ offsetX?: number;
161
+ /**
162
+ * Set the vertical distance (in pixels) between menu and its anchor element.
163
+ * The value can be negative.
164
+ * @default 0
165
+ */
166
+ offsetY?: number;
167
+ /**
168
+ * Set alignment of menu with anchor element.
169
+ * @default 'start'
170
+ */
171
+ align?: MenuAlign;
172
+ /**
173
+ * Set direction in which menu expands against anchor element.
174
+ * @default 'bottom'
175
+ */
176
+ direction?: MenuDirection;
177
+ /**
178
+ * Set the position of menu related to its anchor element:
179
+ *
180
+ * - 'auto' menu position is adjusted to have it contained within the viewport,
181
+ * even if it will be detached from the anchor element.
182
+ * This option allows to display menu in the viewport as much as possible.
183
+ *
184
+ * - 'anchor' menu position is adjusted to have it contained within the viewport,
185
+ * but it will be kept attached to the edges of anchor element.
186
+ *
187
+ * - 'initial' menu always stays at its initial position.
188
+ * @default 'auto'
189
+ */
190
+ position?: MenuPosition;
191
+ /**
192
+ * Make the menu list scrollable or hidden when there is not enough viewport space to
193
+ * display all menu items. The prop is similar to the CSS `overflow` property.
194
+ * @default 'visible'
195
+ */
196
+ overflow?: MenuOverflow;
197
+ /**
198
+ * Set computed overflow amount down to a child `MenuGroup`.
199
+ * The `MenuGroup` should have `takeOverflow` prop set as `true` accordingly.
200
+ */
201
+ setDownOverflow?: boolean;
202
+ children?: React.ReactNode;
203
+ }
204
+ export type MenuButtonModifiers = Readonly<{
205
+ /**
206
+ * Indicates if the associated menu is open.
207
+ */
208
+ open: boolean;
209
+ }>;
210
+ export interface MenuInstance {
211
+ /**
212
+ * Open menu and optionally request which menu item will be hovered.
213
+ */
214
+ openMenu: (position?: FocusPosition, alwaysUpdate?: boolean) => void;
215
+ /**
216
+ * Close menu
217
+ */
218
+ closeMenu: () => void;
219
+ }
220
+ /**
221
+ * Common props for `Menu` and `SubMenu`
222
+ */
223
+ export interface UncontrolledMenuProps {
224
+ /**
225
+ * Menu component ref which can be used to programmatically open or close menu.
226
+ */
227
+ instanceRef?: React.Ref<MenuInstance>;
228
+ /**
229
+ * Event fired after menu is open or closed.
230
+ */
231
+ onMenuChange?: EventHandler<MenuChangeEvent>;
232
+ }
233
+ export interface RadioChangeEvent extends Event {
234
+ /**
235
+ * The `name` prop passed to the `MenuRadioGroup` when the menu item is in a radio group.
236
+ */
237
+ name?: string;
238
+ /**
239
+ * Set this property on event object to control whether to keep menu open after menu item is activated.
240
+ * Leaving it `undefined` will behave in accordance with WAI-ARIA Authoring Practices.
241
+ */
242
+ keepOpen?: boolean;
243
+ /**
244
+ * Setting this property on event object to `true` will skip `onItemClick` event on root menu component.
245
+ */
246
+ stopPropagation?: boolean;
247
+ /**
248
+ * DOM event object (React synthetic event)
249
+ */
250
+ syntheticEvent: MouseEvent | KeyboardEvent;
251
+ }
252
+ export interface ClickEvent extends RadioChangeEvent {
253
+ /**
254
+ * Indicates if the menu item is checked, only for `MenuItem` type="checkbox".
255
+ */
256
+ checked?: boolean;
257
+ }
258
+ export type PortalFieldType = boolean | {
259
+ /**
260
+ * A DOM node under which menu will be rendered.
261
+ */
262
+ target?: Element | null;
263
+ /**
264
+ * When `target` is null, setting this value `true` prevents menu from rendering into the DOM hierarchy of its parent component.
265
+ */
266
+ stablePosition?: boolean;
267
+ };
268
+ /**
269
+ * Common props for `Menu` and `ControlledMenu`
270
+ */
271
+ export interface RootMenuProps extends BaseMenuProps, MenuStateOptions {
272
+ /**
273
+ * Properties of this object are spread to the root DOM element containing the menu.
274
+ */
275
+ containerProps?: Omit<React.HTMLAttributes<HTMLElement>, "className">;
276
+ /**
277
+ * A ref object attached to a DOM element within which menu will be positioned.
278
+ * If not provided, the nearest ancestor which has CSS `overflow` set to a value
279
+ * other than 'visible' or the browser viewport will serve as the bounding box.
280
+ */
281
+ boundingBoxRef?: React.RefObject<Element | RectElement>;
282
+ /**
283
+ * Specify bounding box padding in pixels. Use a syntax similar to the CSS
284
+ * `padding` property but sizing units are discarded.
285
+ * @example '10', '5 10', '1 2 4', or '2 5 3 1'
286
+ */
287
+ boundingBoxPadding?: string;
288
+ /**
289
+ * Set the behaviour of menu and any of its descendent submenus when window is scrolling:
290
+ * - 'initial' The window scroll event is ignored and has no effect on menu.
291
+ * - 'auto' Menu will reposition itself based on the value of `position` prop when window is scrolling.
292
+ * - 'close' menu will be closed when window is scrolled.
293
+ * @default 'initial'
294
+ */
295
+ viewScroll?: MenuViewScroll;
296
+ /**
297
+ * - If `true`, menu is rendered as a direct child of `document.body`,
298
+ * - or you can specify a target element in the DOM as menu container.
299
+ *
300
+ * Portal allows menu to visually “break out” of its container. Typical use cases may include:
301
+ * - An ancestor container is positioned and CSS `overflow` is set to a value other than `visible`.
302
+ * - You have a DOM structure that creates a complex hierarchy of stacking contexts,
303
+ * and menu is overlapped regardless of `z-index` value.
304
+ */
305
+ portal?: PortalFieldType;
306
+ /**
307
+ * Specify when menu is repositioned:
308
+ * - 'initial' Don't automatically reposition menu. Set to this value when you want
309
+ * to explicitly reposition menu using the `repositionFlag` prop.
310
+ * - 'auto' Reposition menu whenever its size has changed, using the `ResizeObserver` API.
311
+ * @default 'auto'
312
+ */
313
+ reposition?: MenuReposition;
314
+ /**
315
+ * Use this prop to explicitly reposition menu. Whenever the prop has a new value,
316
+ * menu position will be recalculated and updated.
317
+ * You might use a counter and increase it every time.
318
+ *
319
+ * *Warning: don't update this prop in rapid succession,
320
+ * which is inefficient and might cause infinite rendering of component.
321
+ * E.g., don't change the value of this prop in `window` scroll event.*
322
+ */
323
+ repositionFlag?: number | string;
324
+ /**
325
+ * Set a delay in `ms` before opening a submenu when mouse moves over it.
326
+ * @default 300
327
+ */
328
+ submenuOpenDelay?: number;
329
+ /**
330
+ * Set a delay in `ms` before closing a submenu when it's open and mouse is
331
+ * moving over other items in the parent menu list.
332
+ * @default 150
333
+ */
334
+ submenuCloseDelay?: number;
335
+ /**
336
+ * Set a CSS `class` on the container element of menu for theming purpose.
337
+ */
338
+ theming?: string;
339
+ /**
340
+ * Event fired when descendent menu items are clicked.
341
+ */
342
+ onItemClick?: EventHandler<ClickEvent>;
343
+ /**
344
+ * NEW Don't shrink container if menu direction is "top"
345
+ */
346
+ dontShrinkIfDirectionIsTop?: boolean;
347
+ }
348
+ export interface ExtraMenuProps {
349
+ isDisabled?: boolean;
350
+ ariaLabel?: string;
351
+ containerRef?: MutableRefObject<HTMLElement | undefined>;
352
+ externalRef?: ForwardedRef<HTMLUListElement>;
353
+ parentScrollingRef?: MutableRefObject<any>;
354
+ }
355
+ export interface ControlledMenuProps extends RootMenuProps, ExtraMenuProps {
356
+ /**
357
+ * Viewport coordinates to which context menu will be positioned.
358
+ *
359
+ * *Use this prop only for context menu*
360
+ */
361
+ anchorPoint?: {
362
+ x: number;
363
+ y: number;
364
+ };
365
+ /**
366
+ * A ref object attached to a DOM element to which menu will be positioned.
367
+ *
368
+ * *Don't set this prop for context menu*
369
+ */
370
+ anchorRef?: React.RefObject<Element>;
371
+ skipOpen?: React.MutableRefObject<boolean>;
372
+ /**
373
+ * If `true`, the menu list element will gain focus after menu is open.
374
+ * @default true
375
+ */
376
+ captureFocus?: boolean;
377
+ /**
378
+ * Controls the state of menu. When the prop is `undefined`, menu will be unmounted from DOM.
379
+ */
380
+ state?: MenuState;
381
+ /**
382
+ * Sets which menu item receives focus (hover) when menu opens.
383
+ * You will usually set this prop when the menu is opened by keyboard events.
384
+ *
385
+ * *Note: If you don't intend to update focus (hover) position,
386
+ * it's important to keep this prop's identity stable when your component re-renders.*
387
+ */
388
+ menuItemFocus?: {
389
+ position?: FocusPosition;
390
+ alwaysUpdate?: boolean;
391
+ };
392
+ /**
393
+ * Set the return value of `useMenuState` to this prop.
394
+ */
395
+ endTransition?: () => void;
396
+ /**
397
+ * Event fired when menu is about to close.
398
+ */
399
+ onClose?: EventHandler<MenuCloseEvent>;
400
+ }
401
+ export {};