playbook_ui 15.2.0.pre.alpha.play257911600 → 15.2.0.pre.alpha.testingquickpick11606

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 82b794ea7cbc28ff4082856e2145c9ecda9ef63a2c87a8c5921528878df240b6
-  data.tar.gz: 862326ab3cbeff4b250f5c9d0c1161c17f035c22ef8063c9108a716af5cd8b4e
+  metadata.gz: 071e859887ee48afce502eac1a48c4f29b0a0fb690ed3b155901e1b49fe61c1f
+  data.tar.gz: cea7576059a91fcde56648fa33efc682bce4b07295a289ae491d85b8259f0913
 SHA512:
-  metadata.gz: 23986a83c19969cb62ffc2db0b40357c724b4c3881ac557c462497622ccfbb10c1e578188ed074f79f534205db5200435d4e8e5bf8d7bed16d0a0af3585e7cfd
-  data.tar.gz: 455fa08d0de344832426667183e8d808e5dcc8ba3e8353362eb7769bff96c3bebcdd7c0191faeef01944fef2404ee43daf69f546a6949f71ac28fa15b1ec99b6
+  metadata.gz: '08c3fb4475d4bd060d52cf11dc402a73da972e7c0d718ddeed24a645f484d2789db10c69824da15bd33418c1c7fa96e3f545e8b2e247c1860fd0c5040641f78e'
+  data.tar.gz: 4e753ada93e3b1b41ae279c21aeaee58f5f5c8c750135c23156512bda499d4befd2187e91fb7beb62170e71fa4bd92cf33998759bbf421877ac734eae6e06177

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

@@ -9,9 +9,6 @@ interface UseTableActionsProps {
   setExpanded: (expanded: GenericObject) => void;
   onToggleExpansionClick?: (arg: Row<GenericObject>) => void;
   onRowSelectionChange?: (rowSelection: any) => void;
-  inlineRowLoading?: boolean;
-  localPagination?: { pageIndex: number; pageSize: number };
-  setLocalPagination?: (pagination: { pageIndex: number; pageSize: number }) => void;
 }
 
 export function useTableActions({
@@ -19,10 +16,7 @@ export function useTableActions({
   expanded,
   setExpanded,
   onToggleExpansionClick,
-  onRowSelectionChange,
-  inlineRowLoading = false,
-  localPagination,
-  setLocalPagination
+  onRowSelectionChange
 }: UseTableActionsProps) {
 
   // State to achieve 1 second delay before fetching more rows
@@ -44,17 +38,8 @@ export function useTableActions({
 
   // Handle pagination
   const onPageChange = useCallback((page: number) => {
-    if (inlineRowLoading && setLocalPagination && localPagination) {
-      // Use manual pagination state for inlineRowLoading
-      setLocalPagination({
-        ...localPagination,
-        pageIndex: page - 1
-      });
-    } else {
-      // Use tanstack's built-in pagination
-      table.setPageIndex(page - 1);
-    }
-  }, [table, inlineRowLoading, setLocalPagination, localPagination]);
+    table.setPageIndex(page - 1);
+  }, [table]);
 
   // Handle scroll detection for infinite scroll/virtualization
   const fetchMoreOnBottomReached = useCallback((

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

@@ -35,7 +35,6 @@ interface UseTableStateProps {
   onRowSelectionChange?: (arg: RowSelectionState) => void;
   columnVisibilityControl?: GenericObject;
   rowStyling?: GenericObject;
-  inlineRowLoading?: boolean;
 }
 
 export function useTableState({
@@ -54,8 +53,7 @@ export function useTableState({
   tableOptions,
   columnVisibilityControl,
   pinnedRows,
-  rowStyling,
-  inlineRowLoading = false
+  rowStyling
 }: UseTableStateProps) {
 
   // Create a local state for expanded and setExpanded if expandedControl not used
@@ -66,12 +64,6 @@ export function useTableState({
   const [localRowPinning, setLocalRowPinning] = useState<RowPinningState>({
     top: [],
   });
-  // 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
-  const [localPagination, setLocalPagination] = useState({
-    pageIndex: paginationProps?.pageIndex ?? 0, 
-    pageSize: paginationProps?.pageSize ?? 20,
-  });
   // Determine whether to use the prop or the local state
   const expanded = expandedControl ? expandedControl.value : localExpanded;
   const setExpanded = expandedControl ? expandedControl.onChange : setLocalExpanded;
@@ -141,7 +133,6 @@ export function useTableState({
       ...(selectableRows  && { rowSelection }),
       ...(columnVisibility && { columnVisibility }),
       ...(pinnedRows && { rowPinning }),
-      ...(inlineRowLoading && { pagination: localPagination }),
     },
   }), [
     expanded,
@@ -151,36 +142,23 @@ export function useTableState({
     rowSelection,
     columnVisibility,
     rowPinning,
-    inlineRowLoading,
-    localPagination
   ]);
 
   // Pagination configuration
   const paginationInitializer = useMemo(() => {
     if (!pagination) return {};
 
-    if (inlineRowLoading) {
-      // Use manual pagination state when inlineRowLoading is enabled (see https://tanstack.com/table/latest/docs/guide/pagination#client-side-pagination)
-      return {
-        getPaginationRowModel: getPaginationRowModel(),
-        paginateExpandedRows: false,
-        onPaginationChange: setLocalPagination,
-        autoResetPageIndex: false, // This is what prevent auto-reset of page index
-      };
-    } else {
-      // Use normal pagination initialization for non- inlineRowLoading usecases
-      return {
-        getPaginationRowModel: getPaginationRowModel(),
-        paginateExpandedRows: false,
-        initialState: {
-          pagination: {
-            pageIndex: paginationProps?.pageIndex ?? 0,
-            pageSize: paginationProps?.pageSize ?? 20,
-          },
+    return {
+      getPaginationRowModel: getPaginationRowModel(),
+      paginateExpandedRows: false,
+      initialState: {
+        pagination: {
+          pageIndex: paginationProps?.pageIndex ?? 0,
+          pageSize: paginationProps?.pageSize ?? 20,
         },
-      };
-    }
-  }, [pagination, paginationProps, inlineRowLoading]);
+      },
+    };
+  }, [pagination, paginationProps]);
 
   // Initialize the table
   const table = useReactTable({
@@ -228,27 +206,9 @@ export function useTableState({
   // Set pagination state when pagination is enabled
   useEffect(() => {
     if (pagination && paginationProps?.pageSize) {
-      if (inlineRowLoading) {
-        // Update local pagination state for inlineRowLoading
-        setLocalPagination(prev => ({
-          ...prev,
-          pageSize: paginationProps.pageSize
-        }));
-      } else {
-        table.setPageSize(paginationProps.pageSize);
-      }
-    }
-  }, [pagination, paginationProps?.pageSize, table, inlineRowLoading]);
-
-  // Update local pagination when paginationProps change and inlineRowLoading is enabled
-  useEffect(() => {
-    if (pagination && inlineRowLoading && paginationProps) {
-      setLocalPagination({
-        pageIndex: paginationProps.pageIndex ?? localPagination.pageIndex,
-        pageSize: paginationProps.pageSize ?? localPagination.pageSize,
-      });
+      table.setPageSize(paginationProps.pageSize);
     }
-  }, [pagination, inlineRowLoading, paginationProps?.pageIndex, paginationProps?.pageSize]);
+  }, [pagination, paginationProps?.pageSize, table]);
 
   // Check if table has any sub-rows
   const hasAnySubRows = table.getRowModel().rows.some(row => row.subRows && row.subRows.length > 0);
@@ -287,8 +247,6 @@ export function useTableState({
     rowSelection,
     fullData,
     totalFetched,
-    isFetching,
-    localPagination,
-    setLocalPagination
+    isFetching
   };
 }

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

@@ -134,9 +134,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     updateLoadingStateRowCount,
     fullData,
     totalFetched,
-    isFetching,
-    localPagination,
-    setLocalPagination
+    isFetching
   } = useTableState({
     tableData,
     columnDefinitions,
@@ -154,8 +152,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     onRowSelectionChange,
     columnVisibilityControl,
     pinnedRows,
-    rowStyling,
-    inlineRowLoading
+    rowStyling
   });
 
   // Initialize table actions
@@ -168,10 +165,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     expanded,
     setExpanded,
     onToggleExpansionClick,
-    onRowSelectionChange,
-    inlineRowLoading,
-    localPagination,
-    setLocalPagination
+    onRowSelectionChange
   });
 
   // Set table row count for loading state

data/app/pb_kits/playbook/pb_date_picker/sass_partials/_quick_pick_styles.scss

@@ -9,29 +9,20 @@ $pb_card_border_radius: $border_rad_heavier;
 
 // used to display dropdown on the left of the calender
 .quick-pick-drop-down {
-  width: auto;
-  display: grid;
+  width: 100%;
 }
 
 .quick-pick-ul {
-  padding: $space_xs 0px;
   margin: 0;
   list-style: none;
 }
 
 .nav-item {
   list-style: none;
-  border-radius: 6px;
-  border-bottom: 0;
-  margin: $space_xs $space_sm;
 }
 
 .nav-item-link {
   text-decoration: none;
-  border-width: $pb_card_border_width;
-  border-style: solid;
-  border-color: $border_light;
-  border-radius: $pb_card_border_radius;
   padding: $space_xs 14px;
   transition-property: color, background-color;
   transition-duration: 0.15s;
@@ -40,15 +31,21 @@ $pb_card_border_radius: $border_rad_heavier;
   color: $charcoal;
   font-size: $font_default;
   font-weight: $regular;
+  text-align: left;
+  border-bottom: 1px solid $border_light;
   &.active {
-    border-width: 2px;
-    border-color: $primary;
+    color: $white;
+    background-color: $primary;
+    &:hover {
+      background-color: $product_1_background;
+      color: $white;
+    }
   }
   @media (hover:hover) {
     &:hover {
       cursor: pointer;
-      box-shadow: $shadow-deep;
-      border-color: $slate;
+      background-color: $bg_light;
+      color: $primary;
     }
   }
 }
@@ -57,19 +54,3 @@ $pb_card_border_radius: $border_rad_heavier;
 .quick-pick-drop-down > .flatpickr-months, .quick-pick-drop-down > .flatpickr-innerContainer {
   display: none;
 }
-
-@media only screen and (max-width: 767px) {
-  .quick-pick-ul {
-    padding: $space_xs $space_xs;
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-  }
-
-  .nav-item {
-    margin: $space_xxs $space_xs;
-  }
-
-  .nav-item-link {
-    padding: $space_xs $space_xxs;
-  }
-}