diff --git a/packages/controlled-vocabulary/package.json b/packages/controlled-vocabulary/package.json index 4b9ea050..78446932 100644 --- a/packages/controlled-vocabulary/package.json +++ b/packages/controlled-vocabulary/package.json @@ -1,6 +1,6 @@ { "name": "@performant-software/controlled-vocabulary", - "version": "2.2.19", + "version": "2.2.20", "description": "A package of components to allow user to configure dropdown elements. Use with the \"controlled_vocabulary\" gem.", "license": "MIT", "main": "./dist/index.cjs.js", @@ -23,8 +23,8 @@ "underscore": "^1.13.2" }, "peerDependencies": { - "@performant-software/semantic-components": "^2.2.19", - "@performant-software/shared-components": "^2.2.19", + "@performant-software/semantic-components": "^2.2.20", + "@performant-software/shared-components": "^2.2.20", "react": ">= 16.13.1 < 19.0.0", "react-dom": ">= 16.13.1 < 19.0.0" }, diff --git a/packages/core-data/package.json b/packages/core-data/package.json index 1c28f647..4caa8900 100644 --- a/packages/core-data/package.json +++ b/packages/core-data/package.json @@ -1,6 +1,6 @@ { "name": "@performant-software/core-data", - "version": "2.2.19", + "version": "2.2.20", "description": "A package of components used with the Core Data platform.", "license": "MIT", "main": "./dist/index.cjs.js", @@ -40,8 +40,8 @@ "underscore": "^1.13.2" }, "peerDependencies": { - "@performant-software/geospatial": "^2.2.19", - "@performant-software/shared-components": "^2.2.19", + "@performant-software/geospatial": "^2.2.20", + "@performant-software/shared-components": "^2.2.20", "@peripleo/maplibre": "^0.5.2", "@peripleo/peripleo": "^0.5.2", "react": ">= 16.13.1 < 19.0.0", diff --git a/packages/geospatial/package.json b/packages/geospatial/package.json index d83deec6..0e40106f 100644 --- a/packages/geospatial/package.json +++ b/packages/geospatial/package.json @@ -1,6 +1,6 @@ { "name": "@performant-software/geospatial", - "version": "2.2.19", + "version": "2.2.20", "description": "A package of components for all things map-related.", "license": "MIT", "main": "./dist/index.cjs.js", diff --git a/packages/semantic-ui/package.json b/packages/semantic-ui/package.json index 2a6294da..f111b905 100644 --- a/packages/semantic-ui/package.json +++ b/packages/semantic-ui/package.json @@ -1,6 +1,6 @@ { "name": "@performant-software/semantic-components", - "version": "2.2.19", + "version": "2.2.20", "description": "A package of shared components based on the Semantic UI Framework.", "license": "MIT", "main": "./dist/index.cjs.js", @@ -35,7 +35,7 @@ "zotero-translation-client": "^5.0.1" }, "peerDependencies": { - "@performant-software/shared-components": "^2.2.19", + "@performant-software/shared-components": "^2.2.20", "@samvera/clover-iiif": "^2.3.2", "react": ">= 16.13.1 < 19.0.0", "react-dnd": "^11.1.3", diff --git a/packages/semantic-ui/src/components/Facet.js b/packages/semantic-ui/src/components/Facet.js index 537bd772..21452952 100644 --- a/packages/semantic-ui/src/components/Facet.js +++ b/packages/semantic-ui/src/components/Facet.js @@ -1,6 +1,7 @@ // @flow import React, { + useEffect, useImperativeHandle, useMemo, useState, @@ -42,6 +43,11 @@ type Props = { current: ?HTMLElement }, + /** + * Callback fired when the facet active state is toggled. + */ + onActive?: () => void, + /** * Facet title to display at the top. */ @@ -86,6 +92,12 @@ const Facet = (props: Props) => { expand: () => setActive(true) })); + useEffect(() => { + if (active && props.onActive) { + props.onActive(); + } + }, [active]); + return ( <> .item > .ui.checkbox { + width: 100%; +} \ No newline at end of file diff --git a/packages/semantic-ui/src/components/FacetList.js b/packages/semantic-ui/src/components/FacetList.js index cc9b22f8..1f0c3d48 100644 --- a/packages/semantic-ui/src/components/FacetList.js +++ b/packages/semantic-ui/src/components/FacetList.js @@ -24,6 +24,11 @@ import { type RefinementListProps } from '../types/InstantSearch'; import './FacetList.css'; type Props = FacetProps & RefinementListProps & { + /** + * (Optional) class name to append to the root element. + */ + className?: string, + /** * The default value for the `operator` prop. If not provided, this will default to `or`. */ @@ -34,6 +39,11 @@ type Props = FacetProps & RefinementListProps & { */ defaultValue?: string, + /** + * Renders a custom label element for the passed item. + */ + renderLabel?: (item: any) => JSX.Element, + /** * If "true", the component will render a search box for searching individual facet values. */ @@ -45,6 +55,7 @@ type Props = FacetProps & RefinementListProps & { toggleable?: boolean }; +const CLASS_SEPARATOR = ' '; const OPERATOR_OR = 'or'; const OPERATOR_AND = 'and'; @@ -68,6 +79,11 @@ const FacetList = forwardRef(({ useRefinementList, ...props }: Props, ref: HTMLE const searchRef = useRef(); const [query, setQuery] = useState(''); + /** + * Memo-izes the class name. + */ + const className = useMemo(() => _.compact(['facet-list', props.className]).join(CLASS_SEPARATOR), [props.className]); + /** * Clears the current search state. * @@ -128,10 +144,11 @@ const FacetList = forwardRef(({ useRefinementList, ...props }: Props, ref: HTMLE return ( @@ -156,23 +173,25 @@ const FacetList = forwardRef(({ useRefinementList, ...props }: Props, ref: HTMLE - { _.map(items, (item, index) => ( + { _.map(items, (item) => ( - { item.label } -