playbook_ui 16.2.0.pre.alpha.advancedtablecascadingcollapsereact14676 → 16.2.0.pre.alpha.faiconbuttonfix14520

data/app/pb_kits/playbook/pb_enhanced_element/element_observer.ts

@@ -23,7 +23,7 @@ export default class ElementObserver {
   }
 
   stop(): void {
-    this.mutationObserver.disconnect()
+    this.mutationObserverdisconnect()
   }
 
   catchup(): void {

data/app/pb_kits/playbook/pb_enhanced_element/index.ts

@@ -50,7 +50,6 @@ export default class PbEnhancedElement {
     const enhansedElement = this.elements.get(element)
     enhansedElement.disconnect()
     this.elements.delete(element)
-    delete element._pbEnhanced
   }
 
   static start(): void {
@@ -58,7 +57,7 @@ export default class PbEnhancedElement {
   }
 
   static stop(): void {
-    this.observer.stop()
+    this.mutationObserver.stop()
   }
 
   connect(): void {

data/app/pb_kits/playbook/pb_icon/icon.rb

@@ -2,14 +2,10 @@
 
 require "open-uri"
 require "json"
-require "digest"
 
 module Playbook
   module PbIcon
     class Icon < Playbook::KitBase
-      ICON_PATH_DEV_CACHE_TTL_SECONDS = 2
-      ICON_PATH_PROD_CACHE_TTL_SECONDS = 60
-
       prop :border, type: Playbook::Props::Boolean,
                     default: false
       prop :fixed_width, type: Playbook::Props::Boolean,
@@ -86,35 +82,30 @@ module Playbook
         )
       end
 
-      # Instance-level memoization of alias map lookup result
       def icon_alias_map
-        return @icon_alias_map if defined?(@icon_alias_map)
+        return unless Rails.application.config.respond_to?(:icon_alias_path)
 
-        @icon_alias_map = self.class.icon_alias_map
+        base_path = Rails.application.config.icon_alias_path
+        json = File.read(Rails.root.join(base_path))
+        JSON.parse(json)["aliases"].freeze
       end
 
-      # Instance-level memoization of resolved asset path
       def asset_path
-        return @asset_path if defined?(@asset_path)
-
-        @asset_path =
-          if Rails.application.config.respond_to?(:icon_path)
-            resolved_icon = resolve_alias(icon)
-            path = self.class.icon_path_index[resolved_icon]
-            path if path && File.exist?(path)
-          end
-      end
-
-      def is_svg?
-        return @is_svg if defined?(@is_svg)
+        return unless Rails.application.config.respond_to?(:icon_path)
 
-        @is_svg = (icon || custom_icon.to_s).include?(".svg") || asset_path.present?
+        base_path = Rails.application.config.icon_path
+        resolved_icon = resolve_alias(icon)
+        icon_path = Dir.glob(Rails.root.join(base_path, "**", "#{resolved_icon}.svg")).first
+        icon_path if icon_path && File.exist?(icon_path)
       end
 
       def render_svg
         doc = Nokogiri::XML(URI.open(asset_path || icon || custom_icon)) # rubocop:disable Security/Open
-        svg = doc.at_css("svg")
-        return "" unless svg
+        svg = doc.at_css "svg"
+
+        unless svg
+          return "" # Return an empty string if SVG element is not found
+        end
 
         svg["class"] = %w[pb_custom_icon svg-inline--fa].concat([object.custom_icon_classname]).join(" ")
         svg["id"] = object.id
@@ -122,9 +113,7 @@ module Playbook
         svg["width"] = "auto"
         svg["tabindex"] = object.tabindex
         fill_color = object.color || "currentColor"
-
-        # Safely apply fill to all paths (avoids nil errors + handles multi-path icons)
-        doc.css("path").each { |p| p["fill"] = fill_color }
+        doc.at_css("path")["fill"] = fill_color
 
         if object.data.present?
           object.data.each do |key, value|
@@ -146,152 +135,14 @@ module Playbook
         ""
       end
 
-      # Class-level caches
-      class << self
-        @cache_mutex = Mutex.new
-
-        # Cache aliases.json across the process, but invalidate when the file changes (dev-safe)
-        def icon_alias_map
-          return @icon_alias_map if alias_cache_fresh?
-
-          cache_mutex.synchronize do
-            return @icon_alias_map if alias_cache_fresh?
-
-            @icon_alias_map =
-              if Rails.application.config.respond_to?(:icon_alias_path)
-                base_path = Rails.application.config.icon_alias_path
-                full_path = Rails.root.join(base_path)
-                @icon_alias_map_mtime = safe_mtime(full_path)
-
-                json = File.read(full_path)
-                parsed = JSON.parse(json)
-                parsed.fetch("aliases", {}).freeze
-              end
-          end
-
-          @icon_alias_map
-        end
-
-        # Cache an index of icon_name to file path for all SVGs in the configured directory, with invalidation based on directory mtime
-        # Avoids recursive Dir.glob for every icon render
-        def icon_path_index
-          return @icon_path_index if index_cache_fresh?
-
-          cache_mutex.synchronize do
-            return @icon_path_index if index_cache_fresh?
-
-            @icon_path_index =
-              if Rails.application.config.respond_to?(:icon_path)
-                base_path = Rails.application.config.icon_path
-                root = Rails.root.join(base_path)
-
-                # If path doesn't exist, keep behavior aligned (no path resolution)
-                if Dir.exist?(root)
-                  @icon_path_index_cache_key = icon_path_cache_key(root)
-
-                  # One scan builds the map for O(1) lookups
-                  # Key is the filename (without .svg) to match existing usage
-                  index = {}
-                  Dir.glob(File.join(root.to_s, "**", "*.svg")).sort.each do |p|
-                    name = File.basename(p, ".svg")
-                    index[name] ||= p
-                  end
-                  index.freeze
-                else
-                  @icon_path_index_cache_key = nil
-                  {}
-                end
-              else
-                {}
-              end
-
-            @icon_path_index_checked_at = monotonic_now
-          end
-
-          @icon_path_index
-        end
-
-      private
-
-        def cache_mutex
-          @cache_mutex ||= Mutex.new
-        end
-
-        def alias_cache_fresh?
-          return false unless defined?(@icon_alias_map)
-
-          return true unless Rails.application.config.respond_to?(:icon_alias_path)
-
-          full_path = Rails.root.join(Rails.application.config.icon_alias_path)
-          safe_mtime(full_path) == @icon_alias_map_mtime
-        rescue
-          false
-        end
-
-        def index_cache_fresh?
-          return false unless defined?(@icon_path_index)
-
-          return true unless Rails.application.config.respond_to?(:icon_path)
-
-          # In development and production, skip re-checks for a short TTL window
-          # to avoid repeated tree scans on hot paths.
-          return true if Rails.env.development? && within_icon_index_ttl?(ICON_PATH_DEV_CACHE_TTL_SECONDS)
-          return true if Rails.env.production? && within_icon_index_ttl?(ICON_PATH_PROD_CACHE_TTL_SECONDS)
-
-          root = Rails.root.join(Rails.application.config.icon_path)
-          fresh = icon_path_cache_key(root) == @icon_path_index_cache_key
-          @icon_path_index_checked_at = monotonic_now
-          fresh
-        rescue
-          false
-        end
-
-        def within_icon_index_ttl?(ttl_seconds)
-          return false unless defined?(@icon_path_index_checked_at)
-
-          (monotonic_now - @icon_path_index_checked_at) < ttl_seconds
-        rescue
-          false
-        end
-
-        def monotonic_now
-          Process.clock_gettime(Process::CLOCK_MONOTONIC)
-        end
-
-        def icon_path_cache_key(root)
-          return safe_mtime(root) unless Rails.env.development? || Rails.env.production?
-
-          digest = Digest::SHA1.new
-          root_prefix = "#{root}/"
-
-          Dir.glob(File.join(root.to_s, "**", "*.svg")).sort.each do |path|
-            digest << path.delete_prefix(root_prefix)
-            next unless Rails.env.development?
-
-            # Development tracks file metadata for rapid local edits.
-            # Production only needs path-set change detection during periodic checks.
-            stat = File.stat(path)
-            digest << stat.mtime.to_f.to_s
-            digest << stat.size.to_s
-          end
-
-          digest.hexdigest
-        rescue
-          nil
-        end
-
-        def safe_mtime(path)
-          File.exist?(path) ? File.mtime(path) : nil
-        rescue
-          nil
-        end
+      def is_svg?
+        (icon || custom_icon.to_s).include?(".svg") || asset_path.present?
       end
 
     private
 
       def resolve_alias(icon)
         return icon unless icon_alias_map
-        return icon if icon.nil?
 
         aliases = icon_alias_map[icon]
         return icon unless aliases
@@ -304,8 +155,8 @@ module Playbook
       end
 
       def file_exists?(alias_name)
-        # Use the cached index (no recursive glob)
-        self.class.icon_path_index.key?(alias_name)
+        base_path = Rails.application.config.icon_path
+        File.exist?(Dir.glob(Rails.root.join(base_path, "**", "#{alias_name}.svg")).first)
       end
 
       def svg_size

data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx

@@ -532,7 +532,6 @@ const MultiLevelSelect = forwardRef<HTMLInputElement, MultiLevelSelectProps>(
           {requiredIndicator ? (
             <Caption
                 className="pb_multi_level_select_kit_label"
-                color="lighter"
                 marginBottom="xs"
             >
               {label} <span className="required_indicator">*</span>
@@ -540,7 +539,6 @@ const MultiLevelSelect = forwardRef<HTMLInputElement, MultiLevelSelectProps>(
           ) : (
             <Caption
                 className="pb_multi_level_select_kit_label"
-                color="lighter"
                 marginBottom="xs"
                 text={label}
             />

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

@@ -39,4 +39,3 @@ examples:
     - multi_level_select_disabled_options_parent: Disabled Parent Option (Return All Selected)
     - multi_level_select_single_disabled: Disabled Options (Single Select)
     - multi_level_select_required_indicator: Required Indicator
-    - multi_level_select_react_reset_key: Reset with Key (React)

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

@@ -17,4 +17,3 @@ export { default as MultiLevelSelectDisabledOptionsDefault } from "./_multi_leve
 export { default as MultiLevelSelectLabel } from "./_multi_level_select_label.jsx"
 export { default as MultiLevelSelectSingleDisabled } from "./_multi_level_select_single_disabled.jsx"
 export { default as MultiLevelSelectRequiredIndicator } from "./_multi_level_select_required_indicator.jsx"
-export { default as MultiLevelSelectReactResetKey } from "./_multi_level_select_react_reset_key.jsx"

data/app/pb_kits/playbook/pb_pagination/_pagination.scss

@@ -73,9 +73,8 @@ $top_bottom_radius: 0px;
   }
   .disabled {
     pointer-events: none;
-    cursor: not-allowed;
     opacity: 0.5;        
-    color: #B0BDC7; // replace with $text_disabled once added to tokens
+    color: grey; 
 
     & > span {
       padding: $pagination_padding;
@@ -105,103 +104,4 @@ $top_bottom_radius: 0px;
     border-right: none;
     margin-left: $space_xxs;
   }
-}
-
-.pb_pagination_mobile {
- padding: $space_xxs 0px !important;
- position: relative;
- 
- .pagination-right {
-  border-left: none !important;
-  padding: 6px 13px !important;
-  flex-shrink: 0;
-
-  @media (max-width: 435px) {
-    padding: 6px 10px !important;
-  }
- }
- .pagination-left {
-  border-right: none !important;
-  padding: 6px 13px !important;
-  flex-shrink: 0;
-
-  @media (max-width: 435px) {
-    padding: 6px 10px !important;
-  }
- }
-  .pagination-dropdown {
-    position: static;
-    flex: 1;
-    margin: 0 $space_xxs;
-    min-width: 0;
-    overflow: hidden;
-  }
-
-  .pagination-dropdown-trigger {
-    padding: 6px 10px 6px 13px !important;
-    background-color: $bg_light;
-    border-radius: $border_rad_light;
-    cursor: pointer;
-    transition: all 0.2s ease;
-    white-space: nowrap;
-    overflow: hidden;
-
-    &:hover {
-      background-color: $active_light;
-    }
-
-    @media (max-width: 435px) {
-      padding: 6px 8px 6px 10px !important;
-    }
-  }
-
-  .pagination-dropdown-menu {
-    position: absolute;
-    left: 0;
-    right: 0;
-    background-color: $white;
-    border: $border_rad_lightest solid $border_light;
-    border-radius: $border_rad_light;
-    box-shadow: $shadow_deep;
-    max-height: 200px;
-    overflow-y: auto;
-    z-index: 1000;
-
-    &.below {
-      top: 100%;
-      margin-top: $space_xs;
-    }
-
-    &.above {
-      bottom: 100%;
-      margin-bottom: $space_xs;
-    }
-  }
-
-  .pagination-dropdown-option {
-    padding: $pagination_padding;
-    cursor: pointer;
-    transition: background-color 0.2s ease;
-
-    &:hover {
-      background-color: $active_light;
-    }
-
-    &.active {
-      background-color: $primary;
-      .pb_body_kit {
-        color: $white;
-      }
-    }
-
-    &:first-child {
-      border-top-left-radius: $border_rad_light;
-      border-top-right-radius: $border_rad_light;
-    }
-
-    &:last-child {
-      border-bottom-left-radius: $border_rad_light;
-      border-bottom-right-radius: $border_rad_light;
-    }
-  }
 }

data/app/pb_kits/playbook/pb_pagination/_pagination.test.jsx

@@ -209,175 +209,4 @@ describe('Pagination Component', () => {
     
     expect(screen.getByText('19')).toBeInTheDocument()
   })
-}) 
-
-describe('Pagination Mobile View', () => {
-  let originalInnerWidth
-
-  beforeEach(() => {
-    // Store original value
-    originalInnerWidth = window.innerWidth
-    
-    // Mock window.innerWidth for mobile
-    Object.defineProperty(window, 'innerWidth', {
-      writable: true,
-      configurable: true,
-      value: 767
-    })
-  })
-
-  afterEach(() => {
-    // Restore original value
-    Object.defineProperty(window, 'innerWidth', {
-      writable: true,
-      configurable: true,
-      value: originalInnerWidth
-    })
-  })
-
-  test('renders mobile layout on small screens', () => {
-    render(<Pagination {...defaultProps} />)
-    
-    const mobilePagination = document.querySelector('.pb_pagination_mobile')
-    expect(mobilePagination).toBeInTheDocument()
-  })
-
-  test('renders Prev and Next buttons in mobile view', () => {
-    render(<Pagination {...defaultProps} />)
-    
-    expect(screen.getByText('Prev')).toBeInTheDocument()
-    expect(screen.getByText('Next')).toBeInTheDocument()
-  })
-
-  test('displays current page and total in dropdown trigger', () => {
-    render(<Pagination {...defaultProps} 
-        current={3}
-        total={10}
-           />)
-    
-    expect(screen.getByText('3', { exact: false })).toBeInTheDocument()
-    expect(screen.getByText(/of 10/)).toBeInTheDocument()
-  })
-
-  test('opens dropdown when trigger is clicked', () => {
-    render(<Pagination {...defaultProps} />)
-    
-    const dropdownTrigger = document.querySelector('.pagination-dropdown-trigger')
-    expect(dropdownTrigger).toBeInTheDocument()
-    
-    let dropdownMenu = document.querySelector('.pagination-dropdown-menu')
-    expect(dropdownMenu).not.toBeInTheDocument()
-    
-    fireEvent.click(dropdownTrigger)
-    
-    dropdownMenu = document.querySelector('.pagination-dropdown-menu')
-    expect(dropdownMenu).toBeInTheDocument()
-  })
-
-  test('displays all page options in dropdown', () => {
-    render(<Pagination {...defaultProps} 
-        total={5}
-           />)
-    
-    const dropdownTrigger = document.querySelector('.pagination-dropdown-trigger')
-    fireEvent.click(dropdownTrigger)
-    
-    expect(screen.getByText('Page 1')).toBeInTheDocument()
-    expect(screen.getByText('Page 2')).toBeInTheDocument()
-    expect(screen.getByText('Page 3')).toBeInTheDocument()
-    expect(screen.getByText('Page 4')).toBeInTheDocument()
-    expect(screen.getByText('Page 5')).toBeInTheDocument()
-  })
-
-  test('highlights current page in dropdown', () => {
-    render(<Pagination {...defaultProps} 
-        current={3}
-        total={5}
-           />)
-    
-    const dropdownTrigger = document.querySelector('.pagination-dropdown-trigger')
-    fireEvent.click(dropdownTrigger)
-    
-    const activePage = screen.getByText('Page 3').parentElement
-    expect(activePage).toHaveClass('active')
-  })
-
-  test('changes page when dropdown option is clicked', () => {
-    const mockOnChange = jest.fn()
-    render(<Pagination {...defaultProps} 
-        onChange={mockOnChange}
-        total={5}
-           />)
-    
-    const dropdownTrigger = document.querySelector('.pagination-dropdown-trigger')
-    fireEvent.click(dropdownTrigger)
-    
-    const page3Option = screen.getByText('Page 3')
-    fireEvent.click(page3Option)
-    
-    expect(mockOnChange).toHaveBeenCalledWith(3)
-  })
-
-  test('closes dropdown after selecting a page', () => {
-    render(<Pagination {...defaultProps} 
-        total={5}
-           />)
-    
-    const dropdownTrigger = document.querySelector('.pagination-dropdown-trigger')
-    fireEvent.click(dropdownTrigger)
-    
-    let dropdownMenu = document.querySelector('.pagination-dropdown-menu')
-    expect(dropdownMenu).toBeInTheDocument()
-    
-    const page3Option = screen.getByText('Page 3')
-    fireEvent.click(page3Option)
-    
-    dropdownMenu = document.querySelector('.pagination-dropdown-menu')
-    expect(dropdownMenu).not.toBeInTheDocument()
-  })
-
-  test('Prev button navigates to previous page', () => {
-    const mockOnChange = jest.fn()
-    render(<Pagination {...defaultProps} 
-        current={3}
-        onChange={mockOnChange}
-           />)
-    
-    const prevButton = document.querySelector('.pagination-left')
-    fireEvent.click(prevButton)
-    
-    expect(mockOnChange).toHaveBeenCalledWith(2)
-  })
-
-  test('Next button navigates to next page', () => {
-    const mockOnChange = jest.fn()
-    render(<Pagination {...defaultProps} 
-        current={3}
-        onChange={mockOnChange}
-           />)
-    
-    const nextButton = document.querySelector('.pagination-right')
-    fireEvent.click(nextButton)
-    
-    expect(mockOnChange).toHaveBeenCalledWith(4)
-  })
-
-  test('disables Prev button on first page', () => {
-    render(<Pagination {...defaultProps} 
-        current={1}
-           />)
-    
-    const prevButton = document.querySelector('.pagination-left')
-    expect(prevButton).toHaveClass('disabled')
-  })
-
-  test('disables Next button on last page', () => {
-    render(<Pagination {...defaultProps} 
-        current={10}
-           />)
-    
-    const nextButton = document.querySelector('.pagination-right')
-    expect(nextButton).toHaveClass('disabled')
-  })
-
-})
+})