box-content-preview 3.103.0 → 3.104.0

package/README.md

@@ -2,7 +2,7 @@
 [![Mergify Status](https://img.shields.io/endpoint.svg?url=https://gh.mergify.io/badges/box/box-content-preview&style=flat)](https://mergify.io)
 [![Styled With Prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)
 [![build status](https://img.shields.io/travis/box/box-content-preview/master.svg?style=flat-square)](https://travis-ci.org/box/box-content-preview)
-[![version](https://img.shields.io/badge/version-v3.103.0-blue.svg?style=flat-square)](https://github.com/box/box-content-preview)
+[![version](https://img.shields.io/badge/version-v3.104.0-blue.svg?style=flat-square)](https://github.com/box/box-content-preview)
 [![npm version](https://img.shields.io/npm/v/box-ui-elements.svg?style=flat-square)](https://www.npmjs.com/package/box-ui-elements)
 
 # [Box Content Preview](https://developer.box.com/docs/box-content-preview)
@@ -22,11 +22,11 @@ We encourage all users to update their applications to utilize modern browsers f
 
 ## Current Version
 
-- Version: v3.103.0
+- Version: v3.104.0
 - Locale: en-US
 
-https://cdn01.boxcdn.net/platform/preview/3.103.0/en-US/preview.js
-https://cdn01.boxcdn.net/platform/preview/3.103.0/en-US/preview.css
+https://cdn01.boxcdn.net/platform/preview/3.104.0/en-US/preview.js
+https://cdn01.boxcdn.net/platform/preview/3.104.0/en-US/preview.css
 
 ## Supported Locales
 
@@ -52,10 +52,10 @@ You can self-host the Box Content Preview library or reference the versions avai
     <title>Box Content Preview Demo</title>
 
     <!-- Latest version of Preview SDK for your locale -->
-    <script src="https://cdn01.boxcdn.net/platform/preview/3.103.0/en-US/preview.js"></script>
+    <script src="https://cdn01.boxcdn.net/platform/preview/3.104.0/en-US/preview.js"></script>
     <link
       rel="stylesheet"
-      href="https://cdn01.boxcdn.net/platform/preview/3.103.0/en-US/preview.css"
+      href="https://cdn01.boxcdn.net/platform/preview/3.104.0/en-US/preview.css"
     />
   </head>
   <body>
@@ -76,7 +76,7 @@ To self-host the Box Content Preview library, follow these steps:
 
 1. Either fork the repo and check out the version you want to host or download the specific version as a zip:
 
-- Check out a specific version with `git checkout v3.103.0`
+- Check out a specific version with `git checkout v3.104.0`
 - Download a specific version as a zip from https://github.com/box/box-content-preview/releases
 
 2. Install dependencies and build the library with `yarn install && yarn build:i18n && yarn build:prod`

package/dist/lib/index.js

@@ -1029,7 +1029,7 @@ function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e =
 const CLIENT_NAME = "box-content-preview"; // eslint-disable-line no-undef
 const CLIENT_NAME_KEY = 'box_client_name';
 const CLIENT_VERSION_KEY = 'box_client_version';
-const CLIENT_VERSION = "3.103.0"; // eslint-disable-line no-undef
+const CLIENT_VERSION = "3.104.0"; // eslint-disable-line no-undef
 const HEADER_CLIENT_NAME = 'X-Box-Client-Name';
 const HEADER_CLIENT_VERSION = 'X-Box-Client-Version';
 const PROMISE_MAP = {};
@@ -3079,12 +3079,16 @@ function useAttention() {
     setHovered(false);
   };
   const handleMouseOver = () => setHovered(true);
+  const reset = external_react_.useCallback(() => {
+    setFocused(false);
+    setHovered(false);
+  }, []);
   return [isFocused || isHovered, {
     onBlur: handleBlur,
     onFocus: handleFocus,
     onMouseOut: handleMouseOut,
     onMouseOver: handleMouseOver
-  }];
+  }, reset];
 }
 ;// ./src/lib/viewers/controls/media/VolumeControls.scss
 // extracted by mini-css-extract-plugin
@@ -3316,14 +3320,17 @@ function VolumeControls({
   onVolumeChange,
   volume = 1
 }) {
-  const [isActive, handlers] = useAttention();
+  const [isActive, handlers, resetAttention] = useAttention();
+  const [isPinned, setPinned] = (0,external_react_.useState)(false);
   const [isRevealed, setIsRevealed] = (0,external_react_.useState)(false);
+  const wasFlyoutOpenOnPointerDownRef = (0,external_react_.useRef)(true); // first tap on the speaker pins the flyout instead of muting
+  const volumeControlElRef = (0,external_react_.useRef)(null); // root; outside pointerdown unpins the flyout
   const revealTimerRef = (0,external_react_.useRef)(0);
   const isMuted = !volume;
   const Icon = isMuted ? icons_IconVolumeMuted24 : getIcon(volume);
   const title = isMuted ? "Unmute" : "Mute";
   const value = Math.round(volume * 100);
-  const isOpen = isActive || isRevealed;
+  const isOpen = isActive || isRevealed || isPinned;
   (0,external_react_.useEffect)(() => {
     if (!keyboardVolumeStep) {
       return;
@@ -3336,6 +3343,24 @@ function VolumeControls({
     }, VOLUME_FLYOUT_DISMISS_MS);
   }, [keyboardVolumeStep]);
   (0,external_react_.useEffect)(() => () => window.clearTimeout(revealTimerRef.current), []);
+  (0,external_react_.useEffect)(() => {
+    if (!isPinned) {
+      return undefined;
+    }
+    const closeIfOutside = event => {
+      const volumeControlEl = volumeControlElRef.current;
+      if (!volumeControlEl || volumeControlEl.contains(event.target)) {
+        return;
+      }
+      setPinned(false);
+      resetAttention();
+      window.clearTimeout(revealTimerRef.current);
+      revealTimerRef.current = 0;
+      setIsRevealed(false);
+    };
+    document.addEventListener('pointerdown', closeIfOutside);
+    return () => document.removeEventListener('pointerdown', closeIfOutside);
+  }, [isPinned, resetAttention]);
   const handleVolume = (0,external_react_.useCallback)(newValue => {
     const newValueToUse = newValue <= 5 ? 0 : newValue;
     // make sure the value is always between 0 and 1 since the value passed in could be
@@ -3343,7 +3368,18 @@ function VolumeControls({
     const volumeToUse = Math.min(1, newValueToUse / 100);
     onVolumeChange(volumeToUse);
   }, [onVolumeChange]);
+  const handleTogglePointerDown = (0,external_react_.useCallback)(() => {
+    wasFlyoutOpenOnPointerDownRef.current = isActive || isRevealed || isPinned;
+  }, [isActive, isPinned, isRevealed]);
+  const handleToggleClick = (0,external_react_.useCallback)(() => {
+    if (!wasFlyoutOpenOnPointerDownRef.current) {
+      setPinned(true);
+      return;
+    }
+    onMuteChange(!isMuted);
+  }, [isMuted, onMuteChange]);
   return /*#__PURE__*/external_react_["default"].createElement("div", {
+    ref: volumeControlElRef,
     className: "bp-VolumeControls",
     "data-testid": "bp-volume-controls",
     onBlur: event => {
@@ -3351,6 +3387,7 @@ function VolumeControls({
       if (event.currentTarget.contains(event.relatedTarget)) {
         return;
       }
+      setPinned(false);
       window.clearTimeout(revealTimerRef.current);
       revealTimerRef.current = 0;
       setIsRevealed(false);
@@ -3361,7 +3398,8 @@ function VolumeControls({
   }, /*#__PURE__*/external_react_["default"].createElement(MediaToggle/* default */.A, {
     className: "bp-VolumeControls-toggle",
     "data-resin-target": "volumeToggle",
-    onClick: () => onMuteChange(!isMuted),
+    onClick: handleToggleClick,
+    onPointerDown: handleTogglePointerDown,
     title: title
   }, /*#__PURE__*/external_react_["default"].createElement(Icon, null)), /*#__PURE__*/external_react_["default"].createElement("div", {
     "aria-hidden": !isOpen,
@@ -25098,7 +25136,7 @@ class Browser {
 ;// ./src/lib/Logger.js
 /* eslint-disable no-undef */
 const CLIENT_NAME = "box-content-preview";
-const CLIENT_VERSION = "3.103.0";
+const CLIENT_VERSION = "3.104.0";
 /* eslint-enable no-undef */
 
 class Logger {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "box-content-preview",
-    "version": "3.103.0",
+    "version": "3.104.0",
     "description": "Box Content Preview UI Element",
     "author": "Box (https://www.box.com/)",
     "license": "SEE LICENSE IN LICENSE",