playbook_ui 16.3.0.pre.rc.3 → 16.3.0.pre.rc.4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 4e153aae819ff62c66551a68563cda7597f5788d3971396767d1f8239b90d153
-  data.tar.gz: 96276b46239d4b7eee81b0f0209e9b48ad8736277e1c8c39150e7346af24da30
+  metadata.gz: 2ed5ebc4bcaa2e9cec8f996f7709586bb131dd974b115837eecc0920b4a7cd0d
+  data.tar.gz: 558eacf65043d2b076fd8fc8c2783ec4e70573228f46bc7c68b4ff1f60dba608
 SHA512:
-  metadata.gz: f9930c8405e22e1bed3b2b6e2e830b380c5656b522998ece950c7f40a6938ede92771b530bc9d6b19d6343ff21eeb5f9af11c7ea46adaa4e110a80cf2fccf11b
-  data.tar.gz: d92e2c424880aec27fcc9f93aecc09a8d419a8bd521fdbb03e6b870e5d3b60f9c58ff7c7a4845fc84b41710991d0d4f9e2397d54c6a99a292803e6c2b001f8f9
+  metadata.gz: e0436ed47dbf37f88c8f4b98fa939b9c8835ac00124ee73eb8c05d539756eedbe7f95e8fbee85687c2f798221c5b86715afa83722d153ca82614760df715a6fd
+  data.tar.gz: aa23810833c0a3bbc70275084d7cb41a342812d31a97af269907f28ac0563afb825dc4c578c498e46e0af1112b3426ddb6a46bf1b74783c213dc70ff6dd89286

data/app/pb_kits/playbook/pb_button/_button.scss

@@ -115,9 +115,10 @@ $pb_button_sizes: (
 
   // Icon-only button (icon prop set, no text) - square with equal padding
   // Rails: uses .pb_button_icon_only class
-  // React: detects when pb_button_content has an empty text span
+  // React: when pb_button_content is empty (no text). Do not match when content has
+  // text + icon (e.g. "Exit Fullscreen" + FA icon) which can include empty spans.
   &.pb_button_icon_only,
-  &:has(.pb_button_content > span:empty) {
+  &:has(.pb_button_content:empty) {
     aspect-ratio: 1;
     min-width: auto;
     width: auto;

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

@@ -2,10 +2,14 @@
 
 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,
@@ -82,30 +86,35 @@ module Playbook
         )
       end
 
+      # Instance-level memoization of alias map lookup result
       def icon_alias_map
-        return unless Rails.application.config.respond_to?(:icon_alias_path)
+        return @icon_alias_map if defined?(@icon_alias_map)
 
-        base_path = Rails.application.config.icon_alias_path
-        json = File.read(Rails.root.join(base_path))
-        JSON.parse(json)["aliases"].freeze
+        @icon_alias_map = self.class.icon_alias_map
       end
 
+      # Instance-level memoization of resolved asset path
       def asset_path
-        return unless Rails.application.config.respond_to?(:icon_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)
 
-        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)
+        @is_svg = (icon || custom_icon.to_s).include?(".svg") || asset_path.present?
       end
 
       def render_svg
         doc = Nokogiri::XML(URI.open(asset_path || icon || custom_icon)) # rubocop:disable Security/Open
-        svg = doc.at_css "svg"
-
-        unless svg
-          return "" # Return an empty string if SVG element is not found
-        end
+        svg = doc.at_css("svg")
+        return "" unless svg
 
         svg["class"] = %w[pb_custom_icon svg-inline--fa].concat([object.custom_icon_classname]).join(" ")
         svg["id"] = object.id
@@ -113,7 +122,9 @@ module Playbook
         svg["width"] = "auto"
         svg["tabindex"] = object.tabindex
         fill_color = object.color || "currentColor"
-        doc.at_css("path")["fill"] = fill_color
+
+        # Safely apply fill to all paths (avoids nil errors + handles multi-path icons)
+        doc.css("path").each { |p| p["fill"] = fill_color }
 
         if object.data.present?
           object.data.each do |key, value|
@@ -135,14 +146,152 @@ module Playbook
         ""
       end
 
-      def is_svg?
-        (icon || custom_icon.to_s).include?(".svg") || asset_path.present?
+      # 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
       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
@@ -155,8 +304,8 @@ module Playbook
       end
 
       def file_exists?(alias_name)
-        base_path = Rails.application.config.icon_path
-        File.exist?(Dir.glob(Rails.root.join(base_path, "**", "#{alias_name}.svg")).first)
+        # Use the cached index (no recursive glob)
+        self.class.icon_path_index.key?(alias_name)
       end
 
       def svg_size

data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_react_reset_key.jsx

@@ -0,0 +1,100 @@
+import React, { useState } from "react";
+import MultiLevelSelect from "../_multi_level_select";
+import { Button } from "playbook-ui";
+
+const treeData = [
+  {
+    label: "Power Home Remodeling",
+    value: "powerHomeRemodeling",
+    id: "100",
+    expanded: true,
+    children: [
+      {
+        label: "People",
+        value: "people",
+        id: "101",
+        expanded: true,
+        children: [
+          {
+            label: "Talent Acquisition",
+            value: "talentAcquisition",
+            id: "102",
+          },
+          {
+            label: "Business Affairs",
+            value: "businessAffairs",
+            id: "103",
+            children: [
+              {
+                label: "Initiatives",
+                value: "initiatives",
+                id: "104",
+              },
+              {
+                label: "Learning & Development",
+                value: "learningAndDevelopment",
+                id: "105",
+              },
+            ],
+          },
+          {
+            label: "People Experience",
+            value: "peopleExperience",
+            id: "106",
+          },
+        ],
+      },
+      {
+        label: "Contact Center",
+        value: "contactCenter",
+        id: "107",
+        children: [
+          {
+            label: "Appointment Management",
+            value: "appointmentManagement",
+            id: "108",
+          },
+          {
+            label: "Customer Service",
+            value: "customerService",
+            id: "109",
+          },
+          {
+            label: "Energy",
+            value: "energy",
+            id: "110",
+          },
+        ],
+      },
+    ],
+  },
+];
+
+const MultiLevelSelectReactResetKey = (props) => {
+  const [resetKey, setResetKey] = useState(0);
+
+  const handleReset = () => {
+    setResetKey((k) => k + 1);
+  };
+
+  return (
+    <>
+      <MultiLevelSelect
+          {...props}
+          id="multi-level-select-reset-example"
+          key={`multi-level-select-reset-${resetKey}`}
+          name="my_array"
+          returnAllSelected
+          treeData={treeData}
+      />
+      <Button
+          id="multilevelselect-reset-button"
+          marginTop="lg"
+          onClick={handleReset}
+          text="Reset"
+      />
+    </>
+  );
+};
+
+export default MultiLevelSelectReactResetKey;

data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_react_reset_key.md

@@ -0,0 +1 @@
+When a parent resets a Multi Level Select (e.g., “Default” or “Clear”), the kit needs a `key` that changes with the selection because React uses the `key` to determine component identity and whether to preserve internal state. If the `key` doesn’t change, React reuses the existing instance and may keep showing the old selection instead of resetting to the new one.

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

@@ -39,3 +39,4 @@ 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,3 +17,4 @@ 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,8 +73,9 @@ $top_bottom_radius: 0px;
   }
   .disabled {
     pointer-events: none;
+    cursor: not-allowed;
     opacity: 0.5;        
-    color: grey; 
+    color: #B0BDC7; // replace with $text_disabled once added to tokens
 
     & > span {
       padding: $pagination_padding;
@@ -104,4 +105,103 @@ $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,4 +209,175 @@ 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')
+  })
+
+})