playbook_ui 16.13.0.pre.rc.0 → 16.13.0.pre.rc.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: f88b832ff7611e88af8ad226ab93b3a482b433e054224ebc50e160b0408b4507
-  data.tar.gz: 3823106c98aee4b2f75df5a55b323e4f0053f3601bbe89c26de6a9b8805abee3
+  metadata.gz: 888568d7c9aa8f1d5944438d4bb6f2916650c9f7bd80d32c0d912a2b209118f5
+  data.tar.gz: c97e4908f8ae4da80bf23994a4994e4f5647fb05f426f913cd74710274826026
 SHA512:
-  metadata.gz: 61f636f888ecc07287dbbd756660c9ee48c699ff058359360ff943fca29b84ece948acb08fccbd460f8592958358eb191480ce1539a1f979a37094f52ddd7252
-  data.tar.gz: 2ecfc8e99e535d7eba067ad09bcb30cdac8c3be243e4ee8f3a94be3a00bec5d042f3d256c31894da51e70c3a3359a70c317b48dd77e90f5ca3ce2ac40c69381f
+  metadata.gz: bed14c811f50da03eaaef7847b5ad6310e41f7cf121ce61d22c45715222edcc28c8b6da11c02a598cdf1cfd175a5c3f19c4d2f8a327d866cad41375cd37c5c84
+  data.tar.gz: 1d58072414ac82162cec930707d1182ac3c4d0f8ca64d4febf5e521091e43c78b5d298678683112354a60ee8c40f3d36f43cfcebea60640a91fdd20c7dfb6465

data/app/pb_kits/playbook/_playbook.scss

@@ -41,7 +41,6 @@
 @import 'pb_highlight/highlight';
 @import 'pb_home_address_street/home_address_street';
 @import 'pb_icon/icon';
-@import 'pb_icon_button/icon_button';
 @import 'pb_icon_circle/icon_circle';
 @import 'pb_icon_stat_value/icon_stat_value';
 @import 'pb_icon_value/icon_value';

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

@@ -203,7 +203,6 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
         : undefined;
     const errorId = error ? `${selectId}-error` : undefined;
 
-    const [filterItem, setFilterItem] = useState("");
     const initialSelected = useMemo(() => {
       // Handle quickpick variant with string defaultValue (e.g., "This Month")
       if (variant === "quickpick" && typeof defaultValue === "string" && defaultValue) {
@@ -226,6 +225,13 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
       initialSelected
     );
 
+    // Autocomplete displays the selection in the input; seed from defaultValue
+    const [filterItem, setFilterItem] = useState(() => {
+      if (!autocomplete || multiSelect) return "";
+      if (Array.isArray(initialSelected)) return "";
+      return (initialSelected as GenericObject)?.label || "";
+    });
+
     const filterResetDefaultSerialized = useMemo(
         () => serializeDropdownFilterResetDefault(variant, multiSelect, defaultValue, dropdownOptions),
         [variant, multiSelect, defaultValue, dropdownOptions]
@@ -320,10 +326,17 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
     }, [optionsWithBlankSelection, selectedArray, multiSelect]);
     
     const filteredOptions = useMemo(() => {
+          // When the input shows the selected label, do not filter the list down to that one option
+          const selectedLabel =
+            !multiSelect &&
+            !Array.isArray(selected) &&
+            (selected as GenericObject)?.label;
+          const filterText =
+            selectedLabel && filterItem === selectedLabel ? "" : filterItem;
           return availableOptions.filter((opt: GenericObject) =>
-            String(opt.label).toLowerCase().includes(filterItem.toLowerCase())
+            String(opt.label).toLowerCase().includes(filterText.toLowerCase())
           );
-        }, [availableOptions, filterItem]);
+        }, [availableOptions, filterItem, multiSelect, selected]);
 
     // For keyboard accessibility: Set focus within dropdown to selected item if it exists
     useEffect(() => {
@@ -460,6 +473,7 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
         setSelected({});
         onSelect && onSelect(null);
         setFocusedOptionIndex(-1);
+        setFilterItem("");
         
         // Clear linked DatePickers as well if this is a quickpick variant with controls
         if (variant === "quickpick") {
@@ -593,6 +607,7 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
                     onSelect,
                     optionsWithBlankSelection,
                     selected,
+                    setFilterItem,
                     setFocusedOptionIndex,
                     setIsDropDownClosed,
                     setIsInputFocused,

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default_value_with_autocomplete.html.erb

@@ -0,0 +1,10 @@
+<% 
+  options = [
+    { label: 'United States', value: 'unitedStates', id: 'us' },
+    { label: 'Canada', value: 'canada', id: 'ca' },
+    { label: 'Pakistan', value: 'pakistan', id: 'pk' },
+  ]
+
+%>
+
+<%= pb_rails("dropdown", props: {options: options, default_value: options.last, autocomplete: true}) %>

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default_value_with_autocomplete.jsx

@@ -0,0 +1,35 @@
+import React from 'react'
+import Dropdown from '../../pb_dropdown/_dropdown'
+
+const DropdownDefaultValueWithAutocomplete = (props) => {
+  const options = [
+    {
+      label: "United States",
+      value: "unitedStates",
+      id: "us"
+    },
+    {
+      label: "Canada",
+      value: "canada",
+      id: "ca"
+    },
+    {
+      label: "Pakistan",
+      value: "pakistan",
+      id: "pk"
+    }
+  ];
+
+  return (
+  <>
+    <Dropdown
+        autocomplete
+        defaultValue={options[2]}
+        options={options}
+        {...props}
+    />
+  </>
+  )
+}
+
+export default DropdownDefaultValueWithAutocomplete

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

@@ -22,6 +22,7 @@ examples:
   - dropdown_error: Dropdown with Error
   - dropdown_default_value: Default Value
   - dropdown_multi_select_with_default: Multi Select Default Value
+  - dropdown_default_value_with_autocomplete: Default Value with Autocomplete
   - dropdown_blank_selection: Blank Selection
   - dropdown_with_placeholder: Placeholder
   - dropdown_separators_hidden: Separators Hidden
@@ -63,6 +64,7 @@ examples:
   - dropdown_error: Dropdown with Error
   - dropdown_default_value: Default Value
   - dropdown_multi_select_with_default: Multi Select Default Value
+  - dropdown_default_value_with_autocomplete: Default Value with Autocomplete
   - dropdown_blank_selection: Blank Selection
   - dropdown_with_placeholder: Placeholder
   - dropdown_clear_selection: Clear Selection

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

@@ -37,3 +37,4 @@ export { default as DropdownDisabledOption } from "./_dropdown_disabled_option.j
 export { default as DropdownCustomDisplayDisabledOption } from "./_dropdown_custom_display_disabled_option.jsx";
 export { default as DropdownDisabled } from "./_dropdown_disabled.jsx";
 export { default as DropdownGroupedOptions } from "./_dropdown_grouped_options.jsx";
+export { default as DropdownDefaultValueWithAutocomplete } from './_dropdown_default_value_with_autocomplete.jsx'

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

@@ -350,6 +350,41 @@ test("autocomplete prop to render input", () => {
   expect(input).toBeInTheDocument()
 })
 
+test("defaultValue renders in autocomplete input", () => {
+  render(
+    <Dropdown
+        autocomplete
+        data={{ testid: testId }}
+        defaultValue={options[2]}
+        options={options}
+    />
+  )
+
+  const kit = screen.getByTestId(testId)
+  const input = kit.querySelector('.dropdown_input')
+  expect(input).toBeInTheDocument()
+  expect(input).toHaveValue(options[2].label)
+  expect(input).toHaveAttribute("placeholder", "")
+})
+
+test("autocomplete defaultValue still shows all options when opened", () => {
+  render(
+    <Dropdown
+        autocomplete
+        data={{ testid: testId }}
+        defaultValue={options[2]}
+        options={options}
+    />
+  )
+
+  const kit = screen.getByTestId(testId)
+  const optionEls = kit.querySelectorAll('.pb_dropdown_option_list, .pb_dropdown_option_selected')
+  expect(optionEls).toHaveLength(options.length)
+  expect(kit).toHaveTextContent(options[0].label)
+  expect(kit).toHaveTextContent(options[1].label)
+  expect(kit).toHaveTextContent(options[2].label)
+})
+
 test("searchbar prop to render TextInput in container", () => {  
   render (
     <Dropdown

data/app/pb_kits/playbook/pb_dropdown/hooks/useHandleOnKeydown.tsx

@@ -6,11 +6,13 @@ export const useHandleOnKeyDown = () => {
 
 const {
   autocomplete,
+  filterItem,
   filteredOptions,
   focusedOptionIndex,
   handleBackspace,
   handleOptionClick,
   selected,
+  setFilterItem,
   setFocusedOptionIndex,
   setIsDropDownClosed,
 }= useContext(DropdownContext)
@@ -40,7 +42,22 @@ const {
   return (e: React.KeyboardEvent) => {
 
     if (e.key !== "Tab" && autocomplete && selected && selected.label) {
+      // Only when the input is showing the selected label (e.g. seeded defaultValue)
+      const replacingSelectedLabel = filterItem === selected.label;
       handleBackspace();
+
+      if (replacingSelectedLabel && e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey) {
+        e.preventDefault();
+        setFilterItem?.(e.key);
+        setIsDropDownClosed(false);
+        return;
+      }
+
+      if (replacingSelectedLabel && (e.key === "Backspace" || e.key === "Delete")) {
+        e.preventDefault();
+        setFilterItem?.("");
+        return;
+      }
     }
 
     switch (e.key) {
@@ -72,4 +89,4 @@ const {
         break;
   }
 }
-};
+};

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

@@ -541,6 +541,30 @@ export default class PbDropdown extends PbEnhancedElement {
     }
   }
 
+  // Keep the selected label in the autocomplete input, but do not treat it as a search filter
+  resetOptionFilterForSelectedLabel() {
+    if (this.isMultiSelect || !this.searchInput) return;
+
+    const selectedOption = Array.from(this.queryAllOptions()).find((opt) =>
+      opt.classList.contains("pb_dropdown_option_selected"),
+    );
+    if (!selectedOption) return;
+
+    try {
+      const selectedLabel = JSON.parse(
+        selectedOption.dataset.dropdownOptionLabel,
+      ).label;
+      if (this.searchInput.value !== selectedLabel) return;
+
+      this.queryAllOptions().forEach((opt) => {
+        opt.style.display = "";
+      });
+      this.removeNoOptionsMessage();
+    } catch {
+      // ignore invalid option payloads
+    }
+  }
+
   showNoOptionsMessage() {
     if (this.target?.querySelector(".dropdown_no_options")) return;
 
@@ -923,6 +947,9 @@ export default class PbDropdown extends PbEnhancedElement {
 
   showElement(elem) {
     if (this.isDisabled) return;
+
+    // When autocomplete is showing the selected label (not an active search), show all options
+    this.resetOptionFilterForSelectedLabel();
     
     this.ensureFloatingPortalConfig();
     if (this.useMenuPortal) {
@@ -1096,6 +1123,13 @@ export default class PbDropdown extends PbEnhancedElement {
       const optionData = JSON.parse(selectedOption.dataset.dropdownOptionLabel);
       this.setTriggerElementText(optionData.label);
 
+      // Autocomplete trigger has no [data-dropdown-trigger-display]; set the input value instead
+      const autocompleteInput =
+        this.searchInput || this.element.querySelector(SEARCH_INPUT_SELECTOR);
+      if (autocompleteInput) {
+        autocompleteInput.value = optionData.label;
+      }
+
       // Handle quickpick variant: populate start/end date hidden inputs and sync DatePickers
       if (optionData.formatted_start_date && optionData.formatted_end_date) {
         const startDateId = this.element.dataset.startDateId;

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

@@ -52,8 +52,15 @@ const DropdownOption = (props: DropdownOptionProps) => {
   } = useContext(DropdownContext);
 
   const isItemMatchingFilter = (option: GenericObject | undefined) => {
+    // When the input is only showing the selected label (e.g. seeded defaultValue), do not filter
+    const selectedLabel =
+      !multiSelect &&
+      !Array.isArray(selected) &&
+      (selected as GenericObject)?.label;
+    const filterText =
+      selectedLabel && filterItem === selectedLabel ? "" : filterItem;
     const label = typeof option?.label === 'string' ? option.label.toLowerCase() : option?.label;
-    return String(label).toLowerCase().includes(filterItem.toLowerCase());
+    return String(label).toLowerCase().includes(filterText.toLowerCase());
   }
 
   // When multiSelect, then if an option is selected, remove from dropdown

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

@@ -103,8 +103,9 @@ const DropdownTrigger = (props: DropdownTriggerProps) => {
     "Select..."
   );
 
+  const hideJoinedLabelInBody = Boolean(autocomplete && filterItem === joinedLabels);
   const defaultDisplayPlaceholder = joinedLabels
-    ? joinedLabels
+    ? (hideJoinedLabelInBody ? "" : joinedLabels)
     : autocomplete
     ? ""
     : placeholder
@@ -252,9 +253,9 @@ const DropdownTrigger = (props: DropdownTriggerProps) => {
                       }}
                       key={`${isDropDownClosed ? "chevron-down" : "chevron-up"}`}
                   >
-                    {(!blankSelection || selected?.value !== optionsWithBlankSelection?.[0]?.value) && (
-                      <>
-                        {clearable !== false && selectedArray.length > 0 && (
+                    {(!blankSelection || selected?.value !== optionsWithBlankSelection?.[0]?.value) &&
+                    clearable !== false &&
+                    selectedArray.length > 0 ? (
                           <div onClick={(e)=>{e.stopPropagation(); !disabled && handleBackspace()}}>
                             <Icon
                                 cursor={disabled ? "default" : "pointer"}
@@ -264,8 +265,8 @@ const DropdownTrigger = (props: DropdownTriggerProps) => {
                                 size="sm"
                             />
                           </div>
-                        )}
-                      </>
+                    ) : (
+                      <></>
                     )}
                     <Icon
                         cursor={disabled ? "default" : "pointer"}

data/app/pb_kits/playbook/pb_form/pb_form_validation.js

@@ -4,6 +4,7 @@ import { debounce } from '../utilities/object'
 // Kit selectors
 const KIT_SELECTOR             = '[class^="pb_"][class*="_kit"]'
 const ERROR_MESSAGE_SELECTOR   = '.pb_body_kit_negative'
+const MESSAGE_CONTAINER_SELECTOR = '[data-pb-validation-container="true"]'
 
 // Validation selectors
 const FORM_SELECTOR            = 'form[data-pb-form-validation="true"]'
@@ -63,8 +64,8 @@ class PbFormValidation extends PbEnhancedElement {
   }
 
   showValidationMessage(target) {
-    const { parentElement } = target
-    const kitElement = parentElement.closest(KIT_SELECTOR)
+    const messageContainer = this.messageContainerFor(target)
+    const kitElement = messageContainer.closest(KIT_SELECTOR)
 
     // FIX: Add null check for kitElement
     if (!kitElement) return
@@ -89,20 +90,24 @@ class PbFormValidation extends PbEnhancedElement {
       errorMessageContainer.innerHTML = target.validationMessage
 
       // add the error message element to the dom tree
-      parentElement.appendChild(errorMessageContainer)
+      messageContainer.appendChild(errorMessageContainer)
     }
   }
 
   clearError(target) {
-    const { parentElement } = target
-    const kitElement = parentElement.closest(KIT_SELECTOR)
+    const messageContainer = this.messageContainerFor(target)
+    const kitElement = messageContainer.closest(KIT_SELECTOR)
     // Remove error class from kit element
     if (kitElement) kitElement.classList.remove('error')
-    // Remove error message from parent element
-    const errorMessageContainer = parentElement.querySelector(ERROR_MESSAGE_SELECTOR)
+    // Remove error message from the message container (which is the parent element most of thetime)
+    const errorMessageContainer = messageContainer.querySelector(ERROR_MESSAGE_SELECTOR)
     if (errorMessageContainer) errorMessageContainer.remove()
   }
 
+  messageContainerFor(target) {
+    return target.closest(MESSAGE_CONTAINER_SELECTOR) || target.parentElement
+  }
+
   // Check if there are phone number input errors
   hasPhoneNumberValidationErrors() {
     const phoneNumberErrors = this.element.querySelectorAll(PHONE_NUMBER_VALIDATION_ERROR_SELECTOR)

data/app/pb_kits/playbook/pb_text_input/text_input.html.erb

@@ -11,19 +11,17 @@
     </label>
   <% end %>
 
-  <%= content_tag(:div, class: "#{add_on_class} text_input_wrapper") do %>
-    <% if content.present? %>
-      <%= content %>
-    <% elsif has_add_on? %>
+  <%= content_tag(:div, class: "#{add_on_class} text_input_wrapper", data: { pb_validation_container: true }) do %>
+    <% field = content.presence || input_tag %>
+    <% if has_add_on? %>
       <%= pb_rails("text_input/add_on", props: object.add_on_props) do %>
-        <%= input_tag %>
+        <%= field %>
       <% end %>
-    <% elsif mask.present? %>
-      <%= input_tag %>
-      <%= tag(:input, data: "sanitized-pb-input", id: sanitized_id, name: object.name, style: "display: none;") %>
     <% else %>
-      <%= input_tag %>
+      <%= field %>
     <% end %>
+    <%# A masked input gives up its name, so the sanitized value is submitted through this hidden input. %>
+    <%= sanitized_input_tag if mask.present? && content.blank? %>
     <%= pb_rails("body", props: {dark: object.dark, status: "negative", text: object.error, id: object.error_id, aria: { atomic: "true", live: "polite" }, html_options: { role: "alert" }}) if object.error %>
   <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_text_input/text_input.rb

@@ -52,6 +52,10 @@ module Playbook
         tag(:input, all_input_options)
       end
 
+      def sanitized_input_tag
+        tag(:input, data: "sanitized-pb-input", id: sanitized_id, name: name, style: "display: none;")
+      end
+
       def has_add_on?
         add_on.present?
       end

data/app/pb_kits/playbook/pb_timestamp/_timestamp.tsx

@@ -92,8 +92,8 @@ const Timestamp = (props: TimestampProps): React.ReactElement => {
     const finalUpdatedString = []
     if (shouldShowUser) finalUpdatedString.push(`by ${text}`)
     if (showDate && !showTime) finalUpdatedString.push(`on ${baseDateDisplay()}`)
-    if (showDate && showTime) finalUpdatedString.push(`on ${baseDateDisplay()} at ${timeDisplay}`)
-    if (showTime && !showDate) finalUpdatedString.push(`at ${timeDisplay}`)
+    if (showDate && showTime) finalUpdatedString.push(`on ${baseDateDisplay()} at ${fullTimeDisplay()}`)
+    if (showTime && !showDate) finalUpdatedString.push(`at ${fullTimeDisplay()}`)
     return `Last updated ${finalUpdatedString.join(' ')}`
   }
 

data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated.html.erb

@@ -12,3 +12,22 @@
   variant: "updated",
   show_user: false
 }) %>
+
+<br>
+
+<%= pb_rails("timestamp", props: {
+  show_timezone: true,
+  timestamp: DateTime.now,
+  timezone: "America/New_York",
+  variant: "updated",
+}) %>
+
+<br />
+
+<%= pb_rails("timestamp", props: {
+  show_date: false,
+  show_timezone: true,
+  timestamp: DateTime.now,
+  timezone: "Asia/Hong_Kong",
+  variant: "updated",
+}) %>

data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated.jsx

@@ -21,6 +21,27 @@ const TimestampUpdated = (props) => {
           variant="updated"
           {...props}
       />
+
+      <br />
+
+      <Timestamp
+          showTimezone
+          timestamp={todaysDate}
+          timezone="America/New_York"
+          variant="updated"
+          {...props}
+      />
+
+      <br />
+
+      <Timestamp
+          showDate={false}
+          showTimezone
+          timestamp={todaysDate}
+          timezone="Asia/Hong_Kong"
+          variant="updated"
+          {...props}
+      />
     </div>
   )
 }

data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated.md

@@ -2,4 +2,6 @@ Use variant `updated` to show last updated at timestamp.
 
 This variant can be customized using the optional `showUser`/`show_user` prop to show user as part of the text. When showing the user, pass in the user name using the `text` prop as shown. 
 
-`showUser`/`show_user` is set to false by default. 
+`showUser`/`show_user` is set to false by default. 
+
+This variant can also display timezone when the `showTimezone`/`show_timezone` and `timezone` props are used together as instructed in the Show Timezones example above.

data/app/pb_kits/playbook/pb_timestamp/timestamp.test.js

@@ -271,3 +271,45 @@ describe("Timestamp Kit", () => {
     expect(text?.textContent).toEqual("Last updated at 12:00a")
   })
 
+  test("updated variant: shows timezone when showTimezone is enabled", () => {
+    render(
+      <Timestamp
+          data={{ testid: testId }}
+          showTimezone
+          timestamp={new Date()}
+          timezone="America/New_York"
+          variant="updated"
+      />
+    )
+    const text = screen.getByTestId(testId).querySelector(".pb_caption_kit_xs")
+    expect(text?.textContent).toEqual("Last updated on Jan 1 at 12:00a EST")
+  })
+
+  test("updated variant: shows timezone with time only when showDate=false", () => {
+    render(
+      <Timestamp
+          data={{ testid: testId }}
+          showDate={false}
+          showTimezone
+          timestamp={new Date()}
+          timezone="America/New_York"
+          variant="updated"
+      />
+    )
+    const text = screen.getByTestId(testId).querySelector(".pb_caption_kit_xs")
+    expect(text?.textContent).toEqual("Last updated at 12:00a EST")
+  })
+
+  test("updated variant: hides timezone when showTimezone is not provided", () => {
+    render(
+      <Timestamp
+          data={{ testid: testId }}
+          timestamp={new Date()}
+          timezone="America/New_York"
+          variant="updated"
+      />
+    )
+    const text = screen.getByTestId(testId).querySelector(".pb_caption_kit_xs")
+    expect(text?.textContent).toEqual("Last updated on Jan 1 at 12:00a")
+  })
+