playbook_ui 14.22.0.pre.alpha.customheaderat8564 → 14.22.0.pre.alpha.popoverkittransitionpoppertofloatingui8736

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: ae6b3ef179ba514261a9c3f24c44b3609980ad8295193eca7bf5ea78599e3f32
-  data.tar.gz: 59f4da05e7dc18142518d658c9dcb6e02938972abce9ca14af52a725839bf150
+  metadata.gz: d5902e5bc12ee89151baef7b62f1d1a2e4fc92d9969305d9accb9a1e7554490e
+  data.tar.gz: 2240560d606feaee834230ede5011097b39a164e6c3720eb9c507d1387735084
 SHA512:
-  metadata.gz: e891d0c03d22b2b4d0ae5faeac636fb884e54619f00b236a6cba2988a4432880f305f1d894f06005c4aa45dfefd83a440bf13395d43303cb875d129a140b6d24
-  data.tar.gz: 72d84a27a4f5ec1c18d7f7b1da0d093336282250ebf56351639b7da26ee64593ae9ac79caa56a8a15df148e7091642afb56f390860a9a97c095c6e964128b178
+  metadata.gz: 817b988e9f566a354b634dcf2280df78aabfff9ba4c104052511a2a4c719e07d91692928b6072e77b193c8c8074dd6e07501871fc60ad8973aef1a46ff38217e
+  data.tar.gz: 820b313a60c018ebae9e1fd35db466d19b791615d46c961038307c099e8615a7559067efa4673b557a568e75b6864ae915d2f0daba0355e137cda5ba8978a201

data/app/pb_kits/playbook/pb_advanced_table/Components/CustomCell.tsx

@@ -20,7 +20,7 @@ interface CustomCellProps {
   customRenderer?: (row: Row<GenericObject>, value: string | undefined) => React.ReactNode
   selectableRows?: boolean
   customStyle?: GenericObject
-} 
+}
 
 export const CustomCell = ({
   getValue,
@@ -35,7 +35,7 @@ export const CustomCell = ({
 
   const handleOnExpand = (row: Row<GenericObject>) => {
     onRowToggleClick && onRowToggleClick(row);
-    
+
     if (!expandedControl) {
       setExpanded({ ...expanded, [row.id]: !row.getIsExpanded() });
     }
@@ -46,8 +46,8 @@ export const CustomCell = ({
 
   return (
     <div style={{ paddingLeft: `${row.depth * 1.25}em`}}>
-      <Flex 
-          alignItems="center" 
+      <Flex
+          alignItems="center"
           columnGap="xs"
           justify="start"
           orientation="row"
@@ -71,12 +71,11 @@ export const CustomCell = ({
           >
             {row.getIsExpanded() ? (
               <Icon cursor="pointer"
-                  icon="circle-play"
-                  rotation={90}
+                  icon="circle-play-down"
               />
             ) : (
               <Icon cursor="pointer"
-                  icon="circle-play"    
+                  icon="circle-play"
                />
             )}
           </button>

data/app/pb_kits/playbook/pb_advanced_table/Components/SubRowHeaderRow.tsx

@@ -7,6 +7,7 @@ import { GlobalProps } from "../../utilities/globalProps"
 
 import Flex from "../../pb_flex/_flex"
 import Caption from "../../pb_caption/_caption"
+import Icon from "../../pb_icon/_icon"
 
 import { ToggleIconButton } from "./ToggleIconButton"
 import { renderCollapsibleTrail } from "./CollapsibleTrail"
@@ -32,17 +33,19 @@ export const SubRowHeaderRow = ({
   subRowHeaders,
   table,
 }: SubRowHeaderRowProps & GlobalProps) => {
-  const { inlineRowLoading } = useContext(AdvancedTableContext)
+  const { inlineRowLoading, customSort, onCustomSortClick } = useContext(AdvancedTableContext)
 
   const numberOfColumns = table.getAllFlatColumns().length
   const rowHasChildren = row.original.children ? true : false
   const canExpand = inlineRowLoading ? rowHasChildren : row.getCanExpand()
+  const hasSubrowsToSort = row.getParentRow()?.subRows
+
 
   return (
     <tr className="custom-row bg-silver">
       <td
           className={`custom-row-first-column ${
-          isChrome() ? "chrome-styles" : ""
+            isChrome() ? "chrome-styles" : ""
           }`}
           colSpan={1}
       >
@@ -50,21 +53,39 @@ export const SubRowHeaderRow = ({
         <div style={{ paddingLeft: `${row.depth * 1.25}em` }}>
           <Flex align="center" 
               columnGap="xs"
+              // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+              //@ts-ignore
+              justifyContent={customSort && hasSubrowsToSort && hasSubrowsToSort.length > 1 ? "between" : undefined}
           >
-            {enableToggleExpansion === "all" && canExpand ? (
-              <ToggleIconButton onClick={onClick} 
-                  row={row}
+            <Flex columnGap="xs">
+              {enableToggleExpansion === "all" && canExpand ? (
+                <ToggleIconButton onClick={onClick} 
+                    row={row} 
+                />
+              ) : null}
+              <Caption
+                  marginLeft={canExpand ? "none" : "xs"}
+                  text={subRowHeaders[row.depth - 1]}
               />
-            ) : null}
-            <Caption
-                marginLeft={canExpand ? "none" : "xs"}
-                text={subRowHeaders[row.depth - 1]}
-            />
+            </Flex>
+            {customSort && hasSubrowsToSort && hasSubrowsToSort.length > 1 && (
+              <button
+                  aria-label="Sort this group"
+                  className="sort-button-icon gray-icon"
+                  onClick={() => { onCustomSortClick && onCustomSortClick(row.getParentRow()?.subRows)}}
+              >
+                <Icon 
+                    cursor="pointer" 
+                    fixedWidth 
+                    icon="sort" 
+                />
+              </button>
+            )}
           </Flex>
         </div>
       </td>
 
       <td colSpan={numberOfColumns - 1} />
     </tr>
-  )
+  );
 }

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

@@ -36,6 +36,7 @@ type AdvancedTableProps = {
   columnDefinitions: GenericObject[]
   columnGroupBorderColor?: "text_lt_default" | "text_lt_light" | "text_lt_lighter" | "text_dk_default" | "text_dk_light" | "text_dk_lighter"
   columnVisibilityControl?: GenericObject
+  customSort?:boolean;
   dark?: boolean
   data?: { [key: string]: string }
   enableToggleExpansion?: "all" | "header" | "none"
@@ -67,6 +68,7 @@ type AdvancedTableProps = {
   tableProps?: GenericObject
   toggleExpansionIcon?: string | string[]
   onRowSelectionChange?: (arg: RowSelectionState) => void
+  onCustomSortClick?: (arg: GenericObject[]) => void
   virtualizedRows?: boolean
   allowFullScreen?: boolean
   fullScreenControl?: (controls: FullscreenControls) => void
@@ -81,6 +83,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     columnDefinitions,
     columnGroupBorderColor,
     columnVisibilityControl,
+    customSort,
     dark = false,
     data = {},
     enableToggleExpansion = "header",
@@ -95,6 +98,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     maxHeight,
     onRowToggleClick,
     onToggleExpansionClick,
+    onCustomSortClick,
     pagination = false,
     paginationProps,
     pinnedRows,
@@ -325,6 +329,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
             columnDefinitions={columnDefinitions}
             columnGroupBorderColor={columnGroupBorderColor}
             columnVisibilityControl={columnVisibilityControl}
+            customSort={customSort}
             enableToggleExpansion={enableToggleExpansion}
             enableVirtualization={virtualizedRows}
             expandByDepth={expandByDepth}
@@ -336,6 +341,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
             isActionBarVisible={isActionBarVisible}
             isFullscreen={isFullscreen}
             loading={loading}
+            onCustomSortClick={onCustomSortClick}
             onExpandByDepthClick={onExpandByDepthClick}
             pinnedRows={pinnedRows}
             responsive={responsive}

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

@@ -0,0 +1,65 @@
+import React from "react"
+import AdvancedTable from '../../pb_advanced_table/_advanced_table'
+import MOCK_DATA from "./advanced_table_mock_data.json"
+
+const AdvancedTableCustomSort = (props) => {
+  const columnDefinitions = [
+    {
+      accessor: "year",
+      label: "Year",
+      id: "year",
+      cellAccessors: ["quarter", "month", "day"],
+    },
+    {
+      accessor: "newEnrollments",
+      id: "newEnrollments",
+      label: "New Enrollments",
+    },
+    {
+      accessor: "scheduledMeetings",
+      id: "scheduledMeetings",
+      label: "Scheduled Meetings",
+    },
+    {
+      accessor: "attendanceRate",
+      id: "attendanceRate",
+      label: "Attendance Rate",
+    },
+    {
+      accessor: "completedClasses",
+      id: "completedClasses",
+      label: "Completed Classes",
+    },
+    {
+      accessor: "classCompletionRate",
+      id: "classCompletionRate",
+      label: "Class Completion Rate",
+    },
+    {
+      accessor: "graduatedStudents",
+      id: "graduatedStudents",
+      label: "Graduated Students",
+    },
+  ]
+
+//Render the subRow header rows
+const subRowHeaders = ["Quarter", "Month", "Day"]
+
+  return (
+    <div>
+      <AdvancedTable
+          columnDefinitions={columnDefinitions}
+          customSort
+          enableToggleExpansion="all"
+          onCustomSortClick={(subrows)=>{console.log("Custom sort clicked", subrows)}}
+          tableData={MOCK_DATA}
+          {...props}
+      >
+        <AdvancedTable.Header enableSorting />
+        <AdvancedTable.Body subRowHeaders={subRowHeaders} />
+      </AdvancedTable>
+    </div>
+  )
+}
+
+export default AdvancedTableCustomSort

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_custom_sort.md

@@ -0,0 +1,5 @@
+The optional `customSort` prop can be used to add a sort button within a subrow header. The button will only appear if that subrowheader has more than one subrow nested within it. This button comes with a callback function called `onCustomSortClick`.
+
+The `onCustomSortClick` provides as an argument an array of all the subrows nested within that level of the table. 
+
+__NOTE__: `customSort` must be used in conjunction with the `subRowHeaders` prop. The `customSort` DOES NOT handle the sort logic, this must be handled on the frontend using the callback provided. 

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

@@ -19,14 +19,15 @@ examples:
   - advanced_table_selectable_rows_actions_rails: Selectable Rows (With Actions)
   - advanced_table_selectable_rows_header_rails: Selectable Rows (No Actions Bar)
   - advanced_table_scrollbar_none: Advanced Table Scrollbar None
-  # - advanced_table_column_styling_rails: Column Styling
-  # - advanced_table_column_styling_column_headers_rails: Column Styling with Multiple Headers
+  - advanced_table_column_styling_rails: Column Styling
+  - advanced_table_column_styling_column_headers_rails: Column Styling with Multiple Headers
 
   react:
   - advanced_table_default: Default (Required Props)
   - advanced_table_loading: Loading State
   - advanced_table_sort: Enable Sorting
   - advanced_table_sort_control: Sort Control
+  - advanced_table_custom_sort: Custom Sort
   - advanced_table_expanded_control: Expanded Control
   - advanced_table_expand_by_depth: Expand by Depth
   - advanced_table_subrow_headers: SubRow Headers

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

@@ -38,4 +38,5 @@ export { default as AdvancedTableRowStyling } from './_advanced_table_row_stylin
 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 AdvancedTableInfiniteScroll} from './_advanced_table_infinite_scroll.jsx'
-export {default as AdvancedTableWithCustomHeader} from './_advanced_table_with_custom_header.jsx'
+export {default as AdvancedTableWithCustomHeader} from './_advanced_table_with_custom_header.jsx'
+export { default as AdvancedTableCustomSort } from './_advanced_table_custom_sort.jsx'

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

@@ -30,11 +30,11 @@
                                     class="gray-icon expand-toggle-icon"
                                     data-advanced-table="true">
                                     <%= pb_rails("icon", props: { id: "advanced-table_open_icon", icon: "circle-play", cursor: "pointer" }) %>
-                                    <%= pb_rails("icon", props: { id: "advanced-table_close_icon", icon: "circle-play", cursor: "pointer", rotation: 90 }) %>
+                                    <%= pb_rails("icon", props: { id: "advanced-table_close_icon", icon: "circle-play-down", cursor: "pointer" }) %>
                                 </button>
                             <% end %>
                         <% end %>
-                        <%= pb_rails("flex/flex_item") do %>       
+                        <%= pb_rails("flex/flex_item") do %>
                             <% if column[:custom_renderer].present? %>
                                 <%= raw(column[:custom_renderer].call(object.row, custom_renderer_value(column, index))) %>
                             <% elsif index.zero? %>

data/app/pb_kits/playbook/pb_badge/_badge.scss

@@ -5,7 +5,7 @@
 @import "../tokens/typography";
 
 [class^=pb_badge_kit] {
-  $pb_badge_height: 18px;
+  $pb_badge_height_rounded: 16px;
 
   display: inline-flex;
   align-items: center;
@@ -13,7 +13,6 @@
   border-radius: $border_rad_light;
   padding: 0 $space_xs/2;
   border-width: 1px;
-  border-style: solid;
   border-color: $card_light;
   white-space: nowrap;
 
@@ -31,10 +30,10 @@
   }
 
   &[class*=_rounded] {
-    height: $pb_badge_height;
-    min-height: $pb_badge_height;
-    min-width: $pb_badge_height;
-    border-radius: $pb_badge_height / 2;
+    height: $pb_badge_height_rounded;
+    min-height: $pb_badge_height_rounded;
+    min-width: $pb_badge_height_rounded;
+    border-radius: $pb_badge_height_rounded / 2;
   }
 
   &[class*=_notification] {

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

@@ -1,12 +1,12 @@
 import PbEnhancedElement from '../pb_enhanced_element'
-import { createPopper, Instance, Placement } from '@popperjs/core'
+import { computePosition, offset, flip, shift, autoUpdate, Placement } from '@floating-ui/dom'
 
 const POPOVER_OFFSET_Y = [0, 20]
 
 export default class PbPopover extends PbEnhancedElement {
-  popper: Instance
   _triggerElement: HTMLElement
   _tooltip: HTMLElement
+  cleanupAutoUpdate: () => void
   element: HTMLElement
   static get selector() {
     return '[data-pb-popover-kit]'
@@ -31,18 +31,15 @@ export default class PbPopover extends PbEnhancedElement {
     }
     this.moveTooltip()
 
-    this.popper = createPopper (this.triggerElement, this.tooltip, {
-      placement: this.position as Placement,
-      strategy: 'fixed',
-      modifiers: [
-        {
-          name: 'offset',
-          options: {
-            offset: this.offset,
-          },
-        },
-      ],
-    })
+    // Initial position
+    this.updatePosition()
+
+    // Update position (i.e., scroll or resize)
+    this.cleanupAutoUpdate = autoUpdate(
+      this.triggerElement,
+      this.tooltip,
+      () => this.updatePosition()
+    )
 
     this.triggerElement.addEventListener('click', (event: Event) => {
       event.preventDefault()
@@ -54,11 +51,32 @@ export default class PbPopover extends PbEnhancedElement {
 
       setTimeout(() => {
         this.toggleTooltip()
-        this.popper.update()
+        this.updatePosition()
       }, 0)
     })
   }
 
+  updatePosition() {
+    computePosition(this.triggerElement, this.tooltip, {
+      placement: this.position as Placement,
+      strategy: 'fixed',
+      middleware: [
+        offset(() => {
+          const [ crossAxis, mainAxis ] = this.offset
+          return { mainAxis, crossAxis }
+        }),
+        flip(),
+        shift(),
+      ],
+    }).then(({ x, y }) => {
+      Object.assign(this.tooltip.style, {
+        left: `${x}px`,
+        top: `${y}px`,
+        position: 'fixed',
+      })
+    })
+  }
+
   checkCloseTooltip() {
     document.querySelector('body').addEventListener('click', ({ target } ) => {
       const isTooltipElement = (target as HTMLElement).closest(`#${this.tooltipId}`) !== null

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

@@ -104,8 +104,8 @@ const Table = (props: TableProps): React.ReactElement => {
 
             stickyLeftColumn.forEach((colId, index) => {
                 const isLastColumn = index === stickyLeftColumn.length - 1;
-                const header = document.querySelector(`th[id="${colId}"]`);
-                const cells = document.querySelectorAll(`td[id="${colId}"]`);
+                const header = document.querySelector(`th[data-sticky-id="${colId}"]`);
+                const cells = document.querySelectorAll(`td[data-sticky-id="${colId}"]`);
 
                 if (header) {
                     header.classList.add('sticky');
@@ -155,8 +155,8 @@ const Table = (props: TableProps): React.ReactElement => {
 
             stickyRightColumnReversed.forEach((colId, index) => {
                 const isLastColumn = index === stickyRightColumn.length - 1;
-                const header = document.querySelector(`th[id="${colId}"]`);
-                const cells = document.querySelectorAll(`td[id="${colId}"]`);
+                const header = document.querySelector(`th[data-sticky-id="${colId}"]`);
+                const cells = document.querySelectorAll(`td[data-sticky-id="${colId}"]`);
 
                 if (header) {
                     header.classList.add('sticky');

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

@@ -11,7 +11,7 @@ const TableStickyColumns = () => {
         >
             <thead>
                 <tr>
-                    <th id="a">{'Column 1'}</th>
+                    <th data-sticky-id="a">{'Column 1'}</th>
                     <th>{'Column 2'}</th>
                     <th>{'Column 3'}</th>
                     <th>{'Column 4'}</th>
@@ -25,12 +25,12 @@ const TableStickyColumns = () => {
                     <th>{'Column 12'}</th>
                     <th>{'Column 13'}</th>
                     <th>{'Column 14'}</th>
-                    <th id="b">{'Column 15'}</th>
+                    <th data-sticky-id="b">{'Column 15'}</th>
                 </tr>
             </thead>
             <tbody>
                 <tr>
-                    <td id="a">{'Value 1'}</td>
+                    <td data-sticky-id="a">{'Value 1'}</td>
                     <td>{'Value 2'}</td>
                     <td>{'Value 3'}</td>
                     <td>{'Value 4'}</td>
@@ -44,10 +44,10 @@ const TableStickyColumns = () => {
                     <td>{'Value 12'}</td>
                     <td>{'Value 13'}</td>
                     <td>{'Value 14'}</td>
-                    <td id="b">{'Value 15'}</td>
+                    <td data-sticky-id="b">{'Value 15'}</td>
                 </tr>
                 <tr>
-                    <td id="a">{'Value 1'}</td>
+                    <td data-sticky-id="a">{'Value 1'}</td>
                     <td>{'Value 2'}</td>
                     <td>{'Value 3'}</td>
                     <td>{'Value 4'}</td>
@@ -61,10 +61,10 @@ const TableStickyColumns = () => {
                     <td>{'Value 12'}</td>
                     <td>{'Value 13'}</td>
                     <td>{'Value 14'}</td>
-                    <td id="b">{'Value 15'}</td>
+                    <td data-sticky-id="b">{'Value 15'}</td>
                 </tr>
                 <tr>
-                    <td id="a">{'Value 1'}</td>
+                    <td data-sticky-id="a">{'Value 1'}</td>
                     <td>{'Value 2'}</td>
                     <td>{'Value 3'}</td>
                     <td>{'Value 4'}</td>
@@ -78,7 +78,7 @@ const TableStickyColumns = () => {
                     <td>{'Value 12'}</td>
                     <td>{'Value 13'}</td>
                     <td>{'Value 14'}</td>
-                    <td id="b">{'Value 15'}</td>
+                    <td data-sticky-id="b">{'Value 15'}</td>
                 </tr>
             </tbody>
         </Table>

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

@@ -1,3 +1,3 @@
 The `stickyLeftColumn` and `stickyRightColumn` props can be used together on the same table as needed.
 
-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 props.
+Please ensure that unique `data-sticky-id`s are used for all columns across multiple tables. Using the same columns `data-sticky-id`s on multiple tables can lead to issues when using props.

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

@@ -10,9 +10,9 @@ const TableStickyLeftColumns = () => {
         >
             <thead>
                 <tr>
-                    <th id="1">{'Column 1'}</th>
-                    <th id="2">{'Column 2'}</th>
-                    <th id="3">{'Column 3'}</th>
+                    <th data-sticky-id="1">{'Column 1'}</th>
+                    <th data-sticky-id="2">{'Column 2'}</th>
+                    <th data-sticky-id="3">{'Column 3'}</th>
                     <th>{'Column 4'}</th>
                     <th>{'Column 5'}</th>
                     <th>{'Column 6'}</th>
@@ -29,9 +29,9 @@ const TableStickyLeftColumns = () => {
             </thead>
             <tbody>
                 <tr>
-                    <td id="1">{'Value 1'}</td>
-                    <td id="2">{'Value 2'}</td>
-                    <td id="3">{'Value 3'}</td>
+                    <td data-sticky-id="1">{'Value 1'}</td>
+                    <td data-sticky-id="2">{'Value 2'}</td>
+                    <td data-sticky-id="3">{'Value 3'}</td>
                     <td>{'Value 4'}</td>
                     <td>{'Value 5'}</td>
                     <td>{'Value 6'}</td>
@@ -46,9 +46,9 @@ const TableStickyLeftColumns = () => {
                     <td>{'Value 15'}</td>
                 </tr>
                 <tr>
-                    <td id="1">{'Value 1'}</td>
-                    <td id="2">{'Value 2'}</td>
-                    <td id="3">{'Value 3'}</td>
+                    <td data-sticky-id="1">{'Value 1'}</td>
+                    <td data-sticky-id="2">{'Value 2'}</td>
+                    <td data-sticky-id="3">{'Value 3'}</td>
                     <td>{'Value 4'}</td>
                     <td>{'Value 5'}</td>
                     <td>{'Value 6'}</td>
@@ -63,9 +63,9 @@ const TableStickyLeftColumns = () => {
                     <td>{'Value 15'}</td>
                 </tr>
                 <tr>
-                    <td id="1">{'Value 1'}</td>
-                    <td id="2">{'Value 2'}</td>
-                    <td id="3">{'Value 3'}</td>
+                    <td data-sticky-id="1">{'Value 1'}</td>
+                    <td data-sticky-id="2">{'Value 2'}</td>
+                    <td data-sticky-id="3">{'Value 3'}</td>
                     <td>{'Value 4'}</td>
                     <td>{'Value 5'}</td>
                     <td>{'Value 6'}</td>

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

@@ -1,5 +1,5 @@
-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>`.
+The `stickyLeftColumn` prop expects an array of the column `data-sticky-id`s you want to be sticky. Make sure to add the corresponding `data-sticky-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>`
+If you are using the sub-component variant, then you will pass the `data-sticky-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.
+Please ensure that unique `data-sticky-id`s are used for all columns across multiple tables. Using the same columns `data-sticky-id`s on multiple tables can lead to issues when using `stickyLeftColumn` prop.

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

@@ -22,9 +22,9 @@ const TableStickyRightColumns = () => {
                     <th>{'Column 10'}</th>
                     <th>{'Column 11'}</th>
                     <th>{'Column 12'}</th>
-                    <th id="13">{'Column 13'}</th>
-                    <th id="14">{'Column 14'}</th>
-                    <th id="15">{'Column 15'}</th>
+                    <th data-sticky-id="13">{'Column 13'}</th>
+                    <th data-sticky-id="14">{'Column 14'}</th>
+                    <th data-sticky-id="15">{'Column 15'}</th>
                 </tr>
             </thead>
             <tbody>
@@ -41,9 +41,9 @@ const TableStickyRightColumns = () => {
                     <td>{'Value 10'}</td>
                     <td>{'Value 11'}</td>
                     <td>{'Value 12'}</td>
-                    <td id="13">{'Value 13'}</td>
-                    <td id="14">{'Value 14'}</td>
-                    <td id="15">{'Value 15'}</td>
+                    <td data-sticky-id="13">{'Value 13'}</td>
+                    <td data-sticky-id="14">{'Value 14'}</td>
+                    <td data-sticky-id="15">{'Value 15'}</td>
                 </tr>
                 <tr>
                     <td>{'Value 1'}</td>
@@ -58,9 +58,9 @@ const TableStickyRightColumns = () => {
                     <td>{'Value 10'}</td>
                     <td>{'Value 11'}</td>
                     <td>{'Value 12'}</td>
-                    <td id="13">{'Value 13'}</td>
-                    <td id="14">{'Value 14'}</td>
-                    <td id="15">{'Value 15'}</td>
+                    <td data-sticky-id="13">{'Value 13'}</td>
+                    <td data-sticky-id="14">{'Value 14'}</td>
+                    <td data-sticky-id="15">{'Value 15'}</td>
                 </tr>
                 <tr>
                     <td>{'Value 1'}</td>
@@ -75,9 +75,9 @@ const TableStickyRightColumns = () => {
                     <td>{'Value 10'}</td>
                     <td>{'Value 11'}</td>
                     <td>{'Value 12'}</td>
-                    <td id="13">{'Value 13'}</td>
-                    <td id="14">{'Value 14'}</td>
-                    <td id="15">{'Value 15'}</td>
+                    <td data-sticky-id="13">{'Value 13'}</td>
+                    <td data-sticky-id="14">{'Value 14'}</td>
+                    <td data-sticky-id="15">{'Value 15'}</td>
                 </tr>
             </tbody>
         </Table>

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

@@ -1,5 +1,5 @@
-The `stickyRightColumn` prop works in the same way as the above `stickyLeftColumn` prop. It expects an array of the column ids you want to be sticky. Make sure to add the corresponding id to the `<th>` and `<td>`.
+The `stickyRightColumn` prop works in the same way as the above `stickyLeftColumn` prop. It expects an array of the column `data-sticky-id`s you want to be sticky. Make sure to add the corresponding `data-sticky-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>`
+If you are using the sub-component variant, then you will pass the `data-sticky-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 the `stickyRightColumn` prop.
+Please ensure that unique `data-sticky-id`s are used for all columns across multiple tables. Using the same columns `data-sticky-id`s on multiple tables can lead to issues when using the `stickyRightColumn` prop.

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_preserve_input.html.erb

@@ -0,0 +1,18 @@
+<%
+  options = [
+    { label: 'Orange', value: '#FFA500' },
+    { label: 'Red', value: '#FF0000' },
+    { label: 'Green', value: '#00FF00' },
+    { label: 'Blue', value: '#0000FF' },
+  ]
+%>
+
+<%= pb_rails("typeahead", props: {
+    id: "typeahead-preserve-search-input",
+    is_multi: false,
+    label: "Colors",
+    options: options,
+    placeholder: "Select...",
+    preserve_search_input: true,
+  })
+%>

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_preserve_input_rails.md

@@ -0,0 +1 @@
+By default, text is not preserved in the typeahead kit when you click off of the input field. You can utilize the `preserve_search_input` prop in order to prevent text from being cleared when the field loses focus