@performant-software/semantic-components 1.1.4-beta.8 → 1.1.4

package/src/components/FacetSlider.js

@@ -10,7 +10,7 @@ import React, {
 import { Grid } from 'semantic-ui-react';
 import Facet, { type Props as FacetProps } from './Facet';
 import { type RangeSliderProps } from '../types/InstantSearch';
-import 'rc-slider/assets/index.css';
+
 import './FacetSlider.css';
 
 type Props = FacetProps & RangeSliderProps;
@@ -25,7 +25,7 @@ const FacetSlider = forwardRef(({ useRangeSlider, ...props }: Props, ref: HTMLEl
     refine,
   } = useRangeSlider(props);
 
-  const [valueView, setValueView] = useState<Array<number>>([range.min, range.max]);
+  const [valueView, setValueView] = useState < Array < number >> ([range.min, range.max]);
 
   /**
    * Sets the visibility variable based on the range min and max.
@@ -72,12 +72,12 @@ const FacetSlider = forwardRef(({ useRangeSlider, ...props }: Props, ref: HTMLEl
           columns={2}
         >
           <Grid.Column>
-            { valueView[0] }
+            {valueView[0]}
           </Grid.Column>
           <Grid.Column
             textAlign='right'
           >
-            { valueView[1] }
+            {valueView[1]}
           </Grid.Column>
         </Grid>
       </div>

package/src/components/LazyDocument.css

@@ -7,6 +7,7 @@
 .lazy-document.ui.segment .buttons {
   display: flex;
   flex-direction: column;
+  z-index: 1000;
 }
 
 .lazy-document.ui.segment .buttons .ui.button {
@@ -30,3 +31,8 @@
 .lazy-document > .image.hidden {
   display: none;
 }
+
+.pdf-container {
+  width: 200px;
+  height: 300px;
+}

package/src/components/LazyDocument.js

@@ -3,7 +3,6 @@
 import React, { useCallback, useState, type Node } from 'react';
 import { pdfjs, Document, Page } from 'react-pdf';
 import {
-  Button,
   Dimmer,
   Icon,
   Image,
@@ -15,13 +14,7 @@ import {
 import DownloadButton from './DownloadButton';
 import LazyLoader from './LazyLoader';
 
-// These are copied from the react-pdt node_module.  This is for NextJS builds
-// see https://nextjs.org/docs/messages/css-npm
-import './AnnotationLayer.css';
-import './TextLayer.css';
-
 import './LazyDocument.css';
-import ViewPDFButton from './ViewPDFButton';
 
 type Props = {
   children?: Node,
@@ -31,8 +24,6 @@ type Props = {
   image?: any,
   pdf?: boolean,
   preview?: ?string,
-  view?: Boolean,
-  view_url?: String,
   size?: string,
   src?: string
 };
@@ -128,21 +119,12 @@ const LazyDocument = (props: Props) => {
               >
                 <Page
                   pageNumber={1}
+                  renderTextLayer={false}
+                  renderAnnotationLayer={false}
                 />
               </Document>
             </Image>
           )}
-          {!error && loaded && props.view && props.view_url && props.pdf && dimmer && (
-            <Dimmer
-              active={dimmer}
-            >
-              <div
-                className='buttons'
-              >
-                <ViewPDFButton url={props.view_url} primary />
-              </div>
-            </Dimmer>
-          )}
           {(error || (!props.preview && !(props.src && props.pdf))) && (
             <Image
               {...props.image}

package/src/index.js

@@ -38,7 +38,7 @@ export { default as EmbeddedList } from './components/EmbeddedList';
 export { default as Facet } from './components/Facet';
 export { default as FacetClearButton } from './components/FacetClearButton';
 export { default as FacetList } from './components/FacetList';
-// export { default as FacetSlider } from './components/FacetSlider';
+export { default as FacetSlider } from './components/FacetSlider';
 export { default as FacetToggle } from './components/FacetToggle';
 export { default as FileInputButton } from './components/FileInputButton';
 export { default as FileUpload } from './components/FileUpload';

package/types/components/FacetSlider.js.flow

@@ -10,7 +10,7 @@ import React, {
 import { Grid } from 'semantic-ui-react';
 import Facet, { type Props as FacetProps } from './Facet';
 import { type RangeSliderProps } from '../types/InstantSearch';
-import 'rc-slider/assets/index.css';
+
 import './FacetSlider.css';
 
 type Props = FacetProps & RangeSliderProps;
@@ -25,7 +25,7 @@ const FacetSlider = forwardRef(({ useRangeSlider, ...props }: Props, ref: HTMLEl
     refine,
   } = useRangeSlider(props);
 
-  const [valueView, setValueView] = useState<Array<number>>([range.min, range.max]);
+  const [valueView, setValueView] = useState < Array < number >> ([range.min, range.max]);
 
   /**
    * Sets the visibility variable based on the range min and max.
@@ -72,12 +72,12 @@ const FacetSlider = forwardRef(({ useRangeSlider, ...props }: Props, ref: HTMLEl
           columns={2}
         >
           <Grid.Column>
-            { valueView[0] }
+            {valueView[0]}
           </Grid.Column>
           <Grid.Column
             textAlign='right'
           >
-            { valueView[1] }
+            {valueView[1]}
           </Grid.Column>
         </Grid>
       </div>

package/types/components/LazyDocument.js.flow

@@ -3,7 +3,6 @@
 import React, { useCallback, useState, type Node } from 'react';
 import { pdfjs, Document, Page } from 'react-pdf';
 import {
-  Button,
   Dimmer,
   Icon,
   Image,
@@ -15,13 +14,7 @@ import {
 import DownloadButton from './DownloadButton';
 import LazyLoader from './LazyLoader';
 
-// These are copied from the react-pdt node_module.  This is for NextJS builds
-// see https://nextjs.org/docs/messages/css-npm
-import './AnnotationLayer.css';
-import './TextLayer.css';
-
 import './LazyDocument.css';
-import ViewPDFButton from './ViewPDFButton';
 
 type Props = {
   children?: Node,
@@ -31,8 +24,6 @@ type Props = {
   image?: any,
   pdf?: boolean,
   preview?: ?string,
-  view?: Boolean,
-  view_url?: String,
   size?: string,
   src?: string
 };
@@ -128,21 +119,12 @@ const LazyDocument = (props: Props) => {
               >
                 <Page
                   pageNumber={1}
+                  renderTextLayer={false}
+                  renderAnnotationLayer={false}
                 />
               </Document>
             </Image>
           )}
-          {!error && loaded && props.view && props.view_url && props.pdf && dimmer && (
-            <Dimmer
-              active={dimmer}
-            >
-              <div
-                className='buttons'
-              >
-                <ViewPDFButton url={props.view_url} primary />
-              </div>
-            </Dimmer>
-          )}
           {(error || (!props.preview && !(props.src && props.pdf))) && (
             <Image
               {...props.image}

package/types/index.js.flow

@@ -38,7 +38,7 @@ export { default as EmbeddedList } from './components/EmbeddedList';
 export { default as Facet } from './components/Facet';
 export { default as FacetClearButton } from './components/FacetClearButton';
 export { default as FacetList } from './components/FacetList';
-// export { default as FacetSlider } from './components/FacetSlider';
+export { default as FacetSlider } from './components/FacetSlider';
 export { default as FacetToggle } from './components/FacetToggle';
 export { default as FileInputButton } from './components/FileInputButton';
 export { default as FileUpload } from './components/FileUpload';

package/webpack.config.js

@@ -10,6 +10,10 @@ module.exports = configure(__dirname, {
       './react-calendar/dist/Calendar.css$': path.resolve(
         __dirname,
         '../../node_modules/react-calendar/dist/Calendar.css'
+      ),
+      './rc-slider/assets/index.css$': path.resolve(
+        __dirname,
+        '../../node_modules/rc-slider/assets/index.css'
       )
     }
   },

package/src/components/AnnotationLayer.css

@@ -1,329 +0,0 @@
-/* Copyright 2014 Mozilla Foundation
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-:root {
-  --react-pdf-annotation-layer: 1;
-  --annotation-unfocused-field-background: url("data:image/svg+xml;charset=UTF-8,<svg width='1px' height='1px' xmlns='http://www.w3.org/2000/svg'><rect width='100%' height='100%' style='fill:rgba(0, 54, 255, 0.13);'/></svg>");
-  --input-focus-border-color: Highlight;
-  --input-focus-outline: 1px solid Canvas;
-  --input-unfocused-border-color: transparent;
-  --input-disabled-border-color: transparent;
-  --input-hover-border-color: black;
-  --link-outline: none;
-}
-
-@media screen and (forced-colors: active) {
-  :root {
-    --input-focus-border-color: CanvasText;
-    --input-unfocused-border-color: ActiveText;
-    --input-disabled-border-color: GrayText;
-    --input-hover-border-color: Highlight;
-    --link-outline: 1.5px solid LinkText;
-  }
-  .annotationLayer .textWidgetAnnotation :is(input, textarea):required,
-  .annotationLayer .choiceWidgetAnnotation select:required,
-  .annotationLayer .buttonWidgetAnnotation:is(.checkBox, .radioButton) input:required {
-    outline: 1.5px solid selectedItem;
-  }
-
-  .annotationLayer .linkAnnotation:hover {
-    backdrop-filter: invert(100%);
-  }
-}
-
-.annotationLayer {
-  position: absolute;
-  top: 0;
-  left: 0;
-  pointer-events: none;
-  transform-origin: 0 0;
-  z-index: 3;
-}
-
-.annotationLayer[data-main-rotation='90'] .norotate {
-  transform: rotate(270deg) translateX(-100%);
-}
-.annotationLayer[data-main-rotation='180'] .norotate {
-  transform: rotate(180deg) translate(-100%, -100%);
-}
-.annotationLayer[data-main-rotation='270'] .norotate {
-  transform: rotate(90deg) translateY(-100%);
-}
-
-.annotationLayer canvas {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-}
-
-.annotationLayer section {
-  position: absolute;
-  text-align: initial;
-  pointer-events: auto;
-  box-sizing: border-box;
-  margin: 0;
-  transform-origin: 0 0;
-}
-
-.annotationLayer .linkAnnotation {
-  outline: var(--link-outline);
-}
-
-.annotationLayer :is(.linkAnnotation, .buttonWidgetAnnotation.pushButton) > a {
-  position: absolute;
-  font-size: 1em;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-}
-
-.annotationLayer :is(.linkAnnotation, .buttonWidgetAnnotation.pushButton) > a:hover {
-  opacity: 0.2;
-  background: rgba(255, 255, 0, 1);
-  box-shadow: 0 2px 10px rgba(255, 255, 0, 1);
-}
-
-.annotationLayer .textAnnotation img {
-  position: absolute;
-  cursor: pointer;
-  width: 100%;
-  height: 100%;
-  top: 0;
-  left: 0;
-}
-
-.annotationLayer .textWidgetAnnotation :is(input, textarea),
-.annotationLayer .choiceWidgetAnnotation select,
-.annotationLayer .buttonWidgetAnnotation:is(.checkBox, .radioButton) input {
-  background-image: var(--annotation-unfocused-field-background);
-  border: 2px solid var(--input-unfocused-border-color);
-  box-sizing: border-box;
-  font: calc(9px * var(--scale-factor)) sans-serif;
-  height: 100%;
-  margin: 0;
-  vertical-align: top;
-  width: 100%;
-}
-
-.annotationLayer .textWidgetAnnotation :is(input, textarea):required,
-.annotationLayer .choiceWidgetAnnotation select:required,
-.annotationLayer .buttonWidgetAnnotation:is(.checkBox, .radioButton) input:required {
-  outline: 1.5px solid red;
-}
-
-.annotationLayer .choiceWidgetAnnotation select option {
-  padding: 0;
-}
-
-.annotationLayer .buttonWidgetAnnotation.radioButton input {
-  border-radius: 50%;
-}
-
-.annotationLayer .textWidgetAnnotation textarea {
-  resize: none;
-}
-
-.annotationLayer .textWidgetAnnotation :is(input, textarea)[disabled],
-.annotationLayer .choiceWidgetAnnotation select[disabled],
-.annotationLayer .buttonWidgetAnnotation:is(.checkBox, .radioButton) input[disabled] {
-  background: none;
-  border: 2px solid var(--input-disabled-border-color);
-  cursor: not-allowed;
-}
-
-.annotationLayer .textWidgetAnnotation :is(input, textarea):hover,
-.annotationLayer .choiceWidgetAnnotation select:hover,
-.annotationLayer .buttonWidgetAnnotation:is(.checkBox, .radioButton) input:hover {
-  border: 2px solid var(--input-hover-border-color);
-}
-.annotationLayer .textWidgetAnnotation :is(input, textarea):hover,
-.annotationLayer .choiceWidgetAnnotation select:hover,
-.annotationLayer .buttonWidgetAnnotation.checkBox input:hover {
-  border-radius: 2px;
-}
-
-.annotationLayer .textWidgetAnnotation :is(input, textarea):focus,
-.annotationLayer .choiceWidgetAnnotation select:focus {
-  background: none;
-  border: 2px solid var(--input-focus-border-color);
-  border-radius: 2px;
-  outline: var(--input-focus-outline);
-}
-
-.annotationLayer .buttonWidgetAnnotation:is(.checkBox, .radioButton) :focus {
-  background-image: none;
-  background-color: transparent;
-}
-
-.annotationLayer .buttonWidgetAnnotation.checkBox :focus {
-  border: 2px solid var(--input-focus-border-color);
-  border-radius: 2px;
-  outline: var(--input-focus-outline);
-}
-
-.annotationLayer .buttonWidgetAnnotation.radioButton :focus {
-  border: 2px solid var(--input-focus-border-color);
-  outline: var(--input-focus-outline);
-}
-
-.annotationLayer .buttonWidgetAnnotation.checkBox input:checked::before,
-.annotationLayer .buttonWidgetAnnotation.checkBox input:checked::after,
-.annotationLayer .buttonWidgetAnnotation.radioButton input:checked::before {
-  background-color: CanvasText;
-  content: '';
-  display: block;
-  position: absolute;
-}
-
-.annotationLayer .buttonWidgetAnnotation.checkBox input:checked::before,
-.annotationLayer .buttonWidgetAnnotation.checkBox input:checked::after {
-  height: 80%;
-  left: 45%;
-  width: 1px;
-}
-
-.annotationLayer .buttonWidgetAnnotation.checkBox input:checked::before {
-  transform: rotate(45deg);
-}
-
-.annotationLayer .buttonWidgetAnnotation.checkBox input:checked::after {
-  transform: rotate(-45deg);
-}
-
-.annotationLayer .buttonWidgetAnnotation.radioButton input:checked::before {
-  border-radius: 50%;
-  height: 50%;
-  left: 30%;
-  top: 20%;
-  width: 50%;
-}
-
-.annotationLayer .textWidgetAnnotation input.comb {
-  font-family: monospace;
-  padding-left: 2px;
-  padding-right: 0;
-}
-
-.annotationLayer .textWidgetAnnotation input.comb:focus {
-  /*
-   * Letter spacing is placed on the right side of each character. Hence, the
-   * letter spacing of the last character may be placed outside the visible
-   * area, causing horizontal scrolling. We avoid this by extending the width
-   * when the element has focus and revert this when it loses focus.
-   */
-  width: 103%;
-}
-
-.annotationLayer .buttonWidgetAnnotation:is(.checkBox, .radioButton) input {
-  appearance: none;
-}
-
-.annotationLayer .popupTriggerArea {
-  height: 100%;
-  width: 100%;
-}
-
-.annotationLayer .fileAttachmentAnnotation .popupTriggerArea {
-  position: absolute;
-}
-
-.annotationLayer .popupWrapper {
-  position: absolute;
-  font-size: calc(9px * var(--scale-factor));
-  width: 100%;
-  min-width: calc(180px * var(--scale-factor));
-  pointer-events: none;
-}
-
-.annotationLayer .popup {
-  position: absolute;
-  max-width: calc(180px * var(--scale-factor));
-  background-color: rgba(255, 255, 153, 1);
-  box-shadow: 0 calc(2px * var(--scale-factor)) calc(5px * var(--scale-factor))
-    rgba(136, 136, 136, 1);
-  border-radius: calc(2px * var(--scale-factor));
-  padding: calc(6px * var(--scale-factor));
-  margin-left: calc(5px * var(--scale-factor));
-  cursor: pointer;
-  font: message-box;
-  white-space: normal;
-  word-wrap: break-word;
-  pointer-events: auto;
-}
-
-.annotationLayer .popup > * {
-  font-size: calc(9px * var(--scale-factor));
-}
-
-.annotationLayer .popup h1 {
-  display: inline-block;
-}
-
-.annotationLayer .popupDate {
-  display: inline-block;
-  margin-left: calc(5px * var(--scale-factor));
-}
-
-.annotationLayer .popupContent {
-  border-top: 1px solid rgba(51, 51, 51, 1);
-  margin-top: calc(2px * var(--scale-factor));
-  padding-top: calc(2px * var(--scale-factor));
-}
-
-.annotationLayer .richText > * {
-  white-space: pre-wrap;
-  font-size: calc(9px * var(--scale-factor));
-}
-
-.annotationLayer .highlightAnnotation,
-.annotationLayer .underlineAnnotation,
-.annotationLayer .squigglyAnnotation,
-.annotationLayer .strikeoutAnnotation,
-.annotationLayer .freeTextAnnotation,
-.annotationLayer .lineAnnotation svg line,
-.annotationLayer .squareAnnotation svg rect,
-.annotationLayer .circleAnnotation svg ellipse,
-.annotationLayer .polylineAnnotation svg polyline,
-.annotationLayer .polygonAnnotation svg polygon,
-.annotationLayer .caretAnnotation,
-.annotationLayer .inkAnnotation svg polyline,
-.annotationLayer .stampAnnotation,
-.annotationLayer .fileAttachmentAnnotation {
-  cursor: pointer;
-}
-
-.annotationLayer section svg {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  top: 0;
-  left: 0;
-}
-
-.annotationLayer .annotationTextContent {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  opacity: 0;
-  color: transparent;
-  user-select: none;
-  pointer-events: none;
-}
-
-.annotationLayer .annotationTextContent span {
-  width: 100%;
-  display: inline-block;
-}

package/src/components/TextLayer.css

@@ -1,110 +0,0 @@
-/* Copyright 2014 Mozilla Foundation
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-:root {
-  --react-pdf-text-layer: 1;
-  --highlight-bg-color: rgba(180, 0, 170, 1);
-  --highlight-selected-bg-color: rgba(0, 100, 0, 1);
-}
-
-@media screen and (forced-colors: active) {
-  :root {
-    --highlight-bg-color: Highlight;
-    --highlight-selected-bg-color: ButtonText;
-  }
-}
-
-[data-main-rotation='90'] {
-  transform: rotate(90deg) translateY(-100%);
-}
-[data-main-rotation='180'] {
-  transform: rotate(180deg) translate(-100%, -100%);
-}
-[data-main-rotation='270'] {
-  transform: rotate(270deg) translateX(-100%);
-}
-
-.textLayer {
-  position: absolute;
-  text-align: initial;
-  inset: 0;
-  overflow: hidden;
-  line-height: 1;
-  text-size-adjust: none;
-  forced-color-adjust: none;
-  transform-origin: 0 0;
-  z-index: 2;
-}
-
-.textLayer :is(span, br) {
-  color: transparent;
-  position: absolute;
-  white-space: pre;
-  cursor: text;
-  margin: 0;
-  transform-origin: 0 0;
-}
-
-/* Only necessary in Google Chrome, see issue 14205, and most unfortunately
- * the problem doesn't show up in "text" reference tests. */
-.textLayer span.markedContent {
-  top: 0;
-  height: 0;
-}
-
-.textLayer .highlight {
-  margin: -1px;
-  padding: 1px;
-  background-color: var(--highlight-bg-color);
-  border-radius: 4px;
-}
-
-.textLayer .highlight.appended {
-  position: initial;
-}
-
-.textLayer .highlight.begin {
-  border-radius: 4px 0 0 4px;
-}
-
-.textLayer .highlight.end {
-  border-radius: 0 4px 4px 0;
-}
-
-.textLayer .highlight.middle {
-  border-radius: 0;
-}
-
-.textLayer .highlight.selected {
-  background-color: var(--highlight-selected-bg-color);
-}
-
-/* Avoids https://github.com/mozilla/pdf.js/issues/13840 in Chrome */
-.textLayer br::selection {
-  background: transparent;
-}
-
-.textLayer .endOfContent {
-  display: block;
-  position: absolute;
-  inset: 100% 0 0;
-  z-index: -1;
-  cursor: default;
-  user-select: none;
-}
-
-.textLayer .endOfContent.active {
-  top: 0;
-}