playbook_ui 14.21.2.pre.alpha.PLAY18938263 → 14.21.2.pre.alpha.PLAY21898327

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows_actions.jsx

@@ -47,14 +47,14 @@ const CustomActions = () => {
       <CircleIconButton
           icon="file-csv"
           onClick={() =>
-            alert(rowIds.length === 0 ? "No Selection Made" : `Row ids ${rowIds.join(", ")} will be exported!`)
+            alert(rowIds.length === 0 ? "No Selection Made" : 'Row ids ' + rowIds.join(", ") + 'will be exported!')
           }
           variant="link"
       />
       <CircleIconButton
           icon="trash-alt"
           onClick={() =>
-            alert(rowIds.length === 0 ? "No Selection Made" : `Row ids ${rowIds.join(", ")} will be deleted!`)
+            alert(rowIds.length === 0 ? "No Selection Made" : 'Row ids ' + rowIds.join(", ") + 'will be deleted!')
           }
           variant="link"
         />

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows_actions_rails.html.erb

@@ -88,10 +88,11 @@ actions = [
     if (!selectedRowIds || selectedRowIds.length === 0) {
       alert('No Selection Made');
     } else {
+      const selectedRowsString = selectedRowIds.join(', ');
       if (actionType === 'export') {
-        alert(`Row ids ${selectedRowIds.join(', ')} will be exported!`);
+        alert('Row ids ' + selectedRowsString + ' will be exported!');
       } else if (actionType === 'delete') {
-        alert(`Row ids ${selectedRowIds.join(', ')} will be deleted!`);
+        alert('Row ids ' + selectedRowsString + ' will be deleted!');
       }
     }
   };

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header.html.erb

@@ -30,4 +30,4 @@
     }
 ] %>
 
-<%= pb_rails("advanced_table", props: { id: "table_props_table", table_data: @table_data, column_definitions: column_definitions, max_height: "xs", table_props: { sticky: true }}) %>
+<%= pb_rails("advanced_table", props: { id: "table_props_sticky_table", table_data: @table_data, column_definitions: column_definitions, max_height: "xs", table_props: { sticky: true }}) %>

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

@@ -61,3 +61,4 @@ examples:
   - advanced_table_scrollbar_none: Advanced Table Scrollbar None
   - advanced_table_column_styling: Column Styling
   - advanced_table_column_styling_column_headers: Column Styling with Multiple Headers
+  - advanced_table_infinite_scroll: Infinite Scroll

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

@@ -35,4 +35,5 @@ export { default as AdvancedTableColumnVisibilityWithState } from './_advanced_t
 export { default as AdvancedTablePinnedRows } from './_advanced_table_pinned_rows.jsx'
 export { default as AdvancedTableScrollbarNone} from './_advanced_table_scrollbar_none.jsx'
 export { default as AdvancedTableColumnStyling } from './_advanced_table_column_styling.jsx'
-export { default as AdvancedTableColumnStylingColumnHeaders } from './_advanced_table_column_styling_column_headers.jsx'
+export { default as AdvancedTableColumnStylingColumnHeaders } from './_advanced_table_column_styling_column_headers.jsx'
+export { default as AdvancedTableInfiniteScroll} from './_advanced_table_infinite_scroll.jsx'

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

@@ -266,6 +266,25 @@ export default class PbAdvancedTable extends PbEnhancedElement {
         this.updateTableSelectedRowsAttribute();
       });
     }
+    this.addBorderRadiusOnLastVisibleRow()
+  }
+
+  addBorderRadiusOnLastVisibleRow() {
+    const parentElement = this.element.closest('.pb_advanced_table');
+    
+    const table = document.getElementById(parentElement.id);
+
+    if (table) {
+      const visibleRows = table.querySelectorAll('tr.is-visible, tr:not(.toggle-content)');
+  
+      visibleRows.forEach(row => row.classList.remove('last-visible-row'));
+  
+      const lastVisibleRow = visibleRows[visibleRows.length - 1];
+
+      if (lastVisibleRow) {
+        lastVisibleRow.classList.add('last-visible-row');
+      }
+    }
   }
 
 
@@ -367,6 +386,8 @@ export default class PbAdvancedTable extends PbEnhancedElement {
       row.classList.toggle("bg-silver", !isVisible);
       row.classList.toggle("bg-white", isVisible);
     }
+
+    this.addBorderRadiusOnLastVisibleRow();
   }
 
   displayDownArrow() {

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

@@ -0,0 +1,49 @@
+import React from 'react'
+
+import Collapsible from '../../pb_collapsible/_collapsible'
+import Caption from '../../pb_caption/_caption'
+import Body from '../../pb_body/_body'
+
+type FilterSectionProps = {
+  children?: React.ReactChild[] | React.ReactChild,
+  collapsible?: boolean,
+  collapsed?: boolean,
+  headerText?: string,
+}
+const FilterSection = ({ children, collapsible = false, collapsed = true, headerText, }: FilterSectionProps): React.ReactElement => {
+  if (collapsible) {
+    return (
+      <Collapsible
+          collapsed={collapsed}
+          padding="none"
+      >
+        <Collapsible.Main
+            paddingX="sm"
+            paddingY="xs"
+        >
+            <Caption>{ headerText }</Caption>
+        </Collapsible.Main>
+        <Collapsible.Content
+            className="filter_section_collapsible"
+            paddingX="sm"
+        >
+          { children }
+        </Collapsible.Content>
+      </Collapsible>
+    )
+  }
+  
+  return (
+    <Body
+        paddingTop="xs"
+        paddingX="sm"
+    >
+      <>
+        {headerText && <Caption marginBottom="sm">{ headerText }</Caption>}
+        { children }
+      </>
+    </Body>
+  )
+}
+
+export default FilterSection

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

@@ -0,0 +1,69 @@
+import React from 'react'
+
+import { FilterDescription } from './CurrentFilters'
+import FilterBackground, { FilterBackgroundProps } from './FilterBackground'
+import ResultsCount from './ResultsCount'
+
+import Flex from '../../pb_flex/_flex'
+import SectionSeparator from '../../pb_section_separator/_section_separator'
+import Card from '../../pb_card/_card'
+import Caption from '../../pb_caption/_caption'
+
+export type FilterSidebarProps = {
+  children?: React.ReactChild[] | React.ReactChild,
+  filters?: FilterDescription,
+  results?: number,
+} & FilterBackgroundProps
+
+const FilterSidebar = ({
+  onCollapse,
+  onSortChange,
+  sortOptions,
+  sortValue,
+  filters,
+  results,
+  children,
+  dark,
+  isCollapsed,
+  maxHeight,
+  minWidth,
+  placement,
+  popoverProps,
+  ...bgProps
+}: FilterSidebarProps): React.ReactElement => (
+  <FilterBackground
+      dark={dark}
+      {...bgProps}
+  >
+    <Card.Body
+        paddingX="sm"
+        paddingY="xs"
+    >
+      <Flex
+          align="center"
+          justify="between"
+          orientation="row"
+      >
+        <ResultsCount
+            dark={dark}
+            results={results}
+            title
+        />
+        <div onClick={onCollapse}>
+          <Caption
+              color="link"
+              cursor="pointer"
+              size="xs"
+              text={isCollapsed ? "Expand All" : "Collapse All"}
+          />
+        </div>
+      </Flex>
+    </Card.Body>
+    <SectionSeparator dark={dark} />
+    <>
+      { children }
+    </>
+  </FilterBackground>
+)
+
+export default FilterSidebar

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

@@ -1,18 +1,29 @@
 import React from 'react'
 import FilterSingle, { FilterSingleProps } from './FilterSingle'
 import FilterDouble, { FilterDoubleProps } from './FilterDouble'
+import FilterSidebar, { FilterSidebarProps } from './FilterSidebar'
+import FilterSection from './FilterSection'
 
 type FilterProps =
   | FilterSingleProps
   | (FilterDoubleProps & {
       double?: boolean,
     })
+  | (FilterSidebarProps & {
+    variant?: null | 'sidebar',
+  })
 
 const Filter = ({
   double = false,
+  variant,
   ...templateProps
   }: FilterProps): React.ReactElement => {
   const displayFilter = () => {
+    if (variant === 'sidebar') {
+      return (
+        <FilterSidebar {...templateProps} />
+      )
+    }
     if (double === true) {
       return (
         <FilterDouble {...templateProps} />
@@ -30,4 +41,6 @@ const Filter = ({
   )
 }
 
+Filter.Section = FilterSection
+
 export default Filter

data/app/pb_kits/playbook/pb_filter/_filter.scss

@@ -88,6 +88,10 @@
     z-index: 1;
   }
 
+  [class^=pb_collapsible_kit] .toggle-content.filter_section_collapsible {
+    padding-top: $space_xs !important;
+  }
+
   &[class*=dark] {
     .filters .filter {
     border-right: 1px solid $border_dark !important;

data/app/pb_kits/playbook/pb_filter/docs/_filter_sidebar.jsx

@@ -0,0 +1,224 @@
+import React, { useState } from 'react'
+
+import Filter from '../../pb_filter/_filter'
+import Select from '../../pb_select/_select'
+import TextInput from '../../pb_text_input/_text_input'
+import useCollapsible from '../../pb_collapsible/useCollapsible'
+import SectionSeparator from '../../pb_section_separator/_section_separator'
+import Checkbox from '../../pb_checkbox/_checkbox'
+import Flex from '../../pb_flex/_flex'
+import Table from '../../pb_table/_table'
+import Caption from '../../pb_caption/_caption'
+import Icon from '../../pb_icon/_icon'
+
+const people = [
+  { name: 'Hera Syndulla', territory: 'A galaxy far far away, like really far away...', products: ['Insulation'] },
+  { name: 'Kanan Jarrus', territory: 'USA', products: ['Siding', 'Roofing', 'Gutters'] },
+  { name: 'C1-10P', territory: 'USA', products: ['Roofing'] },
+  { name: 'Anakin Skywalker', territory: 'A galaxy far far away, like really far away...', products: ['Doors', 'Windows', 'Solar'] },
+  { name: 'Leia Organa', territory: 'Canada', products: ['Windows', 'Doors'] },
+  { name: 'Luke Skywalker', territory: 'Brazil', products: ['Solar', 'Roofing'] },
+  { name: 'Padmé Amidala', territory: 'Philippines', products: ['Siding', 'Gutters'] },
+  { name: 'Obi-Wan Kenobi', territory: 'USA', products: ['Windows', 'Siding'] },
+  { name: 'Ahsoka Tano', territory: 'Canada', products: ['Insulation', 'Solar'] },
+  { name: 'Boba Fett', territory: 'Brazil', products: ['Roofing', 'Gutters'] },
+  { name: 'Mace Windu', territory: 'Philippines', products: ['Doors', 'Siding'] },
+  { name: 'Grogu', territory: 'A galaxy far far away, like really far away...', products: ['Insulation'] },
+  { name: 'Sabine Wren', territory: 'Canada', products: ['Solar', 'Doors'] },
+  { name: 'C-3PO', territory: 'Brazil', products: ['Windows'] },
+  { name: 'R2-D2', territory: 'Philippines', products: ['Doors', 'Gutters'] },
+]
+
+const FilterSidebar = (props) => {
+  const [name, setName] = useState('')
+  const [ territory, setTerritory ] = useState('')
+  const [ products, setProducts ] = useState({})
+  const handleUpdateName = ({ target }) => {
+    setName(target.value)
+  }
+  const handleUpdateTerritory = ({ target }) => {
+    setTerritory(target.value)
+  }
+  const handleCheckboxChange = ({ target }) => {
+    setProducts(prev => ({
+      ...prev,
+      [target.name]: !prev[target.name],
+    }))
+  }
+  const [isCollapsed, setIsCollapsed] = useCollapsible(true)
+  const [isProductsCollapsed, setIsProductsCollapsed] = useCollapsible(true)
+  const options = [
+    { value: 'USA' },
+    { value: 'Canada' },
+    { value: 'Brazil' },
+    { value: 'Philippines' },
+    { value: 'A galaxy far far away, like really far away...' },
+  ]
+
+  const filteredPeople = people.filter((person) => {
+    const matchesName = person.name.toLowerCase().includes(name.toLowerCase())
+
+    const matchesTerritory = territory === '' ? true : person.territory === territory
+
+    const matchesProducts = Object.values(products).every((product) => !product) ? true : person.products.some(product => products[product])
+
+    return matchesName && matchesTerritory && matchesProducts
+  })
+
+  return (
+    <>
+      <Flex>
+        <Filter
+            isCollapsed={isCollapsed}
+            marginRight="xs"
+            onCollapse={() => setIsCollapsed(!isCollapsed)}
+            results={filteredPeople.length}
+            sortOptions={{
+              popularity: 'Popularity',
+              // eslint-disable-next-line
+              manager_title: 'Manager\'s Title',
+              // eslint-disable-next-line
+              manager_name: 'Manager\'s Name',
+            }}
+            sortValue={[{ name: 'popularity', dir: 'desc' }]}
+            variant="sidebar"
+            width="xs"
+            {...props}
+        >
+          <Filter.Section
+              collapsed={isCollapsed}
+              headerText="Full Name"
+          >
+            <TextInput
+                onChange={handleUpdateName}
+                placeholder="Enter name"
+                value={name}
+                {...props}
+            />
+          </Filter.Section>
+          <SectionSeparator />
+          <Filter.Section
+              collapsed={isCollapsed}
+              collapsible
+              headerText="Territory"
+          >
+            <Select
+                blankSelection="Select One..."
+                name="location"
+                onChange={handleUpdateTerritory}
+                options={options}
+                {...props}
+            />
+          </Filter.Section>
+          <SectionSeparator />
+          <Filter.Section
+              collapsed={isCollapsed}
+              collapsible
+              headerText="Products"
+          >
+            <div>
+              <Checkbox
+                  marginBottom="sm"
+                  name="Doors"
+                  onChange={handleCheckboxChange}
+                  text="Doors"
+              />
+            </div>
+            <div>
+              <Checkbox
+                  marginBottom="sm"
+                  name="Windows"
+                  onChange={handleCheckboxChange}
+                  text="Windows"
+              />
+            </div>
+            <div>
+              <Checkbox
+                  marginBottom="sm"
+                  name="Siding"
+                  onChange={handleCheckboxChange}
+                  text="Siding"
+              />
+            </div>
+            {!isProductsCollapsed &&
+              <>
+                <div>
+                  <Checkbox
+                      checked={products["Roofing"]}
+                      marginBottom="sm"
+                      name="Roofing"
+                      onChange={handleCheckboxChange}
+                      text="Roofing"
+                  />
+                </div>
+                <div>
+                  <Checkbox
+                      checked={products["Gutters"]}
+                      marginBottom="sm"
+                      name="Gutters"
+                      onChange={handleCheckboxChange}
+                      text="Gutters"
+                  />
+                </div>
+                <div>
+                  <Checkbox
+                      checked={products["Solar"]}
+                      marginBottom="sm"
+                      name="Solar"
+                      onChange={handleCheckboxChange}
+                      text="Solar"
+                  />
+                </div>
+                <div>
+                  <Checkbox
+                      checked={products["Insulation"]}
+                      marginBottom="sm"
+                      name="Insulation"
+                      onChange={handleCheckboxChange}
+                      text="Insulation"
+                  />
+                </div>
+              </>
+            }
+            <div onClick={() => setIsProductsCollapsed(!isProductsCollapsed)}>
+              <Flex
+                  cursor="pointer"
+                  marginBottom="sm"
+              >
+                <Caption
+                    color="link"
+                    marginRight="xxs"
+                    size="xs"
+                    text={isProductsCollapsed ? "Show More" : "Show Less"}
+                />
+                <Icon
+                    icon={isProductsCollapsed ? "chevron-down" : "chevron-up"}
+                />
+              </Flex>
+            </div>
+          </Filter.Section>
+        </Filter>
+        <Table
+            size="sm"
+        >
+          <thead>
+            <tr>
+              <th>{'Name'}</th>
+              <th>{'Territory'}</th>
+              <th>{'Products'}</th>
+            </tr>
+          </thead>
+          <tbody>
+            {filteredPeople.map((person) => (<tr key={person.name}>
+              <td>{ person.name }</td>
+              <td>{ person.territory }</td>
+              <td>{ person.products.join(", ") }</td>
+            </tr>))}
+          </tbody>
+        </Table>
+      </Flex>
+    </>
+  )
+}
+
+export default FilterSidebar

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

@@ -24,4 +24,5 @@ examples:
   - filter_max_height: Max Height for Popover Inside of Filter
   - filter_placement: Filter Placement
   - filter_popover_props: Popover Props
+  - filter_sidebar: Sidebar
 

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

@@ -8,3 +8,4 @@ export { default as FilterMaxWidth } from './_filter_max_width.jsx'
 export { default as FilterMaxHeight } from './_filter_max_height.jsx'
 export { default as FilterPlacement } from './_filter_placement.jsx'
 export { default as FilterPopoverProps } from './_filter_popover_props.jsx'
+export { default as FilterSidebar } from './_filter_sidebar.jsx'