playbook_ui 14.6.0.pre.alpha.play1586datearea4218 → 14.6.0.pre.rc.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: d34cf484b073d589372720f766effb37be243a1e8c48a3b5eb90a9d683759929
-  data.tar.gz: ad599ad33f8f66e1057957ea957899f7d14e9215beaf342132e0f45b37906216
+  metadata.gz: d642516d659410a6a6143c4f1511481020a8cf8c14179ea0aff3d4a8e83d8780
+  data.tar.gz: 5aa325d5b25798fac84ea63c76c49cfd06fca93a1c03b7806098edf019b29524
 SHA512:
-  metadata.gz: 55fcf62a39e9220df67563a41c5882544c643ed16c12c575fdb2c9a3f0e37023aa56e4ecb6eef3bd34b6467b2995fe0c2918e0deb8d85ed76a042c0b2bccd3e1
-  data.tar.gz: 132c841e4900a5612f18ea87831f6ccdea99c9557c3a505b7feb4a0f4e81b22cc2d6721f073b531ed7a99a68e43af2c23c4ef75289e7a2ea75bb5305add7ff22
+  metadata.gz: cbaaa769fe00fa458fb70c7cfe7a6594b9d72973b701bcdb71a91bec271b47020312eb7c1000c74369b1e96de77652f490b0ebacc3bba584409f63bd6ce75672
+  data.tar.gz: d638415f5ca989bb3ca0b39ab3fd80b2d8896382e69a7ffa273dd7c449b1d34496be14a8cef6b35de11a4c92408b9c0ad0b020071517cf9c0d04b15e60e30515

data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx

@@ -91,7 +91,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
   const columnHelper = createColumnHelper()
 
   //Create cells for first columns
-  const createCellFunction = (cellAccessors: string[], customRenderer?: (row: Row<GenericObject>, value: any) => JSX.Element) => {
+  const createCellFunction = (cellAccessors: string[]) => {
     const columnCells = ({
       row,
       getValue,
@@ -101,11 +101,6 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     }) => {
       const rowData = row.original
 
-    // Use customRenderer if provided, otherwise default rendering
-    if (customRenderer) {
-      return customRenderer(row, getValue())
-    }
-
       switch (row.depth) {
         case 0: {
           return (
@@ -139,31 +134,18 @@ const AdvancedTable = (props: AdvancedTableProps) => {
   //Create column array in format needed by Tanstack
   const columns =
     columnDefinitions &&
-      columnDefinitions.map((column, index) => {
+      columnDefinitions.map((column) => {
       // Define the base column structure
       const columnStructure = {
         ...columnHelper.accessor(column.accessor, {
           header: column.label,
         }),
       }
-
-  // Use the custom renderer if provided, EXCEPT for the first column
-  if (index !== 0) {
-    if (column.cellAccessors || column.customRenderer) {
-      columnStructure.cell = createCellFunction(
-        column.cellAccessors,
-        column.customRenderer
-      )
-    }
-  } else {
-    // For the first column, apply createCellFunction without customRenderer
-    if (column.cellAccessors) {
-      columnStructure.cell = createCellFunction(column.cellAccessors)
-    }
-  }
-
-  return columnStructure
-})
+      if (column.cellAccessors) {
+        columnStructure.cell = createCellFunction(column.cellAccessors)
+      }
+      return columnStructure
+    })
 
   //Syntax for sorting Array if we want to manage state ourselves
   const sorting = [

data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml

@@ -3,7 +3,6 @@ examples:
   - advanced_table_beta: Default (Required Props)
   - advanced_table_beta_subrow_headers: SubRow Headers
   - advanced_table_beta_sort: Enable Sorting
-
   react:
   - advanced_table_default: Default (Required Props)
   - advanced_table_loading: Loading State
@@ -16,4 +15,3 @@ examples:
   - advanced_table_table_props: Table Props
   - advanced_table_inline_row_loading: Inline Row Loading
   - advanced_table_responsive: Responsive Tables
-  - advanced_table_custom_cell: Custom Components for Cells

data/app/pb_kits/playbook/pb_advanced_table/docs/index.js

@@ -9,4 +9,3 @@ export { default as AdvancedTableTableOptions } from './_advanced_table_table_op
 export { default as AdvancedTableTableProps } from './_advanced_table_table_props.jsx'
 export { default as AdvancedTableInlineRowLoading } from './_advanced_table_inline_row_loading.jsx'
 export { default as AdvancedTableResponsive } from './_advanced_table_responsive.jsx'
-export { default as AdvancedTableCustomCell } from './_advanced_table_custom_cell.jsx'

data/app/pb_kits/playbook/pb_advanced_table/index.js

@@ -13,20 +13,9 @@ export default class PbAdvancedTable extends PbEnhancedElement {
   get target() {
     return document.querySelector(CONTENT_SELECTOR.replace("id", this.element.id))
   }
-  
-  static expandedRows = new Set()
-  static isCollapsing = false
 
   connect() {
     this.element.addEventListener('click', () => {
-      if (!PbAdvancedTable.isCollapsing) {
-        const isExpanded = this.element.querySelector(UP_ARROW_SELECTOR).style.display === 'inline-block'
-        if (!isExpanded) {
-          PbAdvancedTable.expandedRows.add(this.element.id)
-        } else {
-          PbAdvancedTable.expandedRows.delete(this.element.id)
-        }
-      }
       this.toggleElement(this.target)
     })
   }
@@ -86,53 +75,4 @@ export default class PbAdvancedTable extends PbEnhancedElement {
     this.element.querySelector(UP_ARROW_SELECTOR).style.display = 'inline-block'
     this.element.querySelector(DOWN_ARROW_SELECTOR).style.display = 'none'
   }
-
-  static handleToggleAllHeaders(element) {
-    const table = element.closest('.pb_table')
-    const firstLevelButtons = table.querySelectorAll('.pb_advanced_table_body > .pb_table_tr [data-advanced-table]')
-    
-    const expandedRows = Array.from(firstLevelButtons).filter(button => 
-      button.querySelector(UP_ARROW_SELECTOR).style.display === 'inline-block'
-    )
-  
-    if (expandedRows.length === firstLevelButtons.length) {
-      expandedRows.forEach(button => {
-        button.click()
-      })
-      this.expandedRows.clear()
-    } else {
-      firstLevelButtons.forEach(button => {
-        if (!this.expandedRows.has(button.id)) {
-          button.click()
-        }
-      })
-    }
-  }
-  static handleToggleAllSubRows(element, rowDepth) {
-    const parentElement = element.closest(".toggle-content")
-    const subrowButtons = parentElement.querySelectorAll('.depth-sub-row-' + rowDepth + ' [data-advanced-table]')
-    
-    const expandedSubRows = Array.from(subrowButtons).filter(button => 
-      button.querySelector(UP_ARROW_SELECTOR).style.display === 'inline-block'
-    )
-  
-    if (expandedSubRows.length === subrowButtons.length) {
-      expandedSubRows.forEach(button => {
-        button.click()
-      })
-    } else {
-      subrowButtons.forEach(button => {
-        if (!this.expandedRows.has(button.id)) {
-          button.click()
-        }
-      })
-    }
-  }
-}
-
-window.expandAllRows = (element) => {
-  PbAdvancedTable.handleToggleAllHeaders(element)
 }
-window.expandAllSubRows = (element, rowDepth) => {
-  PbAdvancedTable.handleToggleAllSubRows(element, rowDepth)
-}

data/app/pb_kits/playbook/pb_advanced_table/table_header.html.erb

@@ -13,4 +13,12 @@
                 <% end %>
             <% end %>
         <% end %>
-<% end %>
+<% end %>
+
+<script type="text/javascript">
+    var expandAllRows = (element) => {
+        element.closest('.pb_table').querySelectorAll('.pb_advanced_table_body > .pb_table_tr [data-advanced-table]').forEach((button) => {
+            button.dispatchEvent(new Event('click'));
+        });
+    };
+</script>

data/app/pb_kits/playbook/pb_advanced_table/table_subrow_header.html.erb

@@ -23,4 +23,12 @@
                 <% end %>
             <% end %>
         <% end %>
-<% end %>
+<% end %>
+
+<script type="text/javascript">
+    var expandAllSubRows = (element, rowDepth) => {
+        element.closest(".toggle-content").querySelectorAll('.depth-sub-row-' + rowDepth + ' [data-advanced-table]').forEach((button) => {
+            button.dispatchEvent(new Event('click'));
+        });
+    };
+</script>

data/app/pb_kits/playbook/pb_card/_card.tsx

@@ -5,7 +5,7 @@ import { get } from 'lodash'
 import classnames from 'classnames'
 
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
-import { GlobalProps, globalProps, globalInlineProps } from '../utilities/globalProps'
+import { GlobalProps, globalProps } from '../utilities/globalProps'
 import type { ProductColors, CategoryColors, BackgroundColors } from '../types/colors'
 
 import Icon from '../pb_icon/_icon'
@@ -49,7 +49,6 @@ type CardBodyProps = {
   padding?: string,
 } & GlobalProps
 
-
 // Header component
 const Header = (props: CardHeaderProps) => {
   const { children, className, headerColor = 'category_1', headerColorStriped = false } = props
@@ -108,7 +107,6 @@ const Card = (props: CardPropTypes): React.ReactElement => {
 
   // coerce to array
   const cardChildren = React.Children.toArray(children)
-  const dynamicInlineProps = globalInlineProps(props);
 
   const subComponentTags = (tagName: string) => {
     return cardChildren.filter((c: string) => (
@@ -137,7 +135,6 @@ const Card = (props: CardPropTypes): React.ReactElement => {
             {...dataProps}
             {...htmlProps}
             className={classnames(cardCss, globalProps(props), className)}
-            style={dynamicInlineProps}
         >
           {subComponentTags('Header')}
           {
@@ -166,7 +163,6 @@ const Card = (props: CardPropTypes): React.ReactElement => {
               {...dataProps}
               {...htmlProps}
               className={classnames(cardCss, globalProps(props), className)}
-              style={dynamicInlineProps}
             >
               {subComponentTags('Header')}
               {nonHeaderChildren}

data/app/pb_kits/playbook/pb_dialog/_dialog.tsx

@@ -6,7 +6,7 @@ import classnames from "classnames";
 import Modal from "react-modal";
 
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from "../utilities/props";
-import { globalProps, globalInlineProps } from "../utilities/globalProps";
+import { globalProps } from "../utilities/globalProps";
 
 import Body from "../pb_body/_body";
 import Button from "../pb_button/_button";
@@ -91,8 +91,6 @@ const Dialog = (props: DialogProps): React.ReactElement => {
     beforeClose: "pb_dialog_overlay_before_close",
   };
 
-  const dynamicInlineProps = globalInlineProps(props); 
-
   const classes = classnames(
     buildCss("pb_dialog_wrapper"),
     globalProps(props),
@@ -186,7 +184,6 @@ const Dialog = (props: DialogProps): React.ReactElement => {
             overlayClassName={overlayClassNames}
             portalClassName={portalClassName}
             shouldCloseOnOverlayClick={shouldCloseOnOverlayClick && !loading}
-            style={{ content: dynamicInlineProps }}
         >
           <>
             {title && !status ? <Dialog.Header>{title}</Dialog.Header> : null}
@@ -195,7 +192,6 @@ const Dialog = (props: DialogProps): React.ReactElement => {
               <Dialog.Body
                   className="dialog_status_text_align"
                   padding="md"
-              
               >
                 <Flex align="center"
                     orientation="column"

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_loading.html.erb

@@ -1,36 +1,13 @@
 <%= pb_rails("button", props: { text: "Open Dialog", data: {"open-dialog": "dialog-loading"} }) %>
 
-<%= pb_rails("dialog", props: {
-    id:"dialog-loading",
-    size: "sm",
-    title: "Loading Example",
-    text: "Make a loading request?",
-    cancel_button: "Cancel Button",
+<%= pb_rails("dialog", props: { 
+    id:"dialog-loading", 
+    size: "sm", 
+    title: "Loading Exmaple", 
+    text: "Make a loading request?", 
+    cancel_button: "Cancel Button", 
     cancel_button_id: "cancel-button-loading",
-    confirm_button: "Okay",
+    confirm_button: "Okay", 
     confirm_button_id: "confirm-button-loading",
     loading: true,
 }) %>
-
-<script>
-    const loadingButton = document.querySelector('[data-disable-with="Loading"]');
-    if (loadingButton) {
-        loadingButton.addEventListener("click", function() {
-        const okayLoadingButton = document.querySelector('[data-disable-with="Loading"]');
-        const cancelButton = document.querySelector('[data-disable-cancel-with="Loading"]');
-        let currentClass = okayLoadingButton.className;
-        let cancelClass = cancelButton ? cancelButton.className : "";
-
-        setTimeout(function() {
-            okayLoadingButton.disabled = false;
-            okayLoadingButton.className = currentClass.replace("_disabled_loading", "_enabled");
-
-            if (cancelButton) {
-            cancelButton.disabled = false;
-            cancelButton.className = cancelClass.replace("_disabled", "_enabled");
-            }
-        }, 5000);
-
-        });
-  }
-</script>

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_loading.md

@@ -1 +1,3 @@
 Pressing the "Okay" button will trigger a loading state where the button content is replaced by a spinner icon and both buttons are disabled.
+
+Currently, the loading state cannot be undone and will require a page refresh to reset the dialog.

data/app/pb_kits/playbook/pb_dropdown/_dropdown.scss

@@ -69,21 +69,15 @@
         padding-bottom: $space_xs;
         cursor: pointer;
         &:hover {
-          background-color: $bg_light;
+          background-color: $border_light;
         }
 
         &[class*="_focused"] {
-          background-color: $bg_light;
+          background-color: $border_light;
         }
 
         &[class*="_list"] {
           border-bottom: 1px solid $border_light;
-
-          &:hover, &:focus {
-            .pb_body_kit {
-              color: $primary;
-            }
-          }
         }
         &[class*="selected"] {
           background-color: $primary;
@@ -93,7 +87,7 @@
             color: $white !important;
           }
           &:hover {
-            background-color: $product_1_background !important;
+            background-color: $primary !important;
           }
         }
       }
@@ -131,81 +125,6 @@
     }
   }
 
-  &.separators_hidden {
-    .dropdown_wrapper {
-      .pb_dropdown_container {
-
-        [class*="pb_dropdown_option"] {
-          border: none;
-        }
-      }
-    }
-  }
-
-  &.subtle {
-    .dropdown_wrapper {
-      .pb_dropdown_container {
-        
-        [class*="pb_dropdown_option"]:first-child {
-          margin-top: $space_xs;
-        }
-
-        [class*="pb_dropdown_option"]:last-child {
-          margin-bottom: $space_xs;
-        }
-
-        [class*="pb_dropdown_option"] {
-          margin: $space_xs;
-          padding: $space_xs;
-          border-radius: $border_radius_md;
-          border-bottom: none;
-          position: relative;
-        
-          &::after {
-            content: "";
-            position: absolute;
-            left: -$space_xs;
-            right: -$space_xs;
-            bottom: -4.5px;
-            height: 1px;
-            background: $border_light;
-          }
-        }
-        
-        [class*="pb_dropdown_option"]:last-child::after {
-          display: none; 
-        }
-      }
-    }
-  
-    &.separators_hidden {
-      .dropdown_wrapper {
-        .pb_dropdown_container {
-          [class*="pb_dropdown_option"]:first-child {
-            margin-top: $space_xs;
-          }
-  
-          [class*="pb_dropdown_option"]:last-child {
-            margin-bottom: $space_xs;
-          }
-
-          [class*="pb_dropdown_option"] {
-            padding: $space_xxs $space_xs;
-            margin: $space_xxs $space_xs;
-     
-            &::after {
-              height: 0px;
-            }
-
-            &[class*="selected"] {
-              border-bottom: none;
-            }
-          }
-        }
-      }
-    }
-  }
-
   &.dark {
     .dropdown_wrapper {
       [class*="dropdown_trigger_wrapper"] {

data/app/pb_kits/playbook/pb_dropdown/_dropdown.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useRef, useEffect, forwardRef, useImperativeHandle } from "react";
+import React, { useState, useRef, useEffect } from "react";
 import classnames from "classnames";
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from "../utilities/props";
 import { globalProps } from "../utilities/globalProps";
@@ -35,19 +35,10 @@ type DropdownProps = {
     label?: string;
     onSelect?: (arg: GenericObject) => null;
     options: GenericObject;
-    separators: boolean;
     triggerRef?: any;
-    variant?: "default" | "subtle";
 };
 
-interface DropdownComponent
-    extends React.ForwardRefExoticComponent<DropdownProps & React.RefAttributes<unknown>> {
-    Option: typeof DropdownOption;
-    Trigger: typeof DropdownTrigger;
-    Container: typeof DropdownContainer;
-}
-
-const Dropdown = forwardRef((props: DropdownProps, ref: any) => {
+const Dropdown = (props: DropdownProps) => {
     const {
         aria = {},
         autocomplete = false,
@@ -64,20 +55,15 @@ const Dropdown = forwardRef((props: DropdownProps, ref: any) => {
         label,
         onSelect,
         options,
-        separators = true,
-        triggerRef,
-        variant = "default",
+        triggerRef
     } = props;
 
     const ariaProps = buildAriaProps(aria);
     const dataProps = buildDataProps(data);
     const htmlProps = buildHtmlProps(htmlOptions);
-    const separatorsClass = separators ? '' : 'separators_hidden'
     const classes = classnames(
         buildCss("pb_dropdown"),
         globalProps(props),
-        variant,
-        separatorsClass,
         className
     );
 
@@ -139,7 +125,7 @@ const Dropdown = forwardRef((props: DropdownProps, ref: any) => {
     const filteredOptions = optionsWithBlankSelection?.filter((option: GenericObject) => {
         const label = typeof option.label === 'string' ? option.label.toLowerCase() : option.label;
         return String(label).toLowerCase().includes(filterItem.toLowerCase());
-    });
+    });    
 
     // For keyboard accessibility: Set focus within dropdown to selected item if it exists
     useEffect(() => {
@@ -189,14 +175,6 @@ const Dropdown = forwardRef((props: DropdownProps, ref: any) => {
         dark
     });
 
-    useImperativeHandle(ref, () => ({
-        clearSelected: () => {
-            setSelected({});
-            setFilterItem("");
-            setIsDropDownClosed(true);
-            onSelect && onSelect(null);
-        },
-    }));
 
     return (
         <div {...ariaProps}
@@ -280,9 +258,8 @@ const Dropdown = forwardRef((props: DropdownProps, ref: any) => {
             </DropdownContext.Provider>
         </div>
     )
-}) as DropdownComponent
+};
 
-Dropdown.displayName = "Dropdown";
 Dropdown.Option = DropdownOption;
 Dropdown.Trigger = DropdownTrigger;
 Dropdown.Container = DropdownContainer;

data/app/pb_kits/playbook/pb_dropdown/docs/example.yml

@@ -1,7 +1,6 @@
 examples:
   rails:
   - dropdown_default: Default
-  - dropdown_subtle_variant: Subtle Variant
   - dropdown_subcomponent_structure_rails: Subcomponent Structure
   - dropdown_with_label: With Label
   - dropdown_with_custom_options_rails: Custom Options
@@ -11,11 +10,9 @@ examples:
   - dropdown_error: Dropdown with Error
   - dropdown_default_value: Default Value
   - dropdown_blank_selection: Blank Selection
-  - dropdown_separators_hidden: Separators Hidden
 
   react:
   - dropdown_default: Default
-  - dropdown_subtle_variant: Subtle Variant
   - dropdown_subcomponent_structure: Subcomponent Structure
   - dropdown_with_label: With Label
   - dropdown_with_custom_options: Custom Options
@@ -25,8 +22,6 @@ examples:
   - dropdown_error: Dropdown with Error
   - dropdown_default_value: Default Value
   - dropdown_blank_selection: Blank Selection
-  - dropdown_clear_selection: Clear Selection
-  - dropdown_separators_hidden: Separators Hidden
   # - dropdown_with_autocomplete: Autocomplete
   # - dropdown_with_autocomplete_and_custom_display: Autocomplete with Custom Display
   # - dropdown_with_external_control: useDropdown Hook

data/app/pb_kits/playbook/pb_dropdown/docs/index.js

@@ -12,6 +12,3 @@ export { default as DropdownSubcomponentStructure } from './_dropdown_subcompone
 export { default as DropdownError } from './_dropdown_error.jsx'
 export { default as DropdownDefaultValue } from './_dropdown_default_value.jsx'
 export { default as DropdownBlankSelection } from './_dropdown_blank_selection.jsx'
-export { default as DropdownClearSelection } from './_dropdown_clear_selection.jsx'
-export { default as DropdownSubtleVariant } from './_dropdown_subtle_variant.jsx'
-export { default as DropdownSeparatorsHidden } from './_dropdown_separators_hidden.jsx'

data/app/pb_kits/playbook/pb_dropdown/dropdown.rb

@@ -13,18 +13,13 @@ module Playbook
       prop :default_value
       prop :blank_selection, type: Playbook::Props::String,
                              default: ""
-      prop :variant, type: Playbook::Props::Enum,
-                     values: %w[default subtle],
-                     default: "default"
-      prop :separators, type: Playbook::Props::Boolean,
-                        default: true
 
       def data
         Hash(prop(:data)).merge(pb_dropdown: true)
       end
 
       def classname
-        generate_classname("pb_dropdown", variant, separators_class, separator: " ")
+        generate_classname("pb_dropdown")
       end
 
     private
@@ -37,10 +32,6 @@ module Playbook
         default_value.present? ? default_value.transform_keys(&:to_s)["id"] : ""
       end
 
-      def separators_class
-        separators ? "" : "separators_hidden"
-      end
-
       def options_with_blank
         blank_selection.present? ? [{ id: "", value: "", label: blank_selection }] + options : options
       end

data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownOption.tsx

@@ -62,7 +62,7 @@ const DropdownOption = (props: DropdownOptionProps) => {
   const focusedClass = isFocused && "focused";
 
   const selectedClass = `${
-    selected?.label === option.label
+    selected.label === option.label
       ? "selected"
       : "list"
   }`;

data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownTrigger.tsx

@@ -73,7 +73,7 @@ const DropdownTrigger = (props: DropdownTriggerProps) => {
     !autocomplete && "select_only"
   );
 
-  const customDisplayPlaceholder = selected?.label ? (
+  const customDisplayPlaceholder = selected.label ? (
     <b>{selected.label}</b>
   ) : autocomplete ? (
     ""
@@ -83,7 +83,7 @@ const DropdownTrigger = (props: DropdownTriggerProps) => {
     "Select..."
   );
 
-  const defaultDisplayPlaceholder = selected?.label
+  const defaultDisplayPlaceholder = selected.label
     ? selected.label
     : autocomplete
     ? ""

data/app/pb_kits/playbook/pb_filter/Filter/FilterDouble.tsx

@@ -34,7 +34,6 @@ const FilterDouble = ({
   maxHeight,
   minWidth,
   placement,
-  popoverProps,
   ...bgProps
 }: FilterDoubleProps): React.ReactElement => (
   <FilterBackground
@@ -50,7 +49,6 @@ const FilterDouble = ({
           maxHeight={maxHeight}
           minWidth={minWidth}
           placement={placement}
-          popoverProps={popoverProps}
       >
           {children}
       </FiltersPopover>

data/app/pb_kits/playbook/pb_filter/Filter/FilterSingle.tsx

@@ -33,7 +33,6 @@ const FilterSingle = ({
   maxHeight,
   minWidth,
   placement,
-  popoverProps,
   ...bgProps
 }: FilterSingleProps): React.ReactElement => {
   return (
@@ -53,7 +52,6 @@ const FilterSingle = ({
                 maxHeight={maxHeight}
                 minWidth={minWidth}
                 placement={placement}
-                popoverProps={popoverProps}
             >
             {children}
             </FiltersPopover>

data/app/pb_kits/playbook/pb_filter/Filter/FiltersPopover.tsx

@@ -2,7 +2,6 @@ import React, { ReactNode, useState } from 'react'
 
 import CircleIconButton from '../../pb_circle_icon_button/_circle_icon_button'
 import PbReactPopover from '../../pb_popover/_popover'
-import { GenericObject } from '../../types'
 
 type FiltersPopoverProps = {
   children?: React.ReactChild[] | React.ReactChild | (({closePopover}: {closePopover: () => void}) =>  ReactNode), 
@@ -10,9 +9,8 @@ type FiltersPopoverProps = {
   maxHeight?: string,
   minWidth?: string,
   placement?: "top" | "right" | "bottom" | "left" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end",
-  popoverProps?: GenericObject,
 }
-const FiltersPopover = ({ children, dark, maxHeight, minWidth, placement = "bottom-start", popoverProps }: FiltersPopoverProps): React.ReactElement => {
+const FiltersPopover = ({ children, dark, maxHeight, minWidth, placement = "bottom-start" }: FiltersPopoverProps): React.ReactElement => {
   const [hide, updateHide] = useState(true)
   const toggle = () => updateHide(!hide)
 
@@ -35,7 +33,6 @@ const FiltersPopover = ({ children, dark, maxHeight, minWidth, placement = "bott
         reference={filterButton}
         shouldClosePopover={updateHide}
         show={!hide}
-        {...popoverProps}
     >
         <div className="pb-form">
           {typeof children === 'function'