playbook_ui 16.10.0.pre.alpha.PLAY3032dropdowndisabledinput17361 → 16.10.0.pre.alpha.PLAY3053advancedtablebottompinnedrowsreact17469

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 3c7de1ce3d86ce191ea5196d520df0aeb0919a9802462e6d1ac2c2f5f92eaa38
-  data.tar.gz: 36ebe37441e50aa17346ddc906a3492cfd076fd19bc9f474481e16e37df895ac
+  metadata.gz: 47abbd6021f5f2e78c6eec2c21e748448cbdc2a3b5699f97914e9dec865836ea
+  data.tar.gz: 1e3542fd598d4209193fc2f6f1357d06ab1fffcb17fef11b0d84aa322663fb7b
 SHA512:
-  metadata.gz: 8463caa5d2ee1372d2964109e908da03cbb433d81b6de5af078d24ba33a904c9642f9bdb9051be0e7e7e98c4f1732a768f01235112a7f6ab2e4e96a88726ae56
-  data.tar.gz: 9b1c86838e5edcf56d3714ccb7c03ae0dee950be56052f56a4e1eb695dc30db0ce59b52b544fbf6df5965ae487f16669084bb3fb7c6070063d48fe6ffdb96588
+  metadata.gz: '02951b7c75b1fc99bffa8893be7def930da61e5f98f1ecda05df882085a94ce56b07ba45131f0fe96f8e14b48db98d5ae414c68de8f05b439396d4735c743b00'
+  data.tar.gz: ab82942a91594a7e180f52942659480309c98210bce7cb630a7ca8308f3dad9ca977859088147cfc039716362af2af0dc18f4fe8c5fd2f064c55b3d15a9f3ca4

data/app/pb_kits/playbook/_playbook.scss

@@ -36,6 +36,7 @@
 @import 'pb_form/form';
 @import 'pb_form_group/form_group';
 @import 'pb_form_pill/form_pill';
+@import 'pb_full_screen/full_screen';
 @import 'pb_hashtag/hashtag';
 @import 'pb_highlight/highlight';
 @import 'pb_home_address_street/home_address_street';
@@ -128,3 +129,4 @@
 @import 'utilities/vertical_align';
 @import 'utilities/height';
 @import 'utilities/gap';
+@import 'utilities/border';

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

@@ -162,20 +162,26 @@ export const RegularTableView = ({
   );
 
   // Row pinning
-  function PinnedRow({ row }: { row: Row<any> }) {
+  function PinnedRow({ row, position }: { row: Row<any>; position: 'top' | 'bottom' }) {
     const customRowStyle = getRowStyle(rowStyling, row);
+    const bottomRowsCount = table.getBottomRows().length;
+
     return (
       <tr
-          className={classnames(
-            `pinned-row`,
-          )}
+          className={classnames('pinned-row', {
+            'pinned-row-bottom': position === 'bottom',
+          })}
           style={{
             backgroundColor: customRowStyle?.backgroundColor ? customRowStyle?.backgroundColor : 'white',
             color: customRowStyle?.fontColor,
             position: 'sticky',
             top:
-              row.getIsPinned() === 'top'
-                  ? `${row.getPinnedIndex() * rowHeight + headerHeight + actionBarHeight}px`
+            position === 'top'
+                ? `${row.getPinnedIndex() * rowHeight + headerHeight + actionBarHeight}px`
+                : undefined,
+            bottom:
+              position === 'bottom'
+                  ? `${(bottomRowsCount - 1 - row.getPinnedIndex()) * rowHeight}px`
                   : undefined,
             zIndex: '3',
             fontWeight: getFontWeight(customRowStyle),
@@ -201,6 +207,7 @@ export const RegularTableView = ({
     <>
       {pinnedRows && table.getTopRows().map((row: Row<GenericObject>) => (
         <PinnedRow key={row.id}
+            position="top"
             row={row}
         />
       ))}
@@ -274,6 +281,12 @@ export const RegularTableView = ({
           </React.Fragment>
         );
       })}
+      {pinnedRows && table.getBottomRows().map((row: Row<GenericObject>) => (
+        <PinnedRow key={row.id}
+            position="bottom"
+            row={row}
+        />
+      ))}
     </>
   );
 }

data/app/pb_kits/playbook/pb_advanced_table/Hooks/useTableState.ts

@@ -72,6 +72,7 @@ export function useTableState({
   const [localColumnVisibility, setLocalColumnVisibility] = useState({});
   const [localRowPinning, setLocalRowPinning] = useState<RowPinningState>({
     top: [],
+    bottom: [],
   });
   // Manage local state to preserve current page index when inlineRowLoading is enabled so it does not boot table to page 1
   // We can extend this for more usecases, but for now scoping it only for inlineRowLoading
@@ -235,22 +236,26 @@ export function useTableState({
   // Handle row pinning changes
     useEffect(() => {
     const topPins = pinnedRows?.value?.top ?? [];
-    if (topPins.length === 0) {
-      onRowPinningChange({ top: [] });
-      return;
-    }
+    const bottomPins = pinnedRows?.value?.bottom ?? [];
+    
     const rows = table.getRowModel().rows;
     const collectAllDescendantIds = (subs: Row<GenericObject>[]): string[] =>
       subs.flatMap(r => [r.id, ...collectAllDescendantIds(r.subRows)]);
-    const allPinned: string[] = [];
-    topPins.forEach(id => {
-      const parent = rows.find(r => r.id === id && r.depth === 0);
-      if (parent) {
-        allPinned.push(parent.id, ...collectAllDescendantIds(parent.subRows));
-      }
+    const expandPins = (ids: string[]): string[] => {
+      const allPinned: string[] = [];
+      ids.forEach(id => {
+        const parent = rows.find(r => r.id === id && r.depth === 0);
+        if (parent) {
+          allPinned.push(parent.id, ...collectAllDescendantIds(parent.subRows));
+        }
+      });
+      return allPinned;
+    };
+    onRowPinningChange({
+      top: expandPins(topPins),
+      bottom: expandPins(bottomPins),
     });
-    onRowPinningChange({ top: allPinned });
-  }, [table, pinnedRows?.value?.top?.join(',')]);
+  }, [table, pinnedRows?.value?.top?.join(','), pinnedRows?.value?.bottom?.join(',')]);
 
   // Set pagination state when pagination is enabled
   useEffect(() => {

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

@@ -747,6 +747,9 @@
   // Row Pinning - React uses inline style; Rails passes same style via html_options from table_body
   .pinned-row {
     box-shadow: 0 4px 10px 0 rgba($shadow, 0.16) !important;
+    &.pinned-row-bottom {
+      box-shadow: 0 -3px 8px 0 rgba($shadow, 0.1) !important;
+    }
   }
 
   // For Rails, we can't target the &:last-child since collapsed rows are display: none;

data/app/pb_kits/playbook/pb_advanced_table/advanced_table.test.jsx

@@ -696,7 +696,7 @@ test("customRenderer prop functions as expected", () => {
   expect(pill).toBeInTheDocument()
 })
 
-test("pinnedRows prop renders pinned rows at top", () => {
+test("pinnedRows prop renders top pinned rows at top", () => {
   const pinnedRowsControl = {
     value: { top: ["1", "3"] },
     onChange: jest.fn()
@@ -721,6 +721,31 @@ test("pinnedRows prop renders pinned rows at top", () => {
   expect(firstPinnedRow).toHaveStyle("background-color: white")
 })
 
+test("pinnedRows prop renders bottom pinned rows at bottom", () => {
+  const pinnedRowsControl = {
+    value: { bottom: ["1", "3"] },
+    onChange: jest.fn()
+  }
+
+  render(
+    <AdvancedTable
+        columnDefinitions={columnDefinitions}
+        data={{ testid: testId }}
+        pinnedRows={pinnedRowsControl}
+        tableData={MOCK_DATA_WITH_ID}
+    />
+  )
+
+  const kit = screen.getByTestId(testId)
+  const pinnedRows = kit.querySelectorAll(".pinned-row-bottom")
+  
+  expect(pinnedRows).toHaveLength(2)
+  
+  const lastPinnedRow = pinnedRows[0]
+  expect(lastPinnedRow).toHaveStyle("position: sticky")
+  expect(lastPinnedRow).toHaveStyle("background-color: white")
+})
+
 test("columnStyling.headerAlignment aligns header as expected", () => {
   const styledColumnDefs = [
     {

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

@@ -1,6 +1,7 @@
 import React, { useState } from "react"
 import AdvancedTable from '../_advanced_table'
 import MOCK_DATA_WITH_ID from "./advanced_table_mock_data_with_id.json"
+import Caption from "../../pb_caption/_caption"
 
 const AdvancedTableRowPinning = (props) => {
   const columnDefinitions = [
@@ -35,14 +36,30 @@ const AdvancedTableRowPinning = (props) => {
     },
   ]
 
-  const [pinnedRows, setPinnedRows] = useState({top: ["8"]})
+  const [pinnedRowsTop, setPinnedRowsTop] = useState({top: ["8"]})
+  const [pinnedRowsBottom, setPinnedRowsBottom] = useState({bottom: ["8"]})
 
   return (
     <div>
+      <Caption text="Pinned Rows Top" />
       <AdvancedTable
           columnDefinitions={columnDefinitions}
           maxHeight="xs"
-          pinnedRows={{value: pinnedRows, onChange: setPinnedRows}}
+          pinnedRows={{value: pinnedRowsTop, onChange: setPinnedRowsTop}}
+          tableData={MOCK_DATA_WITH_ID}
+          tableProps={{sticky: true}}
+          {...props}
+      >
+        <AdvancedTable.Header enableSorting />
+        <AdvancedTable.Body />
+      </AdvancedTable>
+      <Caption marginTop="md"
+          text="Pinned Rows Bottom"
+      />
+      <AdvancedTable
+          columnDefinitions={columnDefinitions}
+          maxHeight="xs"
+          pinnedRows={{value: pinnedRowsBottom, onChange: setPinnedRowsBottom}}
           tableData={MOCK_DATA_WITH_ID}
           tableProps={{sticky: true}}
           {...props}

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

@@ -1,7 +1,7 @@
-Use the `pinnedRows` prop to pin specific rows to the top of an Advanced Table. Pinned rows will remain at the top when scrolling through table data and will not change position if sorting is used.
+Use the `pinnedRows` prop to pin specific rows to the top or bottom of an Advanced Table. Pinned rows will remain at the top or bottom when scrolling through table data and will not change position if sorting is used.
 
 **NOTE:** 
 - Sticky header required: Pinned rows must be used with `sticky: true` via `tableProps` (works with both responsive and non-responsive tables)
 - Row ids required: Each object within the `tableData` Array must contain a unique id in order to attach an id to all Rows for this to function. 
-- `pinnedRows` takes an array of row ids to the `top` property as shown in the code snippet below. 
+- `pinnedRows` takes an array of row ids to the `top` or `bottom` property as shown in the code snippet below (both can be used on the same table).
 - For expandable rows, use the parent id in `pinnedRows`, all its children will automatically be pinned with it. If id for a child is passed in without parent being pinned, nothing will be pinned. 

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

@@ -89,5 +89,4 @@ examples:
   - advanced_table_column_styling_background_multi: Column Styling Background Color with Multiple Headers
   - advanced_table_padding_control: Padding Control using Column Styling
   - advanced_table_column_border_color: Column Group Border Color
-  - advanced_table_fullscreen: Fullscreen
   - advanced_table_infinite_scroll: Infinite Scroll

data/app/pb_kits/playbook/pb_checkbox/kit.schema.json

@@ -106,7 +106,7 @@
       "platforms": [
         "rails"
       ],
-      "type": "string"
+      "type": "GenericObject"
     },
     "required": {
       "platforms": [

data/app/pb_kits/playbook/pb_circle_icon_button/kit.schema.json

@@ -106,7 +106,7 @@
       "platforms": [
         "rails"
       ],
-      "type": "string"
+      "type": "GenericObject"
     }
   },
   "globalProps": true,

data/app/pb_kits/playbook/pb_date_picker/_date_picker.scss

@@ -80,3 +80,9 @@
     content: none;
   }
 }
+
+.pb_date_picker_floating_shell {
+  margin: 0;
+  padding: 0;
+  pointer-events: auto;
+}

data/app/pb_kits/playbook/pb_date_picker/_date_picker.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react'
+import React, { useContext, useEffect } from 'react'
 import classnames from 'classnames'
 
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
@@ -6,6 +6,7 @@ import { deprecatedProps, globalProps, GlobalProps } from '../utilities/globalPr
 import { getAllIcons } from "../utilities/icons/allicons"
 import { camelToSnakeCase } from '../utilities/text'
 
+import { DialogContext } from '../pb_dialog/_dialog_context'
 import datePickerHelper from './date_picker_helper'
 import Icon from '../pb_icon/_icon'
 import Caption from '../pb_caption/_caption'
@@ -149,6 +150,8 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
     syncEndWith,
   } = props
 
+  const dialogCtx = useContext(DialogContext)
+
   const ariaProps = buildAriaProps(aria)
   const normalizedDefaultDate = normalizeDefaultDate(defaultDate)
   const filterResetDefaultSerialized = serializeDefaultDateForFilterReset(normalizedDefaultDate)
@@ -186,6 +189,7 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
       format,
       hideIcon,
       inLine,
+      inline: inLine,
       maxDate,
       minDate,
       mode,
@@ -208,8 +212,18 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
       syncStartWith,
       syncEndWith,
       required: false,
+      dialogPortalTarget: dialogCtx?.selectMenuPortalTarget ?? null,
     }, scrollContainer)
-  }, initializeOnce ? [] : undefined)
+
+    return () => {
+      const input = document.getElementById(String(pickerId)) as
+        | (HTMLElement & { _flatpickr?: { destroy: () => void }; _pbDatePickerOpenUnsub?: () => void })
+        | null
+      input?._pbDatePickerOpenUnsub?.()
+      delete input?._pbDatePickerOpenUnsub
+      input?._flatpickr?.destroy()
+    }
+  }, initializeOnce ? [initializeOnce, dialogCtx?.selectMenuPortalTarget, pickerId] : undefined)
 
   const filteredProps = {...props}
   if (filteredProps.marginBottom === undefined) {

data/app/pb_kits/playbook/pb_date_picker/date_picker.html.erb

@@ -96,22 +96,73 @@
         })
       }
 
+      const disconnectPopoverWatch = (input) => {
+        if (!input) return
+
+        if (input._pbDatePickerPopoverObserver) {
+          input._pbDatePickerPopoverObserver.disconnect()
+          delete input._pbDatePickerPopoverObserver
+        }
+
+        delete input.dataset.pbDatePickerPopoverWatch
+      }
+
       const loadDatePicker = () => {
         const input = document.getElementById("<%= object.picker_id %>")
 
-        if (!input || input._flatpickr) return true
+        if (!input || input._flatpickr) {
+          disconnectPopoverWatch(input)
+          return true
+        }
         if (typeof window.datePickerHelper !== "function") return false
 
+        const popoverTooltip = input.closest(".pb_popover_tooltip")
+        if (popoverTooltip && !popoverTooltip.classList.contains("show")) {
+          return false
+        }
+
         window.datePickerHelper(<%= object.date_picker_config %>, "<%= object.scroll_container %>")
         initQuickPickChangeListener(input)
+        disconnectPopoverWatch(input)
 
         return true
       }
 
+      const watchPopoverVisibility = () => {
+        const input = document.getElementById("<%= object.picker_id %>")
+        if (!input || input.dataset.pbDatePickerPopoverWatch) return
+
+        const popoverTooltip = input.closest(".pb_popover_tooltip")
+        if (!popoverTooltip) return
+
+        input.dataset.pbDatePickerPopoverWatch = "true"
+        const tryInitWhenVisible = () => {
+          if (!input.isConnected || !popoverTooltip.isConnected) {
+            disconnectPopoverWatch(input)
+            return
+          }
+
+          if (popoverTooltip.classList.contains("show")) {
+            loadDatePicker()
+          }
+        }
+
+        const observer = new MutationObserver(tryInitWhenVisible)
+        input._pbDatePickerPopoverObserver = observer
+        observer.observe(popoverTooltip, { attributes: true, attributeFilter: ["class"] })
+        tryInitWhenVisible()
+      }
+
       let attempts = 0
       const retryLoad = () => {
         if (loadDatePicker()) return
 
+        const input = document.getElementById("<%= object.picker_id %>")
+        if (input?.closest(".pb_popover_tooltip")) {
+          watchPopoverVisibility()
+          return
+        }
+
         if (attempts++ < 20) {
           setTimeout(retryLoad, 100)
         }
@@ -134,6 +185,12 @@
       if (<%= !object.custom_event_type.empty? %>) {
         window.addEventListener("<%= object.custom_event_type %>", retryLoad)
       }
+
+      document.addEventListener("turbo:before-cache", () => {
+        const input = document.getElementById("<%= object.picker_id %>")
+        disconnectPopoverWatch(input)
+        input?._flatpickr?.destroy()
+      })
     })()
   <% end %>
 <% end %>