@proteos/ui 0.31.0

package/src/components/record-filter/record-filter-builder-panel.tsx

@@ -0,0 +1,236 @@
+import { cn } from '../../lib/cn'
+import { SegmentedControl } from '../segmented-control/segmented-control'
+import { type FilterValueInputRenderer, RenderValueInputProvider } from './filter-value-input'
+import { RecordFilterEditor } from './record-filter-editor'
+import type { FilterField, FilterGroup, LogicalOperator } from './types'
+
+/* =========================================================================
+   RecordFilterBuilderPanel — the popover panel content for the Filter
+   button. Composition:
+
+     [Header  joiner-segmented (≥2 rows) ··· Expand-inline · ×Close]
+     [Body    one FilterRow per element, plus optional pending row]
+     [Add     "+ Add filter" appends a new row in-place]
+     [Footer  Clear all  ·  Save view · Done]
+
+   "+ Add filter" appends a row with `field: ''`. That row's first cell
+   is an auto-focused inline AttributePicker (Combobox) with the dropdown
+   open — exactly one click to start picking. The other cells (operator,
+   value, remove) only appear once a field is chosen.
+   ========================================================================= */
+
+export type RecordFilterBuilderPanelProps = {
+  /** Display label shown in the header when fewer than 2 rows exist. */
+  entityLabel?: string
+  fields: ReadonlyArray<FilterField>
+  filter: FilterGroup
+  onChange: (next: FilterGroup) => void
+  onClose: () => void
+  /** Optional "Save as view" affordance. Hidden when not provided. */
+  onSaveView?: () => void
+  /** Optional "Expand inline" affordance — surface chips outside the popover. */
+  onExpand?: () => void
+  showFieldIcons?: boolean
+  showJoinerToggle?: boolean
+  /** Opt-in to nested-group affordances: "+ Add group" button, "Wrap in
+   *  group" hover icon on leaves, and rendering of any sub-groups in the
+   *  filter tree. Defaults to `false` for back-compat. */
+  isComplexEnabled?: boolean
+  /** Optional override for the value editor. Forwarded to RecordFilterEditor. */
+  renderValueInput?: FilterValueInputRenderer
+}
+
+export function RecordFilterBuilderPanel({
+  entityLabel,
+  fields,
+  filter,
+  onChange,
+  onClose,
+  onSaveView,
+  onExpand,
+  showFieldIcons = true,
+  showJoinerToggle = true,
+  isComplexEnabled = false,
+  renderValueInput,
+}: RecordFilterBuilderPanelProps) {
+  const elements = filter.elements ?? []
+  const subgroups = filter.groups ?? []
+
+  const setJoiner = (next: LogicalOperator) => onChange({ ...filter, logicalOperator: next })
+
+  const clearAll = () => {
+    onChange({ ...filter, elements: [], groups: [] })
+  }
+
+  const totalChildren = elements.length + (isComplexEnabled ? subgroups.length : 0)
+  const showJoinerSegment = showJoinerToggle && totalChildren >= 2
+
+  return (
+    <RenderValueInputProvider renderer={renderValueInput}>
+    <div
+      className="w-[min(640px,92vw)] flex flex-col"
+      onKeyDown={(e) => {
+        // Cmd/Ctrl+Enter anywhere in the panel = "save & close" (Done
+        // equivalent). Plain Enter on a value Input is handled per-row in
+        // FilterRow's value-cell wrapper. Escape is handled by RAC's Dialog.
+        if ((e.metaKey || e.ctrlKey) && e.key === 'Enter') {
+          e.preventDefault()
+          onClose()
+        }
+      }}
+    >
+      {/* Header */}
+      <div className="flex items-center justify-between px-3.5 py-2.5 border-b border-rule">
+        <div className="flex items-center gap-2.5">
+          {showJoinerSegment ? (
+            <SegmentedControl<LogicalOperator>
+              aria-label="Joiner"
+              options={[
+                { id: 'and', label: 'AND' },
+                { id: 'or', label: 'OR' },
+              ]}
+              value={filter.logicalOperator}
+              onChange={setJoiner}
+            />
+          ) : (
+            <>
+              <span className="font-mono text-[10.5px] uppercase tracking-[0.08em] text-ink-4">
+                Filters
+              </span>
+              {entityLabel ? (
+                <>
+                  <span className="font-mono text-[11px] text-ink-3">·</span>
+                  <span className="font-mono text-[11px] text-ink-3">{entityLabel}</span>
+                </>
+              ) : null}
+            </>
+          )}
+        </div>
+        <div className="flex items-center gap-1.5">
+          {onExpand ? (
+            <button
+              type="button"
+              onClick={onExpand}
+              title="Show filter chips inline above the table"
+              className={cn(
+                'inline-flex items-center gap-1 px-2 py-1 rounded-sm',
+                'font-mono text-[11.5px] text-ink-3 hover:text-ink hover:bg-surface-2',
+                'cursor-pointer outline-none',
+              )}
+            >
+              <svg
+                aria-hidden
+                viewBox="0 0 12 12"
+                className="size-3"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="1.5"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              >
+                <path d="m3 3 3 3-3 3M7 3l3 3-3 3" />
+              </svg>
+              Expand inline
+            </button>
+          ) : null}
+          <button
+            type="button"
+            onClick={onClose}
+            aria-label="Close"
+            className={cn(
+              'size-6 inline-flex items-center justify-center rounded-sm',
+              'text-ink-3 hover:text-ink hover:bg-surface-2 cursor-pointer outline-none',
+            )}
+          >
+            <svg
+              aria-hidden
+              viewBox="0 0 12 12"
+              className="size-3"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="1.4"
+              strokeLinecap="round"
+            >
+              <path d="M3 3l6 6M9 3l-6 6" />
+            </svg>
+          </button>
+        </div>
+      </div>
+
+      {/* Body */}
+      <div className="px-2 py-2 max-h-[420px] overflow-auto">
+        <RecordFilterEditor
+          fields={fields}
+          filter={filter}
+          onChange={onChange}
+          isComplexEnabled={isComplexEnabled}
+          showFieldIcons={showFieldIcons}
+          showJoinerToggle={showJoinerToggle}
+        />
+      </div>
+
+      {/* Footer */}
+      <div
+        className={cn(
+          'flex items-center justify-between px-3.5 py-2.5 border-t border-rule rounded-b-md',
+          'bg-[color-mix(in_oklab,var(--color-surface-2)_60%,var(--color-surface))]',
+        )}
+      >
+        <button
+          type="button"
+          onClick={clearAll}
+          disabled={totalChildren === 0}
+          className={cn(
+            'font-mono text-[11.5px] text-ink-3 hover:text-ink',
+            'disabled:opacity-40 disabled:pointer-events-none',
+            'outline-none cursor-pointer',
+          )}
+        >
+          Clear all
+        </button>
+        <div className="flex items-center gap-1.5">
+          {onSaveView ? (
+            <button
+              type="button"
+              onClick={onSaveView}
+              disabled={totalChildren === 0}
+              className={cn(
+                'inline-flex items-center gap-1.5 px-2.5 py-1.5 rounded-sm',
+                'font-sans text-[13px] text-ink-2 hover:bg-surface-2 hover:text-ink',
+                'disabled:opacity-40 disabled:pointer-events-none',
+                'outline-none cursor-pointer',
+              )}
+            >
+              <svg
+                aria-hidden
+                viewBox="0 0 14 14"
+                className="size-3"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="1.4"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              >
+                <path d="M3 2h7l2 2v8a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1z" />
+                <path d="M5 2v3h4V2" />
+              </svg>
+              Save as view
+            </button>
+          ) : null}
+          <button
+            type="button"
+            onClick={onClose}
+            className={cn(
+              'inline-flex items-center gap-1.5 px-3 py-1.5 rounded-sm',
+              'bg-ink text-surface font-mono text-[12px]',
+              'hover:bg-accent-ink outline-none cursor-pointer',
+            )}
+          >
+            Done
+          </button>
+        </div>
+      </div>
+    </div>
+    </RenderValueInputProvider>
+  )
+}

package/src/components/record-filter/record-filter-button.tsx

@@ -0,0 +1,126 @@
+import { useRef, useState } from 'react'
+import { cn } from '../../lib/cn'
+import { PopoverContent } from '../popover/popover'
+import { type FilterValueInputRenderer, RenderValueInputProvider } from './filter-value-input'
+import { countLeaves } from './group-mutations'
+import { RecordFilterBuilderPanel } from './record-filter-builder-panel'
+import { useShowDetails } from './show-details-store'
+import type { FilterField, FilterGroup } from './types'
+
+/* =========================================================================
+   RecordFilterButton — the inline trigger that opens the builder popover.
+   Sized to sit on the same row as other table actions (Columns / Sort /
+   New customer). When the chips row is expanded AND has at least one
+   active filter, this button hides itself — the chip row is the single
+   source of UI in that mode.
+   ========================================================================= */
+
+export type RecordFilterButtonProps = {
+  /** Display label shown in the builder header. */
+  entityLabel?: string
+  fields: ReadonlyArray<FilterField>
+  filter: FilterGroup
+  onChange: (next: FilterGroup) => void
+  showFieldIcons?: boolean
+  showJoinerToggle?: boolean
+  /** Optional save-as-view affordance forwarded to the builder. */
+  onSaveView?: () => void
+  /** localStorage key shared with `RecordFilterChips`. */
+  storageKey?: string
+  /** Opt-in to nested-group affordances inside the builder popover. Defaults
+   *  to `false` for back-compat. Forwarded to `RecordFilterBuilderPanel`. */
+  isComplexEnabled?: boolean
+  /** Optional override for the value editor. Forwarded to the builder panel. */
+  renderValueInput?: FilterValueInputRenderer
+}
+
+export function RecordFilterButton({
+  entityLabel,
+  fields,
+  filter,
+  onChange,
+  showFieldIcons = true,
+  showJoinerToggle = true,
+  onSaveView,
+  storageKey,
+  isComplexEnabled = false,
+  renderValueInput,
+}: RecordFilterButtonProps) {
+  const ref = useRef<HTMLSpanElement>(null)
+  const [open, setOpen] = useState(false)
+  const [showDetails, toggleDetails] = useShowDetails(storageKey)
+
+  const filterCount = countLeaves(filter)
+  const hasFilters = filterCount > 0
+
+  // Expanded mode hides the Filter button entirely — the chip row is the
+  // single source of UI in that mode (+ Add pill is the entry point).
+  if (showDetails) return null
+
+  return (
+    <RenderValueInputProvider renderer={renderValueInput}>
+      <span ref={ref} className="inline-flex">
+        <button
+          type="button"
+          data-filter-trigger="collapsed"
+          onClick={() => setOpen((v) => !v)}
+          className={cn(
+            'inline-flex items-center gap-1.5 px-3 py-1.5 rounded-md border',
+            'font-mono text-[12px] cursor-pointer outline-none',
+            'focus-visible:shadow-[var(--shadow-focus)]',
+            hasFilters
+              ? cn(
+                  'border-[color-mix(in_oklab,var(--color-accent)_35%,var(--color-rule))]',
+                  'bg-[color-mix(in_oklab,var(--color-accent)_8%,var(--color-surface))]',
+                  'text-accent-ink',
+                )
+              : 'border-rule bg-surface text-ink-2 hover:border-ink-4 hover:text-ink',
+          )}
+        >
+          <svg
+            aria-hidden
+            viewBox="0 0 14 14"
+            className="size-3"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="1.4"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          >
+            <path d="M2 3h10M4 7h6M6 11h2" />
+          </svg>
+          Filter
+          {hasFilters ? (
+            <span className="font-mono text-[10.5px] px-1.5 py-px rounded-pill bg-accent text-surface">
+              {filterCount}
+            </span>
+          ) : null}
+        </button>
+      </span>
+
+      <PopoverContent
+        triggerRef={ref}
+        isOpen={open}
+        onOpenChange={setOpen}
+        placement="bottom start"
+        panelClassName="p-0 bg-bg"
+      >
+        <RecordFilterBuilderPanel
+          {...(entityLabel ? { entityLabel } : {})}
+          fields={fields}
+          filter={filter}
+          onChange={onChange}
+          onClose={() => setOpen(false)}
+          {...(onSaveView ? { onSaveView } : {})}
+          onExpand={() => {
+            if (!showDetails) toggleDetails()
+            setOpen(false)
+          }}
+          showFieldIcons={showFieldIcons}
+          showJoinerToggle={showJoinerToggle}
+          isComplexEnabled={isComplexEnabled}
+        />
+      </PopoverContent>
+    </RenderValueInputProvider>
+  )
+}