performant-software · camdendotlol · Jun 11, 2026
diff --git a/packages/controlled-vocabulary/src/components/ReferenceCodeDropdown.js b/packages/controlled-vocabulary/src/components/ReferenceCodeDropdown.js
@@ -25,7 +25,7 @@ type Props = {
   value: Item | Array<Item>
 };
 
-const ReferenceCodeDropdown = (props: Props) => {
+const ReferenceCodeDropdown = ({disabled = false, fluid = true, multiple = false, placeholder = undefined, ...props}: Props) => {
   const [loading, setLoading] = useState(false);
   const [options, setOptions] = useState([]);
 
@@ -34,8 +34,8 @@ const ReferenceCodeDropdown = (props: Props) => {
    */
   const value = useMemo(() => {
     const v = _.pluck(_.filter(props.value, (x) => !x._destroy), 'reference_code_id');
-    return props.multiple ? v : _.first(v);
-  }, [props.multiple, props.value]);
+    return multiple ? v : _.first(v);
+  }, [multiple, props.value]);
 
   /**
    * Converts the passed ID to a reference code item.
@@ -73,7 +73,7 @@ const ReferenceCodeDropdown = (props: Props) => {
   const onChange = useCallback((e, data) => {
     let referenceCodeIds;
 
-    if (props.multiple) {
+    if (multiple) {
       referenceCodeIds = data.value;
     } else {
       referenceCodeIds = _.compact([data.value]);
@@ -100,7 +100,7 @@ const ReferenceCodeDropdown = (props: Props) => {
     });
 
     props.onChange(items);
-  }, [toItem, props.multiple, props.onChange, props.value]);
+  }, [toItem, multiple, props.onChange, props.value]);
 
   /**
    * Loads the list of reference codes from the server.
@@ -123,13 +123,13 @@ const ReferenceCodeDropdown = (props: Props) => {
   return (
     <Dropdown
       clearable
-      disabled={loading || props.disabled}
-      fluid={props.fluid}
+      disabled={loading || disabled}
+      fluid={fluid}
       loading={loading}
-      multiple={props.multiple}
+      multiple={multiple}
       onChange={onChange}
       options={options}
-      placeholder={props.placeholder}
+      placeholder={placeholder}
       search
       selection
       selectOnBlur={false}
@@ -138,11 +138,4 @@ const ReferenceCodeDropdown = (props: Props) => {
   );
 };
 
-ReferenceCodeDropdown.defaultProps = {
-  disabled: false,
-  fluid: true,
-  multiple: false,
-  placeholder: undefined
-};
-
 export default ReferenceCodeDropdown;
diff --git a/packages/core-data/src/components/EventsList.js b/packages/core-data/src/components/EventsList.js
@@ -33,7 +33,7 @@ type Props = {
   onClick?: (event: EventType) => void
 };
 
-const EventsList = (props: Props) => (
+const EventsList = ({isSelected = () => false, onClick = () => {}, ...props}: Props) => (
   <ul
     className={props.className}
   >
@@ -51,11 +51,11 @@ const EventsList = (props: Props) => (
               'inline-flex',
               'flex-col',
               'rounded-none',
-              { 'hover:bg-event-selected': props.isSelected(event) },
-              { 'text-white': props.isSelected(event) },
-              { 'bg-event-selected': props.isSelected(event) }
+              { 'hover:bg-event-selected': isSelected(event) },
+              { 'text-white': isSelected(event) },
+              { 'bg-event-selected': isSelected(event) }
             )}
-            onClick={() => props.onClick(event)}
+            onClick={() => onClick(event)}
             type='button'
           >
             <div
@@ -78,7 +78,7 @@ const EventsList = (props: Props) => (
               <p
                 className={clsx(
                   'py-2',
-                  { 'text-muted': !props.isSelected(event) }
+                  { 'text-muted': !isSelected(event) }
                 )}
               >
                 { event.description }
@@ -91,9 +91,4 @@ const EventsList = (props: Props) => (
   </ul>
 );
 
-EventsList.defaultProps = {
-  isSelected: () => false,
-  onClick: () => {}
-};
-
 export default EventsList;
diff --git a/packages/core-data/src/components/FacetSlider.js b/packages/core-data/src/components/FacetSlider.js
@@ -16,7 +16,7 @@ type MarkerProps = {
   value: number
 };
 
-const SliderMarker = (props: MarkerProps) => {
+const SliderMarker = ({position = 'top', ...props}: MarkerProps) => {
   const [initialized, setInitialized] = useState(false);
   const [open, setOpen] = useState(false);
 
@@ -70,7 +70,7 @@ const SliderMarker = (props: MarkerProps) => {
           />
         </Tooltip.Trigger>
         <Tooltip.Content
-          side={props.position}
+          side={position}
           sideOffset={5}
         >
           <div
@@ -87,10 +87,6 @@ const SliderMarker = (props: MarkerProps) => {
   );
 };
 
-SliderMarker.defaultProps = {
-  position: 'top'
-};
-
 type Action = {
   /**
    * Class name to apply to the button element.
@@ -200,7 +196,7 @@ type Props = {
   value: [number, number]
 };
 
-const FacetSlider = forwardRef((props: Props, ref: HTMLElement) => {
+const FacetSlider = forwardRef(({classNames = {}, step = 1, value = [], ...props}) => {
   const { clearTimer, setTimer } = useTimer();
 
   /**
@@ -209,9 +205,9 @@ const FacetSlider = forwardRef((props: Props, ref: HTMLElement) => {
    * @type {(function(): void)|*}
    */
   const onLeft = useCallback(() => {
-    const [start, end] = props.value;
+    const [start, end] = value;
 
-    let newStart = start - props.step;
+    let newStart = start - step;
     if (newStart < props.min) {
       newStart = props.min;
     }
@@ -223,17 +219,17 @@ const FacetSlider = forwardRef((props: Props, ref: HTMLElement) => {
       clearTimer();
       setTimer(() => props.onValueCommit([newStart, end]));
     }
-  }, [props.min, props.onValueChange, props.onValueCommit, props.step, props.value]);
+  }, [props.min, props.onValueChange, props.onValueCommit, step, value]);
 
   /**
    * Callback fired when the right button is clicked. This function increments the max range value by the "step" prop.
    *
    * @type {(function(): void)|*}
    */
   const onRight = useCallback(() => {
-    const [start, end] = props.value;
+    const [start, end] = value;
 
-    let newEnd = end + props.step;
+    let newEnd = end + step;
     if (newEnd > props.max) {
       newEnd = props.max;
     }
@@ -245,7 +241,7 @@ const FacetSlider = forwardRef((props: Props, ref: HTMLElement) => {
       clearTimer();
       setTimer(() => props.onValueCommit([start, newEnd]));
     }
-  }, [props.max, props.onValueChange, props.onValueCommit, props.step, props.value]);
+  }, [props.max, props.onValueChange, props.onValueCommit, step, value]);
 
   /**
    * Filtered actions by position.
@@ -277,7 +273,7 @@ const FacetSlider = forwardRef((props: Props, ref: HTMLElement) => {
               'py-3',
               'disabled:opacity-50',
               'disabled:hover:bg-transparent',
-              props.classNames.button
+              classNames.button
             )}
             onClick={onLeft}
             type='button'
@@ -288,7 +284,7 @@ const FacetSlider = forwardRef((props: Props, ref: HTMLElement) => {
         <Slider.Root
           className={clsx(
             'relative flex flex-grow h-5 touch-none items-center w-full',
-            props.classNames.root
+            classNames.root
           )}
           max={props.max}
           min={props.min}
@@ -297,18 +293,18 @@ const FacetSlider = forwardRef((props: Props, ref: HTMLElement) => {
           onValueCommit={props.onValueCommit}
           ref={ref}
           step={1}
-          value={props.value}
+          value={value}
         >
           <Slider.Track
             className={clsx(
               'relative h-1 w-full grow bg-gray-100',
-              props.classNames.track
+              classNames.track
             )}
           >
             <Slider.Range
               className={clsx(
                 'absolute h-full bg-gray-600',
-                props.classNames.range
+                classNames.range
               )}
             />
           </Slider.Track>
@@ -345,14 +341,14 @@ const FacetSlider = forwardRef((props: Props, ref: HTMLElement) => {
             </svg>
             )}
           <SliderMarker
-            className={props.classNames.thumb}
+            className={classNames.thumb}
             position={props.position}
-            value={props.value[0]}
+            value={value[0]}
           />
           <SliderMarker
-            className={props.classNames.thumb}
+            className={classNames.thumb}
             position={props.position}
-            value={props.value[1]}
+            value={value[1]}
           />
         </Slider.Root>
         {!props.hideStepButtons && (
@@ -363,7 +359,7 @@ const FacetSlider = forwardRef((props: Props, ref: HTMLElement) => {
               'py-3',
               'disabled:opacity-50',
               'disabled:hover:bg-transparent',
-              props.classNames.button
+              classNames.button
             )}
             onClick={onRight}
             type='button'
@@ -375,7 +371,7 @@ const FacetSlider = forwardRef((props: Props, ref: HTMLElement) => {
           <div
             className={clsx(
               'flex justify-center items-center py-3 text-gray-600',
-              props.classNames.reset
+              classNames.reset
             )}
           >
             { _.map(rightActions, (action, index) => (
@@ -408,7 +404,7 @@ const FacetSlider = forwardRef((props: Props, ref: HTMLElement) => {
         <div
           className={clsx(
             'flex justify-center items-center w-full py-3 text-gray-600',
-            props.classNames.zoom
+            classNames.zoom
           )}
         >
           { _.map(bottomActions, (action, index) => (
@@ -435,12 +431,6 @@ const FacetSlider = forwardRef((props: Props, ref: HTMLElement) => {
   );
 });
 
-FacetSlider.defaultProps = {
-  classNames: {},
-  step: 1,
-  value: []
-};
-
 export default FacetSlider;
 
 export type {

diff --git a/packages/core-data/src/components/RelatedEvents.js b/packages/core-data/src/components/RelatedEvents.js
@@ -33,7 +33,7 @@ type Props = {
   selected?: EventType
 };
 
-const RelatedEvents = (props: Props) => {
+const RelatedEvents = ({description = true, defaultPage = 1, onClick = () => {}, ...props}: Props) => {
   const {
     data: { events } = {},
     isNextDisabled,
@@ -62,10 +62,10 @@ const RelatedEvents = (props: Props) => {
   return (
     <div>
       <EventsList
-        description={props.description}
+        description={description}
         events={events}
         isSelected={isSelected}
-        onClick={props.onClick}
+        onClick={onClick}
       />
       { pages > 1 && (
         <div
@@ -140,10 +140,4 @@ const RelatedEvents = (props: Props) => {
   );
 };
 
-RelatedEvents.defaultProps = {
-  description: true,
-  defaultPage: 1,
-  onClick: () => {}
-};
-
 export default RelatedEvents;
diff --git a/packages/core-data/src/components/RelatedList.js b/packages/core-data/src/components/RelatedList.js
@@ -50,7 +50,7 @@ type Props = {
 /**
  * This component is a helper component used to structure the lists for the other `Related*` components.
  */
-const RelatedList = (props: Props) => {
+const RelatedList = ({itemsPerRow = 1, ...props}: Props) => {
   const [items, setItems] = useState([]);
 
   const {
@@ -93,12 +93,12 @@ const RelatedList = (props: Props) => {
         className={clsx(
           'grid',
           'gap-2',
-          { 'grid-cols-1': props.itemsPerRow === 1 },
-          { 'grid-cols-2': props.itemsPerRow === 2 },
-          { 'grid-cols-3': props.itemsPerRow === 3 },
-          { 'grid-cols-4': props.itemsPerRow === 4 },
-          { 'grid-cols-5': props.itemsPerRow === 5 },
-          { 'grid-cols-6': props.itemsPerRow === 6 },
+          { 'grid-cols-1': itemsPerRow === 1 },
+          { 'grid-cols-2': itemsPerRow === 2 },
+          { 'grid-cols-3': itemsPerRow === 3 },
+          { 'grid-cols-4': itemsPerRow === 4 },
+          { 'grid-cols-5': itemsPerRow === 5 },
+          { 'grid-cols-6': itemsPerRow === 6 },
           props.className
         )}
       >
@@ -131,8 +131,4 @@ const RelatedList = (props: Props) => {
   );
 };
 
-RelatedList.defaultProps = {
-  itemsPerRow: 1
-};
-
 export default RelatedList;
diff --git a/packages/core-data/src/components/RelatedMedia.js b/packages/core-data/src/components/RelatedMedia.js
@@ -49,7 +49,7 @@ const DEFAULT_THUMBNAIL_WIDTH = 80;
 /**
  * This component renders the related Core Data media records as well as a gallery viewer.
  */
-const RelatedMedia = (props: Props) => {
+const RelatedMedia = ({thumbnailHeight = DEFAULT_THUMBNAIL_HEIGHT, thumbnailWidth = DEFAULT_THUMBNAIL_WIDTH, ...props}: Props) => {
   const [manifestUrl, setManifestUrl] = useState<string>();
 
   /**
@@ -67,8 +67,8 @@ const RelatedMedia = (props: Props) => {
         onClick={() => setManifestUrl(id)}
         thumbnail={_.map(thumbnail, (t) => ({
           ...t,
-          width: props.thumbnailWidth,
-          height: props.thumbnailHeight
+          width: thumbnailWidth,
+          height: thumbnailHeight
         }))}
       />
       <div
@@ -77,7 +77,7 @@ const RelatedMedia = (props: Props) => {
         { label }
       </div>
     </div>
-  ), [props.thumbnailHeight, props.thumbnailWidth]);
+  ), [thumbnailHeight, thumbnailWidth]);
 
   return (
     <>
@@ -100,9 +100,4 @@ const RelatedMedia = (props: Props) => {
   );
 };
 
-RelatedMedia.defaultProps = {
-  thumbnailHeight: DEFAULT_THUMBNAIL_HEIGHT,
-  thumbnailWidth: DEFAULT_THUMBNAIL_WIDTH
-};
-
 export default RelatedMedia;