playbook_ui 14.10.0.pre.alpha.play1465attempt25272 → 14.10.0.pre.alpha.play1662cssbargraph5193

data/app/pb_kits/playbook/pb_table/_table.tsx

@@ -28,8 +28,7 @@ type TableProps = {
     singleLine?: boolean,
     size?: "sm" | "md" | "lg",
     sticky?: boolean,
-    stickyLeftColumn?: string[],
-    stickyRightColumn?: string[],
+    stickyLeftcolumn?: string[],
     striped?: boolean,
     tag?: "table" | "div",
     verticalBorder?: boolean,
@@ -53,8 +52,7 @@ const Table = (props: TableProps): React.ReactElement => {
         singleLine = false,
         size = 'sm',
         sticky = false,
-        stickyLeftColumn = [],
-        stickyRightColumn= [],
+        stickyLeftcolumn = [],
         striped = false,
         tag = 'table',
         verticalBorder = false,
@@ -81,8 +79,7 @@ const Table = (props: TableProps): React.ReactElement => {
             'single-line': singleLine,
             'no-hover': disableHover,
             'sticky-header': sticky,
-            'sticky-left-column': stickyLeftColumn,
-            'sticky-right-column': stickyRightColumn,
+            'sticky-left-column': stickyLeftcolumn,
             'striped': striped,
             [outerPaddingCss]: outerPadding !== '',
         },
@@ -93,12 +90,11 @@ const Table = (props: TableProps): React.ReactElement => {
     )
 
     useEffect(() => {
-        const handleStickyLeftColumns = () => {
-            if (!stickyLeftColumn.length) return;
+        const handleStickyColumns = () => {
             let accumulatedWidth = 0;
 
-            stickyLeftColumn.forEach((colId, index) => {
-                const isLastColumn = index === stickyLeftColumn.length - 1;
+            stickyLeftcolumn.forEach((colId, index) => {
+                const isLastColumn = index === stickyLeftcolumn.length - 1;
                 const header = document.querySelector(`th[id="${colId}"]`);
                 const cells = document.querySelectorAll(`td[id="${colId}"]`);
 
@@ -107,11 +103,11 @@ const Table = (props: TableProps): React.ReactElement => {
                     (header as HTMLElement).style.left = `${accumulatedWidth}px`;
 
                     if (!isLastColumn) {
-                        header.classList.add('with-border-right');
-                        header.classList.remove('sticky-left-shadow');
+                        header.classList.add('with-border');
+                        header.classList.remove('sticky-shadow');
                     } else {
-                        header.classList.remove('with-border-right');
-                        header.classList.add('sticky-left-shadow');
+                        header.classList.remove('with-border');
+                        header.classList.add('sticky-shadow');
                     }
 
                     accumulatedWidth += (header as HTMLElement).offsetWidth;
@@ -122,71 +118,26 @@ const Table = (props: TableProps): React.ReactElement => {
                     (cell as HTMLElement).style.left = `${accumulatedWidth - (header as HTMLElement).offsetWidth}px`;
 
                     if (!isLastColumn) {
-                        cell.classList.add('with-border-right');
-                        cell.classList.remove('sticky-left-shadow');
+                        cell.classList.add('with-border');
+                        cell.classList.remove('sticky-shadow');
                     } else {
-                        cell.classList.remove('with-border-right');
-                        cell.classList.add('sticky-left-shadow');
+                        cell.classList.remove('with-border');
+                        cell.classList.add('sticky-shadow');
                     }
                 });
             });
         };
 
         setTimeout(() => {
-            handleStickyLeftColumns();
+            handleStickyColumns();
         }, 10);
 
-        window.addEventListener('resize', handleStickyLeftColumns);
+        window.addEventListener('resize', handleStickyColumns);
 
         return () => {
-            window.removeEventListener('resize', handleStickyLeftColumns);
+            window.removeEventListener('resize', handleStickyColumns);
         };
-    }, [stickyLeftColumn]);
-
-    useEffect(() => {
-        const handleStickyRightColumns = () => {
-            if (!stickyRightColumn.length) return;
-            let accumulatedWidth = 0;
-
-            stickyRightColumn.reverse().forEach((colId, index) => {
-                const isLastColumn = index === stickyRightColumn.length - 1;
-                const header = document.querySelector(`th[id="${colId}"]`);
-                const cells = document.querySelectorAll(`td[id="${colId}"]`);
-
-                if (header) {
-                    header.classList.add('sticky');
-                    (header as HTMLElement).style.right = `${accumulatedWidth}px`;
-
-                    if (!isLastColumn) {
-                        header.classList.add('with-border-left');
-                        header.classList.remove('sticky-right-shadow');
-                    } else {
-                        header.classList.remove('with-border-left');
-                        header.classList.add('sticky-right-shadow');
-                    }
-
-                    accumulatedWidth += (header as HTMLElement).offsetWidth;
-                }
-
-                cells.forEach((cell) => {
-                    cell.classList.add('sticky');
-                    (cell as HTMLElement).style.right = `${accumulatedWidth - (header as HTMLElement).offsetWidth}px`;
-
-                    if (!isLastColumn) {
-                        cell.classList.add('with-border-left');
-                        cell.classList.remove('sticky-right-shadow');
-                    } else {
-                        cell.classList.remove('with-border-left');
-                        cell.classList.add('sticky-right-shadow');
-                    }
-                });
-            });
-        };
-
-        setTimeout(() => {
-            handleStickyRightColumns();
-        }, 10);
-    }, [stickyRightColumn]);
+    }, [stickyLeftcolumn]);
 
     useEffect(() => {
         const instance = new PbTable()

data/app/pb_kits/playbook/pb_table/docs/_table_sticky_left_columns.jsx

@@ -6,7 +6,7 @@ const TableStickyLeftColumns = () => {
         <Table
             responsive="scroll"
             size="md"
-            stickyLeftColumn={["1", "2", "3"]}
+            stickyLeftcolumn={["1", "2", "3"]}
         >
             <thead>
                 <tr>

data/app/pb_kits/playbook/pb_table/docs/_table_sticky_left_columns_rails.md

@@ -1,3 +1 @@
 The `stickyLeftColumn` prop expects an array of the column ids you want to be sticky. Make sure to add the corresponding id to the `<th>` and `<td>`.
-
-Please ensure that unique ids are used for all columns across multiple tables. Using the same columns ids on multiple tables can lead to issues when using the `stickyLeftColumn`.

data/app/pb_kits/playbook/pb_table/docs/_table_sticky_left_columns_react.md

@@ -1,5 +1,2 @@
 The `stickyLeftColumn` prop expects an array of the column ids you want to be sticky. Make sure to add the corresponding id to the `<th>` and `<td>`.
-
-If you are using the sub-component variant, then you will pass the id to `<Table.Header>` and `<Table.Cell>`
-
-Please ensure that unique ids are used for all columns across multiple tables. Using the same columns ids on multiple tables can lead to issues when using `stickyLeftColumn` prop.
+If you are using the sub-component variant, then you will pass the id to `<Table.Header>` and `<Table.Cell>`

data/app/pb_kits/playbook/pb_table/index.ts

@@ -2,7 +2,7 @@ import PbEnhancedElement from '../pb_enhanced_element'
 
 export default class PbTable extends PbEnhancedElement {
     private stickyLeftColumns: string[] = [];
-    private handleStickyLeftColumnsRef: () => void;
+    private handleStickyColumnsRef: () => void;
 
     static get selector(): string {
       return '.table-responsive-collapse'
@@ -31,10 +31,10 @@ export default class PbTable extends PbEnhancedElement {
       });
 
       // New sticky columns logic
-      this.initStickyLeftColumns();
+      this.initStickyColumns();
     }
 
-    private initStickyLeftColumns(): void {
+    private initStickyColumns(): void {
       // Find tables with sticky-left-column class
       const tables = document.querySelectorAll('.sticky-left-column');
 
@@ -52,16 +52,16 @@ export default class PbTable extends PbEnhancedElement {
 
           if (this.stickyLeftColumns.length > 0) {
             setTimeout(() => {
-              this.handleStickyLeftColumnsRef = this.handleStickyLeftColumns.bind(this);
-              this.handleStickyLeftColumns();
-              window.addEventListener('resize', this.handleStickyLeftColumnsRef);
+              this.handleStickyColumnsRef = this.handleStickyColumns.bind(this);
+              this.handleStickyColumns();
+              window.addEventListener('resize', this.handleStickyColumnsRef);
             }, 10);
           }
         }
       });
     }
 
-    private handleStickyLeftColumns(): void {
+    private handleStickyColumns(): void {
       let accumulatedWidth = 0;
 
       this.stickyLeftColumns.forEach((colId, index) => {
@@ -74,11 +74,11 @@ export default class PbTable extends PbEnhancedElement {
           (header as HTMLElement).style.left = `${accumulatedWidth}px`;
 
           if (!isLastColumn) {
-            header.classList.add('with-border-right');
-            header.classList.remove('sticky-left-shadow');
+            header.classList.add('with-border');
+            header.classList.remove('sticky-shadow');
           } else {
-            header.classList.remove('with-border-right');
-            header.classList.add('sticky-left-shadow');
+            header.classList.remove('with-border');
+            header.classList.add('sticky-shadow');
           }
 
           accumulatedWidth += (header as HTMLElement).offsetWidth;
@@ -89,11 +89,11 @@ export default class PbTable extends PbEnhancedElement {
           (cell as HTMLElement).style.left = `${accumulatedWidth - (header as HTMLElement).offsetWidth}px`;
 
           if (!isLastColumn) {
-            cell.classList.add('with-border-right');
-            cell.classList.remove('sticky-left-shadow');
+            cell.classList.add('with-border');
+            cell.classList.remove('sticky-shadow');
           } else {
-            cell.classList.remove('with-border-right');
-            cell.classList.add('sticky-left-shadow');
+            cell.classList.remove('with-border');
+            cell.classList.add('sticky-shadow');
           }
         });
       });
@@ -101,8 +101,8 @@ export default class PbTable extends PbEnhancedElement {
 
     // Cleanup method to remove event listener
     disconnect(): void {
-      if (this.handleStickyLeftColumnsRef) {
-        window.removeEventListener('resize', this.handleStickyLeftColumnsRef);
+      if (this.handleStickyColumnsRef) {
+        window.removeEventListener('resize', this.handleStickyColumnsRef);
       }
     }
 }

data/app/pb_kits/playbook/pb_table/styles/_scroll.scss

@@ -4,48 +4,12 @@
     display: block;
     overflow-x: scroll;
 
-    // hides duplicate scroll bar for those that see two (byproduct of repeated table-responsive-scroll class
-    // hides outer scroll bar in chrome and safari
-    &:not(.table-responsive-scroll .table-responsive-scroll) {
-        &::-webkit-scrollbar {
-            height: 0px;
-        }
-    }
-    // hides outer scroll bar in firefox
-    @supports (scrollbar-width: none) {
-        scrollbar-width: none;
-        .pb_table {
-            overflow-x: auto;
-            scrollbar-width: auto;
-        }
-    }
-    // ensures visible inner scroll bar can scroll
-    .pb_table {
-        overflow-x: auto;
-    }
-
     // Responsive Styles
     @media (max-width: 1600px) {
         &[class*="table-responsive-scroll"] {
             border-radius: 4px;
-            box-shadow: 1px 0 0 0px $border_light,
-                        -1px 0 0 0px $border_light
-        }
-
-        &[class^=pb_table].table-sm.table-card thead tr th:first-child,
-        &[class^=pb_table].table-sm:not(.no-hover).table-card tbody tr td:first-child {
-            border-left-width: 0px;
-        }
-
-        &[class^=pb_table].table-md.table-card thead tr th:first-child,
-        &[class^=pb_table].table-md:not(.no-hover).table-card tbody tr td:first-child {
-            border-left-width: 0px;
-        }
-
-        &[class^=pb_table].table-lg.table-card thead tr th:first-child,
-        &[class^=pb_table].table-lg:not(.no-hover).table-card tbody tr td:first-child {
-            border-left-width: 0px;
-        }
+            box-shadow: 1px 0 0 0px $border_light
+          }
 
         &[class^=pb_table].table-sm.table-card thead tr th:last-child,
         &[class^=pb_table].table-sm:not(.no-hover).table-card tbody tr td:last-child {

data/app/pb_kits/playbook/pb_table/styles/_sticky_columns.scss

@@ -7,25 +7,11 @@
         background-color: white;
     }
 
-    // For use with sticky left columns
-    .sticky-left-shadow {
-        box-shadow: 4px 0 10px rgba(60, 106, 172, 0.16) !important;
-        left: 0;
-    }
-
-    .with-border-right {
+    .with-border {
         border-right: 1px solid $border_light !important;
-        left: 0;
     }
 
-    // For use with sticky right columns
-    .sticky-right-shadow {
-        box-shadow: -4px 0 10px rgba(60, 106, 172, 0.16) !important;
-        right: 0;
-    }
-
-    .with-border-left {
-        border-left: 1px solid $border_light !important;
-        right: 0;
+    .sticky-shadow {
+        box-shadow: 4px 0 10px rgba(60, 106, 172, 0.16) !important;
     }
 }

data/app/pb_kits/playbook/pb_typeahead/_typeahead.tsx

@@ -42,8 +42,8 @@ type TypeaheadProps = {
   id?: string,
   label?: string,
   loadOptions?: string | Noop,
-  getOptionLabel?: string | (() => string),
-  getOptionValue?: string | (() => string),
+  getOptionLabel?: string | (() => any),
+  getOptionValue?: string | (() => any),
   name?: string,
   marginBottom?: "none" | "xxs" | "xs" | "sm" | "md" | "lg" | "xl",
   pillColor?: "primary" | "neutral" | "success" | "warning" | "error" | "info" | "data_1" | "data_2" | "data_3" | "data_4" | "data_5" | "data_6" | "data_7" | "data_8" | "windows" | "siding" | "roofing" | "doors" | "gutters" | "solar" | "insulation" | "accessories",
@@ -109,7 +109,6 @@ const Typeahead = ({
     multiKit: '',
     onCreateOption: null as null,
     plusIcon: false,
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     onMultiValueClick: (_option: SelectValueType): any => undefined,
     pillColor: pillColor,
     ...props,

data/app/pb_kits/playbook/pb_typeahead/components/ClearIndicator.tsx

@@ -1,24 +1,16 @@
 import React, { useEffect } from 'react'
 import { components } from 'react-select'
 
-type ClearContainerProps = {
-  children: React.ReactNode,
-  selectProps?: {
-    id: string,
-  },
-  clearValue: () => void,
-}
-
-const ClearContainer = (props: ClearContainerProps): React.ReactElement => {
+const ClearContainer = (props: any) => {
   const { selectProps, clearValue } = props
   useEffect(() => {
     document.addEventListener(`pb-typeahead-kit-${selectProps.id}:clear`, clearValue)
-  }, [clearValue, selectProps.id])
+  }, [true])
 
   return (
     <components.ClearIndicator
-        className="clear_indicator"
-        {...props}
+      className="clear_indicator"
+      {...props}
     />
   )
 }

data/app/pb_kits/playbook/pb_typeahead/components/Control.tsx

@@ -5,11 +5,7 @@ import Flex from '../../pb_flex/_flex'
 import TextInput from '../../pb_text_input/_text_input'
 
 type Props = {
-    selectProps: {
-    dark?: boolean,
-    label: string,
-    error?: string,
-  },
+  selectProps: any,
 }
 
 const TypeaheadControl = (props: Props) => (

data/app/pb_kits/playbook/pb_typeahead/components/IndicatorsContainer.tsx

@@ -1,15 +1,10 @@
 import React from 'react'
 import { components } from 'react-select'
 
-type IndicatorsContainerProps = {
-  children: React.ReactNode,
-}
-
-
-const IndicatorsContainer = (props: IndicatorsContainerProps): React.ReactElement => (
+const IndicatorsContainer = (props: any) => (
   <components.IndicatorsContainer
-      className="text_input_indicators"
-      {...props}
+    className="text_input_indicators"
+    {...props}
   />
 )
 

data/app/pb_kits/playbook/pb_typeahead/components/MenuList.tsx

@@ -1,12 +1,7 @@
 import React from 'react'
 import { components } from 'react-select'
 
-type MenuListProps = {
-  children: React.ReactNode,
-  footer: React.ReactNode,
-}
-
-const MenuList = (props: MenuListProps): React.ReactElement => {
+const MenuList = (props: any) => {
   return (
   <components.MenuList {...props}>
     {props.children}

data/app/pb_kits/playbook/pb_typeahead/components/Option.tsx

@@ -3,22 +3,7 @@ import { components } from 'react-select'
 
 import User from '../../pb_user/_user'
 
-type OptionProps = {
-  children: React.ReactNode,
-  label?: string,
-  data: {
-    imageUrl?: string,
-  },
-  selectProps: {
-    dark?: boolean,
-    valueComponent?: (data: {
-      imageUrl?: string,
-    }) => React.ReactNode,
-  },
-}
-
-
-const Option = (props: OptionProps): React.ReactElement => {
+const Option = (props: any) => {
   const {
     imageUrl,
   } = props.data
@@ -29,11 +14,11 @@ const Option = (props: OptionProps): React.ReactElement => {
       <>
         {!valueComponent && imageUrl &&
           <User
-              align="left"
-              avatarUrl={imageUrl}
-              dark={props.selectProps.dark}
-              name={props.label}
-              orientation="horizontal"
+            align="left"
+            avatarUrl={imageUrl}
+            dark={props.selectProps.dark}
+            name={props.label}
+            orientation="horizontal"
           />
         }
 

data/app/pb_kits/playbook/pb_typeahead/components/Placeholder.tsx

@@ -4,26 +4,19 @@ import { components } from 'react-select'
 import Flex from '../../pb_flex/_flex'
 import Icon from '../../pb_icon/_icon'
 
-type PlaceholderProps = {
-  children: React.ReactNode,
-  selectProps: {
-    plusIcon?: boolean,
-  },
-}
-
-const Placeholder = (props: PlaceholderProps): React.ReactElement => (
+const Placeholder = (props: any) => (
   <>
     <Flex
-        align="center"
-        className="placeholder"
+      align="center"
+      className="placeholder"
     >
       <components.IndicatorsContainer
-          {...props}
+        {...props}
       />
       {props.selectProps.plusIcon &&
         <Icon
-            className="typeahead-plus-icon"
-            icon="plus"
+          className="typeahead-plus-icon"
+          icon="plus"
         />
       }
     </Flex>

data/app/pb_kits/playbook/pb_typeahead/components/ValueContainer.tsx

@@ -1,14 +1,10 @@
 import React from 'react'
 import { components } from 'react-select'
 
-type ValueContainerProps = {
-  children: React.ReactNode,
-}
-
-const ValueContainer = (props: ValueContainerProps): React.ReactElement => (
+const ValueContainer = (props: any) => (
   <components.ValueContainer
-      className="text_input_value_container"
-      {...props}
+    className="text_input_value_container"
+    {...props}
   />
 )
 

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_custom_menu_list.jsx

@@ -1,5 +1,3 @@
-/* eslint-disable react/no-multi-comp */
-
 import React, { useState } from 'react'
 
 import {

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async.jsx

@@ -45,7 +45,8 @@ const promiseOptions = (inputValue) =>
 
 const TypeaheadWithPillsAsync = (props) => {
   const [users, setUsers] = useState([])
-
+  const handleOnChange = (value) => setUsers(formatUsers(value))
+  const formatValue = (users) => formatUsers(users)
   const formatUsers = (users) => {
     const results = () => (users.map((user) => {
       if (Object.keys(user)[0] === 'name' || Object.keys(user)[1] === 'id'){
@@ -57,9 +58,6 @@ const TypeaheadWithPillsAsync = (props) => {
     return results()
   }
 
-  const handleOnChange = (value) => setUsers(formatUsers(value))
-  const formatValue = (users) => formatUsers(users)
-
   return (
     <>
       {users && users.length > 0 && (

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async_custom_options.jsx

@@ -83,13 +83,13 @@ const TypeaheadWithPillsAsyncCustomOptions = (props) => {
           onChange={handleOnChange}
           onMultiValueClick={handleOnMultiValueClick}
           placeholder="type the name of a Github user"
-          valueComponent={({imageUrl, label, territory, type}) => (
+          valueComponent={(props) => (
             <User
                 avatar
-                avatarUrl={imageUrl}
-                name={label}
-                territory={territory}
-                title={type}
+                avatarUrl={props.imageUrl}
+                name={props.label}
+                territory={props.territory}
+                title={props.type}
             />
           )}
           {...props}