playbook_ui 16.2.0.pre.alpha.play280714580 → 16.2.0.pre.alpha.play284314641

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 9b2ec7eb374acd4195bd9827df5b3366eb506cee37d30b47f0a494ff22878e52
-  data.tar.gz: dbd183e757ca8c8ea7344917109f23c411715b35affb325d927be4e7d3a5723a
+  metadata.gz: 8c21c5c359e50742075f58579331eb7acc9ae7a7d992ede03a31fe58d132a6e7
+  data.tar.gz: 27012bc375f94c3f2e8ddd5d4cfcf84418bd78260a1dc15aa84db4578f040901
 SHA512:
-  metadata.gz: d7c56718bdae11326ebcc0eeff926bd4f3da4b242b29ef77c32495b5e9c3a5b1c3fa65e9b5771b490289c827d2c09afa042d9c605e75d16e6d2f564eea55cf58
-  data.tar.gz: 87498891fc1f847cbb40612311be38532b5ff304a3d6907a0c98ac16fa1006f4b6902d2cf9a48f39d6d20602c15be0226038287f75524f1167b8c7883c3cab4e
+  metadata.gz: b563518a788051e655090236d617656a431f12ef0ac68fdde942a900271465f8009b7348584f02ba34fd9a4a7c69fbf0f80d1461636a84025828b27d69ecf33e
+  data.tar.gz: d8c12bea96a73908d307b6b860831778e426839f203c6ad401a16637af279c7cdf34d5204847d7133156b99c6f85c1a19419ad04782f974b01f26bec91f4c58b

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_date_picker/_date_picker.tsx

@@ -221,11 +221,14 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
         {!hideLabel && (
            <label htmlFor={pickerId}>
             {requiredIndicator ? (
-              <Caption className="pb_date_picker_kit_label">
+              <Caption className="pb_date_picker_kit_label"
+                  color="lighter"
+              >
                 {label} <span style={{ color: `${colors.error}` }}>*</span>
               </Caption>
             ) : (
               <Caption className="pb_date_picker_kit_label"
+                  color="lighter"
                   text={label}
               />
             )}

data/app/pb_kits/playbook/pb_date_picker/date_picker.html.erb

@@ -7,11 +7,11 @@
     <% if !object.hide_label && object.label %>
       <label for="<%= object.picker_id %>">
         <% if object.required_indicator %>
-          <%= pb_rails("caption", props: { dark: object.dark, classname: "pb_date_picker_kit_label" }) do %>
+          <%= pb_rails("caption", props: { dark: object.dark, classname: "pb_date_picker_kit_label", color: "lighter" }) do %>
             <%= object.label %><span style="color: #DA0014;"> *</span>
           <% end %>
         <% else %>
-          <%= pb_rails("caption", props: { text: object.label, dark: object.dark, classname: "pb_date_picker_kit_label" }) %>
+          <%= pb_rails("caption", props: { text: object.label, dark: object.dark, classname: "pb_date_picker_kit_label", color: "lighter" }) %>
         <% end %>
       </label>
     <% end %>

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

@@ -479,6 +479,7 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
                     {requiredIndicator ? (
                       <Caption
                           className="pb_dropdown_kit_label"
+                          color="lighter"
                           dark={dark}
                           marginBottom="xs"
                       >
@@ -487,6 +488,7 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
                     ) : (
                       <Caption
                           className="pb_dropdown_kit_label"
+                          color="lighter"
                           dark={dark}
                           marginBottom="xs"
                           text={label}

data/app/pb_kits/playbook/pb_dropdown/dropdown.html.erb

@@ -2,11 +2,11 @@
     <% if object.label.present? %>
         <label for="<%= object.select_id %>" data-dropdown="pb-dropdown-label">
             <% if object.required_indicator %>
-                <%= pb_rails("caption", props: { margin_bottom: "xs", classname: "pb_dropdown_kit_label", dark: object.dark }) do %>
+                <%= pb_rails("caption", props: { margin_bottom: "xs", classname: "pb_dropdown_kit_label", color: "lighter", dark: object.dark }) do %>
                     <%= object.label %><span style="color: #DA0014;"> *</span>
                 <% end %>
             <% else %>
-                <%= pb_rails("caption", props: { text: object.label, margin_bottom: "xs", classname: "pb_dropdown_kit_label", dark: object.dark }) %>
+                <%= pb_rails("caption", props: { text: object.label, margin_bottom: "xs", classname: "pb_dropdown_kit_label", color: "lighter", dark: object.dark }) %>
             <% end %>
         </label>
     <% end %>

data/app/pb_kits/playbook/pb_dropdown/dropdown.test.jsx

@@ -212,7 +212,7 @@ test('generated label prop', () => {
   )
 
   const kit = screen.getByTestId(testId)
-  const label = kit.querySelector('.pb_caption_kit_md')
+  const label = kit.querySelector('.pb_caption_kit_md_lighter')
   expect(label).toHaveTextContent('Countries')
 })
 

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/_multi_level_select.tsx

@@ -532,6 +532,7 @@ const MultiLevelSelect = forwardRef<HTMLInputElement, MultiLevelSelectProps>(
           {requiredIndicator ? (
             <Caption
                 className="pb_multi_level_select_kit_label"
+                color="lighter"
                 marginBottom="xs"
             >
               {label} <span className="required_indicator">*</span>
@@ -539,6 +540,7 @@ 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/_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;
+    }
+  }
 }