playbook_ui 16.9.0 → 16.10.0.pre.alpha.PLAY3053advancedtablebottompinnedrowsreact17469

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

@@ -1 +1,28 @@
+type SortValue = {
+  name: string,
+  dir: "asc" | "desc",
+}
+
+/**
+ * React prop schema source for `yarn generate:ai-metadata`.
+ * The Filter implementation lives under ./Filter, but the metadata generator
+ * only parses root kit files shaped like `type XProps = { ... }`.
+ */
+export type FilterProps = {
+  background?: boolean,
+  double?: boolean,
+  filters?: Record<string, unknown>,
+  isCollapsed?: boolean,
+  maxHeight?: string,
+  minWidth?: string,
+  onCollapse?: () => void,
+  onSortChange?: (value: SortValue[]) => void,
+  placement?: "top" | "bottom" | "left" | "right" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end",
+  popoverProps?: Record<string, unknown>,
+  results?: number,
+  sortOptions?: Record<string, unknown>,
+  sortValue?: SortValue[],
+  variant?: string,
+}
+
 export { default } from './Filter'

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.

data/app/pb_kits/playbook/pb_filter/docs/_filter_interactive_react.jsx

@@ -0,0 +1,153 @@
+import React, { useState } from "react";
+
+import Filter from "../_filter";
+
+import Button from "../../pb_button/_button";
+import DatePicker from "../../pb_date_picker/_date_picker";
+import Dropdown from "../../pb_dropdown/_dropdown";
+import Flex from "../../pb_flex/_flex";
+import Select from "../../pb_select/_select";
+
+const territorySelectOptions = [
+  { value: "USA" },
+  { value: "Canada" },
+  { value: "Brazil" },
+  { value: "Philippines" },
+];
+
+const statusDropdownOptions = [
+  { id: "open", label: "Open", value: "open" },
+  { id: "in_progress", label: "In progress", value: "in_progress" },
+  { id: "resolved", label: "Resolved", value: "resolved" },
+  { id: "closed", label: "Closed", value: "closed" },
+];
+
+const INITIAL_FILTERS = {
+  territory: "USA",
+  status: "open",
+  dateRange: "quickpick-this-week",
+  startDate: "05/01/2026",
+};
+
+const statusOptionForValue = (value) =>
+  value
+    ? statusDropdownOptions.find((opt) => opt.value === value)
+    : undefined;
+
+const FilterInteractive = (props) => {
+  const [filters, setFilters] = useState(INITIAL_FILTERS);
+
+  const updateFilter = (key) => (value) =>
+    setFilters((prev) => ({ ...prev, [key]: value }));
+
+  const handleClear = () => {
+    setFilters(INITIAL_FILTERS);
+  };
+
+  return (
+    <Filter
+        {...props}
+        filters={{
+          Territory: filters.territory,
+          Status: filters.status,
+          "Date range": filters.dateRange,
+          "Start date": filters.startDate,
+        }}
+        interactiveFilters={{
+          Territory: {
+            type: "select",
+            options: territorySelectOptions,
+            value: filters.territory,
+            onChange: updateFilter("territory"),
+          },
+          Status: {
+            type: "dropdown",
+            options: statusDropdownOptions,
+            value: filters.status,
+            onChange: updateFilter("status"),
+          },
+          "Date range": {
+            type: "dropdown",
+            variant: "quickpick",
+            value: filters.dateRange,
+            onChange: updateFilter("dateRange"),
+          },
+          "Start date": {
+            type: "date-picker",
+            value: filters.startDate,
+            onChange: updateFilter("startDate"),
+            format: "m/d/Y",
+          },
+        }}
+        minWidth="360px"
+        results={546}
+        sortOptions={{
+          popularity: "Popularity",
+        }}
+        sortValue={[{ name: "popularity", dir: "desc" }]}
+    >
+      {({ closePopover }) => (
+        <form>
+          <Select
+              {...props}
+              label="Territory"
+              name="location"
+              onChange={(e) => updateFilter("territory")(e.target.value)}
+              options={territorySelectOptions}
+              value={filters.territory}
+          />
+          <Dropdown
+              {...props}
+              blankSelection="Select status..."
+              defaultValue={statusOptionForValue(filters.status)}
+              key={filters.status || "cleared"}
+              label="Status"
+              marginBottom="sm"
+              onSelect={(option) =>
+                updateFilter("status")(option ? option.value : "")
+              }
+              options={statusDropdownOptions}
+          />
+
+          <Dropdown
+              {...props}
+              key={filters.dateRange || "cleared"}
+              label="Date range"
+              marginBottom="sm"
+              onSelect={(option) =>
+                updateFilter("dateRange")(option ? option.id : "")
+              }
+              variant="quickpick"
+          />
+
+          <DatePicker
+              {...props}
+              inputValue={filters.startDate}
+              label="Start date"
+              onChange={updateFilter("startDate")}
+              pickerId="filter-panel-start-date"
+          />
+
+          <Flex
+              {...props}
+              spacing="between"
+          >
+            <Button
+                {...props}
+                onClick={closePopover}
+                text="Apply"
+            />
+            <Button
+                {...props}
+                onClick={handleClear}
+                text="Clear"
+                variant="secondary"
+            />
+          </Flex>
+        </form>
+      )}
+    </Filter>
+  );
+};
+
+export default FilterInteractive;

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

@@ -0,0 +1,10 @@
+Click an applied filter chip to edit it inline. `interactiveFilters` supports:
+
+- `type: 'select'` / `'dropdown'`: pick from a list of options.
+- `type: 'date-picker'`: inline calendar. Supports `format`, `minDate`, `maxDate`, and `mode`.
+
+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`.
+
+Keep `filters`, `interactiveFilters.value`, and the filter popover fields backed by the same state so chip labels and form controls stay in sync.
+
+On Rails, pass `interactive_filters` with `target_input` so chip picks update the linked form control. Re-read submitted params in your view after Apply so `filters` reflects the new values.