playbook_ui 13.5.0.pre.alpha.play984collapsiblekithidestooltips1203 → 13.5.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: aab7a2026fea0f718678e51045ec994772216ad74e0a9a41e5899de34a405009
-  data.tar.gz: a9c6819da8a20bed50ed2024b4a598514d637b5cc497969b8c2a42552147f794
+  metadata.gz: 3fbde0c47559510e98e402f39e88e8eee92d920fe6316a10cf69edd6433c593d
+  data.tar.gz: 528eb97cc4627c05a97fdc42c44e2b306481fe8467f9abf38dd135e95916c5a1
 SHA512:
-  metadata.gz: c1d017c3592b3531ea82d819e6e34222f4ebad899cb3c9a3950506a3588f94827d90e18c82405d5eab5ed6a7f12fee4caaadd67fe09ca4622f638c29302ac895
-  data.tar.gz: 8600414aea6c3ebf852b80b1c6566e601bf7dab8abdcc4e9d343a90872190658fc4f88f384925d1112bbe2233a1f8190b76ae22ba224bbe0e4550236efff4a50
+  metadata.gz: 476c5d3b3afc10856fad58a4a417b9124a45bce23ac7af0987fb94e7e5987785786472c35b35a8fe8c1acb8db6c5c040c423f29886c26a0dd8ec7c7ea2baf072
+  data.tar.gz: ae782bd74d7a7cf8ee5f88a804079742e28044fc0f7228b1243292711c1d40bf6c8f54c2ed004bc8994321183d35efe7e975c867a99e5baba781f939d8eb76e9

data/app/pb_kits/playbook/_playbook.scss

@@ -113,6 +113,5 @@
 @import './utilities/border_radius';
 @import './utilities/hover';
 @import './utilities/text_align';
-@import './utilities/overflow';
 
 @import 'pb_multi_level_select/multi_level_select';

data/app/pb_kits/playbook/pb_body/_body.tsx

@@ -24,7 +24,7 @@ type BodyProps = {
 } & GlobalProps
 
 const Body = (props: BodyProps): React.ReactElement => {
-  if (props.variant) deprecatedProps() //status prop is deprecated, use color instead please
+  if (props.variant) deprecatedProps("Body", ["status"]) //status prop is deprecated, use color instead please
   const {
     aria = {},
     children,

data/app/pb_kits/playbook/pb_caption/_caption.tsx

@@ -17,7 +17,7 @@ type CaptionProps = {
 } & GlobalProps;
 
 const Caption = (props: CaptionProps): React.ReactElement => {
-  if (props.variant) deprecatedProps() //variant prop is deprecated, use color instead
+  if (props.variant) deprecatedProps('Title', ['variant']) //variant prop is deprecated, use color instead
   const {
     aria = {},
     children,

data/app/pb_kits/playbook/pb_card/card.rb

@@ -4,7 +4,7 @@ module Playbook
   module PbCard
     class Card < Playbook::KitBase
       prop :selected, type: Playbook::Props::Boolean, default: false
-      prop :highlight, type: Playbook::Props::HashProp,
+      prop :highlight, type: Playbook::Props::Hash,
                        default: {}
       prop :tag, type: Playbook::Props::Enum,
                  values: %w[div section footer header article aside main nav],

data/app/pb_kits/playbook/pb_checkbox/checkbox.rb

@@ -10,7 +10,7 @@ module Playbook
       prop :value
       prop :name
 
-      prop :input_options, type: Playbook::Props::HashProp,
+      prop :input_options, type: Playbook::Props::Hash,
                            default: {}
       prop :required, type: Playbook::Props::Boolean,
                       default: false

data/app/pb_kits/playbook/pb_collapsible/_collapsible.scss

@@ -12,6 +12,7 @@
     overflow: hidden;
     transition: height 300ms, padding 300ms ease-in-out;
   }
+
   .toggle-content.is-visible {
     display: block;
     height: auto;

data/app/pb_kits/playbook/pb_collapsible/_helper_functions.ts

@@ -1,29 +1,25 @@
-export const showElement = (elem:any) => {
-  elem.style.display = 'block';
-  const height = elem.scrollHeight + 'px'; // Get its height
-  elem.style.height = height; // Update the max-height
-  elem.classList.add('is-visible');
-  elem.style.overflow = "hidden"
-  // Once the transition is complete, remove the inline max-height so the content can scale responsively
-  window.setTimeout(() => {
-    elem.style.height = '';
-    elem.style.overflow = "visible"
-  }, 300);
-};
+export const showElement = (elem: any) => {
+    elem.style.display = 'block';
+    const height = elem.scrollHeight + 'px'; // Get its height
+    elem.style.height = height; // Update the max-height
+    elem.classList.add('is-visible')
+    // Once the transition is complete, remove the inline max-height so the content can scale responsively
+    window.setTimeout(() => {
+      elem.style.height = '';
+    }, 300);
+  };
 
-export const hideElement = (elem:any) => {
-  elem.style.height = elem.scrollHeight + 'px';
+  export const hideElement = (elem:any) => {
+    elem.style.height = elem.scrollHeight + 'px';
 
-  window.setTimeout(() => {
-    elem.style.height = '0';
-    elem.style.paddingTop = '0';
-    elem.style.paddingBottom = '0';
-    elem.style.overflow = "hidden"
-  }, 1);
+    window.setTimeout(() => {
+      elem.style.height = '0';
+      elem.style.paddingTop = '0';
+      elem.style.paddingBottom = '0';
+    }, 1);
 
-  // When the transition is complete, hide it
-  window.setTimeout(() => {
-    elem.classList.remove('is-visible');
-    elem.style.overflow = ""
-  }, 300);
-};
+    // When the transition is complete, hide it
+    window.setTimeout(() => {
+      elem.classList.remove('is-visible');
+    }, 300);
+  };

data/app/pb_kits/playbook/pb_collapsible/index.js

@@ -33,12 +33,10 @@ export default class PbCollapsible extends PbEnhancedElement {
     const height = getHeight()
     elem.classList.add('is-visible')
     elem.style.height = height // Update the max-height
-    elem.style.overflow = "hidden"
 
     // Once the transition is complete, remove the inline max-height so the content can scale responsively
     window.setTimeout(() => {
       elem.style.height = ''
-      elem.style.overflow = ""
     }, 300)
   }
 
@@ -50,13 +48,11 @@ export default class PbCollapsible extends PbEnhancedElement {
       elem.style.height = '0'
       elem.style.paddingTop = '0'
       elem.style.paddingBottom = '0'
-      elem.style.overflow = "hidden"
     }, 1)
 
     // When the transition is complete, hide it
     window.setTimeout(() => {
       elem.classList.remove('is-visible')
-      elem.style.overflow = ""
     }, 300)
   }
 

data/app/pb_kits/playbook/pb_dashboard_value/dashboard_value.rb

@@ -6,10 +6,10 @@ module Playbook
       prop :align, type: Playbook::Props::Enum,
                    values: %w[left center right],
                    default: "left"
-      prop :stat_change, type: Playbook::Props::HashProp,
+      prop :stat_change, type: Playbook::Props::Hash,
                          default: {}
       prop :stat_label
-      prop :stat_value, type: Playbook::Props::HashProp,
+      prop :stat_value, type: Playbook::Props::Hash,
                         default: {}
 
       def formatted_stat_value

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

@@ -49,7 +49,7 @@ type DatePickerProps = {
 } & GlobalProps
 
 const DatePicker = (props: DatePickerProps): React.ReactElement => {
-  if (props.plugins) deprecatedProps()
+  if (props.plugins) deprecatedProps('Date Picker', ['plugins'])
 
   const {
     allowInput = false,

data/app/pb_kits/playbook/pb_date_picker/date_picker.rb

@@ -34,9 +34,9 @@ module Playbook
                     default: false
       prop :label, type: Playbook::Props::String,
                    default: "Date Picker"
-      prop :input_aria, type: Playbook::Props::HashProp,
+      prop :input_aria, type: Playbook::Props::Hash,
                         default: {}
-      prop :input_data, type: Playbook::Props::HashProp,
+      prop :input_data, type: Playbook::Props::Hash,
                         default: {}
       prop :max_date, type: Playbook::Props::String
       prop :min_date, type: Playbook::Props::String

data/app/pb_kits/playbook/pb_date_time_stacked/_date_time_stacked.tsx

@@ -19,7 +19,7 @@ type DateTimeStackedProps = {
 }
 
 const DateTimeStacked = (props: DateTimeStackedProps): React.ReactElement => {
-  if (props.date) deprecatedProps()
+  if (props.date) deprecatedProps('Date Time Stacked', ['date'])
 
   const {
     date,

data/app/pb_kits/playbook/pb_file_upload/file_upload.rb

@@ -18,7 +18,7 @@ module Playbook
       prop :full_width, type: Playbook::Props::Boolean,
                         default: false
 
-      prop :input_options, type: Playbook::Props::HashProp,
+      prop :input_options, type: Playbook::Props::Hash,
                            default: {}
 
       def classname

data/app/pb_kits/playbook/pb_flex/_flex_item.scss

@@ -44,6 +44,14 @@
     order: -1;
   }
 
+  $overflow_values: auto, hidden, inherit, initial, scroll, visible;
+
+  @each $value in $overflow_values {
+    &.overflow_#{$value} {
+      overflow: #{$value}
+    }
+  }
+
   @for $i from 0 through 12 {
     &[class*=_flex_#{$i}]{
       flex: $i;

data/app/pb_kits/playbook/pb_flex/_flex_item.tsx

@@ -8,6 +8,7 @@ type FlexItemPropTypes = {
   grow?: boolean,
   shrink?: boolean,
   className?: string,
+  overflow?: "auto" | "hidden" | "initial" | "inherit" | "scroll" | "visible",
   order?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 'first' | 'none',
   alignSelf?: "start" | "end" | "center" | "stretch" | null,
   displayFlex?: boolean
@@ -19,6 +20,7 @@ const FlexItem = (props: FlexItemPropTypes): React.ReactElement => {
     className,
     fixedSize,
     grow,
+    overflow = null,
     shrink,
     flex = 'none',
     order = 'none',
@@ -28,6 +30,7 @@ const FlexItem = (props: FlexItemPropTypes): React.ReactElement => {
   const growClass = grow === true ? 'grow' : ''
   const displayFlexClass = displayFlex === true ? `display_flex_${displayFlex}` : ''
   const flexClass = flex !== 'none' ? `flex_${flex}` : ''
+  const overflowClass = overflow ? `overflow_${overflow}` : ''
   const shrinkClass = shrink === true ? 'shrink' : ''
   const alignSelfClass = alignSelf ? `align_self_${alignSelf}` : ''
   const fixedStyle =
@@ -36,7 +39,7 @@ const FlexItem = (props: FlexItemPropTypes): React.ReactElement => {
 
   return (
     <div
-        className={classnames(buildCss('pb_flex_item_kit', growClass, shrinkClass, flexClass, displayFlexClass), orderClass, alignSelfClass, globalProps(props), className)}
+        className={classnames(buildCss('pb_flex_item_kit', growClass, shrinkClass, flexClass, displayFlexClass), overflowClass, orderClass, alignSelfClass, globalProps(props), className)}
         style={fixedStyle}
     >
       {children}

data/app/pb_kits/playbook/pb_flex/flex_item.rb

@@ -9,6 +9,10 @@ module Playbook
       prop :shrink, type: Playbook::Props::Boolean,
                     default: false
 
+      prop :overflow, type: Playbook::Props::Enum,
+                      values: %w[auto hidden inherit initial scroll visible] + [nil],
+                      default: nil
+
       prop :align_self, type: Playbook::Props::Enum,
                         values: %w[start center end stretch] + [nil],
                         default: nil
@@ -17,7 +21,7 @@ module Playbook
                           default: false
 
       def classname
-        generate_classname("pb_flex_item_kit", fixed_size_class, grow_class, shrink_class, display_flex_class) + align_self_class
+        generate_classname("pb_flex_item_kit", fixed_size_class, grow_class, shrink_class, display_flex_class) + overflow_class + align_self_class
       end
 
       def style_value
@@ -42,6 +46,10 @@ module Playbook
         grow ? "grow" : nil
       end
 
+      def overflow_class
+        overflow ? " overflow_#{overflow}" : ""
+      end
+
       def shrink_class
         shrink ? "shrink" : nil
       end

data/app/pb_kits/playbook/pb_nav/_collapsible_nav.scss

@@ -33,7 +33,7 @@
         margin: 0;
       }
       &[class*="_active"] {
-        >.pb_collapsible_main_kit {
+        .pb_collapsible_main_kit {
           background-color: $active_light;
         }
       }
@@ -46,7 +46,7 @@
           }
         }
         &[class*="_active"] {
-          >.pb_collapsible_main_kit {
+          .pb_collapsible_main_kit {
             background-color: mix($white, $card_dark, 20%);
             .pb_nav_list_item_text_collapsible,
             svg {
@@ -63,7 +63,7 @@
     .pb_collapsible_kit {
       &[class*="_active"] {
         background-color: unset;
-        >.pb_collapsible_main_kit {
+        .pb_collapsible_main_kit {
           background-color: $primary;
           border-radius: $border_rad_heavier;
           .pb_nav_list_item_text_collapsible,
@@ -94,7 +94,7 @@
     &.dark {
       .pb_collapsible_kit {
         &[class*="_active"] {
-          >.pb_collapsible_main_kit {
+          .pb_collapsible_main_kit {
             background-color: $primary;
           }
           .pb_nav_list_item_link {
@@ -112,7 +112,7 @@
     .pb_collapsible_kit {
       &[class*="_active"] {
         background-color: unset;
-        >.pb_collapsible_main_kit {
+        .pb_collapsible_main_kit {
           background-color: $active_light;
           border-radius: $border_rad_heavier;
           .pb_nav_list_item_text_collapsible,
@@ -128,7 +128,7 @@
     &.dark {
       .pb_collapsible_kit {
         &[class*="_active"] {
-          >.pb_collapsible_main_kit {
+          .pb_collapsible_main_kit {
             background-color: mix($white, $card_dark, 20%) !important;
             .pb_nav_list_item_text_collapsible,
             svg {

data/app/pb_kits/playbook/pb_passphrase/passphrase.rb

@@ -4,7 +4,7 @@ module Playbook
   module PbPassphrase
     class Passphrase < Playbook::KitBase
       prop :confirmation, type: Playbook::Props::Boolean, default: false
-      prop :input_props, type: Playbook::Props::HashProp, default: {}
+      prop :input_props, type: Playbook::Props::Hash, default: {}
       prop :label
       prop :show_tips_below, type: Playbook::Props::Enum,
                              values: %w[always xs sm md lg xl],

data/app/pb_kits/playbook/pb_radio/radio.rb

@@ -11,7 +11,7 @@ module Playbook
                      default: false
       prop :error, type: Playbook::Props::Boolean,
                    default: false
-      prop :input_options, type: Playbook::Props::HashProp,
+      prop :input_options, type: Playbook::Props::Hash,
                            default: {}
       prop :name, type: Playbook::Props::String,
                   default: "radio_name"

data/app/pb_kits/playbook/pb_select/select.rb

@@ -6,7 +6,7 @@ require "action_view"
 module Playbook
   module PbSelect
     class Select < Playbook::KitBase
-      prop :attributes, type: Playbook::Props::HashProp,
+      prop :attributes, type: Playbook::Props::Hash,
                         default: {}
       prop :blank_selection
       prop :compact, type: Playbook::Props::Boolean, default: false

data/app/pb_kits/playbook/pb_selectable_card/selectable_card.rb

@@ -15,7 +15,7 @@ module Playbook
                    default: true
       prop :input_id, type: Playbook::Props::String
 
-      prop :input_options, type: Playbook::Props::HashProp,
+      prop :input_options, type: Playbook::Props::Hash,
                            default: {}
       prop :name
       prop :text

data/app/pb_kits/playbook/pb_selectable_card_icon/selectable_card_icon.rb

@@ -23,7 +23,7 @@ module Playbook
                        default: false
       prop :value
 
-      prop :input_options, type: Playbook::Props::HashProp,
+      prop :input_options, type: Playbook::Props::Hash,
                            default: {}
 
       def classname

data/app/pb_kits/playbook/pb_selectable_icon/selectable_icon.rb

@@ -21,7 +21,7 @@ module Playbook
                       default: false
       prop :value
 
-      prop :input_options, type: Playbook::Props::HashProp,
+      prop :input_options, type: Playbook::Props::Hash,
                            default: {}
 
       # Conditional rendering for input field

data/app/pb_kits/playbook/pb_selectable_list/selectable_list_item.rb

@@ -12,7 +12,7 @@ module Playbook
       prop :variant, type: Playbook::Props::Enum,
                      values: %w[radio checkbox],
                      default: "radio"
-      prop :input_options, type: Playbook::Props::HashProp,
+      prop :input_options, type: Playbook::Props::Hash,
                            default: {}
 
       def classname

data/app/pb_kits/playbook/pb_source/source.rb

@@ -10,7 +10,7 @@ module Playbook
       prop :type, type: Playbook::Props::Enum,
                   values: %w[user retail inbound outbound prospecting events referral],
                   default: "inbound"
-      prop :user, type: Playbook::Props::HashProp, default: {}
+      prop :user, type: Playbook::Props::Hash, default: {}
 
       def type_text
         if type == "user" || (type == "referral" && user.present?)

data/app/pb_kits/playbook/pb_table/docs/_table_header.html.erb

@@ -1,32 +1,28 @@
 <%= pb_rails("table", props: { size: "lg"} ) do %>
   <thead>
     <tr>
-      <%= pb_rails("table/table_header", props: {
-        text: "Territory",
-        id: "territory",
-        sort_menu: [
-          { item: "Territory", link: "?sort=territory_desc", active: params["sort"] == "territory_desc", direction: "desc" },
-          { item: "Territory", link: "?sort=territory_asc", active: params["sort"] == "territory_asc", direction: "asc" }
-        ],
-      }) %>
       <%= pb_rails("table/table_header", props: {
         id: "name",
-        text: "Full Name",
         colspan: 2,
         sort_menu: [
-          { item: "First Name Descending", link: "?sort=firstname_desc", active: params["sort"] == "firstname_desc", direction: "desc" },
-          { item: "First Name Ascending", link: "?sort=firstname_asc", active: params["sort"] == "firstname_asc", direction: "asc" },
-          { item: "Last Name Descending", link: "?sort=lastname_desc", active: params["sort"] == "lastname_desc", direction: "desc" },
-          { item: "Last Name Ascending", link: "?sort=lastname_asc", active: params["sort"] == "lastname_asc", direction: "asc" }
+          { item: "Name", link: "?q[sorts]=name+desc", active: false, direction: "desc" },
+          { item: "Name", link: "?q[sorts]=name+asc", active: true, direction: "asc" },
         ],
       }) %>
       <%= pb_rails("table/table_header", props: {
         text: "Age",
         id: "age",
-        sort_dropdown: true,
         sort_menu: [
-          { item: "Age Descending", link: "?sort=age_desc", active: params["sort"] == "age_desc", direction: "desc" },
-          { item: "Age Ascending", link: "?sort=age_asc", active: params["sort"] == "age_asc", direction: "asc" }
+          { item: "Age", link: "?q[sorts]=age+desc", active: false, direction: "desc" },
+          { item: "Age", link: "?q[sorts]=age+asc", active: false, direction: "asc" },
+        ],
+      }) %>
+      <%= pb_rails("table/table_header", props: {
+        text: "Territory",
+        id: "territory",
+        sort_menu: [
+          { item: "Territory", link: "?q[sorts]=territory+desc", active: false, direction: "desc" },
+          { item: "Territory", link: "?q[sorts]=territory+asc", active: false, direction: "asc" },
         ],
       }) %>
       <%= pb_rails("table/table_header", props: { text: "Job Title" }) %>
@@ -34,25 +30,25 @@
   </thead>
   <tbody>
     <tr>
-      <td>Ter 1</td>
-      <td>First Name 1</td>
-      <td>Last Name 1</td>
-      <td>Age 1</td>
-      <td>Job 1</td>
+      <td>Name 1</td>
+      <td>Name 2</td>
+      <td>Value 3</td>
+      <td>Value 4</td>
+      <td>Value 5</td>
     </tr>
     <tr>
-      <td>Ter 2</td>
-      <td>First Name 2</td>
-      <td>Last Name 2</td>
-      <td>Age 2</td>
-      <td>Job 2</td>
+      <td>Name 1</td>
+      <td>Name 2</td>
+      <td>Value 3</td>
+      <td>Value 4</td>
+      <td>Value 5</td>
     </tr>
     <tr>
-      <td>Ter 3</td>
-      <td>First Name 3</td>
-      <td>Last Name 3</td>
-      <td>Age 3</td>
-      <td>Job 3</td>
+      <td>Name 1</td>
+      <td>Name 2</td>
+      <td>Value 3</td>
+      <td>Value 4</td>
+      <td>Value 5</td>
     </tr>
   </tbody>
 <% end %>

data/app/pb_kits/playbook/pb_table/docs/_table_header.md

@@ -1,8 +1 @@
-The `table_header` subcomponent creates `<th>` elements and optionally accepts:
-
-* `colspan` (number) for setting column span
-* `sort_menu` accepts sort options as an array of `item` objects.
-presence of `sort_menu` enables the sort link within the header
-* `sort_dropdown` (boolean) optionally declares that (true) clicking a header's sort link opens a dropdown of sort options, or (false) each sort link click cycles through available sort_menu items in the order they are passed
-  * passing a valid `colspan` will render sort options within a dropdown by default, without requiring `sort_dropdown` explicitly. Alternatively, the default sort dropdown can be prevented on headers with `colspan` by setting `sort_dropdown: false`, which reverts the column to sorting to multi-click default (each click of the sort link cycles through the available sort_menu items in the order they are passed)
-* `id` (string) is required for headers that have a dropdown (for popover reference); otherwise they are optional
+A kit that produces a `<th>` tag. You can also use the `sort_menu` prop to make the header a sortable link, just like <a href="https://playbook.powerapp.cloud/kits/filter#sort-only" target="_blank">our filter kit.</a>

data/app/pb_kits/playbook/pb_table/styles/_table_header.scss

@@ -1,3 +1,4 @@
+
 $text_align_values: (
   start: start,
   end: end,
@@ -21,15 +22,6 @@ $text_align_values: (
   }
 }
 
-.pb_th_link:hover {
-  background-color: rgba($primary, 0.03);
-  color: $primary !important;
-}
-
-.pb_th_link, .pb_th_nolink{
-  padding: $space_xxs;
-}
-
 [class^=pb_table] {
   thead {
     [class^=pb_th_active] {
@@ -37,14 +29,3 @@ $text_align_values: (
     }
   }
 }
-
-[class*="pb_table_header_dropdown"][class*="_vertical"] {
-  &[class*="_normal"] {
-    [class*="pb_nav_list_kit_item"][class*="pb_nav_list_item"] {
-      &[class*="_link"] {
-        border-left-width: 0px;
-        background-color: #fff !important;
-      }
-    }
-  }
-}

data/app/pb_kits/playbook/pb_table/table_header.html.erb

@@ -4,35 +4,61 @@
     class: object.classname,
     data: object.data,
     id: "pb-th#{object.id}") do %>
-  <% unless sorting_style? %>
-    <%= pb_rails("flex", props:{ align: object.align_content, justify: object.justify_sort_icon, classname: "pb_th_nolink" }) do %>
+  <% object.sort_menu.each do |item| %>
+    <% if item[:active] == true %>
+      <%= pb_rails("flex", props:{ align: object.align_content }) do %>
+        <%= content.presence || content_tag(:span, item[:item], class: "pb_th_active") %>
+        <span class="pb_th_active">
+          <%= pb_rails("icon", props: { icon: object.sort_icon(item[:direction]),
+                                        fixed_width: true,
+                                        classname: "pb_th_active",
+                                        padding_left: "xs" }) %>
+        </span>
+      <% end %>
+    <% end %>
+  <% end %>
+  <% if object.sort_menu.all? { |item| item[:active] == false } %>
+    <%= pb_rails("flex", props:{ align: object.align_content }) do %>
       <%= content.presence || object.text %>
+      <%= pb_rails("icon", props: { icon: "arrow-up-arrow-down",
+                                    fixed_width: true,
+                                    padding_left: "xs" }) %>
     <% end %>
   <% else %>
-    <%= link_to next_link, style: link_style do %>
-      <%= pb_rails("flex", props:{ align: object.align_content, justify: object.justify_sort_icon, classname: "pb_th_link" }) do %>
-        <%= content.presence || object.text %>
-          <% if sorting_style? %>
-            <%= pb_rails("icon", props: { icon: object.sort_icon(active_item[:direction], active_item[:active]),
-                                          fixed_width: true,
-                                          classname: active_item.any? ? "pb_th_active" : "",
-                                          padding_left: "xs" }) %>
-        <% end %>
-      <% end %>
-    <% end %>
-    <% if use_dropdown_select %>
-      <%= pb_rails("popover", props: { classname: "pb_filter_sort_menu",
-                                      close_on_click: "outside",
-                                      trigger_element_id: "pb-th#{object.id}",
-                                      tooltip_id: "sort-filter-btn-tooltip#{object.id}",
-                                      position: object.placement ,
-                                      padding: 'none'}) do %>
-        <%= pb_rails("nav", props: {classname: "pb_table_header_dropdown"}) do %>
-          <% object.sort_menu.each do |item| %>
-            <%= pb_rails("nav/item", props: { text: item[:item], link: item[:link], icon_right: sort_icon(item[:direction], item[:active]), active: item[:active] }) %>
+    <%= content.presence || object.text %>
+  <% end %>
+  <% if object.sort_menu != [{}] && object.colspan > 1 %>
+    <%= pb_rails("popover", props: { classname: "pb_filter_sort_menu",
+                                    close_on_click: "outside",
+                                    trigger_element_id: "pb-th#{object.id}",
+                                    tooltip_id: "sort-filter-btn-tooltip#{object.id}",
+                                    position: object.placement ,
+                                    padding: 'none'}) do %>
+      <%= pb_rails("list") do %>
+        <% object.sort_menu.each do |item| %>
+          <%= pb_rails("list/item") do %>
+            <%= pb_rails("button", props: { variant: "link" ,
+                                            classname: "p-0",
+                                            text: item[:item],
+                                            link: item[:link],
+                                            icon: sort_icon(item[:direction]),
+                                            icon_right: true }) %>
           <% end %>
         <% end %>
       <% end %>
     <% end %>
   <% end %>
 <% end %>
+<% if object.sort_menu != [{}] && object.colspan == 1 %>
+  <script>
+    document.addEventListener("DOMContentLoaded", function() {
+      var thId = `<%= "#pb-th#{object.id}" %>`
+      var firstLink = `<%= next_link %>`
+      var thElement = document.querySelector(thId);
+
+      thElement.addEventListener("click", function() {
+        window.location.href = firstLink;
+      });
+    });
+  </script>
+<% end %>