@ringcentral/spring-ui 1.12.0 → 1.13.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 (213) hide show
  1. package/Accordion.js +90 -34
  2. package/AccordionHeader.js +71 -21
  3. package/Alert.js +120 -28
  4. package/Animation.js +2 -46
  5. package/Announcement.js +46 -35
  6. package/Autocomplete.js +1011 -583
  7. package/Avatar.js +134 -73
  8. package/AvatarGroup.js +50 -7
  9. package/Backdrop.js +45 -7
  10. package/Badge.js +77 -15
  11. package/Block.js +34 -12
  12. package/BlockHeader.js +57 -15
  13. package/BottomNavigation.js +181 -65
  14. package/BottomNavigationItem.js +93 -30
  15. package/Button.js +160 -24
  16. package/CallButton.js +53 -31
  17. package/Checkbox.js +88 -26
  18. package/Chip.js +126 -26
  19. package/CircularProgressIndicator.js +80 -8
  20. package/ClickAwayListener.js +4 -1
  21. package/ComponentsProps.js +1 -0
  22. package/DatePicker.js +611 -192
  23. package/DateUtilsContext.js +43 -25
  24. package/Dialer.js +564 -253
  25. package/Dialog.js +99 -45
  26. package/Divider.js +43 -7
  27. package/DragHandle.js +32 -6
  28. package/Drawer.js +117 -19
  29. package/Dropdown.js +154 -77
  30. package/EmptyState.js +65 -15
  31. package/FabButton.js +51 -17
  32. package/FocusTrap.js +109 -12
  33. package/FormField.js +108 -12
  34. package/FormLabel.js +81 -7
  35. package/Icon.js +1 -8
  36. package/IconButton.js +142 -26
  37. package/IconButtonGroup.js +35 -12
  38. package/InlineEditable.js +98 -44
  39. package/LinearProgressIndicator.js +73 -24
  40. package/Link.js +40 -11
  41. package/List.js +54 -9
  42. package/ListItem.js +152 -23
  43. package/ListItemText.js +44 -17
  44. package/ListNavigation.js +272 -20
  45. package/Menu.js +139 -23
  46. package/MenuActions.js +37 -12
  47. package/MenuDivider.js +34 -8
  48. package/MenuFooter.js +36 -12
  49. package/MenuHeader.js +54 -16
  50. package/MenuItem.js +402 -35
  51. package/MenuItemText.js +51 -9
  52. package/MenuList.js +87 -36
  53. package/Modal.js +345 -16
  54. package/NestedMenuContext.js +183 -11
  55. package/Option.js +32 -36
  56. package/Overlap.js +54 -7
  57. package/PageHeader.js +62 -24
  58. package/PickerTextField.js +156 -35
  59. package/Popover.js +262 -21
  60. package/Popper.js +112 -62
  61. package/PopperPaper.js +54 -8
  62. package/Portal.js +6 -1
  63. package/Radio.js +65 -21
  64. package/RadioGroup.js +56 -17
  65. package/Rating.js +223 -87
  66. package/Select.js +387 -44
  67. package/SingleFilter.js +148 -79
  68. package/Skeleton.js +68 -17
  69. package/Slider.js +167 -69
  70. package/Snackbar.js +122 -59
  71. package/SortableList.js +32 -12
  72. package/SortableListDndContext.js +69 -22
  73. package/SortableListItem.js +92 -47
  74. package/SortableVirtualizedList.js +44 -20
  75. package/SplitButton.js +124 -89
  76. package/Squircle.js +4 -7
  77. package/StatusIndicator.js +51 -9
  78. package/Step.js +63 -38
  79. package/StepButton.js +51 -23
  80. package/StepConnector.js +48 -8
  81. package/StepContent.js +67 -24
  82. package/StepIcon.js +90 -9
  83. package/StepLabel.js +90 -14
  84. package/Stepper.js +65 -23
  85. package/SubMenu.js +203 -101
  86. package/SwipeableDrawer.js +439 -194
  87. package/Switch.js +70 -23
  88. package/Tab.js +120 -57
  89. package/TabContext.js +59 -15
  90. package/TabPanel.js +40 -13
  91. package/Table.js +60 -17
  92. package/TableBody.js +42 -12
  93. package/TableCell.js +84 -50
  94. package/TableContainer.js +32 -10
  95. package/TableFooter.js +38 -10
  96. package/TableHead.js +49 -15
  97. package/TablePagination.js +153 -79
  98. package/TableRow.js +60 -21
  99. package/Tabs.js +592 -271
  100. package/Tag.js +51 -16
  101. package/Text.js +68 -37
  102. package/TextField.js +209 -31
  103. package/Textarea.js +51 -42
  104. package/TimePicker.js +490 -232
  105. package/Tooltip.js +48 -23
  106. package/Tray.js +237 -13
  107. package/TrayMenu.js +62 -43
  108. package/VirtualizedList.js +205 -107
  109. package/VirtualizedMenu.js +359 -29
  110. package/VisuallyHidden.js +29 -6
  111. package/chunks/1250.js +98 -0
  112. package/chunks/1294.js +126 -0
  113. package/chunks/2956.js +18 -0
  114. package/chunks/4476.js +460 -0
  115. package/chunks/4491.js +10 -0
  116. package/chunks/4535.js +364 -0
  117. package/chunks/5047.js +3 -0
  118. package/chunks/6335.js +24 -0
  119. package/chunks/7279.js +10 -0
  120. package/chunks/8011.js +8 -0
  121. package/chunks/8307.js +56 -0
  122. package/chunks/8467.js +8 -0
  123. package/chunks/8809.js +8 -0
  124. package/chunks/{RadioGroup.context.js → 9551.js} +12 -6
  125. package/chunks/987.js +8 -0
  126. package/index.css +2436 -2261
  127. package/index.js +245 -195
  128. package/internal/utils/setRef.d.ts +2 -1
  129. package/package.json +4 -4
  130. package/src/Animation/hooks/useMotionSafeTransition/useMotionSafeTransition.d.ts +2 -0
  131. package/src/Autocomplete/SuggestionList/SuggestionList.d.ts +1 -1
  132. package/src/Button/Button.classes.d.ts +1 -1
  133. package/src/ComponentsProps.d.ts +111 -110
  134. package/src/DatePicker/DatePickerDataAttributes.d.ts +11 -0
  135. package/src/DatePicker/utils/DatePickerUtils.d.ts +1 -1
  136. package/src/MenuItem/MenuItem.type.d.ts +1 -0
  137. package/src/MenuList/MenuListContext.d.ts +2 -3
  138. package/src/Modal/Modal.type.d.ts +1 -0
  139. package/src/Popover/Popover.classes.d.ts +1 -1
  140. package/src/Popover/Popover.internal.d.ts +8 -0
  141. package/src/Popover/Popover.type.d.ts +1 -0
  142. package/src/Select/Select.type.d.ts +6 -4
  143. package/src/Table/Table.type.d.ts +3 -0
  144. package/src/Table/TableContext.d.ts +3 -0
  145. package/src/Table/TableRowContext.d.ts +7 -0
  146. package/src/Table/index.d.ts +1 -0
  147. package/src/TableCell/TableCell.classes.d.ts +1 -1
  148. package/src/TableFooter/TableFooter.classes.d.ts +1 -1
  149. package/src/TableFooter/TableFooter.type.d.ts +1 -0
  150. package/src/TableHead/TableHead.classes.d.ts +1 -1
  151. package/src/TableHead/TableHead.type.d.ts +1 -0
  152. package/src/TableRow/TableRow.type.d.ts +2 -0
  153. package/chunks/AccordionContext.js +0 -6
  154. package/chunks/Alert.js +0 -48
  155. package/chunks/AvatarGroup.js +0 -22
  156. package/chunks/Backdrop.js +0 -18
  157. package/chunks/Badge.js +0 -32
  158. package/chunks/BottomNavigationItem.js +0 -36
  159. package/chunks/Button.js +0 -88
  160. package/chunks/Chip.js +0 -73
  161. package/chunks/CircularProgressIndicator.js +0 -36
  162. package/chunks/Divider.js +0 -19
  163. package/chunks/DragHandle.js +0 -11
  164. package/chunks/Drawer.js +0 -33
  165. package/chunks/ExpandCollapseCaret.js +0 -24
  166. package/chunks/FormLabel.js +0 -27
  167. package/chunks/Icon.js +0 -25
  168. package/chunks/IconButtonLabel.js +0 -68
  169. package/chunks/List.js +0 -22
  170. package/chunks/ListItem.js +0 -83
  171. package/chunks/Menu.js +0 -61
  172. package/chunks/MenuDivider.js +0 -14
  173. package/chunks/MenuItemText.js +0 -18
  174. package/chunks/MenuList.js +0 -47
  175. package/chunks/Modal.js +0 -211
  176. package/chunks/Overlap.js +0 -25
  177. package/chunks/PickerTextField.js +0 -85
  178. package/chunks/Popover.js +0 -61
  179. package/chunks/PopperPaper.js +0 -15
  180. package/chunks/Select.js +0 -225
  181. package/chunks/ShowHideEye.js +0 -56
  182. package/chunks/SlideIn.js +0 -20
  183. package/chunks/SortableArrow.js +0 -73
  184. package/chunks/Squircle.js +0 -31
  185. package/chunks/StatusIndicator.js +0 -20
  186. package/chunks/StepConnector.js +0 -21
  187. package/chunks/StepIcon.js +0 -43
  188. package/chunks/StepLabel.js +0 -29
  189. package/chunks/StepperContext.js +0 -9
  190. package/chunks/TableContext.js +0 -6
  191. package/chunks/Tablelvl2Context.js +0 -6
  192. package/chunks/TabsContext.js +0 -6
  193. package/chunks/TextField.js +0 -110
  194. package/chunks/Tooltip.js +0 -217
  195. package/chunks/VirtualizedMenu.js +0 -162
  196. package/chunks/VisuallyHidden.js +0 -12
  197. package/chunks/composeEventHandlers.js +0 -10
  198. package/chunks/getFade.js +0 -27
  199. package/chunks/getGrow.js +0 -70
  200. package/chunks/getSlideIn.js +0 -30
  201. package/chunks/hasContent.js +0 -3
  202. package/chunks/useAnimationFrame.js +0 -15
  203. package/chunks/useFocusTrapStack.js +0 -38
  204. package/chunks/useHelperTextId.js +0 -24
  205. package/chunks/useListNavigation.js +0 -199
  206. package/chunks/useMenuItemSelect.js +0 -282
  207. package/chunks/useMotionSafeTransition.js +0 -9
  208. package/chunks/useNestedMenuItem.js +0 -27
  209. package/chunks/useNestedParentMenu.js +0 -113
  210. package/chunks/usePrefersReducedMotion.js +0 -36
  211. package/chunks/useTooltipForceHide.js +0 -27
  212. package/chunks/useTrayNavigate.js +0 -150
  213. package/chunks/withTooltip.js +0 -15
package/Popover.js CHANGED
@@ -1,21 +1,262 @@
1
- export { P as Popover } from './chunks/Popover.js';
2
- import 'react/jsx-runtime';
3
- import 'react';
4
- import '@floating-ui/react-dom';
5
- import '@ringcentral/spring-base';
6
- import '@ringcentral/spring-theme';
7
- import 'framer-motion';
8
- import './chunks/Icon.js';
9
- import './chunks/usePrefersReducedMotion.js';
10
- import './chunks/getGrow.js';
11
- import './chunks/Modal.js';
12
- import '@mui/base';
13
- import './chunks/getFade.js';
14
- import './chunks/useFocusTrapStack.js';
15
- import './chunks/Backdrop.js';
16
- import './Popper.js';
17
- import './chunks/PopperPaper.js';
18
-
19
- var Popover = {"sui-popover-popper":"sui-popover-popper","sui-popover-paper":"sui-popover-paper","sui-popover-widget":"sui-popover-widget","sui-popover-bordered":"sui-popover-bordered","sui-popover-shadow":"sui-popover-shadow"};
20
-
21
- export { Popover as popoverStyle };
1
+ import { jsx } from "react/jsx-runtime";
2
+ import { forwardRef, useRef } from "react";
3
+ import { shift, size } from "@floating-ui/react-dom";
4
+ import { combineProps, logInDev, useClasses, useForkRef } from "@ringcentral/spring-base";
5
+ import { useThemeProps } from "@ringcentral/spring-theme";
6
+ import { getTransformOriginStringForPlacement, getGrow, getFade } from "./chunks/4476.js";
7
+ import { Modal as Modal_Modal } from "./Modal.js";
8
+ import { Popper } from "./Popper.js";
9
+ import { PopperPaper as PopperPaper_PopperPaper } from "./PopperPaper.js";
10
+ import { usePrefersReducedMotion } from "./chunks/1294.js";
11
+
12
+
13
+
14
+
15
+
16
+
17
+ // extracted by css-extract-rspack-plugin
18
+ /* export default */ var Popover = ({"sui-popover-popper":"sui-popover-popper","sui-popover-paper":"sui-popover-paper","sui-popover-widget":"sui-popover-widget","sui-popover-bordered":"sui-popover-bordered","sui-popover-shadow":"sui-popover-shadow","sui-popover-paper-content-no-vertical-scroll":"sui-popover-paper-content-no-vertical-scroll"});
19
+
20
+
21
+
22
+
23
+
24
+
25
+
26
+
27
+
28
+
29
+ /** Middleware name and its `middlewareData` key, which have to stay in sync. */ const DESIRED_CONTENT_HEIGHT = 'desiredContentHeight';
30
+ const Popover_Popover = /*#__PURE__*/ forwardRef((inProps, ref)=>{
31
+ /** Internal-only extras; see `Popover.internal.ts`. */ const props = useThemeProps({
32
+ props: inProps,
33
+ name: 'Popover'
34
+ });
35
+ const { classes, className, children, PopperProps, variant = 'standard', bordered = false, shadow = true, transformOrigin, motionProps: motionPropsProp, popperRef, placement, open, disableBackdropAnimation, anchorEl, actions, maxHeight, onAvailableHeightChange, measureDesiredHeight, disableContentVerticalScroll = false, deferEnterAnimation = false, PopperPaperProps: popperPaperPropsProp, ...rest } = props;
36
+ const cls = useClasses('popover', classes, className);
37
+ const paperContentRef = useRef(null);
38
+ const handlePaperContentRef = useForkRef(popperPaperPropsProp?.contentRef, paperContentRef);
39
+ const prefersReducedMotion = usePrefersReducedMotion();
40
+ return /*#__PURE__*/ jsx(Modal_Modal, {
41
+ ...rest,
42
+ open: open,
43
+ className: cls('root', 'popper'),
44
+ ref: ref,
45
+ /**
46
+ * Pin the fade to `hidden` only while the consumer is still sizing itself,
47
+ * which is the one state Modal's own `toggle: open` cannot express. Handing
48
+ * back `null` afterwards restores Modal's default fade, so the animation
49
+ * plays from the settled size and nothing changes for other consumers.
50
+ */ motionProps: deferEnterAnimation ? getFade({
51
+ prefersReducedMotion,
52
+ toggle: false
53
+ }) : null,
54
+ /**
55
+ * A close that lands while the fade is still pinned has nothing to play:
56
+ * the popover was never shown, and the pinned state leaves framer-motion
57
+ * with no change to report, so waiting for the exit would keep the content
58
+ * in the DOM for good. Leave through Modal's no-animation path instead.
59
+ */ disableBackdropAnimation: disableBackdropAnimation || deferEnterAnimation && !open,
60
+ hideBackdrop: true,
61
+ children: /*#__PURE__*/ jsx(Popper, {
62
+ arrowHeight: variant === 'standard' ? 0 : 10,
63
+ arrowPadding: 12,
64
+ offset: variant === 'standard' ? 2 : 4,
65
+ ...combineProps({
66
+ tether: false,
67
+ middlewares: (presetMiddlewares)=>{
68
+ /**
69
+ * Popper presets: offset, flip, shift, arrow, optional match-anchor-width size.
70
+ * Popover reorders them so alignment shift runs before its own `size`, and the
71
+ * preset tether shift runs after `size` so cross-axis movement does not inflate
72
+ * the clipping dimension `size` reports.
73
+ *
74
+ * Popper's match-anchor `size` stays in the trailing presets. When
75
+ * `matchAnchorWidth` is on, Popover skips content `maxWidth`: floating
76
+ * width already matches the anchor, and content should flow inside it
77
+ * without a separate viewport-based width cap.
78
+ */ const restMiddlewares = [
79
+ ...presetMiddlewares
80
+ ];
81
+ const matchAnchorWidth = Boolean(PopperProps?.matchAnchorWidth);
82
+ /** Pull named presets out; anything Popper adds later stays in `restMiddlewares`. */ const takePreset = (name)=>{
83
+ const index = restMiddlewares.findIndex((middleware)=>middleware.name === name);
84
+ if (index === -1) {
85
+ if (process.env.NODE_ENV !== 'production') {
86
+ logInDev({
87
+ scope: 'Popover',
88
+ message: `Popper preset middleware "${name}" was not found, so Popover cannot order it around its own \`size\` middleware.`
89
+ });
90
+ }
91
+ return [];
92
+ }
93
+ return restMiddlewares.splice(index, 1);
94
+ };
95
+ const offsetMiddleware = takePreset('offset');
96
+ const flipMiddleware = takePreset('flip');
97
+ const tetherShiftMiddleware = takePreset('shift');
98
+ const arrowMiddleware = takePreset('arrow');
99
+ /**
100
+ * Establish the height the content wants, ignoring the space the current
101
+ * side happens to have, and publish it for `flip` and `size` to share.
102
+ * `maxHeight` caps that demand: it is a height the consumer asked for,
103
+ * unlike the viewport clamp, which only reflects the current side.
104
+ *
105
+ * `flip` decides from the rendered box, so the clamp `size` left behind on
106
+ * the previous update would otherwise prove the current side still fits and
107
+ * `bestFit` would never move the popper to the roomier side.
108
+ *
109
+ * One value, two sources: a consumer whose height lives outside the DOM
110
+ * (virtualized list sized from state) restores and reports it through
111
+ * `measureDesiredHeight`; anything else is measured from the DOM once the
112
+ * viewport clamp is gone.
113
+ *
114
+ * Runs once per positioning pass. The guard lives in `middlewareData`, not a
115
+ * ref: `size` may reset the chain after it clamps, and a ref would keep
116
+ * clearing that clamp on every reset until Floating UI hits its reset limit
117
+ * and stops with `y` out of sync with the final height.
118
+ */ const desiredContentHeight = {
119
+ name: DESIRED_CONTENT_HEIGHT,
120
+ fn ({ middlewareData }) {
121
+ if (middlewareData[DESIRED_CONTENT_HEIGHT]) {
122
+ return {};
123
+ }
124
+ const content = paperContentRef.current;
125
+ if (!content) {
126
+ return {};
127
+ }
128
+ /** Drop the viewport clamp, but keep the cap the consumer asked for. */ const previousClamp = content.style.maxHeight;
129
+ const consumerClamp = maxHeight !== undefined ? `${maxHeight}px` : '';
130
+ content.style.maxHeight = consumerClamp;
131
+ const reportedHeight = measureDesiredHeight?.();
132
+ const measuredHeight = typeof reportedHeight === 'number' ? reportedHeight : content.scrollHeight;
133
+ const height = maxHeight !== undefined ? Math.min(maxHeight, measuredHeight) : measuredHeight;
134
+ const data = {
135
+ height
136
+ };
137
+ return {
138
+ data,
139
+ /** Remeasure so `flip` sees the box at its desired size. */ ...previousClamp !== consumerClamp || reportedHeight !== undefined ? {
140
+ reset: {
141
+ rects: true
142
+ }
143
+ } : undefined
144
+ };
145
+ }
146
+ };
147
+ return [
148
+ ...offsetMiddleware,
149
+ desiredContentHeight,
150
+ ...flipMiddleware,
151
+ shift({
152
+ padding: PopperProps?.padding
153
+ }),
154
+ size({
155
+ padding: PopperProps?.padding,
156
+ apply ({ availableHeight, availableWidth, elements, middlewareData }) {
157
+ const content = paperContentRef.current;
158
+ if (!content) {
159
+ return;
160
+ }
161
+ /**
162
+ * Available size is for the popper. Max size is applied to paper
163
+ * content, so subtract the paper's extra size (border, etc.).
164
+ */ const decorationHeight = elements.floating.offsetHeight - content.offsetHeight;
165
+ const viewportMaxHeight = Math.max(0, availableHeight - decorationHeight);
166
+ /**
167
+ * Both caps guard the same box; use the smaller one so paper
168
+ * content stays the only scroller.
169
+ */ const contentMaxHeight = maxHeight !== undefined ? Math.min(viewportMaxHeight, maxHeight) : viewportMaxHeight;
170
+ if (matchAnchorWidth) {
171
+ /**
172
+ * Floating width already matches the anchor (Popper `size`).
173
+ * Clear content `maxWidth` so paper content is not capped by a
174
+ * separate viewport-based width; it flows inside the floating box.
175
+ */ content.style.maxWidth = '';
176
+ } else {
177
+ /**
178
+ * Always set maxWidth. If we cleared it when content "fits", wrapping
179
+ * would shrink `scrollWidth` to the cap, we would clear it, text would
180
+ * unwrap, and it would flicker.
181
+ */ const decorationWidth = elements.floating.offsetWidth - content.offsetWidth;
182
+ content.style.maxWidth = `${Math.max(0, availableWidth - decorationWidth)}px`;
183
+ }
184
+ /** Clamp against the height already resolved before `flip`. */ const desiredHeight = middlewareData[DESIRED_CONTENT_HEIGHT]?.height ?? content.scrollHeight;
185
+ /** The consumer cap stays applied even where the viewport is roomier. */ content.style.maxHeight = maxHeight !== undefined || contentMaxHeight < desiredHeight ? `${contentMaxHeight}px` : '';
186
+ /**
187
+ * Height of a horizontal scrollbar, if any. Measured after the
188
+ * width/height caps above so it matches this pass.
189
+ * `offsetHeight - clientHeight` also includes vertical borders,
190
+ * so subtract those (consumers can border this element via
191
+ * `PopperPaperProps`).
192
+ */ const { borderTopWidth, borderBottomWidth } = getComputedStyle(content);
193
+ const borderY = (Number.parseFloat(borderTopWidth) || 0) + (Number.parseFloat(borderBottomWidth) || 0);
194
+ const inlineScrollbarHeight = Math.max(0, content.offsetHeight - content.clientHeight - borderY);
195
+ /**
196
+ * Height left for content after decoration and that scrollbar.
197
+ * Filling the full `maxHeight` would hide the last rows behind it.
198
+ */ onAvailableHeightChange?.(Math.max(0, contentMaxHeight - inlineScrollbarHeight));
199
+ }
200
+ }),
201
+ ...tetherShiftMiddleware,
202
+ ...arrowMiddleware,
203
+ ...restMiddlewares
204
+ ];
205
+ }
206
+ }, PopperProps ?? {}, [
207
+ 'middlewares'
208
+ ]),
209
+ className: cls('popper'),
210
+ disablePortal: true,
211
+ tabIndex: -1,
212
+ ref: popperRef,
213
+ placement: placement,
214
+ anchorEl: anchorEl,
215
+ actions: actions,
216
+ children: ({ arrowStyle, arrowRef, placement: computedPlacement })=>{
217
+ const motionProps = motionPropsProp ?? getGrow({
218
+ transformOrigin,
219
+ prefersReducedMotion
220
+ });
221
+ const popperPaperProps = {
222
+ className: cls('paper', {
223
+ bordered,
224
+ shadow
225
+ }),
226
+ ...disableContentVerticalScroll ? {
227
+ classes: {
228
+ content: cls('paper-content-no-vertical-scroll')
229
+ }
230
+ } : {}
231
+ };
232
+ /**
233
+ * If no transform origin is set, determine the transform origin using
234
+ * the computed placement. This ensures the transition used for the
235
+ * grow animation is always faithful to where the Popover is positioned.
236
+ */ if (!transformOrigin) {
237
+ popperPaperProps.style = {
238
+ ...popperPaperProps.style,
239
+ transformOrigin: getTransformOriginStringForPlacement({
240
+ placement: computedPlacement
241
+ })
242
+ };
243
+ }
244
+ return /*#__PURE__*/ jsx(PopperPaper_PopperPaper, {
245
+ arrowRef: arrowRef,
246
+ arrowStyle: arrowStyle,
247
+ ...combineProps(combineProps(motionProps, popperPaperProps), popperPaperPropsProp),
248
+ contentRef: handlePaperContentRef,
249
+ children: children
250
+ });
251
+ }
252
+ })
253
+ });
254
+ });
255
+ Popover_Popover.displayName = 'SuiPopover';
256
+
257
+
258
+
259
+
260
+
261
+
262
+ export { Popover as popoverStyle, Popover_Popover as Popover };
package/Popper.js CHANGED
@@ -1,26 +1,36 @@
1
- import { jsx } from 'react/jsx-runtime';
2
- import { flip, shift, limitShift, arrow, offset, size, useFloating, autoUpdate } from '@floating-ui/react-dom';
3
- import { useWindowContext, useForkRef } from '@ringcentral/spring-base';
4
- import { useThemeProps, useTheme } from '@ringcentral/spring-theme';
5
- import { forwardRef, useRef, useImperativeHandle, useLayoutEffect } from 'react';
6
- import { u as useModalContext, b as useOverlayBranch } from './chunks/Modal.js';
7
- import { Portal } from '@mui/base';
8
- import 'framer-motion';
9
- import './chunks/Icon.js';
10
- import './chunks/usePrefersReducedMotion.js';
11
- import './chunks/getFade.js';
12
- import './chunks/useFocusTrapStack.js';
13
- import './chunks/Backdrop.js';
14
-
15
- const getArrowSide = (placement) => ({
16
- top: 'bottom',
17
- right: 'left',
18
- bottom: 'top',
19
- left: 'right',
20
- })[placement.split('-')[0]];
21
- const Popper = forwardRef((inProps, ref) => {
22
- const props = useThemeProps({ props: inProps, name: 'Popper' });
23
- const { children: childrenProp, middlewares: middlewaresProp = [], placement: placementProp, anchorEl, arrowHeight = 0, offset: offset$1 = 0, padding = 0, arrowPadding = 0, style, actions, autoUpdate: autoUpdate$1 = true, whileElementsMounted, matchAnchorWidth, tether = true, container: containerProp, disablePortal, ...rest } = props;
1
+ import { jsx } from "react/jsx-runtime";
2
+ import { arrow, autoUpdate as react_dom_autoUpdate, flip, limitShift, offset as react_dom_offset, shift, size, useFloating } from "@floating-ui/react-dom";
3
+ import { useForkRef, useWindowContext } from "@ringcentral/spring-base";
4
+ import { useTheme, useThemeProps } from "@ringcentral/spring-theme";
5
+ import { forwardRef, useImperativeHandle, useLayoutEffect, useRef } from "react";
6
+ import { useModalContext, useOverlayBranch } from "./Modal.js";
7
+ import { Portal } from "./Portal.js";
8
+
9
+
10
+
11
+
12
+
13
+
14
+
15
+
16
+
17
+
18
+
19
+
20
+
21
+
22
+ const getArrowSide = (placement)=>({
23
+ top: 'bottom',
24
+ right: 'left',
25
+ bottom: 'top',
26
+ left: 'right'
27
+ })[placement.split('-')[0]];
28
+ const Popper = /*#__PURE__*/ forwardRef((inProps, ref)=>{
29
+ const props = useThemeProps({
30
+ props: inProps,
31
+ name: 'Popper'
32
+ });
33
+ const { children: childrenProp, middlewares: middlewaresProp = [], placement: placementProp, anchorEl, arrowHeight = 0, offset = 0, padding = 0, arrowPadding = 0, style, actions, autoUpdate = true, whileElementsMounted, matchAnchorWidth, tether = true, container: containerProp, disablePortal, ...rest } = props;
24
34
  const { externalWindow, document } = useWindowContext();
25
35
  const container = containerProp ?? document?.body;
26
36
  const { scopeProps } = useTheme();
@@ -29,70 +39,86 @@ const Popper = forwardRef((inProps, ref) => {
29
39
  const finalDisablePortal = disablePortal ?? (modalContext?.ariaHideEnabled ? true : false);
30
40
  const overlayBranchRef = useOverlayBranch({
31
41
  active: !finalDisablePortal,
32
- registry: overlayBranchRegistry,
42
+ registry: overlayBranchRegistry
33
43
  });
34
44
  const arrowRef = useRef(null);
35
45
  const presetMiddlewares = [
36
- flip({ padding }),
46
+ react_dom_offset(offset + arrowHeight),
47
+ flip({
48
+ padding
49
+ }),
37
50
  shift({
38
- ...(tether ? { limiter: limitShift() } : { crossAxis: true }),
39
- padding,
51
+ // tether: limitShift on alignment axis. Untethered: also shift crossAxis.
52
+ ...tether ? {
53
+ limiter: limitShift()
54
+ } : {
55
+ crossAxis: true
56
+ },
57
+ padding
40
58
  }),
41
59
  arrow({
42
60
  element: arrowRef,
43
- padding: arrowPadding,
44
- }),
45
- offset(offset$1 + arrowHeight),
61
+ padding: arrowPadding
62
+ })
46
63
  ];
47
64
  if (matchAnchorWidth) {
48
65
  presetMiddlewares.push(size({
49
- apply({ rects, elements, }) {
66
+ apply ({ rects, elements }) {
50
67
  Object.assign(elements.floating.style, {
51
68
  boxSizing: 'border-box',
52
- width: `${rects.reference.width}px`,
69
+ width: `${rects.reference.width}px`
53
70
  });
54
- },
71
+ }
55
72
  }));
56
73
  }
57
- const middlewares = typeof middlewaresProp === 'function'
58
- ? middlewaresProp(presetMiddlewares)
59
- : [...presetMiddlewares, ...middlewaresProp];
60
- const { x, y, refs: { setReference, setFloating }, strategy, placement, update, middlewareData: { arrow: { x: arrowX, y: arrowY } = {} }, } = useFloating({
74
+ const middlewares = typeof middlewaresProp === 'function' ? middlewaresProp(presetMiddlewares) : [
75
+ ...presetMiddlewares,
76
+ ...middlewaresProp
77
+ ];
78
+ const { x, y, refs: { setReference, setFloating }, strategy, placement, update, middlewareData: { arrow: { x: arrowX, y: arrowY } = {} } } = useFloating({
61
79
  placement: placementProp,
62
80
  middleware: middlewares,
63
- whileElementsMounted: (reference, floating, update) => {
81
+ whileElementsMounted: (reference, floating, update)=>{
64
82
  const dispose = whileElementsMounted?.(reference, floating, update);
65
- const disposeAutoUpdate = (() => {
66
- if (autoUpdate$1 === false) {
67
- return;
68
- }
69
- return autoUpdate(reference, floating, update, autoUpdate$1 === true ? undefined : autoUpdate$1);
70
- })();
71
- return () => {
83
+ /**
84
+ * `true` passes no options so floating-ui keeps its defaults, including
85
+ * skipping ResizeObserver / IntersectionObserver when they are missing (jsdom).
86
+ */ const disposeAutoUpdate = autoUpdate === false ? undefined : react_dom_autoUpdate(reference, floating, update, autoUpdate === true ? undefined : autoUpdate);
87
+ return ()=>{
72
88
  disposeAutoUpdate?.();
73
89
  dispose?.();
74
90
  };
75
- },
91
+ }
76
92
  });
77
- useImperativeHandle(actions, () => ({ update }), [update]);
93
+ useImperativeHandle(actions, ()=>({
94
+ update
95
+ }), [
96
+ update
97
+ ]);
78
98
  const handleRootRef = useForkRef(ref, setFloating);
79
- useLayoutEffect(() => {
99
+ useLayoutEffect(()=>{
80
100
  if (!anchorEl) {
81
101
  setReference(null);
82
102
  return undefined;
83
103
  }
84
104
  const anchor = typeof anchorEl === 'function' ? anchorEl() : anchorEl;
85
105
  setReference(anchor);
86
- return () => {
106
+ return ()=>{
87
107
  setReference(null);
88
108
  };
89
- }, [setReference, anchorEl]);
109
+ }, [
110
+ setReference,
111
+ anchorEl
112
+ ]);
90
113
  const arrowSide = getArrowSide(placement);
91
- const renderChildren = () => {
92
- if (typeof childrenProp !== 'function')
93
- return childrenProp;
114
+ const renderChildren = ()=>{
115
+ if (typeof childrenProp !== 'function') return childrenProp;
94
116
  if (!arrowHeight) {
95
- return childrenProp({ placement, arrowRef, arrowStyle: {} });
117
+ return childrenProp({
118
+ placement,
119
+ arrowRef,
120
+ arrowStyle: {}
121
+ });
96
122
  }
97
123
  const squareSideLength = Math.round(((arrowHeight * 2) ** 2 / 2) ** (1 / 2));
98
124
  const childrenRenderProps = {
@@ -103,8 +129,8 @@ const Popper = forwardRef((inProps, ref) => {
103
129
  height: squareSideLength,
104
130
  top: arrowY,
105
131
  left: arrowX,
106
- [arrowSide]: -squareSideLength / 2,
107
- },
132
+ [arrowSide]: -squareSideLength / 2
133
+ }
108
134
  };
109
135
  return childrenProp(childrenRenderProps);
110
136
  };
@@ -112,18 +138,42 @@ const Popper = forwardRef((inProps, ref) => {
112
138
  const dpr = externalWindow?.devicePixelRatio ?? 1;
113
139
  const fixedX = Math.round(Number(x ?? 0) * dpr) / dpr;
114
140
  const fixedY = Math.round(Number(y ?? 0) * dpr) / dpr;
115
- return (jsx(Portal, { container: container, disablePortal: finalDisablePortal, children: jsx("div", { ref: overlayBranchRef, ...scopeProps, style: { display: 'contents' }, children: jsx("div", { ...rest, "data-sui-popper-placement": placement, ref: handleRootRef, style: {
116
- ...(arrowHeight
117
- ? { minWidth: (arrowHeight + arrowPadding) * 2 }
118
- : undefined),
141
+ return /*#__PURE__*/ jsx(Portal, {
142
+ container: container,
143
+ disablePortal: finalDisablePortal,
144
+ children: /*#__PURE__*/ jsx("div", {
145
+ ref: overlayBranchRef,
146
+ ...scopeProps,
147
+ style: {
148
+ display: 'contents'
149
+ },
150
+ children: /*#__PURE__*/ jsx("div", {
151
+ ...rest,
152
+ "data-sui-popper-placement": placement,
153
+ ref: handleRootRef,
154
+ style: {
155
+ /* prevent arrow overflow when content too small */ ...arrowHeight ? {
156
+ minWidth: (arrowHeight + arrowPadding) * 2
157
+ } : undefined,
119
158
  ...style,
120
159
  position: strategy,
121
160
  top: '0',
122
161
  left: '0',
123
162
  transform: `translate3d(${fixedX}px,${fixedY}px,0)`,
124
- ...(matchAnchorWidth ? undefined : { width: 'max-content' }),
125
- }, children: children }) }) }));
163
+ // matchAnchorWidth: width is set by size middleware, not inline style.
164
+ ...matchAnchorWidth ? undefined : {
165
+ width: 'max-content'
166
+ }
167
+ },
168
+ children: children
169
+ })
170
+ })
171
+ });
126
172
  });
127
173
  Popper.displayName = 'SuiPopper';
128
174
 
175
+
176
+
177
+
178
+
129
179
  export { Popper };
package/PopperPaper.js CHANGED
@@ -1,10 +1,56 @@
1
- export { P as PopperPaper } from './chunks/PopperPaper.js';
2
- import 'react/jsx-runtime';
3
- import 'react';
4
- import 'framer-motion';
5
- import '@ringcentral/spring-base';
6
- import '@ringcentral/spring-theme';
1
+ import { jsx, jsxs } from "react/jsx-runtime";
2
+ import { forwardRef } from "react";
3
+ import { motion } from "framer-motion";
4
+ import { useClasses } from "@ringcentral/spring-base";
5
+ import { useThemeProps } from "@ringcentral/spring-theme";
7
6
 
8
- var PopperPaper = {"sui-popper-paper-root":"sui-popper-paper-root","sui-popper-paper-arrow":"sui-popper-paper-arrow","sui-popper":"sui-popper","sui-popper-paper-content":"sui-popper-paper-content"};
9
7
 
10
- export { PopperPaper as popperPaperStyle };
8
+
9
+
10
+
11
+
12
+ // extracted by css-extract-rspack-plugin
13
+ /* export default */ var PopperPaper = ({"sui-popper-paper-root":"sui-popper-paper-root","sui-popper-paper-arrow":"sui-popper-paper-arrow","sui-popper":"sui-popper","sui-popper-paper-content":"sui-popper-paper-content"});
14
+
15
+
16
+
17
+
18
+
19
+
20
+ const PopperPaper_PopperPaper = /*#__PURE__*/ forwardRef((inProps, ref)=>{
21
+ const props = useThemeProps({
22
+ props: inProps,
23
+ name: 'PopperPaper'
24
+ });
25
+ const { classes, className, children, arrowRef, arrowStyle, contentRef, ...rest } = props;
26
+ const cls = useClasses('popper-paper', classes, className);
27
+ /**
28
+ * Popper passes `{}` when `arrowHeight` is 0 ("not show arrow"). Rendering the
29
+ * empty arrow node still inherits paper border and can show a 1px corner dot.
30
+ */ const showArrow = Object.keys(arrowStyle).length > 0;
31
+ return /*#__PURE__*/ jsxs(motion.div, {
32
+ className: cls('root'),
33
+ ...rest,
34
+ ref: ref,
35
+ children: [
36
+ /*#__PURE__*/ jsx("div", {
37
+ ref: contentRef,
38
+ className: cls('content'),
39
+ children: children
40
+ }),
41
+ showArrow ? /*#__PURE__*/ jsx("div", {
42
+ className: cls('arrow'),
43
+ ref: arrowRef,
44
+ style: arrowStyle
45
+ }) : null
46
+ ]
47
+ });
48
+ });
49
+ PopperPaper_PopperPaper.displayName = 'SuiPopperPaper';
50
+
51
+
52
+
53
+
54
+
55
+
56
+ export { PopperPaper as popperPaperStyle, PopperPaper_PopperPaper as PopperPaper };
package/Portal.js CHANGED
@@ -1 +1,6 @@
1
- export { Portal } from '@mui/base';
1
+
2
+
3
+
4
+
5
+
6
+ export { Portal } from "@mui/base";