playbook_ui 14.22.0.pre.rc.0 → 14.22.0.pre.rc.2

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

@@ -7,7 +7,7 @@
       <% header_row.each_with_index do |cell, cell_index| %>
         <% header_id = cell[:accessor].present? ? cell[:accessor] : "header_#{row_index}_#{cell_index}" %>
         <%= pb_rails("table/table_header", props: { id: header_id, colspan: cell[:colspan], classname: [object.th_classname(is_first_column: cell_index.zero?), ('last-header-cell' if cell[:is_last_in_group] && cell_index != 0)].compact.join(' '), sort_menu: cell[:accessor] ? cell[:sort_menu] : nil }) do %>
-          <%= pb_rails("flex", props: { align: "center", justify: cell_index.zero? ? "start" : row_index === header_rows.size - 1 ? "end" : "center", text_align: "end" }) do %>
+          <%= pb_rails("flex", props: { align: "center", justify: cell_index.zero? ? "start" : row_index === header_rows.size - 1 ? "end" : "center", text_align: (cell[:header_alignment] || "end") }) do %>
             <% if cell_index.zero? && row_index === header_rows.size - 1 %>
               <% if object.selectable_rows && object.enable_toggle_expansion != "none" %>
                 <%= pb_rails("flex/flex_item", props: { padding_right: "xs" }) do %>

data/app/pb_kits/playbook/pb_advanced_table/table_header.rb

@@ -98,6 +98,9 @@ module Playbook
 
             process_columns(col[:columns], rows, current_depth + 1, max_depth)
           else
+            raw_styling       = col[:column_styling] || {}
+            header_alignment  = raw_styling[:header_alignment]
+
             colspan = 1
             rows[current_depth] << {
               label: col[:label],
@@ -105,6 +108,7 @@ module Playbook
               accessor: col[:accessor],
               sort_menu: col[:sort_menu],
               is_last_in_group: is_last && current_depth.positive?,
+              header_alignment: header_alignment,
             }
           end
         end
@@ -137,6 +141,7 @@ module Playbook
           accessor: col[:accessor],
           label: col[:label] || "",
           sort_menu: col[:sort_menu] || nil,
+          column_styling: col[:column_styling] || {},
         }
         (max_depth - 1).times do
           wrapped = { label: "", columns: [wrapped] }

data/app/pb_kits/playbook/pb_advanced_table/table_row.html.erb

@@ -6,7 +6,7 @@
     <% object.column_definitions.each_with_index do |column, index| %>
         <% next unless column[:accessor].present? %>
         <%= pb_rails("table/table_cell", props: { classname:object.td_classname(column, index)}) do %>
-            <%= pb_rails("flex", props:{ align: "center", justify: index.zero? ? "start" : "end", classname: object.loading ? "loading-cell" : "" }) do %>
+            <%= pb_rails("flex", props:{ align: "center", justify: object.justify_for(column, index), classname: object.loading ? "loading-cell" : "" }) do %>
                 <% if collapsible_trail && index.zero? %>
                     <% (1..depth).each do |i| %>
                         <% additional_offset = i > 1 ? (i - 1) * 0.25 : 0 %>
@@ -34,7 +34,7 @@
                                 </button>
                             <% end %>
                         <% end %>
-                        <%= pb_rails("flex/flex_item", props:{padding_left: index.zero? && (object.row[:children].present? || has_integrated_checkbox) ? "none" : "xs"}) do %>       
+                        <%= pb_rails("flex/flex_item") do %>       
                             <% if column[:custom_renderer].present? %>
                                 <%= raw(column[:custom_renderer].call(object.row, custom_renderer_value(column, index))) %>
                             <% elsif index.zero? %>

data/app/pb_kits/playbook/pb_advanced_table/table_row.rb

@@ -80,6 +80,20 @@ module Playbook
         end
       end
 
+      def justify_for(column, index)
+        if index.zero?
+          "start"
+        else
+          case cell_alignment_for(column)
+          when "left"   then "start"
+          when "center" then "center"
+          when "right"  then "end"
+          else
+            "end"
+          end
+        end
+      end
+
     private
 
       def custom_renderer_value(column, index)
@@ -103,6 +117,25 @@ module Playbook
       def subrow_depth_classname
         depth.positive? ? "depth-sub-row-#{depth}" : ""
       end
+
+      def find_column_def_by_accessor(defs, target_accessor)
+        defs.each do |col|
+          return col if col[:accessor] == target_accessor
+
+          if col[:columns].is_a?(Array)
+            found = find_column_def_by_accessor(col[:columns], target_accessor)
+            return found if found
+          end
+        end
+        nil
+      end
+
+      def cell_alignment_for(column)
+        return nil unless column[:accessor]
+
+        orig_def = find_column_def_by_accessor(column_definitions, column[:accessor])
+        orig_def[:column_styling][:cell_alignment] if orig_def && orig_def[:column_styling].is_a?(Hash)
+      end
     end
   end
 end

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

@@ -25,7 +25,6 @@ type DropdownProps = {
     blankSelection?: string;
     children?: React.ReactChild[] | React.ReactChild | React.ReactElement[];
     className?: string;
-    closeOnSelection?: boolean;
     formPillProps?: GenericObject;
     dark?: boolean;
     data?: { [key: string]: string };
@@ -56,7 +55,6 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
         blankSelection = '',
         children,
         className,
-        closeOnSelection = true,
         dark = false,
         data = {},
         defaultValue = {},
@@ -154,7 +152,7 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
         if (!multiSelect) return optionsWithBlankSelection;
         return optionsWithBlankSelection.filter((option: GenericObject) => !selectedArray.some((sel) => sel.label === option.label));
     }, [optionsWithBlankSelection, selectedArray, multiSelect]);
-
+    
     const filteredOptions = useMemo(() => {
           return availableOptions.filter((opt: GenericObject) =>
             String(opt.label).toLowerCase().includes(filterItem.toLowerCase())
@@ -194,18 +192,12 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
                        return next;
                    });
                    setFilterItem("");
-                   // Only close dropdown if closeOnSelection is true
-                   if (closeOnSelection) {
-                       setIsDropDownClosed(true);
-                   }
+                   setIsDropDownClosed(true);
                } else {
                    setSelected(clickedItem);
                    setFilterItem("");
+                   setIsDropDownClosed(true);
                    onSelect && onSelect(clickedItem);
-                   // Only close dropdown if closeOnSelection is true
-                   if (closeOnSelection) {
-                       setIsDropDownClosed(true);
-                   }
             }
              };
 
@@ -260,7 +252,6 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
             <DropdownContext.Provider
                 value={{
                     autocomplete,
-                    closeOnSelection,
                     dropdownContainerRef,
                     filteredOptions,
                     filterItem,

data/app/pb_kits/playbook/pb_dropdown/docs/example.yml

@@ -44,6 +44,4 @@ examples:
   - dropdown_clear_selection: Clear Selection
   - dropdown_separators_hidden: Separators Hidden
   - dropdown_with_external_control: useDropdown Hook
-  - dropdown_close_on_select: Close On Selection
-
 

data/app/pb_kits/playbook/pb_dropdown/docs/index.js

@@ -19,5 +19,4 @@ export { default as DropdownMultiSelect } from './_dropdown_multi_select.jsx'
 export { default as DropdownMultiSelectDisplay } from './_dropdown_multi_select_display.jsx'
 export { default as DropdownMultiSelectWithAutocomplete } from './_dropdown_multi_select_with_autocomplete.jsx'
 export { default as DropdownMultiSelectWithDefault } from './_dropdown_multi_select_with_default.jsx'
-export { default as DropdownMultiSelectWithCustomOptions } from './_dropdown_multi_select_with_custom_options.jsx'
-export { default as DropdownCloseOnSelect } from './_dropdown_close_on_select.jsx'
+export { default as DropdownMultiSelectWithCustomOptions } from './_dropdown_multi_select_with_custom_options.jsx'

data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownOption.tsx

@@ -25,7 +25,7 @@ type DropdownOptionProps = {
   key?: string | number;
   option?: GenericObject;
   padding?: string;
-} & GlobalProps;
+}  & GlobalProps;
 
 const DropdownOption = (props: DropdownOptionProps) => {
   const {
@@ -56,17 +56,16 @@ const DropdownOption = (props: DropdownOptionProps) => {
 
   // When multiSelect, then if an option is selected, remove from dropdown
   const isSelected = Array.isArray(selected)
-    ? selected.some((item) => item.label === option?.label)
-    : (selected as GenericObject)?.label === option?.label;
+   ? selected.some((item) => item.label === option?.label)
+   : (selected as GenericObject)?.label === option?.label;
 
+  
   if (!isItemMatchingFilter(option) || (multiSelect && isSelected)) {
     return null;
   }
-
   const isFocused =
     focusedOptionIndex >= 0 &&
     filteredOptions[focusedOptionIndex].label === option?.label;
-
   const focusedClass = isFocused && "focused";
 
   const selectedClass = isSelected ? "selected" : "list";
@@ -92,10 +91,7 @@ const DropdownOption = (props: DropdownOptionProps) => {
         className={classes}
         id={id}
         key={key}
-        onClick={(e) => {
-            e.stopPropagation();
-            handleOptionClick(option);
-        }}
+        onClick= {() => handleOptionClick(option)}
     >
       <ListItem
           cursor="pointer"
@@ -104,12 +100,12 @@ const DropdownOption = (props: DropdownOptionProps) => {
           key={option?.label}
           padding="none"
       >
-        {children ?
+          {children ? 
           <div className="dropdown_option_wrapper">{children}</div> :
-          <Body dark={dark}
-              text={option?.label}
-          />
-        }
+              <Body dark={dark} 
+                  text={option?.label} 
+              />
+          }
       </ListItem>
     </div>
   );

data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownTrigger.tsx

@@ -44,7 +44,6 @@ const DropdownTrigger = (props: DropdownTriggerProps) => {
 
   const {
     autocomplete,
-    closeOnSelection,
     filterItem,
     handleBackspace,
     handleChange,
@@ -55,7 +54,6 @@ const DropdownTrigger = (props: DropdownTriggerProps) => {
     isInputFocused,
     multiSelect,
     selected,
-    setIsDropDownClosed,
     setIsInputFocused,
     toggleDropdown,
   } = useContext(DropdownContext);
@@ -105,26 +103,11 @@ const DropdownTrigger = (props: DropdownTriggerProps) => {
     ? placeholder
     : "Select...";
 
-  // Click handler that respects closeOnSelection
-  const handleInputClick = (e: React.MouseEvent) => {
-    e.stopPropagation(); // keep the wrapper's handler from firing
-    if (isDropDownClosed) {
-      // Always open if closed
-      setIsDropDownClosed(false);
-    } else if (!closeOnSelection) {
-      // Keep open if closeOnSelection is false
-      return;
-    } else {
-      // Default behavior - toggle
-      toggleDropdown();
-    }
-  };
-
   return (
-    <div {...ariaProps}
-        {...dataProps}
+    <div {...ariaProps} 
+        {...dataProps} 
         {...htmlProps}
-        className={classes}
+        className={classes} 
         id={id}
     >
       {
@@ -162,7 +145,7 @@ const DropdownTrigger = (props: DropdownTriggerProps) => {
                     {customDisplay ? (
                       <Flex align="center">
                         {customDisplay}
-                        <Body dark={dark}
+                        <Body dark={dark} 
                             paddingLeft={`${joinedLabels ? "xs" : "none"}`}
                         >
                           {customDisplayPlaceholder}
@@ -181,7 +164,10 @@ const DropdownTrigger = (props: DropdownTriggerProps) => {
                           <input
                               className="dropdown_input"
                               onChange={handleChange}
-                              onClick={handleInputClick}
+                              onClick={(e) => {
+                                e.stopPropagation();// keep the wrapper’s handler from firing
+                                toggleDropdown();
+                              }}
                               onFocus={() => setIsInputFocused(true)}
                               onKeyDown={(e) => {
                                  handleKeyDown(e);
@@ -200,8 +186,8 @@ const DropdownTrigger = (props: DropdownTriggerProps) => {
                         )}
                         </>
                       ) : (
-                        <Body dark={dark}
-                            text={defaultDisplayPlaceholder}
+                        <Body dark={dark} 
+                            text={defaultDisplayPlaceholder} 
                         />
                       )
                     )}
@@ -209,7 +195,10 @@ const DropdownTrigger = (props: DropdownTriggerProps) => {
                       <input
                           className="dropdown_input"
                           onChange={handleChange}
-                          onClick={handleInputClick}
+                          onClick={(e) => {
+                            e.stopPropagation();// keep the wrapper’s handler from firing
+                            toggleDropdown();
+                          }}
                           onFocus={() => setIsInputFocused(true)}
                           onKeyDown={handleKeyDown}
                           placeholder={
@@ -234,7 +223,7 @@ const DropdownTrigger = (props: DropdownTriggerProps) => {
                         onClick: (e: Event) => {e.stopPropagation();handleWrapperClick()}
                       }}
                       key={`${isDropDownClosed ? "chevron-down" : "chevron-up"}`}
-                  >
+                  > 
                   {
                     selectedArray.length > 0 && (
                       <div onClick={(e)=>{e.stopPropagation();handleBackspace()}}>