playbook_ui 15.7.0.pre.rc.2 → 15.7.0.pre.rc.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 371d5a4b2875ab575224762ed34aef7597086445494a2785824e9bbf9fff417d
-  data.tar.gz: e1738e75556fbb0b0b1682a751adc0d062b0d0bfc9ef02a5aad48f72d0815011
+  metadata.gz: 9a9291f49ac045055567a7467e7a215ceb588218f8f3d6779088848340964ee3
+  data.tar.gz: cc09327d3bc4ba91c31f73bea082ad8051c6ab26784ef19f461ec1c0caf62924
 SHA512:
-  metadata.gz: 8e63fe0139eb3b4af379fe345fabcd3bbff1cecf8fef4f166b98d3255da33407a65ae8b8aa87e6584a581a13f88333026255d52e01bda184945ff89527a77231
-  data.tar.gz: 671a72c82ee54d6050bcb1ff5c76b3b18427e96fe68ef813a28df5aab424607c89f557130f3bcfb0b0b00711df63cfa78624f187e6ed6ed1fc43332d15be3b5b
+  metadata.gz: ddb268ad685b64e4fbdf64bc3d2d20eaae16a6e31f0fa9d095abd53d01c82ed3eaad51022cbf81172fcebd3b259e91b83aacf5fc52ae61f5a2d2f2da92d2aa88
+  data.tar.gz: ce7b1b023da1876a66aa654a928bc1d0dff129f0f32b01b3d80dc73ce5b652a8d3002a2f4782f70588993649d709d7b2eb1ae4cf3839eb2fb04eabb5bd0b7d46

data/app/pb_kits/playbook/pb_date_picker/date_picker_helper.ts

@@ -570,10 +570,16 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
     picker.config.onClose.push((selectedDates: string) => {
       if (selectedDates?.length) {
         const element = document.querySelector(`#${syncStartWith}`) as any;
-        // Check if it's a Dropdown QuickPick (has _dropdownRef) or DatePicker QuickPick (has _flatpickr)
+        // Check if it's a React Dropdown (has _dropdownRef)
         if (element?._dropdownRef?.current) {
           element._dropdownRef.current.clearSelected();
-        } else {
+        }
+        // Check if it's a Rails Dropdown (has _pbDropdownInstance)
+        else if (element?._pbDropdownInstance) {
+          element._pbDropdownInstance.clearSelected();
+        }
+        // Check if it's a DatePicker QuickPick (has _flatpickr)
+        else {
           const quickpick = element?._flatpickr;
           quickpick?.clear();
         }
@@ -586,10 +592,16 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
     picker.config.onClose.push((selectedDates: string) => {
       if (selectedDates?.length) {
         const element = document.querySelector(`#${syncEndWith}`) as any;
-        // Check if it's a Dropdown QuickPick (has _dropdownRef) or DatePicker QuickPick (has _flatpickr)
+        // Check if it's a React Dropdown (has _dropdownRef)
         if (element?._dropdownRef?.current) {
           element._dropdownRef.current.clearSelected();
-        } else {
+        }
+        // Check if it's a Rails Dropdown (has _pbDropdownInstance)
+        else if (element?._pbDropdownInstance) {
+          element._pbDropdownInstance.clearSelected();
+        }
+        // Check if it's a DatePicker QuickPick (has _flatpickr)
+        else {
           const quickpick = element?._flatpickr;
           quickpick?.clear();
         }

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range_pattern_rails.html.erb

@@ -1,20 +1,29 @@
-<%= pb_rails("date_picker", props: {
-  mode: "range",
-  picker_id: "quick-pick-date-range",
-  placeholder: "Select a Date Range",
-  selection_type: "quickpick",
-  controls_end_id: "quick-pick-date-range-end",
-  controls_start_id: "quick-pick-date-range-start",
+<%= pb_rails("dropdown", props: {
+  id: "dropdown-quickpick-with-date-pickers-1",
+  label: "Date Range",
+  name: "date_range",
+  margin_bottom: "sm",
+  variant: "quickpick",
+  controls_start_id: "start-date-picker-1",
+  controls_end_id: "end-date-picker-1",
+  start_date_id: "quickpick_start_date_1",
+  start_date_name: "start_date",
+  end_date_id: "quickpick_end_date_1",
+  end_date_name: "end_date"
 }) %>
 
 <%= pb_rails("date_picker", props: {
-  picker_id: "quick-pick-date-range-start",
-  placeholder: "Select a Start Date",
-  sync_start_with:"quick-pick-date-range",
+  picker_id: "start-date-picker-1",
+  label: "Start Date",
+  name: "start_date_picker",
+  placeholder: "Select Start Date",
+  sync_start_with: "dropdown-quickpick-with-date-pickers-1"
 }) %>
 
 <%= pb_rails("date_picker", props: {
-  picker_id: "quick-pick-date-range-end",
-  placeholder: "Select an End Date",
-  sync_end_with:"quick-pick-date-range",
-}) %>
+  picker_id: "end-date-picker-1",
+  label: "End Date",
+  name: "end_date_picker",
+  placeholder: "Select End Date",
+  sync_end_with: "dropdown-quickpick-with-date-pickers-1"
+}) %>

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range_pattern_rails.md

@@ -1,4 +1,4 @@
-You can link a Quickpick DatePicker to standard DatePickers using the following props:
+You can link a Quickpick Dropdown to standard DatePickers using the following props:
 
 **For the Quickpick DatePicker**:
 `controls_start_id`: ID of the DatePicker that should receive the start date.

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_overflow_visible.html.erb

@@ -0,0 +1,71 @@
+<% 
+  typeahead_options = [
+    {
+      label: "United States",
+      value: "unitedStates",
+      id: "us"
+    },
+    {
+      label: "United Kingdom",
+      value: "unitedKingdom",
+      id: "gb"
+    },
+    {
+      label: "Canada",
+      value: "canada",
+      id: "ca"
+    },
+    {
+      label: "Australia",
+      value: "australia",
+      id: "au"
+    },
+    {
+      label: "Germany",
+      value: "germany",
+      id: "de"
+    },
+    {
+      label: "France",
+      value: "france",
+      id: "fr"
+    },
+    {
+      label: "Japan",
+      value: "japan",
+      id: "jp"
+    },
+    {
+      label: "Brazil",
+      value: "brazil",
+      id: "br"
+    }
+  ]
+%>
+
+<%= pb_rails("button", props: { text: "Open Dialog with Overflow Visible", data: {"open-dialog": "dialog-overflow-visible"} }) %>
+
+<%= pb_rails("dialog", props: { 
+    id: "dialog-overflow-visible", 
+    size: "md", 
+    overflow: "visible"
+}) do %>
+  <%= pb_rails("dialog/dialog_header", props: { id: "dialog-overflow-visible" } ) do %>
+    <%= pb_rails("body", props: { text: "Select Location" }) %>
+  <% end %>
+  <%= pb_rails("dialog/dialog_body") do %>
+    <%= pb_rails("typeahead", props: {
+      options: typeahead_options,
+      placeholder: "Select a location...",
+      id: "location-typeahead",
+      is_multi: false,
+    }) %>
+  <% end %>
+  <%= pb_rails("dialog/dialog_footer", props: {
+    cancel_button: "Cancel",
+    confirm_button: "Save",
+    confirm_button_id: "confirm-overflow-visible",
+    id: "dialog-overflow-visible"
+  }) %>
+<% end %>
+

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_overflow_visible.jsx

@@ -0,0 +1,57 @@
+import React, { useState } from 'react'
+
+import Body from '../../pb_body/_body'
+import Button from '../../pb_button/_button'
+import Dialog from '../../pb_dialog/_dialog'
+import Typeahead from '../../pb_typeahead/_typeahead'
+
+const DialogOverflowVisible = () => {
+  const [isOpen, setIsOpen] = useState(false)
+  const close = () => setIsOpen(false)
+  const open = () => setIsOpen(true)
+
+  const typeaheadOptions = [
+    { label: "United States", value: "unitedStates", id: "us" },
+    { label: "United Kingdom", value: "unitedKingdom", id: "gb" },
+    { label: "Canada", value: "canada", id: "ca" },
+    { label: "Australia", value: "australia", id: "au" },
+    { label: "Germany", value: "germany", id: "de" },
+    { label: "France", value: "france", id: "fr" },
+    { label: "Japan", value: "japan", id: "jp" },
+    { label: "Brazil", value: "brazil", id: "br" },
+  ]
+
+  return (
+    <>
+      <Button onClick={open}>{'Open Dialog with Overflow Visible'}</Button>
+      <Dialog
+          onClose={close}
+          opened={isOpen}
+          overflow="visible"
+          size="md"
+      >
+        <Dialog.Header>
+          <Body>{'Select Location'}</Body>
+        </Dialog.Header>
+        <Dialog.Body>
+          <Typeahead
+              options={typeaheadOptions}
+              placeholder="Select a location..."
+          />
+        </Dialog.Body>
+        <Dialog.Footer>
+          <Button onClick={close}>{'Save'}</Button>
+          <Button
+              onClick={close}
+              variant="link"
+          >
+            {'Cancel'}
+          </Button>
+        </Dialog.Footer>
+      </Dialog>
+    </>
+  )
+}
+
+export default DialogOverflowVisible
+

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_overflow_visible_rails.md

@@ -0,0 +1 @@
+Use the `overflow: "visible"` global prop to allow Typeahead dropdown menus to appear outside the dialog boundaries. By default, dialogs clip content that extends beyond their edges, but this prop enables pop-up elements to render above the dialog overlay. 

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_overflow_visible_react.md

@@ -0,0 +1 @@
+Use the `overflow="visible"` global prop to allow Date Picker and Typeahead dropdown menus to appear outside the dialog boundaries. By default, dialogs clip content that extends beyond their edges, but this prop enables pop-up elements to render above the dialog overlay. 

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

@@ -12,6 +12,7 @@ examples:
   - dialog_full_height_placement: Full Height Placement
   - dialog_loading: Loading
   - dialog_turbo_frames: Within Turbo Frames
+  - dialog_overflow_visible: Overflow Visible
   - dialog_closeable: Close Button in Header
 
 
@@ -26,6 +27,7 @@ examples:
   - dialog_full_height: Full Height
   - dialog_full_height_placement: Full Height Placement
   - dialog_loading: Loading
+  - dialog_overflow_visible: Overflow Visible
   - dialog_closeable: Close Button in Header
 
   swift:

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

@@ -9,4 +9,5 @@ export { default as DialogStackedAlert } from './_dialog_stacked_alert.jsx'
 export { default as DialogFullHeight } from './_dialog_full_height.jsx'
 export { default as DialogFullHeightPlacement } from './_dialog_full_height_placement.jsx'
 export { default as DialogLoading } from './_dialog_loading.jsx'
-export { default as DialogCloseable } from './_dialog_closeable.jsx'
+export { default as DialogOverflowVisible } from './_dialog_overflow_visible.jsx'
+export { default as DialogCloseable } from './_dialog_closeable.jsx'

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

@@ -20,12 +20,14 @@
 
 %>
 
-<%= pb_rails("dropdown", props: {options: options}) %>
+<%= pb_rails("dropdown", props: {id: "country-dropdown", options: options}) %>
 
 <script>
   document.addEventListener("pb:dropdown:selected", (e) => {
-    const option   = e.detail;
-    const dropdown = e.target;
-    console.log("Selected option:", option);
-})
+    if (e.target.id === "country-dropdown") {
+      const option   = e.detail;
+      const dropdown = e.target;
+      console.log("Selected option:", option);
+    }
+  });
 </script>

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

@@ -0,0 +1,19 @@
+
+<%= pb_rails("dropdown", props: {
+  id: "date-range-with-default",
+  label: "Date Range",
+  variant: "quickpick",
+  default_value: "This Year"
+}) %>
+
+<script>
+  document.addEventListener("DOMContentLoaded", () => {
+    const dropdown = document.getElementById("date-range-with-default");
+    if (dropdown) {
+      dropdown.addEventListener("pb:dropdown:selected", (e) => {
+        const option = e.detail;
+        console.log("Selected option:", option);
+      });
+    }
+  });
+</script>

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

@@ -0,0 +1,12 @@
+<%= pb_rails("dropdown", props: {id: "date-range-quickpick-1", label: "Date Range", variant: "quickpick"}) %>
+
+
+<script>
+  const dropdown = document.getElementById("date-range-quickpick-1");
+  if (dropdown) {
+    dropdown.addEventListener("pb:dropdown:selected", (e) => {
+      const option = e.detail;
+      console.log("Selected option:", option);
+    });
+  }
+</script>

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick_rails.md

@@ -0,0 +1,26 @@
+The `quickpick` variant provides predefined date based options when `variant:"quickpick"` is used. 
+
+Open the Dropdown above to see the default options.
+
+The quickpick variant automatically generates hidden inputs for `start_date` and `end_date` which are populated when a date range is selected. These inputs are ready for form submission.
+
+You can customize the input names and IDs using the following props:
+- `start_date_name` - The name attribute for the start date input (default: `"start_date_name"`)
+- `start_date_id` - The ID attribute for the start date input (default: `"start_date_id"`)
+- `end_date_name` - The name attribute for the end date input (default: `"end_date_name"`)
+- `end_date_id` - The ID attribute for the end date input (default: `"end_date_id"`)
+
+Example with custom names:
+```ruby
+pb_rails("dropdown", props: {
+  variant: "quickpick",
+  start_date_name: "filter[start_date]",
+  start_date_id: "filter_start_date",
+  end_date_name: "filter[end_date]",
+  end_date_id: "filter_end_date"
+})
+```
+
+The Dropdown kit also comes with a custom event called "pb:dropdown:selected" which updates dynamically with the selection as it changes. See code snippet to see this in action.
+
+In addition, a data attribute called data-option-selected with the selection is also rendered on the parent dropdown div.

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

@@ -0,0 +1,19 @@
+
+<%= pb_rails("dropdown", props: {
+  id: "date-range-quickpick-end-today",
+  label: "Date Range", 
+  variant: "quickpick", 
+  range_ends_today: true 
+}) %>
+
+<script>
+  document.addEventListener("DOMContentLoaded", () => {
+    const dropdown = document.getElementById("date-range-quickpick-end-today");
+    if (dropdown) {
+      dropdown.addEventListener("pb:dropdown:selected", (e) => {
+        const option = e.detail;
+        console.log("Selected option:", option);
+      });
+    }
+  });
+</script>

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick_range_end_rails.md

@@ -0,0 +1 @@
+The optional `range_ends_today` prop can be used with the `quickpick` variant to set end date on all ranges that start with 'this' to today's date. For instance, by default 'This Year' will set end day to 12/31/(current year), but if `range_ends_today` prop is used, end date on that range will be today's date.

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

@@ -0,0 +1,30 @@
+<%= pb_rails("dropdown", props: {
+  id: "dropdown-quickpick-with-date-pickers-default",
+  label: "Date Range",
+  name: "date_range",
+  margin_bottom: "sm",
+  variant: "quickpick",
+  default_value: "This Month",
+  controls_start_id: "start-date-picker-default",
+  controls_end_id: "end-date-picker-default",
+  start_date_id: "quickpick_start_date_default",
+  start_date_name: "start_date",
+  end_date_id: "quickpick_end_date_default",
+  end_date_name: "end_date"
+}) %>
+
+<%= pb_rails("date_picker", props: {
+  picker_id: "start-date-picker-default",
+  label: "Start Date",
+  name: "start_date_picker",
+  placeholder: "Select Start Date",
+  sync_start_with: "dropdown-quickpick-with-date-pickers-default"
+}) %>
+
+<%= pb_rails("date_picker", props: {
+  picker_id: "end-date-picker-default",
+  label: "End Date",
+  name: "end_date_picker",
+  placeholder: "Select End Date",
+  sync_end_with: "dropdown-quickpick-with-date-pickers-default"
+}) %>

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick_with_date_pickers_default_rails.md

@@ -0,0 +1,3 @@
+This example demonstrates the 3-input pattern with a default value. The dropdown is initialized with "This Month" selected, and both DatePickers are automatically populated with the corresponding start and end dates.
+
+The default value can be set using the `default_value` prop with any of the quickpick option labels.

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

@@ -0,0 +1,29 @@
+<%= pb_rails("dropdown", props: {
+  id: "dropdown-quickpick-with-date-pickers",
+  label: "Date Range",
+  name: "date_range",
+  margin_bottom: "sm",
+  variant: "quickpick",
+  controls_start_id: "start-date-picker",
+  controls_end_id: "end-date-picker",
+  start_date_id: "quickpick_start_date",
+  start_date_name: "start_date",
+  end_date_id: "quickpick_end_date",
+  end_date_name: "end_date"
+}) %>
+
+<%= pb_rails("date_picker", props: {
+  picker_id: "start-date-picker",
+  label: "Start Date",
+  name: "start_date_picker",
+  placeholder: "Select Start Date",
+  sync_start_with: "dropdown-quickpick-with-date-pickers"
+}) %>
+
+<%= pb_rails("date_picker", props: {
+  picker_id: "end-date-picker",
+  label: "End Date",
+  name: "end_date_picker",
+  placeholder: "Select End Date",
+  sync_end_with: "dropdown-quickpick-with-date-pickers"
+}) %>

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick_with_date_pickers_rails.md

@@ -0,0 +1,13 @@
+The quickpick variant can be synced with two DatePickers for a 3-input pattern. When a quickpick option is selected from the dropdown, both DatePickers are automatically populated. When either DatePicker is manually changed, the dropdown is cleared.
+
+#### Props for 3-Input Pattern:
+
+- `controls_start_id` - ID of the start DatePicker to sync with
+- `controls_end_id` - ID of the end DatePicker to sync with
+
+#### DatePicker Props:
+
+- `sync_start_with` - ID of the dropdown to clear when start date changes
+- `sync_end_with` - ID of the dropdown to clear when end date changes
+
+This pattern allows users to quickly select common date ranges or manually pick specific dates.

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

@@ -47,7 +47,7 @@
 %>
 
 
-<%= pb_rails("dropdown", props: {options: options}) do %>
+<%= pb_rails("dropdown", props: {id: "user-dropdown", options: options}) do %>
     <%= pb_rails("dropdown/dropdown_trigger", props: {placeholder: "Select a User", custom_display: custom_display}) %>
     <%= pb_rails("dropdown/dropdown_container") do %>
         <% options.each do |option| %>
@@ -71,6 +71,8 @@
 
 <script>
   document.addEventListener("pb:dropdown:selected", (e) => {
+    if (e.target.id !== "user-dropdown") return;
+    
     const option   = e.detail;
     const dropdown = e.target;
 

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

@@ -22,6 +22,11 @@ examples:
   - dropdown_multi_select_with_default: Multi Select Default Value
   - dropdown_blank_selection: Blank Selection
   - dropdown_separators_hidden: Separators Hidden
+  - dropdown_quickpick_rails: Quick Pick Variant
+  - dropdown_quickpick_range_end_rails: Quick Pick Variant (Range Ends Today)
+  - dropdown_quickpick_default_dates: Quick Pick Variant (Default Dates)
+  - dropdown_quickpick_with_date_pickers_rails: Quick Pick with Date Pickers
+  - dropdown_quickpick_with_date_pickers_default_rails: Quick Pick with Date Pickers (Default Value)
 
   react:
   - dropdown_default: Default

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

@@ -10,6 +10,10 @@
             style="display: none"
             <%= object.required ? "required" : ""%>
         />
+        <% if object.variant == "quickpick" %>
+          <input id="<%= object.start_date_id %>" name="<%= object.start_date_name %>" style="display: none">
+          <input id="<%= object.end_date_id %>" name="<%= object.end_date_name %>" style="display: none">
+        <% end %>
         <% if content.present? %>
             <%= content.presence %>
             <%= pb_rails("body", props: { status: "negative", text: object.error }) %>

data/app/pb_kits/playbook/pb_dropdown/dropdown.rb

@@ -1,5 +1,7 @@
 # frozen_string_literal: true
 
+require_relative "quickpick_helper"
+
 module Playbook
   module PbDropdown
     class Dropdown < Playbook::KitBase
@@ -14,7 +16,7 @@ module Playbook
       prop :blank_selection, type: Playbook::Props::String,
                              default: ""
       prop :variant, type: Playbook::Props::Enum,
-                     values: %w[default subtle],
+                     values: %w[default subtle quickpick],
                      default: "default"
       prop :separators, type: Playbook::Props::Boolean,
                         default: true
@@ -26,13 +28,32 @@ module Playbook
                           default: false
       prop :form_pill_props, type: Playbook::Props::HashProp,
                              default: {}
+      prop :range_ends_today, type: Playbook::Props::Boolean,
+                              default: false
+      prop :controls_end_id, type: Playbook::Props::String,
+                             default: ""
+      prop :controls_start_id, type: Playbook::Props::String,
+                               default: ""
+      prop :start_date_id, type: Playbook::Props::String,
+                           default: "start_date_id"
+      prop :start_date_name, type: Playbook::Props::String,
+                             default: "start_date_name"
+      prop :end_date_id, type: Playbook::Props::String,
+                         default: "end_date_id"
+      prop :end_date_name, type: Playbook::Props::String,
+                           default: "end_date_name"
 
       def data
         Hash(prop(:data)).merge(
           pb_dropdown: true,
           pb_dropdown_multi_select: multi_select,
-          form_pill_props: form_pill_props.to_json
-        )
+          pb_dropdown_variant: variant,
+          form_pill_props: form_pill_props.to_json,
+          start_date_id: variant == "quickpick" ? start_date_id : nil,
+          end_date_id: variant == "quickpick" ? end_date_id : nil,
+          controls_start_id: variant == "quickpick" && controls_start_id.present? ? controls_start_id : nil,
+          controls_end_id: variant == "quickpick" && controls_end_id.present? ? controls_end_id : nil
+        ).compact
       end
 
       def classname
@@ -48,7 +69,15 @@ module Playbook
       def input_default_value
         return "" unless default_value.present?
 
-        if multi_select
+        if variant == "quickpick"
+          d = default_value.to_s.downcase
+          matched_option = quickpick_options.find do |opt|
+            opt[:label].downcase == d
+          end
+          return matched_option[:id] if matched_option
+
+          ""
+        elsif multi_select
           default_value.map { |v| v.transform_keys(&:to_s)["id"] }.join(",")
         else
           default_value.transform_keys(&:to_s)["id"]
@@ -60,7 +89,12 @@ module Playbook
       end
 
       def options_with_blank
-        blank_selection.present? ? [{ id: "", value: "", label: blank_selection }] + options : options
+        dropdown_options = variant == "quickpick" ? quickpick_options : options
+        blank_selection.present? ? [{ id: "", value: "", label: blank_selection }] + dropdown_options : dropdown_options
+      end
+
+      def quickpick_options
+        QuickpickHelper.get_quickpick_options(range_ends_today: range_ends_today)
       end
     end
   end