@performant-software/semantic-components 1.0.15 → 1.0.16

package/build/main.css

@@ -601,37 +601,6 @@ div.react-calendar {
   aspect-ratio: 1;
 }
 
-.image-carousel > .content {
-  height: 100%;
-  width: 100%;
-}
-.image-carousel > .content > .ui.grid {
-  height: 100%;
-}
-.image-carousel > .content > .ui.grid > .row.image-content {
-  flex-grow: 1;
-}
-.image-carousel > .content > .ui.grid > .row.image-content > .column {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-.image-carousel > .content > .ui.grid > .row.image-content > .column.image-container {
-  flex-grow: 1;
-}
-.image-carousel > .content > .ui.grid > .row.image-content > .column.image-container img {
-  width: 100%;
-  height: auto;
-  max-height: 70vh;
-  object-fit: contain;
-}
-.image-carousel .ui.button,
-.image-carousel .ui.button:hover {
-  border: none;
-  background: none;
-  color: #FFFFFF;
-}
-
 .item-list {
   margin: 1em 0em 1em 0em;
 }
@@ -716,9 +685,6 @@ div.react-calendar {
   width: 100% !important;
   height: 100% !important;
 }
-.lazy-document > .image.hidden {
-  display: none;
-}
 
 .photo-viewer {
   padding: 30px;
@@ -747,9 +713,6 @@ div.react-calendar {
   padding-bottom: 20%;
   text-align: center;
 }
-.lazy-image > .image.hidden {
-  display: none;
-}
 
 .video-player video {
   width: 100%;
@@ -782,9 +745,6 @@ div.react-calendar {
   display: table;
   width: 100%;
 }
-.lazy-video > .image.hidden {
-  display: none;
-}
 
 .listLoader.ui.segment {
   position: absolute;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@performant-software/semantic-components",
-  "version": "1.0.15",
+  "version": "1.0.16",
   "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.0.15",
+    "@performant-software/shared-components": "^1.0.16",
     "@react-google-maps/api": "^2.8.1",
     "axios": "^0.26.1",
     "i18next": "^19.4.4",

package/src/components/FacetList.js

@@ -1,9 +1,16 @@
 // @flow
 
-import React, { useEffect } from 'react';
+import { Timer } from '@performant-software/shared-components';
+import React, {
+  useCallback,
+  useEffect,
+  useRef,
+  useState
+} from 'react';
 import {
   Checkbox,
   Icon,
+  Input,
   Label,
   List
 } from 'semantic-ui-react';
@@ -14,7 +21,8 @@ import LinkButton from './LinkButton';
 import { type RefinementListProps } from '../types/InstantSearch';
 
 type Props = FacetProps & RefinementListProps & {
-  defaultValue?: string
+  defaultValue?: string,
+  searchable?: boolean
 };
 
 const FacetList = ({ useRefinementList, ...props }: Props) => {
@@ -23,9 +31,39 @@ const FacetList = ({ useRefinementList, ...props }: Props) => {
     refine,
     canToggleShowMore,
     isShowingMore,
+    searchForItems,
     toggleShowMore,
   } = useRefinementList(props);
 
+  const ref = useRef();
+  const [query, setQuery] = useState('');
+
+  /**
+   * Clears the current search state.
+   *
+   * @type {(function(): void)|*}
+   */
+  const onClear = useCallback(() => {
+    // Reset the query view
+    setQuery('');
+
+    // Reset the list of refinements
+    searchForItems();
+
+    // Refocus the input element
+    const { current: instance } = ref;
+    if (instance) {
+      instance.focus();
+    }
+  }, []);
+
+  /**
+   * Executes the search within the list of facet values.
+   *
+   * @type {function(): *}
+   */
+  const onSearch = useCallback(() => searchForItems(query), [query, searchForItems]);
+
   /**
    * Sets the default value if provided.
    */
@@ -36,9 +74,18 @@ const FacetList = ({ useRefinementList, ...props }: Props) => {
   }, [props.defaultValue]);
 
   /**
-   * Do not render the component if no items are present.
+   * Persist the facet search when a user selects or deselects items.
+   */
+  useEffect(() => {
+    if (query) {
+      searchForItems(query);
+    }
+  }, [items]);
+
+  /**
+   * Do not render the component if no items are present and no query has been entered.
    */
-  if (_.isEmpty(items)) {
+  if (_.isEmpty(items) && _.isEmpty(query)) {
     return null;
   }
 
@@ -48,6 +95,24 @@ const FacetList = ({ useRefinementList, ...props }: Props) => {
       divided={props.divided}
       title={props.title}
     >
+      { props.searchable && (
+        <Input
+          icon={query && (
+            <Icon
+              link
+              name='times'
+              onClick={onClear}
+            />
+          )}
+          fluid
+          onChange={(e, { value }) => setQuery(value)}
+          onKeyDown={() => Timer.clearSearchTimer()}
+          onKeyUp={() => Timer.setSearchTimer(onSearch)}
+          placeholder={i18n.t('FacetList.labels.search')}
+          ref={ref}
+          value={query}
+        />
+      )}
       <List
         className='facet-list'
       >

package/src/components/LazyDocument.css

@@ -26,7 +26,3 @@
   width: 100% !important;
   height: 100% !important;
 }
-
-.lazy-document > .image.hidden {
-  display: none;
-}

package/src/components/LazyDocument.js

@@ -1,6 +1,6 @@
 // @flow
 
-import React, { useCallback, useState, type Node } from 'react';
+import React, { useState, type Node } from 'react';
 import { pdfjs, Document, Page } from 'react-pdf';
 import {
   Dimmer,
@@ -38,25 +38,6 @@ const LazyDocument = (props: Props) => {
   const [loaded, setLoaded] = useState(!props.preview);
   const [visible, setVisible] = useState(false);
 
-  /**
-   * Returns the list of class names for the image component.
-   *
-   * @type {function(*=): []}
-   */
-  const getClassNames = useCallback((defaultClass = null) => {
-    const classNames = [];
-
-    if (defaultClass) {
-      classNames.push(defaultClass);
-    }
-
-    if (!loaded) {
-      classNames.push('hidden');
-    }
-
-    return classNames.join(' ');
-  }, [loaded]);
-
   if (!visible) {
     return (
       <Visibility
@@ -96,7 +77,6 @@ const LazyDocument = (props: Props) => {
           { !error && props.preview && (
             <Image
               {...props.image}
-              className={getClassNames()}
               onError={() => {
                 setError(true);
                 setLoaded(true);
@@ -112,7 +92,6 @@ const LazyDocument = (props: Props) => {
           { !error && loaded && !props.preview && props.src && props.pdf && (
             <Image
               {...props.image}
-              className={getClassNames()}
               size={props.size}
             >
               <Document
@@ -128,7 +107,7 @@ const LazyDocument = (props: Props) => {
           { (error || (!props.preview && !(props.src && props.pdf))) && (
             <Image
               {...props.image}
-              className={getClassNames('placeholder-image')}
+              className='placeholder-image'
               size={props.size}
             >
               <Icon

package/src/components/LazyImage.css

@@ -21,7 +21,3 @@
   padding-bottom: 20%;
   text-align: center;
 }
-
-.lazy-image > .image.hidden {
-  display: none;
-}

package/src/components/LazyImage.js

@@ -1,6 +1,6 @@
 // @flow
 
-import React, { useCallback, useState, type Node } from 'react';
+import React, { useState, type Node } from 'react';
 import {
   Button,
   Dimmer,
@@ -36,25 +36,6 @@ const LazyImage = (props: Props) => {
   const [modal, setModal] = useState(false);
   const [visible, setVisible] = useState(false);
 
-  /**
-   * Returns the list of class names for the image component.
-   *
-   * @type {function(*=): []}
-   */
-  const getClassNames = useCallback((defaultClass = null) => {
-    const classNames = [];
-
-    if (defaultClass) {
-      classNames.push(defaultClass);
-    }
-
-    if (!loaded) {
-      classNames.push('hidden');
-    }
-
-    return classNames.join(' ');
-  }, [loaded]);
-
   if (!visible) {
     return (
       <Visibility
@@ -94,7 +75,6 @@ const LazyImage = (props: Props) => {
           { !error && (props.preview || props.src) && (
             <Image
               {...props.image}
-              className={getClassNames()}
               onError={() => {
                 setError(true);
                 setLoaded(true);
@@ -110,7 +90,7 @@ const LazyImage = (props: Props) => {
           { (error || !(props.preview || props.src)) && (
             <Image
               {...props.image}
-              className={getClassNames('placeholder-image')}
+              className='placeholder-image'
               size={props.size}
             >
               <Icon

package/src/components/LazyVideo.css

@@ -26,7 +26,3 @@
   display: table;
   width: 100%;
 }
-
-.lazy-video > .image.hidden {
-  display: none;
-}

package/src/components/LazyVideo.js

@@ -1,11 +1,6 @@
 // @flow
 
-import React, {
-  useCallback,
-  useState,
-  type Element,
-  type Node
-} from 'react';
+import React, { useState, type Element, type Node } from 'react';
 import {
   Button,
   Dimmer,
@@ -44,25 +39,6 @@ const LazyVideo = (props: Props) => {
   const [modal, setModal] = useState(false);
   const [visible, setVisible] = useState(false);
 
-  /**
-   * Returns the list of class names for the image component.
-   *
-   * @type {function(*=): []}
-   */
-  const getClassNames = useCallback((defaultClass = null) => {
-    const classNames = [];
-
-    if (defaultClass) {
-      classNames.push(defaultClass);
-    }
-
-    if (!loaded) {
-      classNames.push('hidden');
-    }
-
-    return classNames.join(' ');
-  }, [loaded]);
-
   if (!visible) {
     return (
       <Visibility
@@ -102,7 +78,6 @@ const LazyVideo = (props: Props) => {
           { !error && props.preview && (
             <Image
               {...props.image}
-              className={getClassNames()}
               onError={() => {
                 setError(true);
                 setLoaded(true);
@@ -118,7 +93,6 @@ const LazyVideo = (props: Props) => {
           { !error && !props.preview && props.src && (
             <Image
               {...props.image}
-              className={getClassNames()}
               size={props.size}
             >
               <video
@@ -137,7 +111,7 @@ const LazyVideo = (props: Props) => {
           { (error || (!props.preview && !props.src)) && (
             <Image
               {...props.image}
-              className={getClassNames('placeholder-image')}
+              className='placeholder-image'
               size={props.size}
             >
               <Icon

package/src/i18n/en.json

@@ -129,6 +129,9 @@
     "buttons": {
       "showLess": "Show Less",
       "showMore": "Show More"
+    },
+    "labels": {
+      "search": "Search"
     }
   },
   "FileUpload": {

package/src/index.js

@@ -45,7 +45,6 @@ export { default as GoogleMap } from './components/GoogleMap';
 export { default as GooglePlacesSearch } from './components/GooglePlacesSearch';
 export { default as HorizontalCards } from './components/HorizontalCards';
 export { default as IIIFModal } from './components/IIIFModal';
-export { default as ImageCarousel } from './components/ImageCarousel';
 export { default as ItemCollection } from './components/ItemCollection';
 export { default as ItemList } from './components/ItemList';
 export { default as Items } from './components/Items';

package/types/components/FacetList.js.flow

@@ -1,9 +1,16 @@
 // @flow
 
-import React, { useEffect } from 'react';
+import { Timer } from '@performant-software/shared-components';
+import React, {
+  useCallback,
+  useEffect,
+  useRef,
+  useState
+} from 'react';
 import {
   Checkbox,
   Icon,
+  Input,
   Label,
   List
 } from 'semantic-ui-react';
@@ -14,7 +21,8 @@ import LinkButton from './LinkButton';
 import { type RefinementListProps } from '../types/InstantSearch';
 
 type Props = FacetProps & RefinementListProps & {
-  defaultValue?: string
+  defaultValue?: string,
+  searchable?: boolean
 };
 
 const FacetList = ({ useRefinementList, ...props }: Props) => {
@@ -23,9 +31,39 @@ const FacetList = ({ useRefinementList, ...props }: Props) => {
     refine,
     canToggleShowMore,
     isShowingMore,
+    searchForItems,
     toggleShowMore,
   } = useRefinementList(props);
 
+  const ref = useRef();
+  const [query, setQuery] = useState('');
+
+  /**
+   * Clears the current search state.
+   *
+   * @type {(function(): void)|*}
+   */
+  const onClear = useCallback(() => {
+    // Reset the query view
+    setQuery('');
+
+    // Reset the list of refinements
+    searchForItems();
+
+    // Refocus the input element
+    const { current: instance } = ref;
+    if (instance) {
+      instance.focus();
+    }
+  }, []);
+
+  /**
+   * Executes the search within the list of facet values.
+   *
+   * @type {function(): *}
+   */
+  const onSearch = useCallback(() => searchForItems(query), [query, searchForItems]);
+
   /**
    * Sets the default value if provided.
    */
@@ -36,9 +74,18 @@ const FacetList = ({ useRefinementList, ...props }: Props) => {
   }, [props.defaultValue]);
 
   /**
-   * Do not render the component if no items are present.
+   * Persist the facet search when a user selects or deselects items.
+   */
+  useEffect(() => {
+    if (query) {
+      searchForItems(query);
+    }
+  }, [items]);
+
+  /**
+   * Do not render the component if no items are present and no query has been entered.
    */
-  if (_.isEmpty(items)) {
+  if (_.isEmpty(items) && _.isEmpty(query)) {
     return null;
   }
 
@@ -48,6 +95,24 @@ const FacetList = ({ useRefinementList, ...props }: Props) => {
       divided={props.divided}
       title={props.title}
     >
+      { props.searchable && (
+        <Input
+          icon={query && (
+            <Icon
+              link
+              name='times'
+              onClick={onClear}
+            />
+          )}
+          fluid
+          onChange={(e, { value }) => setQuery(value)}
+          onKeyDown={() => Timer.clearSearchTimer()}
+          onKeyUp={() => Timer.setSearchTimer(onSearch)}
+          placeholder={i18n.t('FacetList.labels.search')}
+          ref={ref}
+          value={query}
+        />
+      )}
       <List
         className='facet-list'
       >

package/types/components/LazyDocument.js.flow

@@ -1,6 +1,6 @@
 // @flow
 
-import React, { useCallback, useState, type Node } from 'react';
+import React, { useState, type Node } from 'react';
 import { pdfjs, Document, Page } from 'react-pdf';
 import {
   Dimmer,
@@ -38,25 +38,6 @@ const LazyDocument = (props: Props) => {
   const [loaded, setLoaded] = useState(!props.preview);
   const [visible, setVisible] = useState(false);
 
-  /**
-   * Returns the list of class names for the image component.
-   *
-   * @type {function(*=): []}
-   */
-  const getClassNames = useCallback((defaultClass = null) => {
-    const classNames = [];
-
-    if (defaultClass) {
-      classNames.push(defaultClass);
-    }
-
-    if (!loaded) {
-      classNames.push('hidden');
-    }
-
-    return classNames.join(' ');
-  }, [loaded]);
-
   if (!visible) {
     return (
       <Visibility
@@ -96,7 +77,6 @@ const LazyDocument = (props: Props) => {
           { !error && props.preview && (
             <Image
               {...props.image}
-              className={getClassNames()}
               onError={() => {
                 setError(true);
                 setLoaded(true);
@@ -112,7 +92,6 @@ const LazyDocument = (props: Props) => {
           { !error && loaded && !props.preview && props.src && props.pdf && (
             <Image
               {...props.image}
-              className={getClassNames()}
               size={props.size}
             >
               <Document
@@ -128,7 +107,7 @@ const LazyDocument = (props: Props) => {
           { (error || (!props.preview && !(props.src && props.pdf))) && (
             <Image
               {...props.image}
-              className={getClassNames('placeholder-image')}
+              className='placeholder-image'
               size={props.size}
             >
               <Icon

package/types/components/LazyImage.js.flow

@@ -1,6 +1,6 @@
 // @flow
 
-import React, { useCallback, useState, type Node } from 'react';
+import React, { useState, type Node } from 'react';
 import {
   Button,
   Dimmer,
@@ -36,25 +36,6 @@ const LazyImage = (props: Props) => {
   const [modal, setModal] = useState(false);
   const [visible, setVisible] = useState(false);
 
-  /**
-   * Returns the list of class names for the image component.
-   *
-   * @type {function(*=): []}
-   */
-  const getClassNames = useCallback((defaultClass = null) => {
-    const classNames = [];
-
-    if (defaultClass) {
-      classNames.push(defaultClass);
-    }
-
-    if (!loaded) {
-      classNames.push('hidden');
-    }
-
-    return classNames.join(' ');
-  }, [loaded]);
-
   if (!visible) {
     return (
       <Visibility
@@ -94,7 +75,6 @@ const LazyImage = (props: Props) => {
           { !error && (props.preview || props.src) && (
             <Image
               {...props.image}
-              className={getClassNames()}
               onError={() => {
                 setError(true);
                 setLoaded(true);
@@ -110,7 +90,7 @@ const LazyImage = (props: Props) => {
           { (error || !(props.preview || props.src)) && (
             <Image
               {...props.image}
-              className={getClassNames('placeholder-image')}
+              className='placeholder-image'
               size={props.size}
             >
               <Icon

package/types/components/LazyVideo.js.flow

@@ -1,11 +1,6 @@
 // @flow
 
-import React, {
-  useCallback,
-  useState,
-  type Element,
-  type Node
-} from 'react';
+import React, { useState, type Element, type Node } from 'react';
 import {
   Button,
   Dimmer,
@@ -44,25 +39,6 @@ const LazyVideo = (props: Props) => {
   const [modal, setModal] = useState(false);
   const [visible, setVisible] = useState(false);
 
-  /**
-   * Returns the list of class names for the image component.
-   *
-   * @type {function(*=): []}
-   */
-  const getClassNames = useCallback((defaultClass = null) => {
-    const classNames = [];
-
-    if (defaultClass) {
-      classNames.push(defaultClass);
-    }
-
-    if (!loaded) {
-      classNames.push('hidden');
-    }
-
-    return classNames.join(' ');
-  }, [loaded]);
-
   if (!visible) {
     return (
       <Visibility
@@ -102,7 +78,6 @@ const LazyVideo = (props: Props) => {
           { !error && props.preview && (
             <Image
               {...props.image}
-              className={getClassNames()}
               onError={() => {
                 setError(true);
                 setLoaded(true);
@@ -118,7 +93,6 @@ const LazyVideo = (props: Props) => {
           { !error && !props.preview && props.src && (
             <Image
               {...props.image}
-              className={getClassNames()}
               size={props.size}
             >
               <video
@@ -137,7 +111,7 @@ const LazyVideo = (props: Props) => {
           { (error || (!props.preview && !props.src)) && (
             <Image
               {...props.image}
-              className={getClassNames('placeholder-image')}
+              className='placeholder-image'
               size={props.size}
             >
               <Icon