playbook_ui 15.5.0.pre.alpha.draggablefix12571 → 15.5.0.pre.alpha.draggablefix12577

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 1f31083e3e9ebfce2990300a17297cd86ed63b44c4396d2cea0802213fbf7820
-  data.tar.gz: 5b0258ee4a8371746217cab20a86c325947c131d0085ef3e7ab9a406675bcd60
+  metadata.gz: 1dd11c97564a274020baa3c9a59aec465d0b9b67bcada5422063c88fd3a17adf
+  data.tar.gz: f302928fcde263a9d8a3d5611ff220066a3a64c00ce4a2679157c3d21a19b88c
 SHA512:
-  metadata.gz: 963b09db6cf28ece7d25880e789d510046f7f283d4e73ec9b959dcaa9abb6040d489480a5e90776639bb202f04197cd7e5c8ded45a2ce793513a5a3dfca95bb8
-  data.tar.gz: 567cacd6dcf108dacc6d6a1500d233ee8d3ce5d2c56ab6e0ddd131bca6d0c7d1dafe718ff7479eb0d99cd923db7708aafe1b32df2e9e16b3f6e6628cd44fcc00
+  metadata.gz: 3197dab744a56215624076b7d6a43a47263784e85ed51030d850386a2fd4948b3d824b80e258ddcf14d4ff34c82af5964c762fa42315d11ddc8bf8b61286a5c1
+  data.tar.gz: f6346ae11b7151409e7b52a1fe80b254ca8371bf2506caaa6febe4c539b220888a61bf90bd5c9dbe1e0318e36de437aedc8aeb7770fdfb3c0d698ba47e5a71d3

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

@@ -791,6 +791,28 @@
       box-shadow: 1px 0px 0px 0px var(--column-border-color) !important;
     }
 
+    // Override last-header-cell border color in dark mode
+    .pb_advanced_table_header {
+      > tr:not(:first-child) {
+        .last-header-cell {
+          border-right: 1px solid $border_dark !important;
+        }
+      }
+
+      th[colspan]:not([colspan="1"]) {
+        border-right: 1px solid $border_dark !important;
+      }
+    }
+
+    // Override last-cell border color in dark mode for body cells
+    .pb_advanced_table_body {
+      tr {
+        .last-cell:not(:last-of-type) {
+          border-right: 1px solid $border_dark !important;
+        }
+      }
+    }
+
     // Apply border colors in dark mode
     &[class*="column-group-border-"] {
       // For top-level column groups (ENROLLMENT DATA, PERFORMANCE DATA)
@@ -850,7 +872,7 @@
     // Restore vertical border styling in dark mode when verticalBorder is true
     .pb_table[data-vertical-border="true"] {
       .pb_advanced_table_header {
-        > tr:not(:first-child) {
+        > tr {
           th:not(:last-child) {
             border-right: 1px solid $border_dark !important;
           }
@@ -864,11 +886,17 @@
         }
       }
 
+      tr.virtualized-table-row {
+        td:not(:last-child) {
+          border-right: 1px solid $border_dark !important;
+        }
+      }
+
       // When both verticalBorder AND columnGroupBorderColor are set in dark mode,
       // override the default border-dark with the custom color
       &.pb_advanced_table[class*="column-group-border-"] {
         .pb_advanced_table_header {
-          > tr:not(:first-child) {
+          > tr {
             th:not(:last-child) {
               border-right: 1px solid var(--column-border-color) !important;
             }
@@ -881,6 +909,12 @@
             border-right: 1px solid var(--column-border-color) !important;
           }
         }
+
+        tr.virtualized-table-row {
+          td:not(:last-child) {
+            border-right: 1px solid var(--column-border-color) !important;
+          }
+        }
       }
     }
 
@@ -985,34 +1019,90 @@
   // Firefox-specific fix for last-header-cell and last-cell vertical borders
   @-moz-document url-prefix() {
     .pb_advanced_table_header {
-      .last-header-cell:not(:last-child) {
+      th[colspan]:not([colspan="1"]):not(:last-child) {
+        border-right: none !important;
+        box-shadow: 1px 0 0 0 $border_light !important;
+      }
+
+      .last-header-cell:not(:last-child),
+      > tr:last-child .last-header-cell:not(:last-child) {
         border-right: none !important;
         box-shadow: 1px 0 0 0 $border_light !important;
       }
     }
 
     .pb_advanced_table_body {
-      .last-cell:not(:last-child) {
+      tr .last-cell:not(:last-of-type),
+      td.last-cell:not(:last-child),
+      .pb_table_td.last-cell:not(:last-child) {
         border-right: none !important;
         box-shadow: 1px 0 0 0 $border_light !important;
       }
     }
 
+    &[class*="column-group-border-"] {
+      .pb_advanced_table_header {
+        th[colspan]:not([colspan="1"]):not(:last-child),
+        .last-header-cell:not(:last-child),
+        > tr:last-child .last-header-cell:not(:last-child) {
+          box-shadow: 1px 0 0 0 var(--column-border-color) !important;
+        }
+      }
+
+      .pb_advanced_table_body {
+        tr .last-cell:not(:last-of-type),
+        td.last-cell:not(:last-child),
+        .pb_table_td.last-cell:not(:last-child) {
+          box-shadow: 1px 0 0 0 var(--column-border-color) !important;
+        }
+      }
+    }
+
     // Dark mode Firefox fixes
     &.dark {
       .pb_advanced_table_header {
-        .last-header-cell:not(:last-child) {
+        // Convert all colspan headers to box-shadow with dark color
+        th[colspan]:not([colspan="1"]) {
+          border-right: none !important;
+          box-shadow: 1px 0 0 0 $border_dark !important;
+        }
+
+        // Convert all last-header-cell borders to box-shadow with dark color
+        .last-header-cell:not(:last-child),
+        > tr:last-child .last-header-cell:not(:last-child),
+        > tr:not(:first-child) .last-header-cell:not(:last-child),
+        > tr:not(:first-child) .last-header-cell:last-child {
           border-right: none !important;
           box-shadow: 1px 0 0 0 $border_dark !important;
         }
       }
 
       .pb_advanced_table_body {
-        .last-cell:not(:last-child) {
+        tr .last-cell:not(:last-of-type),
+        td.last-cell:not(:last-child),
+        .pb_table_td.last-cell:not(:last-child) {
           border-right: none !important;
           box-shadow: 1px 0 0 0 $border_dark !important;
         }
       }
+
+      &[class*="column-group-border-"] {
+        .pb_advanced_table_header {
+          th[colspan]:not([colspan="1"]):not(:last-child),
+          .last-header-cell:not(:last-child),
+          > tr:last-child .last-header-cell:not(:last-child) {
+            box-shadow: 1px 0 0 0 var(--column-border-color) !important;
+          }
+        }
+
+        .pb_advanced_table_body {
+          tr .last-cell:not(:last-of-type),
+          td.last-cell:not(:last-child),
+          .pb_table_td.last-cell:not(:last-child) {
+            box-shadow: 1px 0 0 0 var(--column-border-color) !important;
+          }
+        }
+      }
     }
   }
 }

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

@@ -29,5 +29,167 @@
       label: "Graduated Students",
     }
 ] %>
+<%= pb_rails("caption", props: { text: "Advanced Table Vertical Border Table Props" }) %>
+<%= pb_rails("advanced_table", props: { id: "table_props_table", table_data: @table_data, margin_bottom: "md", column_definitions: column_definitions, table_props: { vertical_border: true, container: false }}) %>
 
-<%= pb_rails("advanced_table", props: { id: "table_props_table", table_data: @table_data, column_definitions: column_definitions, table_props: { vertical_border: true, container: false }}) %>
+<% column_definitions_two = [
+  {
+    accessor: "year",
+    label: "Year",
+    cellAccessors: ["quarter", "month", "day"],
+  },
+  {
+    label: "Enrollment Data",
+    columns: [
+      {
+        accessor: "newEnrollments",
+        label: "New Enrollments",
+      },
+      {
+        accessor: "scheduledMeetings",
+        label: "Scheduled Meetings",
+      },
+    ],
+  },
+  {
+    label: "Performance Data",
+    columns: [
+      {
+        accessor: "attendanceRate",
+        label: "Attendance Rate",
+      },
+      {
+        accessor: "completedClasses",
+        label: "Completed Classes",
+      },
+      {
+        accessor: "classCompletionRate",
+        label: "Class Completion Rate",
+      },
+      {
+        accessor: "graduatedStudents",
+        label: "Graduated Students",
+      },
+    ],
+  },
+] %>
+<%= pb_rails("caption", props: { text: "Advanced Table Vertical Border Multi Header" }) %>
+<%= pb_rails("advanced_table", props: { id: "table_multi_headers_vertical_borders", margin_bottom: "md", table_data: @table_data, column_definitions: column_definitions_two, table_props: { vertical_border: true } }) %>
+
+<% column_definitions_three = [
+  {
+    accessor: "year",
+    label: "Year",
+    cellAccessors: ["quarter", "month", "day"],
+  },
+  {
+    label: "Enrollment Data",
+    columns: [
+      {
+        label: "Enrollment Stats",
+        columns: [
+          {
+            accessor: "newEnrollments",
+            label: "New Enrollments",
+          },
+          {
+            accessor: "scheduledMeetings",
+            label: "Scheduled Meetings",
+          },
+        ],
+      },
+    ],
+  },
+  {
+    label: "Performance Data",
+    columns: [
+      {
+        label: "Completion Metrics",
+        columns: [
+          {
+            accessor: "completedClasses",
+            label: "Completed Classes",
+          },
+          {
+            accessor: "classCompletionRate",
+            label: "Class Completion Rate",
+          },
+        ],
+      },
+      {
+        label: "Attendance",
+        columns: [
+          {
+            accessor: "attendanceRate",
+            label: "Attendance Rate",
+          },
+          {
+            accessor: "scheduledMeetings",
+            label: "Scheduled Meetings",
+          },
+        ],
+      },
+    ],
+  },
+] %>
+<%= pb_rails("caption", props: { text: "Advanced Table Vertical Border Multi Header with Column Group Border Color" }) %>
+<%= pb_rails("advanced_table", props: { id: "beta_table_with_color_headers", margin_bottom: "md", table_data: @table_data, column_definitions: column_definitions_three, column_group_border_color: "text_lt_default", table_props: { vertical_border: true } }) %>
+
+<% column_definitions_four = [
+  {
+    accessor: "year",
+    label: "Year",
+    cellAccessors: ["quarter", "month", "day"],
+  },
+  {
+    label: "Enrollment Data",
+    columns: [
+      {
+        label: "Enrollment Stats",
+        columns: [
+          {
+            accessor: "newEnrollments",
+            label: "New Enrollments",
+          },
+          {
+            accessor: "scheduledMeetings",
+            label: "Scheduled Meetings",
+          },
+        ],
+      },
+    ],
+  },
+  {
+    label: "Performance Data",
+    columns: [
+      {
+        label: "Completion Metrics",
+        columns: [
+          {
+            accessor: "completedClasses",
+            label: "Completed Classes",
+          },
+          {
+            accessor: "classCompletionRate",
+            label: "Class Completion Rate",
+          },
+        ],
+      },
+      {
+        label: "Attendance",
+        columns: [
+          {
+            accessor: "attendanceRate",
+            label: "Attendance Rate",
+          },
+          {
+            accessor: "scheduledMeetings",
+            label: "Scheduled Meetings",
+          },
+        ],
+      },
+    ],
+  },
+] %>
+<%= pb_rails("caption", props: { text: "Advanced Table Vertical Border Multi Header No Vertical Border" }) %>
+<%= pb_rails("advanced_table", props: {id: "beta_table_with_muilti_headers", table_data: @table_data, column_definitions: column_definitions_four }) %>

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

@@ -1,6 +1,7 @@
 import React from "react"
 import AdvancedTable from '../../pb_advanced_table/_advanced_table'
 import MOCK_DATA from "./advanced_table_mock_data.json"
+import Caption from "../../pb_caption/_caption"
 
 const AdvancedTableTableProps = (props) => {
   const columnDefinitions = [
@@ -40,14 +41,203 @@ const AdvancedTableTableProps = (props) => {
     verticalBorder: true
   }
 
+  const columnDefinitionsTwo = [
+    {
+      accessor: "year",
+      label: "Year",
+      cellAccessors: ["quarter", "month", "day"],
+    },
+    {
+      label: "Enrollment Data",
+      columns: [
+        {
+          accessor: "newEnrollments",
+          label: "New Enrollments",
+        },
+        {
+          accessor: "scheduledMeetings",
+          label: "Scheduled Meetings",
+        },
+      ],
+    },
+    {
+      label: "Performance Data",
+      columns: [
+        {
+          accessor: "attendanceRate",
+          label: "Attendance Rate",
+        },
+        {
+          accessor: "completedClasses",
+          label: "Completed Classes",
+        },
+        {
+          accessor: "classCompletionRate",
+          label: "Class Completion Rate",
+        },
+        {
+          accessor: "graduatedStudents",
+          label: "Graduated Students",
+        },
+      ],
+    },
+  ];
+
+  const tablePropsTwo = {
+    verticalBorder: true,
+  }
+
+  const columnDefinitionsThree = [
+    {
+      accessor: "year",
+      label: "Year",
+      cellAccessors: ["quarter", "month", "day"],
+    },
+    {
+      label: "Enrollment Data",
+      columns: [
+        {
+          label: "Enrollment Stats",
+          columns: [
+            {
+              accessor: "newEnrollments",
+              label: "New Enrollments",
+            },
+            {
+              accessor: "scheduledMeetings",
+              label: "Scheduled Meetings",
+            },
+          ],
+        },
+      ],
+    },
+    {
+      label: "Performance Data",
+      columns: [
+        {
+          label: "Completion Metrics",
+          columns: [
+            {
+              accessor: "completedClasses",
+              label: "Completed Classes",
+            },
+            {
+              accessor: "classCompletionRate",
+              label: "Class Completion Rate",
+            },
+          ],
+        },
+        {
+          label: "Attendance",
+          columns: [
+            {
+              accessor: "attendanceRate",
+              label: "Attendance Rate",
+            },
+            {
+              accessor: "scheduledMeetings",
+              label: "Scheduled Meetings",
+            },
+          ],
+        },
+      ],
+    },
+  ];
+
+  const tablePropsThree = {
+    verticalBorder: true
+  }
+
+  const columnDefinitionsFour = [
+    {
+      accessor: "year",
+      label: "Year",
+      cellAccessors: ["quarter", "month", "day"],
+    },
+    {
+      label: "Enrollment Data",
+      columns: [
+        {
+          label: "Enrollment Stats",
+          columns: [
+            {
+              accessor: "newEnrollments",
+              label: "New Enrollments",
+            },
+            {
+              accessor: "scheduledMeetings",
+              label: "Scheduled Meetings",
+            },
+          ],
+        },
+      ],
+    },
+    {
+      label: "Performance Data",
+      columns: [
+        {
+          label: "Completion Metrics",
+          columns: [
+            {
+              accessor: "completedClasses",
+              label: "Completed Classes",
+            },
+            {
+              accessor: "classCompletionRate",
+              label: "Class Completion Rate",
+            },
+          ],
+        },
+        {
+          label: "Attendance",
+          columns: [
+            {
+              accessor: "attendanceRate",
+              label: "Attendance Rate",
+            },
+            {
+              accessor: "scheduledMeetings",
+              label: "Scheduled Meetings",
+            },
+          ],
+        },
+      ],
+    },
+  ];
+
   return (
     <div>
+      <Caption text="Advanced Table Vertical Border Table Props" />
       <AdvancedTable
           columnDefinitions={columnDefinitions}
+          marginBottom="md"
           tableData={MOCK_DATA}
           tableProps={tableProps}
           {...props}
       />
+      <Caption text="Advanced Table Vertical Border Multi Header" />
+      <AdvancedTable
+          columnDefinitions={columnDefinitionsTwo}
+          marginBottom="md"
+          tableData={MOCK_DATA}
+          tableProps={tablePropsTwo}
+          {...props}
+      />
+      <Caption text="Advanced Table Vertical Border Multi Header with Column Group Border Color" />
+      <AdvancedTable
+          columnDefinitions={columnDefinitionsThree}
+          columnGroupBorderColor="text_lt_default"
+          marginBottom="md"
+          tableData={MOCK_DATA}
+          tableProps={tablePropsThree}
+          {...props}
+      />
+      <Caption text="Advanced Table Vertical Border Multi Header No Vertical Border" />
+      <AdvancedTable
+          columnDefinitions={columnDefinitionsFour}
+          tableData={MOCK_DATA}
+          {...props}
+      />
     </div>
   )
 }

data/app/pb_kits/playbook/pb_draggable/context/index.tsx

@@ -30,9 +30,9 @@ const reducer = (state: InitialStateType, action: ActionType) => {
     case 'REORDER_ITEMS': {
       const { dragId, targetId } = action.payload;
       const newItems = [...state.items];
-      const draggedItem = newItems.find(item => item && item.id === dragId);
+      const draggedItem = newItems.find(item => item.id === dragId);
       const draggedIndex = newItems.indexOf(draggedItem);
-      const targetIndex = newItems.findIndex(item => item && item.id === targetId);
+      const targetIndex = newItems.findIndex(item => item.id === targetId);
 
       newItems.splice(draggedIndex, 1);
       newItems.splice(targetIndex, 0, draggedItem);
@@ -144,6 +144,7 @@ export const DraggableProvider = ({
   }, [state.items]);
 
   const handleDragStart = (id: string, container: string) => {
+    console.log('[Draggable] handleDragStart:', { id, container, providerId });
     dispatch({ type: 'SET_DRAG_DATA', payload: { id: id, initialGroup: container, originId: providerId } });
     dispatch({ type: 'SET_IS_DRAGGING', payload: id });
     if (onDragStart) onDragStart(id, container);
@@ -155,6 +156,7 @@ export const DraggableProvider = ({
     if (state.dragData.id !== id) {
       // Check if this is a cross-container drag
       const isCrossContainer = state.dragData.initialGroup !== container;
+      console.log('[Draggable] handleDragEnter:', { id, container, isCrossContainer, draggedId: state.dragData.id });
       
       if (isCrossContainer) {
         // Use cross-container reorder to update container temporarily for dropzone preview
@@ -172,7 +174,10 @@ export const DraggableProvider = ({
     const draggedItemId = state.dragData.id;
     const originalContainer = state.dragData.initialGroup;
     
+    console.log('[Draggable] handleDragEnd:', { draggedItemId, originalContainer });
+    
     if (!draggedItemId) {
+      console.warn('[Draggable] handleDragEnd: No draggedItemId found');
       dispatch({ type: 'SET_IS_DRAGGING', payload: "" });
       dispatch({ type: 'SET_ACTIVE_CONTAINER', payload: "" });
       dispatch({ type: 'SET_DRAG_DATA', payload: { id: "", initialGroup: "", originId: "" } });
@@ -182,9 +187,11 @@ export const DraggableProvider = ({
     const draggedItem = state.items.find(item => item && item.id === draggedItemId);
     const finalContainer = draggedItem ? draggedItem.container : originalContainer;
     
+    console.log('[Draggable] handleDragEnd item found:', { draggedItem: !!draggedItem, finalContainer });
+    
     // Find items above and below in the same container
-    const itemsInContainer = state.items.filter(item => item.container === finalContainer);
-    const indexInContainer = itemsInContainer.findIndex(item => item.id === draggedItemId);
+    const itemsInContainer = state.items.filter(item => item && item.container === finalContainer);
+    const indexInContainer = itemsInContainer.findIndex(item => item && item.id === draggedItemId);
     const itemAbove = indexInContainer > 0 ? itemsInContainer[indexInContainer - 1] : null;
     const itemBelow = indexInContainer < itemsInContainer.length - 1 ? itemsInContainer[indexInContainer + 1] : null;
     
@@ -206,21 +213,33 @@ export const DraggableProvider = ({
     const draggedItemId = state.dragData.id;
     const originalContainer = state.dragData.initialGroup;
     
-    if (!draggedItemId) return; // Guard against missing drag data when dropping too quickly
+    console.log('[Draggable] handleDrop:', { draggedItemId, container, originalContainer });
+    
+    if (!draggedItemId) {
+      console.warn('[Draggable] handleDrop: No draggedItemId found');
+      return; // Guard against missing drag data when dropping too quickly
+    }
     
     const draggedItem = state.items.find(item => item && item.id === draggedItemId);
     
     if (!draggedItem) {
-      // Item not found in state - clear drag state and exit
+      console.error('[Draggable] handleDrop: Item not found in state', { draggedItemId, itemsCount: state.items.length });
+      // Item not found in state: clear drag state and exit
       dispatch({ type: 'SET_IS_DRAGGING', payload: "" });
       dispatch({ type: 'SET_ACTIVE_CONTAINER', payload: "" });
       dispatch({ type: 'SET_DRAG_DATA', payload: { id: "", initialGroup: "", originId: "" } });
       return;
     }
     
-    // Find items above and below in the same container (before changeCategory updates it)
-    const itemsInContainer = state.items.filter(item => item.container === container);
-    const indexInContainer = itemsInContainer.findIndex(item => item.id === draggedItemId);
+    // If dropping in a different container and item hasn't been moved there yet, move to end
+    if (container !== originalContainer && draggedItem.container !== container) {
+      console.log('[Draggable] handleDrop: Moving to container end');
+      dispatch({ type: 'MOVE_TO_CONTAINER_END', payload: { dragId: draggedItemId, newContainer: container } });
+    }
+    
+    // Find items above and below in the same container
+    const itemsInContainer = state.items.filter(item => item && item.container === container);
+    const indexInContainer = itemsInContainer.findIndex(item => item && item.id === draggedItemId);
     const itemAbove = indexInContainer > 0 ? itemsInContainer[indexInContainer - 1] : null;
     const itemBelow = indexInContainer < itemsInContainer.length - 1 ? itemsInContainer[indexInContainer + 1] : null;
     
@@ -230,7 +249,7 @@ export const DraggableProvider = ({
     changeCategory(draggedItemId, container);
     
     // Pass enhanced info to onDrop callback so devs have more context
-    if (onDrop) {
+    if (onDrop && draggedItem) {
       const updatedItem = { ...draggedItem, container };
       onDrop(draggedItemId, container, originalContainer, updatedItem, itemAbove, itemBelow);
     }
@@ -240,25 +259,22 @@ export const DraggableProvider = ({
      if (state.dragData.originId !== providerId) return; // Ignore drag over events from other providers
 
     e.preventDefault();
+    dispatch({ type: 'SET_ACTIVE_CONTAINER', payload: container });
     
-    // Check if we're dragging over a different container than where the item currently is
-    if (!state.dragData.id) return; // Guard against missing drag ID when dragging too quickly
+    // Guard against missing drag ID
+    if (!state.dragData.id) return;
     
+    // Find the dragged item
     const draggedItem = state.items.find(item => item && item.id === state.dragData.id);
     
-    // Only update if item exists and needs to move to a different container
+    // Only move to container end if item exists and is in a different container
     if (draggedItem && draggedItem.container !== container) {
-      // Only dispatch if we're not already in the process of updating to this container
-      // This is needed to prevent multiple rapid MOVE_TO_CONTAINER_END actions that can cause race conditions + errors (Not seen in PB, errors show up in Nitro console)
-      if (state.activeContainer !== container) {
-        dispatch({ type: 'SET_ACTIVE_CONTAINER', payload: container });
-        // This handles the case when dragging to empty space at bottom of container OR in empty container
-        dispatch({ type: 'MOVE_TO_CONTAINER_END', payload: { dragId: state.dragData.id, newContainer: container } });
-        dispatch({ type: 'SET_DRAG_DATA', payload: { id: state.dragData.id, initialGroup: container, originId: providerId } });
-      }
-    } else if (state.activeContainer !== container) {
-      // Just update active container if item is already in correct container
-      dispatch({ type: 'SET_ACTIVE_CONTAINER', payload: container });
+      console.log('[Draggable] handleDragOver: Moving to container end', { dragId: state.dragData.id, fromContainer: draggedItem.container, toContainer: container });
+      // Move item to end of target container for preview
+      dispatch({ type: 'MOVE_TO_CONTAINER_END', payload: { dragId: state.dragData.id, newContainer: container } });
+      dispatch({ type: 'SET_DRAG_DATA', payload: { id: state.dragData.id, initialGroup: container, originId: providerId } });
+    } else if (!draggedItem) {
+      console.error('[Draggable] handleDragOver: Item not found', { dragId: state.dragData.id, itemsCount: state.items.length });
     }
     
     if (onDragOver) onDragOver(e, container);