@performant-software/semantic-components 1.0.18-beta.9 → 1.0.18

package/package.json

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

package/src/components/Facet.js

@@ -1,6 +1,11 @@
 // @flow
 
-import React, { useState, type Node, useMemo } from 'react';
+import React, {
+  useImperativeHandle,
+  useMemo,
+  useState,
+  type Node
+} from 'react';
 import {
   Accordion,
   Divider,
@@ -30,6 +35,13 @@ type Props = {
    */
   divided?: boolean,
 
+  /**
+   * React ref element to apply to the expand/collapse functions.
+   */
+  innerRef?: {
+    current: ?HTMLElement
+  },
+
   /**
    * Facet title to display at the top.
    */
@@ -66,6 +78,14 @@ const Facet = (props: Props) => {
     return classNames.join(' ');
   }, [props.className, props.visible]);
 
+  /**
+   * Expose collapse/expand functions on the ref object to allow parent components to imperatively open/close.
+   */
+  useImperativeHandle(props.innerRef, () => ({
+    collapse: () => setActive(false),
+    expand: () => setActive(true)
+  }));
+
   return (
     <>
       <Accordion

package/src/components/FacetList.js

@@ -2,8 +2,10 @@
 
 import { Timer } from '@performant-software/shared-components';
 import React, {
+  forwardRef,
   useCallback,
-  useEffect, useMemo,
+  useEffect,
+  useMemo,
   useRef,
   useState
 } from 'react';
@@ -50,7 +52,7 @@ const OPERATOR_AND = 'and';
  * This component is used with the `useRefinementList` hook from Instant Search Hooks. If the `searchable` prop
  * is "true", the component will also render a search box used to filter the list of facet values.
  */
-const FacetList = ({ useRefinementList, ...props }: Props) => {
+const FacetList = forwardRef(({ useRefinementList, ...props }: Props, ref: HTMLElement) => {
   const [operator, setOperator] = useState(props.defaultOperator || OPERATOR_OR);
 
   const {
@@ -63,7 +65,7 @@ const FacetList = ({ useRefinementList, ...props }: Props) => {
     toggleShowMore,
   } = useRefinementList({ ...props, operator });
 
-  const ref = useRef();
+  const searchRef = useRef();
   const [query, setQuery] = useState('');
 
   /**
@@ -79,7 +81,7 @@ const FacetList = ({ useRefinementList, ...props }: Props) => {
     searchForItems();
 
     // Refocus the input element
-    const { current: instance } = ref;
+    const { current: instance } = searchRef;
     if (instance) {
       instance.focus();
     }
@@ -129,6 +131,7 @@ const FacetList = ({ useRefinementList, ...props }: Props) => {
       className='facet-list'
       defaultActive={props.defaultActive}
       divided={props.divided}
+      innerRef={ref}
       title={props.title}
       visible={visible}
     >
@@ -146,7 +149,7 @@ const FacetList = ({ useRefinementList, ...props }: Props) => {
           onKeyDown={() => Timer.clearSearchTimer()}
           onKeyUp={() => Timer.setSearchTimer(onSearch)}
           placeholder={i18n.t('FacetList.labels.search')}
-          ref={ref}
+          ref={searchRef}
           value={query}
         />
       )}
@@ -202,7 +205,7 @@ const FacetList = ({ useRefinementList, ...props }: Props) => {
       )}
     </Facet>
   );
-};
+});
 
 FacetList.defaultProps = {
   ...Facet.defaultProps,

package/src/components/FacetSlider.js

@@ -1,7 +1,12 @@
 // @flow
 
 import Slider from 'rc-slider';
-import React, { useEffect, useMemo, useState } from 'react';
+import React, {
+  forwardRef,
+  useEffect,
+  useMemo,
+  useState
+} from 'react';
 import { Grid } from 'semantic-ui-react';
 import Facet, { type Props as FacetProps } from './Facet';
 import { type RangeSliderProps } from '../types/InstantSearch';
@@ -13,7 +18,7 @@ type Props = FacetProps & RangeSliderProps;
 /**
  * This component can be used with the `useRange` hook from Instant Search Hooks.
  */
-const FacetSlider = ({ useRangeSlider, ...props }: Props) => {
+const FacetSlider = forwardRef(({ useRangeSlider, ...props }: Props, ref: HTMLElement) => {
   const {
     start,
     range,
@@ -42,6 +47,7 @@ const FacetSlider = ({ useRangeSlider, ...props }: Props) => {
     <Facet
       defaultActive={props.defaultActive}
       divided={props.divided}
+      innerRef={ref}
       title={props.title}
       visible={visible}
     >
@@ -77,7 +83,7 @@ const FacetSlider = ({ useRangeSlider, ...props }: Props) => {
       </div>
     </Facet>
   );
-};
+});
 
 FacetSlider.defaultProps = Facet.defaultProps;
 

package/src/components/FacetToggle.js

@@ -1,6 +1,6 @@
 // @flow
 
-import React, { useMemo } from 'react';
+import React, { forwardRef, useMemo } from 'react';
 import { Checkbox, Label } from 'semantic-ui-react';
 import Facet, { type Props as FacetProps } from './Facet';
 import { type ToggleRefinementProps } from '../types/InstantSearch';
@@ -10,7 +10,7 @@ type Props = FacetProps & ToggleRefinementProps;
 /**
  * This component is used with the `useToggleRefinement` hook from Instant Search Hooks.
  */
-const FacetToggle = ({ useToggleRefinement, ...props }: Props) => {
+const FacetToggle = forwardRef(({ useToggleRefinement, ...props }: Props, ref: HTMLElement) => {
   const {
     value: {
       isRefined,
@@ -30,6 +30,7 @@ const FacetToggle = ({ useToggleRefinement, ...props }: Props) => {
     <Facet
       defaultActive={props.defaultActive}
       divided={props.divided}
+      innerRef={ref}
       title={props.title}
       visible={visible}
     >
@@ -49,7 +50,7 @@ const FacetToggle = ({ useToggleRefinement, ...props }: Props) => {
       />
     </Facet>
   );
-};
+});
 
 FacetToggle.defaultProps = Facet.defaultProps;
 

package/types/components/Facet.js.flow

@@ -1,6 +1,11 @@
 // @flow
 
-import React, { useState, type Node, useMemo } from 'react';
+import React, {
+  useImperativeHandle,
+  useMemo,
+  useState,
+  type Node
+} from 'react';
 import {
   Accordion,
   Divider,
@@ -30,6 +35,13 @@ type Props = {
    */
   divided?: boolean,
 
+  /**
+   * React ref element to apply to the expand/collapse functions.
+   */
+  innerRef?: {
+    current: ?HTMLElement
+  },
+
   /**
    * Facet title to display at the top.
    */
@@ -66,6 +78,14 @@ const Facet = (props: Props) => {
     return classNames.join(' ');
   }, [props.className, props.visible]);
 
+  /**
+   * Expose collapse/expand functions on the ref object to allow parent components to imperatively open/close.
+   */
+  useImperativeHandle(props.innerRef, () => ({
+    collapse: () => setActive(false),
+    expand: () => setActive(true)
+  }));
+
   return (
     <>
       <Accordion

package/types/components/FacetList.js.flow

@@ -2,8 +2,10 @@
 
 import { Timer } from '@performant-software/shared-components';
 import React, {
+  forwardRef,
   useCallback,
-  useEffect, useMemo,
+  useEffect,
+  useMemo,
   useRef,
   useState
 } from 'react';
@@ -50,7 +52,7 @@ const OPERATOR_AND = 'and';
  * This component is used with the `useRefinementList` hook from Instant Search Hooks. If the `searchable` prop
  * is "true", the component will also render a search box used to filter the list of facet values.
  */
-const FacetList = ({ useRefinementList, ...props }: Props) => {
+const FacetList = forwardRef(({ useRefinementList, ...props }: Props, ref: HTMLElement) => {
   const [operator, setOperator] = useState(props.defaultOperator || OPERATOR_OR);
 
   const {
@@ -63,7 +65,7 @@ const FacetList = ({ useRefinementList, ...props }: Props) => {
     toggleShowMore,
   } = useRefinementList({ ...props, operator });
 
-  const ref = useRef();
+  const searchRef = useRef();
   const [query, setQuery] = useState('');
 
   /**
@@ -79,7 +81,7 @@ const FacetList = ({ useRefinementList, ...props }: Props) => {
     searchForItems();
 
     // Refocus the input element
-    const { current: instance } = ref;
+    const { current: instance } = searchRef;
     if (instance) {
       instance.focus();
     }
@@ -129,6 +131,7 @@ const FacetList = ({ useRefinementList, ...props }: Props) => {
       className='facet-list'
       defaultActive={props.defaultActive}
       divided={props.divided}
+      innerRef={ref}
       title={props.title}
       visible={visible}
     >
@@ -146,7 +149,7 @@ const FacetList = ({ useRefinementList, ...props }: Props) => {
           onKeyDown={() => Timer.clearSearchTimer()}
           onKeyUp={() => Timer.setSearchTimer(onSearch)}
           placeholder={i18n.t('FacetList.labels.search')}
-          ref={ref}
+          ref={searchRef}
           value={query}
         />
       )}
@@ -202,7 +205,7 @@ const FacetList = ({ useRefinementList, ...props }: Props) => {
       )}
     </Facet>
   );
-};
+});
 
 FacetList.defaultProps = {
   ...Facet.defaultProps,

package/types/components/FacetSlider.js.flow

@@ -1,7 +1,12 @@
 // @flow
 
 import Slider from 'rc-slider';
-import React, { useEffect, useMemo, useState } from 'react';
+import React, {
+  forwardRef,
+  useEffect,
+  useMemo,
+  useState
+} from 'react';
 import { Grid } from 'semantic-ui-react';
 import Facet, { type Props as FacetProps } from './Facet';
 import { type RangeSliderProps } from '../types/InstantSearch';
@@ -13,7 +18,7 @@ type Props = FacetProps & RangeSliderProps;
 /**
  * This component can be used with the `useRange` hook from Instant Search Hooks.
  */
-const FacetSlider = ({ useRangeSlider, ...props }: Props) => {
+const FacetSlider = forwardRef(({ useRangeSlider, ...props }: Props, ref: HTMLElement) => {
   const {
     start,
     range,
@@ -42,6 +47,7 @@ const FacetSlider = ({ useRangeSlider, ...props }: Props) => {
     <Facet
       defaultActive={props.defaultActive}
       divided={props.divided}
+      innerRef={ref}
       title={props.title}
       visible={visible}
     >
@@ -77,7 +83,7 @@ const FacetSlider = ({ useRangeSlider, ...props }: Props) => {
       </div>
     </Facet>
   );
-};
+});
 
 FacetSlider.defaultProps = Facet.defaultProps;
 

package/types/components/FacetToggle.js.flow

@@ -1,6 +1,6 @@
 // @flow
 
-import React, { useMemo } from 'react';
+import React, { forwardRef, useMemo } from 'react';
 import { Checkbox, Label } from 'semantic-ui-react';
 import Facet, { type Props as FacetProps } from './Facet';
 import { type ToggleRefinementProps } from '../types/InstantSearch';
@@ -10,7 +10,7 @@ type Props = FacetProps & ToggleRefinementProps;
 /**
  * This component is used with the `useToggleRefinement` hook from Instant Search Hooks.
  */
-const FacetToggle = ({ useToggleRefinement, ...props }: Props) => {
+const FacetToggle = forwardRef(({ useToggleRefinement, ...props }: Props, ref: HTMLElement) => {
   const {
     value: {
       isRefined,
@@ -30,6 +30,7 @@ const FacetToggle = ({ useToggleRefinement, ...props }: Props) => {
     <Facet
       defaultActive={props.defaultActive}
       divided={props.divided}
+      innerRef={ref}
       title={props.title}
       visible={visible}
     >
@@ -49,7 +50,7 @@ const FacetToggle = ({ useToggleRefinement, ...props }: Props) => {
       />
     </Facet>
   );
-};
+});
 
 FacetToggle.defaultProps = Facet.defaultProps;