@react-spectrum/overlays 5.0.0 → 5.1.1

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 (12) hide show
  1. package/dist/import.mjs +47 -26
  2. package/dist/main.css +1 -1
  3. package/dist/main.js +47 -26
  4. package/dist/main.js.map +1 -1
  5. package/dist/module.js +47 -26
  6. package/dist/module.js.map +1 -1
  7. package/dist/types.d.ts +2 -2
  8. package/dist/types.d.ts.map +1 -1
  9. package/package.json +8 -8
  10. package/src/Modal.tsx +1 -1
  11. package/src/Popover.tsx +55 -27
  12. package/src/Tray.tsx +1 -1
package/dist/import.mjs CHANGED
@@ -253,12 +253,19 @@ function $17b503f7de08fecc$var$Popover(props, ref) {
253
253
  const $17b503f7de08fecc$var$PopoverWrapper = /*#__PURE__*/ (0, $fQOb3$forwardRef)((props, ref)=>{
254
254
  let { children: children , isOpen: isOpen , hideArrow: hideArrow , isNonModal: isNonModal , state: state , wrapperRef: wrapperRef } = props;
255
255
  let { styleProps: styleProps } = (0, $fQOb3$useStyleProps)(props);
256
+ let { size: size , borderWidth: borderWidth , arrowRef: arrowRef } = $17b503f7de08fecc$var$useArrowSize();
257
+ const borderRadius = $17b503f7de08fecc$var$usePopoverBorderRadius(ref);
258
+ let borderDiagonal = borderWidth * Math.SQRT2;
259
+ let primary = size + borderDiagonal;
260
+ let secondary = primary * 2;
256
261
  let { popoverProps: popoverProps , arrowProps: arrowProps , underlayProps: underlayProps , placement: placement } = (0, $fQOb3$usePopover)({
257
262
  ...props,
258
263
  popoverRef: ref,
259
- maxHeight: null
264
+ maxHeight: null,
265
+ arrowSize: hideArrow ? 0 : secondary,
266
+ arrowBoundaryOffset: borderRadius
260
267
  }, state);
261
- // Attach Transition's nodeRef to outer most wrapper for node.reflow: https://github.com/reactjs/react-transition-group/blob/c89f807067b32eea6f68fd6c622190d88ced82e2/src/Transition.js#L231
268
+ // Attach Transition's nodeRef to outermost wrapper for node.reflow: https://github.com/reactjs/react-transition-group/blob/c89f807067b32eea6f68fd6c622190d88ced82e2/src/Transition.js#L231
262
269
  return /*#__PURE__*/ (0, $fQOb3$react).createElement("div", {
263
270
  ref: wrapperRef
264
271
  }, !isNonModal && /*#__PURE__*/ (0, $fQOb3$react).createElement((0, $76a452f4e3df11be$export$f360afc887607b02), {
@@ -283,39 +290,55 @@ const $17b503f7de08fecc$var$PopoverWrapper = /*#__PURE__*/ (0, $fQOb3$forwardRef
283
290
  onDismiss: state.close
284
291
  }), children, hideArrow ? null : /*#__PURE__*/ (0, $fQOb3$react).createElement($17b503f7de08fecc$var$Arrow, {
285
292
  arrowProps: arrowProps,
286
- direction: $17b503f7de08fecc$var$arrowPlacement[placement]
293
+ isLandscape: $17b503f7de08fecc$var$arrowPlacement[placement] === "bottom",
294
+ arrowRef: arrowRef,
295
+ primary: primary,
296
+ secondary: secondary,
297
+ borderDiagonal: borderDiagonal
287
298
  }), /*#__PURE__*/ (0, $fQOb3$react).createElement((0, $fQOb3$DismissButton), {
288
299
  onDismiss: state.close
289
300
  })));
290
301
  });
291
- let $17b503f7de08fecc$var$ROOT_2 = Math.sqrt(2);
292
- function $17b503f7de08fecc$var$Arrow(props) {
302
+ function $17b503f7de08fecc$var$usePopoverBorderRadius(popoverRef) {
303
+ let [borderRadius, setBorderRadius] = (0, $fQOb3$useState)(0);
304
+ (0, $fQOb3$useLayoutEffect)(()=>{
305
+ if (popoverRef.current) {
306
+ let spectrumBorderRadius = window.getComputedStyle(popoverRef.current).borderRadius;
307
+ if (spectrumBorderRadius !== "") setBorderRadius(parseInt(spectrumBorderRadius, 10));
308
+ }
309
+ }, [
310
+ popoverRef
311
+ ]);
312
+ return borderRadius;
313
+ }
314
+ function $17b503f7de08fecc$var$useArrowSize() {
293
315
  let [size, setSize] = (0, $fQOb3$useState)(20);
294
316
  let [borderWidth, setBorderWidth] = (0, $fQOb3$useState)(1);
295
- let ref = (0, $fQOb3$useRef)();
317
+ let arrowRef = (0, $fQOb3$useRef)(null);
296
318
  // get the css value for the tip size and divide it by 2 for this arrow implementation
297
319
  (0, $fQOb3$useLayoutEffect)(()=>{
298
- if (ref.current) {
299
- let spectrumTipWidth = window.getComputedStyle(ref.current).getPropertyValue("--spectrum-popover-tip-size");
320
+ if (arrowRef.current) {
321
+ let spectrumTipWidth = window.getComputedStyle(arrowRef.current).getPropertyValue("--spectrum-popover-tip-size");
300
322
  if (spectrumTipWidth !== "") setSize(parseInt(spectrumTipWidth, 10) / 2);
301
- let spectrumBorderWidth = window.getComputedStyle(ref.current).getPropertyValue("--spectrum-popover-tip-borderWidth");
323
+ let spectrumBorderWidth = window.getComputedStyle(arrowRef.current).getPropertyValue("--spectrum-popover-tip-borderWidth");
302
324
  if (spectrumBorderWidth !== "") setBorderWidth(parseInt(spectrumBorderWidth, 10));
303
325
  }
304
- }, [
305
- ref
306
- ]);
307
- let landscape = props.direction === "top" || props.direction === "bottom";
308
- let mirror = props.direction === "left" || props.direction === "top";
309
- let borderDiagonal = borderWidth * $17b503f7de08fecc$var$ROOT_2;
326
+ }, []);
327
+ return {
328
+ size: size,
329
+ borderWidth: borderWidth,
330
+ arrowRef: arrowRef
331
+ };
332
+ }
333
+ function $17b503f7de08fecc$var$Arrow(props) {
334
+ let { primary: primary , secondary: secondary , isLandscape: isLandscape , arrowProps: arrowProps , borderDiagonal: borderDiagonal , arrowRef: arrowRef } = props;
310
335
  let halfBorderDiagonal = borderDiagonal / 2;
311
- let secondary = 2 * size + 2 * borderDiagonal;
312
- let primary = size + borderDiagonal;
313
- let primaryStart = mirror ? primary : 0;
314
- let primaryEnd = mirror ? halfBorderDiagonal : primary - halfBorderDiagonal;
336
+ let primaryStart = 0;
337
+ let primaryEnd = primary - halfBorderDiagonal;
315
338
  let secondaryStart = halfBorderDiagonal;
316
339
  let secondaryMiddle = secondary / 2;
317
340
  let secondaryEnd = secondary - halfBorderDiagonal;
318
- let pathData = landscape ? [
341
+ let pathData = isLandscape ? [
319
342
  "M",
320
343
  secondaryStart,
321
344
  primaryStart,
@@ -336,14 +359,12 @@ function $17b503f7de08fecc$var$Arrow(props) {
336
359
  primaryStart,
337
360
  secondaryEnd
338
361
  ];
339
- let arrowProps = props.arrowProps;
340
- /* use ceil because the svg needs to always accomodate the path inside it */ return /*#__PURE__*/ (0, $fQOb3$react).createElement("svg", {
362
+ /* use ceil because the svg needs to always accommodate the path inside it */ return /*#__PURE__*/ (0, $fQOb3$react).createElement("svg", {
341
363
  xmlns: "http://www.w3.org/svg/2000",
342
- width: Math.ceil(landscape ? secondary : primary),
343
- height: Math.ceil(landscape ? primary : secondary),
344
- style: props.style,
364
+ width: Math.ceil(isLandscape ? secondary : primary),
365
+ height: Math.ceil(isLandscape ? primary : secondary),
345
366
  className: (0, $fQOb3$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($645594d913f34a2a$exports))), "spectrum-Popover-tip"),
346
- ref: ref,
367
+ ref: arrowRef,
347
368
  ...arrowProps
348
369
  }, /*#__PURE__*/ (0, $fQOb3$react).createElement("path", {
349
370
  className: (0, $fQOb3$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($645594d913f34a2a$exports))), "spectrum-Popover-tip-triangle"),
package/dist/main.css CHANGED
@@ -1 +1 @@
1
- .spectrum-Popover_38efea.react-spectrum-Popover_38efea{visibility:visible}.spectrum-Popover_38efea .spectrum-Dialog-content_38efea{max-height:initial}.spectrum-Modal-wrapper_38efea.react-spectrum-Modal-wrapper_38efea,.spectrum-Modal_38efea.react-spectrum-Modal_38efea,.spectrum-Tray_38efea.react-spectrum-Tray_38efea{visibility:visible}.spectrum-Tray_23bf66{visibility:hidden;opacity:0;transition:transform var(--spectrum-global-animation-duration-100,.13s)ease-in-out,opacity var(--spectrum-global-animation-duration-100,.13s)ease-in-out,visibility 0s linear var(--spectrum-global-animation-duration-100,.13s);pointer-events:none}.spectrum-Tray_23bf66.is-open_23bf66{visibility:visible;opacity:.9999;pointer-events:auto;transition-delay:0s}[dir=ltr] .spectrum-Tray-wrapper_23bf66{left:0}[dir=rtl] .spectrum-Tray-wrapper_23bf66{right:0}.spectrum-Tray-wrapper_23bf66{width:100%;height:100vh;pointer-events:none;z-index:2;justify-content:center;display:flex;position:fixed;top:0}.spectrum-Tray_23bf66{--spectrum-tray-margin-top:64px;--spectrum-tray-max-width:450px;width:var(--spectrum-tray-width,100%);max-width:var(--spectrum-tray-max-width,375px);min-height:var(--spectrum-tray-min-height,var(--spectrum-global-dimension-static-size-800));max-height:calc(var(--spectrum-visual-viewport-height) - var(--spectrum-tray-margin-top));padding-bottom:max(calc(100vh - var(--spectrum-visual-viewport-height)),env(safe-area-inset-bottom));border-radius:var(--spectrum-tray-full-width-border-radius,var(--spectrum-alias-border-radius-regular))var(--spectrum-tray-full-width-border-radius,var(--spectrum-alias-border-radius-regular))var(--spectrum-tray-border-radius,0px)var(--spectrum-tray-border-radius,0px);transition:opacity var(--spectrum-dialog-exit-animation-duration,var(--spectrum-global-animation-duration-100))cubic-bezier(.5,0,1,1)0s,transform var(--spectrum-dialog-exit-animation-duration,var(--spectrum-global-animation-duration-100))cubic-bezier(.5,0,1,1)0s;outline:none;flex-direction:column;display:flex;position:absolute;bottom:0;transform:translateY(100%)}.spectrum-Tray_23bf66.is-open_23bf66{transition:transform var(--spectrum-dialog-entry-animation-duration,var(--spectrum-global-animation-duration-500))cubic-bezier(0,0,.4,1)var(--spectrum-dialog-entry-animation-delay,var(--spectrum-global-animation-duration-200)),opacity var(--spectrum-dialog-entry-animation-duration,var(--spectrum-global-animation-duration-500))cubic-bezier(0,0,.4,1)var(--spectrum-dialog-entry-animation-delay,var(--spectrum-global-animation-duration-200));transform:translateY(0)}.spectrum-Tray--fixedHeight_23bf66{height:calc(var(--spectrum-visual-viewport-height) - var(--spectrum-tray-margin-top));top:var(--spectrum-tray-margin-top)}@media (max-width:450px){.spectrum-Tray_23bf66{border-radius:var(--spectrum-tray-border-radius,0px)}}.spectrum-Tray_23bf66{background-color:var(--spectrum-tray-background-color)}.spectrum-Modal_f81956{visibility:hidden;opacity:0;transition:transform var(--spectrum-global-animation-duration-100,.13s)ease-in-out,opacity var(--spectrum-global-animation-duration-100,.13s)ease-in-out,visibility 0s linear var(--spectrum-global-animation-duration-100,.13s);pointer-events:none}.spectrum-Modal_f81956.is-open_f81956{visibility:visible;opacity:.9999;pointer-events:auto;transition-delay:0s}.spectrum-Modal-wrapper_f81956{box-sizing:border-box;width:100vw;height:var(--spectrum-visual-viewport-height);visibility:hidden;pointer-events:none;z-index:2;transition:visibility 0s linear var(--spectrum-global-animation-duration-100,.13s);justify-content:center;align-items:center;display:flex;position:fixed;top:0;left:0}.spectrum-Modal-wrapper_f81956.is-open_f81956{visibility:visible}.spectrum-Modal_f81956{transform:translateY(var(--spectrum-dialog-entry-animation-distance,var(--spectrum-global-dimension-size-250)));z-index:2;max-height:calc(var(--spectrum-visual-viewport-height)*.9);max-width:90vw;min-width:var(--spectrum-dialog-min-width,var(--spectrum-global-dimension-static-size-3600));border-radius:var(--spectrum-dialog-border-radius,var(--spectrum-global-dimension-size-50));pointer-events:auto;transition:opacity var(--spectrum-dialog-exit-animation-duration,var(--spectrum-global-animation-duration-100))cubic-bezier(.5,0,1,1)0s,visibility 0s linear calc(0s + var(--spectrum-dialog-exit-animation-duration,var(--spectrum-global-animation-duration-100))),transform 0s linear calc(0s + var(--spectrum-dialog-exit-animation-duration,var(--spectrum-global-animation-duration-100)));outline:none}.spectrum-Modal_f81956.is-open_f81956{transition:transform var(--spectrum-dialog-entry-animation-duration,var(--spectrum-global-animation-duration-500))cubic-bezier(0,0,.4,1)var(--spectrum-dialog-entry-animation-delay,var(--spectrum-global-animation-duration-200)),opacity var(--spectrum-dialog-entry-animation-duration,var(--spectrum-global-animation-duration-500))cubic-bezier(0,0,.4,1)var(--spectrum-dialog-entry-animation-delay,var(--spectrum-global-animation-duration-200));transform:translateY(0)}@media only screen and (max-device-width:400px),only screen and (max-device-height:350px){.spectrum-Modal--responsive_f81956{width:100%;height:100%;max-width:100%;max-height:100%;border-radius:0}.spectrum-Modal-wrapper_f81956 .spectrum-Modal--responsive_f81956{margin-top:0}}.spectrum-Modal--fullscreen_f81956{max-width:none;max-height:none;width:calc(100% - 80px);height:calc(100% - 80px);position:fixed;top:40px;bottom:40px;left:40px;right:40px}.spectrum-Modal--fullscreenTakeover_f81956{max-width:none;max-height:none;box-sizing:border-box;border:none;border-radius:0;position:fixed;top:0;bottom:0;left:0;right:0}.spectrum-Modal--fullscreenTakeover_f81956,.spectrum-Modal--fullscreenTakeover_f81956.is-open_f81956{transform:none}.spectrum-Modal_f81956{background:var(--spectrum-dialog-background-color,var(--spectrum-alias-background-color-default))}.spectrum-Underlay_eb7615{visibility:hidden;opacity:0;transition:transform var(--spectrum-global-animation-duration-100,.13s)ease-in-out,opacity var(--spectrum-global-animation-duration-100,.13s)ease-in-out,visibility 0s linear var(--spectrum-global-animation-duration-100,.13s);pointer-events:none}.spectrum-Underlay_eb7615.is-open_eb7615{visibility:visible;opacity:.9999;pointer-events:auto;transition-delay:0s}.spectrum-Underlay_eb7615{z-index:1;transition:opacity var(--spectrum-dialog-background-exit-animation-duration,var(--spectrum-global-animation-duration-300))cubic-bezier(.5,0,1,1)var(--spectrum-dialog-background-exit-animation-delay,var(--spectrum-global-animation-duration-200)),visibility 0s linear calc(var(--spectrum-dialog-background-exit-animation-delay,var(--spectrum-global-animation-duration-200)) + var(--spectrum-dialog-background-exit-animation-duration,var(--spectrum-global-animation-duration-300)));position:fixed;top:0;bottom:0;left:0;right:0;overflow:hidden}.spectrum-Underlay_eb7615.spectrum-Underlay--transparent_eb7615{background:0 0;transition:none}.spectrum-Underlay_eb7615.is-open_eb7615{transition:opacity var(--spectrum-dialog-background-entry-animation-duration,var(--spectrum-global-animation-duration-600))cubic-bezier(0,0,.4,1)0s}.spectrum-Underlay_eb7615{background:var(--spectrum-dialog-underlay-background-color,var(--spectrum-alias-background-color-modal-overlay))}.spectrum-Popover_6115b8{visibility:hidden;opacity:0;transition:transform var(--spectrum-global-animation-duration-100,.13s)ease-in-out,opacity var(--spectrum-global-animation-duration-100,.13s)ease-in-out,visibility 0s linear var(--spectrum-global-animation-duration-100,.13s);pointer-events:none}.spectrum-Popover_6115b8.is-open_6115b8{visibility:visible;opacity:.9999;pointer-events:auto;transition-delay:0s}.spectrum-Popover--bottom_6115b8.is-open_6115b8{transform:translateY(var(--spectrum-overlay-positive-transform-distance))}.spectrum-Popover--top_6115b8.is-open_6115b8{transform:translateY(var(--spectrum-overlay-negative-transform-distance))}.spectrum-Popover--right_6115b8.is-open_6115b8{transform:translateX(var(--spectrum-overlay-positive-transform-distance))}.spectrum-Popover--left_6115b8.is-open_6115b8{transform:translateX(var(--spectrum-overlay-negative-transform-distance))}.spectrum-Popover_6115b8{box-sizing:border-box;min-width:var(--spectrum-global-dimension-size-400);min-height:var(--spectrum-global-dimension-size-400);border-style:solid;border-width:var(--spectrum-popover-border-size,var(--spectrum-alias-border-size-thin));border-radius:var(--spectrum-popover-border-radius,var(--spectrum-alias-border-radius-regular));outline:none;flex-direction:column;display:inline-flex;position:absolute}.spectrum-Popover-tip_6115b8{--spectrum-popover-tip-size:var(--spectrum-popover-tip-width,var(--spectrum-global-dimension-size-250));--spectrum-popover-tip-borderWidth:var(--spectrum-popover-border-size,var(--spectrum-alias-border-size-thin));position:absolute;-webkit-transform:translate(0)}.spectrum-Popover-tip_6115b8 .spectrum-Popover-tip-triangle_6115b8{stroke-linecap:square;stroke-linejoin:miter;stroke-width:var(--spectrum-popover-border-size,var(--spectrum-alias-border-size-thin))}.spectrum-Popover--dialog_6115b8{min-width:270px;padding:30px 29px}.spectrum-Popover--left_6115b8.spectrum-Popover--withTip_6115b8{margin-right:13px}.spectrum-Popover--left_6115b8 .spectrum-Popover-tip_6115b8{left:100%}.spectrum-Popover--right_6115b8.spectrum-Popover--withTip_6115b8{margin-left:13px}.spectrum-Popover--right_6115b8 .spectrum-Popover-tip_6115b8{right:100%;transform:scaleX(-1)}.spectrum-Popover--left_6115b8 .spectrum-Popover-tip_6115b8,.spectrum-Popover--right_6115b8 .spectrum-Popover-tip_6115b8{margin-top:calc(var(--spectrum-global-dimension-size-150)*-1);top:50%}.spectrum-Popover--bottom_6115b8.spectrum-Popover--withTip_6115b8{margin-top:13px}.spectrum-Popover--bottom_6115b8 .spectrum-Popover-tip_6115b8{bottom:100%;transform:scaleY(-1)}.spectrum-Popover--top_6115b8.spectrum-Popover--withTip_6115b8{margin-bottom:13px}.spectrum-Popover--top_6115b8 .spectrum-Popover-tip_6115b8{top:100%}.spectrum-Popover--bottom_6115b8 .spectrum-Popover-tip_6115b8,.spectrum-Popover--top_6115b8 .spectrum-Popover-tip_6115b8{margin-left:calc(var(--spectrum-global-dimension-size-150)*-1);left:50%}.spectrum-Popover_6115b8{background-color:var(--spectrum-popover-background-color,var(--spectrum-global-color-gray-50));border-color:var(--spectrum-popover-border-color,var(--spectrum-alias-border-color-dark));filter:drop-shadow(0 var(--spectrum-popover-shadow-offset-y,var(--spectrum-alias-dropshadow-offset-y))var(--spectrum-popover-shadow-blur,var(--spectrum-alias-dropshadow-blur))var(--spectrum-popover-shadow-color,var(--spectrum-alias-dropshadow-color)));-webkit-filter:drop-shadow(0 var(--spectrum-popover-shadow-offset-y,var(--spectrum-alias-dropshadow-offset-y))var(--spectrum-popover-shadow-blur,var(--spectrum-alias-dropshadow-blur))var(--spectrum-popover-shadow-color,var(--spectrum-alias-dropshadow-color)));will-change:filter;clip-path:inset(-30px)}.spectrum-Popover_6115b8 .spectrum-Popover-tip_6115b8 .spectrum-Popover-tip-triangle_6115b8{fill:var(--spectrum-popover-background-color,var(--spectrum-global-color-gray-50));stroke:var(--spectrum-popover-border-color,var(--spectrum-alias-border-color-dark))}
1
+ .spectrum-Popover_38efea.react-spectrum-Popover_38efea{visibility:visible}.spectrum-Popover_38efea .spectrum-Dialog-content_38efea{max-height:initial}.spectrum-Modal-wrapper_38efea.react-spectrum-Modal-wrapper_38efea,.spectrum-Modal_38efea.react-spectrum-Modal_38efea,.spectrum-Tray_38efea.react-spectrum-Tray_38efea{visibility:visible}:root{font-synthesis:weight}.spectrum-Tray_23bf66{visibility:hidden;opacity:0;transition:transform var(--spectrum-global-animation-duration-100,.13s)ease-in-out,opacity var(--spectrum-global-animation-duration-100,.13s)ease-in-out,visibility 0s linear var(--spectrum-global-animation-duration-100,.13s);pointer-events:none}.spectrum-Tray_23bf66.is-open_23bf66{visibility:visible;opacity:.9999;pointer-events:auto;transition-delay:0s}[dir=ltr] .spectrum-Tray-wrapper_23bf66{left:0}[dir=rtl] .spectrum-Tray-wrapper_23bf66{right:0}.spectrum-Tray-wrapper_23bf66{width:100%;height:100vh;pointer-events:none;z-index:2;justify-content:center;display:flex;position:fixed;top:0}.spectrum-Tray_23bf66{--spectrum-tray-margin-top:64px;--spectrum-tray-max-width:450px;width:var(--spectrum-tray-width,100%);max-width:var(--spectrum-tray-max-width,375px);min-height:var(--spectrum-tray-min-height,var(--spectrum-global-dimension-static-size-800));max-height:calc(var(--spectrum-visual-viewport-height) - var(--spectrum-tray-margin-top));padding-bottom:max(calc(100vh - var(--spectrum-visual-viewport-height)),env(safe-area-inset-bottom));border-radius:var(--spectrum-tray-full-width-border-radius,var(--spectrum-alias-border-radius-regular))var(--spectrum-tray-full-width-border-radius,var(--spectrum-alias-border-radius-regular))var(--spectrum-tray-border-radius,0px)var(--spectrum-tray-border-radius,0px);transition:opacity var(--spectrum-dialog-exit-animation-duration,var(--spectrum-global-animation-duration-100))cubic-bezier(.5,0,1,1)0s,transform var(--spectrum-dialog-exit-animation-duration,var(--spectrum-global-animation-duration-100))cubic-bezier(.5,0,1,1)0s;outline:none;flex-direction:column;display:flex;position:absolute;bottom:0;transform:translateY(100%)}.spectrum-Tray_23bf66.is-open_23bf66{transition:transform var(--spectrum-dialog-entry-animation-duration,var(--spectrum-global-animation-duration-500))cubic-bezier(0,0,.4,1)var(--spectrum-dialog-entry-animation-delay,var(--spectrum-global-animation-duration-200)),opacity var(--spectrum-dialog-entry-animation-duration,var(--spectrum-global-animation-duration-500))cubic-bezier(0,0,.4,1)var(--spectrum-dialog-entry-animation-delay,var(--spectrum-global-animation-duration-200));transform:translateY(0)}.spectrum-Tray--fixedHeight_23bf66{height:calc(var(--spectrum-visual-viewport-height) - var(--spectrum-tray-margin-top));top:var(--spectrum-tray-margin-top)}@media (max-width:450px){.spectrum-Tray_23bf66{border-radius:var(--spectrum-tray-border-radius,0px)}}.spectrum-Tray_23bf66{background-color:var(--spectrum-tray-background-color)}:root{font-synthesis:weight}.spectrum-Modal_f81956{visibility:hidden;opacity:0;transition:transform var(--spectrum-global-animation-duration-100,.13s)ease-in-out,opacity var(--spectrum-global-animation-duration-100,.13s)ease-in-out,visibility 0s linear var(--spectrum-global-animation-duration-100,.13s);pointer-events:none}.spectrum-Modal_f81956.is-open_f81956{visibility:visible;opacity:.9999;pointer-events:auto;transition-delay:0s}.spectrum-Modal-wrapper_f81956{box-sizing:border-box;width:100vw;height:var(--spectrum-visual-viewport-height);visibility:hidden;pointer-events:none;z-index:2;transition:visibility 0s linear var(--spectrum-global-animation-duration-100,.13s);justify-content:center;align-items:center;display:flex;position:fixed;top:0;left:0}.spectrum-Modal-wrapper_f81956.is-open_f81956{visibility:visible}.spectrum-Modal_f81956{transform:translateY(var(--spectrum-dialog-entry-animation-distance,var(--spectrum-global-dimension-size-250)));z-index:2;max-height:calc(var(--spectrum-visual-viewport-height)*.9);max-width:90vw;min-width:var(--spectrum-dialog-min-width,var(--spectrum-global-dimension-static-size-3600));border-radius:var(--spectrum-dialog-border-radius,var(--spectrum-global-dimension-size-50));pointer-events:auto;transition:opacity var(--spectrum-dialog-exit-animation-duration,var(--spectrum-global-animation-duration-100))cubic-bezier(.5,0,1,1)0s,visibility 0s linear calc(0s + var(--spectrum-dialog-exit-animation-duration,var(--spectrum-global-animation-duration-100))),transform 0s linear calc(0s + var(--spectrum-dialog-exit-animation-duration,var(--spectrum-global-animation-duration-100)));outline:none}.spectrum-Modal_f81956.is-open_f81956{transition:transform var(--spectrum-dialog-entry-animation-duration,var(--spectrum-global-animation-duration-500))cubic-bezier(0,0,.4,1)var(--spectrum-dialog-entry-animation-delay,var(--spectrum-global-animation-duration-200)),opacity var(--spectrum-dialog-entry-animation-duration,var(--spectrum-global-animation-duration-500))cubic-bezier(0,0,.4,1)var(--spectrum-dialog-entry-animation-delay,var(--spectrum-global-animation-duration-200));transform:translateY(0)}@media only screen and (max-device-width:400px),only screen and (max-device-height:350px){.spectrum-Modal--responsive_f81956{width:100%;height:100%;max-width:100%;max-height:100%;border-radius:0}.spectrum-Modal-wrapper_f81956 .spectrum-Modal--responsive_f81956{margin-top:0}}.spectrum-Modal--fullscreen_f81956{max-width:none;max-height:none;width:calc(100% - 80px);height:calc(100% - 80px);position:fixed;top:40px;bottom:40px;left:40px;right:40px}.spectrum-Modal--fullscreenTakeover_f81956{max-width:none;max-height:none;box-sizing:border-box;border:none;border-radius:0;position:fixed;top:0;bottom:0;left:0;right:0}.spectrum-Modal--fullscreenTakeover_f81956,.spectrum-Modal--fullscreenTakeover_f81956.is-open_f81956{transform:none}.spectrum-Modal_f81956{background:var(--spectrum-dialog-background-color,var(--spectrum-alias-background-color-default))}:root{font-synthesis:weight}.spectrum-Underlay_eb7615{visibility:hidden;opacity:0;transition:transform var(--spectrum-global-animation-duration-100,.13s)ease-in-out,opacity var(--spectrum-global-animation-duration-100,.13s)ease-in-out,visibility 0s linear var(--spectrum-global-animation-duration-100,.13s);pointer-events:none}.spectrum-Underlay_eb7615.is-open_eb7615{visibility:visible;opacity:.9999;pointer-events:auto;transition-delay:0s}.spectrum-Underlay_eb7615{z-index:1;transition:opacity var(--spectrum-dialog-background-exit-animation-duration,var(--spectrum-global-animation-duration-300))cubic-bezier(.5,0,1,1)var(--spectrum-dialog-background-exit-animation-delay,var(--spectrum-global-animation-duration-200)),visibility 0s linear calc(var(--spectrum-dialog-background-exit-animation-delay,var(--spectrum-global-animation-duration-200)) + var(--spectrum-dialog-background-exit-animation-duration,var(--spectrum-global-animation-duration-300)));position:fixed;top:0;bottom:0;left:0;right:0;overflow:hidden}.spectrum-Underlay_eb7615.spectrum-Underlay--transparent_eb7615{background:0 0;transition:none}.spectrum-Underlay_eb7615.is-open_eb7615{transition:opacity var(--spectrum-dialog-background-entry-animation-duration,var(--spectrum-global-animation-duration-600))cubic-bezier(0,0,.4,1)0s}.spectrum-Underlay_eb7615{background:var(--spectrum-dialog-underlay-background-color,var(--spectrum-alias-background-color-modal-overlay))}:root{font-synthesis:weight}.spectrum-Popover_6115b8{visibility:hidden;opacity:0;transition:transform var(--spectrum-global-animation-duration-100,.13s)ease-in-out,opacity var(--spectrum-global-animation-duration-100,.13s)ease-in-out,visibility 0s linear var(--spectrum-global-animation-duration-100,.13s);pointer-events:none}.spectrum-Popover_6115b8.is-open_6115b8{visibility:visible;opacity:.9999;pointer-events:auto;transition-delay:0s}.spectrum-Popover--bottom_6115b8.is-open_6115b8{transform:translateY(var(--spectrum-overlay-positive-transform-distance))}.spectrum-Popover--top_6115b8.is-open_6115b8{transform:translateY(var(--spectrum-overlay-negative-transform-distance))}.spectrum-Popover--right_6115b8.is-open_6115b8{transform:translateX(var(--spectrum-overlay-positive-transform-distance))}.spectrum-Popover--left_6115b8.is-open_6115b8{transform:translateX(var(--spectrum-overlay-negative-transform-distance))}.spectrum-Popover_6115b8{box-sizing:border-box;min-width:var(--spectrum-global-dimension-size-400);min-height:var(--spectrum-global-dimension-size-400);border-style:solid;border-width:var(--spectrum-popover-border-size,var(--spectrum-alias-border-size-thin));border-radius:var(--spectrum-popover-border-radius,var(--spectrum-alias-border-radius-regular));outline:none;flex-direction:column;display:inline-flex;position:absolute}.spectrum-Popover-tip_6115b8{--spectrum-popover-tip-size:var(--spectrum-popover-tip-width,var(--spectrum-global-dimension-size-250));--spectrum-popover-tip-borderWidth:var(--spectrum-popover-border-size,var(--spectrum-alias-border-size-thin));position:absolute;-webkit-transform:translate(0)}.spectrum-Popover-tip_6115b8 .spectrum-Popover-tip-triangle_6115b8{stroke-linecap:square;stroke-linejoin:miter;stroke-width:var(--spectrum-popover-border-size,var(--spectrum-alias-border-size-thin))}.spectrum-Popover--dialog_6115b8{min-width:270px;padding:30px 29px}.spectrum-Popover--left_6115b8.spectrum-Popover--withTip_6115b8{margin-right:13px}.spectrum-Popover--left_6115b8 .spectrum-Popover-tip_6115b8{left:100%}.spectrum-Popover--right_6115b8.spectrum-Popover--withTip_6115b8{margin-left:13px}.spectrum-Popover--right_6115b8 .spectrum-Popover-tip_6115b8{right:100%;transform:scaleX(-1)}.spectrum-Popover--left_6115b8 .spectrum-Popover-tip_6115b8,.spectrum-Popover--right_6115b8 .spectrum-Popover-tip_6115b8{margin-top:calc(var(--spectrum-global-dimension-size-150)*-1);top:50%}.spectrum-Popover--bottom_6115b8.spectrum-Popover--withTip_6115b8{margin-top:13px}.spectrum-Popover--bottom_6115b8 .spectrum-Popover-tip_6115b8{bottom:100%;transform:scaleY(-1)}.spectrum-Popover--top_6115b8.spectrum-Popover--withTip_6115b8{margin-bottom:13px}.spectrum-Popover--top_6115b8 .spectrum-Popover-tip_6115b8{top:100%}.spectrum-Popover--bottom_6115b8 .spectrum-Popover-tip_6115b8,.spectrum-Popover--top_6115b8 .spectrum-Popover-tip_6115b8{margin-left:calc(var(--spectrum-global-dimension-size-150)*-1);left:50%}.spectrum-Popover_6115b8{background-color:var(--spectrum-popover-background-color,var(--spectrum-global-color-gray-50));border-color:var(--spectrum-popover-border-color,var(--spectrum-alias-border-color-dark));filter:drop-shadow(0 var(--spectrum-popover-shadow-offset-y,var(--spectrum-alias-dropshadow-offset-y))var(--spectrum-popover-shadow-blur,var(--spectrum-alias-dropshadow-blur))var(--spectrum-popover-shadow-color,var(--spectrum-alias-dropshadow-color)));-webkit-filter:drop-shadow(0 var(--spectrum-popover-shadow-offset-y,var(--spectrum-alias-dropshadow-offset-y))var(--spectrum-popover-shadow-blur,var(--spectrum-alias-dropshadow-blur))var(--spectrum-popover-shadow-color,var(--spectrum-alias-dropshadow-color)));will-change:filter;clip-path:inset(-30px)}.spectrum-Popover_6115b8 .spectrum-Popover-tip_6115b8 .spectrum-Popover-tip-triangle_6115b8{fill:var(--spectrum-popover-background-color,var(--spectrum-global-color-gray-50));stroke:var(--spectrum-popover-border-color,var(--spectrum-alias-border-color-dark))}
package/dist/main.js CHANGED
@@ -259,12 +259,19 @@ function $f02bba55a62f20dd$var$Popover(props, ref) {
259
259
  const $f02bba55a62f20dd$var$PopoverWrapper = /*#__PURE__*/ (0, $eLPAa$react.forwardRef)((props, ref)=>{
260
260
  let { children: children , isOpen: isOpen , hideArrow: hideArrow , isNonModal: isNonModal , state: state , wrapperRef: wrapperRef } = props;
261
261
  let { styleProps: styleProps } = (0, $eLPAa$reactspectrumutils.useStyleProps)(props);
262
+ let { size: size , borderWidth: borderWidth , arrowRef: arrowRef } = $f02bba55a62f20dd$var$useArrowSize();
263
+ const borderRadius = $f02bba55a62f20dd$var$usePopoverBorderRadius(ref);
264
+ let borderDiagonal = borderWidth * Math.SQRT2;
265
+ let primary = size + borderDiagonal;
266
+ let secondary = primary * 2;
262
267
  let { popoverProps: popoverProps , arrowProps: arrowProps , underlayProps: underlayProps , placement: placement } = (0, $eLPAa$reactariaoverlays.usePopover)({
263
268
  ...props,
264
269
  popoverRef: ref,
265
- maxHeight: null
270
+ maxHeight: null,
271
+ arrowSize: hideArrow ? 0 : secondary,
272
+ arrowBoundaryOffset: borderRadius
266
273
  }, state);
267
- // Attach Transition's nodeRef to outer most wrapper for node.reflow: https://github.com/reactjs/react-transition-group/blob/c89f807067b32eea6f68fd6c622190d88ced82e2/src/Transition.js#L231
274
+ // Attach Transition's nodeRef to outermost wrapper for node.reflow: https://github.com/reactjs/react-transition-group/blob/c89f807067b32eea6f68fd6c622190d88ced82e2/src/Transition.js#L231
268
275
  return /*#__PURE__*/ (0, ($parcel$interopDefault($eLPAa$react))).createElement("div", {
269
276
  ref: wrapperRef
270
277
  }, !isNonModal && /*#__PURE__*/ (0, ($parcel$interopDefault($eLPAa$react))).createElement((0, $b900e75089bdd9cd$export$f360afc887607b02), {
@@ -289,39 +296,55 @@ const $f02bba55a62f20dd$var$PopoverWrapper = /*#__PURE__*/ (0, $eLPAa$react.forw
289
296
  onDismiss: state.close
290
297
  }), children, hideArrow ? null : /*#__PURE__*/ (0, ($parcel$interopDefault($eLPAa$react))).createElement($f02bba55a62f20dd$var$Arrow, {
291
298
  arrowProps: arrowProps,
292
- direction: $f02bba55a62f20dd$var$arrowPlacement[placement]
299
+ isLandscape: $f02bba55a62f20dd$var$arrowPlacement[placement] === "bottom",
300
+ arrowRef: arrowRef,
301
+ primary: primary,
302
+ secondary: secondary,
303
+ borderDiagonal: borderDiagonal
293
304
  }), /*#__PURE__*/ (0, ($parcel$interopDefault($eLPAa$react))).createElement((0, $eLPAa$reactariaoverlays.DismissButton), {
294
305
  onDismiss: state.close
295
306
  })));
296
307
  });
297
- let $f02bba55a62f20dd$var$ROOT_2 = Math.sqrt(2);
298
- function $f02bba55a62f20dd$var$Arrow(props) {
308
+ function $f02bba55a62f20dd$var$usePopoverBorderRadius(popoverRef) {
309
+ let [borderRadius, setBorderRadius] = (0, $eLPAa$react.useState)(0);
310
+ (0, $eLPAa$reactariautils.useLayoutEffect)(()=>{
311
+ if (popoverRef.current) {
312
+ let spectrumBorderRadius = window.getComputedStyle(popoverRef.current).borderRadius;
313
+ if (spectrumBorderRadius !== "") setBorderRadius(parseInt(spectrumBorderRadius, 10));
314
+ }
315
+ }, [
316
+ popoverRef
317
+ ]);
318
+ return borderRadius;
319
+ }
320
+ function $f02bba55a62f20dd$var$useArrowSize() {
299
321
  let [size, setSize] = (0, $eLPAa$react.useState)(20);
300
322
  let [borderWidth, setBorderWidth] = (0, $eLPAa$react.useState)(1);
301
- let ref = (0, $eLPAa$react.useRef)();
323
+ let arrowRef = (0, $eLPAa$react.useRef)(null);
302
324
  // get the css value for the tip size and divide it by 2 for this arrow implementation
303
325
  (0, $eLPAa$reactariautils.useLayoutEffect)(()=>{
304
- if (ref.current) {
305
- let spectrumTipWidth = window.getComputedStyle(ref.current).getPropertyValue("--spectrum-popover-tip-size");
326
+ if (arrowRef.current) {
327
+ let spectrumTipWidth = window.getComputedStyle(arrowRef.current).getPropertyValue("--spectrum-popover-tip-size");
306
328
  if (spectrumTipWidth !== "") setSize(parseInt(spectrumTipWidth, 10) / 2);
307
- let spectrumBorderWidth = window.getComputedStyle(ref.current).getPropertyValue("--spectrum-popover-tip-borderWidth");
329
+ let spectrumBorderWidth = window.getComputedStyle(arrowRef.current).getPropertyValue("--spectrum-popover-tip-borderWidth");
308
330
  if (spectrumBorderWidth !== "") setBorderWidth(parseInt(spectrumBorderWidth, 10));
309
331
  }
310
- }, [
311
- ref
312
- ]);
313
- let landscape = props.direction === "top" || props.direction === "bottom";
314
- let mirror = props.direction === "left" || props.direction === "top";
315
- let borderDiagonal = borderWidth * $f02bba55a62f20dd$var$ROOT_2;
332
+ }, []);
333
+ return {
334
+ size: size,
335
+ borderWidth: borderWidth,
336
+ arrowRef: arrowRef
337
+ };
338
+ }
339
+ function $f02bba55a62f20dd$var$Arrow(props) {
340
+ let { primary: primary , secondary: secondary , isLandscape: isLandscape , arrowProps: arrowProps , borderDiagonal: borderDiagonal , arrowRef: arrowRef } = props;
316
341
  let halfBorderDiagonal = borderDiagonal / 2;
317
- let secondary = 2 * size + 2 * borderDiagonal;
318
- let primary = size + borderDiagonal;
319
- let primaryStart = mirror ? primary : 0;
320
- let primaryEnd = mirror ? halfBorderDiagonal : primary - halfBorderDiagonal;
342
+ let primaryStart = 0;
343
+ let primaryEnd = primary - halfBorderDiagonal;
321
344
  let secondaryStart = halfBorderDiagonal;
322
345
  let secondaryMiddle = secondary / 2;
323
346
  let secondaryEnd = secondary - halfBorderDiagonal;
324
- let pathData = landscape ? [
347
+ let pathData = isLandscape ? [
325
348
  "M",
326
349
  secondaryStart,
327
350
  primaryStart,
@@ -342,14 +365,12 @@ function $f02bba55a62f20dd$var$Arrow(props) {
342
365
  primaryStart,
343
366
  secondaryEnd
344
367
  ];
345
- let arrowProps = props.arrowProps;
346
- /* use ceil because the svg needs to always accomodate the path inside it */ return /*#__PURE__*/ (0, ($parcel$interopDefault($eLPAa$react))).createElement("svg", {
368
+ /* use ceil because the svg needs to always accommodate the path inside it */ return /*#__PURE__*/ (0, ($parcel$interopDefault($eLPAa$react))).createElement("svg", {
347
369
  xmlns: "http://www.w3.org/svg/2000",
348
- width: Math.ceil(landscape ? secondary : primary),
349
- height: Math.ceil(landscape ? primary : secondary),
350
- style: props.style,
370
+ width: Math.ceil(isLandscape ? secondary : primary),
371
+ height: Math.ceil(isLandscape ? primary : secondary),
351
372
  className: (0, $eLPAa$reactspectrumutils.classNames)((0, (/*@__PURE__*/$parcel$interopDefault($16e1dca4664d0b1c$exports))), "spectrum-Popover-tip"),
352
- ref: ref,
373
+ ref: arrowRef,
353
374
  ...arrowProps
354
375
  }, /*#__PURE__*/ (0, ($parcel$interopDefault($eLPAa$react))).createElement("path", {
355
376
  className: (0, $eLPAa$reactspectrumutils.classNames)((0, (/*@__PURE__*/$parcel$interopDefault($16e1dca4664d0b1c$exports))), "spectrum-Popover-tip-triangle"),
package/dist/main.js.map CHANGED
@@ -1 +1 @@
1
- {"mappings":"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","sources":["packages/@react-spectrum/overlays/src/index.ts","packages/@react-spectrum/overlays/src/Overlay.tsx","packages/@react-spectrum/overlays/src/OpenTransition.tsx","packages/@react-spectrum/overlays/src/Popover.tsx","packages/@react-spectrum/overlays/src/overlays.css","packages/@adobe/spectrum-css-temp/components/popover/vars.css","packages/@react-spectrum/overlays/src/Underlay.tsx","packages/@adobe/spectrum-css-temp/components/underlay/vars.css","packages/@react-spectrum/overlays/src/Modal.tsx","packages/@adobe/spectrum-css-temp/components/modal/vars.css","packages/@react-spectrum/overlays/src/Tray.tsx","packages/@adobe/spectrum-css-temp/components/tray/vars.css"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n/// <reference types=\"css-module-types\" />\n\nexport {Overlay} from './Overlay';\nexport {Popover} from './Popover';\nexport {Modal} from './Modal';\nexport {Tray} from './Tray';\nexport {OpenTransition} from './OpenTransition';\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {DOMRef} from '@react-types/shared';\nimport {OpenTransition} from './OpenTransition';\nimport {OverlayProps} from '@react-types/overlays';\nimport {Provider} from '@react-spectrum/provider';\nimport React, {useCallback, useState} from 'react';\nimport {Overlay as ReactAriaOverlay} from '@react-aria/overlays';\n\nfunction Overlay(props: OverlayProps, ref: DOMRef<HTMLDivElement>) {\n let {children, isOpen, container, onEnter, onEntering, onEntered, onExit, onExiting, onExited, nodeRef} = props;\n let [exited, setExited] = useState(!isOpen);\n\n let handleEntered = useCallback(() => {\n setExited(false);\n if (onEntered) {\n onEntered();\n }\n }, [onEntered]);\n\n let handleExited = useCallback(() => {\n setExited(true);\n if (onExited) {\n onExited();\n }\n }, [onExited]);\n\n // Don't un-render the overlay while it's transitioning out.\n let mountOverlay = isOpen || !exited;\n if (!mountOverlay) {\n // Don't bother showing anything if we don't have to.\n return null;\n }\n\n return (\n <ReactAriaOverlay portalContainer={container}>\n <Provider ref={ref} UNSAFE_style={{background: 'transparent', isolation: 'isolate'}} isDisabled={false}>\n <OpenTransition\n in={isOpen}\n appear\n onExit={onExit}\n onExiting={onExiting}\n onExited={handleExited}\n onEnter={onEnter}\n onEntering={onEntering}\n onEntered={handleEntered}\n nodeRef={nodeRef}>\n {children}\n </OpenTransition>\n </Provider>\n </ReactAriaOverlay>\n );\n}\n\nlet _Overlay = React.forwardRef(Overlay);\nexport {_Overlay as Overlay};\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport React from 'react';\nimport {Transition} from 'react-transition-group';\n\nconst OPEN_STATES = {\n entering: false,\n entered: true\n};\n\n/**\n * Timeout issues adding css animations to enter may be related to\n * https://github.com/reactjs/react-transition-group/issues/189 or\n * https://github.com/reactjs/react-transition-group/issues/22\n * my VM isn't good enough to debug accurately and get a better answer.\n *\n * As a result, use enter 0 so that is-open is applied once entered\n * it doesn't matter if we know when the css-animation is done on entering\n * for exiting though, give time for the css-animation to play\n * before removing from the DOM\n * **note** hitting esc bypasses exit animation for anyone testing.\n */\n\nexport function OpenTransition(props) {\n // Do not apply any transition if in chromatic.\n if (process.env.CHROMATIC) {\n return React.Children.map(props.children, child => child && React.cloneElement(child, {isOpen: props.in}));\n }\n\n return (\n <Transition timeout={{enter: 0, exit: 350}} {...props}>\n {(state) => React.Children.map(props.children, child => child && React.cloneElement(child, {isOpen: !!OPEN_STATES[state]}))}\n </Transition>\n );\n}\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {AriaPopoverProps, DismissButton, usePopover} from '@react-aria/overlays';\nimport {classNames, useDOMRef, useStyleProps} from '@react-spectrum/utils';\nimport {DOMRef, StyleProps} from '@react-types/shared';\nimport {Overlay} from './Overlay';\nimport {OverlayTriggerState} from '@react-stately/overlays';\nimport overrideStyles from './overlays.css';\nimport React, {forwardRef, MutableRefObject, ReactNode, RefObject, useRef, useState} from 'react';\nimport styles from '@adobe/spectrum-css-temp/components/popover/vars.css';\nimport {Underlay} from './Underlay';\nimport {useLayoutEffect} from '@react-aria/utils';\n\ninterface PopoverProps extends Omit<AriaPopoverProps, 'popoverRef' | 'maxHeight'>, StyleProps {\n children: ReactNode,\n hideArrow?: boolean,\n state: OverlayTriggerState\n}\n\ninterface PopoverWrapperProps extends PopoverProps {\n isOpen?: boolean,\n wrapperRef: MutableRefObject<HTMLDivElement>\n}\n\n/**\n * Arrow placement can be done pointing right or down because those paths start at 0, x or y. Because the\n * other two don't, they start at a fractional pixel value, it introduces rounding differences between browsers and\n * between display types (retina with subpixels vs not retina). By flipping them with CSS we can ensure that\n * the path always starts at 0 so that it perfectly overlaps the popover's border.\n * See bottom of file for more explanation.\n */\nlet arrowPlacement = {\n left: 'right',\n right: 'right',\n top: 'bottom',\n bottom: 'bottom'\n};\n\nfunction Popover(props: PopoverProps, ref: DOMRef<HTMLDivElement>) {\n let {\n children,\n state,\n ...otherProps\n } = props;\n let domRef = useDOMRef(ref);\n let wrapperRef = useRef<HTMLDivElement>(null);\n\n return (\n <Overlay {...otherProps} isOpen={state.isOpen} nodeRef={wrapperRef}>\n <PopoverWrapper ref={domRef} {...props} wrapperRef={wrapperRef}>\n {children}\n </PopoverWrapper>\n </Overlay>\n );\n}\n\nconst PopoverWrapper = forwardRef((props: PopoverWrapperProps, ref: RefObject<HTMLDivElement>) => {\n let {\n children,\n isOpen,\n hideArrow,\n isNonModal,\n state,\n wrapperRef\n } = props;\n let {styleProps} = useStyleProps(props);\n\n let {popoverProps, arrowProps, underlayProps, placement} = usePopover({\n ...props,\n popoverRef: ref,\n maxHeight: null\n }, state);\n\n // Attach Transition's nodeRef to outer most wrapper for node.reflow: https://github.com/reactjs/react-transition-group/blob/c89f807067b32eea6f68fd6c622190d88ced82e2/src/Transition.js#L231\n return (\n <div ref={wrapperRef}>\n {!isNonModal && <Underlay isTransparent {...underlayProps} isOpen={isOpen} /> }\n <div\n {...styleProps}\n {...popoverProps}\n style={{\n ...styleProps.style,\n ...popoverProps.style\n }}\n ref={ref}\n className={\n classNames(\n styles,\n 'spectrum-Popover',\n `spectrum-Popover--${placement}`,\n {\n 'spectrum-Popover--withTip': !hideArrow,\n 'is-open': isOpen\n },\n classNames(\n overrideStyles,\n 'spectrum-Popover',\n 'react-spectrum-Popover'\n ),\n styleProps.className\n )\n }\n role=\"presentation\"\n data-testid=\"popover\">\n {!isNonModal && <DismissButton onDismiss={state.close} />}\n {children}\n {hideArrow ? null : (\n <Arrow arrowProps={arrowProps} direction={arrowPlacement[placement]} />\n )}\n <DismissButton onDismiss={state.close} />\n </div>\n </div>\n );\n});\n\nlet ROOT_2 = Math.sqrt(2);\n\nfunction Arrow(props) {\n let [size, setSize] = useState(20);\n let [borderWidth, setBorderWidth] = useState(1);\n let ref = useRef();\n // get the css value for the tip size and divide it by 2 for this arrow implementation\n useLayoutEffect(() => {\n if (ref.current) {\n let spectrumTipWidth = window.getComputedStyle(ref.current)\n .getPropertyValue('--spectrum-popover-tip-size');\n if (spectrumTipWidth !== '') {\n setSize(parseInt(spectrumTipWidth, 10) / 2);\n }\n\n let spectrumBorderWidth = window.getComputedStyle(ref.current)\n .getPropertyValue('--spectrum-popover-tip-borderWidth');\n if (spectrumBorderWidth !== '') {\n setBorderWidth(parseInt(spectrumBorderWidth, 10));\n }\n }\n }, [ref]);\n\n let landscape = props.direction === 'top' || props.direction === 'bottom';\n let mirror = props.direction === 'left' || props.direction === 'top';\n\n let borderDiagonal = borderWidth * ROOT_2;\n let halfBorderDiagonal = borderDiagonal / 2;\n\n let secondary = 2 * size + 2 * borderDiagonal;\n let primary = size + borderDiagonal;\n\n let primaryStart = mirror ? primary : 0;\n let primaryEnd = mirror ? halfBorderDiagonal : primary - halfBorderDiagonal;\n\n let secondaryStart = halfBorderDiagonal;\n let secondaryMiddle = secondary / 2;\n let secondaryEnd = secondary - halfBorderDiagonal;\n\n let pathData = landscape ? [\n 'M', secondaryStart, primaryStart,\n 'L', secondaryMiddle, primaryEnd,\n 'L', secondaryEnd, primaryStart\n ] : [\n 'M', primaryStart, secondaryStart,\n 'L', primaryEnd, secondaryMiddle,\n 'L', primaryStart, secondaryEnd\n ];\n let arrowProps = props.arrowProps;\n\n /* use ceil because the svg needs to always accomodate the path inside it */\n return (\n <svg\n xmlns=\"http://www.w3.org/svg/2000\"\n width={Math.ceil(landscape ? secondary : primary)}\n height={Math.ceil(landscape ? primary : secondary)}\n style={props.style}\n className={classNames(styles, 'spectrum-Popover-tip')}\n ref={ref}\n {...arrowProps}>\n <path className={classNames(styles, 'spectrum-Popover-tip-triangle')} d={pathData.join(' ')} />\n </svg>\n );\n}\n\nlet _Popover = forwardRef(Popover);\nexport {_Popover as Popover};\n\n/**\n * More explanation on popover tips.\n * - I tried changing the calculation of the popover placement in an effort to get it squarely onto the pixel grid.\n * This did not work because the problem was in the svg partial pixel end of the path in the popover right and popover bottom.\n * - I tried creating an extra 'bandaid' path that matched the background color and would overlap the popover border.\n * This didn't work because the border on the svg triangle didn't extend all the way to match nicely with the popover border.\n * - I tried getting the client bounding box and setting the svg to that partial pixel value\n * This didn't work because again the issue was inside the svg\n * - I didn't try drawing the svg backwards\n * This could still be tried\n * - I tried changing the calculation of the popover placement AND the svg height/width so that they were all rounded\n * This seems to have done the trick.\n */\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n.spectrum-Popover {\n /* This makes the contents of popovers focusable immediately, without waiting\n a frame for animations to start. */\n &.react-spectrum-Popover {\n visibility: visible;\n }\n\n .spectrum-Dialog-content {\n max-height: initial;\n }\n}\n\n.spectrum-Modal-wrapper.react-spectrum-Modal-wrapper,\n.spectrum-Modal.react-spectrum-Modal {\n visibility: visible;\n}\n\n.spectrum-Tray.react-spectrum-Tray {\n visibility: visible;\n}\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n@import './index.css';\n@import './skin.css';\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {classNames} from '@react-spectrum/utils';\nimport React from 'react';\nimport underlayStyles from '@adobe/spectrum-css-temp/components/underlay/vars.css';\n\ninterface UnderlayProps {\n isOpen?: boolean,\n isTransparent?: boolean\n}\n\nexport function Underlay({isOpen, isTransparent}: UnderlayProps) {\n return (\n <div className={classNames(underlayStyles, 'spectrum-Underlay', {'is-open': isOpen, 'spectrum-Underlay--transparent': isTransparent})} />\n );\n}\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n@import './index.css';\n@import './skin.css';\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {AriaModalOverlayProps, useModalOverlay} from '@react-aria/overlays';\nimport {classNames, useDOMRef, useStyleProps} from '@react-spectrum/utils';\nimport {DOMRef, StyleProps} from '@react-types/shared';\nimport modalStyles from '@adobe/spectrum-css-temp/components/modal/vars.css';\nimport {Overlay} from './Overlay';\nimport {OverlayProps} from '@react-types/overlays';\nimport {OverlayTriggerState} from '@react-stately/overlays';\nimport overrideStyles from './overlays.css';\nimport React, {forwardRef, MutableRefObject, ReactNode, RefObject, useRef} from 'react';\nimport {Underlay} from './Underlay';\nimport {useViewportSize} from '@react-aria/utils';\n\ninterface ModalProps extends AriaModalOverlayProps, StyleProps, Omit<OverlayProps, 'nodeRef'> {\n children: ReactNode,\n state: OverlayTriggerState,\n type?: 'modal' | 'fullscreen' | 'fullscreenTakeover'\n}\n\ninterface ModalWrapperProps extends ModalProps {\n isOpen?: boolean,\n wrapperRef: MutableRefObject<HTMLDivElement>\n}\n\nfunction Modal(props: ModalProps, ref: DOMRef<HTMLDivElement>) {\n let {children, state, ...otherProps} = props;\n let domRef = useDOMRef(ref);\n let wrapperRef = useRef<HTMLDivElement>(null);\n\n return (\n <Overlay {...otherProps} isOpen={state.isOpen} nodeRef={wrapperRef}>\n <ModalWrapper {...props} wrapperRef={wrapperRef} ref={domRef}>\n {children}\n </ModalWrapper>\n </Overlay>\n );\n}\n\nlet typeMap = {\n fullscreen: 'fullscreen',\n fullscreenTakeover: 'fullscreenTakeover'\n};\n\nlet ModalWrapper = forwardRef(function (props: ModalWrapperProps, ref: RefObject<HTMLDivElement>) {\n let {type, children, state, isOpen, wrapperRef} = props;\n let typeVariant = typeMap[type];\n let {styleProps} = useStyleProps(props);\n let {modalProps, underlayProps} = useModalOverlay(props, state, ref);\n\n let wrapperClassName = classNames(\n modalStyles,\n 'spectrum-Modal-wrapper',\n classNames(\n overrideStyles,\n 'spectrum-Modal-wrapper',\n 'react-spectrum-Modal-wrapper'\n )\n );\n\n let modalClassName = classNames(\n modalStyles,\n 'spectrum-Modal',\n {\n 'is-open': isOpen\n },\n classNames(\n overrideStyles,\n 'spectrum-Modal',\n 'react-spectrum-Modal'\n ),\n {[`spectrum-Modal--${typeVariant}`]: typeVariant},\n styleProps.className\n );\n\n let viewport = useViewportSize();\n let style: any = {\n '--spectrum-visual-viewport-height': viewport.height + 'px'\n };\n\n // Attach Transition's nodeRef to outer most wrapper for node.reflow: https://github.com/reactjs/react-transition-group/blob/c89f807067b32eea6f68fd6c622190d88ced82e2/src/Transition.js#L231\n return (\n <div ref={wrapperRef}>\n <Underlay {...underlayProps} isOpen={isOpen} />\n <div className={wrapperClassName} style={style}>\n <div\n {...styleProps}\n {...modalProps}\n ref={ref}\n className={modalClassName}\n data-testid=\"modal\">\n {children}\n </div>\n </div>\n </div>\n );\n});\n\nlet _Modal = forwardRef(Modal);\nexport {_Modal as Modal};\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n@import './index.css';\n@import './skin.css';\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {AriaModalOverlayProps, DismissButton, useModalOverlay} from '@react-aria/overlays';\nimport {classNames, useDOMRef, useStyleProps} from '@react-spectrum/utils';\nimport {DOMRef, StyleProps} from '@react-types/shared';\nimport {Overlay} from './Overlay';\nimport {OverlayProps} from '@react-types/overlays';\nimport {OverlayTriggerState} from '@react-stately/overlays';\nimport overrideStyles from './overlays.css';\nimport React, {forwardRef, MutableRefObject, ReactNode, RefObject, useRef} from 'react';\nimport trayStyles from '@adobe/spectrum-css-temp/components/tray/vars.css';\nimport {Underlay} from './Underlay';\nimport {useViewportSize} from '@react-aria/utils';\n\ninterface TrayProps extends AriaModalOverlayProps, StyleProps, Omit<OverlayProps, 'nodeRef'> {\n children: ReactNode,\n state: OverlayTriggerState,\n isFixedHeight?: boolean\n}\n\ninterface TrayWrapperProps extends TrayProps {\n isOpen?: boolean,\n wrapperRef: MutableRefObject<HTMLDivElement>\n}\n\nfunction Tray(props: TrayProps, ref: DOMRef<HTMLDivElement>) {\n let {children, state, ...otherProps} = props;\n let domRef = useDOMRef(ref);\n let wrapperRef = useRef<HTMLDivElement>(null);\n\n return (\n <Overlay {...otherProps} isOpen={state.isOpen} nodeRef={wrapperRef}>\n <TrayWrapper {...props} wrapperRef={wrapperRef} ref={domRef}>\n {children}\n </TrayWrapper>\n </Overlay>\n );\n}\n\nlet TrayWrapper = forwardRef(function (props: TrayWrapperProps, ref: RefObject<HTMLDivElement>) {\n let {\n children,\n isOpen,\n isFixedHeight,\n state,\n wrapperRef\n } = props;\n let {styleProps} = useStyleProps(props);\n\n let {modalProps, underlayProps} = useModalOverlay({\n ...props,\n isDismissable: true\n }, state, ref);\n\n // We need to measure the window's height in JS rather than using percentages in CSS\n // so that contents (e.g. menu) can inherit the max-height properly. Using percentages\n // does not work properly because there is nothing to base the percentage on.\n // We cannot use vh units because mobile browsers adjust the window height dynamically\n // when the address bar/bottom toolbars show and hide on scroll and vh units are fixed.\n // Also, the visual viewport is smaller than the layout viewport when the virtual keyboard\n // is up, so use the VisualViewport API to ensure the tray is displayed above the keyboard.\n let viewport = useViewportSize();\n let wrapperStyle: any = {\n '--spectrum-visual-viewport-height': viewport.height + 'px'\n };\n\n let wrapperClassName = classNames(\n trayStyles,\n 'spectrum-Tray-wrapper'\n );\n\n let className = classNames(\n trayStyles,\n 'spectrum-Tray',\n {\n 'is-open': isOpen,\n 'spectrum-Tray--fixedHeight': isFixedHeight\n },\n classNames(\n overrideStyles,\n 'spectrum-Tray',\n 'react-spectrum-Tray'\n ),\n styleProps.className\n );\n\n // Attach Transition's nodeRef to outer most wrapper for node.reflow: https://github.com/reactjs/react-transition-group/blob/c89f807067b32eea6f68fd6c622190d88ced82e2/src/Transition.js#L231\n return (\n <div ref={wrapperRef}>\n <Underlay {...underlayProps} isOpen={isOpen} />\n <div className={wrapperClassName} style={wrapperStyle}>\n <div\n {...styleProps}\n {...modalProps}\n className={className}\n ref={ref}\n data-testid=\"tray\">\n <DismissButton onDismiss={state.close} />\n {children}\n <DismissButton onDismiss={state.close} />\n </div>\n </div>\n </div>\n );\n});\n\nlet _Tray = forwardRef(Tray);\nexport {_Tray as Tray};\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n@import './index.css';\n@import './skin.css';\n"],"names":[],"version":3,"file":"main.js.map"}
1
+ {"mappings":"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","sources":["packages/@react-spectrum/overlays/src/index.ts","packages/@react-spectrum/overlays/src/Overlay.tsx","packages/@react-spectrum/overlays/src/OpenTransition.tsx","packages/@react-spectrum/overlays/src/Popover.tsx","packages/@react-spectrum/overlays/src/overlays.css","packages/@adobe/spectrum-css-temp/components/popover/vars.css","packages/@react-spectrum/overlays/src/Underlay.tsx","packages/@adobe/spectrum-css-temp/components/underlay/vars.css","packages/@react-spectrum/overlays/src/Modal.tsx","packages/@adobe/spectrum-css-temp/components/modal/vars.css","packages/@react-spectrum/overlays/src/Tray.tsx","packages/@adobe/spectrum-css-temp/components/tray/vars.css"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n/// <reference types=\"css-module-types\" />\n\nexport {Overlay} from './Overlay';\nexport {Popover} from './Popover';\nexport {Modal} from './Modal';\nexport {Tray} from './Tray';\nexport {OpenTransition} from './OpenTransition';\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {DOMRef} from '@react-types/shared';\nimport {OpenTransition} from './OpenTransition';\nimport {OverlayProps} from '@react-types/overlays';\nimport {Provider} from '@react-spectrum/provider';\nimport React, {useCallback, useState} from 'react';\nimport {Overlay as ReactAriaOverlay} from '@react-aria/overlays';\n\nfunction Overlay(props: OverlayProps, ref: DOMRef<HTMLDivElement>) {\n let {children, isOpen, container, onEnter, onEntering, onEntered, onExit, onExiting, onExited, nodeRef} = props;\n let [exited, setExited] = useState(!isOpen);\n\n let handleEntered = useCallback(() => {\n setExited(false);\n if (onEntered) {\n onEntered();\n }\n }, [onEntered]);\n\n let handleExited = useCallback(() => {\n setExited(true);\n if (onExited) {\n onExited();\n }\n }, [onExited]);\n\n // Don't un-render the overlay while it's transitioning out.\n let mountOverlay = isOpen || !exited;\n if (!mountOverlay) {\n // Don't bother showing anything if we don't have to.\n return null;\n }\n\n return (\n <ReactAriaOverlay portalContainer={container}>\n <Provider ref={ref} UNSAFE_style={{background: 'transparent', isolation: 'isolate'}} isDisabled={false}>\n <OpenTransition\n in={isOpen}\n appear\n onExit={onExit}\n onExiting={onExiting}\n onExited={handleExited}\n onEnter={onEnter}\n onEntering={onEntering}\n onEntered={handleEntered}\n nodeRef={nodeRef}>\n {children}\n </OpenTransition>\n </Provider>\n </ReactAriaOverlay>\n );\n}\n\nlet _Overlay = React.forwardRef(Overlay);\nexport {_Overlay as Overlay};\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport React from 'react';\nimport {Transition} from 'react-transition-group';\n\nconst OPEN_STATES = {\n entering: false,\n entered: true\n};\n\n/**\n * Timeout issues adding css animations to enter may be related to\n * https://github.com/reactjs/react-transition-group/issues/189 or\n * https://github.com/reactjs/react-transition-group/issues/22\n * my VM isn't good enough to debug accurately and get a better answer.\n *\n * As a result, use enter 0 so that is-open is applied once entered\n * it doesn't matter if we know when the css-animation is done on entering\n * for exiting though, give time for the css-animation to play\n * before removing from the DOM\n * **note** hitting esc bypasses exit animation for anyone testing.\n */\n\nexport function OpenTransition(props) {\n // Do not apply any transition if in chromatic.\n if (process.env.CHROMATIC) {\n return React.Children.map(props.children, child => child && React.cloneElement(child, {isOpen: props.in}));\n }\n\n return (\n <Transition timeout={{enter: 0, exit: 350}} {...props}>\n {(state) => React.Children.map(props.children, child => child && React.cloneElement(child, {isOpen: !!OPEN_STATES[state]}))}\n </Transition>\n );\n}\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {AriaPopoverProps, DismissButton, PopoverAria, usePopover} from '@react-aria/overlays';\nimport {classNames, useDOMRef, useStyleProps} from '@react-spectrum/utils';\nimport {DOMRef, StyleProps} from '@react-types/shared';\nimport {Overlay} from './Overlay';\nimport {OverlayTriggerState} from '@react-stately/overlays';\nimport overrideStyles from './overlays.css';\nimport React, {forwardRef, MutableRefObject, ReactNode, RefObject, useRef, useState} from 'react';\nimport styles from '@adobe/spectrum-css-temp/components/popover/vars.css';\nimport {Underlay} from './Underlay';\nimport {useLayoutEffect} from '@react-aria/utils';\n\ninterface PopoverProps extends Omit<AriaPopoverProps, 'popoverRef' | 'maxHeight'>, StyleProps {\n children: ReactNode,\n hideArrow?: boolean,\n state: OverlayTriggerState\n}\n\ninterface PopoverWrapperProps extends PopoverProps {\n isOpen?: boolean,\n wrapperRef: MutableRefObject<HTMLDivElement>\n}\n\ninterface ArrowProps {\n arrowProps: PopoverAria['arrowProps'],\n isLandscape: boolean,\n arrowRef?: RefObject<SVGSVGElement>,\n primary: number,\n secondary: number,\n borderDiagonal: number\n}\n\n/**\n * Arrow placement can be done pointing right or down because those paths start at 0, x or y. Because the\n * other two don't, they start at a fractional pixel value, it introduces rounding differences between browsers and\n * between display types (retina with subpixels vs not retina). By flipping them with CSS we can ensure that\n * the path always starts at 0 so that it perfectly overlaps the popover's border.\n * See bottom of file for more explanation.\n */\nlet arrowPlacement = {\n left: 'right',\n right: 'right',\n top: 'bottom',\n bottom: 'bottom'\n};\n\nfunction Popover(props: PopoverProps, ref: DOMRef<HTMLDivElement>) {\n let {\n children,\n state,\n ...otherProps\n } = props;\n let domRef = useDOMRef(ref);\n let wrapperRef = useRef<HTMLDivElement>(null);\n\n return (\n <Overlay {...otherProps} isOpen={state.isOpen} nodeRef={wrapperRef}>\n <PopoverWrapper ref={domRef} {...props} wrapperRef={wrapperRef}>\n {children}\n </PopoverWrapper>\n </Overlay>\n );\n}\n\nconst PopoverWrapper = forwardRef((props: PopoverWrapperProps, ref: RefObject<HTMLDivElement>) => {\n let {\n children,\n isOpen,\n hideArrow,\n isNonModal,\n state,\n wrapperRef\n } = props;\n let {styleProps} = useStyleProps(props);\n\n let {size, borderWidth, arrowRef} = useArrowSize();\n const borderRadius = usePopoverBorderRadius(ref);\n let borderDiagonal = borderWidth * Math.SQRT2;\n let primary = size + borderDiagonal;\n let secondary = primary * 2;\n let {popoverProps, arrowProps, underlayProps, placement} = usePopover({\n ...props,\n popoverRef: ref,\n maxHeight: null,\n arrowSize: hideArrow ? 0 : secondary,\n arrowBoundaryOffset: borderRadius\n }, state);\n\n // Attach Transition's nodeRef to outermost wrapper for node.reflow: https://github.com/reactjs/react-transition-group/blob/c89f807067b32eea6f68fd6c622190d88ced82e2/src/Transition.js#L231\n return (\n <div ref={wrapperRef}>\n {!isNonModal && <Underlay isTransparent {...underlayProps} isOpen={isOpen} /> }\n <div\n {...styleProps}\n {...popoverProps}\n style={{\n ...styleProps.style,\n ...popoverProps.style\n }}\n ref={ref}\n className={\n classNames(\n styles,\n 'spectrum-Popover',\n `spectrum-Popover--${placement}`,\n {\n 'spectrum-Popover--withTip': !hideArrow,\n 'is-open': isOpen\n },\n classNames(\n overrideStyles,\n 'spectrum-Popover',\n 'react-spectrum-Popover'\n ),\n styleProps.className\n )\n }\n role=\"presentation\"\n data-testid=\"popover\">\n {!isNonModal && <DismissButton onDismiss={state.close} />}\n {children}\n {hideArrow ? null : (\n <Arrow\n arrowProps={arrowProps}\n isLandscape={arrowPlacement[placement] === 'bottom'}\n arrowRef={arrowRef}\n primary={primary}\n secondary={secondary}\n borderDiagonal={borderDiagonal} />\n )}\n <DismissButton onDismiss={state.close} />\n </div>\n </div>\n );\n});\n\nfunction usePopoverBorderRadius(popoverRef: RefObject<HTMLDivElement>) {\n let [borderRadius, setBorderRadius] = useState(0);\n useLayoutEffect(() => {\n if (popoverRef.current) {\n let spectrumBorderRadius = window.getComputedStyle(popoverRef.current).borderRadius;\n if (spectrumBorderRadius !== '') {\n setBorderRadius(parseInt(spectrumBorderRadius, 10));\n }\n }\n }, [popoverRef]);\n return borderRadius;\n}\n\nfunction useArrowSize() {\n let [size, setSize] = useState(20);\n let [borderWidth, setBorderWidth] = useState(1);\n let arrowRef = useRef<SVGSVGElement>(null);\n // get the css value for the tip size and divide it by 2 for this arrow implementation\n useLayoutEffect(() => {\n if (arrowRef.current) {\n let spectrumTipWidth = window.getComputedStyle(arrowRef.current)\n .getPropertyValue('--spectrum-popover-tip-size');\n if (spectrumTipWidth !== '') {\n setSize(parseInt(spectrumTipWidth, 10) / 2);\n }\n\n let spectrumBorderWidth = window.getComputedStyle(arrowRef.current)\n .getPropertyValue('--spectrum-popover-tip-borderWidth');\n if (spectrumBorderWidth !== '') {\n setBorderWidth(parseInt(spectrumBorderWidth, 10));\n }\n }\n }, []);\n return {size, borderWidth, arrowRef};\n}\n\nfunction Arrow(props: ArrowProps) {\n let {primary, secondary, isLandscape, arrowProps, borderDiagonal, arrowRef} = props;\n let halfBorderDiagonal = borderDiagonal / 2;\n\n let primaryStart = 0;\n let primaryEnd = primary - halfBorderDiagonal;\n\n let secondaryStart = halfBorderDiagonal;\n let secondaryMiddle = secondary / 2;\n let secondaryEnd = secondary - halfBorderDiagonal;\n\n let pathData = isLandscape ? [\n 'M', secondaryStart, primaryStart,\n 'L', secondaryMiddle, primaryEnd,\n 'L', secondaryEnd, primaryStart\n ] : [\n 'M', primaryStart, secondaryStart,\n 'L', primaryEnd, secondaryMiddle,\n 'L', primaryStart, secondaryEnd\n ];\n\n /* use ceil because the svg needs to always accommodate the path inside it */\n return (\n <svg\n xmlns=\"http://www.w3.org/svg/2000\"\n width={Math.ceil(isLandscape ? secondary : primary)}\n height={Math.ceil(isLandscape ? primary : secondary)}\n className={classNames(styles, 'spectrum-Popover-tip')}\n ref={arrowRef}\n {...arrowProps}>\n <path className={classNames(styles, 'spectrum-Popover-tip-triangle')} d={pathData.join(' ')} />\n </svg>\n );\n}\n\nlet _Popover = forwardRef(Popover);\nexport {_Popover as Popover};\n\n/**\n * More explanation on popover tips.\n * - I tried changing the calculation of the popover placement in an effort to get it squarely onto the pixel grid.\n * This did not work because the problem was in the svg partial pixel end of the path in the popover right and popover bottom.\n * - I tried creating an extra 'bandaid' path that matched the background color and would overlap the popover border.\n * This didn't work because the border on the svg triangle didn't extend all the way to match nicely with the popover border.\n * - I tried getting the client bounding box and setting the svg to that partial pixel value\n * This didn't work because again the issue was inside the svg\n * - I didn't try drawing the svg backwards\n * This could still be tried\n * - I tried changing the calculation of the popover placement AND the svg height/width so that they were all rounded\n * This seems to have done the trick.\n */\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n.spectrum-Popover {\n /* This makes the contents of popovers focusable immediately, without waiting\n a frame for animations to start. */\n &.react-spectrum-Popover {\n visibility: visible;\n }\n\n .spectrum-Dialog-content {\n max-height: initial;\n }\n}\n\n.spectrum-Modal-wrapper.react-spectrum-Modal-wrapper,\n.spectrum-Modal.react-spectrum-Modal {\n visibility: visible;\n}\n\n.spectrum-Tray.react-spectrum-Tray {\n visibility: visible;\n}\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n@import './index.css';\n@import './skin.css';\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {classNames} from '@react-spectrum/utils';\nimport React from 'react';\nimport underlayStyles from '@adobe/spectrum-css-temp/components/underlay/vars.css';\n\ninterface UnderlayProps {\n isOpen?: boolean,\n isTransparent?: boolean\n}\n\nexport function Underlay({isOpen, isTransparent}: UnderlayProps) {\n return (\n <div className={classNames(underlayStyles, 'spectrum-Underlay', {'is-open': isOpen, 'spectrum-Underlay--transparent': isTransparent})} />\n );\n}\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n@import './index.css';\n@import './skin.css';\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {AriaModalOverlayProps, useModalOverlay} from '@react-aria/overlays';\nimport {classNames, useDOMRef, useStyleProps} from '@react-spectrum/utils';\nimport {DOMRef, StyleProps} from '@react-types/shared';\nimport modalStyles from '@adobe/spectrum-css-temp/components/modal/vars.css';\nimport {Overlay} from './Overlay';\nimport {OverlayProps} from '@react-types/overlays';\nimport {OverlayTriggerState} from '@react-stately/overlays';\nimport overrideStyles from './overlays.css';\nimport React, {forwardRef, MutableRefObject, ReactNode, RefObject, useRef} from 'react';\nimport {Underlay} from './Underlay';\nimport {useViewportSize} from '@react-aria/utils';\n\ninterface ModalProps extends AriaModalOverlayProps, StyleProps, Omit<OverlayProps, 'nodeRef' | 'shouldContainFocus'> {\n children: ReactNode,\n state: OverlayTriggerState,\n type?: 'modal' | 'fullscreen' | 'fullscreenTakeover'\n}\n\ninterface ModalWrapperProps extends ModalProps {\n isOpen?: boolean,\n wrapperRef: MutableRefObject<HTMLDivElement>\n}\n\nfunction Modal(props: ModalProps, ref: DOMRef<HTMLDivElement>) {\n let {children, state, ...otherProps} = props;\n let domRef = useDOMRef(ref);\n let wrapperRef = useRef<HTMLDivElement>(null);\n\n return (\n <Overlay {...otherProps} isOpen={state.isOpen} nodeRef={wrapperRef}>\n <ModalWrapper {...props} wrapperRef={wrapperRef} ref={domRef}>\n {children}\n </ModalWrapper>\n </Overlay>\n );\n}\n\nlet typeMap = {\n fullscreen: 'fullscreen',\n fullscreenTakeover: 'fullscreenTakeover'\n};\n\nlet ModalWrapper = forwardRef(function (props: ModalWrapperProps, ref: RefObject<HTMLDivElement>) {\n let {type, children, state, isOpen, wrapperRef} = props;\n let typeVariant = typeMap[type];\n let {styleProps} = useStyleProps(props);\n let {modalProps, underlayProps} = useModalOverlay(props, state, ref);\n\n let wrapperClassName = classNames(\n modalStyles,\n 'spectrum-Modal-wrapper',\n classNames(\n overrideStyles,\n 'spectrum-Modal-wrapper',\n 'react-spectrum-Modal-wrapper'\n )\n );\n\n let modalClassName = classNames(\n modalStyles,\n 'spectrum-Modal',\n {\n 'is-open': isOpen\n },\n classNames(\n overrideStyles,\n 'spectrum-Modal',\n 'react-spectrum-Modal'\n ),\n {[`spectrum-Modal--${typeVariant}`]: typeVariant},\n styleProps.className\n );\n\n let viewport = useViewportSize();\n let style: any = {\n '--spectrum-visual-viewport-height': viewport.height + 'px'\n };\n\n // Attach Transition's nodeRef to outer most wrapper for node.reflow: https://github.com/reactjs/react-transition-group/blob/c89f807067b32eea6f68fd6c622190d88ced82e2/src/Transition.js#L231\n return (\n <div ref={wrapperRef}>\n <Underlay {...underlayProps} isOpen={isOpen} />\n <div className={wrapperClassName} style={style}>\n <div\n {...styleProps}\n {...modalProps}\n ref={ref}\n className={modalClassName}\n data-testid=\"modal\">\n {children}\n </div>\n </div>\n </div>\n );\n});\n\nlet _Modal = forwardRef(Modal);\nexport {_Modal as Modal};\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n@import './index.css';\n@import './skin.css';\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {AriaModalOverlayProps, DismissButton, useModalOverlay} from '@react-aria/overlays';\nimport {classNames, useDOMRef, useStyleProps} from '@react-spectrum/utils';\nimport {DOMRef, StyleProps} from '@react-types/shared';\nimport {Overlay} from './Overlay';\nimport {OverlayProps} from '@react-types/overlays';\nimport {OverlayTriggerState} from '@react-stately/overlays';\nimport overrideStyles from './overlays.css';\nimport React, {forwardRef, MutableRefObject, ReactNode, RefObject, useRef} from 'react';\nimport trayStyles from '@adobe/spectrum-css-temp/components/tray/vars.css';\nimport {Underlay} from './Underlay';\nimport {useViewportSize} from '@react-aria/utils';\n\ninterface TrayProps extends AriaModalOverlayProps, StyleProps, Omit<OverlayProps, 'nodeRef' | 'shouldContainFocus'> {\n children: ReactNode,\n state: OverlayTriggerState,\n isFixedHeight?: boolean\n}\n\ninterface TrayWrapperProps extends TrayProps {\n isOpen?: boolean,\n wrapperRef: MutableRefObject<HTMLDivElement>\n}\n\nfunction Tray(props: TrayProps, ref: DOMRef<HTMLDivElement>) {\n let {children, state, ...otherProps} = props;\n let domRef = useDOMRef(ref);\n let wrapperRef = useRef<HTMLDivElement>(null);\n\n return (\n <Overlay {...otherProps} isOpen={state.isOpen} nodeRef={wrapperRef}>\n <TrayWrapper {...props} wrapperRef={wrapperRef} ref={domRef}>\n {children}\n </TrayWrapper>\n </Overlay>\n );\n}\n\nlet TrayWrapper = forwardRef(function (props: TrayWrapperProps, ref: RefObject<HTMLDivElement>) {\n let {\n children,\n isOpen,\n isFixedHeight,\n state,\n wrapperRef\n } = props;\n let {styleProps} = useStyleProps(props);\n\n let {modalProps, underlayProps} = useModalOverlay({\n ...props,\n isDismissable: true\n }, state, ref);\n\n // We need to measure the window's height in JS rather than using percentages in CSS\n // so that contents (e.g. menu) can inherit the max-height properly. Using percentages\n // does not work properly because there is nothing to base the percentage on.\n // We cannot use vh units because mobile browsers adjust the window height dynamically\n // when the address bar/bottom toolbars show and hide on scroll and vh units are fixed.\n // Also, the visual viewport is smaller than the layout viewport when the virtual keyboard\n // is up, so use the VisualViewport API to ensure the tray is displayed above the keyboard.\n let viewport = useViewportSize();\n let wrapperStyle: any = {\n '--spectrum-visual-viewport-height': viewport.height + 'px'\n };\n\n let wrapperClassName = classNames(\n trayStyles,\n 'spectrum-Tray-wrapper'\n );\n\n let className = classNames(\n trayStyles,\n 'spectrum-Tray',\n {\n 'is-open': isOpen,\n 'spectrum-Tray--fixedHeight': isFixedHeight\n },\n classNames(\n overrideStyles,\n 'spectrum-Tray',\n 'react-spectrum-Tray'\n ),\n styleProps.className\n );\n\n // Attach Transition's nodeRef to outer most wrapper for node.reflow: https://github.com/reactjs/react-transition-group/blob/c89f807067b32eea6f68fd6c622190d88ced82e2/src/Transition.js#L231\n return (\n <div ref={wrapperRef}>\n <Underlay {...underlayProps} isOpen={isOpen} />\n <div className={wrapperClassName} style={wrapperStyle}>\n <div\n {...styleProps}\n {...modalProps}\n className={className}\n ref={ref}\n data-testid=\"tray\">\n <DismissButton onDismiss={state.close} />\n {children}\n <DismissButton onDismiss={state.close} />\n </div>\n </div>\n </div>\n );\n});\n\nlet _Tray = forwardRef(Tray);\nexport {_Tray as Tray};\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n@import './index.css';\n@import './skin.css';\n"],"names":[],"version":3,"file":"main.js.map"}
package/dist/module.js CHANGED
@@ -253,12 +253,19 @@ function $17b503f7de08fecc$var$Popover(props, ref) {
253
253
  const $17b503f7de08fecc$var$PopoverWrapper = /*#__PURE__*/ (0, $fQOb3$forwardRef)((props, ref)=>{
254
254
  let { children: children , isOpen: isOpen , hideArrow: hideArrow , isNonModal: isNonModal , state: state , wrapperRef: wrapperRef } = props;
255
255
  let { styleProps: styleProps } = (0, $fQOb3$useStyleProps)(props);
256
+ let { size: size , borderWidth: borderWidth , arrowRef: arrowRef } = $17b503f7de08fecc$var$useArrowSize();
257
+ const borderRadius = $17b503f7de08fecc$var$usePopoverBorderRadius(ref);
258
+ let borderDiagonal = borderWidth * Math.SQRT2;
259
+ let primary = size + borderDiagonal;
260
+ let secondary = primary * 2;
256
261
  let { popoverProps: popoverProps , arrowProps: arrowProps , underlayProps: underlayProps , placement: placement } = (0, $fQOb3$usePopover)({
257
262
  ...props,
258
263
  popoverRef: ref,
259
- maxHeight: null
264
+ maxHeight: null,
265
+ arrowSize: hideArrow ? 0 : secondary,
266
+ arrowBoundaryOffset: borderRadius
260
267
  }, state);
261
- // Attach Transition's nodeRef to outer most wrapper for node.reflow: https://github.com/reactjs/react-transition-group/blob/c89f807067b32eea6f68fd6c622190d88ced82e2/src/Transition.js#L231
268
+ // Attach Transition's nodeRef to outermost wrapper for node.reflow: https://github.com/reactjs/react-transition-group/blob/c89f807067b32eea6f68fd6c622190d88ced82e2/src/Transition.js#L231
262
269
  return /*#__PURE__*/ (0, $fQOb3$react).createElement("div", {
263
270
  ref: wrapperRef
264
271
  }, !isNonModal && /*#__PURE__*/ (0, $fQOb3$react).createElement((0, $76a452f4e3df11be$export$f360afc887607b02), {
@@ -283,39 +290,55 @@ const $17b503f7de08fecc$var$PopoverWrapper = /*#__PURE__*/ (0, $fQOb3$forwardRef
283
290
  onDismiss: state.close
284
291
  }), children, hideArrow ? null : /*#__PURE__*/ (0, $fQOb3$react).createElement($17b503f7de08fecc$var$Arrow, {
285
292
  arrowProps: arrowProps,
286
- direction: $17b503f7de08fecc$var$arrowPlacement[placement]
293
+ isLandscape: $17b503f7de08fecc$var$arrowPlacement[placement] === "bottom",
294
+ arrowRef: arrowRef,
295
+ primary: primary,
296
+ secondary: secondary,
297
+ borderDiagonal: borderDiagonal
287
298
  }), /*#__PURE__*/ (0, $fQOb3$react).createElement((0, $fQOb3$DismissButton), {
288
299
  onDismiss: state.close
289
300
  })));
290
301
  });
291
- let $17b503f7de08fecc$var$ROOT_2 = Math.sqrt(2);
292
- function $17b503f7de08fecc$var$Arrow(props) {
302
+ function $17b503f7de08fecc$var$usePopoverBorderRadius(popoverRef) {
303
+ let [borderRadius, setBorderRadius] = (0, $fQOb3$useState)(0);
304
+ (0, $fQOb3$useLayoutEffect)(()=>{
305
+ if (popoverRef.current) {
306
+ let spectrumBorderRadius = window.getComputedStyle(popoverRef.current).borderRadius;
307
+ if (spectrumBorderRadius !== "") setBorderRadius(parseInt(spectrumBorderRadius, 10));
308
+ }
309
+ }, [
310
+ popoverRef
311
+ ]);
312
+ return borderRadius;
313
+ }
314
+ function $17b503f7de08fecc$var$useArrowSize() {
293
315
  let [size, setSize] = (0, $fQOb3$useState)(20);
294
316
  let [borderWidth, setBorderWidth] = (0, $fQOb3$useState)(1);
295
- let ref = (0, $fQOb3$useRef)();
317
+ let arrowRef = (0, $fQOb3$useRef)(null);
296
318
  // get the css value for the tip size and divide it by 2 for this arrow implementation
297
319
  (0, $fQOb3$useLayoutEffect)(()=>{
298
- if (ref.current) {
299
- let spectrumTipWidth = window.getComputedStyle(ref.current).getPropertyValue("--spectrum-popover-tip-size");
320
+ if (arrowRef.current) {
321
+ let spectrumTipWidth = window.getComputedStyle(arrowRef.current).getPropertyValue("--spectrum-popover-tip-size");
300
322
  if (spectrumTipWidth !== "") setSize(parseInt(spectrumTipWidth, 10) / 2);
301
- let spectrumBorderWidth = window.getComputedStyle(ref.current).getPropertyValue("--spectrum-popover-tip-borderWidth");
323
+ let spectrumBorderWidth = window.getComputedStyle(arrowRef.current).getPropertyValue("--spectrum-popover-tip-borderWidth");
302
324
  if (spectrumBorderWidth !== "") setBorderWidth(parseInt(spectrumBorderWidth, 10));
303
325
  }
304
- }, [
305
- ref
306
- ]);
307
- let landscape = props.direction === "top" || props.direction === "bottom";
308
- let mirror = props.direction === "left" || props.direction === "top";
309
- let borderDiagonal = borderWidth * $17b503f7de08fecc$var$ROOT_2;
326
+ }, []);
327
+ return {
328
+ size: size,
329
+ borderWidth: borderWidth,
330
+ arrowRef: arrowRef
331
+ };
332
+ }
333
+ function $17b503f7de08fecc$var$Arrow(props) {
334
+ let { primary: primary , secondary: secondary , isLandscape: isLandscape , arrowProps: arrowProps , borderDiagonal: borderDiagonal , arrowRef: arrowRef } = props;
310
335
  let halfBorderDiagonal = borderDiagonal / 2;
311
- let secondary = 2 * size + 2 * borderDiagonal;
312
- let primary = size + borderDiagonal;
313
- let primaryStart = mirror ? primary : 0;
314
- let primaryEnd = mirror ? halfBorderDiagonal : primary - halfBorderDiagonal;
336
+ let primaryStart = 0;
337
+ let primaryEnd = primary - halfBorderDiagonal;
315
338
  let secondaryStart = halfBorderDiagonal;
316
339
  let secondaryMiddle = secondary / 2;
317
340
  let secondaryEnd = secondary - halfBorderDiagonal;
318
- let pathData = landscape ? [
341
+ let pathData = isLandscape ? [
319
342
  "M",
320
343
  secondaryStart,
321
344
  primaryStart,
@@ -336,14 +359,12 @@ function $17b503f7de08fecc$var$Arrow(props) {
336
359
  primaryStart,
337
360
  secondaryEnd
338
361
  ];
339
- let arrowProps = props.arrowProps;
340
- /* use ceil because the svg needs to always accomodate the path inside it */ return /*#__PURE__*/ (0, $fQOb3$react).createElement("svg", {
362
+ /* use ceil because the svg needs to always accommodate the path inside it */ return /*#__PURE__*/ (0, $fQOb3$react).createElement("svg", {
341
363
  xmlns: "http://www.w3.org/svg/2000",
342
- width: Math.ceil(landscape ? secondary : primary),
343
- height: Math.ceil(landscape ? primary : secondary),
344
- style: props.style,
364
+ width: Math.ceil(isLandscape ? secondary : primary),
365
+ height: Math.ceil(isLandscape ? primary : secondary),
345
366
  className: (0, $fQOb3$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($645594d913f34a2a$exports))), "spectrum-Popover-tip"),
346
- ref: ref,
367
+ ref: arrowRef,
347
368
  ...arrowProps
348
369
  }, /*#__PURE__*/ (0, $fQOb3$react).createElement("path", {
349
370
  className: (0, $fQOb3$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($645594d913f34a2a$exports))), "spectrum-Popover-tip-triangle"),
package/dist/module.js.map CHANGED
@@ -1 +1 @@
1
- {"mappings":"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","sources":["packages/@react-spectrum/overlays/src/index.ts","packages/@react-spectrum/overlays/src/Overlay.tsx","packages/@react-spectrum/overlays/src/OpenTransition.tsx","packages/@react-spectrum/overlays/src/Popover.tsx","packages/@react-spectrum/overlays/src/overlays.css","packages/@adobe/spectrum-css-temp/components/popover/vars.css","packages/@react-spectrum/overlays/src/Underlay.tsx","packages/@adobe/spectrum-css-temp/components/underlay/vars.css","packages/@react-spectrum/overlays/src/Modal.tsx","packages/@adobe/spectrum-css-temp/components/modal/vars.css","packages/@react-spectrum/overlays/src/Tray.tsx","packages/@adobe/spectrum-css-temp/components/tray/vars.css"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n/// <reference types=\"css-module-types\" />\n\nexport {Overlay} from './Overlay';\nexport {Popover} from './Popover';\nexport {Modal} from './Modal';\nexport {Tray} from './Tray';\nexport {OpenTransition} from './OpenTransition';\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {DOMRef} from '@react-types/shared';\nimport {OpenTransition} from './OpenTransition';\nimport {OverlayProps} from '@react-types/overlays';\nimport {Provider} from '@react-spectrum/provider';\nimport React, {useCallback, useState} from 'react';\nimport {Overlay as ReactAriaOverlay} from '@react-aria/overlays';\n\nfunction Overlay(props: OverlayProps, ref: DOMRef<HTMLDivElement>) {\n let {children, isOpen, container, onEnter, onEntering, onEntered, onExit, onExiting, onExited, nodeRef} = props;\n let [exited, setExited] = useState(!isOpen);\n\n let handleEntered = useCallback(() => {\n setExited(false);\n if (onEntered) {\n onEntered();\n }\n }, [onEntered]);\n\n let handleExited = useCallback(() => {\n setExited(true);\n if (onExited) {\n onExited();\n }\n }, [onExited]);\n\n // Don't un-render the overlay while it's transitioning out.\n let mountOverlay = isOpen || !exited;\n if (!mountOverlay) {\n // Don't bother showing anything if we don't have to.\n return null;\n }\n\n return (\n <ReactAriaOverlay portalContainer={container}>\n <Provider ref={ref} UNSAFE_style={{background: 'transparent', isolation: 'isolate'}} isDisabled={false}>\n <OpenTransition\n in={isOpen}\n appear\n onExit={onExit}\n onExiting={onExiting}\n onExited={handleExited}\n onEnter={onEnter}\n onEntering={onEntering}\n onEntered={handleEntered}\n nodeRef={nodeRef}>\n {children}\n </OpenTransition>\n </Provider>\n </ReactAriaOverlay>\n );\n}\n\nlet _Overlay = React.forwardRef(Overlay);\nexport {_Overlay as Overlay};\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport React from 'react';\nimport {Transition} from 'react-transition-group';\n\nconst OPEN_STATES = {\n entering: false,\n entered: true\n};\n\n/**\n * Timeout issues adding css animations to enter may be related to\n * https://github.com/reactjs/react-transition-group/issues/189 or\n * https://github.com/reactjs/react-transition-group/issues/22\n * my VM isn't good enough to debug accurately and get a better answer.\n *\n * As a result, use enter 0 so that is-open is applied once entered\n * it doesn't matter if we know when the css-animation is done on entering\n * for exiting though, give time for the css-animation to play\n * before removing from the DOM\n * **note** hitting esc bypasses exit animation for anyone testing.\n */\n\nexport function OpenTransition(props) {\n // Do not apply any transition if in chromatic.\n if (process.env.CHROMATIC) {\n return React.Children.map(props.children, child => child && React.cloneElement(child, {isOpen: props.in}));\n }\n\n return (\n <Transition timeout={{enter: 0, exit: 350}} {...props}>\n {(state) => React.Children.map(props.children, child => child && React.cloneElement(child, {isOpen: !!OPEN_STATES[state]}))}\n </Transition>\n );\n}\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {AriaPopoverProps, DismissButton, usePopover} from '@react-aria/overlays';\nimport {classNames, useDOMRef, useStyleProps} from '@react-spectrum/utils';\nimport {DOMRef, StyleProps} from '@react-types/shared';\nimport {Overlay} from './Overlay';\nimport {OverlayTriggerState} from '@react-stately/overlays';\nimport overrideStyles from './overlays.css';\nimport React, {forwardRef, MutableRefObject, ReactNode, RefObject, useRef, useState} from 'react';\nimport styles from '@adobe/spectrum-css-temp/components/popover/vars.css';\nimport {Underlay} from './Underlay';\nimport {useLayoutEffect} from '@react-aria/utils';\n\ninterface PopoverProps extends Omit<AriaPopoverProps, 'popoverRef' | 'maxHeight'>, StyleProps {\n children: ReactNode,\n hideArrow?: boolean,\n state: OverlayTriggerState\n}\n\ninterface PopoverWrapperProps extends PopoverProps {\n isOpen?: boolean,\n wrapperRef: MutableRefObject<HTMLDivElement>\n}\n\n/**\n * Arrow placement can be done pointing right or down because those paths start at 0, x or y. Because the\n * other two don't, they start at a fractional pixel value, it introduces rounding differences between browsers and\n * between display types (retina with subpixels vs not retina). By flipping them with CSS we can ensure that\n * the path always starts at 0 so that it perfectly overlaps the popover's border.\n * See bottom of file for more explanation.\n */\nlet arrowPlacement = {\n left: 'right',\n right: 'right',\n top: 'bottom',\n bottom: 'bottom'\n};\n\nfunction Popover(props: PopoverProps, ref: DOMRef<HTMLDivElement>) {\n let {\n children,\n state,\n ...otherProps\n } = props;\n let domRef = useDOMRef(ref);\n let wrapperRef = useRef<HTMLDivElement>(null);\n\n return (\n <Overlay {...otherProps} isOpen={state.isOpen} nodeRef={wrapperRef}>\n <PopoverWrapper ref={domRef} {...props} wrapperRef={wrapperRef}>\n {children}\n </PopoverWrapper>\n </Overlay>\n );\n}\n\nconst PopoverWrapper = forwardRef((props: PopoverWrapperProps, ref: RefObject<HTMLDivElement>) => {\n let {\n children,\n isOpen,\n hideArrow,\n isNonModal,\n state,\n wrapperRef\n } = props;\n let {styleProps} = useStyleProps(props);\n\n let {popoverProps, arrowProps, underlayProps, placement} = usePopover({\n ...props,\n popoverRef: ref,\n maxHeight: null\n }, state);\n\n // Attach Transition's nodeRef to outer most wrapper for node.reflow: https://github.com/reactjs/react-transition-group/blob/c89f807067b32eea6f68fd6c622190d88ced82e2/src/Transition.js#L231\n return (\n <div ref={wrapperRef}>\n {!isNonModal && <Underlay isTransparent {...underlayProps} isOpen={isOpen} /> }\n <div\n {...styleProps}\n {...popoverProps}\n style={{\n ...styleProps.style,\n ...popoverProps.style\n }}\n ref={ref}\n className={\n classNames(\n styles,\n 'spectrum-Popover',\n `spectrum-Popover--${placement}`,\n {\n 'spectrum-Popover--withTip': !hideArrow,\n 'is-open': isOpen\n },\n classNames(\n overrideStyles,\n 'spectrum-Popover',\n 'react-spectrum-Popover'\n ),\n styleProps.className\n )\n }\n role=\"presentation\"\n data-testid=\"popover\">\n {!isNonModal && <DismissButton onDismiss={state.close} />}\n {children}\n {hideArrow ? null : (\n <Arrow arrowProps={arrowProps} direction={arrowPlacement[placement]} />\n )}\n <DismissButton onDismiss={state.close} />\n </div>\n </div>\n );\n});\n\nlet ROOT_2 = Math.sqrt(2);\n\nfunction Arrow(props) {\n let [size, setSize] = useState(20);\n let [borderWidth, setBorderWidth] = useState(1);\n let ref = useRef();\n // get the css value for the tip size and divide it by 2 for this arrow implementation\n useLayoutEffect(() => {\n if (ref.current) {\n let spectrumTipWidth = window.getComputedStyle(ref.current)\n .getPropertyValue('--spectrum-popover-tip-size');\n if (spectrumTipWidth !== '') {\n setSize(parseInt(spectrumTipWidth, 10) / 2);\n }\n\n let spectrumBorderWidth = window.getComputedStyle(ref.current)\n .getPropertyValue('--spectrum-popover-tip-borderWidth');\n if (spectrumBorderWidth !== '') {\n setBorderWidth(parseInt(spectrumBorderWidth, 10));\n }\n }\n }, [ref]);\n\n let landscape = props.direction === 'top' || props.direction === 'bottom';\n let mirror = props.direction === 'left' || props.direction === 'top';\n\n let borderDiagonal = borderWidth * ROOT_2;\n let halfBorderDiagonal = borderDiagonal / 2;\n\n let secondary = 2 * size + 2 * borderDiagonal;\n let primary = size + borderDiagonal;\n\n let primaryStart = mirror ? primary : 0;\n let primaryEnd = mirror ? halfBorderDiagonal : primary - halfBorderDiagonal;\n\n let secondaryStart = halfBorderDiagonal;\n let secondaryMiddle = secondary / 2;\n let secondaryEnd = secondary - halfBorderDiagonal;\n\n let pathData = landscape ? [\n 'M', secondaryStart, primaryStart,\n 'L', secondaryMiddle, primaryEnd,\n 'L', secondaryEnd, primaryStart\n ] : [\n 'M', primaryStart, secondaryStart,\n 'L', primaryEnd, secondaryMiddle,\n 'L', primaryStart, secondaryEnd\n ];\n let arrowProps = props.arrowProps;\n\n /* use ceil because the svg needs to always accomodate the path inside it */\n return (\n <svg\n xmlns=\"http://www.w3.org/svg/2000\"\n width={Math.ceil(landscape ? secondary : primary)}\n height={Math.ceil(landscape ? primary : secondary)}\n style={props.style}\n className={classNames(styles, 'spectrum-Popover-tip')}\n ref={ref}\n {...arrowProps}>\n <path className={classNames(styles, 'spectrum-Popover-tip-triangle')} d={pathData.join(' ')} />\n </svg>\n );\n}\n\nlet _Popover = forwardRef(Popover);\nexport {_Popover as Popover};\n\n/**\n * More explanation on popover tips.\n * - I tried changing the calculation of the popover placement in an effort to get it squarely onto the pixel grid.\n * This did not work because the problem was in the svg partial pixel end of the path in the popover right and popover bottom.\n * - I tried creating an extra 'bandaid' path that matched the background color and would overlap the popover border.\n * This didn't work because the border on the svg triangle didn't extend all the way to match nicely with the popover border.\n * - I tried getting the client bounding box and setting the svg to that partial pixel value\n * This didn't work because again the issue was inside the svg\n * - I didn't try drawing the svg backwards\n * This could still be tried\n * - I tried changing the calculation of the popover placement AND the svg height/width so that they were all rounded\n * This seems to have done the trick.\n */\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n.spectrum-Popover {\n /* This makes the contents of popovers focusable immediately, without waiting\n a frame for animations to start. */\n &.react-spectrum-Popover {\n visibility: visible;\n }\n\n .spectrum-Dialog-content {\n max-height: initial;\n }\n}\n\n.spectrum-Modal-wrapper.react-spectrum-Modal-wrapper,\n.spectrum-Modal.react-spectrum-Modal {\n visibility: visible;\n}\n\n.spectrum-Tray.react-spectrum-Tray {\n visibility: visible;\n}\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n@import './index.css';\n@import './skin.css';\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {classNames} from '@react-spectrum/utils';\nimport React from 'react';\nimport underlayStyles from '@adobe/spectrum-css-temp/components/underlay/vars.css';\n\ninterface UnderlayProps {\n isOpen?: boolean,\n isTransparent?: boolean\n}\n\nexport function Underlay({isOpen, isTransparent}: UnderlayProps) {\n return (\n <div className={classNames(underlayStyles, 'spectrum-Underlay', {'is-open': isOpen, 'spectrum-Underlay--transparent': isTransparent})} />\n );\n}\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n@import './index.css';\n@import './skin.css';\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {AriaModalOverlayProps, useModalOverlay} from '@react-aria/overlays';\nimport {classNames, useDOMRef, useStyleProps} from '@react-spectrum/utils';\nimport {DOMRef, StyleProps} from '@react-types/shared';\nimport modalStyles from '@adobe/spectrum-css-temp/components/modal/vars.css';\nimport {Overlay} from './Overlay';\nimport {OverlayProps} from '@react-types/overlays';\nimport {OverlayTriggerState} from '@react-stately/overlays';\nimport overrideStyles from './overlays.css';\nimport React, {forwardRef, MutableRefObject, ReactNode, RefObject, useRef} from 'react';\nimport {Underlay} from './Underlay';\nimport {useViewportSize} from '@react-aria/utils';\n\ninterface ModalProps extends AriaModalOverlayProps, StyleProps, Omit<OverlayProps, 'nodeRef'> {\n children: ReactNode,\n state: OverlayTriggerState,\n type?: 'modal' | 'fullscreen' | 'fullscreenTakeover'\n}\n\ninterface ModalWrapperProps extends ModalProps {\n isOpen?: boolean,\n wrapperRef: MutableRefObject<HTMLDivElement>\n}\n\nfunction Modal(props: ModalProps, ref: DOMRef<HTMLDivElement>) {\n let {children, state, ...otherProps} = props;\n let domRef = useDOMRef(ref);\n let wrapperRef = useRef<HTMLDivElement>(null);\n\n return (\n <Overlay {...otherProps} isOpen={state.isOpen} nodeRef={wrapperRef}>\n <ModalWrapper {...props} wrapperRef={wrapperRef} ref={domRef}>\n {children}\n </ModalWrapper>\n </Overlay>\n );\n}\n\nlet typeMap = {\n fullscreen: 'fullscreen',\n fullscreenTakeover: 'fullscreenTakeover'\n};\n\nlet ModalWrapper = forwardRef(function (props: ModalWrapperProps, ref: RefObject<HTMLDivElement>) {\n let {type, children, state, isOpen, wrapperRef} = props;\n let typeVariant = typeMap[type];\n let {styleProps} = useStyleProps(props);\n let {modalProps, underlayProps} = useModalOverlay(props, state, ref);\n\n let wrapperClassName = classNames(\n modalStyles,\n 'spectrum-Modal-wrapper',\n classNames(\n overrideStyles,\n 'spectrum-Modal-wrapper',\n 'react-spectrum-Modal-wrapper'\n )\n );\n\n let modalClassName = classNames(\n modalStyles,\n 'spectrum-Modal',\n {\n 'is-open': isOpen\n },\n classNames(\n overrideStyles,\n 'spectrum-Modal',\n 'react-spectrum-Modal'\n ),\n {[`spectrum-Modal--${typeVariant}`]: typeVariant},\n styleProps.className\n );\n\n let viewport = useViewportSize();\n let style: any = {\n '--spectrum-visual-viewport-height': viewport.height + 'px'\n };\n\n // Attach Transition's nodeRef to outer most wrapper for node.reflow: https://github.com/reactjs/react-transition-group/blob/c89f807067b32eea6f68fd6c622190d88ced82e2/src/Transition.js#L231\n return (\n <div ref={wrapperRef}>\n <Underlay {...underlayProps} isOpen={isOpen} />\n <div className={wrapperClassName} style={style}>\n <div\n {...styleProps}\n {...modalProps}\n ref={ref}\n className={modalClassName}\n data-testid=\"modal\">\n {children}\n </div>\n </div>\n </div>\n );\n});\n\nlet _Modal = forwardRef(Modal);\nexport {_Modal as Modal};\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n@import './index.css';\n@import './skin.css';\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {AriaModalOverlayProps, DismissButton, useModalOverlay} from '@react-aria/overlays';\nimport {classNames, useDOMRef, useStyleProps} from '@react-spectrum/utils';\nimport {DOMRef, StyleProps} from '@react-types/shared';\nimport {Overlay} from './Overlay';\nimport {OverlayProps} from '@react-types/overlays';\nimport {OverlayTriggerState} from '@react-stately/overlays';\nimport overrideStyles from './overlays.css';\nimport React, {forwardRef, MutableRefObject, ReactNode, RefObject, useRef} from 'react';\nimport trayStyles from '@adobe/spectrum-css-temp/components/tray/vars.css';\nimport {Underlay} from './Underlay';\nimport {useViewportSize} from '@react-aria/utils';\n\ninterface TrayProps extends AriaModalOverlayProps, StyleProps, Omit<OverlayProps, 'nodeRef'> {\n children: ReactNode,\n state: OverlayTriggerState,\n isFixedHeight?: boolean\n}\n\ninterface TrayWrapperProps extends TrayProps {\n isOpen?: boolean,\n wrapperRef: MutableRefObject<HTMLDivElement>\n}\n\nfunction Tray(props: TrayProps, ref: DOMRef<HTMLDivElement>) {\n let {children, state, ...otherProps} = props;\n let domRef = useDOMRef(ref);\n let wrapperRef = useRef<HTMLDivElement>(null);\n\n return (\n <Overlay {...otherProps} isOpen={state.isOpen} nodeRef={wrapperRef}>\n <TrayWrapper {...props} wrapperRef={wrapperRef} ref={domRef}>\n {children}\n </TrayWrapper>\n </Overlay>\n );\n}\n\nlet TrayWrapper = forwardRef(function (props: TrayWrapperProps, ref: RefObject<HTMLDivElement>) {\n let {\n children,\n isOpen,\n isFixedHeight,\n state,\n wrapperRef\n } = props;\n let {styleProps} = useStyleProps(props);\n\n let {modalProps, underlayProps} = useModalOverlay({\n ...props,\n isDismissable: true\n }, state, ref);\n\n // We need to measure the window's height in JS rather than using percentages in CSS\n // so that contents (e.g. menu) can inherit the max-height properly. Using percentages\n // does not work properly because there is nothing to base the percentage on.\n // We cannot use vh units because mobile browsers adjust the window height dynamically\n // when the address bar/bottom toolbars show and hide on scroll and vh units are fixed.\n // Also, the visual viewport is smaller than the layout viewport when the virtual keyboard\n // is up, so use the VisualViewport API to ensure the tray is displayed above the keyboard.\n let viewport = useViewportSize();\n let wrapperStyle: any = {\n '--spectrum-visual-viewport-height': viewport.height + 'px'\n };\n\n let wrapperClassName = classNames(\n trayStyles,\n 'spectrum-Tray-wrapper'\n );\n\n let className = classNames(\n trayStyles,\n 'spectrum-Tray',\n {\n 'is-open': isOpen,\n 'spectrum-Tray--fixedHeight': isFixedHeight\n },\n classNames(\n overrideStyles,\n 'spectrum-Tray',\n 'react-spectrum-Tray'\n ),\n styleProps.className\n );\n\n // Attach Transition's nodeRef to outer most wrapper for node.reflow: https://github.com/reactjs/react-transition-group/blob/c89f807067b32eea6f68fd6c622190d88ced82e2/src/Transition.js#L231\n return (\n <div ref={wrapperRef}>\n <Underlay {...underlayProps} isOpen={isOpen} />\n <div className={wrapperClassName} style={wrapperStyle}>\n <div\n {...styleProps}\n {...modalProps}\n className={className}\n ref={ref}\n data-testid=\"tray\">\n <DismissButton onDismiss={state.close} />\n {children}\n <DismissButton onDismiss={state.close} />\n </div>\n </div>\n </div>\n );\n});\n\nlet _Tray = forwardRef(Tray);\nexport {_Tray as Tray};\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n@import './index.css';\n@import './skin.css';\n"],"names":[],"version":3,"file":"module.js.map"}
1
+ {"mappings":"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","sources":["packages/@react-spectrum/overlays/src/index.ts","packages/@react-spectrum/overlays/src/Overlay.tsx","packages/@react-spectrum/overlays/src/OpenTransition.tsx","packages/@react-spectrum/overlays/src/Popover.tsx","packages/@react-spectrum/overlays/src/overlays.css","packages/@adobe/spectrum-css-temp/components/popover/vars.css","packages/@react-spectrum/overlays/src/Underlay.tsx","packages/@adobe/spectrum-css-temp/components/underlay/vars.css","packages/@react-spectrum/overlays/src/Modal.tsx","packages/@adobe/spectrum-css-temp/components/modal/vars.css","packages/@react-spectrum/overlays/src/Tray.tsx","packages/@adobe/spectrum-css-temp/components/tray/vars.css"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n/// <reference types=\"css-module-types\" />\n\nexport {Overlay} from './Overlay';\nexport {Popover} from './Popover';\nexport {Modal} from './Modal';\nexport {Tray} from './Tray';\nexport {OpenTransition} from './OpenTransition';\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {DOMRef} from '@react-types/shared';\nimport {OpenTransition} from './OpenTransition';\nimport {OverlayProps} from '@react-types/overlays';\nimport {Provider} from '@react-spectrum/provider';\nimport React, {useCallback, useState} from 'react';\nimport {Overlay as ReactAriaOverlay} from '@react-aria/overlays';\n\nfunction Overlay(props: OverlayProps, ref: DOMRef<HTMLDivElement>) {\n let {children, isOpen, container, onEnter, onEntering, onEntered, onExit, onExiting, onExited, nodeRef} = props;\n let [exited, setExited] = useState(!isOpen);\n\n let handleEntered = useCallback(() => {\n setExited(false);\n if (onEntered) {\n onEntered();\n }\n }, [onEntered]);\n\n let handleExited = useCallback(() => {\n setExited(true);\n if (onExited) {\n onExited();\n }\n }, [onExited]);\n\n // Don't un-render the overlay while it's transitioning out.\n let mountOverlay = isOpen || !exited;\n if (!mountOverlay) {\n // Don't bother showing anything if we don't have to.\n return null;\n }\n\n return (\n <ReactAriaOverlay portalContainer={container}>\n <Provider ref={ref} UNSAFE_style={{background: 'transparent', isolation: 'isolate'}} isDisabled={false}>\n <OpenTransition\n in={isOpen}\n appear\n onExit={onExit}\n onExiting={onExiting}\n onExited={handleExited}\n onEnter={onEnter}\n onEntering={onEntering}\n onEntered={handleEntered}\n nodeRef={nodeRef}>\n {children}\n </OpenTransition>\n </Provider>\n </ReactAriaOverlay>\n );\n}\n\nlet _Overlay = React.forwardRef(Overlay);\nexport {_Overlay as Overlay};\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport React from 'react';\nimport {Transition} from 'react-transition-group';\n\nconst OPEN_STATES = {\n entering: false,\n entered: true\n};\n\n/**\n * Timeout issues adding css animations to enter may be related to\n * https://github.com/reactjs/react-transition-group/issues/189 or\n * https://github.com/reactjs/react-transition-group/issues/22\n * my VM isn't good enough to debug accurately and get a better answer.\n *\n * As a result, use enter 0 so that is-open is applied once entered\n * it doesn't matter if we know when the css-animation is done on entering\n * for exiting though, give time for the css-animation to play\n * before removing from the DOM\n * **note** hitting esc bypasses exit animation for anyone testing.\n */\n\nexport function OpenTransition(props) {\n // Do not apply any transition if in chromatic.\n if (process.env.CHROMATIC) {\n return React.Children.map(props.children, child => child && React.cloneElement(child, {isOpen: props.in}));\n }\n\n return (\n <Transition timeout={{enter: 0, exit: 350}} {...props}>\n {(state) => React.Children.map(props.children, child => child && React.cloneElement(child, {isOpen: !!OPEN_STATES[state]}))}\n </Transition>\n );\n}\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {AriaPopoverProps, DismissButton, PopoverAria, usePopover} from '@react-aria/overlays';\nimport {classNames, useDOMRef, useStyleProps} from '@react-spectrum/utils';\nimport {DOMRef, StyleProps} from '@react-types/shared';\nimport {Overlay} from './Overlay';\nimport {OverlayTriggerState} from '@react-stately/overlays';\nimport overrideStyles from './overlays.css';\nimport React, {forwardRef, MutableRefObject, ReactNode, RefObject, useRef, useState} from 'react';\nimport styles from '@adobe/spectrum-css-temp/components/popover/vars.css';\nimport {Underlay} from './Underlay';\nimport {useLayoutEffect} from '@react-aria/utils';\n\ninterface PopoverProps extends Omit<AriaPopoverProps, 'popoverRef' | 'maxHeight'>, StyleProps {\n children: ReactNode,\n hideArrow?: boolean,\n state: OverlayTriggerState\n}\n\ninterface PopoverWrapperProps extends PopoverProps {\n isOpen?: boolean,\n wrapperRef: MutableRefObject<HTMLDivElement>\n}\n\ninterface ArrowProps {\n arrowProps: PopoverAria['arrowProps'],\n isLandscape: boolean,\n arrowRef?: RefObject<SVGSVGElement>,\n primary: number,\n secondary: number,\n borderDiagonal: number\n}\n\n/**\n * Arrow placement can be done pointing right or down because those paths start at 0, x or y. Because the\n * other two don't, they start at a fractional pixel value, it introduces rounding differences between browsers and\n * between display types (retina with subpixels vs not retina). By flipping them with CSS we can ensure that\n * the path always starts at 0 so that it perfectly overlaps the popover's border.\n * See bottom of file for more explanation.\n */\nlet arrowPlacement = {\n left: 'right',\n right: 'right',\n top: 'bottom',\n bottom: 'bottom'\n};\n\nfunction Popover(props: PopoverProps, ref: DOMRef<HTMLDivElement>) {\n let {\n children,\n state,\n ...otherProps\n } = props;\n let domRef = useDOMRef(ref);\n let wrapperRef = useRef<HTMLDivElement>(null);\n\n return (\n <Overlay {...otherProps} isOpen={state.isOpen} nodeRef={wrapperRef}>\n <PopoverWrapper ref={domRef} {...props} wrapperRef={wrapperRef}>\n {children}\n </PopoverWrapper>\n </Overlay>\n );\n}\n\nconst PopoverWrapper = forwardRef((props: PopoverWrapperProps, ref: RefObject<HTMLDivElement>) => {\n let {\n children,\n isOpen,\n hideArrow,\n isNonModal,\n state,\n wrapperRef\n } = props;\n let {styleProps} = useStyleProps(props);\n\n let {size, borderWidth, arrowRef} = useArrowSize();\n const borderRadius = usePopoverBorderRadius(ref);\n let borderDiagonal = borderWidth * Math.SQRT2;\n let primary = size + borderDiagonal;\n let secondary = primary * 2;\n let {popoverProps, arrowProps, underlayProps, placement} = usePopover({\n ...props,\n popoverRef: ref,\n maxHeight: null,\n arrowSize: hideArrow ? 0 : secondary,\n arrowBoundaryOffset: borderRadius\n }, state);\n\n // Attach Transition's nodeRef to outermost wrapper for node.reflow: https://github.com/reactjs/react-transition-group/blob/c89f807067b32eea6f68fd6c622190d88ced82e2/src/Transition.js#L231\n return (\n <div ref={wrapperRef}>\n {!isNonModal && <Underlay isTransparent {...underlayProps} isOpen={isOpen} /> }\n <div\n {...styleProps}\n {...popoverProps}\n style={{\n ...styleProps.style,\n ...popoverProps.style\n }}\n ref={ref}\n className={\n classNames(\n styles,\n 'spectrum-Popover',\n `spectrum-Popover--${placement}`,\n {\n 'spectrum-Popover--withTip': !hideArrow,\n 'is-open': isOpen\n },\n classNames(\n overrideStyles,\n 'spectrum-Popover',\n 'react-spectrum-Popover'\n ),\n styleProps.className\n )\n }\n role=\"presentation\"\n data-testid=\"popover\">\n {!isNonModal && <DismissButton onDismiss={state.close} />}\n {children}\n {hideArrow ? null : (\n <Arrow\n arrowProps={arrowProps}\n isLandscape={arrowPlacement[placement] === 'bottom'}\n arrowRef={arrowRef}\n primary={primary}\n secondary={secondary}\n borderDiagonal={borderDiagonal} />\n )}\n <DismissButton onDismiss={state.close} />\n </div>\n </div>\n );\n});\n\nfunction usePopoverBorderRadius(popoverRef: RefObject<HTMLDivElement>) {\n let [borderRadius, setBorderRadius] = useState(0);\n useLayoutEffect(() => {\n if (popoverRef.current) {\n let spectrumBorderRadius = window.getComputedStyle(popoverRef.current).borderRadius;\n if (spectrumBorderRadius !== '') {\n setBorderRadius(parseInt(spectrumBorderRadius, 10));\n }\n }\n }, [popoverRef]);\n return borderRadius;\n}\n\nfunction useArrowSize() {\n let [size, setSize] = useState(20);\n let [borderWidth, setBorderWidth] = useState(1);\n let arrowRef = useRef<SVGSVGElement>(null);\n // get the css value for the tip size and divide it by 2 for this arrow implementation\n useLayoutEffect(() => {\n if (arrowRef.current) {\n let spectrumTipWidth = window.getComputedStyle(arrowRef.current)\n .getPropertyValue('--spectrum-popover-tip-size');\n if (spectrumTipWidth !== '') {\n setSize(parseInt(spectrumTipWidth, 10) / 2);\n }\n\n let spectrumBorderWidth = window.getComputedStyle(arrowRef.current)\n .getPropertyValue('--spectrum-popover-tip-borderWidth');\n if (spectrumBorderWidth !== '') {\n setBorderWidth(parseInt(spectrumBorderWidth, 10));\n }\n }\n }, []);\n return {size, borderWidth, arrowRef};\n}\n\nfunction Arrow(props: ArrowProps) {\n let {primary, secondary, isLandscape, arrowProps, borderDiagonal, arrowRef} = props;\n let halfBorderDiagonal = borderDiagonal / 2;\n\n let primaryStart = 0;\n let primaryEnd = primary - halfBorderDiagonal;\n\n let secondaryStart = halfBorderDiagonal;\n let secondaryMiddle = secondary / 2;\n let secondaryEnd = secondary - halfBorderDiagonal;\n\n let pathData = isLandscape ? [\n 'M', secondaryStart, primaryStart,\n 'L', secondaryMiddle, primaryEnd,\n 'L', secondaryEnd, primaryStart\n ] : [\n 'M', primaryStart, secondaryStart,\n 'L', primaryEnd, secondaryMiddle,\n 'L', primaryStart, secondaryEnd\n ];\n\n /* use ceil because the svg needs to always accommodate the path inside it */\n return (\n <svg\n xmlns=\"http://www.w3.org/svg/2000\"\n width={Math.ceil(isLandscape ? secondary : primary)}\n height={Math.ceil(isLandscape ? primary : secondary)}\n className={classNames(styles, 'spectrum-Popover-tip')}\n ref={arrowRef}\n {...arrowProps}>\n <path className={classNames(styles, 'spectrum-Popover-tip-triangle')} d={pathData.join(' ')} />\n </svg>\n );\n}\n\nlet _Popover = forwardRef(Popover);\nexport {_Popover as Popover};\n\n/**\n * More explanation on popover tips.\n * - I tried changing the calculation of the popover placement in an effort to get it squarely onto the pixel grid.\n * This did not work because the problem was in the svg partial pixel end of the path in the popover right and popover bottom.\n * - I tried creating an extra 'bandaid' path that matched the background color and would overlap the popover border.\n * This didn't work because the border on the svg triangle didn't extend all the way to match nicely with the popover border.\n * - I tried getting the client bounding box and setting the svg to that partial pixel value\n * This didn't work because again the issue was inside the svg\n * - I didn't try drawing the svg backwards\n * This could still be tried\n * - I tried changing the calculation of the popover placement AND the svg height/width so that they were all rounded\n * This seems to have done the trick.\n */\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n.spectrum-Popover {\n /* This makes the contents of popovers focusable immediately, without waiting\n a frame for animations to start. */\n &.react-spectrum-Popover {\n visibility: visible;\n }\n\n .spectrum-Dialog-content {\n max-height: initial;\n }\n}\n\n.spectrum-Modal-wrapper.react-spectrum-Modal-wrapper,\n.spectrum-Modal.react-spectrum-Modal {\n visibility: visible;\n}\n\n.spectrum-Tray.react-spectrum-Tray {\n visibility: visible;\n}\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n@import './index.css';\n@import './skin.css';\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {classNames} from '@react-spectrum/utils';\nimport React from 'react';\nimport underlayStyles from '@adobe/spectrum-css-temp/components/underlay/vars.css';\n\ninterface UnderlayProps {\n isOpen?: boolean,\n isTransparent?: boolean\n}\n\nexport function Underlay({isOpen, isTransparent}: UnderlayProps) {\n return (\n <div className={classNames(underlayStyles, 'spectrum-Underlay', {'is-open': isOpen, 'spectrum-Underlay--transparent': isTransparent})} />\n );\n}\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n@import './index.css';\n@import './skin.css';\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {AriaModalOverlayProps, useModalOverlay} from '@react-aria/overlays';\nimport {classNames, useDOMRef, useStyleProps} from '@react-spectrum/utils';\nimport {DOMRef, StyleProps} from '@react-types/shared';\nimport modalStyles from '@adobe/spectrum-css-temp/components/modal/vars.css';\nimport {Overlay} from './Overlay';\nimport {OverlayProps} from '@react-types/overlays';\nimport {OverlayTriggerState} from '@react-stately/overlays';\nimport overrideStyles from './overlays.css';\nimport React, {forwardRef, MutableRefObject, ReactNode, RefObject, useRef} from 'react';\nimport {Underlay} from './Underlay';\nimport {useViewportSize} from '@react-aria/utils';\n\ninterface ModalProps extends AriaModalOverlayProps, StyleProps, Omit<OverlayProps, 'nodeRef' | 'shouldContainFocus'> {\n children: ReactNode,\n state: OverlayTriggerState,\n type?: 'modal' | 'fullscreen' | 'fullscreenTakeover'\n}\n\ninterface ModalWrapperProps extends ModalProps {\n isOpen?: boolean,\n wrapperRef: MutableRefObject<HTMLDivElement>\n}\n\nfunction Modal(props: ModalProps, ref: DOMRef<HTMLDivElement>) {\n let {children, state, ...otherProps} = props;\n let domRef = useDOMRef(ref);\n let wrapperRef = useRef<HTMLDivElement>(null);\n\n return (\n <Overlay {...otherProps} isOpen={state.isOpen} nodeRef={wrapperRef}>\n <ModalWrapper {...props} wrapperRef={wrapperRef} ref={domRef}>\n {children}\n </ModalWrapper>\n </Overlay>\n );\n}\n\nlet typeMap = {\n fullscreen: 'fullscreen',\n fullscreenTakeover: 'fullscreenTakeover'\n};\n\nlet ModalWrapper = forwardRef(function (props: ModalWrapperProps, ref: RefObject<HTMLDivElement>) {\n let {type, children, state, isOpen, wrapperRef} = props;\n let typeVariant = typeMap[type];\n let {styleProps} = useStyleProps(props);\n let {modalProps, underlayProps} = useModalOverlay(props, state, ref);\n\n let wrapperClassName = classNames(\n modalStyles,\n 'spectrum-Modal-wrapper',\n classNames(\n overrideStyles,\n 'spectrum-Modal-wrapper',\n 'react-spectrum-Modal-wrapper'\n )\n );\n\n let modalClassName = classNames(\n modalStyles,\n 'spectrum-Modal',\n {\n 'is-open': isOpen\n },\n classNames(\n overrideStyles,\n 'spectrum-Modal',\n 'react-spectrum-Modal'\n ),\n {[`spectrum-Modal--${typeVariant}`]: typeVariant},\n styleProps.className\n );\n\n let viewport = useViewportSize();\n let style: any = {\n '--spectrum-visual-viewport-height': viewport.height + 'px'\n };\n\n // Attach Transition's nodeRef to outer most wrapper for node.reflow: https://github.com/reactjs/react-transition-group/blob/c89f807067b32eea6f68fd6c622190d88ced82e2/src/Transition.js#L231\n return (\n <div ref={wrapperRef}>\n <Underlay {...underlayProps} isOpen={isOpen} />\n <div className={wrapperClassName} style={style}>\n <div\n {...styleProps}\n {...modalProps}\n ref={ref}\n className={modalClassName}\n data-testid=\"modal\">\n {children}\n </div>\n </div>\n </div>\n );\n});\n\nlet _Modal = forwardRef(Modal);\nexport {_Modal as Modal};\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n@import './index.css';\n@import './skin.css';\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {AriaModalOverlayProps, DismissButton, useModalOverlay} from '@react-aria/overlays';\nimport {classNames, useDOMRef, useStyleProps} from '@react-spectrum/utils';\nimport {DOMRef, StyleProps} from '@react-types/shared';\nimport {Overlay} from './Overlay';\nimport {OverlayProps} from '@react-types/overlays';\nimport {OverlayTriggerState} from '@react-stately/overlays';\nimport overrideStyles from './overlays.css';\nimport React, {forwardRef, MutableRefObject, ReactNode, RefObject, useRef} from 'react';\nimport trayStyles from '@adobe/spectrum-css-temp/components/tray/vars.css';\nimport {Underlay} from './Underlay';\nimport {useViewportSize} from '@react-aria/utils';\n\ninterface TrayProps extends AriaModalOverlayProps, StyleProps, Omit<OverlayProps, 'nodeRef' | 'shouldContainFocus'> {\n children: ReactNode,\n state: OverlayTriggerState,\n isFixedHeight?: boolean\n}\n\ninterface TrayWrapperProps extends TrayProps {\n isOpen?: boolean,\n wrapperRef: MutableRefObject<HTMLDivElement>\n}\n\nfunction Tray(props: TrayProps, ref: DOMRef<HTMLDivElement>) {\n let {children, state, ...otherProps} = props;\n let domRef = useDOMRef(ref);\n let wrapperRef = useRef<HTMLDivElement>(null);\n\n return (\n <Overlay {...otherProps} isOpen={state.isOpen} nodeRef={wrapperRef}>\n <TrayWrapper {...props} wrapperRef={wrapperRef} ref={domRef}>\n {children}\n </TrayWrapper>\n </Overlay>\n );\n}\n\nlet TrayWrapper = forwardRef(function (props: TrayWrapperProps, ref: RefObject<HTMLDivElement>) {\n let {\n children,\n isOpen,\n isFixedHeight,\n state,\n wrapperRef\n } = props;\n let {styleProps} = useStyleProps(props);\n\n let {modalProps, underlayProps} = useModalOverlay({\n ...props,\n isDismissable: true\n }, state, ref);\n\n // We need to measure the window's height in JS rather than using percentages in CSS\n // so that contents (e.g. menu) can inherit the max-height properly. Using percentages\n // does not work properly because there is nothing to base the percentage on.\n // We cannot use vh units because mobile browsers adjust the window height dynamically\n // when the address bar/bottom toolbars show and hide on scroll and vh units are fixed.\n // Also, the visual viewport is smaller than the layout viewport when the virtual keyboard\n // is up, so use the VisualViewport API to ensure the tray is displayed above the keyboard.\n let viewport = useViewportSize();\n let wrapperStyle: any = {\n '--spectrum-visual-viewport-height': viewport.height + 'px'\n };\n\n let wrapperClassName = classNames(\n trayStyles,\n 'spectrum-Tray-wrapper'\n );\n\n let className = classNames(\n trayStyles,\n 'spectrum-Tray',\n {\n 'is-open': isOpen,\n 'spectrum-Tray--fixedHeight': isFixedHeight\n },\n classNames(\n overrideStyles,\n 'spectrum-Tray',\n 'react-spectrum-Tray'\n ),\n styleProps.className\n );\n\n // Attach Transition's nodeRef to outer most wrapper for node.reflow: https://github.com/reactjs/react-transition-group/blob/c89f807067b32eea6f68fd6c622190d88ced82e2/src/Transition.js#L231\n return (\n <div ref={wrapperRef}>\n <Underlay {...underlayProps} isOpen={isOpen} />\n <div className={wrapperClassName} style={wrapperStyle}>\n <div\n {...styleProps}\n {...modalProps}\n className={className}\n ref={ref}\n data-testid=\"tray\">\n <DismissButton onDismiss={state.close} />\n {children}\n <DismissButton onDismiss={state.close} />\n </div>\n </div>\n </div>\n );\n});\n\nlet _Tray = forwardRef(Tray);\nexport {_Tray as Tray};\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n@import './index.css';\n@import './skin.css';\n"],"names":[],"version":3,"file":"module.js.map"}
package/dist/types.d.ts CHANGED
@@ -23,13 +23,13 @@ interface PopoverProps extends Omit<AriaPopoverProps, 'popoverRef' | 'maxHeight'
23
23
  state: OverlayTriggerState;
24
24
  }
25
25
  export let Popover: React.ForwardRefExoticComponent<PopoverProps & React.RefAttributes<import("@react-types/shared").DOMRefValue<HTMLDivElement>>>;
26
- interface ModalProps extends AriaModalOverlayProps, StyleProps, Omit<OverlayProps, 'nodeRef'> {
26
+ interface ModalProps extends AriaModalOverlayProps, StyleProps, Omit<OverlayProps, 'nodeRef' | 'shouldContainFocus'> {
27
27
  children: ReactNode;
28
28
  state: OverlayTriggerState;
29
29
  type?: 'modal' | 'fullscreen' | 'fullscreenTakeover';
30
30
  }
31
31
  export let Modal: React.ForwardRefExoticComponent<ModalProps & React.RefAttributes<import("@react-types/shared").DOMRefValue<HTMLDivElement>>>;
32
- interface TrayProps extends AriaModalOverlayProps, StyleProps, Omit<OverlayProps, 'nodeRef'> {
32
+ interface TrayProps extends AriaModalOverlayProps, StyleProps, Omit<OverlayProps, 'nodeRef' | 'shouldContainFocus'> {
33
33
  children: ReactNode;
34
34
  state: OverlayTriggerState;
35
35
  isFixedHeight?: boolean;
package/dist/types.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"mappings":";;;;;AAoBA;;;;;;;;;;;GAWG;AAEH,+BAA+B,KAAK,KAAA,OAWnC;ACoBD,OAAA,IAAI,uIAAoC,CAAC;AEzCzC,sBAAuB,SAAQ,IAAI,CAAC,gBAAgB,EAAE,YAAY,GAAG,WAAW,CAAC,EAAE,UAAU;IAC3F,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,EAAE,mBAAmB,CAAA;CAC3B;AAmKD,OAAA,IAAI,uIAA8B,CAAC;ACtKnC,oBAAqB,SAAQ,qBAAqB,EAAE,UAAU,EAAE,IAAI,CAAC,YAAY,EAAE,SAAS,CAAC;IAC3F,QAAQ,EAAE,SAAS,CAAC;IACpB,KAAK,EAAE,mBAAmB,CAAC;IAC3B,IAAI,CAAC,EAAE,OAAO,GAAG,YAAY,GAAG,oBAAoB,CAAA;CACrD;AAgFD,OAAA,IAAI,mIAA0B,CAAC;ACpF/B,mBAAoB,SAAQ,qBAAqB,EAAE,UAAU,EAAE,IAAI,CAAC,YAAY,EAAE,SAAS,CAAC;IAC1F,QAAQ,EAAE,SAAS,CAAC;IACpB,KAAK,EAAE,mBAAmB,CAAC;IAC3B,aAAa,CAAC,EAAE,OAAO,CAAA;CACxB;AAwFD,OAAA,IAAI,iIAAwB,CAAC","sources":["packages/@react-spectrum/overlays/src/packages/@react-spectrum/overlays/src/OpenTransition.tsx","packages/@react-spectrum/overlays/src/packages/@react-spectrum/overlays/src/Overlay.tsx","packages/@react-spectrum/overlays/src/packages/@react-spectrum/overlays/src/Underlay.tsx","packages/@react-spectrum/overlays/src/packages/@react-spectrum/overlays/src/Popover.tsx","packages/@react-spectrum/overlays/src/packages/@react-spectrum/overlays/src/Modal.tsx","packages/@react-spectrum/overlays/src/packages/@react-spectrum/overlays/src/Tray.tsx","packages/@react-spectrum/overlays/src/packages/@react-spectrum/overlays/src/index.ts","packages/@react-spectrum/overlays/src/index.ts"],"sourcesContent":[null,null,null,null,null,null,null,"/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n/// <reference types=\"css-module-types\" />\n\nexport {Overlay} from './Overlay';\nexport {Popover} from './Popover';\nexport {Modal} from './Modal';\nexport {Tray} from './Tray';\nexport {OpenTransition} from './OpenTransition';\n"],"names":[],"version":3,"file":"types.d.ts.map"}
1
+ {"mappings":";;;;;AAoBA;;;;;;;;;;;GAWG;AAEH,+BAA+B,KAAK,KAAA,OAWnC;ACoBD,OAAA,IAAI,uIAAoC,CAAC;AEzCzC,sBAAuB,SAAQ,IAAI,CAAC,gBAAgB,EAAE,YAAY,GAAG,WAAW,CAAC,EAAE,UAAU;IAC3F,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,EAAE,mBAAmB,CAAA;CAC3B;AA+LD,OAAA,IAAI,uIAA8B,CAAC;AClMnC,oBAAqB,SAAQ,qBAAqB,EAAE,UAAU,EAAE,IAAI,CAAC,YAAY,EAAE,SAAS,GAAG,oBAAoB,CAAC;IAClH,QAAQ,EAAE,SAAS,CAAC;IACpB,KAAK,EAAE,mBAAmB,CAAC;IAC3B,IAAI,CAAC,EAAE,OAAO,GAAG,YAAY,GAAG,oBAAoB,CAAA;CACrD;AAgFD,OAAA,IAAI,mIAA0B,CAAC;ACpF/B,mBAAoB,SAAQ,qBAAqB,EAAE,UAAU,EAAE,IAAI,CAAC,YAAY,EAAE,SAAS,GAAG,oBAAoB,CAAC;IACjH,QAAQ,EAAE,SAAS,CAAC;IACpB,KAAK,EAAE,mBAAmB,CAAC;IAC3B,aAAa,CAAC,EAAE,OAAO,CAAA;CACxB;AAwFD,OAAA,IAAI,iIAAwB,CAAC","sources":["packages/@react-spectrum/overlays/src/packages/@react-spectrum/overlays/src/OpenTransition.tsx","packages/@react-spectrum/overlays/src/packages/@react-spectrum/overlays/src/Overlay.tsx","packages/@react-spectrum/overlays/src/packages/@react-spectrum/overlays/src/Underlay.tsx","packages/@react-spectrum/overlays/src/packages/@react-spectrum/overlays/src/Popover.tsx","packages/@react-spectrum/overlays/src/packages/@react-spectrum/overlays/src/Modal.tsx","packages/@react-spectrum/overlays/src/packages/@react-spectrum/overlays/src/Tray.tsx","packages/@react-spectrum/overlays/src/packages/@react-spectrum/overlays/src/index.ts","packages/@react-spectrum/overlays/src/index.ts"],"sourcesContent":[null,null,null,null,null,null,null,"/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n/// <reference types=\"css-module-types\" />\n\nexport {Overlay} from './Overlay';\nexport {Popover} from './Popover';\nexport {Modal} from './Modal';\nexport {Tray} from './Tray';\nexport {OpenTransition} from './OpenTransition';\n"],"names":[],"version":3,"file":"types.d.ts.map"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@react-spectrum/overlays",
3
- "version": "5.0.0",
3
+ "version": "5.1.1",
4
4
  "description": "Spectrum UI components in React",
5
5
  "license": "Apache-2.0",
6
6
  "main": "dist/main.js",
@@ -36,12 +36,12 @@
36
36
  "url": "https://github.com/adobe/react-spectrum"
37
37
  },
38
38
  "dependencies": {
39
- "@react-aria/overlays": "^3.13.0",
40
- "@react-aria/utils": "^3.15.0",
41
- "@react-spectrum/utils": "^3.9.0",
42
- "@react-stately/overlays": "^3.5.0",
43
- "@react-types/overlays": "^3.7.0",
44
- "@react-types/shared": "^3.17.0",
39
+ "@react-aria/overlays": "^3.14.1",
40
+ "@react-aria/utils": "^3.17.0",
41
+ "@react-spectrum/utils": "^3.9.2",
42
+ "@react-stately/overlays": "^3.5.2",
43
+ "@react-types/overlays": "^3.7.2",
44
+ "@react-types/shared": "^3.18.1",
45
45
  "@swc/helpers": "^0.4.14",
46
46
  "react-transition-group": "^4.4.5"
47
47
  },
@@ -56,5 +56,5 @@
56
56
  "publishConfig": {
57
57
  "access": "public"
58
58
  },
59
- "gitHead": "a0efee84aa178cb1a202951dfd6d8de02b292307"
59
+ "gitHead": "5911ed21de4b76d66f6254c02302519e02d50e16"
60
60
  }
package/src/Modal.tsx CHANGED
@@ -22,7 +22,7 @@ import React, {forwardRef, MutableRefObject, ReactNode, RefObject, useRef} from
22
22
  import {Underlay} from './Underlay';
23
23
  import {useViewportSize} from '@react-aria/utils';
24
24
 
25
- interface ModalProps extends AriaModalOverlayProps, StyleProps, Omit<OverlayProps, 'nodeRef'> {
25
+ interface ModalProps extends AriaModalOverlayProps, StyleProps, Omit<OverlayProps, 'nodeRef' | 'shouldContainFocus'> {
26
26
  children: ReactNode,
27
27
  state: OverlayTriggerState,
28
28
  type?: 'modal' | 'fullscreen' | 'fullscreenTakeover'
package/src/Popover.tsx CHANGED
@@ -10,7 +10,7 @@
10
10
  * governing permissions and limitations under the License.
11
11
  */
12
12
 
13
- import {AriaPopoverProps, DismissButton, usePopover} from '@react-aria/overlays';
13
+ import {AriaPopoverProps, DismissButton, PopoverAria, usePopover} from '@react-aria/overlays';
14
14
  import {classNames, useDOMRef, useStyleProps} from '@react-spectrum/utils';
15
15
  import {DOMRef, StyleProps} from '@react-types/shared';
16
16
  import {Overlay} from './Overlay';
@@ -32,6 +32,15 @@ interface PopoverWrapperProps extends PopoverProps {
32
32
  wrapperRef: MutableRefObject<HTMLDivElement>
33
33
  }
34
34
 
35
+ interface ArrowProps {
36
+ arrowProps: PopoverAria['arrowProps'],
37
+ isLandscape: boolean,
38
+ arrowRef?: RefObject<SVGSVGElement>,
39
+ primary: number,
40
+ secondary: number,
41
+ borderDiagonal: number
42
+ }
43
+
35
44
  /**
36
45
  * Arrow placement can be done pointing right or down because those paths start at 0, x or y. Because the
37
46
  * other two don't, they start at a fractional pixel value, it introduces rounding differences between browsers and
@@ -75,13 +84,20 @@ const PopoverWrapper = forwardRef((props: PopoverWrapperProps, ref: RefObject<HT
75
84
  } = props;
76
85
  let {styleProps} = useStyleProps(props);
77
86
 
87
+ let {size, borderWidth, arrowRef} = useArrowSize();
88
+ const borderRadius = usePopoverBorderRadius(ref);
89
+ let borderDiagonal = borderWidth * Math.SQRT2;
90
+ let primary = size + borderDiagonal;
91
+ let secondary = primary * 2;
78
92
  let {popoverProps, arrowProps, underlayProps, placement} = usePopover({
79
93
  ...props,
80
94
  popoverRef: ref,
81
- maxHeight: null
95
+ maxHeight: null,
96
+ arrowSize: hideArrow ? 0 : secondary,
97
+ arrowBoundaryOffset: borderRadius
82
98
  }, state);
83
99
 
84
- // Attach Transition's nodeRef to outer most wrapper for node.reflow: https://github.com/reactjs/react-transition-group/blob/c89f807067b32eea6f68fd6c622190d88ced82e2/src/Transition.js#L231
100
+ // Attach Transition's nodeRef to outermost wrapper for node.reflow: https://github.com/reactjs/react-transition-group/blob/c89f807067b32eea6f68fd6c622190d88ced82e2/src/Transition.js#L231
85
101
  return (
86
102
  <div ref={wrapperRef}>
87
103
  {!isNonModal && <Underlay isTransparent {...underlayProps} isOpen={isOpen} /> }
@@ -115,7 +131,13 @@ const PopoverWrapper = forwardRef((props: PopoverWrapperProps, ref: RefObject<HT
115
131
  {!isNonModal && <DismissButton onDismiss={state.close} />}
116
132
  {children}
117
133
  {hideArrow ? null : (
118
- <Arrow arrowProps={arrowProps} direction={arrowPlacement[placement]} />
134
+ <Arrow
135
+ arrowProps={arrowProps}
136
+ isLandscape={arrowPlacement[placement] === 'bottom'}
137
+ arrowRef={arrowRef}
138
+ primary={primary}
139
+ secondary={secondary}
140
+ borderDiagonal={borderDiagonal} />
119
141
  )}
120
142
  <DismissButton onDismiss={state.close} />
121
143
  </div>
@@ -123,46 +145,54 @@ const PopoverWrapper = forwardRef((props: PopoverWrapperProps, ref: RefObject<HT
123
145
  );
124
146
  });
125
147
 
126
- let ROOT_2 = Math.sqrt(2);
148
+ function usePopoverBorderRadius(popoverRef: RefObject<HTMLDivElement>) {
149
+ let [borderRadius, setBorderRadius] = useState(0);
150
+ useLayoutEffect(() => {
151
+ if (popoverRef.current) {
152
+ let spectrumBorderRadius = window.getComputedStyle(popoverRef.current).borderRadius;
153
+ if (spectrumBorderRadius !== '') {
154
+ setBorderRadius(parseInt(spectrumBorderRadius, 10));
155
+ }
156
+ }
157
+ }, [popoverRef]);
158
+ return borderRadius;
159
+ }
127
160
 
128
- function Arrow(props) {
161
+ function useArrowSize() {
129
162
  let [size, setSize] = useState(20);
130
163
  let [borderWidth, setBorderWidth] = useState(1);
131
- let ref = useRef();
164
+ let arrowRef = useRef<SVGSVGElement>(null);
132
165
  // get the css value for the tip size and divide it by 2 for this arrow implementation
133
166
  useLayoutEffect(() => {
134
- if (ref.current) {
135
- let spectrumTipWidth = window.getComputedStyle(ref.current)
167
+ if (arrowRef.current) {
168
+ let spectrumTipWidth = window.getComputedStyle(arrowRef.current)
136
169
  .getPropertyValue('--spectrum-popover-tip-size');
137
170
  if (spectrumTipWidth !== '') {
138
171
  setSize(parseInt(spectrumTipWidth, 10) / 2);
139
172
  }
140
173
 
141
- let spectrumBorderWidth = window.getComputedStyle(ref.current)
174
+ let spectrumBorderWidth = window.getComputedStyle(arrowRef.current)
142
175
  .getPropertyValue('--spectrum-popover-tip-borderWidth');
143
176
  if (spectrumBorderWidth !== '') {
144
177
  setBorderWidth(parseInt(spectrumBorderWidth, 10));
145
178
  }
146
179
  }
147
- }, [ref]);
148
-
149
- let landscape = props.direction === 'top' || props.direction === 'bottom';
150
- let mirror = props.direction === 'left' || props.direction === 'top';
180
+ }, []);
181
+ return {size, borderWidth, arrowRef};
182
+ }
151
183
 
152
- let borderDiagonal = borderWidth * ROOT_2;
184
+ function Arrow(props: ArrowProps) {
185
+ let {primary, secondary, isLandscape, arrowProps, borderDiagonal, arrowRef} = props;
153
186
  let halfBorderDiagonal = borderDiagonal / 2;
154
187
 
155
- let secondary = 2 * size + 2 * borderDiagonal;
156
- let primary = size + borderDiagonal;
157
-
158
- let primaryStart = mirror ? primary : 0;
159
- let primaryEnd = mirror ? halfBorderDiagonal : primary - halfBorderDiagonal;
188
+ let primaryStart = 0;
189
+ let primaryEnd = primary - halfBorderDiagonal;
160
190
 
161
191
  let secondaryStart = halfBorderDiagonal;
162
192
  let secondaryMiddle = secondary / 2;
163
193
  let secondaryEnd = secondary - halfBorderDiagonal;
164
194
 
165
- let pathData = landscape ? [
195
+ let pathData = isLandscape ? [
166
196
  'M', secondaryStart, primaryStart,
167
197
  'L', secondaryMiddle, primaryEnd,
168
198
  'L', secondaryEnd, primaryStart
@@ -171,17 +201,15 @@ function Arrow(props) {
171
201
  'L', primaryEnd, secondaryMiddle,
172
202
  'L', primaryStart, secondaryEnd
173
203
  ];
174
- let arrowProps = props.arrowProps;
175
204
 
176
- /* use ceil because the svg needs to always accomodate the path inside it */
205
+ /* use ceil because the svg needs to always accommodate the path inside it */
177
206
  return (
178
207
  <svg
179
208
  xmlns="http://www.w3.org/svg/2000"
180
- width={Math.ceil(landscape ? secondary : primary)}
181
- height={Math.ceil(landscape ? primary : secondary)}
182
- style={props.style}
209
+ width={Math.ceil(isLandscape ? secondary : primary)}
210
+ height={Math.ceil(isLandscape ? primary : secondary)}
183
211
  className={classNames(styles, 'spectrum-Popover-tip')}
184
- ref={ref}
212
+ ref={arrowRef}
185
213
  {...arrowProps}>
186
214
  <path className={classNames(styles, 'spectrum-Popover-tip-triangle')} d={pathData.join(' ')} />
187
215
  </svg>
package/src/Tray.tsx CHANGED
@@ -22,7 +22,7 @@ import trayStyles from '@adobe/spectrum-css-temp/components/tray/vars.css';
22
22
  import {Underlay} from './Underlay';
23
23
  import {useViewportSize} from '@react-aria/utils';
24
24
 
25
- interface TrayProps extends AriaModalOverlayProps, StyleProps, Omit<OverlayProps, 'nodeRef'> {
25
+ interface TrayProps extends AriaModalOverlayProps, StyleProps, Omit<OverlayProps, 'nodeRef' | 'shouldContainFocus'> {
26
26
  children: ReactNode,
27
27
  state: OverlayTriggerState,
28
28
  isFixedHeight?: boolean