@performant-software/semantic-components 1.1.6-beta.1 → 1.1.6

package/build/main.css

@@ -976,388 +976,6 @@ div.react-calendar {
   text-align: center;
 }
 
-/* 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: #ffff00;
-  box-shadow: 0 2px 10px #ffff00;
-}
-.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: #ffff99;
-  box-shadow: 0 calc(2px * var(--scale-factor)) calc(5px * var(--scale-factor)) #888888;
-  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 #333333;
-  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;
-}
-
-/* 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: #b400aa;
-  --highlight-selected-bg-color: #006400;
-}
-@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;
-}
-
 .lazy-document.ui.segment {
   display: inline-block !important;
   max-width: 100%;
@@ -1366,6 +984,7 @@ div.react-calendar {
 .lazy-document.ui.segment .buttons {
   display: flex;
   flex-direction: column;
+  z-index: 1000;
 }
 .lazy-document.ui.segment .buttons .ui.button {
   margin-top: 5px;
@@ -1385,6 +1004,10 @@ div.react-calendar {
 .lazy-document > .image.hidden {
   display: none;
 }
+.pdf-container {
+  width: 200px;
+  height: 300px;
+}
 
 .photo-viewer {
   padding: 30px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@performant-software/semantic-components",
-  "version": "1.1.6-beta.1",
+  "version": "1.1.6",
   "description": "A package of shared components based on the Semantic UI Framework.",
   "license": "MIT",
   "main": "./build/index.js",
@@ -12,7 +12,7 @@
     "build": "webpack --mode production && flow-copy-source -v src types"
   },
   "dependencies": {
-    "@performant-software/shared-components": "^1.1.6-beta.1",
+    "@performant-software/shared-components": "^1.1.6",
     "@react-google-maps/api": "^2.8.1",
     "axios": "^0.26.1",
     "i18next": "^19.4.4",

package/src/components/DataTableColumnSelector.js

@@ -144,9 +144,7 @@ const useColumnSelector = (WrappedComponent: ComponentType<any>) => (
           {...this.props}
           className={`data-table-column-selector ${this.props.className}`}
           columns={this.state.columns}
-          renderListHeader={this.props.configurable
-            ? this.renderHeader.bind(this)
-            : undefined}
+          renderListHeader={this.renderHeader.bind(this)}
         />
       );
     }
@@ -157,45 +155,51 @@ const useColumnSelector = (WrappedComponent: ComponentType<any>) => (
      * @returns {*}
      */
     renderHeader() {
+      if (!(this.props.configurable || this.props.renderListHeader)) {
+        return null;
+      }
+
       return (
         <>
           { this.props.renderListHeader && this.props.renderListHeader() }
-          <Dropdown
-            aria-label='Select Columns'
-            basic
-            button
-            icon='cog'
-            className='icon configure-button open-right'
-            closeOnBlur={false}
-          >
-            <Dropdown.Menu>
-              { this.state.columns
-                .filter((c) => c.label && c.label.length)
-                .map((c, index) => (
-                  <Draggable
-                    id={c.name}
-                    index={index}
-                    key={c.name}
-                    onDrag={this.onDrag.bind(this)}
-                  >
-                    <Dropdown.Item
-                      aria-dropeffect='move'
-                      onClick={(e) => e.stopPropagation()}
+          { this.props.configurable && (
+            <Dropdown
+              aria-label='Select Columns'
+              basic
+              button
+              icon='cog'
+              className='icon configure-button open-right'
+              closeOnBlur={false}
+            >
+              <Dropdown.Menu>
+                { this.state.columns
+                  .filter((c) => c.label && c.label.length)
+                  .map((c, index) => (
+                    <Draggable
+                      id={c.name}
+                      index={index}
+                      key={c.name}
+                      onDrag={this.onDrag.bind(this)}
                     >
-                      <Icon
-                        name='bars'
-                      />
-                      <Checkbox
-                        aria-label='Select Column'
-                        checked={!c.hidden}
-                        label={c.label}
-                        onClick={this.onColumnCheckbox.bind(this, c)}
-                      />
-                    </Dropdown.Item>
-                  </Draggable>
-                ))}
-            </Dropdown.Menu>
-          </Dropdown>
+                      <Dropdown.Item
+                        aria-dropeffect='move'
+                        onClick={(e) => e.stopPropagation()}
+                      >
+                        <Icon
+                          name='bars'
+                        />
+                        <Checkbox
+                          aria-label='Select Column'
+                          checked={!c.hidden}
+                          label={c.label}
+                          onClick={this.onColumnCheckbox.bind(this, c)}
+                        />
+                      </Dropdown.Item>
+                    </Draggable>
+                  ))}
+              </Dropdown.Menu>
+            </Dropdown>
+          )}
         </>
       );
     }

package/src/components/FacetSlider.css

@@ -1,3 +1,5 @@
+@import 'rc-slider/assets/index.css';
+
 .facet-slider > .ui.grid {
   margin-top: 0em;
 }

package/src/components/FacetSlider.js

@@ -11,10 +11,6 @@ import { Grid } from 'semantic-ui-react';
 import Facet, { type Props as FacetProps } from './Facet';
 import { type RangeSliderProps } from '../types/InstantSearch';
 
-// This is copied from the rc-slider node_module.  SO update if updating versions
-// See https://nextjs.org/docs/messages/css-npm
-import './rc-slider.css';
-
 import './FacetSlider.css';
 
 type Props = FacetProps & RangeSliderProps;

package/src/components/ItemsToggle.js

@@ -17,6 +17,7 @@ type Props = {
   defaultView?: number,
   hideToggle?: boolean,
   onSort?: (sortColumn: string, sortDirection?: ?string) => void,
+  renderListHeader?: () => JSX.Element,
   sort?: Array<Sort>,
   sortColor?: string,
   sortColumn?: string,
@@ -80,7 +81,7 @@ const useItemsToggle = (WrappedComponent: ComponentType<any>) => (
      * @returns {boolean|*}
      */
     isHidden() {
-      return this.props.hideToggle && _.isEmpty(this.props.sort);
+      return this.props.hideToggle && _.isEmpty(this.props.sort) && !this.props.renderListHeader;
     }
 
     /**
@@ -110,14 +111,10 @@ const useItemsToggle = (WrappedComponent: ComponentType<any>) => (
      * @returns {*}
      */
     render() {
-      const renderListHeader = this.isHidden()
-        ? undefined
-        : this.renderHeader.bind(this);
-
       return (
         <WrappedComponent
           {...this.props}
-          renderListHeader={renderListHeader}
+          renderListHeader={this.renderHeader.bind(this)}
           view={this.state.view}
         />
       );
@@ -139,6 +136,7 @@ const useItemsToggle = (WrappedComponent: ComponentType<any>) => (
 
       return (
         <>
+          { this.props.renderListHeader && this.props.renderListHeader() }
           { !this.props.hideToggle && (
             <>
               <Button

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/components/List.js

@@ -197,6 +197,11 @@ type Props = {
    */
   renderSearch?: () => Element<any>,
 
+  /**
+   * Returns true if the renderSearch prop should be used to render a search input element.
+   */
+  searchable?: boolean,
+
   /**
    * If set to <code>true</code>, checkboxes will render as the first table column, allowing each row to be selectable.
    * The consuming component is responsible for tracking the selected items.
@@ -841,10 +846,15 @@ const useList = (WrappedComponent: ComponentType<any>) => (
         filters,
         perPageOptions,
         renderListHeader,
-        renderSearch
+        renderSearch,
+        searchable
       } = this.props;
 
-      if (filters || perPageOptions || renderListHeader || renderSearch) {
+      const hasFilters = filters && filters.component;
+      const hasSearch = searchable && renderSearch;
+      const headerContent = renderListHeader && renderListHeader();
+
+      if (hasFilters || perPageOptions || headerContent || hasSearch) {
         renderHeader = true;
       }
 
@@ -879,9 +889,9 @@ const useList = (WrappedComponent: ComponentType<any>) => (
                   secondary
                   className='flex-end-menu'
                 >
-                  { renderListHeader && (
+                  { headerContent && (
                     <Menu.Menu className='list-header-menu'>
-                      { renderListHeader() }
+                      { headerContent }
                     </Menu.Menu>
                   )}
                   <Menu.Menu>