box-content-preview 3.79.0 → 3.81.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -2,7 +2,7 @@
2
2
  [![Mergify Status](https://img.shields.io/endpoint.svg?url=https://gh.mergify.io/badges/box/box-content-preview&style=flat)](https://mergify.io)
3
3
  [![Styled With Prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)
4
4
  [![build status](https://img.shields.io/travis/box/box-content-preview/master.svg?style=flat-square)](https://travis-ci.org/box/box-content-preview)
5
- [![version](https://img.shields.io/badge/version-v3.79.0-blue.svg?style=flat-square)](https://github.com/box/box-content-preview)
5
+ [![version](https://img.shields.io/badge/version-v3.81.0-blue.svg?style=flat-square)](https://github.com/box/box-content-preview)
6
6
  [![npm version](https://img.shields.io/npm/v/box-ui-elements.svg?style=flat-square)](https://www.npmjs.com/package/box-ui-elements)
7
7
 
8
8
  # [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
22
22
 
23
23
  ## Current Version
24
24
 
25
- - Version: v3.79.0
25
+ - Version: v3.81.0
26
26
  - Locale: en-US
27
27
 
28
- https://cdn01.boxcdn.net/platform/preview/3.79.0/en-US/preview.js
29
- https://cdn01.boxcdn.net/platform/preview/3.79.0/en-US/preview.css
28
+ https://cdn01.boxcdn.net/platform/preview/3.81.0/en-US/preview.js
29
+ https://cdn01.boxcdn.net/platform/preview/3.81.0/en-US/preview.css
30
30
 
31
31
  ## Supported Locales
32
32
 
@@ -52,10 +52,10 @@ You can self-host the Box Content Preview library or reference the versions avai
52
52
  <title>Box Content Preview Demo</title>
53
53
 
54
54
  <!-- Latest version of Preview SDK for your locale -->
55
- <script src="https://cdn01.boxcdn.net/platform/preview/3.79.0/en-US/preview.js"></script>
55
+ <script src="https://cdn01.boxcdn.net/platform/preview/3.81.0/en-US/preview.js"></script>
56
56
  <link
57
57
  rel="stylesheet"
58
- href="https://cdn01.boxcdn.net/platform/preview/3.79.0/en-US/preview.css"
58
+ href="https://cdn01.boxcdn.net/platform/preview/3.81.0/en-US/preview.css"
59
59
  />
60
60
  </head>
61
61
  <body>
@@ -76,7 +76,7 @@ To self-host the Box Content Preview library, follow these steps:
76
76
 
77
77
  1. Either fork the repo and check out the version you want to host or download the specific version as a zip:
78
78
 
79
- - Check out a specific version with `git checkout v3.79.0`
79
+ - Check out a specific version with `git checkout v3.81.0`
80
80
  - Download a specific version as a zip from https://github.com/box/box-content-preview/releases
81
81
 
82
82
  2. Install dependencies and build the library with `yarn install && yarn build:i18n && yarn build:prod`
@@ -81,7 +81,7 @@
81
81
  .bp-FindBarToggle{opacity:.9;transition:opacity 150ms,background-color 150ms;will-change:opacity;outline:0;display:flex;align-items:center;justify-content:center;margin:0;padding:0;color:#fff;background:transparent;border:0;border-radius:25px;cursor:pointer;-webkit-user-select:none;user-select:none;touch-action:manipulation;zoom:1}.bp-FindBarToggle:focus:not(:disabled),.bp-FindBarToggle:hover:not(:disabled){background-color:rgba(255,255,255,.08);opacity:1}.bp-FindBarToggle:focus:not(:disabled) svg,.bp-FindBarToggle:hover:not(:disabled) svg,.bp-FindBarToggle.bp-is-active svg{transform:scale(1.09);transition:transform 150ms}.bp-FindBarToggle.bp-is-active,.bp-FindBarToggle:active:not(:disabled){background-color:rgba(255,255,255,.16)}.bp-FindBarToggle.bp-is-active:focus:not(:disabled),.bp-FindBarToggle.bp-is-active:hover:not(:disabled){background-color:rgba(255,255,255,.2)}.bp-FindBarToggle:focus:not(:disabled){box-shadow:inset 0 0 0 1px rgba(211,211,211,.5),0 1px 2px rgba(0,0,0,.1)}.bp-FindBarToggle:focus-visible:not(:disabled){box-shadow:inset 0 0 0 1px rgba(211,211,211,.5),0 1px 2px rgba(0,0,0,.1)}.bp-FindBarToggle:focus:not(:focus-visible){box-shadow:none}.bp-FindBarToggle:disabled{cursor:default;opacity:.2;pointer-events:none}.bp-FindBarToggle svg{width:32px;height:32px;padding:5px}
82
82
  .bp-GalleryToggle{opacity:.9;transition:opacity 150ms,background-color 150ms;will-change:opacity;outline:0;display:flex;align-items:center;justify-content:center;margin:0;padding:0;color:#fff;background:transparent;border:0;border-radius:25px;cursor:pointer;-webkit-user-select:none;user-select:none;touch-action:manipulation;zoom:1}.bp-GalleryToggle:focus:not(:disabled),.bp-GalleryToggle:hover:not(:disabled){background-color:rgba(255,255,255,.08);opacity:1}.bp-GalleryToggle:focus:not(:disabled) svg,.bp-GalleryToggle:hover:not(:disabled) svg,.bp-GalleryToggle.bp-is-active svg{transform:scale(1.09);transition:transform 150ms}.bp-GalleryToggle.bp-is-active,.bp-GalleryToggle:active:not(:disabled){background-color:rgba(255,255,255,.16)}.bp-GalleryToggle.bp-is-active:focus:not(:disabled),.bp-GalleryToggle.bp-is-active:hover:not(:disabled){background-color:rgba(255,255,255,.2)}.bp-GalleryToggle:focus:not(:disabled){box-shadow:inset 0 0 0 1px rgba(211,211,211,.5),0 1px 2px rgba(0,0,0,.1)}.bp-GalleryToggle:focus-visible:not(:disabled){box-shadow:inset 0 0 0 1px rgba(211,211,211,.5),0 1px 2px rgba(0,0,0,.1)}.bp-GalleryToggle:focus:not(:focus-visible){box-shadow:none}.bp-GalleryToggle:disabled{cursor:default;opacity:.2;pointer-events:none}.bp-GalleryToggle svg{width:32px;height:32px;padding:5px}
83
83
  .bp-ThumbnailsToggle{opacity:.9;transition:opacity 150ms,background-color 150ms;will-change:opacity;outline:0;display:flex;align-items:center;justify-content:center;margin:0;padding:0;color:#fff;background:transparent;border:0;border-radius:25px;cursor:pointer;-webkit-user-select:none;user-select:none;touch-action:manipulation;zoom:1}.bp-ThumbnailsToggle:focus:not(:disabled),.bp-ThumbnailsToggle:hover:not(:disabled){background-color:rgba(255,255,255,.08);opacity:1}.bp-ThumbnailsToggle:focus:not(:disabled) svg,.bp-ThumbnailsToggle:hover:not(:disabled) svg,.bp-ThumbnailsToggle.bp-is-active svg{transform:scale(1.09);transition:transform 150ms}.bp-ThumbnailsToggle.bp-is-active,.bp-ThumbnailsToggle:active:not(:disabled){background-color:rgba(255,255,255,.16)}.bp-ThumbnailsToggle.bp-is-active:focus:not(:disabled),.bp-ThumbnailsToggle.bp-is-active:hover:not(:disabled){background-color:rgba(255,255,255,.2)}.bp-ThumbnailsToggle:focus:not(:disabled){box-shadow:inset 0 0 0 1px rgba(211,211,211,.5),0 1px 2px rgba(0,0,0,.1)}.bp-ThumbnailsToggle:focus-visible:not(:disabled){box-shadow:inset 0 0 0 1px rgba(211,211,211,.5),0 1px 2px rgba(0,0,0,.1)}.bp-ThumbnailsToggle:focus:not(:focus-visible){box-shadow:none}.bp-ThumbnailsToggle:disabled{cursor:default;opacity:.2;pointer-events:none}.bp-ThumbnailsToggle svg{width:32px;height:32px;padding:5px}
84
- .bp-gallery-grid{position:absolute;inset:0;z-index:4;padding:40px;padding-bottom:100px;overflow-y:auto;overscroll-behavior:none;background-color:#fff}.bp-gallery-grid-inner{--bp-gallery-hover-scale: 1.02;display:grid;grid-auto-rows:min-content;grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));gap:16px;align-items:start}.bp-gallery-tile{position:relative;padding:0;background:#f5f5f5;border:none;border-radius:12px;box-shadow:0 0 0 1px #eaeaea;cursor:pointer;transition:box-shadow .2s ease-in-out,transform .2s ease-in-out}.bp-gallery-tile:hover{box-shadow:0 0 0 3px #767676,0 4px 5px 0 rgba(0,0,0,.15);transform:translateY(-1px) scale(var(--bp-gallery-hover-scale))}.bp-gallery-tile:hover .bp-gallery-tile-badge{opacity:1}.bp-gallery-tile:focus{outline:none}.bp-gallery-tile img{display:block;width:100%;height:auto;object-fit:contain;border-radius:12px}.bp-gallery-tile--selected{box-shadow:0 0 0 3px #0061d5,0 4px 5px 0 rgba(0,0,0,.08)}.bp-gallery-tile--selected:hover,.bp-gallery-tile--selected:focus{box-shadow:0 0 0 3px #0061d5,0 4px 5px 0 rgba(0,0,0,.08)}.bp-gallery-tile--selected .bp-gallery-tile-badge{background:#0061d5;opacity:1}.bp-gallery-tile-badge{position:absolute;top:-2px;left:-2px;z-index:1;display:flex;align-items:center;justify-content:center;min-width:30px;height:26px;padding:0 4px;color:#fff;font-size:13px;line-height:1;background:#767676;border-radius:12px 0;opacity:0;transition:opacity .15s}.bp-gallery-tile-placeholder{display:block;width:100%;padding-top:129%}.bp-container:has(.bp-gallery-grid) .ba-PopupPortal{display:none}.bcpr-container:has(.bp-is-gallery-open) .bcpr-navigate-left,.bcpr-container:has(.bp-is-gallery-open) .bcpr-navigate-right{display:none}.bp .bp-is-gallery-open .bp-doc.bp-doc-document,.bp .bp-is-gallery-open .bp-doc.bp-is-scrollable{overflow:hidden}
84
+ .bp-gallery-grid{position:absolute;inset:0;z-index:4;padding:40px;padding-bottom:100px;overflow-y:auto;overscroll-behavior:none;background-color:#fff}.bp-gallery-grid-inner{--bp-gallery-hover-scale: 1.02;display:grid;grid-auto-rows:min-content;grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));gap:16px;align-items:start}.bp-gallery-grid-row{display:contents}.bp-gallery-tile{position:relative;padding:0;background:#f5f5f5;border:none;border-radius:12px;box-shadow:0 0 0 1px #eaeaea;cursor:pointer;transition:box-shadow .2s ease-in-out,transform .2s ease-in-out}.bp-gallery-tile:hover{box-shadow:0 0 0 3px #767676,0 4px 5px 0 rgba(0,0,0,.15);transform:translateY(-1px) scale(var(--bp-gallery-hover-scale))}.bp-gallery-tile:hover .bp-gallery-tile-badge{opacity:1}.bp-gallery-tile:focus{outline:none}.bp-gallery-tile img{display:block;width:100%;height:auto;object-fit:contain;border-radius:12px}.bp-gallery-tile--selected{box-shadow:0 0 0 3px #0061d5,0 4px 5px 0 rgba(0,0,0,.08)}.bp-gallery-tile--selected:hover,.bp-gallery-tile--selected:focus{box-shadow:0 0 0 3px #0061d5,0 4px 5px 0 rgba(0,0,0,.08)}.bp-gallery-tile--selected .bp-gallery-tile-badge{background:#0061d5;opacity:1}.bp-gallery-tile-badge{position:absolute;top:-2px;left:-2px;z-index:1;display:flex;align-items:center;justify-content:center;min-width:30px;height:26px;padding:0 4px;color:#fff;font-size:13px;line-height:1;background:#767676;border-radius:12px 0;opacity:0;transition:opacity .15s}.bp-gallery-tile-placeholder{display:block;width:100%;padding-top:129%}.bp-container:has(.bp-gallery-grid) .ba-PopupPortal{display:none}.bcpr-container:has(.bp-is-gallery-open) .bcpr-navigate-left,.bcpr-container:has(.bp-is-gallery-open) .bcpr-navigate-right{display:none}.bp .bp-is-gallery-open .bp-doc.bp-doc-document,.bp .bp-is-gallery-open .bp-doc.bp-is-scrollable{overflow:hidden}
85
85
  .custom-theme .bp .bp-thumbnail.bp-thumbnail-is-selected .bp-thumbnail-nav{box-shadow:0 0 0 3px #222,0 4px 5px 0 rgba(0,0,0,.08)}.custom-theme .bp .bp-thumbnail.bp-thumbnail-is-selected .bp-thumbnail-page-number{background:#222}.custom-theme .bp .bp-thumbnail.bp-thumbnail-is-selected.bp-thumbnail-image-loaded .bp-thumbnail-nav{background-color:#222}.bp .bp-ThumbnailsToggle{display:none}.bp .bp-thumbnails-container{position:absolute;top:0;bottom:0;left:0;display:none;flex:0 0 auto;width:191px}.bp .bp-thumbnails-container:focus{outline:none}.bp .bp-thumbnail{position:relative;display:flex;margin-right:20px;margin-left:20px;cursor:pointer;transition:transform .2s ease-in-out}.bp .bp-thumbnail:focus,.bp .bp-thumbnail:hover{transform:translateY(-1px) scale(1.02)}.bp .bp-thumbnail:focus .bp-thumbnail-page-number,.bp .bp-thumbnail:hover .bp-thumbnail-page-number{background:#767676;opacity:1}.bp .bp-thumbnail:focus .bp-thumbnail-nav,.bp .bp-thumbnail:hover .bp-thumbnail-nav{box-shadow:0 0 0 1px #767676,0 4px 5px 0 rgba(0,0,0,.15)}.bp .bp-thumbnail:focus.bp-thumbnail-image-loaded .bp-thumbnail-nav,.bp .bp-thumbnail:hover.bp-thumbnail-image-loaded .bp-thumbnail-nav{background-color:#767676}.bp .bp-thumbnail.bp-thumbnail-is-selected .bp-thumbnail-page-number{background:#0061d5;opacity:1}.bp .bp-thumbnail.bp-thumbnail-is-selected .bp-thumbnail-nav{box-shadow:0 0 0 3px #0061d5,0 4px 5px 0 rgba(0,0,0,.08)}.bp .bp-thumbnail.bp-thumbnail-is-selected.bp-thumbnail-image-loaded .bp-thumbnail-nav{background-color:#0061d5}.bp .bp-thumbnail:not(.bp-thumbnail-image-loaded) .bp-thumbnail-nav{background:#e8e8e8 url(assets/loading_ghost.gif) repeat-y;background-size:100% 100%}.bp .bp-thumbnail-nav{flex:0 0 150px;overflow:hidden;background-color:#d8d8d8;border-radius:6px;box-shadow:0 0 0 1px #e8e8e8,0 1px 4px 0 rgba(0,0,0,.08);transition:box-shadow .2s ease-in-out}.bp .bp-thumbnail-page-number{position:absolute;display:flex;align-items:center;justify-content:center;min-width:28px;height:24px;padding-right:3px;padding-left:3px;color:#fff;font-size:13px;border-radius:3px 0 6px 0;box-shadow:1px 1px 2px 0 rgba(0,0,0,.2);opacity:0}.bp .bp-thumbnail-image{background-repeat:no-repeat;background-position:center;background-size:contain;pointer-events:none}.bp .bp-thumbnails-container--dark{background-color:#444;border-right-color:#000}.bp .bp-thumbnails-container--dark .bp-thumbnail-page-number{background-color:#444}.bp .bp-thumbnails-container--dark .bp-thumbnail-nav{border-color:#444}@keyframes bp-thumbnails-open{0%{display:none;transform:translateX(-191px)}1%{display:flex;transform:translateX(-191px)}100%{transform:translateX(0)}}@media(min-width: 768px){.bp.bp-loaded.bp-thumbnails-open-active .bp-content,.bp.bp-loaded.bp-thumbnails-close-active .bp-content{transition:left 300ms cubic-bezier(0.4, 0, 0.2, 1)}.bp .bp-thumbnails-container{display:none;transition:transform 300ms cubic-bezier(0.4, 0, 0.2, 1)}.bp .bp-thumbnails-container,.bp.bp-thumbnails-close .bp-thumbnails-container,.bp.bp-thumbnails-close-active .bp-thumbnails-container{transform:translateX(-191px)}.bp.bp-thumbnails-close .bp-thumbnails-container{display:none}.bp.bp-thumbnails-close-active .bp-thumbnails-container{display:flex}.bp.bp-thumbnails-open .bp-content{left:191px}.bp.bp-thumbnails-open .bp-content.bp-is-fullscreen{left:0}.bp.bp-thumbnails-open .bp-thumbnails-container{display:flex;transform:translateX(0)}.bp.bp-thumbnails-open-active .bp-thumbnails-container{animation:bp-thumbnails-open 300ms cubic-bezier(0.4, 0, 0.2, 1)}.bp .bp-ThumbnailsToggle{display:flex}}@media(max-width: 767px){.bp-is-mobile .bp-ZoomControls{display:none}}.bp-theme-dark .bp .bp-thumbnails-container{border-right-color:#222}.bp-doc{position:absolute;inset:0;width:100%;height:100%;margin:0;overflow:hidden;letter-spacing:normal;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.bp-doc [hidden]{display:none !important}.bp-doc.bp-is-scrollable{overflow:auto}.bp-doc .pdfViewer.pinching{visibility:hidden}.bp-doc .pdfViewer .page{position:relative;display:block;box-sizing:content-box !important;margin:0 auto;padding:15px 0;overflow:visible;border:0;border-image:none}.bp-doc .pdfViewer .page:not(.bp-is-invisible)::before{box-shadow:0 4px 12px 0 rgba(0,0,0,.1);position:absolute;inset:15px 0 15px 0;display:block;content:""}.bp-doc .pdfViewer .page:not(.bp-is-invisible) .loadingIcon:first-child{background:#e8e8e8 url(assets/loading_ghost.gif) repeat-y;background-size:100% 100%}.bp-doc .pdfViewer .page .loadingIcon{top:15px;bottom:15px;background:none}.bp-doc .pdfViewer .page.loadingIcon::after{top:15px;bottom:15px;background:none}.bp-doc .pdfViewer .page .textAnnotation>img{opacity:0}.bp-doc .pdfViewer .page.pinch-page{padding:0;visibility:visible}.bp-doc .pdfViewer .page.pinch-page .textLayer{display:none}.bp-doc .pdfViewer.pdfViewer--viewOnly .textLayer span{cursor:unset;-webkit-user-select:none;user-select:none}.bp-doc .pdfViewer .page .textLayer{top:15px;bottom:auto;z-index:1;opacity:1;caret-color:#000}.bp-doc .pdfViewer .page .textLayer>div{-webkit-user-select:text;user-select:text}.bp-doc .pdfViewer .page .textLayer .highlight{display:inline-block;background-color:rgba(180,0,170,.2)}.bp-doc .pdfViewer .page .textLayer .highlight.selected{background-color:rgba(0,100,0,.2)}.bp-doc .pdfViewer .page .textLayer .rangy-highlight{opacity:.2}.bp-doc .pdfViewer .page .textLayer ::selection{background-color:rgba(0,97,213,.1)}.bp-doc input,.bp-doc p,.bp-doc span{-webkit-user-select:text;user-select:text}.bp-doc .annotationLayer{z-index:2}.bp-doc .annotationLayer h1,.bp-doc .annotationLayer h2,.bp-doc .annotationLayer h3,.bp-doc .annotationLayer h4,.bp-doc .annotationLayer h5,.bp-doc .annotationLayer h6,.bp-doc .annotationLayer p{margin:0}.bp-doc .annotationLayer h1{font-size:1em}.bp-doc .annotationLayer section{margin-top:15px}.bp-doc .annotationLayer .popup{font-size:inherit}.bp-doc .annotationLayer .popup .header{height:unset;padding:unset !important;background-color:unset}.bp-print-notification{display:none;font-size:24px}@media print{.bp-doc{display:none}.bp-print-notification{display:block}}.bp-content.bp-annotations-discoverable .ba-PopupCursor{display:none}.bp-content.bp-annotations-discoverable .textLayer{pointer-events:none}.bp-content.bp-annotations-discoverable .textLayer span{pointer-events:auto}@media(max-width: 767px){.bp-content.bp-annotations-only-controls.bp-annotations-create--drawing .bp-AnnotationsControls-exitBtn,.bp-content.bp-annotations-only-controls.bp-annotations-create--highlight .bp-AnnotationsControls-exitBtn,.bp-content.bp-annotations-only-controls.bp-annotations-create--region .bp-AnnotationsControls-exitBtn{display:block}.bp-content.bp-annotations-only-controls.bp-annotations-create--drawing .bp-ControlsBarGroup:not(:last-child),.bp-content.bp-annotations-only-controls.bp-annotations-create--drawing .bp-ControlsBarGroup>*:not(.bp-AnnotationsControls),.bp-content.bp-annotations-only-controls.bp-annotations-create--highlight .bp-ControlsBarGroup:not(:last-child),.bp-content.bp-annotations-only-controls.bp-annotations-create--highlight .bp-ControlsBarGroup>*:not(.bp-AnnotationsControls),.bp-content.bp-annotations-only-controls.bp-annotations-create--region .bp-ControlsBarGroup:not(:last-child),.bp-content.bp-annotations-only-controls.bp-annotations-create--region .bp-ControlsBarGroup>*:not(.bp-AnnotationsControls){display:none}}.bp-content.bp-annotations-create--highlight .ba-PopupCursor,.bp-content.bp-annotations-create--region .ba-PopupCursor{display:block}.bp-content.bp-annotations-create--highlight .annotationLayer,.bp-content.bp-annotations-create--region .annotationLayer{pointer-events:none}.bp-content.bp-annotations-create--highlight .ba-DrawingAnnotations-list.is-listening .ba-DrawingTarget,.bp-content.bp-annotations-create--region .ba-DrawingAnnotations-list.is-listening .ba-DrawingTarget{pointer-events:none}.bp-content.bp-annotations-create--highlight .ba-HighlightList .ba-HighlightSvg.is-listening .ba-HighlightTarget-rect,.bp-content.bp-annotations-create--region .ba-HighlightList .ba-HighlightSvg.is-listening .ba-HighlightTarget-rect{pointer-events:none}.bp-content.bp-annotations-create--highlight .ba-RegionAnnotations-list.is-listening .ba-RegionAnnotation,.bp-content.bp-annotations-create--region .ba-RegionAnnotations-list.is-listening .ba-RegionAnnotation{pointer-events:none}.bp-content.bp-annotations-create--region.bp-annotations-ftux-document-cursor-seen .ba-PopupCursor{display:none}.bp-content.bp-annotations-create--region .textLayer,.bp-content.bp-annotations-create--region .textLayer span{pointer-events:none}.bp-content.bp-is-fullscreen .bp-ThumbnailsToggle{display:none}.bp-find-bar{position:absolute;top:0;right:17px;z-index:3;display:flex;align-items:center;padding:6px;font-size:12px;font-family:Lato,"Helvetica Neue",Helvetica,Arial,sans-serif;background:#fff;border:1px solid #e8e8e8}.bp-find-bar ::-ms-clear{display:none}.bp-find-bar .bp-doc-find-field{width:200px;height:34px;padding:6px 6px 6px 25px;color:#494949;line-height:20px;border:1px solid #e8e8e8;border-radius:2px 0 0 2px;outline-style:none;transition-timing-function:ease;transition-duration:150ms;transition-property:border-color}.bp-find-bar .bp-doc-find-field:focus,.bp-find-bar .bp-doc-find-field:hover{border-color:#0061d5}.bp-find-bar .bp-doc-find-results-count{position:absolute;top:37%;right:120px;margin:0;padding:0;color:rgba(73,73,73,.25);line-height:1;text-align:right;cursor:default;-webkit-user-select:none;user-select:none}.bp-find-bar .bp-doc-find-search,.bp-find-bar .bp-doc-find-prev,.bp-find-bar .bp-doc-find-next,.bp-find-bar .bp-doc-find-close{display:flex;align-items:center;justify-content:center;width:34px;height:34px;padding:0;line-height:1;vertical-align:middle;background:none;border:1px solid #e8e8e8;border-left:0;cursor:pointer}.bp-find-bar .bp-doc-find-search svg,.bp-find-bar .bp-doc-find-prev svg,.bp-find-bar .bp-doc-find-next svg,.bp-find-bar .bp-doc-find-close svg{width:17px}.bp-find-bar .bp-doc-find-search .icon,.bp-find-bar .bp-doc-find-prev .icon,.bp-find-bar .bp-doc-find-next .icon,.bp-find-bar .bp-doc-find-close .icon{fill:rgba(73,73,73,.75)}.bp-find-bar .bp-doc-find-prev:hover .icon,.bp-find-bar .bp-doc-find-next:hover .icon,.bp-find-bar .bp-doc-find-close:hover .icon{fill:#494949}.bp-find-bar .bp-doc-find-search{position:absolute;top:15%;left:5px;margin:0;line-height:1;text-align:left;border:0;pointer-events:none}.bp-find-bar .bp-doc-find-search svg{width:12px;height:12px}.bp-find-bar .bp-doc-find-close{border:0}.bp-find-bar .bp-doc-find-close svg{width:22px}.bp-find-bar .bp-find-match-not-found,.bp-find-bar .bp-find-match-not-found:hover,.bp-find-bar .bp-find-match-not-found:focus{border-color:rgba(239,72,54,.5)}.bp-find-bar .bp-doc-find-controls{display:flex}.bp .bp-doc.bp-doc-document{overflow-y:scroll}.bp-document-preload-wrapper{position:absolute;inset:0;height:100%;margin:0;overflow-y:scroll;scrollbar-gutter:stable;background-color:#f5f5f5;opacity:1;transition:opacity .5s}.bp-document-preload-wrapper.bp-is-invisible{visibility:hidden}.bp-document-preload-wrapper.bp-is-transparent{opacity:0}.bp-theme-dark .bp-document-preload-wrapper{background-color:#464a4f}.bp-document-preload-wrapper .bp-preload-content,.bp-document-preload-wrapper .bp-preload-overlay,.bp-document-preload-wrapper .bp-preload-placeholder::before{position:absolute;inset:0}.bp-document-preload-wrapper .bp-preload-content{width:100%}.bp-document-preload-wrapper .bp-preload-overlay{background-color:rgba(255,255,255,.4)}.bp-document-preload-wrapper .bp-preload-placeholder{background:#e8e8e8 url(assets/loading_ghost.gif) repeat-y;background-size:100% 100%;box-shadow:0 4px 12px 0 rgba(0,0,0,.1);position:relative;margin:15px auto 30px}.bp-document-preload-wrapper .bp-preload-placeholder img.doc-first-image{width:100%;height:100%}.bp-document-preload-wrapper .bp-preload-placeholder img.loaded{visibility:visible}
86
86
  .custom-theme .bp .bp-thumbnail.bp-thumbnail-is-selected .bp-thumbnail-nav{box-shadow:0 0 0 3px #222,0 4px 5px 0 rgba(0,0,0,.08)}.custom-theme .bp .bp-thumbnail.bp-thumbnail-is-selected .bp-thumbnail-page-number{background:#222}.custom-theme .bp .bp-thumbnail.bp-thumbnail-is-selected.bp-thumbnail-image-loaded .bp-thumbnail-nav{background-color:#222}.bp .bp-ThumbnailsToggle{display:none}.bp .bp-thumbnails-container{position:absolute;top:0;bottom:0;left:0;display:none;flex:0 0 auto;width:191px}.bp .bp-thumbnails-container:focus{outline:none}.bp .bp-thumbnail{position:relative;display:flex;margin-right:20px;margin-left:20px;cursor:pointer;transition:transform .2s ease-in-out}.bp .bp-thumbnail:focus,.bp .bp-thumbnail:hover{transform:translateY(-1px) scale(1.02)}.bp .bp-thumbnail:focus .bp-thumbnail-page-number,.bp .bp-thumbnail:hover .bp-thumbnail-page-number{background:#767676;opacity:1}.bp .bp-thumbnail:focus .bp-thumbnail-nav,.bp .bp-thumbnail:hover .bp-thumbnail-nav{box-shadow:0 0 0 1px #767676,0 4px 5px 0 rgba(0,0,0,.15)}.bp .bp-thumbnail:focus.bp-thumbnail-image-loaded .bp-thumbnail-nav,.bp .bp-thumbnail:hover.bp-thumbnail-image-loaded .bp-thumbnail-nav{background-color:#767676}.bp .bp-thumbnail.bp-thumbnail-is-selected .bp-thumbnail-page-number{background:#0061d5;opacity:1}.bp .bp-thumbnail.bp-thumbnail-is-selected .bp-thumbnail-nav{box-shadow:0 0 0 3px #0061d5,0 4px 5px 0 rgba(0,0,0,.08)}.bp .bp-thumbnail.bp-thumbnail-is-selected.bp-thumbnail-image-loaded .bp-thumbnail-nav{background-color:#0061d5}.bp .bp-thumbnail:not(.bp-thumbnail-image-loaded) .bp-thumbnail-nav{background:#e8e8e8 url(assets/loading_ghost.gif) repeat-y;background-size:100% 100%}.bp .bp-thumbnail-nav{flex:0 0 150px;overflow:hidden;background-color:#d8d8d8;border-radius:6px;box-shadow:0 0 0 1px #e8e8e8,0 1px 4px 0 rgba(0,0,0,.08);transition:box-shadow .2s ease-in-out}.bp .bp-thumbnail-page-number{position:absolute;display:flex;align-items:center;justify-content:center;min-width:28px;height:24px;padding-right:3px;padding-left:3px;color:#fff;font-size:13px;border-radius:3px 0 6px 0;box-shadow:1px 1px 2px 0 rgba(0,0,0,.2);opacity:0}.bp .bp-thumbnail-image{background-repeat:no-repeat;background-position:center;background-size:contain;pointer-events:none}.bp .bp-thumbnails-container--dark{background-color:#444;border-right-color:#000}.bp .bp-thumbnails-container--dark .bp-thumbnail-page-number{background-color:#444}.bp .bp-thumbnails-container--dark .bp-thumbnail-nav{border-color:#444}@keyframes bp-thumbnails-open{0%{display:none;transform:translateX(-191px)}1%{display:flex;transform:translateX(-191px)}100%{transform:translateX(0)}}@media(min-width: 768px){.bp.bp-loaded.bp-thumbnails-open-active .bp-content,.bp.bp-loaded.bp-thumbnails-close-active .bp-content{transition:left 300ms cubic-bezier(0.4, 0, 0.2, 1)}.bp .bp-thumbnails-container{display:none;transition:transform 300ms cubic-bezier(0.4, 0, 0.2, 1)}.bp .bp-thumbnails-container,.bp.bp-thumbnails-close .bp-thumbnails-container,.bp.bp-thumbnails-close-active .bp-thumbnails-container{transform:translateX(-191px)}.bp.bp-thumbnails-close .bp-thumbnails-container{display:none}.bp.bp-thumbnails-close-active .bp-thumbnails-container{display:flex}.bp.bp-thumbnails-open .bp-content{left:191px}.bp.bp-thumbnails-open .bp-content.bp-is-fullscreen{left:0}.bp.bp-thumbnails-open .bp-thumbnails-container{display:flex;transform:translateX(0)}.bp.bp-thumbnails-open-active .bp-thumbnails-container{animation:bp-thumbnails-open 300ms cubic-bezier(0.4, 0, 0.2, 1)}.bp .bp-ThumbnailsToggle{display:flex}}@media(max-width: 767px){.bp-is-mobile .bp-ZoomControls{display:none}}.bp-theme-dark .bp .bp-thumbnails-container{border-right-color:#222}.bp-doc{position:absolute;inset:0;width:100%;height:100%;margin:0;overflow:hidden;letter-spacing:normal;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.bp-doc [hidden]{display:none !important}.bp-doc.bp-is-scrollable{overflow:auto}.bp-doc .pdfViewer.pinching{visibility:hidden}.bp-doc .pdfViewer .page{position:relative;display:block;box-sizing:content-box !important;margin:0 auto;padding:15px 0;overflow:visible;border:0;border-image:none}.bp-doc .pdfViewer .page:not(.bp-is-invisible)::before{box-shadow:0 4px 12px 0 rgba(0,0,0,.1);position:absolute;inset:15px 0 15px 0;display:block;content:""}.bp-doc .pdfViewer .page:not(.bp-is-invisible) .loadingIcon:first-child{background:#e8e8e8 url(assets/loading_ghost.gif) repeat-y;background-size:100% 100%}.bp-doc .pdfViewer .page .loadingIcon{top:15px;bottom:15px;background:none}.bp-doc .pdfViewer .page.loadingIcon::after{top:15px;bottom:15px;background:none}.bp-doc .pdfViewer .page .textAnnotation>img{opacity:0}.bp-doc .pdfViewer .page.pinch-page{padding:0;visibility:visible}.bp-doc .pdfViewer .page.pinch-page .textLayer{display:none}.bp-doc .pdfViewer.pdfViewer--viewOnly .textLayer span{cursor:unset;-webkit-user-select:none;user-select:none}.bp-doc .pdfViewer .page .textLayer{top:15px;bottom:auto;z-index:1;opacity:1;caret-color:#000}.bp-doc .pdfViewer .page .textLayer>div{-webkit-user-select:text;user-select:text}.bp-doc .pdfViewer .page .textLayer .highlight{display:inline-block;background-color:rgba(180,0,170,.2)}.bp-doc .pdfViewer .page .textLayer .highlight.selected{background-color:rgba(0,100,0,.2)}.bp-doc .pdfViewer .page .textLayer .rangy-highlight{opacity:.2}.bp-doc .pdfViewer .page .textLayer ::selection{background-color:rgba(0,97,213,.1)}.bp-doc input,.bp-doc p,.bp-doc span{-webkit-user-select:text;user-select:text}.bp-doc .annotationLayer{z-index:2}.bp-doc .annotationLayer h1,.bp-doc .annotationLayer h2,.bp-doc .annotationLayer h3,.bp-doc .annotationLayer h4,.bp-doc .annotationLayer h5,.bp-doc .annotationLayer h6,.bp-doc .annotationLayer p{margin:0}.bp-doc .annotationLayer h1{font-size:1em}.bp-doc .annotationLayer section{margin-top:15px}.bp-doc .annotationLayer .popup{font-size:inherit}.bp-doc .annotationLayer .popup .header{height:unset;padding:unset !important;background-color:unset}.bp-print-notification{display:none;font-size:24px}@media print{.bp-doc{display:none}.bp-print-notification{display:block}}.bp-content.bp-annotations-discoverable .ba-PopupCursor{display:none}.bp-content.bp-annotations-discoverable .textLayer{pointer-events:none}.bp-content.bp-annotations-discoverable .textLayer span{pointer-events:auto}@media(max-width: 767px){.bp-content.bp-annotations-only-controls.bp-annotations-create--drawing .bp-AnnotationsControls-exitBtn,.bp-content.bp-annotations-only-controls.bp-annotations-create--highlight .bp-AnnotationsControls-exitBtn,.bp-content.bp-annotations-only-controls.bp-annotations-create--region .bp-AnnotationsControls-exitBtn{display:block}.bp-content.bp-annotations-only-controls.bp-annotations-create--drawing .bp-ControlsBarGroup:not(:last-child),.bp-content.bp-annotations-only-controls.bp-annotations-create--drawing .bp-ControlsBarGroup>*:not(.bp-AnnotationsControls),.bp-content.bp-annotations-only-controls.bp-annotations-create--highlight .bp-ControlsBarGroup:not(:last-child),.bp-content.bp-annotations-only-controls.bp-annotations-create--highlight .bp-ControlsBarGroup>*:not(.bp-AnnotationsControls),.bp-content.bp-annotations-only-controls.bp-annotations-create--region .bp-ControlsBarGroup:not(:last-child),.bp-content.bp-annotations-only-controls.bp-annotations-create--region .bp-ControlsBarGroup>*:not(.bp-AnnotationsControls){display:none}}.bp-content.bp-annotations-create--highlight .ba-PopupCursor,.bp-content.bp-annotations-create--region .ba-PopupCursor{display:block}.bp-content.bp-annotations-create--highlight .annotationLayer,.bp-content.bp-annotations-create--region .annotationLayer{pointer-events:none}.bp-content.bp-annotations-create--highlight .ba-DrawingAnnotations-list.is-listening .ba-DrawingTarget,.bp-content.bp-annotations-create--region .ba-DrawingAnnotations-list.is-listening .ba-DrawingTarget{pointer-events:none}.bp-content.bp-annotations-create--highlight .ba-HighlightList .ba-HighlightSvg.is-listening .ba-HighlightTarget-rect,.bp-content.bp-annotations-create--region .ba-HighlightList .ba-HighlightSvg.is-listening .ba-HighlightTarget-rect{pointer-events:none}.bp-content.bp-annotations-create--highlight .ba-RegionAnnotations-list.is-listening .ba-RegionAnnotation,.bp-content.bp-annotations-create--region .ba-RegionAnnotations-list.is-listening .ba-RegionAnnotation{pointer-events:none}.bp-content.bp-annotations-create--region.bp-annotations-ftux-document-cursor-seen .ba-PopupCursor{display:none}.bp-content.bp-annotations-create--region .textLayer,.bp-content.bp-annotations-create--region .textLayer span{pointer-events:none}.bp-content.bp-is-fullscreen .bp-ThumbnailsToggle{display:none}.bp-find-bar{position:absolute;top:0;right:17px;z-index:3;display:flex;align-items:center;padding:6px;font-size:12px;font-family:Lato,"Helvetica Neue",Helvetica,Arial,sans-serif;background:#fff;border:1px solid #e8e8e8}.bp-find-bar ::-ms-clear{display:none}.bp-find-bar .bp-doc-find-field{width:200px;height:34px;padding:6px 6px 6px 25px;color:#494949;line-height:20px;border:1px solid #e8e8e8;border-radius:2px 0 0 2px;outline-style:none;transition-timing-function:ease;transition-duration:150ms;transition-property:border-color}.bp-find-bar .bp-doc-find-field:focus,.bp-find-bar .bp-doc-find-field:hover{border-color:#0061d5}.bp-find-bar .bp-doc-find-results-count{position:absolute;top:37%;right:120px;margin:0;padding:0;color:rgba(73,73,73,.25);line-height:1;text-align:right;cursor:default;-webkit-user-select:none;user-select:none}.bp-find-bar .bp-doc-find-search,.bp-find-bar .bp-doc-find-prev,.bp-find-bar .bp-doc-find-next,.bp-find-bar .bp-doc-find-close{display:flex;align-items:center;justify-content:center;width:34px;height:34px;padding:0;line-height:1;vertical-align:middle;background:none;border:1px solid #e8e8e8;border-left:0;cursor:pointer}.bp-find-bar .bp-doc-find-search svg,.bp-find-bar .bp-doc-find-prev svg,.bp-find-bar .bp-doc-find-next svg,.bp-find-bar .bp-doc-find-close svg{width:17px}.bp-find-bar .bp-doc-find-search .icon,.bp-find-bar .bp-doc-find-prev .icon,.bp-find-bar .bp-doc-find-next .icon,.bp-find-bar .bp-doc-find-close .icon{fill:rgba(73,73,73,.75)}.bp-find-bar .bp-doc-find-prev:hover .icon,.bp-find-bar .bp-doc-find-next:hover .icon,.bp-find-bar .bp-doc-find-close:hover .icon{fill:#494949}.bp-find-bar .bp-doc-find-search{position:absolute;top:15%;left:5px;margin:0;line-height:1;text-align:left;border:0;pointer-events:none}.bp-find-bar .bp-doc-find-search svg{width:12px;height:12px}.bp-find-bar .bp-doc-find-close{border:0}.bp-find-bar .bp-doc-find-close svg{width:22px}.bp-find-bar .bp-find-match-not-found,.bp-find-bar .bp-find-match-not-found:hover,.bp-find-bar .bp-find-match-not-found:focus{border-color:rgba(239,72,54,.5)}.bp-find-bar .bp-doc-find-controls{display:flex}.bp-doc.bp-doc-presentation{overflow:hidden}.bp-doc.bp-doc-presentation .pdfViewer .page{position:absolute;inset:0;margin:auto}.bp-doc.bp-doc-presentation .pdfViewer .page.bp-is-invisible{opacity:0}.bp-doc.bp-doc-presentation.overflow-x{overflow-x:scroll}.bp-doc.bp-doc-presentation.overflow-y{overflow-y:scroll}.bp-doc.bp-doc-presentation.overflow-y .pdfViewer .page{margin-top:5px}.bp-presentation-preload-wrapper{position:absolute;inset:0;align-content:center;margin:0;background-color:#f5f5f5;transition:opacity .5s}.bp-presentation-preload-wrapper.bp-is-invisible{visibility:hidden}.bp-presentation-preload-wrapper.bp-is-transparent{opacity:0}.bp-theme-dark .bp-presentation-preload-wrapper{background-color:#464a4f}.bp-presentation-preload-wrapper .bp-preload-content,.bp-presentation-preload-wrapper .bp-preload-overlay,.bp-presentation-preload-wrapper .bp-preload-placeholder::before{position:absolute;inset:0}.bp-presentation-preload-wrapper .bp-preload-content{width:100%}.bp-presentation-preload-wrapper .bp-preload-overlay{background-color:rgba(255,255,255,.4)}.bp-presentation-preload-wrapper .bp-preload-placeholder{background:#e8e8e8 url(assets/loading_ghost.gif) repeat-y;background-size:100% 100%;box-shadow:0 4px 12px 0 rgba(0,0,0,.1);position:relative;margin:auto;padding-top:5px}.bp-presentation-preload-wrapper .bp-preload-placeholder img.doc-first-image{width:100%;height:100%}.bp-presentation-preload-wrapper .bp-preload-placeholder img.loaded{visibility:visible}
87
87
  .bp-AnimationClipsToggle{opacity:.9;transition:opacity 150ms,background-color 150ms;will-change:opacity;outline:0;display:flex;align-items:center;justify-content:center;margin:0;padding:0;color:#fff;background:transparent;border:0;border-radius:25px;cursor:pointer;-webkit-user-select:none;user-select:none;touch-action:manipulation;zoom:1}.bp-AnimationClipsToggle:focus:not(:disabled),.bp-AnimationClipsToggle:hover:not(:disabled){background-color:rgba(255,255,255,.08);opacity:1}.bp-AnimationClipsToggle:focus:not(:disabled) svg,.bp-AnimationClipsToggle:hover:not(:disabled) svg,.bp-AnimationClipsToggle.bp-is-active svg{transform:scale(1.09);transition:transform 150ms}.bp-AnimationClipsToggle.bp-is-active,.bp-AnimationClipsToggle:active:not(:disabled){background-color:rgba(255,255,255,.16)}.bp-AnimationClipsToggle.bp-is-active:focus:not(:disabled),.bp-AnimationClipsToggle.bp-is-active:hover:not(:disabled){background-color:rgba(255,255,255,.2)}.bp-AnimationClipsToggle:focus:not(:disabled){box-shadow:inset 0 0 0 1px rgba(211,211,211,.5),0 1px 2px rgba(0,0,0,.1)}.bp-AnimationClipsToggle:focus-visible:not(:disabled){box-shadow:inset 0 0 0 1px rgba(211,211,211,.5),0 1px 2px rgba(0,0,0,.1)}.bp-AnimationClipsToggle:focus:not(:focus-visible){box-shadow:none}.bp-AnimationClipsToggle:disabled{cursor:default;opacity:.2;pointer-events:none}.bp-AnimationClipsToggle svg{width:32px;height:32px;padding:5px}
package/dist/lib/index.js CHANGED
@@ -15388,7 +15388,7 @@ function util_toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var
15388
15388
  const CLIENT_NAME = "box-content-preview"; // eslint-disable-line no-undef
15389
15389
  const CLIENT_NAME_KEY = 'box_client_name';
15390
15390
  const CLIENT_VERSION_KEY = 'box_client_version';
15391
- const CLIENT_VERSION = "3.79.0"; // eslint-disable-line no-undef
15391
+ const CLIENT_VERSION = "3.81.0"; // eslint-disable-line no-undef
15392
15392
  const HEADER_CLIENT_NAME = 'X-Box-Client-Name';
15393
15393
  const HEADER_CLIENT_VERSION = 'X-Box-Client-Version';
15394
15394
  const PROMISE_MAP = {};
@@ -17085,7 +17085,7 @@ class Browser {
17085
17085
  ;// ./src/lib/Logger.js
17086
17086
  /* eslint-disable no-undef */
17087
17087
  const Logger_CLIENT_NAME = "box-content-preview";
17088
- const Logger_CLIENT_VERSION = "3.79.0";
17088
+ const Logger_CLIENT_VERSION = "3.81.0";
17089
17089
  /* eslint-enable no-undef */
17090
17090
 
17091
17091
  class Logger {
@@ -17264,7 +17264,7 @@ function FocusTrap_defineProperty(e, r, t) { return (r = FocusTrap_toPropertyKey
17264
17264
  function FocusTrap_toPropertyKey(t) { var i = FocusTrap_toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
17265
17265
  function FocusTrap_toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
17266
17266
 
17267
- const FOCUSABLE_ELEMENT_SELECTORS = ['a[href]', 'button', 'textarea', 'input[type="text"]', 'input[type="radio"]', 'input[type="checkbox"]', 'select', '[role="option"][tabindex="0"]'];
17267
+ const FOCUSABLE_ELEMENT_SELECTORS = ['a[href]', 'button', 'textarea', 'input[type="text"]', 'input[type="radio"]', 'input[type="checkbox"]', 'select', '[role="option"][tabindex="0"]', '[role="gridcell"][tabindex="0"]'];
17268
17268
  const EXCLUDED_SELECTOR_ATTRIBUTES = ['disabled', 'tabindex="-1"', 'aria-disabled="true"', 'aria-hidden="true"'];
17269
17269
  const FOCUSABLE_ELEMENTS_SELECTOR = FOCUSABLE_ELEMENT_SELECTORS.map(element => {
17270
17270
  let selector = element;
@@ -34104,8 +34104,16 @@ function VideoFullscreenButton({
34104
34104
  });
34105
34105
  };
34106
34106
  update();
34107
+
34108
+ // Watch both the video and the overlay parent. A sibling layout change
34109
+ // (e.g. a host-page sidebar) can shrink the parent and re-center the
34110
+ // video without changing the video element's box size, so observing
34111
+ // mediaEl alone would leave the button at a stale `right` offset.
34107
34112
  const resizeObserver = new ResizeObserver(update);
34108
34113
  resizeObserver.observe(mediaEl);
34114
+ if (ref.current?.offsetParent) {
34115
+ resizeObserver.observe(ref.current.offsetParent);
34116
+ }
34109
34117
  window.addEventListener('resize', update);
34110
34118
  return () => {
34111
34119
  resizeObserver.disconnect();
@@ -37799,6 +37807,30 @@ class Thumbnail {
37799
37807
  }
37800
37808
  }
37801
37809
  /* harmony default export */ const lib_Thumbnail = (Thumbnail);
37810
+ ;// ./src/lib/viewers/gallery/constants.ts
37811
+ const GALLERY_THUMB_MAX_WIDTH = 440;
37812
+ const CONCURRENT_LOADS = 4;
37813
+ const SCROLL_THROTTLE_MS = 200;
37814
+
37815
+ // Keep in sync with the 100% grid rule in GalleryGrid.scss.
37816
+ const GALLERY_TILE_GAP = 16;
37817
+ const GALLERY_TILE_MIN_WIDTH = 220;
37818
+ const GALLERY_THUMB_WIDTH_TIERS = [GALLERY_THUMB_MAX_WIDTH, GALLERY_THUMB_MAX_WIDTH * 2, GALLERY_THUMB_MAX_WIDTH * 3];
37819
+ const GALLERY_THUMB_MAX_TIER = GALLERY_THUMB_WIDTH_TIERS[GALLERY_THUMB_WIDTH_TIERS.length - 1];
37820
+ const GALLERY_THUMB_MAX_DPR = 2;
37821
+ const GALLERY_HIGH_RES_MAX_BYTES = 64 * 1024 * 1024;
37822
+ const GALLERY_HIGH_RES_MAX_PAGES = 16;
37823
+ const GALLERY_HIGH_RES_CONCURRENCY = 2;
37824
+
37825
+ // Gallery availability and zoom limits.
37826
+ // Hide the gallery toggle for files above this page count.
37827
+ const GALLERY_MAX_PAGES = 200;
37828
+ const GALLERY_MAX_SCALE = 3;
37829
+ const GALLERY_MIN_SCALE = 0.5;
37830
+ const GALLERY_SCALE_STEP = 0.1;
37831
+
37832
+ // Keep in sync with the thumbnails sidebar CSS transition.
37833
+ const THUMBNAILS_SIDEBAR_TRANSITION_TIME = 301;
37802
37834
  ;// ./src/lib/viewers/gallery/HighResThumbnailStore.ts
37803
37835
  function HighResThumbnailStore_ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
37804
37836
  function HighResThumbnailStore_objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? HighResThumbnailStore_ownKeys(Object(t), !0).forEach(function (r) { HighResThumbnailStore_defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : HighResThumbnailStore_ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -37977,6 +38009,40 @@ class HighResThumbnailStore {
37977
38009
  return !this.isDestroyed && this.targetWidth === pending.width && this.retained.has(pageNum);
37978
38010
  }
37979
38011
  }
38012
+ ;// ./src/lib/viewers/gallery/galleryGridNavigation.ts
38013
+ /**
38014
+ * Pure math for the gallery ARIA grid: pages are laid out row-major, so page p
38015
+ * (1-based) occupies row floor((p - 1) / columns) + 1 and column ((p - 1) % columns) + 1.
38016
+ * All indices returned here are 1-based, matching aria-rowindex / aria-colindex.
38017
+ */
38018
+
38019
+ function getRowCount(pageCount, columnCount) {
38020
+ return Math.ceil(pageCount / columnCount);
38021
+ }
38022
+ function getRowIndex(pageNum, columnCount) {
38023
+ return Math.floor((pageNum - 1) / columnCount) + 1;
38024
+ }
38025
+ function getColumnIndex(pageNum, columnCount) {
38026
+ return (pageNum - 1) % columnCount + 1;
38027
+ }
38028
+
38029
+ /** Page one row up in the same column, or null when already in the first row. */
38030
+ function getPageAbove(pageNum, columnCount) {
38031
+ const target = pageNum - columnCount;
38032
+ return target >= 1 ? target : null;
38033
+ }
38034
+
38035
+ /**
38036
+ * Page one row down in the same column, clamped to the last page when the final row is
38037
+ * incomplete (so Down from a cell with no cell directly below lands on the last tile).
38038
+ * Null when already in the last row.
38039
+ */
38040
+ function getPageBelow(pageNum, columnCount, pageCount) {
38041
+ if (getRowIndex(pageNum, columnCount) >= getRowCount(pageCount, columnCount)) {
38042
+ return null;
38043
+ }
38044
+ return Math.min(pageNum + columnCount, pageCount);
38045
+ }
37980
38046
  ;// ./src/lib/viewers/gallery/useGalleryPinch.ts
37981
38047
 
37982
38048
 
@@ -38112,26 +38178,17 @@ function GalleryGrid_toPrimitive(t, r) { if ("object" != typeof t || !t) return
38112
38178
 
38113
38179
 
38114
38180
 
38115
- const GALLERY_THUMB_MAX_WIDTH = 440;
38116
- const CONCURRENT_LOADS = 4;
38117
- const SCROLL_THROTTLE_MS = 200;
38118
- // Keep in sync with the 100% grid rule in GalleryGrid.scss
38119
- const GALLERY_TILE_GAP = 16;
38120
- const GALLERY_TILE_MIN_WIDTH = 220;
38121
- const GALLERY_THUMB_WIDTH_TIERS = [GALLERY_THUMB_MAX_WIDTH, GALLERY_THUMB_MAX_WIDTH * 2, GALLERY_THUMB_MAX_WIDTH * 3];
38122
- const GALLERY_THUMB_MAX_TIER = GALLERY_THUMB_WIDTH_TIERS[GALLERY_THUMB_WIDTH_TIERS.length - 1];
38123
- const GALLERY_THUMB_MAX_DPR = 2;
38124
- const GALLERY_HIGH_RES_MAX_BYTES = 64 * 1024 * 1024;
38125
- const GALLERY_HIGH_RES_MAX_PAGES = 16;
38126
- const GALLERY_HIGH_RES_CONCURRENCY = 2;
38127
- const GALLERY_DEFAULT_PAGE_RATIO = 0.775;
38181
+
38182
+
38128
38183
  const GalleryTile = /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.memo(function GalleryTile({
38129
38184
  pageNum,
38130
38185
  isFocused,
38186
+ ariaColIndex,
38131
38187
  imageSrc,
38132
38188
  onClick,
38133
38189
  onFocus,
38134
- pageRatio
38190
+ pageRatio,
38191
+ role
38135
38192
  }) {
38136
38193
  const ratio = pageRatio && Number.isFinite(pageRatio) && pageRatio > 0 ? pageRatio : null;
38137
38194
  const tileStyle = ratio ? {
@@ -38147,6 +38204,7 @@ const GalleryTile = /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.memo(
38147
38204
  /*#__PURE__*/
38148
38205
  // eslint-disable-next-line jsx-a11y/click-events-have-key-events
38149
38206
  __WEBPACK_EXTERNAL_MODULE_react_default__.createElement("div", {
38207
+ "aria-colindex": ariaColIndex,
38150
38208
  "aria-label": replacePlaceholders("Page {1}", [String(pageNum)]),
38151
38209
  "aria-selected": isFocused,
38152
38210
  className: `bp-gallery-tile${isFocused ? ' bp-gallery-tile--selected' : ''}`,
@@ -38154,10 +38212,11 @@ const GalleryTile = /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.memo(
38154
38212
  "data-resin-target": "galleryTile",
38155
38213
  onClick: () => onClick(pageNum),
38156
38214
  onFocus: () => onFocus(pageNum),
38157
- role: "option",
38215
+ role: role,
38158
38216
  style: tileStyle,
38159
38217
  tabIndex: isFocused ? 0 : -1
38160
38218
  }, /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement("span", {
38219
+ "aria-hidden": "true",
38161
38220
  className: "bp-gallery-tile-badge"
38162
38221
  }, pageNum), imageSrc ? /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement("img", {
38163
38222
  alt: "",
@@ -38173,6 +38232,7 @@ function GalleryGrid({
38173
38232
  pageCount,
38174
38233
  currentPage,
38175
38234
  getPageRatio,
38235
+ isAriaGridEnabled = false,
38176
38236
  isPinchZoomEnabled = false,
38177
38237
  isTouchZoomEnabled = false,
38178
38238
  onClose,
@@ -38187,6 +38247,8 @@ function GalleryGrid({
38187
38247
  const [highResImages, setHighResImages] = __WEBPACK_EXTERNAL_MODULE_react_useState__({});
38188
38248
  const [focusedPage, setFocusedPage] = __WEBPACK_EXTERNAL_MODULE_react_useState__(currentPage);
38189
38249
  const [pageRatio, setPageRatio] = __WEBPACK_EXTERNAL_MODULE_react_useState__(null);
38250
+ // Measured from the rendered layout; drives ARIA grid row/column numbers and 2D navigation.
38251
+ const [columnCount, setColumnCount] = __WEBPACK_EXTERNAL_MODULE_react_useState__(1);
38190
38252
  // Topmost visible page — the scroll anchor used to restore the viewed area after a reflow.
38191
38253
  const anchorPageRef = __WEBPACK_EXTERNAL_MODULE_react_useRef__(currentPage);
38192
38254
  const gridRef = __WEBPACK_EXTERNAL_MODULE_react_useRef__(null);
@@ -38198,6 +38260,11 @@ function GalleryGrid({
38198
38260
  const isMountedRef = __WEBPACK_EXTERNAL_MODULE_react_useRef__(true);
38199
38261
  const inFlightRef = __WEBPACK_EXTERNAL_MODULE_react_useRef__(new Set());
38200
38262
  const highResStoreRef = __WEBPACK_EXTERNAL_MODULE_react_useRef__(null);
38263
+ const columnCountRef = __WEBPACK_EXTERNAL_MODULE_react_useRef__(1);
38264
+ const restoreFocusRef = __WEBPACK_EXTERNAL_MODULE_react_useRef__(false);
38265
+ // Anchor tile and its viewport top, captured together when a re-chunk is scheduled so the
38266
+ // post-commit effect restores against the same tile even if the anchor page changes meanwhile.
38267
+ const rechunkAnchorRef = __WEBPACK_EXTERNAL_MODULE_react_useRef__(null);
38201
38268
  const byDistanceFromAnchor = (a, b) => Math.abs(a - anchorPageRef.current) - Math.abs(b - anchorPageRef.current);
38202
38269
  function getNeededThumbWidth() {
38203
38270
  if (scaleRef.current === 1) {
@@ -38236,13 +38303,15 @@ function GalleryGrid({
38236
38303
  }
38237
38304
  function syncHighRes() {
38238
38305
  const store = highResStoreRef.current;
38239
- if (!store) return;
38306
+ const {
38307
+ pageRatio
38308
+ } = thumbnail;
38309
+ if (!store || !pageRatio) return;
38240
38310
  const width = getNeededThumbWidth();
38241
- const ratio = thumbnail.pageRatio || GALLERY_DEFAULT_PAGE_RATIO;
38242
38311
  if (width === GALLERY_THUMB_MAX_WIDTH) {
38243
- store.setRetained([], width, ratio);
38312
+ store.setRetained([], width, pageRatio);
38244
38313
  } else if (!isProcessingRef.current) {
38245
- store.setRetained(getPagesNearViewport(0.5), width, ratio);
38314
+ store.setRetained(getPagesNearViewport(0.5), width, pageRatio);
38246
38315
  }
38247
38316
  }
38248
38317
  function getUnloadedNearViewport() {
@@ -38365,6 +38434,46 @@ function GalleryGrid({
38365
38434
  inner.style.gridTemplateColumns = `repeat(auto-fill, ${Math.min(width, baseWidth * currentScale)}px)`;
38366
38435
  inner.style.justifyContent = 'center';
38367
38436
  }, []);
38437
+
38438
+ // Counts tiles sharing the first row's offsetTop instead of duplicating the CSS
38439
+ // auto-fill math, so the stylesheet stays the only source of truth for the layout.
38440
+ // Runs after every layout mutation: mount, container resize, and zoom changes.
38441
+ const measureColumnCount = __WEBPACK_EXTERNAL_MODULE_react_useCallback__(() => {
38442
+ const grid = gridRef.current;
38443
+ const inner = innerRef.current;
38444
+ if (!isAriaGridEnabled || !grid || !inner) {
38445
+ return;
38446
+ }
38447
+
38448
+ // Without a layout box (hidden host, zero-size container), offsetTop reads 0 for every
38449
+ // tile and the count would balloon to the page count; keep the last measured value.
38450
+ if (!inner.offsetWidth) {
38451
+ return;
38452
+ }
38453
+ const tiles = inner.querySelectorAll('[data-page]');
38454
+ if (tiles.length === 0) {
38455
+ return;
38456
+ }
38457
+ let count = 1;
38458
+ while (count < tiles.length && tiles[count].offsetTop === tiles[0].offsetTop) {
38459
+ count += 1;
38460
+ }
38461
+ if (count !== columnCountRef.current) {
38462
+ // Re-chunking tiles into different rows recreates the focused tile's DOM node,
38463
+ // which would silently drop focus to <body>; remember to restore it post-render.
38464
+ restoreFocusRef.current = grid.contains(document.activeElement);
38465
+ // Capture where the anchor tile sits now — after any zoom/resize scroll fixups that
38466
+ // already ran — so the post-commit effect can restore its position.
38467
+ const anchorPage = anchorPageRef.current;
38468
+ const anchorTile = grid.querySelector(`[data-page="${anchorPage}"]`);
38469
+ rechunkAnchorRef.current = anchorTile ? {
38470
+ page: anchorPage,
38471
+ top: anchorTile.getBoundingClientRect().top
38472
+ } : null;
38473
+ columnCountRef.current = count;
38474
+ setColumnCount(count);
38475
+ }
38476
+ }, [isAriaGridEnabled]);
38368
38477
  __WEBPACK_EXTERNAL_MODULE_react_useLayoutEffect__(() => {
38369
38478
  const grid = gridRef.current;
38370
38479
  const previousScale = scaleRef.current;
@@ -38373,6 +38482,7 @@ function GalleryGrid({
38373
38482
  focalRef.current = null;
38374
38483
  if (!grid || previousScale === scale) {
38375
38484
  applyZoomLayout();
38485
+ measureColumnCount();
38376
38486
  return;
38377
38487
  }
38378
38488
  const focalTile = focal ? document.elementFromPoint?.(focal.x, focal.y)?.closest('[data-page]') : null;
@@ -38385,7 +38495,8 @@ function GalleryGrid({
38385
38495
  grid.scrollTop += afterRect.top - beforeRect.top;
38386
38496
  }
38387
38497
  handleScrollRef.current();
38388
- }, [applyZoomLayout, scale]);
38498
+ measureColumnCount();
38499
+ }, [applyZoomLayout, measureColumnCount, scale]);
38389
38500
  __WEBPACK_EXTERNAL_MODULE_react_useEffect__(() => {
38390
38501
  const throttledScroll = handleScrollRef.current;
38391
38502
  const highResStore = new HighResThumbnailStore({
@@ -38409,6 +38520,12 @@ function GalleryGrid({
38409
38520
  block: 'center'
38410
38521
  });
38411
38522
  tile.focus();
38523
+ // The mount-time measurement may have captured this tile's position before this
38524
+ // centering ran; refresh the capture so the re-chunk restore keeps the centering.
38525
+ const anchor = rechunkAnchorRef.current;
38526
+ if (anchor && anchor.page === currentPage) {
38527
+ anchor.top = tile.getBoundingClientRect().top;
38528
+ }
38412
38529
  }
38413
38530
  }
38414
38531
  const initialImages = {};
@@ -38454,24 +38571,31 @@ function GalleryGrid({
38454
38571
  if (!grid) return undefined;
38455
38572
  let isFirstObservation = true;
38456
38573
  const observer = new ResizeObserver(() => {
38574
+ // The initial fire on observe() can already report a size the mount-time layout
38575
+ // effect never saw (e.g. a container that gained its size right after mount), so
38576
+ // always re-apply layout and re-measure; only the scroll-anchor restore is skipped
38577
+ // on that first delivery, since there is no viewed area to preserve yet.
38578
+ applyZoomLayout();
38457
38579
  if (isFirstObservation) {
38458
- isFirstObservation = false; // ResizeObserver always fires once on observe()
38580
+ isFirstObservation = false;
38581
+ measureColumnCount();
38459
38582
  return;
38460
38583
  }
38461
- applyZoomLayout();
38462
38584
  const tile = grid.querySelector(`[data-page="${anchorPageRef.current}"]`);
38463
38585
  if (tile) {
38464
38586
  tile.scrollIntoView({
38465
38587
  block: 'start'
38466
38588
  });
38467
38589
  }
38590
+ // Measure after the anchor restore so a scheduled re-chunk captures the restored position.
38591
+ measureColumnCount();
38468
38592
  // A larger viewport (fullscreen enter, window resize) can reveal unloaded tiles
38469
38593
  // without any scroll event, so run the same catch-up the scroll handler does.
38470
38594
  handleScrollRef.current();
38471
38595
  });
38472
38596
  observer.observe(grid);
38473
38597
  return () => observer.disconnect();
38474
- }, [applyZoomLayout]);
38598
+ }, [applyZoomLayout, measureColumnCount]);
38475
38599
  const focusTile = __WEBPACK_EXTERNAL_MODULE_react_useCallback__((pageNum, options) => {
38476
38600
  const grid = gridRef.current;
38477
38601
  if (!grid) return;
@@ -38480,6 +38604,37 @@ function GalleryGrid({
38480
38604
  tile.focus(options);
38481
38605
  }
38482
38606
  }, []);
38607
+
38608
+ // Re-chunk recreates the tile DOM nodes, which drops focus and can shift the scroll
38609
+ // position; restore both after the new nodes commit.
38610
+ const committedColumnCountRef = __WEBPACK_EXTERNAL_MODULE_react_useRef__(columnCount);
38611
+ __WEBPACK_EXTERNAL_MODULE_react_useLayoutEffect__(() => {
38612
+ const isRechunk = committedColumnCountRef.current !== columnCount;
38613
+ committedColumnCountRef.current = columnCount;
38614
+ if (!isRechunk) {
38615
+ return;
38616
+ }
38617
+ const active = document.activeElement;
38618
+ if (restoreFocusRef.current || !active || active === document.body) {
38619
+ restoreFocusRef.current = false;
38620
+ focusTile(focusedPage, {
38621
+ preventScroll: true
38622
+ });
38623
+ }
38624
+ const anchor = rechunkAnchorRef.current;
38625
+ rechunkAnchorRef.current = null;
38626
+
38627
+ // Swapping the row DOM out from under the scroller can shift scrollTop. Restore the
38628
+ // captured anchor tile to its captured viewport position by delta, preserving the mount
38629
+ // centering and the zoom focal-point / resize fixups that already ran.
38630
+ const grid = gridRef.current;
38631
+ if (grid && anchor) {
38632
+ const tile = grid.querySelector(`[data-page="${anchor.page}"]`);
38633
+ if (tile) {
38634
+ grid.scrollTop += tile.getBoundingClientRect().top - anchor.top;
38635
+ }
38636
+ }
38637
+ }, [columnCount, focusedPage, focusTile]);
38483
38638
  const handleTileFocus = __WEBPACK_EXTERNAL_MODULE_react_useCallback__(pageNum => {
38484
38639
  setFocusedPage(pageNum);
38485
38640
  if (onFocusChange) {
@@ -38504,8 +38659,28 @@ function GalleryGrid({
38504
38659
  event.stopPropagation();
38505
38660
  onClose();
38506
38661
  return;
38507
- // Listbox is 1-D arrows move ±1; row-aware nav comes with v2 grid role.
38662
+ // Listbox: every arrow moves ±1 page. ARIA grid: Left/Right stay ±1 (across row
38663
+ // edges, clamped at first/last page); Up/Down move one row (Down clamps on a short last row).
38508
38664
  case 'ArrowUp':
38665
+ {
38666
+ event.preventDefault();
38667
+ event.stopPropagation();
38668
+ const target = isAriaGridEnabled ? getPageAbove(focusedPage, columnCount) : focusedPage - 1;
38669
+ if (target !== null && target >= 1) {
38670
+ focusTile(target);
38671
+ }
38672
+ return;
38673
+ }
38674
+ case 'ArrowDown':
38675
+ {
38676
+ event.preventDefault();
38677
+ event.stopPropagation();
38678
+ const target = isAriaGridEnabled ? getPageBelow(focusedPage, columnCount, pageCount) : focusedPage + 1;
38679
+ if (target !== null && target <= pageCount) {
38680
+ focusTile(target);
38681
+ }
38682
+ return;
38683
+ }
38509
38684
  case 'ArrowLeft':
38510
38685
  event.preventDefault();
38511
38686
  event.stopPropagation();
@@ -38513,7 +38688,6 @@ function GalleryGrid({
38513
38688
  focusTile(focusedPage - 1);
38514
38689
  }
38515
38690
  return;
38516
- case 'ArrowDown':
38517
38691
  case 'ArrowRight':
38518
38692
  event.preventDefault();
38519
38693
  event.stopPropagation();
@@ -38539,33 +38713,59 @@ function GalleryGrid({
38539
38713
  break;
38540
38714
  default:
38541
38715
  }
38542
- }, [focusedPage, focusTile, onClose, onPageNavigate, pageCount]);
38716
+ }, [columnCount, focusedPage, focusTile, isAriaGridEnabled, onClose, onPageNavigate, pageCount]);
38543
38717
  const tiles = [];
38544
38718
  for (let i = 1; i <= pageCount; i += 1) {
38545
38719
  tiles.push(/*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement(GalleryTile, {
38546
38720
  key: i,
38721
+ ariaColIndex: isAriaGridEnabled ? getColumnIndex(i, columnCount) : undefined,
38547
38722
  imageSrc: highResImages[i] || loadedImages[i],
38548
38723
  isFocused: i === focusedPage,
38549
38724
  onClick: handleTileClick,
38550
38725
  onFocus: handleTileFocus,
38551
38726
  pageNum: i,
38552
- pageRatio: getPageRatio && getPageRatio(i) || pageRatio
38727
+ pageRatio: getPageRatio && getPageRatio(i) || pageRatio,
38728
+ role: isAriaGridEnabled ? 'gridcell' : 'option'
38553
38729
  }));
38554
38730
  }
38731
+
38732
+ // ARIA requires gridcells to live inside rows. The display: contents row wrappers add
38733
+ // that level to the accessibility tree without generating boxes, so the tiles remain
38734
+ // direct CSS-grid items and the visual layout is identical to the flat listbox.
38735
+ let content = tiles;
38736
+ if (isAriaGridEnabled) {
38737
+ const rows = [];
38738
+ for (let start = 0; start < tiles.length; start += columnCount) {
38739
+ const rowIndex = start / columnCount + 1;
38740
+ rows.push(
38741
+ /*#__PURE__*/
38742
+ // Named with the row number so AT announces that instead of every tile in the row.
38743
+ __WEBPACK_EXTERNAL_MODULE_react_default__.createElement("div", {
38744
+ key: start,
38745
+ "aria-label": String(rowIndex),
38746
+ "aria-rowindex": rowIndex,
38747
+ className: "bp-gallery-grid-row",
38748
+ role: "row"
38749
+ }, tiles.slice(start, start + columnCount)));
38750
+ }
38751
+ content = rows;
38752
+ }
38555
38753
  return /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement("div", {
38556
38754
  ref: gridRef,
38755
+ "aria-colcount": isAriaGridEnabled ? columnCount : undefined,
38557
38756
  "aria-label": "Page gallery",
38757
+ "aria-rowcount": isAriaGridEnabled ? getRowCount(pageCount, columnCount) : undefined,
38558
38758
  className: "bp-gallery-grid",
38559
38759
  onFocus: handleGridFocus,
38560
38760
  onKeyDown: handleGridKeyDown,
38561
38761
  onScroll: handleScroll,
38562
- role: "listbox",
38762
+ role: isAriaGridEnabled ? 'grid' : 'listbox',
38563
38763
  tabIndex: -1
38564
38764
  }, /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement("div", {
38565
38765
  ref: innerRef,
38566
38766
  className: "bp-gallery-grid-inner",
38567
38767
  role: "presentation"
38568
- }, tiles));
38768
+ }, content));
38569
38769
  }
38570
38770
  ;// ./src/lib/viewers/gallery/GalleryController.tsx
38571
38771
  function GalleryController_defineProperty(e, r, t) { return (r = GalleryController_toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
@@ -38581,16 +38781,10 @@ function GalleryController_toPrimitive(t, r) { if ("object" != typeof t || !t) r
38581
38781
 
38582
38782
 
38583
38783
 
38784
+
38584
38785
  // Controller-owned shape: GalleryGrid only sees the read surface (GalleryThumbnail),
38585
38786
  // but the controller also needs destroy() to invalidate the cache on rotate/teardown.
38586
38787
 
38587
- const GALLERY_MAX_PAGES = 200; // Hide gallery toggle for files above this page count, will increase in V2
38588
- const THUMBNAILS_SIDEBAR_TRANSITION_TIME = 301; // ms
38589
-
38590
- const GALLERY_MAX_SCALE = 3;
38591
- const GALLERY_MIN_SCALE = 0.5;
38592
- const GALLERY_SCALE_STEP = 0.1;
38593
-
38594
38788
  // Minimal local shapes for untyped peer modules (pdfjs is JS-only, sidebar is JS-only).
38595
38789
  // Only the members the controller actually uses are declared — extend as needed.
38596
38790
 
@@ -38700,7 +38894,7 @@ class GalleryController {
38700
38894
  this.galleryFocusedPage = pageNum;
38701
38895
  });
38702
38896
  GalleryController_defineProperty(this, "commitScale", scale => {
38703
- if (!this.isZoomEnabled || !Number.isFinite(scale)) {
38897
+ if (!this.isEnhancedGalleryEnabled || !Number.isFinite(scale)) {
38704
38898
  return false;
38705
38899
  }
38706
38900
  const clamped = Math.min(GALLERY_MAX_SCALE, Math.max(GALLERY_MIN_SCALE, Math.round(scale * 1000) / 1000));
@@ -38747,7 +38941,9 @@ class GalleryController {
38747
38941
  get scale() {
38748
38942
  return this.galleryScale;
38749
38943
  }
38750
- get isZoomEnabled() {
38944
+
38945
+ /** Both gallery flags must be on: parent apps target the splits independently. */
38946
+ get isEnhancedGalleryEnabled() {
38751
38947
  const {
38752
38948
  features
38753
38949
  } = this;
@@ -38762,16 +38958,17 @@ class GalleryController {
38762
38958
  return true;
38763
38959
  }
38764
38960
  /**
38765
- * Redirects an arrow key pressed outside the grid (e.g. focus parked on a toggle after
38961
+ * Redirects a grid-nav key pressed outside the grid (e.g. focus parked on a toggle after
38766
38962
  * toggling fullscreen) back into it: refocuses the selected tile and replays the key so
38767
38963
  * the first press navigates, like the thumbnail sidebar. Keys pressed inside the grid
38768
- * never arrive here — GalleryGrid stops propagation on every arrow it handles.
38964
+ * never arrive here — GalleryGrid stops propagation on every arrow/Home/End it handles.
38769
38965
  */
38770
38966
  handleArrowKey(key) {
38771
- if (!this.isGalleryOpen || !key.startsWith('Arrow')) return;
38967
+ if (!this.isGalleryOpen) return;
38968
+ if (!key.startsWith('Arrow') && key !== 'Home' && key !== 'End') return;
38772
38969
  const grid = this.galleryEl;
38773
38970
  if (!grid) return;
38774
- const tile = grid.querySelector('[role="option"][tabindex="0"]');
38971
+ const tile = grid.querySelector('[role="option"][tabindex="0"], [role="gridcell"][tabindex="0"]');
38775
38972
  if (tile) {
38776
38973
  tile.focus();
38777
38974
  tile.dispatchEvent(new KeyboardEvent('keydown', {
@@ -38854,8 +39051,9 @@ class GalleryController {
38854
39051
  this.galleryRoot.render(/*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement(GalleryGrid, {
38855
39052
  currentPage: pdfViewer.currentPageNumber,
38856
39053
  getPageRatio: this.getPageRatio,
38857
- isPinchZoomEnabled: this.isZoomEnabled && isFeatureEnabled(this.features, 'pinchToZoom.enabled'),
38858
- isTouchZoomEnabled: this.isZoomEnabled && this.hasTouch,
39054
+ isAriaGridEnabled: this.isEnhancedGalleryEnabled,
39055
+ isPinchZoomEnabled: this.isEnhancedGalleryEnabled && isFeatureEnabled(this.features, 'pinchToZoom.enabled'),
39056
+ isTouchZoomEnabled: this.isEnhancedGalleryEnabled && this.hasTouch,
38859
39057
  onClose: this.toggle,
38860
39058
  onFocusChange: this.handleFocusChange,
38861
39059
  onPageNavigate: this.handleGalleryNavigate,
@@ -40243,6 +40441,7 @@ function DocBaseViewer_toPrimitive(t, r) { if ("object" != typeof t || !t) retur
40243
40441
 
40244
40442
 
40245
40443
 
40444
+
40246
40445
 
40247
40446
 
40248
40447
  const DOC_FIRST_PAGES_ENABLED = 'docFirstPages.enabled';
@@ -41064,7 +41263,7 @@ class DocBaseViewer extends viewers_BaseViewer {
41064
41263
  this.galleryController.handleEscape();
41065
41264
  return true;
41066
41265
  }
41067
- if (this.galleryController.isZoomEnabled) {
41266
+ if (this.galleryController.isEnhancedGalleryEnabled) {
41068
41267
  if (key === 'Shift++') {
41069
41268
  this.galleryController.zoomIn();
41070
41269
  return true;
@@ -41076,9 +41275,9 @@ class DocBaseViewer extends viewers_BaseViewer {
41076
41275
  }
41077
41276
 
41078
41277
  // Swallow page-nav keys so they can't flip the doc page underneath the gallery
41079
- // or trigger the host's collection navigation. Arrows pressed outside the grid
41080
- // are redirected into it so the first press navigates the tiles.
41081
- if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', '[', ']'].includes(key)) {
41278
+ // or trigger the host's collection navigation. Arrows/Home/End pressed outside
41279
+ // the grid are redirected into it so the first press navigates the tiles.
41280
+ if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'Home', 'End', '[', ']'].includes(key)) {
41082
41281
  this.galleryController.handleArrowKey(key);
41083
41282
  return true;
41084
41283
  }
@@ -41639,13 +41838,13 @@ class DocBaseViewer extends viewers_BaseViewer {
41639
41838
  const isAnnotationsMode = this.currentAnnotatorViewMode === ANNOTATOR_VIEW_MODES.ANNOTATIONS;
41640
41839
  const canRotate = this.featureEnabled('rotate.enabled');
41641
41840
  const canGallery = !this.isMobile && this.galleryController.canRender(this.pdfViewer.pagesCount);
41642
- const isGalleryZoomActive = this.galleryController.isOpen && this.galleryController.isZoomEnabled;
41841
+ const isGalleryZoomActive = this.galleryController.isOpen && this.galleryController.isEnhancedGalleryEnabled;
41643
41842
  this.controls.render(/*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement(DocControls, {
41644
41843
  annotationColor: this.annotationModule.getColor(),
41645
41844
  annotationMode: this.annotationControlsFSM.getMode(),
41646
41845
  experiences: this.experiences,
41647
41846
  hasDrawing: canAnnotate && showAnnotationsDrawingCreate && isAnnotationsMode,
41648
- hasGalleryZoom: this.galleryController.isZoomEnabled,
41847
+ hasGalleryZoom: this.galleryController.isEnhancedGalleryEnabled,
41649
41848
  hasHighlight: canAnnotate && canDownload && isAnnotationsMode,
41650
41849
  hasRegion: canAnnotate && isAnnotationsMode,
41651
41850
  isGalleryOpen: this.galleryController.isOpen,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "box-content-preview",
3
- "version": "3.79.0",
3
+ "version": "3.81.0",
4
4
  "description": "Box Content Preview UI Element",
5
5
  "author": "Box (https://www.box.com/)",
6
6
  "license": "SEE LICENSE IN LICENSE",