playbook_ui 15.1.0.pre.alpha.timelinescss11189 → 15.1.0.pre.alpha.typeaheadscss11143

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 18b16d003e09f227fdaa17123c1b08e423071f708f49ca524fb7e2e216c714fc
-  data.tar.gz: ac831c8bb1bdd89eae2244be43c19974c19d1f8cc8019b7d01ec3cc18152427a
+  metadata.gz: 146b2b16a0667788778819436fdb56b04d5a5287d6f0495d3959a6462816432c
+  data.tar.gz: b8076a2e020e664f1e6765e9bc18ea8ebc7b4281046d57489952e0b040aff998
 SHA512:
-  metadata.gz: 120b76c6266f100da5befbcc326f54af6f4db972aad12fb97042abecc17f54d593b87764216a11e23dad84ec853d5976ff713a2c86891395b5a70a980b49cbee
-  data.tar.gz: 3b6a97952ca69f967cf9d445391c6a67de36ae76ec5534590fcaf2643946b6cd530080a5902d2072be73026acd6022407a73a9181353893b6f6bed0b43e416bc
+  metadata.gz: 2efcb9e518ee3d5f013522621873d38ad9a18522d59b9d2b7f6f547aed7cd88ad7694fa01d5acd9b83cd4973e6a60ecb7b291a0631a216ee4e7f8aeeb8d8983d
+  data.tar.gz: c63671f77d1ac529fa10ca7bc079e1d36ccdbb73d04b64b5b7744630edf6c8a67e53d65146044b3c4e491f8e62ad2e2a8335778583868cda38a3ddd800f0467e

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

@@ -146,8 +146,6 @@ export function useTableState({
 
   // Pagination configuration
   const paginationInitializer = useMemo(() => {
-    if (!pagination) return {};
-
     return {
       getPaginationRowModel: getPaginationRowModel(),
       paginateExpandedRows: false,
@@ -203,13 +201,6 @@ export function useTableState({
     onRowPinningChange({ top: allPinned });
   }, [table, pinnedRows?.value?.top?.join(',')]);
 
-  // Set pagination state when pagination is enabled
-  useEffect(() => {
-    if (pagination && paginationProps?.pageSize) {
-      table.setPageSize(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);
   const selectedRowsLength = Object.keys(table.getState().rowSelection).length;

data/app/pb_kits/playbook/pb_dropdown/_dropdown.scss

@@ -10,15 +10,9 @@
 @import "./scss_partials/dropdown_animation";
 @import "dropdown_mixin";
 
-.pb_dropdown_default,
-.pb_dropdown_subtle,
-.pb_dropdown_default_separators_hidden,
-.pb_dropdown_subtle_separators_hidden {
+[class*="pb_dropdown"] {
   .dropdown_wrapper {
-    .dropdown_trigger_wrapper,
-    .dropdown_trigger_wrapper_focus,
-    .dropdown_trigger_wrapper_focus_select_only,
-    .dropdown_trigger_wrapper_select_only {
+    [class*="dropdown_trigger_wrapper"] {
       @include pb_body;
       border: 1px solid $border_light;
       background-color: $white;
@@ -54,11 +48,11 @@
         transition: box-shadow 0.15s ease-in-out;
       }
 
-      &.dropdown_trigger_wrapper_select_only {
+      &[class*="_select_only"] {
         box-shadow: inset 0 -11px 20px rgba($primary, 0.05);
       }
 
-      &.dropdown_trigger_wrapper_focus {
+      &[class*="_focus"] {
         box-shadow: 0px 0px 0 1px $primary !important;
         transition: box-shadow 0.1s ease-in-out;
       }
@@ -75,12 +69,7 @@
       z-index: $z_1;
       width: 100%;
 
-      .pb_dropdown_option,
-      .pb_dropdown_option_list,
-      .pb_dropdown_option_selected,
-      .pb_dropdown_option_focused,
-      .pb_dropdown_option_list_focused,
-      .pb_dropdown_option_selected_focused {
+      [class*="pb_dropdown_option"] {
         padding-left: $space_sm;
         padding-right: $space_sm;
         padding-top: $space_xs;
@@ -90,14 +79,11 @@
           background-color: $bg_light;
         }
 
-        &.pb_dropdown_option_focused,
-        &.pb_dropdown_option_list_focused,
-        &.pb_dropdown_option_selected_focused {
+        &[class*="_focused"] {
           background-color: $bg_light;
         }
 
-        &.pb_dropdown_option_list,
-        &.pb_dropdown_option_list_focused {
+        &[class*="_list"] {
           border-bottom: 1px solid $border_light;
 
           &:hover, &:focus {
@@ -106,8 +92,7 @@
             }
           }
         }
-        &.pb_dropdown_option_selected,
-        &.pb_dropdown_option_selected_focused {
+        &[class*="selected"] {
           background-color: $primary;
           color: $white;
           [class^="pb_body"],
@@ -156,66 +141,41 @@
     }
 
     &.error {
-      .pb_body_kit_negative {
+      [class*=pb_body_kit] {
         margin-top: $space_xs / 2;
       }
 
-      .dropdown_trigger_wrapper,
-      .dropdown_trigger_wrapper_focus,
-      .dropdown_trigger_wrapper_focus_select_only,
-      .dropdown_trigger_wrapper_select_only {
+      [class*="dropdown_trigger_wrapper"] {
         border-color: $error;
         box-shadow: none !important;
       }
     }
   }
 
-  &.pb_dropdown_default_separators_hidden,
-  &.pb_dropdown_subtle_separators_hidden {
+  &[class*="separators_hidden"] {
     .dropdown_wrapper {
       .pb_dropdown_container {
 
-        .pb_dropdown_option,
-        .pb_dropdown_option_list,
-        .pb_dropdown_option_selected,
-        .pb_dropdown_option_focused,
-        .pb_dropdown_option_list_focused,
-        .pb_dropdown_option_selected_focused {
+        [class*="pb_dropdown_option"] {
           border: none;
         }
       }
     }
   }
 
-  &.pb_dropdown_subtle,
-  &.pb_dropdown_subtle_separators_hidden {
+  &[class*="subtle"] {
     .dropdown_wrapper {
       .pb_dropdown_container {
         
-        .pb_dropdown_option:first-child,
-        .pb_dropdown_option_list:first-child,
-        .pb_dropdown_option_selected:first-child,
-        .pb_dropdown_option_focused:first-child,
-        .pb_dropdown_option_list_focused:first-child,
-        .pb_dropdown_option_selected_focused:first-child {
+        [class*="pb_dropdown_option"]:first-child {
           margin-top: $space_xs;
         }
 
-        .pb_dropdown_option:last-child,
-        .pb_dropdown_option_list:last-child,
-        .pb_dropdown_option_selected:last-child,
-        .pb_dropdown_option_focused:last-child,
-        .pb_dropdown_option_list_focused:last-child,
-        .pb_dropdown_option_selected_focused:last-child {
+        [class*="pb_dropdown_option"]:last-child {
           margin-bottom: $space_xs;
         }
 
-        .pb_dropdown_option,
-        .pb_dropdown_option_list,
-        .pb_dropdown_option_selected,
-        .pb_dropdown_option_focused,
-        .pb_dropdown_option_list_focused,
-        .pb_dropdown_option_selected_focused {
+        [class*="pb_dropdown_option"] {
           margin: $space_xs;
           padding: $space_xs;
           border-radius: $border_radius_md;
@@ -233,44 +193,24 @@
           }
         }
         
-        .pb_dropdown_option:last-child::after,
-        .pb_dropdown_option_list:last-child::after,
-        .pb_dropdown_option_selected:last-child::after,
-        .pb_dropdown_option_focused:last-child::after,
-        .pb_dropdown_option_list_focused:last-child::after,
-        .pb_dropdown_option_selected_focused:last-child::after {
+        [class*="pb_dropdown_option"]:last-child::after {
           display: none; 
         }
       }
     }
   
-    &.pb_dropdown_subtle_separators_hidden {
+    &[class*="separators_hidden"] {
       .dropdown_wrapper {
         .pb_dropdown_container {
-          .pb_dropdown_option:first-child,
-          .pb_dropdown_option_list:first-child,
-          .pb_dropdown_option_selected:first-child,
-          .pb_dropdown_option_focused:first-child,
-          .pb_dropdown_option_list_focused:first-child,
-          .pb_dropdown_option_selected_focused:first-child {
+          [class*="pb_dropdown_option"]:first-child {
             margin-top: $space_xs;
           }
   
-          .pb_dropdown_option:last-child,
-          .pb_dropdown_option_list:last-child,
-          .pb_dropdown_option_selected:last-child,
-          .pb_dropdown_option_focused:last-child,
-          .pb_dropdown_option_list_focused:last-child,
-          .pb_dropdown_option_selected_focused:last-child {
+          [class*="pb_dropdown_option"]:last-child {
             margin-bottom: $space_xs;
           }
 
-          .pb_dropdown_option,
-          .pb_dropdown_option_list,
-          .pb_dropdown_option_selected,
-          .pb_dropdown_option_focused,
-          .pb_dropdown_option_list_focused,
-          .pb_dropdown_option_selected_focused {
+          [class*="pb_dropdown_option"] {
             padding: $space_xxs $space_xs;
             margin: $space_xxs $space_xs;
      
@@ -278,8 +218,7 @@
               height: 0px;
             }
 
-            &.pb_dropdown_option_selected,
-            &.pb_dropdown_option_selected_focused {
+            &[class*="selected"] {
               border-bottom: none;
             }
           }
@@ -290,10 +229,7 @@
 
   &.dark {
     .dropdown_wrapper {
-      .dropdown_trigger_wrapper,
-      .dropdown_trigger_wrapper_focus,
-      .dropdown_trigger_wrapper_focus_select_only,
-      .dropdown_trigger_wrapper_select_only {
+      [class*="dropdown_trigger_wrapper"] {
         @include pb_body_light_dark;
         background-color: rgba($white, 0.1) !important;
         background: none;
@@ -308,7 +244,7 @@
         [class^="pb_body"] {
           color: $white;
         }
-        &.dropdown_trigger_wrapper_select_only {
+        &[class*="_select_only"] {
           box-shadow: inset 0 -11px 20px rgba($white, 0.05);
         }
         .dropdown_input {
@@ -318,10 +254,7 @@
       }
 
       &.error {
-        .dropdown_trigger_wrapper,
-        .dropdown_trigger_wrapper_focus,
-        .dropdown_trigger_wrapper_focus_select_only,
-        .dropdown_trigger_wrapper_select_only {
+        [class*="dropdown_trigger_wrapper"] {
           border-color: $error_dark;
         }
       }
@@ -335,28 +268,19 @@
         color: $white !important;
       }
 
-      .pb_dropdown_option,
-      .pb_dropdown_option_list,
-      .pb_dropdown_option_selected,
-      .pb_dropdown_option_focused,
-      .pb_dropdown_option_list_focused,
-      .pb_dropdown_option_selected_focused {
+      [class*="pb_dropdown_option"] {
         &:hover {
           background-color: $hover_dark;
         }
 
-        &.pb_dropdown_option_focused,
-        &.pb_dropdown_option_list_focused,
-        &.pb_dropdown_option_selected_focused {
+        &[class*="_focused"] {
           background-color: $hover_dark;
         }
 
-        &.pb_dropdown_option_list,
-        &.pb_dropdown_option_list_focused {
+        &[class*="_list"] {
           border-color: rgba($white, 0.15);
         }
-        &.pb_dropdown_option_selected,
-        &.pb_dropdown_option_selected_focused {
+        &[class*="selected"] {
           background-color: $primary;
           border-bottom: rgba($white, 0.15);
         }

data/app/pb_kits/playbook/pb_multiple_users_stacked/_multiple_users_stacked.scss

@@ -89,18 +89,7 @@ $positions: (
   }
 }
 
-.pb_multiple_users_stacked_kit,
-.pb_multiple_users_stacked_kit_single,
-.pb_multiple_users_stacked_kit_bubble,
-.pb_multiple_users_stacked_kit_single_bubble,
-.pb_multiple_users_stacked_kit_bubble_size_sm,
-.pb_multiple_users_stacked_kit_bubble_size_md,
-.pb_multiple_users_stacked_kit_bubble_size_lg,
-.pb_multiple_users_stacked_kit_bubble_size_xl,
-.pb_multiple_users_stacked_kit_single_bubble_size_sm,
-.pb_multiple_users_stacked_kit_single_bubble_size_md,
-.pb_multiple_users_stacked_kit_single_bubble_size_lg,
-.pb_multiple_users_stacked_kit_single_bubble_size_xl {
+[class^=pb_multiple_users_stacked_kit] {
   $container_size: map-get($avatar-sizes, "xs");
   $bubble_container_size: map-get($avatar-sizes, "sm");
   $overlap: -15px;
@@ -114,8 +103,7 @@ $positions: (
   position: relative;
   flex-shrink: 0;
   flex-grow: 0;
-  .pb_avatar_kit_size_xs.pb_multiple_users_stacked_item,
-  .pb_avatar_kit_size_md.pb_multiple_users_stacked_item {
+  [class^=pb_avatar_kit].pb_multiple_users_stacked_item {
     @include avatar-size($stacked_size);
     &.dark {
       .avatar_wrapper {
@@ -129,17 +117,10 @@ $positions: (
       }
     }
   }
-  &.pb_multiple_users_stacked_kit_single .pb_multiple_users_stacked_item,
-  &.pb_multiple_users_stacked_kit_single_bubble .pb_multiple_users_stacked_item,
-  &.pb_multiple_users_stacked_kit_single_bubble_size_sm .pb_multiple_users_stacked_item,
-  &.pb_multiple_users_stacked_kit_single_bubble_size_md .pb_multiple_users_stacked_item,
-  &.pb_multiple_users_stacked_kit_single_bubble_size_lg .pb_multiple_users_stacked_item,
-  &.pb_multiple_users_stacked_kit_single_bubble_size_xl .pb_multiple_users_stacked_item {
+  &[class*=_single] .pb_multiple_users_stacked_item {
     @include avatar-size(28px);
   }
-  .pb_avatar_kit_size_xs.second_item,
-  .pb_avatar_kit_size_md.second_item, 
-  .pb_badge_kit_primary_rounded.second_item {
+  [class^=pb_avatar_kit].second_item, [class^=pb_badge_kit].second_item {
     @include position((bottom: 0, right: 0));
     z-index: 2;
     background: tint($primary, 90%);
@@ -162,8 +143,7 @@ $positions: (
 
   // Iterate over each size to adjust the bubble container only when class contains "_bubble_"
   @each $size_name, $size_value in $avatar-sizes {
-      &.pb_multiple_users_stacked_kit_bubble_size_#{$size_name},
-      &.pb_multiple_users_stacked_kit_single_bubble_size_#{$size_name} {
+      &[class*=_bubble_][class*=_size_#{$size_name}] {
         // Set bubble container size based on the class
         $bubble_container_size: $size_value;
         $container_size: $size_value;
@@ -181,8 +161,7 @@ $positions: (
           background-color: $card_dark;
         }
   
-        .pb_avatar_kit_size_xs.pb_multiple_users_stacked_item,
-        .pb_avatar_kit_size_md.pb_multiple_users_stacked_item {
+        [class^=pb_avatar_kit].pb_multiple_users_stacked_item {
           @include avatar-size($bubble_container_size * 0.45); // Adjust the size of stacked avatars
   
           &.dark {
@@ -196,8 +175,7 @@ $positions: (
           }
         }
   
-        .pb_avatar_kit_size_xs,
-        .pb_avatar_kit_size_md {
+        [class^=pb_avatar_kit] {
           // First Item
           &.first_item {
             @include position(map-get(map-get($positions, 'first-item-double'), $size_name));
@@ -257,13 +235,8 @@ $positions: (
           }
         }
         
-        &.pb_multiple_users_stacked_kit_single_bubble,
-        &.pb_multiple_users_stacked_kit_single_bubble_size_sm,
-        &.pb_multiple_users_stacked_kit_single_bubble_size_md,
-        &.pb_multiple_users_stacked_kit_single_bubble_size_lg,
-        &.pb_multiple_users_stacked_kit_single_bubble_size_xl {
-          .pb_avatar_kit_size_xs.first_item,
-          .pb_avatar_kit_size_md.first_item {
+        &[class*=_single_bubble] {
+          [class^=pb_avatar_kit].first_item {
             @include position((top: 0, left: 0));
             @include avatar-size($bubble_container_size);
           }

data/app/pb_kits/playbook/pb_text_input/_text_input.scss

@@ -3,9 +3,6 @@
 @import "../tokens/colors";
 
 .pb_text_input_kit {
-  label {
-    display: block !important;
-  }
   .pb_text_input_kit_label {
     margin-bottom: $space_xs;
     display: block;