playbook_ui 16.10.0.pre.rc.0 → 16.10.0.pre.rc.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: fbc8ab8a2cb4410a11719212ed4dd8808b3de275ae738263a157c700f2124bee
-  data.tar.gz: 6c12f43c0557d53ddc4bea574d6312893883ea55886623a09f2d46e5180693ef
+  metadata.gz: 0c56cffd7ae20d303e7ebfb111960cd77e6b3ef3020867b335b91ad0743ec88c
+  data.tar.gz: 12ed387ffcb0607f46a4ef6f231bb7823b5b3c81f7a988783b8b652491ef29cf
 SHA512:
-  metadata.gz: 10b8dff1e91a51f136767f109b0cf688a0b6356505316876adabebd3bac28324fc3c1c11be147f888d6532abd8818fba0f7e83844dc4dbd96a3e8aea88cab265
-  data.tar.gz: ba68c30c290c2a3a77324e775703c272157c3cecfb1e321d78fb620acc5b1f3a42e36ccb9e5d6ec706eb7cef1c2584efc940ad5cd61d89ffff91c378b3bba7ae
+  metadata.gz: dc097cb2fe1d11fefe23ea335188808e0a15abcf214e0de13c7f8b6f1320974af4f1d33c813bf46c3650007ab0e903e838e91738ae8cb48c93c9875f28ccfc66
+  data.tar.gz: 2ef66b6d238eb564c593ceb9eaad541f898a5bbad90afd2c834b53dfbcf4624ce56e350eae499b674f7cccece8ff40d1c50201838529782fbf330a92c920b86a

data/app/pb_kits/playbook/pb_filter/Filter/CurrentFilters.tsx

@@ -1,22 +1,32 @@
-import React from 'react'
+import React, { useEffect } from 'react'
 import { isEmpty, omitBy, map } from '../../utilities/object'
 
 import Body from '../../pb_body/_body'
 import Caption from '../../pb_caption/_caption'
 import Title from '../../pb_title/_title'
+import InteractiveFilter, { InteractiveFilterConfig } from './InteractiveFilter'
 
 export type FilterDescription = {
   [key: string]: string | null | boolean,
 }
 
+export type InteractiveFilters = {
+  [key: string]: InteractiveFilterConfig,
+}
+
 export type CurrentFiltersProps = {
   dark: boolean,
   filters: FilterDescription,
+  interactiveFilters?: InteractiveFilters,
 }
 
 const hiddenFilters = (value: any) => isEmpty(value) && value !== true
 
-const CurrentFilters = ({ dark, filters }: CurrentFiltersProps): React.ReactElement => {
+const CurrentFilters = ({
+  dark,
+  filters,
+  interactiveFilters = {},
+}: CurrentFiltersProps): React.ReactElement => {
   const displayableFilters = omitBy(filters, hiddenFilters)
 
   return (
@@ -35,33 +45,50 @@ const CurrentFilters = ({ dark, filters }: CurrentFiltersProps): React.ReactElem
       { !isEmpty(filters) &&
         <div className="filters">
           <div className="left_gradient" />
-            {map(displayableFilters, (value, name) => (
-              <div
-                  className="filter"
-                  key={`filter-${name}`}
-              >
-                { value === true ?
-                <Title
-                    dark={dark}
-                    size={4}
-                    tag="h4"
-                    text={`${name}`}
-                /> :
-                <div>
-                  <Caption
-                      dark={dark}
-                      text={`${name}`}
-                  />
-                  <Title
-                      dark={dark}
-                      size={4}
-                      tag="h4"
-                      text={value}
-                  />
+            {map(displayableFilters, (value, name) => {
+              const interactiveConfig = interactiveFilters[name]
+              return (
+                <div
+                    className={`filter${interactiveConfig ? ' interactive' : ''}`}
+                    key={`filter-${name}`}
+                >
+                  { interactiveConfig ?
+                    <InteractiveFilter
+                        config={interactiveConfig}
+                        dark={dark}
+                        editorValue={interactiveConfig.editorValue}
+                        name={String(name)}
+                        value={
+                          interactiveConfig.value !== undefined
+                            ? interactiveConfig.value
+                            : value === true
+                              ? ''
+                              : (value as string)
+                        }
+                    /> :
+                    value === true ?
+                    <Title
+                        dark={dark}
+                        size={4}
+                        tag="h4"
+                        text={`${name}`}
+                    /> :
+                    <div>
+                      <Caption
+                          dark={dark}
+                          text={`${name}`}
+                      />
+                      <Title
+                          dark={dark}
+                          size={4}
+                          tag="h4"
+                          text={value}
+                      />
+                    </div>
+                  }
                 </div>
-                }
-              </div>
-            ))}
+              )
+            })}
           <div className="right_gradient" />
         </div>
       }

data/app/pb_kits/playbook/pb_filter/Filter/FilterDouble.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 
-import CurrentFilters, { FilterDescription } from './CurrentFilters'
+import CurrentFilters, { FilterDescription, InteractiveFilters } from './CurrentFilters'
 import FilterBackground, { FilterBackgroundProps } from './FilterBackground'
 import FiltersPopover from './FiltersPopover'
 import ResultsCount from './ResultsCount'
@@ -17,6 +17,7 @@ import SectionSeparator from '../../pb_section_separator/_section_separator'
 export type FilterDoubleProps = {
   children?: React.ReactChild[] | React.ReactChild,
   filters?: FilterDescription,
+  interactiveFilters?: InteractiveFilters,
   onSortChange?: SortingChangeCallback,
   results?: number,
   sortOptions?: SortOptions,
@@ -28,6 +29,7 @@ const FilterDouble = ({
   sortOptions,
   sortValue,
   filters,
+  interactiveFilters,
   results,
   children,
   dark,
@@ -57,6 +59,7 @@ const FilterDouble = ({
       <CurrentFilters
           dark={dark}
           filters={filters}
+          interactiveFilters={interactiveFilters}
       />
     </Flex>
     <SectionSeparator dark={dark} />

data/app/pb_kits/playbook/pb_filter/Filter/FilterSingle.tsx

@@ -3,7 +3,7 @@ import { isEmpty } from '../../utilities/object'
 
 import Flex from '../../pb_flex/_flex'
 
-import CurrentFilters, { FilterDescription } from './CurrentFilters'
+import CurrentFilters, { FilterDescription, InteractiveFilters } from './CurrentFilters'
 import FilterBackground, { FilterBackgroundProps } from './FilterBackground'
 import FiltersPopover from './FiltersPopover'
 import ResultsCount from './ResultsCount'
@@ -16,6 +16,7 @@ import SortMenu, {
 export type FilterSingleProps = {
   children?: React.ReactChild[] | React.ReactChild,
   filters?: FilterDescription,
+  interactiveFilters?: InteractiveFilters,
   onSortChange?: SortingChangeCallback,
   results?: number,
   sortOptions?: SortOptions,
@@ -27,6 +28,7 @@ const FilterSingle = ({
   sortOptions,
   sortValue,
   filters,
+  interactiveFilters,
   results,
   children,
   dark,
@@ -60,6 +62,7 @@ const FilterSingle = ({
             <CurrentFilters
                 dark={dark}
                 filters={filters}
+                interactiveFilters={interactiveFilters}
             />
           </>
         }

data/app/pb_kits/playbook/pb_filter/Filter/InteractiveFilter.tsx

@@ -0,0 +1,277 @@
+import React, { useEffect, useMemo, useRef, useState } from 'react'
+import flatpickr from 'flatpickr'
+import { Instance } from 'flatpickr/dist/types/instance'
+
+import Flex from '../../pb_flex/_flex'
+import Caption from '../../pb_caption/_caption'
+import Icon from '../../pb_icon/_icon'
+import PbReactPopover from '../../pb_popover/_popover'
+import getQuickPickOptions from '../../pb_dropdown/quickpick'
+import { uniqueId } from '../../utilities/object'
+import Title from '../../pb_title/_title'
+
+export type SelectInteractiveConfig = {
+  type: 'select',
+  options: { value: string, text?: string }[],
+  value?: string,
+  /** Draft value for the inline editor active state (chip label uses `value`). */
+  editorValue?: string,
+  onChange: (value: string) => void,
+}
+
+export type DropdownInteractiveConfig = {
+  type: 'dropdown',
+  options?: { value?: string, label: string, id?: string }[],
+  variant?: 'default' | 'quickpick',
+  rangeEndsToday?: boolean,
+  customQuickPickDates?: {
+    override?: boolean,
+    dates: {
+      label: string,
+      value: string[] | { timePeriod: string, amount: number },
+    }[],
+  },
+  value?: string,
+  editorValue?: string,
+  onChange: (value: string) => void,
+}
+
+export type DatePickerInteractiveConfig = {
+  type: 'date-picker',
+  value?: string,
+  editorValue?: string,
+  onChange: (value: string) => void,
+  format?: string,
+  minDate?: string,
+  maxDate?: string,
+  mode?: 'single' | 'range' | 'multiple',
+}
+
+export type InteractiveFilterConfig =
+  | SelectInteractiveConfig
+  | DropdownInteractiveConfig
+  | DatePickerInteractiveConfig
+
+const dropdownOptionsFor = (
+  config: DropdownInteractiveConfig
+): { value: string, label: string }[] => {
+  if (config.variant === 'quickpick' && !config.options?.length) {
+    return getQuickPickOptions(
+      config.rangeEndsToday,
+      config.customQuickPickDates
+    ).map((opt) => ({
+      value: opt.id || opt.label,
+      label: opt.label,
+    }))
+  }
+
+  return (config.options || []).map((opt) => ({
+    value: opt.id || opt.value || opt.label,
+    label: opt.label,
+  }))
+}
+
+type InteractiveFilterProps = {
+  dark?: boolean,
+  name: string,
+  value: string,
+  editorValue?: string,
+  config: InteractiveFilterConfig,
+}
+
+const labelFor = (
+  config: InteractiveFilterConfig,
+  value: string
+): string => {
+  if (config.type === 'select') {
+    const match = config.options.find((opt) => opt.value === value)
+    if (match) return match.text || match.value
+  }
+  if (config.type === 'dropdown') {
+    const match = dropdownOptionsFor(config).find((opt) => opt.value === value)
+    if (match) return match.label || match.value
+  }
+  return value
+}
+
+type ChipVisualProps = {
+  dark: boolean,
+  name: string,
+  displayValue: string,
+}
+
+const ChipVisual = ({
+  dark,
+  name,
+  displayValue,
+}: ChipVisualProps): React.ReactElement => (
+  <div className="pb_interactive_filter_container">
+    <Caption
+        dark={dark}
+        text={name}
+    />
+    <Flex
+        alignItems="center"
+        gap="xxs"
+    >
+      <Title
+          dark={dark}
+          size={4}
+          text={displayValue || '—'}
+      />
+      <Icon
+          color="primary"
+          fixedWidth
+          icon="angle-down"
+          size="xs"
+      />
+    </Flex>
+  </div>
+)
+
+type InlineCalendarProps = {
+  calendarValue: string,
+  config: DatePickerInteractiveConfig,
+  onSinglePick: () => void,
+}
+
+const InlineCalendar = ({
+  calendarValue,
+  config,
+  onSinglePick,
+}: InlineCalendarProps): React.ReactElement => {
+  const containerRef = useRef<HTMLDivElement | null>(null)
+
+  useEffect(() => {
+    if (!containerRef.current) return
+    const fp = flatpickr(containerRef.current, {
+      inline: true,
+      defaultDate: calendarValue || undefined,
+      mode: config.mode || 'single',
+      dateFormat: config.format || 'm/d/Y',
+      minDate: config.minDate,
+      maxDate: config.maxDate,
+      nextArrow: '<i class="far fa-angle-right"></i>',
+      prevArrow: '<i class="far fa-angle-left"></i>',
+      onChange: (_selectedDates, dateStr) => {
+        config.onChange(dateStr)
+        if ((config.mode || 'single') === 'single') onSinglePick()
+      },
+    }) as Instance
+    return () => fp.destroy()
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [calendarValue])
+
+  return <div ref={containerRef} />
+}
+
+const InteractiveFilter = ({
+  dark = false,
+  name,
+  value,
+  editorValue,
+  config,
+}: InteractiveFilterProps): React.ReactElement => {
+  const [open, setOpen] = useState(false)
+  const pickerId = useMemo(() => uniqueId('interactive-filter-date-'), [])
+  const displayValue = labelFor(config, value)
+  const activeValue =
+    editorValue ??
+    config.editorValue ??
+    value
+
+  const renderEditor = () => {
+    switch (config.type) {
+      case 'select':
+      case 'dropdown': {
+        const options =
+          config.type === 'dropdown'
+            ? dropdownOptionsFor(config)
+            : config.options.map((opt) => ({
+                value: opt.value,
+                label: opt.text || opt.value,
+              }))
+        return (
+          <ul
+              className="pb_interactive_filter_options"
+              role="listbox"
+          >
+            {options.map((option) => {
+              const isActive = option.value === activeValue
+              return (
+                <li
+                    aria-selected={isActive}
+                    className={`pb_interactive_filter_option${
+                      isActive ? ' active' : ''
+                    }`}
+                    key={option.value}
+                    onClick={() => {
+                      config.onChange(option.value)
+                      setOpen(false)
+                    }}
+                    onKeyDown={(event) => {
+                      if (event.key === 'Enter' || event.key === ' ') {
+                        event.preventDefault()
+                        config.onChange(option.value)
+                        setOpen(false)
+                      }
+                    }}
+                    role="option"
+                    tabIndex={0}
+                >
+                  <span>{option.label}</span>
+                </li>
+              )
+            })}
+          </ul>
+        )
+      }
+
+      case 'date-picker':
+        return (
+          <InlineCalendar
+              calendarValue={activeValue}
+              config={config}
+              onSinglePick={() => setOpen(false)}
+          />
+        )
+    }
+  }
+
+  const trigger = (
+    <button
+        aria-expanded={open}
+        aria-haspopup="dialog"
+        className={`pb_interactive_filter_trigger${dark ? ' dark' : ''}`}
+        data-picker-id={pickerId}
+        onClick={() => setOpen((prev) => !prev)}
+        type="button"
+    >
+      <ChipVisual
+          dark={dark}
+          displayValue={displayValue}
+          name={name}
+      />
+    </button>
+  )
+
+  return (
+    <PbReactPopover
+        closeOnClick="outside"
+        offset
+        placement="bottom-start"
+        reference={trigger}
+        shouldClosePopover={() => setOpen(false)}
+        show={open}
+        zIndex={10}
+    >
+      <div
+          className={`pb_interactive_filter_editor pb_interactive_filter_editor--${config.type}`}
+      >
+        {renderEditor()}
+      </div>
+    </PbReactPopover>
+  )
+}
+
+export default InteractiveFilter

data/app/pb_kits/playbook/pb_filter/_filter.scss

@@ -1,5 +1,6 @@
 @import "../tokens/spacing";
 @import "../tokens/colors";
+@import "../tokens/border_radius";
 
 .pb_filter_sort_menu {
   li {
@@ -70,6 +71,26 @@
       padding-right: $space_xs;
       border-right: 1px solid $border_light !important;
     }
+
+    .filter.interactive {
+      padding-top: 2px;
+      padding-bottom: 2px;
+    }
+  }
+
+  // Interactive filter chip: clickable button that opens a popover whose
+  // contents are the editor for that filter type.
+  .pb_interactive_filter_trigger {
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    border-radius: 4px;
+    text-align: left;
+
+    &:focus-visible {
+      outline: $primary solid 2px;
+      outline-offset: -1px;
+    }
   }
 
   .maskContainer::after {
@@ -103,4 +124,70 @@
       opacity:0;
     }
   }
-}
+}
+
+.pb_popover_tooltip.pb_interactive_filter_editor {
+  position: fixed;
+  top: 0;
+  left: 0;
+  margin: 0;
+}
+
+// Popover contents for an interactive filter.
+.pb_interactive_filter_editor {
+  min-width: 220px;
+
+  .pb_date_picker_kit {
+    margin-bottom: 0 !important;
+  }
+
+  // Select editor: option list. (Native HTML <select> can't be auto-opened
+  // without a user gesture in modern browsers, so we render options
+  // directly — one click on the chip = options visible.)
+  .pb_interactive_filter_options {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    border-radius: $border_rad_heavier;
+    border: 1px solid $border_light;
+    max-height: 280px;
+    overflow-y: auto;
+  }
+
+  .pb_interactive_filter_option {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: $space_xs;
+    padding: $space_xs $space_sm;
+    cursor: pointer;
+    font-size: $font_base;
+    color: $text_lt_default;
+    transition: background-color 0.15s ease;
+    border-bottom: 1px solid $border_light;
+    &:last-child {
+      border-bottom: none;
+    }
+
+    &:hover {
+      background-color: rgba($primary, 0.08);
+    }
+
+    &.active {
+      background-color: $primary;
+      color: $white;
+    }
+  }
+
+  &.pb_interactive_filter_editor--date-picker {
+    // flatpickr inline mode renders directly into our wrapper; suppress its
+    // own shadow since the popover already provides the floating surface.
+    .flatpickr-calendar {
+      box-shadow: none;
+    }
+    .flatpickr-calendar.inline {
+      position: static;
+      top: 0;
+    }
+  }
+}

data/app/pb_kits/playbook/pb_filter/docs/_filter_interactive.html.erb

@@ -0,0 +1,116 @@
+<%
+  territory_options = [
+    { value: "USA", label: "USA" },
+    { value: "Canada", label: "Canada" },
+    { value: "Brazil", label: "Brazil" },
+    { value: "Philippines", label: "Philippines" },
+  ]
+
+  status_options = [
+    { value: "open", label: "Open", id: "open" },
+    { value: "in_progress", label: "In progress", id: "in_progress" },
+    { value: "resolved", label: "Resolved", id: "resolved" },
+    { value: "closed", label: "Closed", id: "closed" },
+  ]
+
+  raw_example = params[:example]
+  example_params =
+    if raw_example.respond_to?(:permit)
+      raw_example.permit(:territory, :status, :date_range, :start_date)
+    else
+      raw_example || {}
+    end
+  current_territory = example_params[:territory].presence || "USA"
+  current_status    = example_params[:status].presence || "open"
+  current_date_range = example_params[:date_range].presence || "quickpick-this-week"
+  current_start     = example_params[:start_date].presence || "05/01/2026"
+  status_default    = status_options.find { |o| o[:value] == current_status }
+%>
+
+<%=
+  pb_rails("filter", props: {
+    id: "filter-interactive-demo",
+    min_width: "360px",
+    margin_bottom: "xl",
+    template: "default",
+    results: 546,
+    filters: [
+      { name: "Territory",  value: current_territory },
+      { name: "Status",     value: current_status },
+      { name: "Date range", value: current_date_range },
+      { name: "Start date", value: current_start },
+    ],
+    interactive_filters: [
+      {
+        name: "Territory",
+        type: "select",
+        options: territory_options,
+        target_input: "filter-interactive-territory",
+        auto_submit: true,
+      },
+      {
+        name: "Status",
+        type: "dropdown",
+        options: status_options,
+        target_input: "filter-interactive-status",
+        auto_submit: true,
+      },
+      {
+        name: "Date range",
+        type: "dropdown",
+        variant: "quickpick",
+        target_input: "filter-interactive-date-range",
+        auto_submit: true,
+      },
+      {
+        name: "Start date",
+        type: "date-picker",
+        target_input: "filter-interactive-start",
+        format: "m/d/Y",
+        auto_submit: true,
+      },
+    ],
+    sort_menu: [
+      { item: "Popularity", link: "?q[sorts]=managers_popularity+asc", active: true, direction: "desc" },
+    ],
+  }) do
+%>
+  <%= pb_rails("form", props: { form_system_options: { scope: :example, method: :get } }) do |form| %>
+    <%= pb_rails("select", props: {
+      label: "Territory",
+      name: "territory",
+      options: territory_options.map { |o| { value: o[:value], text: o[:label] } },
+      value: current_territory,
+      input_options: { id: "filter-interactive-territory" }
+    }) %>
+
+    <%= pb_rails("dropdown", props: {
+      id: "filter-interactive-status",
+      label: "Status",
+      name: "status",
+      options: status_options,
+      default_value: status_default,
+      margin_bottom: "sm",
+    }) %>
+
+    <%= pb_rails("dropdown", props: {
+      id: "filter-interactive-date-range",
+      label: "Date range",
+      name: "date_range",
+      variant: "quickpick",
+      margin_bottom: "sm",
+    }) %>
+
+    <%= pb_rails("date_picker", props: {
+      label: "Start date",
+      name: "start_date",
+      picker_id: "filter-interactive-start",
+      default_date: current_start,
+    }) %>
+
+    <%= form.actions do |action| %>
+      <%= action.submit props: { text: "Apply" } %>
+      <%= action.button props: { type: "reset", text: "Clear", variant: "secondary" } %>
+    <% end %>
+  <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_filter/docs/_filter_interactive.md

@@ -0,0 +1,12 @@
+Click an applied filter chip to edit it inline. `interactive_filters` supports:
+
+- `type: 'select'` / `'dropdown'`: pick from a list of options.
+- `type: 'date-picker'`: inline calendar. Supports `format`, `min_date`, `max_date`, and `mode`.
+
+Each entry needs a `target_input` that points to the form control it updates. For `select` and `date-picker`, use the input's `id`. For `dropdown`, use the Dropdown kit's `id`.
+
+For date ranges, use `type: 'dropdown'` with `variant: 'quickpick'`. The Filter kit generates the same quickpick options as Dropdown, so no `options` are needed. Values are quickpick ids, such as `quickpick-this-week`.
+
+Chip edits update the linked control inside the filter popover. Click **Apply** to submit, then pass the submitted values back into `filters` so chips re-render with the latest labels.
+
+Optional `auto_submit: true` on a chip entry submits the form immediately when a chip value is picked.