@arbidocs/blocks 0.4.87 → 0.4.89

package/dist/{chunk-2EI7NCUA.cjs → chunk-2CFW2ELM.cjs}

@@ -23,6 +23,7 @@ function FilterInput({
   hideFieldPicker = false,
   ariaLabel,
   onChange,
+  onSubmit,
   fields,
   onFieldsChange,
   filter,
@@ -54,6 +55,11 @@ function FilterInput({
             "aria-label": ariaLabel,
             value,
             onChange: (e) => onChange(e.target.value),
+            onKeyDown: onSubmit ? (e) => {
+              if (e.key !== "Enter") return;
+              e.preventDefault();
+              onSubmit(value);
+            } : void 0,
             placeholder: l.placeholder,
             "data-testid": chunkMHVNT4J3_cjs.testIdOr(testIds?.input, { testId: "facts-filter-input" }),
             className: ui.cn(
@@ -129,5 +135,5 @@ function FilterInput({
 exports.DEFAULT_FILTER_FIELDS = DEFAULT_FILTER_FIELDS;
 exports.DEFAULT_FILTER_INPUT_LABELS = DEFAULT_FILTER_INPUT_LABELS;
 exports.FilterInput = FilterInput;
-//# sourceMappingURL=chunk-2EI7NCUA.cjs.map
-//# sourceMappingURL=chunk-2EI7NCUA.cjs.map
+//# sourceMappingURL=chunk-2CFW2ELM.cjs.map
+//# sourceMappingURL=chunk-2CFW2ELM.cjs.map

package/dist/chunk-2CFW2ELM.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/shell/FilterInput.tsx"],"names":["jsx","cn","testIdOr","jsxs","Filter","Input","X","Popover","PopoverTrigger","SlidersHorizontal","PopoverContent","Command","CommandList","CommandGroup","CommandItem","Check"],"mappings":"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","file":"chunk-2CFW2ELM.cjs","sourcesContent":["/** Shared page filter with configurable searchable fields and optional quick-filter control. */\nimport type { ReactNode } from 'react'\nimport { X, Filter, SlidersHorizontal, Check } from 'lucide-react'\nimport {\n  Command,\n  CommandGroup,\n  CommandItem,\n  CommandList,\n  Input,\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n  cn,\n} from '@arbidocs/react/ui'\nimport { testIdOr } from '../chat/test-id'\n\nexport type FilterField = 'text' | 'labels'\n\nexport const DEFAULT_FILTER_FIELDS: { value: FilterField; label: string }[] = [\n  { value: 'text', label: 'Text' },\n  { value: 'labels', label: 'Labels' },\n]\n\nexport interface FilterInputLabels<Field extends string = FilterField> {\n  placeholder: string\n  clear: string\n  chooseFields: string\n  fieldsHeading: string\n  /** Display name per searchable field. */\n  fieldNames: Partial<Record<Field, string>>\n}\n\nexport const DEFAULT_FILTER_INPUT_LABELS: FilterInputLabels = {\n  placeholder: 'Filter...',\n  clear: 'Clear filter',\n  chooseFields: 'Choose fields to filter',\n  fieldsHeading: 'Filter fields',\n  fieldNames: { text: 'Text', labels: 'Labels' },\n}\n\nexport interface FilterInputTestIds<Field extends string = FilterField> {\n  root: string\n  quick: string\n  input: string\n  fieldsButton: string\n  field: (field: Field) => string\n}\n\nexport interface FilterInputProps<Field extends string = FilterField> {\n  fieldOptions?: { value: Field; label: string }[]\n  value: string\n  /** Lists with one searchable field need no field selector. */\n  hideFieldPicker?: boolean\n  ariaLabel?: string\n  onChange: (q: string) => void\n  /** Enter in the box (e.g. open the one match, or add what was typed). */\n  onSubmit?: (q: string) => void\n  fields: Field[]\n  onFieldsChange: (fields: Field[]) => void\n  /**\n   * The quick-filter dropdown trigger, embedded inside the input on the left\n   * (mirroring the Files search box). When absent, a static funnel icon shows.\n   */\n  filter?: ReactNode\n  /** Width classes for the box (default `w-44`). */\n  className?: string\n  /** No outline: a soft fill instead of the input border, for a header that is already ruled. */\n  borderless?: boolean\n  labels?: Partial<FilterInputLabels<Field>>\n  testIds?: Partial<FilterInputTestIds<Field>>\n}\n\nexport function FilterInput<Field extends string = FilterField>({\n  fieldOptions,\n  value,\n  hideFieldPicker = false,\n  ariaLabel,\n  onChange,\n  onSubmit,\n  fields,\n  onFieldsChange,\n  filter,\n  className,\n  borderless = false,\n  labels,\n  testIds,\n}: FilterInputProps<Field>) {\n  const l = { ...DEFAULT_FILTER_INPUT_LABELS, ...labels }\n  const options = fieldOptions ?? (DEFAULT_FILTER_FIELDS as { value: Field; label: string }[])\n  const toggleField = (field: Field) =>\n    onFieldsChange(fields.includes(field) ? fields.filter((f) => f !== field) : [...fields, field])\n\n  return (\n    <div\n      className={cn('flex min-w-0 items-center', className ?? 'w-44 pointer-coarse:w-56')}\n      data-testid={testIdOr(testIds?.root, { testId: 'facts-filter' })}\n    >\n      <div className=\"relative flex-1 min-w-0\">\n        {filter ? (\n          <div\n            className=\"absolute left-1 top-1/2 z-10 -translate-y-1/2\"\n            data-testid={testIdOr(testIds?.quick, { testId: 'facts-filter-quick' })}\n          >\n            {filter}\n          </div>\n        ) : (\n          <Filter className=\"pointer-events-none absolute left-2 top-1/2 size-3.5 -translate-y-1/2 text-muted-foreground\" />\n        )}\n        <Input\n          aria-label={ariaLabel}\n          value={value}\n          onChange={(e) => onChange(e.target.value)}\n          onKeyDown={\n            onSubmit\n              ? (e) => {\n                  if (e.key !== 'Enter') return\n                  e.preventDefault()\n                  onSubmit(value)\n                }\n              : undefined\n          }\n          placeholder={l.placeholder}\n          data-testid={testIdOr(testIds?.input, { testId: 'facts-filter-input' })}\n          className={cn(\n            'h-7 pr-12 text-sm shadow-none focus-visible:ring-0 pointer-coarse:h-11 pointer-coarse:pr-12',\n            // Touch: the 44px clear button only needs its room while there is text to clear, so\n            // an empty field keeps space for its placeholder on a phone.\n            value && 'pointer-coarse:pr-24',\n            borderless\n              ? 'border-transparent bg-muted/50 hover:bg-muted focus-visible:bg-muted'\n              : 'border-input bg-background',\n            filter ? 'pl-11' : 'pl-7',\n            hideFieldPicker && 'pr-7 pointer-coarse:pr-11'\n          )}\n        />\n        {value && (\n          <button\n            type=\"button\"\n            onClick={() => onChange('')}\n            aria-label={l.clear}\n            className={cn(\n              'absolute top-1/2 z-10 -translate-y-1/2 text-muted-foreground hover:text-foreground pointer-coarse:flex pointer-coarse:size-11 pointer-coarse:items-center pointer-coarse:justify-center',\n              hideFieldPicker\n                ? 'right-1.5 pointer-coarse:right-0'\n                : 'right-7 pointer-coarse:right-11'\n            )}\n          >\n            <X className=\"size-3\" />\n          </button>\n        )}\n        {/* Field picker — inside the input on the right, muted, exactly as the\n            Files search box renders it. */}\n        {!hideFieldPicker && (\n          <Popover>\n            <PopoverTrigger asChild>\n              <button\n                type=\"button\"\n                aria-label={l.chooseFields}\n                data-testid={testIdOr(testIds?.fieldsButton, {\n                  testId: 'facts-filter-fields-button',\n                })}\n                className=\"absolute right-1.5 top-1/2 z-10 -translate-y-1/2 !h-5 !w-5 !p-0 text-muted-foreground/60 transition-colors hover:text-foreground pointer-coarse:right-0 pointer-coarse:!flex pointer-coarse:!h-11 pointer-coarse:!w-11 pointer-coarse:items-center pointer-coarse:justify-center\"\n              >\n                <SlidersHorizontal className=\"size-3.5\" />\n              </button>\n            </PopoverTrigger>\n            <PopoverContent className=\"w-44 p-0\" align=\"end\" sideOffset={4}>\n              <Command shouldFilter={false}>\n                <CommandList>\n                  <CommandGroup heading={l.fieldsHeading}>\n                    {options.map((option) => {\n                      const isSelected = fields.includes(option.value)\n                      return (\n                        <CommandItem\n                          key={option.value}\n                          onSelect={() => toggleField(option.value)}\n                          className=\"cursor-pointer text-sm\"\n                          data-testid={testIdOr(testIds?.field?.(option.value), {\n                            testId: `facts-filter-field-${option.value}`,\n                          })}\n                        >\n                          <div\n                            className={cn(\n                              'mr-2 flex size-3.5 items-center justify-center rounded-sm border border-primary',\n                              isSelected\n                                ? 'bg-primary text-primary-foreground'\n                                : 'opacity-50 [&_svg]:invisible'\n                            )}\n                          >\n                            <Check className=\"size-3\" />\n                          </div>\n                          {labels?.fieldNames?.[option.value] ?? option.label}\n                        </CommandItem>\n                      )\n                    })}\n                  </CommandGroup>\n                </CommandList>\n              </Command>\n            </PopoverContent>\n          </Popover>\n        )}\n      </div>\n    </div>\n  )\n}\n"]}