playbook_ui 16.10.0.pre.alpha.PLAY3059dialogpopoverportalingfullscreen17455 → 16.10.0.pre.alpha.PLAY3088figmacodeconnecttrial17604

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 03ca6b840b6dae7ae012850c4eb9cfde2a485fcc28f9507ec52bf63390b681b4
-  data.tar.gz: 1c097a794fd858c7ff9a71808aab92b98f4a5e7a8d16a893216ece681dd9d903
+  metadata.gz: 3751d64092566ad3cf09621e4f4e79b29dddec14351aef0591f3d2e07e88f94f
+  data.tar.gz: c5b899dc4757a061c45705b4502fac3c8312cc99e5ec77f33492df76338f634a
 SHA512:
-  metadata.gz: 4491d7b653e2f5f713095670061af2d3dd4bf09aecf0d9e08ea7787cc706e30592b7d001bb413f80403096f447162ffa189c0a032bbfaf400cb6a96a6aae8a5b
-  data.tar.gz: 1119d2f7c778f4bc2e7b63cc758b34914f686a180b14abb9d3a15cbe43fc2338657b600b8107c0acae30fbb8c4b53b28c2f628c2a570d0db7b9a584c1f686fd9
+  metadata.gz: 53da6b3099eefcbc5d00ea84e58c52d6dab20ac28f1fb44d7b604e307d554939758541115851569a8bb6641082c23724c19f0d6be19eb4a2162e4c7db65c4c08
+  data.tar.gz: 26a265e2834cf967732666edec0f1ea5f8b34248ef984051aa7b93ca0aa5a73a15e4f04562b74ed1ad35ef83766eee4d15f5f518b5c512a38c8763c0238ac2c1

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_both.jsx

@@ -0,0 +1,57 @@
+import React, { useState } from "react"
+import AdvancedTable from '../_advanced_table'
+import MOCK_DATA_WITH_ID from "./advanced_table_mock_data_with_id.json"
+
+const AdvancedTableRowPinningBoth = (props) => {
+  const columnDefinitions = [
+    {
+      accessor: "year",
+      label: "Year",
+      cellAccessors: ["quarter", "month", "day"],
+    },
+    {
+      accessor: "newEnrollments",
+      label: "New Enrollments",
+    },
+    {
+      accessor: "scheduledMeetings",
+      label: "Scheduled Meetings",
+    },
+    {
+      accessor: "attendanceRate",
+      label: "Attendance Rate",
+    },
+    {
+      accessor: "completedClasses",
+      label: "Completed Classes",
+    },
+    {
+      accessor: "classCompletionRate",
+      label: "Class Completion Rate",
+    },
+    {
+      accessor: "graduatedStudents",
+      label: "Graduated Students",
+    },
+  ]
+
+  const [pinnedRows, setPinnedRows] = useState({top: ["8"], bottom: ["1"]})
+
+  return (
+    <div>
+      <AdvancedTable
+          columnDefinitions={columnDefinitions}
+          maxHeight="xs"
+          pinnedRows={{value: pinnedRows, onChange: setPinnedRows}}
+          tableData={MOCK_DATA_WITH_ID}
+          tableProps={{sticky: true}}
+          {...props}
+      >
+        <AdvancedTable.Header enableSorting />
+        <AdvancedTable.Body />
+      </AdvancedTable>
+    </div>
+  )
+}
+
+export default AdvancedTableRowPinningBoth

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

@@ -0,0 +1 @@
+This code snippet demonstrates `pinnedRows` taking an array of row ids to both the `top` and `bottom` properties.

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

@@ -0,0 +1,57 @@
+import React, { useState } from "react"
+import AdvancedTable from '../_advanced_table'
+import MOCK_DATA_WITH_ID from "./advanced_table_mock_data_with_id.json"
+
+const AdvancedTableRowPinningBottom = (props) => {
+  const columnDefinitions = [
+    {
+      accessor: "year",
+      label: "Year",
+      cellAccessors: ["quarter", "month", "day"],
+    },
+    {
+      accessor: "newEnrollments",
+      label: "New Enrollments",
+    },
+    {
+      accessor: "scheduledMeetings",
+      label: "Scheduled Meetings",
+    },
+    {
+      accessor: "attendanceRate",
+      label: "Attendance Rate",
+    },
+    {
+      accessor: "completedClasses",
+      label: "Completed Classes",
+    },
+    {
+      accessor: "classCompletionRate",
+      label: "Class Completion Rate",
+    },
+    {
+      accessor: "graduatedStudents",
+      label: "Graduated Students",
+    },
+  ]
+
+  const [pinnedRows, setPinnedRows] = useState({bottom: ["8"]})
+
+  return (
+    <div>
+      <AdvancedTable
+          columnDefinitions={columnDefinitions}
+          maxHeight="xs"
+          pinnedRows={{value: pinnedRows, onChange: setPinnedRows}}
+          tableData={MOCK_DATA_WITH_ID}
+          tableProps={{sticky: true}}
+          {...props}
+      >
+        <AdvancedTable.Header enableSorting />
+        <AdvancedTable.Body />
+      </AdvancedTable>
+    </div>
+  )
+}
+
+export default AdvancedTableRowPinningBottom

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

@@ -0,0 +1 @@
+This code snippet demonstrates `pinnedRows` taking an array of row ids to the `bottom` property.

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, or both. `top` is shown in the code snippet below.
 - 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

@@ -67,7 +67,9 @@ examples:
   - advanced_table_column_headers_custom_cell: Multi-Header Columns with Custom Cells
   - advanced_table_column_headers_vertical_border: Multi-Header Columns with Vertical Borders
   - advanced_table_no_subrows: Table with No Subrows or Expansion
-  - advanced_table_pinned_rows: Pinned Rows
+  - advanced_table_pinned_rows: Pinned Rows (Top)
+  - advanced_table_pinned_rows_bottom: Pinned Rows (Bottom)
+  - advanced_table_pinned_rows_both: Pinned Rows (Both)
   - advanced_table_selectable_rows: Selectable Rows
   - advanced_table_selectable_rows_no_subrows_react: Selectable Rows (No Subrows)
   - advanced_table_selectable_rows_actions: Selectable Rows (With Actions)
@@ -89,5 +91,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_advanced_table/docs/index.js

@@ -52,4 +52,6 @@ export { default as AdvancedTableColumnStylingBackground } from './_advanced_tab
 export { default as AdvancedTableColumnStylingBackgroundMulti } from './_advanced_table_column_styling_background_multi.jsx'
 export { default as AdvancedTableColumnStylingBackgroundCustom } from './_advanced_table_column_styling_background_custom.jsx'
 export { default as AdvancedTableCascadeCollapse } from './_advanced_table_cascade_collapse.jsx'
-export { default as AdvancedTableSortParentOnly } from './_advanced_table_sort_parent_only.jsx'
+export { default as AdvancedTableSortParentOnly } from './_advanced_table_sort_parent_only.jsx'
+export { default as AdvancedTablePinnedRowsBottom } from './_advanced_table_pinned_rows_bottom.jsx'
+export { default as AdvancedTablePinnedRowsBoth } from './_advanced_table_pinned_rows_both.jsx'

data/app/pb_kits/playbook/pb_draggable/_draggable.scss

@@ -9,6 +9,9 @@
     }
 
     &.is_touch_active {
+      user-select: none;
+      -webkit-user-select: none;
+
       .pb_draggable_handle,
       .card_draggable_handle {
         color: $text_lt_default;

data/app/pb_kits/playbook/pb_draggable/subcomponents/DraggableItem.tsx

@@ -9,7 +9,7 @@ import {
 import { globalProps } from "../../utilities/globalProps";
 import { DraggableContext } from "../context";
 import { noop } from '../../utilities/object'
-import { bindTouchDrag, isTouchDragDevice } from "../utilities/touchDrag";
+import { bindMousePointerDrag, bindTouchDrag, isTouchDragDevice } from "../utilities/touchDrag";
 
 type DraggableItemProps = {
   aria?: { [key: string]: string };
@@ -27,6 +27,10 @@ type DraggableItemProps = {
   onDragStart?: () => void,
   onDrop?: () => void,
   dragId?: string;
+  /** Whole-item pointer drag (e.g. Typeahead pills without a grip). Disables HTML5 drag. */
+  pointerDrag?: boolean;
+  /** Handle-only pointer drag (e.g. Typeahead pills with a grip). Disables HTML5 drag. */
+  handlePointerDrag?: boolean;
   tag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'div' | 'tr' | 'th' | 'td' | 'thead' | 'col' | 'tbody',
 };
 
@@ -48,6 +52,8 @@ const DraggableItem = (props: DraggableItemProps) => {
     onDragOver = noop,
     onDragStart = noop,
     onDrop = noop,
+    pointerDrag = false,
+    handlePointerDrag = false,
   } = props;
 
   const {
@@ -59,11 +65,11 @@ const DraggableItem = (props: DraggableItemProps) => {
     handleDragOver,
     dropZone = 'ghost',
     dropZoneColor = 'neutral',
-    direction = 'horizontal'
   } = DraggableContext();
 
   const itemRef = React.useRef<HTMLElement>(null);
   const [useTouchDrag, setUseTouchDrag] = React.useState(false);
+  const [usePointerMouseDrag, setUsePointerMouseDrag] = React.useState(false);
   const handlersRef = React.useRef({
     handleDragStart,
     handleDragEnter,
@@ -90,9 +96,36 @@ const DraggableItem = (props: DraggableItemProps) => {
     onDragEnd,
   };
 
-  React.useEffect(() => {
-    setUseTouchDrag(isTouchDragDevice());
-  }, []);
+  const dragHandlers = React.useMemo(() => ({
+    onDragStart: (id: string, itemContainer?: string) => {
+      handlersRef.current.handleDragStart(id, itemContainer);
+      handlersRef.current.onDragStart();
+    },
+    onDragEnter: (targetDragId: string, targetContainer?: string) => {
+      handlersRef.current.handleDragEnter(targetDragId, targetContainer);
+      handlersRef.current.onDragEnter();
+    },
+    onDragOver: (event: Event, targetContainer?: string) => {
+      handlersRef.current.handleDragOver(event, targetContainer);
+      handlersRef.current.onDragOver();
+    },
+    onDrop: (dropContainer?: string) => {
+      handlersRef.current.handleDrop(dropContainer);
+      handlersRef.current.onDrop();
+    },
+    onDragEnd: () => {
+      handlersRef.current.handleDragEnd();
+      handlersRef.current.onDragEnd();
+    },
+  }), []);
+
+  React.useLayoutEffect(() => {
+    const touchMode = isTouchDragDevice();
+
+    setUseTouchDrag(touchMode);
+    // Pointer drag is opt-in only — regular Draggable items keep HTML5 drag on the whole item.
+    setUsePointerMouseDrag(!touchMode && (pointerDrag || handlePointerDrag));
+  }, [dragId, container, children, pointerDrag, handlePointerDrag]);
 
   React.useEffect(() => {
     if (!useTouchDrag || !itemRef.current || !dragId) return;
@@ -101,30 +134,21 @@ const DraggableItem = (props: DraggableItemProps) => {
       dragId,
       container,
       itemElement: itemRef.current,
-      handlers: {
-        onDragStart: (id, itemContainer) => {
-          handlersRef.current.handleDragStart(id, itemContainer);
-          handlersRef.current.onDragStart();
-        },
-        onDragEnter: (targetDragId, targetContainer) => {
-          handlersRef.current.handleDragEnter(targetDragId, targetContainer);
-          handlersRef.current.onDragEnter();
-        },
-        onDragOver: (event, targetContainer) => {
-          handlersRef.current.handleDragOver(event, targetContainer);
-          handlersRef.current.onDragOver();
-        },
-        onDrop: (dropContainer) => {
-          handlersRef.current.handleDrop(dropContainer);
-          handlersRef.current.onDrop();
-        },
-        onDragEnd: () => {
-          handlersRef.current.handleDragEnd();
-          handlersRef.current.onDragEnd();
-        },
-      },
+      handlers: dragHandlers,
+    });
+  }, [useTouchDrag, dragId, container, dragHandlers]);
+
+  React.useEffect(() => {
+    if (!usePointerMouseDrag || !itemRef.current || !dragId) return;
+
+    return bindMousePointerDrag({
+      dragId,
+      container,
+      itemElement: itemRef.current,
+      handlers: dragHandlers,
+      allowWholeItem: pointerDrag,
     });
-  }, [useTouchDrag, dragId, container]);
+  }, [usePointerMouseDrag, dragId, container, dragHandlers, pointerDrag]);
 
   const ariaProps = buildAriaProps(aria);
   const dataProps = buildDataProps(data);
@@ -188,7 +212,7 @@ const DraggableItem = (props: DraggableItemProps) => {
         {...htmlProps}
         className={classes}
         data-pb-drag-id={dragId}
-        draggable={!useTouchDrag}
+        draggable={!useTouchDrag && !usePointerMouseDrag}
         id={id}
         key={dragId}
         onDrag={onDrag}

data/app/pb_kits/playbook/pb_draggable/touchDrag.test.js

@@ -35,4 +35,50 @@ describe("touchDrag utilities", () => {
     const item = document.querySelector(".pb_draggable_item");
     expect(getContainerFromElement(item)).toBe("To Do");
   });
+
+  test("resolvePointerDragTarget uses sibling slots when pointer stays on dragged pill", () => {
+    document.body.innerHTML = `
+      <div class="pb_draggable_container" data-pb-drag-container="typeahead-pills">
+        <div class="pb_draggable_item" data-pb-drag-id="b"></div>
+        <div class="pb_draggable_item" data-pb-drag-id="c"></div>
+        <div class="pb_draggable_item" data-pb-drag-id="a"></div>
+      </div>
+    `;
+
+    const rects = {
+      b: { left: 0, width: 100 },
+      c: { left: 100, width: 100 },
+      a: { left: 200, width: 100 },
+    };
+
+    document.querySelectorAll(".pb_draggable_item").forEach((item) => {
+      const id = item.getAttribute("data-pb-drag-id");
+      item.getBoundingClientRect = () => ({
+        left: rects[id].left,
+        width: rects[id].width,
+        right: rects[id].left + rects[id].width,
+        top: 0,
+        bottom: 20,
+        height: 20,
+        x: rects[id].left,
+        y: 0,
+        toJSON: () => ({}),
+      });
+    });
+
+    const { resolvePointerDragTarget } = require("./utilities/touchDrag");
+
+    document.elementFromPoint = () => document.querySelector('[data-pb-drag-id="a"]');
+    document.elementsFromPoint = () => [document.querySelector('[data-pb-drag-id="a"]')];
+
+    expect(resolvePointerDragTarget(250, 10, "a")).toEqual({
+      targetDragId: null,
+      targetContainer: "typeahead-pills",
+    });
+
+    expect(resolvePointerDragTarget(120, 10, "a")).toEqual({
+      targetDragId: "c",
+      targetContainer: "typeahead-pills",
+    });
+  });
 });