@lattice-php/lattice 0.30.0 → 0.31.0

package/dist/table/components/cells/text-cell.js.map

@@ -1 +1 @@
-{"version":3,"file":"text-cell.js","names":[],"sources":["../../../../resources/js/table/components/cells/text-cell.tsx"],"sourcesContent":["import { DateTime } from \"@lattice-php/lattice/i18n\";\nimport { Badge } from \"@lattice-php/lattice/ui/badge\";\nimport type { ReactNode } from \"react\";\nimport { formatCell, resolveLink } from \"@lattice-php/lattice/table/lib/format\";\nimport type { ColumnCellArgs, ColumnCellComponent } from \"@lattice-php/lattice/table/registry\";\nimport type { ColumnPropsOf } from \"@lattice-php/lattice/table/types\";\nimport { CopyableCell } from \"./copyable-cell\";\n\ntype TextProps = ColumnCellArgs<\"column.text\">[\"props\"];\n\nexport const TextCell: ColumnCellComponent<\"column.text\"> = (args) => {\n  if (args.props.multiple) {\n    return <MultipleCell {...args} />;\n  }\n\n  if (args.props.badge) {\n    return <SingleBadgeCell {...args} />;\n  }\n\n  return <PlainTextCell {...args} />;\n};\n\nfunction TextBadge({ label, color }: { label: string; color?: string | null }): ReactNode {\n  if (label === \"\") {\n    return null;\n  }\n\n  return <Badge color={color}>{label}</Badge>;\n}\n\nfunction MultipleCell({ column, props, value }: ColumnCellArgs<\"column.text\">): ReactNode {\n  const items = Array.isArray(value) ? value : [];\n\n  if (items.length === 0) {\n    return null;\n  }\n\n  if (!props.badge) {\n    return <span>{items.map((item) => formatCell(item, column)).join(\", \")}</span>;\n  }\n\n  return (\n    <div className=\"flex flex-wrap gap-1\">\n      {items.map((item, index) => {\n        const chip = item as { value: unknown; color?: string };\n\n        return <TextBadge key={index} label={formatCell(chip.value, column)} color={chip.color} />;\n      })}\n    </div>\n  );\n}\n\nfunction SingleBadgeCell({ column, props, row, value }: ColumnCellArgs<\"column.text\">): ReactNode {\n  const colorKey = (props.badge as NonNullable<TextProps[\"badge\"]>).colorKey;\n\n  return <TextBadge label={formatCell(value, column)} color={String(row[colorKey] ?? \"\")} />;\n}\n\nfunction PlainTextCell({ column, props, row, value }: ColumnCellArgs<\"column.text\">): ReactNode {\n  const dateProps = (column.props as ColumnPropsOf<\"column.text\">).date;\n  const href = resolveLink(column, row, value);\n  const text = formatCell(value, column);\n\n  const content = href ? (\n    <a\n      className=\"underline underline-offset-2\"\n      href={href}\n      rel={props.link?.external ? \"noreferrer\" : undefined}\n      target={props.link?.external ? \"_blank\" : undefined}\n    >\n      {text}\n    </a>\n  ) : (\n    text\n  );\n\n  if (dateProps && !href && !props.copyable && value !== null && value !== undefined) {\n    return (\n      <DateTime value={value} dateStyle={dateProps.dateStyle} timeStyle={dateProps.timeStyle} />\n    );\n  }\n\n  return (\n    <CopyableCell column={column} copyable={props.copyable} value={text}>\n      {content}\n    </CopyableCell>\n  );\n}\n"],"mappings":";;;;;;AAUA,IAAa,YAAgD,SAAS;CACpE,IAAI,KAAK,MAAM,UACb,OAAO,oBAAC,cAAD,EAAc,GAAI,KAAO,CAAA;CAGlC,IAAI,KAAK,MAAM,OACb,OAAO,oBAAC,iBAAD,EAAiB,GAAI,KAAO,CAAA;CAGrC,OAAO,oBAAC,eAAD,EAAe,GAAI,KAAO,CAAA;AACnC;AAEA,SAAS,UAAU,EAAE,OAAO,SAA8D;CACxF,IAAI,UAAU,IACZ,OAAO;CAGT,OAAO,oBAAC,OAAD;EAAc;YAAQ;CAAa,CAAA;AAC5C;AAEA,SAAS,aAAa,EAAE,QAAQ,OAAO,SAAmD;CACxF,MAAM,QAAQ,MAAM,QAAQ,KAAK,IAAI,QAAQ,CAAC;CAE9C,IAAI,MAAM,WAAW,GACnB,OAAO;CAGT,IAAI,CAAC,MAAM,OACT,OAAO,oBAAC,QAAD,EAAA,UAAO,MAAM,KAAK,SAAS,WAAW,MAAM,MAAM,CAAC,EAAE,KAAK,IAAI,EAAQ,CAAA;CAG/E,OACE,oBAAC,OAAD;EAAK,WAAU;YACZ,MAAM,KAAK,MAAM,UAAU;GAC1B,MAAM,OAAO;GAEb,OAAO,oBAAC,WAAD;IAAuB,OAAO,WAAW,KAAK,OAAO,MAAM;IAAG,OAAO,KAAK;GAAQ,GAAlE,KAAkE;EAC3F,CAAC;CACE,CAAA;AAET;AAEA,SAAS,gBAAgB,EAAE,QAAQ,OAAO,KAAK,SAAmD;CAChG,MAAM,WAAY,MAAM,MAA0C;CAElE,OAAO,oBAAC,WAAD;EAAW,OAAO,WAAW,OAAO,MAAM;EAAG,OAAO,OAAO,IAAI,aAAa,EAAE;CAAI,CAAA;AAC3F;AAEA,SAAS,cAAc,EAAE,QAAQ,OAAO,KAAK,SAAmD;CAC9F,MAAM,YAAa,OAAO,MAAuC;CACjE,MAAM,OAAO,YAAY,QAAQ,KAAK,KAAK;CAC3C,MAAM,OAAO,WAAW,OAAO,MAAM;CAErC,MAAM,UAAU,OACd,oBAAC,KAAD;EACE,WAAU;EACJ;EACN,KAAK,MAAM,MAAM,WAAW,eAAe,KAAA;EAC3C,QAAQ,MAAM,MAAM,WAAW,WAAW,KAAA;YAEzC;CACA,CAAA,IAEH;CAGF,IAAI,aAAa,CAAC,QAAQ,CAAC,MAAM,YAAY,UAAU,QAAQ,UAAU,KAAA,GACvE,OACE,oBAAC,UAAD;EAAiB;EAAO,WAAW,UAAU;EAAW,WAAW,UAAU;CAAY,CAAA;CAI7F,OACE,oBAAC,cAAD;EAAsB;EAAQ,UAAU,MAAM;EAAU,OAAO;YAC5D;CACW,CAAA;AAElB"}
+{"version":3,"file":"text-cell.js","names":[],"sources":["../../../../resources/js/table/components/cells/text-cell.tsx"],"sourcesContent":["import { DateTime } from \"@lattice-php/lattice/i18n\";\nimport { Badge } from \"@lattice-php/lattice/ui/badge\";\nimport type { ReactNode } from \"react\";\nimport { formatCell, resolveLink } from \"@lattice-php/lattice/table/lib/format\";\nimport type { ColumnCellArgs, ColumnCellComponent } from \"@lattice-php/lattice/table/registry\";\nimport type { ColumnPropsOf } from \"@lattice-php/lattice/table/types\";\nimport { CopyableCell } from \"./copyable-cell\";\n\ntype TextProps = ColumnCellArgs<\"column.text\">[\"props\"];\n\nexport const TextCell: ColumnCellComponent<\"column.text\"> = (args) => {\n  if (args.props.multiple) {\n    return <MultipleCell {...args} />;\n  }\n\n  if (args.props.badge) {\n    return <SingleBadgeCell {...args} />;\n  }\n\n  return <PlainTextCell {...args} />;\n};\n\nfunction TextBadge({ label, color }: { label: string; color?: string | null }): ReactNode {\n  if (label === \"\") {\n    return null;\n  }\n\n  return <Badge color={color}>{label}</Badge>;\n}\n\nfunction MultipleCell({ column, props, value }: ColumnCellArgs<\"column.text\">): ReactNode {\n  const items = Array.isArray(value) ? value : [];\n\n  if (items.length === 0) {\n    return null;\n  }\n\n  if (!props.badge) {\n    return <span>{items.map((item) => formatCell(item, column)).join(\", \")}</span>;\n  }\n\n  return (\n    <div className=\"flex flex-wrap gap-1\">\n      {items.map((item, index) => {\n        const chip = item as { value: unknown; color?: string };\n\n        return <TextBadge key={index} label={formatCell(chip.value, column)} color={chip.color} />;\n      })}\n    </div>\n  );\n}\n\nfunction SingleBadgeCell({ column, props, row, value }: ColumnCellArgs<\"column.text\">): ReactNode {\n  const colorKey = (props.badge as NonNullable<TextProps[\"badge\"]>).colorKey;\n\n  return <TextBadge label={formatCell(value, column)} color={String(row[colorKey] ?? \"\")} />;\n}\n\nfunction PlainTextCell({ column, props, row, value }: ColumnCellArgs<\"column.text\">): ReactNode {\n  const dateProps = (column.props as ColumnPropsOf<\"column.text\">).date;\n  const href = resolveLink(column, row, value);\n  const text = formatCell(value, column);\n\n  const content = href ? (\n    <a\n      className=\"underline underline-offset-2\"\n      href={href}\n      rel={props.link?.external ? \"noreferrer\" : undefined}\n      target={props.link?.external ? \"_blank\" : undefined}\n    >\n      {text}\n    </a>\n  ) : (\n    text\n  );\n\n  if (dateProps && !href && !props.copyable && value !== null && value !== undefined) {\n    return (\n      <DateTime value={value} dateStyle={dateProps.dateStyle} timeStyle={dateProps.timeStyle} />\n    );\n  }\n\n  return (\n    <CopyableCell column={column} copyable={props.copyable} value={text}>\n      {content}\n    </CopyableCell>\n  );\n}\n"],"mappings":";;;;;;AAUA,IAAa,YAAgD,SAAS;CACpE,IAAI,KAAK,MAAM,UACb,OAAO,oBAAC,cAAD,EAAc,GAAI,KAAO,CAAA;CAGlC,IAAI,KAAK,MAAM,OACb,OAAO,oBAAC,iBAAD,EAAiB,GAAI,KAAO,CAAA;CAGrC,OAAO,oBAAC,eAAD,EAAe,GAAI,KAAO,CAAA;AACnC;AAEA,SAAS,UAAU,EAAE,OAAO,SAA8D;CACxF,IAAI,UAAU,IACZ,OAAO;CAGT,OAAO,oBAAC,OAAD;EAAc;EAAQ,UAAA;CAAa,CAAA;AAC5C;AAEA,SAAS,aAAa,EAAE,QAAQ,OAAO,SAAmD;CACxF,MAAM,QAAQ,MAAM,QAAQ,KAAK,IAAI,QAAQ,CAAC;CAE9C,IAAI,MAAM,WAAW,GACnB,OAAO;CAGT,IAAI,CAAC,MAAM,OACT,OAAO,oBAAC,QAAD,EAAA,UAAO,MAAM,KAAK,SAAS,WAAW,MAAM,MAAM,CAAC,CAAC,CAAC,KAAK,IAAI,EAAQ,CAAA;CAG/E,OACE,oBAAC,OAAD;EAAK,WAAU;EACZ,UAAA,MAAM,KAAK,MAAM,UAAU;GAC1B,MAAM,OAAO;GAEb,OAAO,oBAAC,WAAD;IAAuB,OAAO,WAAW,KAAK,OAAO,MAAM;IAAG,OAAO,KAAK;GAAQ,GAAlE,KAAkE;EAC3F,CAAC;CACE,CAAA;AAET;AAEA,SAAS,gBAAgB,EAAE,QAAQ,OAAO,KAAK,SAAmD;CAChG,MAAM,WAAY,MAAM,MAA0C;CAElE,OAAO,oBAAC,WAAD;EAAW,OAAO,WAAW,OAAO,MAAM;EAAG,OAAO,OAAO,IAAI,aAAa,EAAE;CAAI,CAAA;AAC3F;AAEA,SAAS,cAAc,EAAE,QAAQ,OAAO,KAAK,SAAmD;CAC9F,MAAM,YAAa,OAAO,MAAuC;CACjE,MAAM,OAAO,YAAY,QAAQ,KAAK,KAAK;CAC3C,MAAM,OAAO,WAAW,OAAO,MAAM;CAErC,MAAM,UAAU,OACd,oBAAC,KAAD;EACE,WAAU;EACJ;EACN,KAAK,MAAM,MAAM,WAAW,eAAe,KAAA;EAC3C,QAAQ,MAAM,MAAM,WAAW,WAAW,KAAA;EAEzC,UAAA;CACA,CAAA,IAEH;CAGF,IAAI,aAAa,CAAC,QAAQ,CAAC,MAAM,YAAY,UAAU,QAAQ,UAAU,KAAA,GACvE,OACE,oBAAC,UAAD;EAAiB;EAAO,WAAW,UAAU;EAAW,WAAW,UAAU;CAAY,CAAA;CAI7F,OACE,oBAAC,cAAD;EAAsB;EAAQ,UAAU,MAAM;EAAU,OAAO;EAC5D,UAAA;CACW,CAAA;AAElB"}

package/dist/table/components/column-filter-control.js.map

@@ -1 +1 @@
-{"version":3,"file":"column-filter-control.js","names":[],"sources":["../../../resources/js/table/components/column-filter-control.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport { Button } from \"@lattice-php/lattice/ui/button\";\nimport { IconButton } from \"@lattice-php/lattice/ui/icon-button\";\nimport { NativeSelect } from \"@lattice-php/lattice/ui/native-select\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"@lattice-php/lattice/ui/popover\";\nimport { useT } from \"@lattice-php/lattice/i18n\";\nimport type {\n  ColumnFilterOption,\n  FilterType,\n  Option,\n  Op,\n} from \"@lattice-php/lattice/types/generated\";\nimport { filterValue } from \"@lattice-php/lattice/table/lib/filter-values\";\nimport { operatorLabel, VALUELESS_FILTER_OPERATORS } from \"@lattice-php/lattice/table/lib/query\";\nimport type { FilterClause, FilterNode, TableColumn } from \"@lattice-php/lattice/table/types\";\nimport { TableFilterControl } from \"./filter-controls\";\nimport { FilterValueInput } from \"./filter-value-input\";\n\ntype ColumnClause = { clause: FilterClause; index: number };\n\nexport function ColumnFilterControl({\n  column,\n  clauses,\n  processing,\n  onAdd,\n  onUpdate,\n  onRemove,\n  onReplace,\n  onSearch,\n}: {\n  column: TableColumn;\n  clauses: ColumnClause[];\n  processing: boolean;\n  onAdd: (clause: FilterClause) => void;\n  onUpdate: (index: number, clause: FilterClause) => void;\n  onRemove: (index: number) => void;\n  onReplace: (field: string, clauses: FilterClause[]) => void;\n  onSearch?: (query: string, signal?: AbortSignal) => Promise<Option[]>;\n}) {\n  const { t } = useT(\"lattice\");\n  const { filter, label: rawLabel } = column.props;\n  const label = rawLabel ?? column.key;\n\n  if (!filter) {\n    return null;\n  }\n\n  if (filter.control === \"filter.select\") {\n    return (\n      <ColumnSelectFilter\n        column={column}\n        clauses={clauses}\n        processing={processing}\n        onReplace={onReplace}\n        onSearch={onSearch}\n      />\n    );\n  }\n\n  const type = filter.type ?? \"text\";\n  const operators = filter.operators ?? [];\n  const defaultOperator = filter.defaultOperator ?? operators[0] ?? \"eq\";\n  const primary = clauses.find((entry) => entry.clause.operator === defaultOperator) ?? clauses[0];\n\n  function commitPrimary(value: string): void {\n    if (value === \"\") {\n      if (primary) {\n        onRemove(primary.index);\n      }\n\n      return;\n    }\n\n    if (primary) {\n      onUpdate(primary.index, { ...primary.clause, value });\n    } else {\n      onAdd({ field: column.key, operator: defaultOperator, value });\n    }\n  }\n\n  return (\n    <div className=\"flex min-w-0 max-w-80 items-stretch\">\n      <div className=\"min-w-0 flex-1\">\n        <FilterValueInput\n          type={type}\n          label={label}\n          value={primary?.clause.value ?? \"\"}\n          processing={processing}\n          withSearchIcon={type === \"text\" || type === \"number\"}\n          grouped\n          testId={`filter-${column.key}-value`}\n          onCommit={commitPrimary}\n          onClear={primary ? () => onRemove(primary.index) : undefined}\n        />\n      </div>\n      <Popover>\n        <PopoverTrigger asChild>\n          <IconButton\n            emphasis=\"segmented\"\n            size=\"md\"\n            icon=\"filter\"\n            label={t(\"table.filter.column-filters\", \"{{label}} filters\", { label })}\n            data-test={`filter-${column.key}`}\n            disabled={processing}\n          >\n            {clauses.length > 0 && (\n              <span className=\"absolute -right-1.5 -top-1.5 inline-flex size-4 items-center justify-center rounded-full bg-lt-primary text-xs font-medium text-lt-primary-fg\">\n                {clauses.length}\n              </span>\n            )}\n          </IconButton>\n        </PopoverTrigger>\n\n        <PopoverContent align=\"start\" className=\"w-80 p-4\">\n          <FilterClauseList\n            column={column}\n            clauses={clauses}\n            operators={operators}\n            defaultOperator={defaultOperator}\n            processing={processing}\n            onAdd={onAdd}\n            onUpdate={onUpdate}\n            onRemove={onRemove}\n          />\n        </PopoverContent>\n      </Popover>\n    </div>\n  );\n}\n\nfunction serializeColumnValue(value: unknown): string {\n  if (Array.isArray(value)) {\n    return value.join(\",\");\n  }\n\n  return typeof value === \"string\" ? value : \"\";\n}\n\nfunction ColumnSelectFilter({\n  column,\n  clauses,\n  processing,\n  onReplace,\n  onSearch,\n}: {\n  column: TableColumn;\n  clauses: ColumnClause[];\n  processing: boolean;\n  onReplace: (field: string, clauses: FilterClause[]) => void;\n  onSearch?: (query: string, signal?: AbortSignal) => Promise<Option[]>;\n}) {\n  const { filter, label } = column.props;\n\n  if (!filter) {\n    return null;\n  }\n\n  const multiple = filter.multiple;\n  const operator = filter.defaultOperator;\n  const clauseOptions = filter.clauseOptions ?? [];\n  const activeClauseOption = findActiveClauseOption(\n    clauses.map((entry) => entry.clause),\n    clauseOptions,\n  );\n  const active = clauses.find((entry) => entry.clause.operator === operator) ?? clauses[0];\n  const value: unknown = activeClauseOption\n    ? activeClauseOption.value\n    : multiple\n      ? active?.clause.value\n        ? active.clause.value.split(\",\")\n        : []\n      : (active?.clause.value ?? \"\");\n\n  const data: FilterNode<\"filter.select\"> = {\n    key: column.key,\n    type: \"filter.select\",\n    props: {\n      label,\n      options: filter.options,\n      multiple,\n      searchable: filter.searchable,\n      placeholder: null,\n    },\n    schema: [\n      {\n        type: \"field.select\",\n        key: column.key,\n        props: {\n          name: \"value\",\n          label,\n          options: filter.options,\n          multiple,\n          searchable: filter.searchable,\n          placeholder: null,\n        },\n      },\n    ],\n  };\n\n  function change(next: unknown): void {\n    const serialized = serializeColumnValue(filterValue(next).value);\n\n    if (serialized === \"\") {\n      onReplace(column.key, []);\n\n      return;\n    }\n\n    const clauseOption = clauseOptions.find((option) => option.value === serialized);\n\n    if (clauseOption) {\n      onReplace(column.key, clausesForOption(column.key, clauseOption));\n\n      return;\n    }\n\n    onReplace(column.key, [{ field: column.key, operator, value: serialized }]);\n  }\n\n  return (\n    <TableFilterControl\n      filter={data}\n      value={{ value }}\n      processing={processing}\n      bare\n      onChange={change}\n      onSearch={onSearch ? (_field, query, signal) => onSearch(query, signal) : undefined}\n    />\n  );\n}\n\nfunction clausesForOption(field: string, option: ColumnFilterOption): FilterClause[] {\n  return option.clauses.map((clause) => ({\n    field,\n    operator: clause.operator,\n    value: clause.value,\n  }));\n}\n\nfunction findActiveClauseOption(\n  clauses: FilterClause[],\n  options: ColumnFilterOption[],\n): ColumnFilterOption | undefined {\n  return options.find((option) => clausesMatch(clauses, clausesForOption(\"\", option)));\n}\n\nfunction clausesMatch(active: FilterClause[], expected: FilterClause[]): boolean {\n  if (active.length !== expected.length) {\n    return false;\n  }\n\n  return expected.every((clause) =>\n    active.some(\n      (current) => current.operator === clause.operator && current.value === clause.value,\n    ),\n  );\n}\n\nfunction FilterClauseList({\n  column,\n  clauses,\n  operators,\n  defaultOperator,\n  processing,\n  onAdd,\n  onUpdate,\n  onRemove,\n}: {\n  column: TableColumn;\n  clauses: ColumnClause[];\n  operators: Op[];\n  defaultOperator: Op;\n  processing: boolean;\n  onAdd: (clause: FilterClause) => void;\n  onUpdate: (index: number, clause: FilterClause) => void;\n  onRemove: (index: number) => void;\n}) {\n  const { t } = useT(\"lattice\");\n  const type = column.props.filter?.type ?? \"text\";\n  const [draftOperator, setDraftOperator] = useState(defaultOperator);\n  const [adding, setAdding] = useState(clauses.length === 0);\n\n  return (\n    <div className=\"grid gap-3\">\n      {clauses.map((entry) => (\n        <FilterClauseRow\n          key={entry.index}\n          column={column}\n          type={type}\n          operators={operators}\n          clause={entry.clause}\n          processing={processing}\n          onOperator={(operator) => onUpdate(entry.index, { ...entry.clause, operator })}\n          onValue={(value) =>\n            value === \"\" ? onRemove(entry.index) : onUpdate(entry.index, { ...entry.clause, value })\n          }\n          onRemove={() => onRemove(entry.index)}\n        />\n      ))}\n\n      {adding && (\n        <FilterClauseRow\n          column={column}\n          type={type}\n          operators={operators}\n          clause={{ field: column.key, operator: draftOperator, value: \"\" }}\n          processing={processing}\n          onOperator={(operator) => {\n            if (VALUELESS_FILTER_OPERATORS.has(operator)) {\n              onAdd({ field: column.key, operator, value: \"\" });\n              setDraftOperator(defaultOperator);\n              setAdding(false);\n              return;\n            }\n            setDraftOperator(operator);\n          }}\n          onValue={(value) => {\n            if (value !== \"\") {\n              onAdd({ field: column.key, operator: draftOperator, value });\n              setDraftOperator(defaultOperator);\n              setAdding(false);\n            }\n          }}\n          onRemove={() => setAdding(false)}\n        />\n      )}\n\n      <div className=\"border-t border-lt-border pt-3\">\n        <Button\n          variant=\"secondary\"\n          icon=\"plus\"\n          data-test={`filter-${column.key}-add`}\n          className=\"w-full\"\n          disabled={processing}\n          onClick={() => setAdding(true)}\n        >\n          {t(\"table.filter.add\", \"Add filter\")}\n        </Button>\n      </div>\n    </div>\n  );\n}\n\nfunction FilterClauseRow({\n  column,\n  type,\n  operators,\n  clause,\n  processing,\n  onOperator,\n  onValue,\n  onRemove,\n}: {\n  column: TableColumn;\n  type: FilterType;\n  operators: Op[];\n  clause: FilterClause;\n  processing: boolean;\n  onOperator: (operator: Op) => void;\n  onValue: (value: string) => void;\n  onRemove: () => void;\n}) {\n  const { t } = useT(\"lattice\");\n  const label = column.props.label ?? column.key;\n  const valueless = VALUELESS_FILTER_OPERATORS.has(clause.operator);\n\n  return (\n    <div className=\"grid gap-2\">\n      <div className=\"flex items-center gap-2\">\n        {operators.length > 1 ? (\n          <NativeSelect\n            density=\"compact\"\n            aria-label={t(\"table.filter.operator\", \"{{label}} operator\", { label })}\n            data-test={`filter-${column.key}-operator`}\n            className=\"flex-1\"\n            disabled={processing}\n            value={clause.operator}\n            onChange={(event) => onOperator(event.target.value as Op)}\n          >\n            {operators.map((operator) => (\n              <option key={operator} value={operator}>\n                {operatorLabel(operator)}\n              </option>\n            ))}\n          </NativeSelect>\n        ) : (\n          <span className=\"flex-1 text-sm font-medium\">{operatorLabel(clause.operator)}</span>\n        )}\n        <Button\n          emphasis=\"outline\"\n          size=\"icon\"\n          icon=\"trash-2\"\n          aria-label={t(\"table.filter.remove\", \"Remove {{label}} filter\", { label })}\n          data-test={`filter-${column.key}-remove`}\n          disabled={processing}\n          onClick={onRemove}\n        />\n      </div>\n      {!valueless && (\n        <FilterValueInput\n          type={type}\n          label={label}\n          ariaLabel={t(\"table.filter.value\", \"{{label}} filter value\", { label })}\n          value={clause.value}\n          processing={processing}\n          onCommit={onValue}\n          onClear={() => onValue(\"\")}\n        />\n      )}\n    </div>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"column-filter-control.js","names":[],"sources":["../../../resources/js/table/components/column-filter-control.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport { Button } from \"@lattice-php/lattice/ui/button\";\nimport { IconButton } from \"@lattice-php/lattice/ui/icon-button\";\nimport { NativeSelect } from \"@lattice-php/lattice/ui/native-select\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"@lattice-php/lattice/ui/popover\";\nimport { useT } from \"@lattice-php/lattice/i18n\";\nimport type {\n  ColumnFilterOption,\n  FilterType,\n  Option,\n  Op,\n} from \"@lattice-php/lattice/types/generated\";\nimport { filterValue } from \"@lattice-php/lattice/table/lib/filter-values\";\nimport { operatorLabel, VALUELESS_FILTER_OPERATORS } from \"@lattice-php/lattice/table/lib/query\";\nimport type { FilterClause, FilterNode, TableColumn } from \"@lattice-php/lattice/table/types\";\nimport { TableFilterControl } from \"./filter-controls\";\nimport { FilterValueInput } from \"./filter-value-input\";\n\ntype ColumnClause = { clause: FilterClause; index: number };\n\nexport function ColumnFilterControl({\n  column,\n  clauses,\n  processing,\n  onAdd,\n  onUpdate,\n  onRemove,\n  onReplace,\n  onSearch,\n}: {\n  column: TableColumn;\n  clauses: ColumnClause[];\n  processing: boolean;\n  onAdd: (clause: FilterClause) => void;\n  onUpdate: (index: number, clause: FilterClause) => void;\n  onRemove: (index: number) => void;\n  onReplace: (field: string, clauses: FilterClause[]) => void;\n  onSearch?: (query: string, signal?: AbortSignal) => Promise<Option[]>;\n}) {\n  const { t } = useT(\"lattice\");\n  const { filter, label: rawLabel } = column.props;\n  const label = rawLabel ?? column.key;\n\n  if (!filter) {\n    return null;\n  }\n\n  if (filter.control === \"filter.select\") {\n    return (\n      <ColumnSelectFilter\n        column={column}\n        clauses={clauses}\n        processing={processing}\n        onReplace={onReplace}\n        onSearch={onSearch}\n      />\n    );\n  }\n\n  const type = filter.type ?? \"text\";\n  const operators = filter.operators ?? [];\n  const defaultOperator = filter.defaultOperator ?? operators[0] ?? \"eq\";\n  const primary = clauses.find((entry) => entry.clause.operator === defaultOperator) ?? clauses[0];\n\n  function commitPrimary(value: string): void {\n    if (value === \"\") {\n      if (primary) {\n        onRemove(primary.index);\n      }\n\n      return;\n    }\n\n    if (primary) {\n      onUpdate(primary.index, { ...primary.clause, value });\n    } else {\n      onAdd({ field: column.key, operator: defaultOperator, value });\n    }\n  }\n\n  return (\n    <div className=\"flex min-w-0 max-w-80 items-stretch\">\n      <div className=\"min-w-0 flex-1\">\n        <FilterValueInput\n          type={type}\n          label={label}\n          value={primary?.clause.value ?? \"\"}\n          processing={processing}\n          withSearchIcon={type === \"text\" || type === \"number\"}\n          grouped\n          testId={`filter-${column.key}-value`}\n          onCommit={commitPrimary}\n          onClear={primary ? () => onRemove(primary.index) : undefined}\n        />\n      </div>\n      <Popover>\n        <PopoverTrigger asChild>\n          <IconButton\n            emphasis=\"segmented\"\n            size=\"md\"\n            icon=\"filter\"\n            label={t(\"table.filter.column-filters\", \"{{label}} filters\", { label })}\n            data-test={`filter-${column.key}`}\n            disabled={processing}\n          >\n            {clauses.length > 0 && (\n              <span className=\"absolute -right-1.5 -top-1.5 inline-flex size-4 items-center justify-center rounded-full bg-lt-primary text-xs font-medium text-lt-primary-fg\">\n                {clauses.length}\n              </span>\n            )}\n          </IconButton>\n        </PopoverTrigger>\n\n        <PopoverContent align=\"start\" className=\"w-80 p-4\">\n          <FilterClauseList\n            column={column}\n            clauses={clauses}\n            operators={operators}\n            defaultOperator={defaultOperator}\n            processing={processing}\n            onAdd={onAdd}\n            onUpdate={onUpdate}\n            onRemove={onRemove}\n          />\n        </PopoverContent>\n      </Popover>\n    </div>\n  );\n}\n\nfunction serializeColumnValue(value: unknown): string {\n  if (Array.isArray(value)) {\n    return value.join(\",\");\n  }\n\n  return typeof value === \"string\" ? value : \"\";\n}\n\nfunction ColumnSelectFilter({\n  column,\n  clauses,\n  processing,\n  onReplace,\n  onSearch,\n}: {\n  column: TableColumn;\n  clauses: ColumnClause[];\n  processing: boolean;\n  onReplace: (field: string, clauses: FilterClause[]) => void;\n  onSearch?: (query: string, signal?: AbortSignal) => Promise<Option[]>;\n}) {\n  const { filter, label } = column.props;\n\n  if (!filter) {\n    return null;\n  }\n\n  const multiple = filter.multiple;\n  const operator = filter.defaultOperator;\n  const clauseOptions = filter.clauseOptions ?? [];\n  const activeClauseOption = findActiveClauseOption(\n    clauses.map((entry) => entry.clause),\n    clauseOptions,\n  );\n  const active = clauses.find((entry) => entry.clause.operator === operator) ?? clauses[0];\n  const value: unknown = activeClauseOption\n    ? activeClauseOption.value\n    : multiple\n      ? active?.clause.value\n        ? active.clause.value.split(\",\")\n        : []\n      : (active?.clause.value ?? \"\");\n\n  const data: FilterNode<\"filter.select\"> = {\n    key: column.key,\n    type: \"filter.select\",\n    props: {\n      label,\n      options: filter.options,\n      multiple,\n      searchable: filter.searchable,\n      placeholder: null,\n    },\n    schema: [\n      {\n        type: \"field.select\",\n        key: column.key,\n        props: {\n          name: \"value\",\n          label,\n          options: filter.options,\n          multiple,\n          searchable: filter.searchable,\n          placeholder: null,\n        },\n      },\n    ],\n  };\n\n  function change(next: unknown): void {\n    const serialized = serializeColumnValue(filterValue(next).value);\n\n    if (serialized === \"\") {\n      onReplace(column.key, []);\n\n      return;\n    }\n\n    const clauseOption = clauseOptions.find((option) => option.value === serialized);\n\n    if (clauseOption) {\n      onReplace(column.key, clausesForOption(column.key, clauseOption));\n\n      return;\n    }\n\n    onReplace(column.key, [{ field: column.key, operator, value: serialized }]);\n  }\n\n  return (\n    <TableFilterControl\n      filter={data}\n      value={{ value }}\n      processing={processing}\n      bare\n      onChange={change}\n      onSearch={onSearch ? (_field, query, signal) => onSearch(query, signal) : undefined}\n    />\n  );\n}\n\nfunction clausesForOption(field: string, option: ColumnFilterOption): FilterClause[] {\n  return option.clauses.map((clause) => ({\n    field,\n    operator: clause.operator,\n    value: clause.value,\n  }));\n}\n\nfunction findActiveClauseOption(\n  clauses: FilterClause[],\n  options: ColumnFilterOption[],\n): ColumnFilterOption | undefined {\n  return options.find((option) => clausesMatch(clauses, clausesForOption(\"\", option)));\n}\n\nfunction clausesMatch(active: FilterClause[], expected: FilterClause[]): boolean {\n  if (active.length !== expected.length) {\n    return false;\n  }\n\n  return expected.every((clause) =>\n    active.some(\n      (current) => current.operator === clause.operator && current.value === clause.value,\n    ),\n  );\n}\n\nfunction FilterClauseList({\n  column,\n  clauses,\n  operators,\n  defaultOperator,\n  processing,\n  onAdd,\n  onUpdate,\n  onRemove,\n}: {\n  column: TableColumn;\n  clauses: ColumnClause[];\n  operators: Op[];\n  defaultOperator: Op;\n  processing: boolean;\n  onAdd: (clause: FilterClause) => void;\n  onUpdate: (index: number, clause: FilterClause) => void;\n  onRemove: (index: number) => void;\n}) {\n  const { t } = useT(\"lattice\");\n  const type = column.props.filter?.type ?? \"text\";\n  const [draftOperator, setDraftOperator] = useState(defaultOperator);\n  const [adding, setAdding] = useState(clauses.length === 0);\n\n  return (\n    <div className=\"grid gap-3\">\n      {clauses.map((entry) => (\n        <FilterClauseRow\n          key={entry.index}\n          column={column}\n          type={type}\n          operators={operators}\n          clause={entry.clause}\n          processing={processing}\n          onOperator={(operator) => onUpdate(entry.index, { ...entry.clause, operator })}\n          onValue={(value) =>\n            value === \"\" ? onRemove(entry.index) : onUpdate(entry.index, { ...entry.clause, value })\n          }\n          onRemove={() => onRemove(entry.index)}\n        />\n      ))}\n\n      {adding && (\n        <FilterClauseRow\n          column={column}\n          type={type}\n          operators={operators}\n          clause={{ field: column.key, operator: draftOperator, value: \"\" }}\n          processing={processing}\n          onOperator={(operator) => {\n            if (VALUELESS_FILTER_OPERATORS.has(operator)) {\n              onAdd({ field: column.key, operator, value: \"\" });\n              setDraftOperator(defaultOperator);\n              setAdding(false);\n              return;\n            }\n            setDraftOperator(operator);\n          }}\n          onValue={(value) => {\n            if (value !== \"\") {\n              onAdd({ field: column.key, operator: draftOperator, value });\n              setDraftOperator(defaultOperator);\n              setAdding(false);\n            }\n          }}\n          onRemove={() => setAdding(false)}\n        />\n      )}\n\n      <div className=\"border-t border-lt-border pt-3\">\n        <Button\n          variant=\"secondary\"\n          icon=\"plus\"\n          data-test={`filter-${column.key}-add`}\n          className=\"w-full\"\n          disabled={processing}\n          onClick={() => setAdding(true)}\n        >\n          {t(\"table.filter.add\", \"Add filter\")}\n        </Button>\n      </div>\n    </div>\n  );\n}\n\nfunction FilterClauseRow({\n  column,\n  type,\n  operators,\n  clause,\n  processing,\n  onOperator,\n  onValue,\n  onRemove,\n}: {\n  column: TableColumn;\n  type: FilterType;\n  operators: Op[];\n  clause: FilterClause;\n  processing: boolean;\n  onOperator: (operator: Op) => void;\n  onValue: (value: string) => void;\n  onRemove: () => void;\n}) {\n  const { t } = useT(\"lattice\");\n  const label = column.props.label ?? column.key;\n  const valueless = VALUELESS_FILTER_OPERATORS.has(clause.operator);\n\n  return (\n    <div className=\"grid gap-2\">\n      <div className=\"flex items-center gap-2\">\n        {operators.length > 1 ? (\n          <NativeSelect\n            density=\"compact\"\n            aria-label={t(\"table.filter.operator\", \"{{label}} operator\", { label })}\n            data-test={`filter-${column.key}-operator`}\n            className=\"flex-1\"\n            disabled={processing}\n            value={clause.operator}\n            onChange={(event) => onOperator(event.target.value as Op)}\n          >\n            {operators.map((operator) => (\n              <option key={operator} value={operator}>\n                {operatorLabel(operator)}\n              </option>\n            ))}\n          </NativeSelect>\n        ) : (\n          <span className=\"flex-1 text-sm font-medium\">{operatorLabel(clause.operator)}</span>\n        )}\n        <Button\n          emphasis=\"outline\"\n          size=\"icon\"\n          icon=\"trash-2\"\n          aria-label={t(\"table.filter.remove\", \"Remove {{label}} filter\", { label })}\n          data-test={`filter-${column.key}-remove`}\n          disabled={processing}\n          onClick={onRemove}\n        />\n      </div>\n      {!valueless && (\n        <FilterValueInput\n          type={type}\n          label={label}\n          ariaLabel={t(\"table.filter.value\", \"{{label}} filter value\", { label })}\n          value={clause.value}\n          processing={processing}\n          onCommit={onValue}\n          onClear={() => onValue(\"\")}\n        />\n      )}\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/table/components/column-header.js.map

@@ -1 +1 @@
-{"version":3,"file":"column-header.js","names":[],"sources":["../../../resources/js/table/components/column-header.tsx"],"sourcesContent":["import { Icon } from \"@lattice-php/lattice/icons\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\nimport type { HTMLAttributes } from \"react\";\nimport { alignJustify, alignText } from \"@lattice-php/lattice/table/lib/align\";\nimport { useT } from \"@lattice-php/lattice/i18n\";\nimport { getColumnAriaSort, getColumnSort } from \"@lattice-php/lattice/table/lib/query\";\nimport type { TableColumn, TableSort, TableQuery } from \"@lattice-php/lattice/table/types\";\n\nfunction SortIndicator({ sort }: { sort: TableSort | undefined }) {\n  if (sort?.direction === \"asc\") {\n    return <Icon name=\"arrow-up\" aria-hidden=\"true\" className=\"size-lt-icon-sm shrink-0\" />;\n  }\n\n  if (sort?.direction === \"desc\") {\n    return <Icon name=\"arrow-down\" aria-hidden=\"true\" className=\"size-lt-icon-sm shrink-0\" />;\n  }\n\n  return (\n    <Icon\n      name=\"chevrons-up-down\"\n      aria-hidden=\"true\"\n      className=\"size-lt-icon-sm shrink-0 opacity-50\"\n    />\n  );\n}\n\nexport function ColumnHeader({\n  column,\n  processing,\n  resizeHandleProps,\n  sort,\n  query,\n}: {\n  column: TableColumn;\n  processing: boolean;\n  resizeHandleProps?: HTMLAttributes<HTMLDivElement>;\n  sort: (column: TableColumn) => void;\n  query: TableQuery;\n}) {\n  const columnSort = getColumnSort(query, column);\n  const { t } = useT(\"lattice\");\n  const { align, label, sortable } = column.props;\n\n  return (\n    <div\n      aria-sort={getColumnAriaSort(columnSort)}\n      className={cn(\n        \"relative min-w-0 px-4 py-3 pr-5 align-middle font-semibold text-lt-fg\",\n        alignText(align),\n      )}\n      role=\"columnheader\"\n    >\n      {sortable ? (\n        <button\n          type=\"button\"\n          aria-label={t(\"table.sort.column\", \"Sort {{label}}\", { label })}\n          className={cn(\"flex w-full items-center gap-1.5 font-semibold\", alignJustify(align))}\n          data-test={`sort-${column.key}`}\n          disabled={processing}\n          onClick={() => sort(column)}\n        >\n          <span className={cn(\"min-w-0 flex-1 truncate\", alignText(align))}>{label}</span>\n          <SortIndicator sort={columnSort} />\n        </button>\n      ) : (\n        <span className={cn(\"block truncate\", alignText(align))}>{label}</span>\n      )}\n      {resizeHandleProps && <div {...resizeHandleProps} />}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;AAQA,SAAS,cAAc,EAAE,QAAyC;CAChE,IAAI,MAAM,cAAc,OACtB,OAAO,oBAAC,MAAD;EAAM,MAAK;EAAW,eAAY;EAAO,WAAU;CAA4B,CAAA;CAGxF,IAAI,MAAM,cAAc,QACtB,OAAO,oBAAC,MAAD;EAAM,MAAK;EAAa,eAAY;EAAO,WAAU;CAA4B,CAAA;CAG1F,OACE,oBAAC,MAAD;EACE,MAAK;EACL,eAAY;EACZ,WAAU;CACX,CAAA;AAEL;AAEA,SAAgB,aAAa,EAC3B,QACA,YACA,mBACA,MACA,SAOC;CACD,MAAM,aAAa,cAAc,OAAO,MAAM;CAC9C,MAAM,EAAE,MAAM,KAAK,SAAS;CAC5B,MAAM,EAAE,OAAO,OAAO,aAAa,OAAO;CAE1C,OACE,qBAAC,OAAD;EACE,aAAW,kBAAkB,UAAU;EACvC,WAAW,GACT,yEACA,UAAU,KAAK,CACjB;EACA,MAAK;YANP,CAQG,WACC,qBAAC,UAAD;GACE,MAAK;GACL,cAAY,EAAE,qBAAqB,kBAAkB,EAAE,MAAM,CAAC;GAC9D,WAAW,GAAG,kDAAkD,aAAa,KAAK,CAAC;GACnF,aAAW,QAAQ,OAAO;GAC1B,UAAU;GACV,eAAe,KAAK,MAAM;aAN5B,CAQE,oBAAC,QAAD;IAAM,WAAW,GAAG,2BAA2B,UAAU,KAAK,CAAC;cAAI;GAAY,CAAA,GAC/E,oBAAC,eAAD,EAAe,MAAM,WAAa,CAAA,CAC5B;OAER,oBAAC,QAAD;GAAM,WAAW,GAAG,kBAAkB,UAAU,KAAK,CAAC;aAAI;EAAY,CAAA,GAEvE,qBAAqB,oBAAC,OAAD,EAAK,GAAI,kBAAoB,CAAA,CAChD;;AAET"}
+{"version":3,"file":"column-header.js","names":[],"sources":["../../../resources/js/table/components/column-header.tsx"],"sourcesContent":["import { Icon } from \"@lattice-php/lattice/icons\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\nimport type { HTMLAttributes } from \"react\";\nimport { alignJustify, alignText } from \"@lattice-php/lattice/table/lib/align\";\nimport { useT } from \"@lattice-php/lattice/i18n\";\nimport { getColumnAriaSort, getColumnSort } from \"@lattice-php/lattice/table/lib/query\";\nimport type { TableColumn, TableSort, TableQuery } from \"@lattice-php/lattice/table/types\";\n\nfunction SortIndicator({ sort }: { sort: TableSort | undefined }) {\n  if (sort?.direction === \"asc\") {\n    return <Icon name=\"arrow-up\" aria-hidden=\"true\" className=\"size-lt-icon-sm shrink-0\" />;\n  }\n\n  if (sort?.direction === \"desc\") {\n    return <Icon name=\"arrow-down\" aria-hidden=\"true\" className=\"size-lt-icon-sm shrink-0\" />;\n  }\n\n  return (\n    <Icon\n      name=\"chevrons-up-down\"\n      aria-hidden=\"true\"\n      className=\"size-lt-icon-sm shrink-0 opacity-50\"\n    />\n  );\n}\n\nexport function ColumnHeader({\n  column,\n  processing,\n  resizeHandleProps,\n  sort,\n  query,\n}: {\n  column: TableColumn;\n  processing: boolean;\n  resizeHandleProps?: HTMLAttributes<HTMLDivElement>;\n  sort: (column: TableColumn) => void;\n  query: TableQuery;\n}) {\n  const columnSort = getColumnSort(query, column);\n  const { t } = useT(\"lattice\");\n  const { align, label, sortable } = column.props;\n\n  return (\n    <div\n      aria-sort={getColumnAriaSort(columnSort)}\n      className={cn(\n        \"relative min-w-0 px-4 py-3 pr-5 align-middle font-semibold text-lt-fg\",\n        alignText(align),\n      )}\n      role=\"columnheader\"\n    >\n      {sortable ? (\n        <button\n          type=\"button\"\n          aria-label={t(\"table.sort.column\", \"Sort {{label}}\", { label })}\n          className={cn(\"flex w-full items-center gap-1.5 font-semibold\", alignJustify(align))}\n          data-test={`sort-${column.key}`}\n          disabled={processing}\n          onClick={() => sort(column)}\n        >\n          <span className={cn(\"min-w-0 flex-1 truncate\", alignText(align))}>{label}</span>\n          <SortIndicator sort={columnSort} />\n        </button>\n      ) : (\n        <span className={cn(\"block truncate\", alignText(align))}>{label}</span>\n      )}\n      {resizeHandleProps && <div {...resizeHandleProps} />}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;AAQA,SAAS,cAAc,EAAE,QAAyC;CAChE,IAAI,MAAM,cAAc,OACtB,OAAO,oBAAC,MAAD;EAAM,MAAK;EAAW,eAAY;EAAO,WAAU;CAA4B,CAAA;CAGxF,IAAI,MAAM,cAAc,QACtB,OAAO,oBAAC,MAAD;EAAM,MAAK;EAAa,eAAY;EAAO,WAAU;CAA4B,CAAA;CAG1F,OACE,oBAAC,MAAD;EACE,MAAK;EACL,eAAY;EACZ,WAAU;CACX,CAAA;AAEL;AAEA,SAAgB,aAAa,EAC3B,QACA,YACA,mBACA,MACA,SAOC;CACD,MAAM,aAAa,cAAc,OAAO,MAAM;CAC9C,MAAM,EAAE,MAAM,KAAK,SAAS;CAC5B,MAAM,EAAE,OAAO,OAAO,aAAa,OAAO;CAE1C,OACE,qBAAC,OAAD;EACE,aAAW,kBAAkB,UAAU;EACvC,WAAW,GACT,yEACA,UAAU,KAAK,CACjB;EACA,MAAK;EANP,UAAA,CAQG,WACC,qBAAC,UAAD;GACE,MAAK;GACL,cAAY,EAAE,qBAAqB,kBAAkB,EAAE,MAAM,CAAC;GAC9D,WAAW,GAAG,kDAAkD,aAAa,KAAK,CAAC;GACnF,aAAW,QAAQ,OAAO;GAC1B,UAAU;GACV,eAAe,KAAK,MAAM;GAN5B,UAAA,CAQE,oBAAC,QAAD;IAAM,WAAW,GAAG,2BAA2B,UAAU,KAAK,CAAC;IAAI,UAAA;GAAY,CAAA,GAC/E,oBAAC,eAAD,EAAe,MAAM,WAAa,CAAA,CAC5B;EAER,CAAA,IAAA,oBAAC,QAAD;GAAM,WAAW,GAAG,kBAAkB,UAAU,KAAK,CAAC;GAAI,UAAA;EAAY,CAAA,GAEvE,qBAAqB,oBAAC,OAAD,EAAK,GAAI,kBAAoB,CAAA,CAChD;;AAET"}

package/dist/table/components/column-visibility-menu.js

@@ -6,12 +6,13 @@ import { jsx, jsxs } from "react/jsx-runtime";
 //#region resources/js/table/components/column-visibility-menu.tsx
 function ColumnVisibilityMenu({ columns, hasHidden, isVisible, onReset, onToggle, processing, visibleColumnCount }) {
 	const { t } = useT("lattice");
+	const columnsLabel = t("table.columns.label", "Columns");
 	return /* @__PURE__ */ jsxs(Popover, { children: [/* @__PURE__ */ jsx(PopoverTrigger, {
 		asChild: true,
 		children: /* @__PURE__ */ jsx(IconButton, {
 			size: "sm",
 			icon: "columns-3",
-			label: t("table.columns.label", "Columns"),
+			label: columnsLabel,
 			"data-test": "table-columns-menu",
 			disabled: processing
 		})

package/dist/table/components/column-visibility-menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"column-visibility-menu.js","names":[],"sources":["../../../resources/js/table/components/column-visibility-menu.tsx"],"sourcesContent":["import { Checkbox } from \"@lattice-php/lattice/ui/checkbox\";\nimport type { ToggleableColumn } from \"@lattice-php/lattice/table/hooks/use-column-visibility\";\nimport { IconButton } from \"@lattice-php/lattice/ui/icon-button\";\nimport { useT } from \"@lattice-php/lattice/i18n\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"@lattice-php/lattice/ui/popover\";\n\nexport function ColumnVisibilityMenu({\n  columns,\n  hasHidden,\n  isVisible,\n  onReset,\n  onToggle,\n  processing,\n  visibleColumnCount,\n}: {\n  columns: ToggleableColumn[];\n  hasHidden: boolean;\n  isVisible: (column: ToggleableColumn) => boolean;\n  onReset: () => void;\n  onToggle: (key: string, visible: boolean) => void;\n  processing: boolean;\n  visibleColumnCount: number;\n}) {\n  const { t } = useT(\"lattice\");\n  const columnsLabel = t(\"table.columns.label\", \"Columns\");\n\n  return (\n    <Popover>\n      <PopoverTrigger asChild>\n        <IconButton\n          size=\"sm\"\n          icon=\"columns-3\"\n          label={columnsLabel}\n          data-test=\"table-columns-menu\"\n          disabled={processing}\n        />\n      </PopoverTrigger>\n      <PopoverContent align=\"end\" className=\"w-64 p-4\">\n        <div className=\"grid gap-3\">\n          {columns.map((column) => {\n            const visible = isVisible(column);\n            const lockedLast = visible && visibleColumnCount <= 1;\n\n            return (\n              <label key={column.key} className=\"flex items-center gap-2 text-base text-lt-fg\">\n                <Checkbox\n                  data-test={`table-column-toggle-${column.key}`}\n                  checked={visible}\n                  disabled={lockedLast}\n                  onCheckedChange={(next) => onToggle(column.key, next === true)}\n                />\n                <span>{column.props.label ?? column.key}</span>\n              </label>\n            );\n          })}\n          {hasHidden && (\n            <button\n              type=\"button\"\n              data-test=\"table-columns-reset\"\n              className=\"mt-1 justify-self-start text-sm text-lt-muted-fg hover:text-lt-fg\"\n              onClick={onReset}\n            >\n              {t(\"table.columns.reset\", \"Reset\")}\n            </button>\n          )}\n        </div>\n      </PopoverContent>\n    </Popover>\n  );\n}\n"],"mappings":";;;;;;AAMA,SAAgB,qBAAqB,EACnC,SACA,WACA,WACA,SACA,UACA,YACA,sBASC;CACD,MAAM,EAAE,MAAM,KAAK,SAAS;CAG5B,OACE,qBAAC,SAAD,EAAA,UAAA,CACE,oBAAC,gBAAD;EAAgB,SAAA;YACd,oBAAC,YAAD;GACE,MAAK;GACL,MAAK;GACL,OARa,EAAE,uBAAuB,SAQ/B;GACP,aAAU;GACV,UAAU;EACX,CAAA;CACa,CAAA,GAChB,oBAAC,gBAAD;EAAgB,OAAM;EAAM,WAAU;YACpC,qBAAC,OAAD;GAAK,WAAU;aAAf,CACG,QAAQ,KAAK,WAAW;IACvB,MAAM,UAAU,UAAU,MAAM;IAChC,MAAM,aAAa,WAAW,sBAAsB;IAEpD,OACE,qBAAC,SAAD;KAAwB,WAAU;eAAlC,CACE,oBAAC,UAAD;MACE,aAAW,uBAAuB,OAAO;MACzC,SAAS;MACT,UAAU;MACV,kBAAkB,SAAS,SAAS,OAAO,KAAK,SAAS,IAAI;KAC9D,CAAA,GACD,oBAAC,QAAD,EAAA,UAAO,OAAO,MAAM,SAAS,OAAO,IAAU,CAAA,CACzC;OARK,OAAO,GAQZ;GAEX,CAAC,GACA,aACC,oBAAC,UAAD;IACE,MAAK;IACL,aAAU;IACV,WAAU;IACV,SAAS;cAER,EAAE,uBAAuB,OAAO;GAC3B,CAAA,CAEP;;CACS,CAAA,CACT,EAAA,CAAA;AAEb"}
+{"version":3,"file":"column-visibility-menu.js","names":[],"sources":["../../../resources/js/table/components/column-visibility-menu.tsx"],"sourcesContent":["import { Checkbox } from \"@lattice-php/lattice/ui/checkbox\";\nimport type { ToggleableColumn } from \"@lattice-php/lattice/table/hooks/use-column-visibility\";\nimport { IconButton } from \"@lattice-php/lattice/ui/icon-button\";\nimport { useT } from \"@lattice-php/lattice/i18n\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"@lattice-php/lattice/ui/popover\";\n\nexport function ColumnVisibilityMenu({\n  columns,\n  hasHidden,\n  isVisible,\n  onReset,\n  onToggle,\n  processing,\n  visibleColumnCount,\n}: {\n  columns: ToggleableColumn[];\n  hasHidden: boolean;\n  isVisible: (column: ToggleableColumn) => boolean;\n  onReset: () => void;\n  onToggle: (key: string, visible: boolean) => void;\n  processing: boolean;\n  visibleColumnCount: number;\n}) {\n  const { t } = useT(\"lattice\");\n  const columnsLabel = t(\"table.columns.label\", \"Columns\");\n\n  return (\n    <Popover>\n      <PopoverTrigger asChild>\n        <IconButton\n          size=\"sm\"\n          icon=\"columns-3\"\n          label={columnsLabel}\n          data-test=\"table-columns-menu\"\n          disabled={processing}\n        />\n      </PopoverTrigger>\n      <PopoverContent align=\"end\" className=\"w-64 p-4\">\n        <div className=\"grid gap-3\">\n          {columns.map((column) => {\n            const visible = isVisible(column);\n            const lockedLast = visible && visibleColumnCount <= 1;\n\n            return (\n              <label key={column.key} className=\"flex items-center gap-2 text-base text-lt-fg\">\n                <Checkbox\n                  data-test={`table-column-toggle-${column.key}`}\n                  checked={visible}\n                  disabled={lockedLast}\n                  onCheckedChange={(next) => onToggle(column.key, next === true)}\n                />\n                <span>{column.props.label ?? column.key}</span>\n              </label>\n            );\n          })}\n          {hasHidden && (\n            <button\n              type=\"button\"\n              data-test=\"table-columns-reset\"\n              className=\"mt-1 justify-self-start text-sm text-lt-muted-fg hover:text-lt-fg\"\n              onClick={onReset}\n            >\n              {t(\"table.columns.reset\", \"Reset\")}\n            </button>\n          )}\n        </div>\n      </PopoverContent>\n    </Popover>\n  );\n}\n"],"mappings":";;;;;;AAMA,SAAgB,qBAAqB,EACnC,SACA,WACA,WACA,SACA,UACA,YACA,sBASC;CACD,MAAM,EAAE,MAAM,KAAK,SAAS;CAC5B,MAAM,eAAe,EAAE,uBAAuB,SAAS;CAEvD,OACE,qBAAC,SAAD,EAAA,UAAA,CACE,oBAAC,gBAAD;EAAgB,SAAA;EACd,UAAA,oBAAC,YAAD;GACE,MAAK;GACL,MAAK;GACL,OAAO;GACP,aAAU;GACV,UAAU;EACX,CAAA;CACa,CAAA,GAChB,oBAAC,gBAAD;EAAgB,OAAM;EAAM,WAAU;EACpC,UAAA,qBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACG,QAAQ,KAAK,WAAW;IACvB,MAAM,UAAU,UAAU,MAAM;IAChC,MAAM,aAAa,WAAW,sBAAsB;IAEpD,OACE,qBAAC,SAAD;KAAwB,WAAU;KAAlC,UAAA,CACE,oBAAC,UAAD;MACE,aAAW,uBAAuB,OAAO;MACzC,SAAS;MACT,UAAU;MACV,kBAAkB,SAAS,SAAS,OAAO,KAAK,SAAS,IAAI;KAC9D,CAAA,GACD,oBAAC,QAAD,EAAA,UAAO,OAAO,MAAM,SAAS,OAAO,IAAU,CAAA,CACzC;IARK,GAAA,OAAO,GAQZ;GAEX,CAAC,GACA,aACC,oBAAC,UAAD;IACE,MAAK;IACL,aAAU;IACV,WAAU;IACV,SAAS;IAER,UAAA,EAAE,uBAAuB,OAAO;GAC3B,CAAA,CAEP;;CACS,CAAA,CACT,EAAA,CAAA;AAEb"}

package/dist/table/components/filter-bar.js

@@ -68,12 +68,13 @@ function FilterChip({ label, value, removeTestId, removeLabel, processing, onRem
 function FilterMenu({ filters, values, processing, onChange, onSearch }) {
 	const { t } = useT("lattice");
 	const active = filters.filter((filter) => isActiveFilterValue(values[filter.key]));
+	const filtersLabel = t("table.filter.filters", "Filters");
 	return /* @__PURE__ */ jsxs(Popover, { children: [/* @__PURE__ */ jsx(PopoverTrigger, {
 		asChild: true,
 		children: /* @__PURE__ */ jsx(IconButton, {
 			size: "sm",
 			icon: "filter",
-			label: t("table.filter.filters", "Filters"),
+			label: filtersLabel,
 			"data-test": "table-filters-menu",
 			disabled: processing,
 			children: active.length > 0 && /* @__PURE__ */ jsx("span", {

package/dist/table/components/filter-bar.js.map

@@ -1 +1 @@
-{"version":3,"file":"filter-bar.js","names":[],"sources":["../../../resources/js/table/components/filter-bar.tsx"],"sourcesContent":["import { IconButton } from \"@lattice-php/lattice/ui/icon-button\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"@lattice-php/lattice/ui/popover\";\nimport { useT } from \"@lattice-php/lattice/i18n\";\nimport type { Option } from \"@lattice-php/lattice/types/generated\";\nimport { isActiveFilterValue } from \"@lattice-php/lattice/table/lib/filter-values\";\nimport { operatorLabel, VALUELESS_FILTER_OPERATORS } from \"@lattice-php/lattice/table/lib/query\";\nimport type {\n  FilterClause,\n  FilterIndicator,\n  FilterNode,\n  TableColumn,\n} from \"@lattice-php/lattice/table/types\";\nimport { TableFilterControl } from \"./filter-controls\";\n\nexport function FilterBar({\n  clauses,\n  columnsByKey,\n  indicators,\n  processing,\n  onRemoveClause,\n  onChange,\n  onReset,\n}: {\n  clauses: FilterClause[];\n  columnsByKey: Map<string, TableColumn>;\n  indicators: FilterIndicator[];\n  processing: boolean;\n  onRemoveClause: (index: number) => void;\n  onChange: (key: string, value: unknown) => void;\n  onReset: () => void;\n}) {\n  const { t } = useT(\"lattice\");\n\n  if (clauses.length === 0 && indicators.length === 0) {\n    return null;\n  }\n\n  return (\n    <div className=\"border-b border-lt-border px-4 py-3\">\n      <div className=\"flex flex-wrap items-center gap-2 text-sm\">\n        {clauses.map((clause, index) => {\n          const label = columnsByKey.get(clause.field)?.props.label ?? clause.field;\n          const valueless = VALUELESS_FILTER_OPERATORS.has(clause.operator);\n\n          return (\n            <FilterChip\n              key={`${clause.field}-${clause.operator}-${index}`}\n              label={`${label} ${operatorLabel(clause.operator)}`}\n              value={valueless ? \"\" : clause.value}\n              removeTestId={`filter-chip-${clause.field}-remove`}\n              removeLabel={t(\"table.filter.remove\", \"Remove {{label}} filter\", { label })}\n              processing={processing}\n              onRemove={() => onRemoveClause(index)}\n            />\n          );\n        })}\n        {indicators.map((indicator) => (\n          <FilterChip\n            key={`${indicator.filter}:${indicator.label}:${indicator.value}`}\n            label={indicator.label}\n            value={indicator.value}\n            removeTestId={`table-filter-chip-${indicator.filter}-remove`}\n            removeLabel={t(\"table.filter.remove\", \"Remove {{label}} filter\", {\n              label: indicator.label,\n            })}\n            processing={processing}\n            onRemove={() => onChange(indicator.filter, undefined)}\n          />\n        ))}\n        <button\n          type=\"button\"\n          data-test=\"table-filters-reset\"\n          className=\"text-lt-muted-fg underline-offset-2 hover:underline disabled:text-lt-disabled-fg\"\n          disabled={processing}\n          onClick={onReset}\n        >\n          {t(\"table.filter.reset-all\", \"Reset all\")}\n        </button>\n      </div>\n    </div>\n  );\n}\n\nfunction FilterChip({\n  label,\n  value,\n  removeTestId,\n  removeLabel,\n  processing,\n  onRemove,\n}: {\n  label: string;\n  value: string;\n  removeTestId: string;\n  removeLabel: string;\n  processing: boolean;\n  onRemove: () => void;\n}) {\n  return (\n    <span className=\"inline-flex items-center gap-1.5 rounded-lt-sm bg-lt-muted px-2 py-1\">\n      <span>\n        {value === \"\" ? (\n          <span className=\"font-semibold\">{label}</span>\n        ) : (\n          <>\n            {`${label}: `}\n            <span className=\"font-semibold\">{value}</span>\n          </>\n        )}\n      </span>\n      <IconButton\n        size=\"xs\"\n        icon=\"x\"\n        label={removeLabel}\n        data-test={removeTestId}\n        disabled={processing}\n        onClick={onRemove}\n      />\n    </span>\n  );\n}\n\nexport function FilterMenu({\n  filters,\n  values,\n  processing,\n  onChange,\n  onSearch,\n}: {\n  filters: FilterNode[];\n  values: Record<string, unknown>;\n  processing: boolean;\n  onChange: (key: string, value: unknown) => void;\n  onSearch?: (searchKey: string, query: string, signal?: AbortSignal) => Promise<Option[]>;\n}) {\n  const { t } = useT(\"lattice\");\n  const active = filters.filter((filter) => isActiveFilterValue(values[filter.key]));\n  const filtersLabel = t(\"table.filter.filters\", \"Filters\");\n\n  return (\n    <Popover>\n      <PopoverTrigger asChild>\n        <IconButton\n          size=\"sm\"\n          icon=\"filter\"\n          label={filtersLabel}\n          data-test=\"table-filters-menu\"\n          disabled={processing}\n        >\n          {active.length > 0 && (\n            <span className=\"absolute -right-1 -top-1 inline-flex size-3.5 items-center justify-center rounded-full bg-lt-primary text-[10px] font-medium leading-none text-lt-primary-fg\">\n              {active.length}\n            </span>\n          )}\n        </IconButton>\n      </PopoverTrigger>\n      <PopoverContent align=\"end\" className=\"w-80 p-4\">\n        <div className=\"grid gap-3\">\n          {filters.map((filter) => (\n            <div key={filter.key} className=\"grid gap-1\">\n              <TableFilterControl\n                filter={filter}\n                value={values[filter.key]}\n                processing={processing}\n                onChange={(value) => onChange(filter.key, value)}\n                onSearch={\n                  onSearch\n                    ? (field, query, signal) =>\n                        onSearch(`filter:${filter.key}.${field}`, query, signal)\n                    : undefined\n                }\n              />\n            </div>\n          ))}\n        </div>\n      </PopoverContent>\n    </Popover>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"filter-bar.js","names":[],"sources":["../../../resources/js/table/components/filter-bar.tsx"],"sourcesContent":["import { IconButton } from \"@lattice-php/lattice/ui/icon-button\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"@lattice-php/lattice/ui/popover\";\nimport { useT } from \"@lattice-php/lattice/i18n\";\nimport type { Option } from \"@lattice-php/lattice/types/generated\";\nimport { isActiveFilterValue } from \"@lattice-php/lattice/table/lib/filter-values\";\nimport { operatorLabel, VALUELESS_FILTER_OPERATORS } from \"@lattice-php/lattice/table/lib/query\";\nimport type {\n  FilterClause,\n  FilterIndicator,\n  FilterNode,\n  TableColumn,\n} from \"@lattice-php/lattice/table/types\";\nimport { TableFilterControl } from \"./filter-controls\";\n\nexport function FilterBar({\n  clauses,\n  columnsByKey,\n  indicators,\n  processing,\n  onRemoveClause,\n  onChange,\n  onReset,\n}: {\n  clauses: FilterClause[];\n  columnsByKey: Map<string, TableColumn>;\n  indicators: FilterIndicator[];\n  processing: boolean;\n  onRemoveClause: (index: number) => void;\n  onChange: (key: string, value: unknown) => void;\n  onReset: () => void;\n}) {\n  const { t } = useT(\"lattice\");\n\n  if (clauses.length === 0 && indicators.length === 0) {\n    return null;\n  }\n\n  return (\n    <div className=\"border-b border-lt-border px-4 py-3\">\n      <div className=\"flex flex-wrap items-center gap-2 text-sm\">\n        {clauses.map((clause, index) => {\n          const label = columnsByKey.get(clause.field)?.props.label ?? clause.field;\n          const valueless = VALUELESS_FILTER_OPERATORS.has(clause.operator);\n\n          return (\n            <FilterChip\n              key={`${clause.field}-${clause.operator}-${index}`}\n              label={`${label} ${operatorLabel(clause.operator)}`}\n              value={valueless ? \"\" : clause.value}\n              removeTestId={`filter-chip-${clause.field}-remove`}\n              removeLabel={t(\"table.filter.remove\", \"Remove {{label}} filter\", { label })}\n              processing={processing}\n              onRemove={() => onRemoveClause(index)}\n            />\n          );\n        })}\n        {indicators.map((indicator) => (\n          <FilterChip\n            key={`${indicator.filter}:${indicator.label}:${indicator.value}`}\n            label={indicator.label}\n            value={indicator.value}\n            removeTestId={`table-filter-chip-${indicator.filter}-remove`}\n            removeLabel={t(\"table.filter.remove\", \"Remove {{label}} filter\", {\n              label: indicator.label,\n            })}\n            processing={processing}\n            onRemove={() => onChange(indicator.filter, undefined)}\n          />\n        ))}\n        <button\n          type=\"button\"\n          data-test=\"table-filters-reset\"\n          className=\"text-lt-muted-fg underline-offset-2 hover:underline disabled:text-lt-disabled-fg\"\n          disabled={processing}\n          onClick={onReset}\n        >\n          {t(\"table.filter.reset-all\", \"Reset all\")}\n        </button>\n      </div>\n    </div>\n  );\n}\n\nfunction FilterChip({\n  label,\n  value,\n  removeTestId,\n  removeLabel,\n  processing,\n  onRemove,\n}: {\n  label: string;\n  value: string;\n  removeTestId: string;\n  removeLabel: string;\n  processing: boolean;\n  onRemove: () => void;\n}) {\n  return (\n    <span className=\"inline-flex items-center gap-1.5 rounded-lt-sm bg-lt-muted px-2 py-1\">\n      <span>\n        {value === \"\" ? (\n          <span className=\"font-semibold\">{label}</span>\n        ) : (\n          <>\n            {`${label}: `}\n            <span className=\"font-semibold\">{value}</span>\n          </>\n        )}\n      </span>\n      <IconButton\n        size=\"xs\"\n        icon=\"x\"\n        label={removeLabel}\n        data-test={removeTestId}\n        disabled={processing}\n        onClick={onRemove}\n      />\n    </span>\n  );\n}\n\nexport function FilterMenu({\n  filters,\n  values,\n  processing,\n  onChange,\n  onSearch,\n}: {\n  filters: FilterNode[];\n  values: Record<string, unknown>;\n  processing: boolean;\n  onChange: (key: string, value: unknown) => void;\n  onSearch?: (searchKey: string, query: string, signal?: AbortSignal) => Promise<Option[]>;\n}) {\n  const { t } = useT(\"lattice\");\n  const active = filters.filter((filter) => isActiveFilterValue(values[filter.key]));\n  const filtersLabel = t(\"table.filter.filters\", \"Filters\");\n\n  return (\n    <Popover>\n      <PopoverTrigger asChild>\n        <IconButton\n          size=\"sm\"\n          icon=\"filter\"\n          label={filtersLabel}\n          data-test=\"table-filters-menu\"\n          disabled={processing}\n        >\n          {active.length > 0 && (\n            <span className=\"absolute -right-1 -top-1 inline-flex size-3.5 items-center justify-center rounded-full bg-lt-primary text-[10px] font-medium leading-none text-lt-primary-fg\">\n              {active.length}\n            </span>\n          )}\n        </IconButton>\n      </PopoverTrigger>\n      <PopoverContent align=\"end\" className=\"w-80 p-4\">\n        <div className=\"grid gap-3\">\n          {filters.map((filter) => (\n            <div key={filter.key} className=\"grid gap-1\">\n              <TableFilterControl\n                filter={filter}\n                value={values[filter.key]}\n                processing={processing}\n                onChange={(value) => onChange(filter.key, value)}\n                onSearch={\n                  onSearch\n                    ? (field, query, signal) =>\n                        onSearch(`filter:${filter.key}.${field}`, query, signal)\n                    : undefined\n                }\n              />\n            </div>\n          ))}\n        </div>\n      </PopoverContent>\n    </Popover>\n  );\n}\n"],"mappings":"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"}

package/dist/table/components/filter-controls.js

@@ -102,12 +102,13 @@ function TableFilterCommitBridge({ children, onChange }) {
 		setValue(name, nextValue);
 		onChange(next);
 	}, [onChange, setValue]);
+	const commit = useMemo(() => ({
+		blur: () => {},
+		change: write,
+		commit: write
+	}), [write]);
 	return /* @__PURE__ */ jsx(FieldCommitOverrideProvider, {
-		value: useMemo(() => ({
-			blur: () => {},
-			change: write,
-			commit: write
-		}), [write]),
+		value: commit,
 		children
 	});
 }

package/dist/table/components/filter-controls.js.map

@@ -1 +1 @@
-{"version":3,"file":"filter-controls.js","names":[],"sources":["../../../resources/js/table/components/filter-controls.tsx"],"sourcesContent":["import { useCallback, useMemo, useRef } from \"react\";\nimport type { ReactNode } from \"react\";\nimport { Checkbox } from \"@lattice-php/lattice/ui/checkbox\";\nimport { Renderer } from \"@lattice-php/lattice/core/renderer\";\nimport type { Node, Option } from \"@lattice-php/lattice/core/types\";\nimport {\n  FieldCommitOverrideProvider,\n  FormProvider,\n  FormValuesProvider,\n  getPath,\n  PrefillProvider,\n  ResolvedNodesProvider,\n  setPath,\n  TableCellProvider,\n  useFormValues,\n  useSetFormValue,\n} from \"@lattice-php/lattice/form/embed\";\nimport { IconButton } from \"@lattice-php/lattice/ui/icon-button\";\nimport { useT } from \"@lattice-php/lattice/i18n\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\nimport { isTruthy } from \"@lattice-php/lattice/lib/is-truthy\";\nimport { filterValue, isActiveFilterValue } from \"@lattice-php/lattice/table/lib/filter-values\";\nimport type { FilterNode } from \"@lattice-php/lattice/table/types\";\n\nexport type FilterOptionSearch = (\n  field: string,\n  query: string,\n  signal: AbortSignal,\n) => Promise<Option[]>;\n\ntype FilterValue = Record<string, unknown>;\n\nexport function TableFilterControl({\n  filter,\n  value,\n  processing,\n  bare = false,\n  onChange,\n  onSearch,\n}: {\n  filter: FilterNode;\n  value: unknown;\n  processing: boolean;\n  bare?: boolean;\n  onChange: (value: unknown) => void;\n  onSearch?: FilterOptionSearch;\n}) {\n  const { t } = useT(\"lattice\");\n  const schema = filter.schema ?? [];\n\n  if (schema.length === 0) {\n    return (\n      <ToggleControl filter={filter} value={value} processing={processing} onChange={onChange} />\n    );\n  }\n\n  return (\n    <div className=\"flex items-end gap-2\">\n      <div className=\"min-w-0 flex-1\">\n        <SchemaControl\n          filter={filter}\n          schema={schema}\n          value={value}\n          processing={processing}\n          bare={bare}\n          onChange={onChange}\n          onSearch={onSearch}\n        />\n      </div>\n      {isActiveFilterValue(value) && (\n        <IconButton\n          size=\"md\"\n          icon=\"x\"\n          label={t(\"table.filter.clear\", \"Clear {{label}} filter\", {\n            label: filter.props.label ?? \"\",\n          })}\n          disabled={processing}\n          onClick={() => onChange(undefined)}\n        />\n      )}\n    </div>\n  );\n}\n\nfunction SchemaControl({\n  filter,\n  schema,\n  value,\n  processing,\n  bare,\n  onChange,\n  onSearch,\n}: {\n  filter: FilterNode;\n  schema: Node[];\n  value: unknown;\n  processing: boolean;\n  bare: boolean;\n  onChange: (value: unknown) => void;\n  onSearch?: FilterOptionSearch;\n}) {\n  const initial = useMemo(() => filterValue(value), [value]);\n  const form = useMemo(\n    () => ({\n      action: \"#\",\n      clearErrors: () => {},\n      componentId: `table-filter-${filter.key}`,\n      componentRef: \"\",\n      errors: {},\n      fieldIdPrefix: `table-filter-${filter.key}`,\n      fieldLabels: {},\n      precognitive: false,\n      processing,\n      searchOptions: (\n        field: string,\n        query: string,\n        _values: Record<string, unknown>,\n        signal: AbortSignal,\n      ) => (onSearch ? onSearch(field, query, signal) : Promise.resolve([])),\n      touch: () => {},\n      validate: () => {},\n      validateFields: () => {},\n      validating: false,\n    }),\n    [filter.key, onSearch, processing],\n  );\n\n  const content = (\n    <div\n      aria-disabled={processing}\n      className={cn(\"grid gap-3\", processing && \"pointer-events-none opacity-60\")}\n    >\n      <Renderer nodes={schema} />\n    </div>\n  );\n\n  return (\n    <FormProvider value={form}>\n      <PrefillProvider value={{ markUserEdit: () => {} }}>\n        <ResolvedNodesProvider nodes={{}}>\n          <FormValuesProvider initial={initial}>\n            <TableFilterCommitBridge onChange={onChange}>\n              {bare ? <TableCellProvider>{content}</TableCellProvider> : content}\n            </TableFilterCommitBridge>\n          </FormValuesProvider>\n        </ResolvedNodesProvider>\n      </PrefillProvider>\n    </FormProvider>\n  );\n}\n\nfunction TableFilterCommitBridge({\n  children,\n  onChange,\n}: {\n  children: ReactNode;\n  onChange: (value: FilterValue) => void;\n}) {\n  const values = useFormValues();\n  const setValue = useSetFormValue();\n  const valuesRef = useRef(values);\n  valuesRef.current = values;\n\n  const write = useCallback(\n    (name: string, value: unknown) => {\n      const nextValue =\n        typeof value === \"function\"\n          ? (value as (previous: unknown) => unknown)(getPath(valuesRef.current, name))\n          : value;\n      const next = setPath(valuesRef.current, name, nextValue);\n\n      valuesRef.current = next;\n      setValue(name, nextValue);\n      onChange(next);\n    },\n    [onChange, setValue],\n  );\n\n  const commit = useMemo(\n    () => ({\n      blur: () => {},\n      change: write,\n      commit: write,\n    }),\n    [write],\n  );\n\n  return <FieldCommitOverrideProvider value={commit}>{children}</FieldCommitOverrideProvider>;\n}\n\nfunction ToggleControl({\n  filter,\n  value,\n  processing,\n  onChange,\n}: {\n  filter: FilterNode;\n  value: unknown;\n  processing: boolean;\n  onChange: (value: unknown) => void;\n}) {\n  const checked = isTruthy(filterValue(value).value);\n\n  return (\n    <label className=\"flex h-lt-control-md cursor-pointer items-center gap-2 text-sm\">\n      <Checkbox\n        aria-label={filter.props.label ?? undefined}\n        data-test={`table-filter-${filter.key}`}\n        checked={checked}\n        disabled={processing}\n        onCheckedChange={(next) => onChange(next === true ? { value: \"1\" } : undefined)}\n      />\n      <span>{filter.props.label}</span>\n    </label>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"filter-controls.js","names":[],"sources":["../../../resources/js/table/components/filter-controls.tsx"],"sourcesContent":["import { useCallback, useMemo, useRef } from \"react\";\nimport type { ReactNode } from \"react\";\nimport { Checkbox } from \"@lattice-php/lattice/ui/checkbox\";\nimport { Renderer } from \"@lattice-php/lattice/core/renderer\";\nimport type { Node, Option } from \"@lattice-php/lattice/core/types\";\nimport {\n  FieldCommitOverrideProvider,\n  FormProvider,\n  FormValuesProvider,\n  getPath,\n  PrefillProvider,\n  ResolvedNodesProvider,\n  setPath,\n  TableCellProvider,\n  useFormValues,\n  useSetFormValue,\n} from \"@lattice-php/lattice/form/embed\";\nimport { IconButton } from \"@lattice-php/lattice/ui/icon-button\";\nimport { useT } from \"@lattice-php/lattice/i18n\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\nimport { isTruthy } from \"@lattice-php/lattice/lib/is-truthy\";\nimport { filterValue, isActiveFilterValue } from \"@lattice-php/lattice/table/lib/filter-values\";\nimport type { FilterNode } from \"@lattice-php/lattice/table/types\";\n\nexport type FilterOptionSearch = (\n  field: string,\n  query: string,\n  signal: AbortSignal,\n) => Promise<Option[]>;\n\ntype FilterValue = Record<string, unknown>;\n\nexport function TableFilterControl({\n  filter,\n  value,\n  processing,\n  bare = false,\n  onChange,\n  onSearch,\n}: {\n  filter: FilterNode;\n  value: unknown;\n  processing: boolean;\n  bare?: boolean;\n  onChange: (value: unknown) => void;\n  onSearch?: FilterOptionSearch;\n}) {\n  const { t } = useT(\"lattice\");\n  const schema = filter.schema ?? [];\n\n  if (schema.length === 0) {\n    return (\n      <ToggleControl filter={filter} value={value} processing={processing} onChange={onChange} />\n    );\n  }\n\n  return (\n    <div className=\"flex items-end gap-2\">\n      <div className=\"min-w-0 flex-1\">\n        <SchemaControl\n          filter={filter}\n          schema={schema}\n          value={value}\n          processing={processing}\n          bare={bare}\n          onChange={onChange}\n          onSearch={onSearch}\n        />\n      </div>\n      {isActiveFilterValue(value) && (\n        <IconButton\n          size=\"md\"\n          icon=\"x\"\n          label={t(\"table.filter.clear\", \"Clear {{label}} filter\", {\n            label: filter.props.label ?? \"\",\n          })}\n          disabled={processing}\n          onClick={() => onChange(undefined)}\n        />\n      )}\n    </div>\n  );\n}\n\nfunction SchemaControl({\n  filter,\n  schema,\n  value,\n  processing,\n  bare,\n  onChange,\n  onSearch,\n}: {\n  filter: FilterNode;\n  schema: Node[];\n  value: unknown;\n  processing: boolean;\n  bare: boolean;\n  onChange: (value: unknown) => void;\n  onSearch?: FilterOptionSearch;\n}) {\n  const initial = useMemo(() => filterValue(value), [value]);\n  const form = useMemo(\n    () => ({\n      action: \"#\",\n      clearErrors: () => {},\n      componentId: `table-filter-${filter.key}`,\n      componentRef: \"\",\n      errors: {},\n      fieldIdPrefix: `table-filter-${filter.key}`,\n      fieldLabels: {},\n      precognitive: false,\n      processing,\n      searchOptions: (\n        field: string,\n        query: string,\n        _values: Record<string, unknown>,\n        signal: AbortSignal,\n      ) => (onSearch ? onSearch(field, query, signal) : Promise.resolve([])),\n      touch: () => {},\n      validate: () => {},\n      validateFields: () => {},\n      validating: false,\n    }),\n    [filter.key, onSearch, processing],\n  );\n\n  const content = (\n    <div\n      aria-disabled={processing}\n      className={cn(\"grid gap-3\", processing && \"pointer-events-none opacity-60\")}\n    >\n      <Renderer nodes={schema} />\n    </div>\n  );\n\n  return (\n    <FormProvider value={form}>\n      <PrefillProvider value={{ markUserEdit: () => {} }}>\n        <ResolvedNodesProvider nodes={{}}>\n          <FormValuesProvider initial={initial}>\n            <TableFilterCommitBridge onChange={onChange}>\n              {bare ? <TableCellProvider>{content}</TableCellProvider> : content}\n            </TableFilterCommitBridge>\n          </FormValuesProvider>\n        </ResolvedNodesProvider>\n      </PrefillProvider>\n    </FormProvider>\n  );\n}\n\nfunction TableFilterCommitBridge({\n  children,\n  onChange,\n}: {\n  children: ReactNode;\n  onChange: (value: FilterValue) => void;\n}) {\n  const values = useFormValues();\n  const setValue = useSetFormValue();\n  const valuesRef = useRef(values);\n  valuesRef.current = values;\n\n  const write = useCallback(\n    (name: string, value: unknown) => {\n      const nextValue =\n        typeof value === \"function\"\n          ? (value as (previous: unknown) => unknown)(getPath(valuesRef.current, name))\n          : value;\n      const next = setPath(valuesRef.current, name, nextValue);\n\n      valuesRef.current = next;\n      setValue(name, nextValue);\n      onChange(next);\n    },\n    [onChange, setValue],\n  );\n\n  const commit = useMemo(\n    () => ({\n      blur: () => {},\n      change: write,\n      commit: write,\n    }),\n    [write],\n  );\n\n  return <FieldCommitOverrideProvider value={commit}>{children}</FieldCommitOverrideProvider>;\n}\n\nfunction ToggleControl({\n  filter,\n  value,\n  processing,\n  onChange,\n}: {\n  filter: FilterNode;\n  value: unknown;\n  processing: boolean;\n  onChange: (value: unknown) => void;\n}) {\n  const checked = isTruthy(filterValue(value).value);\n\n  return (\n    <label className=\"flex h-lt-control-md cursor-pointer items-center gap-2 text-sm\">\n      <Checkbox\n        aria-label={filter.props.label ?? undefined}\n        data-test={`table-filter-${filter.key}`}\n        checked={checked}\n        disabled={processing}\n        onCheckedChange={(next) => onChange(next === true ? { value: \"1\" } : undefined)}\n      />\n      <span>{filter.props.label}</span>\n    </label>\n  );\n}\n"],"mappings":"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"}

package/dist/table/components/filter-value-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"filter-value-input.js","names":[],"sources":["../../../resources/js/table/components/filter-value-input.tsx"],"sourcesContent":["import { Icon } from \"@lattice-php/lattice/icons\";\nimport { useEffect, useState } from \"react\";\nimport { IconButton } from \"@lattice-php/lattice/ui/icon-button\";\nimport { Input } from \"@lattice-php/lattice/ui/input\";\nimport { NativeSelect } from \"@lattice-php/lattice/ui/native-select\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\nimport { useT } from \"@lattice-php/lattice/i18n\";\nimport type { FilterType } from \"@lattice-php/lattice/types/generated\";\n\nexport function FilterValueInput({\n  type,\n  label,\n  value,\n  processing,\n  withSearchIcon = false,\n  grouped = false,\n  ariaLabel,\n  testId,\n  onCommit,\n  onClear,\n}: {\n  type: FilterType;\n  label: string;\n  value: string;\n  processing: boolean;\n  withSearchIcon?: boolean;\n  grouped?: boolean;\n  ariaLabel?: string;\n  testId?: string;\n  onCommit: (value: string) => void;\n  onClear?: () => void;\n}) {\n  const { t } = useT(\"lattice\");\n  const [draft, setDraft] = useState(value);\n  const inputLabel = ariaLabel ?? t(\"table.filter.filter-by\", \"Filter {{label}}\", { label });\n  const groupedClass = grouped ? \"rounded-r-none\" : \"\";\n\n  useEffect(() => {\n    setDraft(value);\n  }, [value]);\n\n  if (type === \"boolean\") {\n    return (\n      <NativeSelect\n        density=\"compact\"\n        aria-label={inputLabel}\n        data-test={testId}\n        className={groupedClass}\n        disabled={processing}\n        value={value}\n        onChange={(event) => onCommit(event.target.value)}\n      >\n        <option value=\"\">{t(\"table.filter.all\", \"All\")}</option>\n        <option value=\"true\">{t(\"table.filter.true\", \"True\")}</option>\n        <option value=\"false\">{t(\"table.filter.false\", \"False\")}</option>\n      </NativeSelect>\n    );\n  }\n\n  if (type === \"date\") {\n    return (\n      <Input\n        type=\"date\"\n        density=\"compact\"\n        aria-label={inputLabel}\n        data-test={testId}\n        className={groupedClass}\n        disabled={processing}\n        value={draft}\n        onChange={(event) => {\n          setDraft(event.target.value);\n          onCommit(event.target.value);\n        }}\n      />\n    );\n  }\n\n  return (\n    <div className=\"relative flex w-full min-w-0 items-center\">\n      {withSearchIcon && (\n        <Icon\n          name=\"search\"\n          aria-hidden=\"true\"\n          className=\"pointer-events-none absolute left-2 size-lt-icon-md text-lt-muted-fg\"\n        />\n      )}\n      <Input\n        type={type === \"number\" ? \"number\" : \"text\"}\n        density=\"compact\"\n        aria-label={inputLabel}\n        data-test={testId}\n        className={cn(groupedClass, withSearchIcon && \"pl-8\", onClear && \"pr-8\")}\n        disabled={processing}\n        value={draft}\n        onChange={(event) => setDraft(event.target.value)}\n        onKeyDown={(event) => {\n          if (event.key === \"Enter\") {\n            onCommit(draft);\n          }\n        }}\n        onBlur={() => {\n          if (draft !== value) {\n            onCommit(draft);\n          }\n        }}\n      />\n      {onClear && draft !== \"\" && (\n        <IconButton\n          size=\"xs\"\n          icon=\"x\"\n          label={t(\"table.filter.clear\", \"Clear {{label}} filter\", { label })}\n          data-test={testId ? `${testId}-clear` : undefined}\n          className=\"absolute right-1 size-6\"\n          disabled={processing}\n          onClick={onClear}\n        />\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;AASA,SAAgB,iBAAiB,EAC/B,MACA,OACA,OACA,YACA,iBAAiB,OACjB,UAAU,OACV,WACA,QACA,UACA,WAYC;CACD,MAAM,EAAE,MAAM,KAAK,SAAS;CAC5B,MAAM,CAAC,OAAO,YAAY,SAAS,KAAK;CACxC,MAAM,aAAa,aAAa,EAAE,0BAA0B,oBAAoB,EAAE,MAAM,CAAC;CACzF,MAAM,eAAe,UAAU,mBAAmB;CAElD,gBAAgB;EACd,SAAS,KAAK;CAChB,GAAG,CAAC,KAAK,CAAC;CAEV,IAAI,SAAS,WACX,OACE,qBAAC,cAAD;EACE,SAAQ;EACR,cAAY;EACZ,aAAW;EACX,WAAW;EACX,UAAU;EACH;EACP,WAAW,UAAU,SAAS,MAAM,OAAO,KAAK;YAPlD;GASE,oBAAC,UAAD;IAAQ,OAAM;cAAI,EAAE,oBAAoB,KAAK;GAAU,CAAA;GACvD,oBAAC,UAAD;IAAQ,OAAM;cAAQ,EAAE,qBAAqB,MAAM;GAAU,CAAA;GAC7D,oBAAC,UAAD;IAAQ,OAAM;cAAS,EAAE,sBAAsB,OAAO;GAAU,CAAA;EACpD;;CAIlB,IAAI,SAAS,QACX,OACE,oBAAC,OAAD;EACE,MAAK;EACL,SAAQ;EACR,cAAY;EACZ,aAAW;EACX,WAAW;EACX,UAAU;EACV,OAAO;EACP,WAAW,UAAU;GACnB,SAAS,MAAM,OAAO,KAAK;GAC3B,SAAS,MAAM,OAAO,KAAK;EAC7B;CACD,CAAA;CAIL,OACE,qBAAC,OAAD;EAAK,WAAU;YAAf;GACG,kBACC,oBAAC,MAAD;IACE,MAAK;IACL,eAAY;IACZ,WAAU;GACX,CAAA;GAEH,oBAAC,OAAD;IACE,MAAM,SAAS,WAAW,WAAW;IACrC,SAAQ;IACR,cAAY;IACZ,aAAW;IACX,WAAW,GAAG,cAAc,kBAAkB,QAAQ,WAAW,MAAM;IACvE,UAAU;IACV,OAAO;IACP,WAAW,UAAU,SAAS,MAAM,OAAO,KAAK;IAChD,YAAY,UAAU;KACpB,IAAI,MAAM,QAAQ,SAChB,SAAS,KAAK;IAElB;IACA,cAAc;KACZ,IAAI,UAAU,OACZ,SAAS,KAAK;IAElB;GACD,CAAA;GACA,WAAW,UAAU,MACpB,oBAAC,YAAD;IACE,MAAK;IACL,MAAK;IACL,OAAO,EAAE,sBAAsB,0BAA0B,EAAE,MAAM,CAAC;IAClE,aAAW,SAAS,GAAG,OAAO,UAAU,KAAA;IACxC,WAAU;IACV,UAAU;IACV,SAAS;GACV,CAAA;EAEA;;AAET"}
+{"version":3,"file":"filter-value-input.js","names":[],"sources":["../../../resources/js/table/components/filter-value-input.tsx"],"sourcesContent":["import { Icon } from \"@lattice-php/lattice/icons\";\nimport { useEffect, useState } from \"react\";\nimport { IconButton } from \"@lattice-php/lattice/ui/icon-button\";\nimport { Input } from \"@lattice-php/lattice/ui/input\";\nimport { NativeSelect } from \"@lattice-php/lattice/ui/native-select\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\nimport { useT } from \"@lattice-php/lattice/i18n\";\nimport type { FilterType } from \"@lattice-php/lattice/types/generated\";\n\nexport function FilterValueInput({\n  type,\n  label,\n  value,\n  processing,\n  withSearchIcon = false,\n  grouped = false,\n  ariaLabel,\n  testId,\n  onCommit,\n  onClear,\n}: {\n  type: FilterType;\n  label: string;\n  value: string;\n  processing: boolean;\n  withSearchIcon?: boolean;\n  grouped?: boolean;\n  ariaLabel?: string;\n  testId?: string;\n  onCommit: (value: string) => void;\n  onClear?: () => void;\n}) {\n  const { t } = useT(\"lattice\");\n  const [draft, setDraft] = useState(value);\n  const inputLabel = ariaLabel ?? t(\"table.filter.filter-by\", \"Filter {{label}}\", { label });\n  const groupedClass = grouped ? \"rounded-r-none\" : \"\";\n\n  useEffect(() => {\n    setDraft(value);\n  }, [value]);\n\n  if (type === \"boolean\") {\n    return (\n      <NativeSelect\n        density=\"compact\"\n        aria-label={inputLabel}\n        data-test={testId}\n        className={groupedClass}\n        disabled={processing}\n        value={value}\n        onChange={(event) => onCommit(event.target.value)}\n      >\n        <option value=\"\">{t(\"table.filter.all\", \"All\")}</option>\n        <option value=\"true\">{t(\"table.filter.true\", \"True\")}</option>\n        <option value=\"false\">{t(\"table.filter.false\", \"False\")}</option>\n      </NativeSelect>\n    );\n  }\n\n  if (type === \"date\") {\n    return (\n      <Input\n        type=\"date\"\n        density=\"compact\"\n        aria-label={inputLabel}\n        data-test={testId}\n        className={groupedClass}\n        disabled={processing}\n        value={draft}\n        onChange={(event) => {\n          setDraft(event.target.value);\n          onCommit(event.target.value);\n        }}\n      />\n    );\n  }\n\n  return (\n    <div className=\"relative flex w-full min-w-0 items-center\">\n      {withSearchIcon && (\n        <Icon\n          name=\"search\"\n          aria-hidden=\"true\"\n          className=\"pointer-events-none absolute left-2 size-lt-icon-md text-lt-muted-fg\"\n        />\n      )}\n      <Input\n        type={type === \"number\" ? \"number\" : \"text\"}\n        density=\"compact\"\n        aria-label={inputLabel}\n        data-test={testId}\n        className={cn(groupedClass, withSearchIcon && \"pl-8\", onClear && \"pr-8\")}\n        disabled={processing}\n        value={draft}\n        onChange={(event) => setDraft(event.target.value)}\n        onKeyDown={(event) => {\n          if (event.key === \"Enter\") {\n            onCommit(draft);\n          }\n        }}\n        onBlur={() => {\n          if (draft !== value) {\n            onCommit(draft);\n          }\n        }}\n      />\n      {onClear && draft !== \"\" && (\n        <IconButton\n          size=\"xs\"\n          icon=\"x\"\n          label={t(\"table.filter.clear\", \"Clear {{label}} filter\", { label })}\n          data-test={testId ? `${testId}-clear` : undefined}\n          className=\"absolute right-1 size-6\"\n          disabled={processing}\n          onClick={onClear}\n        />\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;AASA,SAAgB,iBAAiB,EAC/B,MACA,OACA,OACA,YACA,iBAAiB,OACjB,UAAU,OACV,WACA,QACA,UACA,WAYC;CACD,MAAM,EAAE,MAAM,KAAK,SAAS;CAC5B,MAAM,CAAC,OAAO,YAAY,SAAS,KAAK;CACxC,MAAM,aAAa,aAAa,EAAE,0BAA0B,oBAAoB,EAAE,MAAM,CAAC;CACzF,MAAM,eAAe,UAAU,mBAAmB;CAElD,gBAAgB;EACd,SAAS,KAAK;CAChB,GAAG,CAAC,KAAK,CAAC;CAEV,IAAI,SAAS,WACX,OACE,qBAAC,cAAD;EACE,SAAQ;EACR,cAAY;EACZ,aAAW;EACX,WAAW;EACX,UAAU;EACH;EACP,WAAW,UAAU,SAAS,MAAM,OAAO,KAAK;EAPlD,UAAA;GASE,oBAAC,UAAD;IAAQ,OAAM;IAAI,UAAA,EAAE,oBAAoB,KAAK;GAAU,CAAA;GACvD,oBAAC,UAAD;IAAQ,OAAM;IAAQ,UAAA,EAAE,qBAAqB,MAAM;GAAU,CAAA;GAC7D,oBAAC,UAAD;IAAQ,OAAM;IAAS,UAAA,EAAE,sBAAsB,OAAO;GAAU,CAAA;EACpD;;CAIlB,IAAI,SAAS,QACX,OACE,oBAAC,OAAD;EACE,MAAK;EACL,SAAQ;EACR,cAAY;EACZ,aAAW;EACX,WAAW;EACX,UAAU;EACV,OAAO;EACP,WAAW,UAAU;GACnB,SAAS,MAAM,OAAO,KAAK;GAC3B,SAAS,MAAM,OAAO,KAAK;EAC7B;CACD,CAAA;CAIL,OACE,qBAAC,OAAD;EAAK,WAAU;EAAf,UAAA;GACG,kBACC,oBAAC,MAAD;IACE,MAAK;IACL,eAAY;IACZ,WAAU;GACX,CAAA;GAEH,oBAAC,OAAD;IACE,MAAM,SAAS,WAAW,WAAW;IACrC,SAAQ;IACR,cAAY;IACZ,aAAW;IACX,WAAW,GAAG,cAAc,kBAAkB,QAAQ,WAAW,MAAM;IACvE,UAAU;IACV,OAAO;IACP,WAAW,UAAU,SAAS,MAAM,OAAO,KAAK;IAChD,YAAY,UAAU;KACpB,IAAI,MAAM,QAAQ,SAChB,SAAS,KAAK;IAElB;IACA,cAAc;KACZ,IAAI,UAAU,OACZ,SAAS,KAAK;IAElB;GACD,CAAA;GACA,WAAW,UAAU,MACpB,oBAAC,YAAD;IACE,MAAK;IACL,MAAK;IACL,OAAO,EAAE,sBAAsB,0BAA0B,EAAE,MAAM,CAAC;IAClE,aAAW,SAAS,GAAG,OAAO,UAAU,KAAA;IACxC,WAAU;IACV,UAAU;IACV,SAAS;GACV,CAAA;EAEA;;AAET"}

package/dist/table/components/pagination.d.ts

@@ -1,7 +1,8 @@
 import { RefObject } from 'react';
 import { PaginationType } from '../../types/generated.js';
+import { PerPageOption } from '../lib/payload.js';
 import { TablePagination as TablePaginationData } from '../types.js';
-export declare function TablePagination({ pagination, currentPage, processing, mode, hasNextPage, visiblePages, infiniteLoaderRef, onPage, onLoadMore, }: {
+export declare function TablePagination({ pagination, currentPage, processing, mode, hasNextPage, visiblePages, infiniteLoaderRef, perPageOptions, perPageValue, onPerPage, onPage, onLoadMore, }: {
     pagination: TablePaginationData;
     currentPage: number;
     processing: boolean;
@@ -9,6 +10,9 @@ export declare function TablePagination({ pagination, currentPage, processing, m
     hasNextPage: boolean;
     visiblePages: number[];
     infiniteLoaderRef: RefObject<HTMLDivElement | null>;
+    perPageOptions: PerPageOption[];
+    perPageValue: PerPageOption;
+    onPerPage: (option: PerPageOption) => void;
     onPage: (page: number) => void;
     onLoadMore: () => void;
 }): import("react").JSX.Element;

package/dist/table/components/pagination.js

@@ -1,17 +1,36 @@
 import { useT } from "../../i18n/instance.js";
 import { Button } from "../../ui/button.js";
+import { NativeSelect } from "../../ui/native-select.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region resources/js/table/components/pagination.tsx
-function TablePagination({ pagination, currentPage, processing, mode, hasNextPage, visiblePages, infiniteLoaderRef, onPage, onLoadMore }) {
+function TablePagination({ pagination, currentPage, processing, mode, hasNextPage, visiblePages, infiniteLoaderRef, perPageOptions, perPageValue, onPerPage, onPage, onLoadMore }) {
 	const { t } = useT("lattice");
 	return /* @__PURE__ */ jsxs("div", {
 		"data-slot": "table-pagination",
 		className: "flex items-center justify-between gap-3 border-t border-lt-border p-4 text-sm",
-		children: [/* @__PURE__ */ jsx("span", { children: pagination.total == null ? t("table.pagination.page", "Page {{page}}", { page: currentPage }) : t("table.pagination.showing", "Showing {{from}}-{{to}} of {{total}}", {
-			from: pagination.from ?? 0,
-			to: pagination.to ?? 0,
-			total: pagination.total
-		}) }), mode === "infinite" ? /* @__PURE__ */ jsx("div", {
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-4",
+			children: [/* @__PURE__ */ jsx("span", { children: pagination.total == null ? t("table.pagination.page", "Page {{page}}", { page: currentPage }) : t("table.pagination.showing", "Showing {{from}}-{{to}} of {{total}}", {
+				from: pagination.from ?? 0,
+				to: pagination.to ?? 0,
+				total: pagination.total
+			}) }), perPageOptions.length > 0 && mode !== "none" && /* @__PURE__ */ jsxs("label", {
+				className: "flex items-center gap-2",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "text-lt-muted-fg",
+					children: t("table.pagination.per-page", "Rows per page")
+				}), /* @__PURE__ */ jsx(NativeSelect, {
+					"data-test": "pagination-per-page",
+					disabled: processing,
+					value: String(perPageValue),
+					onChange: (event) => onPerPage(event.target.value === "infinite" ? "infinite" : Number(event.target.value)),
+					children: perPageOptions.map((option) => /* @__PURE__ */ jsx("option", {
+						value: String(option),
+						children: option === "infinite" ? t("table.pagination.infinite", "Infinite") : option
+					}, String(option)))
+				})]
+			})]
+		}), mode === "infinite" ? /* @__PURE__ */ jsx("div", {
 			ref: infiniteLoaderRef,
 			className: "flex items-center gap-2",
 			children: pagination.hasMore ? /* @__PURE__ */ jsx(Button, {

package/dist/table/components/pagination.js.map

@@ -1 +1 @@
-{"version":3,"file":"pagination.js","names":[],"sources":["../../../resources/js/table/components/pagination.tsx"],"sourcesContent":["import type { RefObject } from \"react\";\nimport { Button } from \"@lattice-php/lattice/ui/button\";\nimport { useT } from \"@lattice-php/lattice/i18n\";\nimport type { PaginationType } from \"@lattice-php/lattice/types/generated\";\nimport type { TablePagination as TablePaginationData } from \"@lattice-php/lattice/table/types\";\n\nexport function TablePagination({\n  pagination,\n  currentPage,\n  processing,\n  mode,\n  hasNextPage,\n  visiblePages,\n  infiniteLoaderRef,\n  onPage,\n  onLoadMore,\n}: {\n  pagination: TablePaginationData;\n  currentPage: number;\n  processing: boolean;\n  mode: PaginationType;\n  hasNextPage: boolean;\n  visiblePages: number[];\n  infiniteLoaderRef: RefObject<HTMLDivElement | null>;\n  onPage: (page: number) => void;\n  onLoadMore: () => void;\n}) {\n  const { t } = useT(\"lattice\");\n\n  return (\n    <div\n      data-slot=\"table-pagination\"\n      className=\"flex items-center justify-between gap-3 border-t border-lt-border p-4 text-sm\"\n    >\n      <span>\n        {pagination.total == null\n          ? t(\"table.pagination.page\", \"Page {{page}}\", { page: currentPage })\n          : t(\"table.pagination.showing\", \"Showing {{from}}-{{to}} of {{total}}\", {\n              from: pagination.from ?? 0,\n              to: pagination.to ?? 0,\n              total: pagination.total,\n            })}\n      </span>\n      {mode === \"infinite\" ? (\n        <div ref={infiniteLoaderRef} className=\"flex items-center gap-2\">\n          {pagination.hasMore ? (\n            <Button\n              emphasis=\"outline\"\n              data-test=\"pagination-load-more\"\n              disabled={processing}\n              onClick={onLoadMore}\n            >\n              {processing\n                ? t(\"table.pagination.loading\", \"Loading...\")\n                : t(\"table.pagination.load-more\", \"Load more\")}\n            </Button>\n          ) : (\n            <span className=\"text-lt-muted-fg\">\n              {t(\"table.pagination.all-loaded\", \"All rows loaded\")}\n            </span>\n          )}\n        </div>\n      ) : mode === \"simple\" ? (\n        <div className=\"flex items-center gap-2\">\n          <Button\n            emphasis=\"outline\"\n            data-test=\"pagination-previous\"\n            disabled={processing || currentPage <= 1}\n            onClick={() => onPage(currentPage - 1)}\n          >\n            {t(\"table.pagination.previous\", \"Previous\")}\n          </Button>\n          <Button\n            emphasis=\"outline\"\n            data-test=\"pagination-next\"\n            disabled={processing || !hasNextPage}\n            onClick={() => onPage(currentPage + 1)}\n          >\n            {t(\"table.pagination.next\", \"Next\")}\n          </Button>\n        </div>\n      ) : mode === \"table\" ? (\n        <div className=\"flex items-center gap-2\">\n          <Button\n            emphasis=\"outline\"\n            data-test=\"pagination-previous\"\n            disabled={processing || currentPage <= 1}\n            onClick={() => onPage(currentPage - 1)}\n          >\n            {t(\"table.pagination.previous\", \"Previous\")}\n          </Button>\n          {visiblePages.map((pageNumber) => (\n            <Button\n              key={pageNumber}\n              emphasis=\"outline\"\n              size=\"icon\"\n              data-test={`pagination-page-${pageNumber}`}\n              disabled={processing || pageNumber === currentPage}\n              aria-current={pageNumber === currentPage ? \"page\" : undefined}\n              aria-label={t(\"table.pagination.page\", \"Page {{page}}\", { page: pageNumber })}\n              onClick={() => onPage(pageNumber)}\n            >\n              {pageNumber}\n            </Button>\n          ))}\n          <Button\n            emphasis=\"outline\"\n            data-test=\"pagination-next\"\n            disabled={processing || !hasNextPage}\n            onClick={() => onPage(currentPage + 1)}\n          >\n            {t(\"table.pagination.next\", \"Next\")}\n          </Button>\n        </div>\n      ) : null}\n    </div>\n  );\n}\n"],"mappings":";;;;AAMA,SAAgB,gBAAgB,EAC9B,YACA,aACA,YACA,MACA,aACA,cACA,mBACA,QACA,cAWC;CACD,MAAM,EAAE,MAAM,KAAK,SAAS;CAE5B,OACE,qBAAC,OAAD;EACE,aAAU;EACV,WAAU;YAFZ,CAIE,oBAAC,QAAD,EAAA,UACG,WAAW,SAAS,OACjB,EAAE,yBAAyB,iBAAiB,EAAE,MAAM,YAAY,CAAC,IACjE,EAAE,4BAA4B,wCAAwC;GACpE,MAAM,WAAW,QAAQ;GACzB,IAAI,WAAW,MAAM;GACrB,OAAO,WAAW;EACpB,CAAC,EACD,CAAA,GACL,SAAS,aACR,oBAAC,OAAD;GAAK,KAAK;GAAmB,WAAU;aACpC,WAAW,UACV,oBAAC,QAAD;IACE,UAAS;IACT,aAAU;IACV,UAAU;IACV,SAAS;cAER,aACG,EAAE,4BAA4B,YAAY,IAC1C,EAAE,8BAA8B,WAAW;GACzC,CAAA,IAER,oBAAC,QAAD;IAAM,WAAU;cACb,EAAE,+BAA+B,iBAAiB;GAC/C,CAAA;EAEL,CAAA,IACH,SAAS,WACX,qBAAC,OAAD;GAAK,WAAU;aAAf,CACE,oBAAC,QAAD;IACE,UAAS;IACT,aAAU;IACV,UAAU,cAAc,eAAe;IACvC,eAAe,OAAO,cAAc,CAAC;cAEpC,EAAE,6BAA6B,UAAU;GACpC,CAAA,GACR,oBAAC,QAAD;IACE,UAAS;IACT,aAAU;IACV,UAAU,cAAc,CAAC;IACzB,eAAe,OAAO,cAAc,CAAC;cAEpC,EAAE,yBAAyB,MAAM;GAC5B,CAAA,CACL;OACH,SAAS,UACX,qBAAC,OAAD;GAAK,WAAU;aAAf;IACE,oBAAC,QAAD;KACE,UAAS;KACT,aAAU;KACV,UAAU,cAAc,eAAe;KACvC,eAAe,OAAO,cAAc,CAAC;eAEpC,EAAE,6BAA6B,UAAU;IACpC,CAAA;IACP,aAAa,KAAK,eACjB,oBAAC,QAAD;KAEE,UAAS;KACT,MAAK;KACL,aAAW,mBAAmB;KAC9B,UAAU,cAAc,eAAe;KACvC,gBAAc,eAAe,cAAc,SAAS,KAAA;KACpD,cAAY,EAAE,yBAAyB,iBAAiB,EAAE,MAAM,WAAW,CAAC;KAC5E,eAAe,OAAO,UAAU;eAE/B;IACK,GAVD,UAUC,CACT;IACD,oBAAC,QAAD;KACE,UAAS;KACT,aAAU;KACV,UAAU,cAAc,CAAC;KACzB,eAAe,OAAO,cAAc,CAAC;eAEpC,EAAE,yBAAyB,MAAM;IAC5B,CAAA;GACL;OACH,IACD;;AAET"}
+{"version":3,"file":"pagination.js","names":[],"sources":["../../../resources/js/table/components/pagination.tsx"],"sourcesContent":["import type { RefObject } from \"react\";\nimport { Button } from \"@lattice-php/lattice/ui/button\";\nimport { NativeSelect } from \"@lattice-php/lattice/ui/native-select\";\nimport { useT } from \"@lattice-php/lattice/i18n\";\nimport type { PaginationType } from \"@lattice-php/lattice/types/generated\";\nimport type { PerPageOption } from \"@lattice-php/lattice/table/lib/payload\";\nimport type { TablePagination as TablePaginationData } from \"@lattice-php/lattice/table/types\";\n\nexport function TablePagination({\n  pagination,\n  currentPage,\n  processing,\n  mode,\n  hasNextPage,\n  visiblePages,\n  infiniteLoaderRef,\n  perPageOptions,\n  perPageValue,\n  onPerPage,\n  onPage,\n  onLoadMore,\n}: {\n  pagination: TablePaginationData;\n  currentPage: number;\n  processing: boolean;\n  mode: PaginationType;\n  hasNextPage: boolean;\n  visiblePages: number[];\n  infiniteLoaderRef: RefObject<HTMLDivElement | null>;\n  perPageOptions: PerPageOption[];\n  perPageValue: PerPageOption;\n  onPerPage: (option: PerPageOption) => void;\n  onPage: (page: number) => void;\n  onLoadMore: () => void;\n}) {\n  const { t } = useT(\"lattice\");\n\n  return (\n    <div\n      data-slot=\"table-pagination\"\n      className=\"flex items-center justify-between gap-3 border-t border-lt-border p-4 text-sm\"\n    >\n      <div className=\"flex items-center gap-4\">\n        <span>\n          {pagination.total == null\n            ? t(\"table.pagination.page\", \"Page {{page}}\", { page: currentPage })\n            : t(\"table.pagination.showing\", \"Showing {{from}}-{{to}} of {{total}}\", {\n                from: pagination.from ?? 0,\n                to: pagination.to ?? 0,\n                total: pagination.total,\n              })}\n        </span>\n        {perPageOptions.length > 0 && mode !== \"none\" && (\n          <label className=\"flex items-center gap-2\">\n            <span className=\"text-lt-muted-fg\">\n              {t(\"table.pagination.per-page\", \"Rows per page\")}\n            </span>\n            <NativeSelect\n              data-test=\"pagination-per-page\"\n              disabled={processing}\n              value={String(perPageValue)}\n              onChange={(event) =>\n                onPerPage(\n                  event.target.value === \"infinite\" ? \"infinite\" : Number(event.target.value),\n                )\n              }\n            >\n              {perPageOptions.map((option) => (\n                <option key={String(option)} value={String(option)}>\n                  {option === \"infinite\" ? t(\"table.pagination.infinite\", \"Infinite\") : option}\n                </option>\n              ))}\n            </NativeSelect>\n          </label>\n        )}\n      </div>\n      {mode === \"infinite\" ? (\n        <div ref={infiniteLoaderRef} className=\"flex items-center gap-2\">\n          {pagination.hasMore ? (\n            <Button\n              emphasis=\"outline\"\n              data-test=\"pagination-load-more\"\n              disabled={processing}\n              onClick={onLoadMore}\n            >\n              {processing\n                ? t(\"table.pagination.loading\", \"Loading...\")\n                : t(\"table.pagination.load-more\", \"Load more\")}\n            </Button>\n          ) : (\n            <span className=\"text-lt-muted-fg\">\n              {t(\"table.pagination.all-loaded\", \"All rows loaded\")}\n            </span>\n          )}\n        </div>\n      ) : mode === \"simple\" ? (\n        <div className=\"flex items-center gap-2\">\n          <Button\n            emphasis=\"outline\"\n            data-test=\"pagination-previous\"\n            disabled={processing || currentPage <= 1}\n            onClick={() => onPage(currentPage - 1)}\n          >\n            {t(\"table.pagination.previous\", \"Previous\")}\n          </Button>\n          <Button\n            emphasis=\"outline\"\n            data-test=\"pagination-next\"\n            disabled={processing || !hasNextPage}\n            onClick={() => onPage(currentPage + 1)}\n          >\n            {t(\"table.pagination.next\", \"Next\")}\n          </Button>\n        </div>\n      ) : mode === \"table\" ? (\n        <div className=\"flex items-center gap-2\">\n          <Button\n            emphasis=\"outline\"\n            data-test=\"pagination-previous\"\n            disabled={processing || currentPage <= 1}\n            onClick={() => onPage(currentPage - 1)}\n          >\n            {t(\"table.pagination.previous\", \"Previous\")}\n          </Button>\n          {visiblePages.map((pageNumber) => (\n            <Button\n              key={pageNumber}\n              emphasis=\"outline\"\n              size=\"icon\"\n              data-test={`pagination-page-${pageNumber}`}\n              disabled={processing || pageNumber === currentPage}\n              aria-current={pageNumber === currentPage ? \"page\" : undefined}\n              aria-label={t(\"table.pagination.page\", \"Page {{page}}\", { page: pageNumber })}\n              onClick={() => onPage(pageNumber)}\n            >\n              {pageNumber}\n            </Button>\n          ))}\n          <Button\n            emphasis=\"outline\"\n            data-test=\"pagination-next\"\n            disabled={processing || !hasNextPage}\n            onClick={() => onPage(currentPage + 1)}\n          >\n            {t(\"table.pagination.next\", \"Next\")}\n          </Button>\n        </div>\n      ) : null}\n    </div>\n  );\n}\n"],"mappings":";;;;;AAQA,SAAgB,gBAAgB,EAC9B,YACA,aACA,YACA,MACA,aACA,cACA,mBACA,gBACA,cACA,WACA,QACA,cAcC;CACD,MAAM,EAAE,MAAM,KAAK,SAAS;CAE5B,OACE,qBAAC,OAAD;EACE,aAAU;EACV,WAAU;EAFZ,UAAA,CAIE,qBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACE,oBAAC,QAAD,EAAA,UACG,WAAW,SAAS,OACjB,EAAE,yBAAyB,iBAAiB,EAAE,MAAM,YAAY,CAAC,IACjE,EAAE,4BAA4B,wCAAwC;IACpE,MAAM,WAAW,QAAQ;IACzB,IAAI,WAAW,MAAM;IACrB,OAAO,WAAW;GACpB,CAAC,EACD,CAAA,GACL,eAAe,SAAS,KAAK,SAAS,UACrC,qBAAC,SAAD;IAAO,WAAU;IAAjB,UAAA,CACE,oBAAC,QAAD;KAAM,WAAU;KACb,UAAA,EAAE,6BAA6B,eAAe;IAC3C,CAAA,GACN,oBAAC,cAAD;KACE,aAAU;KACV,UAAU;KACV,OAAO,OAAO,YAAY;KAC1B,WAAW,UACT,UACE,MAAM,OAAO,UAAU,aAAa,aAAa,OAAO,MAAM,OAAO,KAAK,CAC5E;KAGD,UAAA,eAAe,KAAK,WACnB,oBAAC,UAAD;MAA6B,OAAO,OAAO,MAAM;MAC9C,UAAA,WAAW,aAAa,EAAE,6BAA6B,UAAU,IAAI;KAChE,GAFK,OAAO,MAAM,CAElB,CACT;IACW,CAAA,CACT;GAEN,CAAA,CAAA;EACJ,CAAA,GAAA,SAAS,aACR,oBAAC,OAAD;GAAK,KAAK;GAAmB,WAAU;GACpC,UAAA,WAAW,UACV,oBAAC,QAAD;IACE,UAAS;IACT,aAAU;IACV,UAAU;IACV,SAAS;IAER,UAAA,aACG,EAAE,4BAA4B,YAAY,IAC1C,EAAE,8BAA8B,WAAW;GACzC,CAAA,IAER,oBAAC,QAAD;IAAM,WAAU;IACb,UAAA,EAAE,+BAA+B,iBAAiB;GAC/C,CAAA;EAEL,CAAA,IACH,SAAS,WACX,qBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACE,oBAAC,QAAD;IACE,UAAS;IACT,aAAU;IACV,UAAU,cAAc,eAAe;IACvC,eAAe,OAAO,cAAc,CAAC;IAEpC,UAAA,EAAE,6BAA6B,UAAU;GACpC,CAAA,GACR,oBAAC,QAAD;IACE,UAAS;IACT,aAAU;IACV,UAAU,cAAc,CAAC;IACzB,eAAe,OAAO,cAAc,CAAC;IAEpC,UAAA,EAAE,yBAAyB,MAAM;GAC5B,CAAA,CACL;EACH,CAAA,IAAA,SAAS,UACX,qBAAC,OAAD;GAAK,WAAU;GAAf,UAAA;IACE,oBAAC,QAAD;KACE,UAAS;KACT,aAAU;KACV,UAAU,cAAc,eAAe;KACvC,eAAe,OAAO,cAAc,CAAC;KAEpC,UAAA,EAAE,6BAA6B,UAAU;IACpC,CAAA;IACP,aAAa,KAAK,eACjB,oBAAC,QAAD;KAEE,UAAS;KACT,MAAK;KACL,aAAW,mBAAmB;KAC9B,UAAU,cAAc,eAAe;KACvC,gBAAc,eAAe,cAAc,SAAS,KAAA;KACpD,cAAY,EAAE,yBAAyB,iBAAiB,EAAE,MAAM,WAAW,CAAC;KAC5E,eAAe,OAAO,UAAU;KAE/B,UAAA;IACK,GAVD,UAUC,CACT;IACD,oBAAC,QAAD;KACE,UAAS;KACT,aAAU;KACV,UAAU,cAAc,CAAC;KACzB,eAAe,OAAO,cAAc,CAAC;KAEpC,UAAA,EAAE,yBAAyB,MAAM;IAC5B,CAAA;GACL;EACH,CAAA,IAAA,IACD;;AAET"}

package/dist/table/components/sort-bar.js.map

@@ -1 +1 @@
-{"version":3,"file":"sort-bar.js","names":[],"sources":["../../../resources/js/table/components/sort-bar.tsx"],"sourcesContent":["import { Icon } from \"@lattice-php/lattice/icons\";\nimport { IconButton } from \"@lattice-php/lattice/ui/icon-button\";\nimport { useT } from \"@lattice-php/lattice/i18n\";\nimport { getSortDirectionLabel } from \"@lattice-php/lattice/table/lib/query\";\nimport type { TableColumn, TableSort, TableQuery } from \"@lattice-php/lattice/table/types\";\n\nexport function SortBar({\n  columnsByKey,\n  query,\n  processing,\n  onClear,\n}: {\n  columnsByKey: Map<string, TableColumn>;\n  query: TableQuery;\n  processing: boolean;\n  onClear: (sort: TableSort) => void;\n}) {\n  const { t } = useT(\"lattice\");\n\n  return (\n    <div className=\"flex flex-wrap items-center gap-4 border-b border-lt-border px-4 py-2.5 text-sm\">\n      {query.sorts.map((sort, index) => {\n        const column = columnsByKey.get(sort.key);\n        const label = column?.props.label ?? sort.key;\n        const arrow = sort.direction === \"desc\" ? \"arrow-down\" : \"arrow-up\";\n\n        return (\n          <span key={sort.key} className=\"inline-flex items-center gap-1.5\">\n            <span className=\"font-medium\">{`${index + 1}. ${label}`}</span>\n            <Icon\n              name={arrow}\n              role=\"img\"\n              aria-hidden={false}\n              aria-label={getSortDirectionLabel(sort.direction)}\n              className=\"size-lt-icon-sm text-lt-muted-fg\"\n            />\n            <IconButton\n              size=\"xs\"\n              icon=\"x\"\n              label={t(\"table.sort.clear\", \"Clear {{label}} sort\", { label })}\n              data-test={`clear-${sort.key}-sort`}\n              disabled={processing}\n              onClick={() => onClear(sort)}\n            />\n          </span>\n        );\n      })}\n    </div>\n  );\n}\n"],"mappings":";;;;;;AAMA,SAAgB,QAAQ,EACtB,cACA,OACA,YACA,WAMC;CACD,MAAM,EAAE,MAAM,KAAK,SAAS;CAE5B,OACE,oBAAC,OAAD;EAAK,WAAU;YACZ,MAAM,MAAM,KAAK,MAAM,UAAU;GAEhC,MAAM,QADS,aAAa,IAAI,KAAK,GACvB,GAAQ,MAAM,SAAS,KAAK;GAC1C,MAAM,QAAQ,KAAK,cAAc,SAAS,eAAe;GAEzD,OACE,qBAAC,QAAD;IAAqB,WAAU;cAA/B;KACE,oBAAC,QAAD;MAAM,WAAU;gBAAe,GAAG,QAAQ,EAAE,IAAI;KAAc,CAAA;KAC9D,oBAAC,MAAD;MACE,MAAM;MACN,MAAK;MACL,eAAa;MACb,cAAY,sBAAsB,KAAK,SAAS;MAChD,WAAU;KACX,CAAA;KACD,oBAAC,YAAD;MACE,MAAK;MACL,MAAK;MACL,OAAO,EAAE,oBAAoB,wBAAwB,EAAE,MAAM,CAAC;MAC9D,aAAW,SAAS,KAAK,IAAI;MAC7B,UAAU;MACV,eAAe,QAAQ,IAAI;KAC5B,CAAA;IACG;MAjBK,KAAK,GAiBV;EAEV,CAAC;CACE,CAAA;AAET"}
+{"version":3,"file":"sort-bar.js","names":[],"sources":["../../../resources/js/table/components/sort-bar.tsx"],"sourcesContent":["import { Icon } from \"@lattice-php/lattice/icons\";\nimport { IconButton } from \"@lattice-php/lattice/ui/icon-button\";\nimport { useT } from \"@lattice-php/lattice/i18n\";\nimport { getSortDirectionLabel } from \"@lattice-php/lattice/table/lib/query\";\nimport type { TableColumn, TableSort, TableQuery } from \"@lattice-php/lattice/table/types\";\n\nexport function SortBar({\n  columnsByKey,\n  query,\n  processing,\n  onClear,\n}: {\n  columnsByKey: Map<string, TableColumn>;\n  query: TableQuery;\n  processing: boolean;\n  onClear: (sort: TableSort) => void;\n}) {\n  const { t } = useT(\"lattice\");\n\n  return (\n    <div className=\"flex flex-wrap items-center gap-4 border-b border-lt-border px-4 py-2.5 text-sm\">\n      {query.sorts.map((sort, index) => {\n        const column = columnsByKey.get(sort.key);\n        const label = column?.props.label ?? sort.key;\n        const arrow = sort.direction === \"desc\" ? \"arrow-down\" : \"arrow-up\";\n\n        return (\n          <span key={sort.key} className=\"inline-flex items-center gap-1.5\">\n            <span className=\"font-medium\">{`${index + 1}. ${label}`}</span>\n            <Icon\n              name={arrow}\n              role=\"img\"\n              aria-hidden={false}\n              aria-label={getSortDirectionLabel(sort.direction)}\n              className=\"size-lt-icon-sm text-lt-muted-fg\"\n            />\n            <IconButton\n              size=\"xs\"\n              icon=\"x\"\n              label={t(\"table.sort.clear\", \"Clear {{label}} sort\", { label })}\n              data-test={`clear-${sort.key}-sort`}\n              disabled={processing}\n              onClick={() => onClear(sort)}\n            />\n          </span>\n        );\n      })}\n    </div>\n  );\n}\n"],"mappings":";;;;;;AAMA,SAAgB,QAAQ,EACtB,cACA,OACA,YACA,WAMC;CACD,MAAM,EAAE,MAAM,KAAK,SAAS;CAE5B,OACE,oBAAC,OAAD;EAAK,WAAU;EACZ,UAAA,MAAM,MAAM,KAAK,MAAM,UAAU;GAEhC,MAAM,QADS,aAAa,IAAI,KAAK,GACvB,CAAA,EAAQ,MAAM,SAAS,KAAK;GAC1C,MAAM,QAAQ,KAAK,cAAc,SAAS,eAAe;GAEzD,OACE,qBAAC,QAAD;IAAqB,WAAU;IAA/B,UAAA;KACE,oBAAC,QAAD;MAAM,WAAU;MAAe,UAAA,GAAG,QAAQ,EAAE,IAAI;KAAc,CAAA;KAC9D,oBAAC,MAAD;MACE,MAAM;MACN,MAAK;MACL,eAAa;MACb,cAAY,sBAAsB,KAAK,SAAS;MAChD,WAAU;KACX,CAAA;KACD,oBAAC,YAAD;MACE,MAAK;MACL,MAAK;MACL,OAAO,EAAE,oBAAoB,wBAAwB,EAAE,MAAM,CAAC;MAC9D,aAAW,SAAS,KAAK,IAAI;MAC7B,UAAU;MACV,eAAe,QAAQ,IAAI;KAC5B,CAAA;IACG;GAjBK,GAAA,KAAK,GAiBV;EAEV,CAAC;CACE,CAAA;AAET"}

package/dist/table/components/table-cell.js

@@ -21,7 +21,8 @@ var builtinColumnCells = {
 	"column.text": columnCell(TextCell)
 };
 function ColumnCell({ column, row }) {
-	return /* @__PURE__ */ jsx(useColumnRegistry()[column.type] ?? builtinColumnCells[column.type] ?? builtinColumnCells["column.text"], {
+	const Cell = useColumnRegistry()[column.type] ?? builtinColumnCells[column.type] ?? builtinColumnCells["column.text"];
+	return /* @__PURE__ */ jsx(Cell, {
 		column,
 		props: column.props,
 		row,

package/dist/table/components/table-cell.js.map

@@ -1 +1 @@
-{"version":3,"file":"table-cell.js","names":[],"sources":["../../../resources/js/table/components/table-cell.tsx"],"sourcesContent":["import { useColumnRegistry } from \"@lattice-php/lattice/core/registry-context\";\nimport type { ColumnNodeType } from \"@lattice-php/lattice/types/generated\";\nimport {\n  columnCell,\n  type ColumnRegistry,\n  type ColumnRegistryFor,\n} from \"@lattice-php/lattice/table/registry\";\nimport type { TableColumn, TableRow } from \"@lattice-php/lattice/table/types\";\nimport { BadgeCell } from \"./cells/badge-cell\";\nimport { BooleanCell } from \"./cells/boolean-cell\";\nimport { IconCell } from \"./cells/icon-cell\";\nimport { ImageCell } from \"./cells/image-cell\";\nimport { MoneyCell } from \"./cells/money-cell\";\nimport { NumberCell } from \"./cells/number-cell\";\nimport { StackCell } from \"./cells/stack-cell\";\nimport { TextCell } from \"./cells/text-cell\";\n\n// Built-in cells live with the (lazy-loaded) table feature rather than the\n// eager registry, so they stay code-split. Consumer-registered columns are\n// merged on top and win on type collisions.\nconst builtinColumnCells: ColumnRegistry = {\n  \"column.badge\": columnCell(BadgeCell),\n  \"column.boolean\": columnCell(BooleanCell),\n  \"column.icon\": columnCell(IconCell),\n  \"column.image\": columnCell(ImageCell),\n  \"column.money\": columnCell(MoneyCell),\n  \"column.number\": columnCell(NumberCell),\n  \"column.stack\": columnCell(StackCell),\n  \"column.text\": columnCell(TextCell),\n} satisfies ColumnRegistryFor<ColumnNodeType>;\n\nexport function ColumnCell({ column, row }: { column: TableColumn; row: TableRow }) {\n  const customCells = useColumnRegistry();\n  const Cell =\n    customCells[column.type] ??\n    builtinColumnCells[column.type] ??\n    builtinColumnCells[\"column.text\"];\n\n  return <Cell column={column} props={column.props} row={row} value={row[column.key]} />;\n}\n"],"mappings":";;;;;;;;;;;;AAoBA,IAAM,qBAAqC;CACzC,gBAAgB,WAAW,SAAS;CACpC,kBAAkB,WAAW,WAAW;CACxC,eAAe,WAAW,QAAQ;CAClC,gBAAgB,WAAW,SAAS;CACpC,gBAAgB,WAAW,SAAS;CACpC,iBAAiB,WAAW,UAAU;CACtC,gBAAgB,WAAW,SAAS;CACpC,eAAe,WAAW,QAAQ;AACpC;AAEA,SAAgB,WAAW,EAAE,QAAQ,OAA+C;CAOlF,OAAO,oBANa,kBAElB,EAAY,OAAO,SACnB,mBAAmB,OAAO,SAC1B,mBAAmB,gBAEd;EAAc;EAAQ,OAAO,OAAO;EAAY;EAAK,OAAO,IAAI,OAAO;CAAO,CAAA;AACvF"}
+{"version":3,"file":"table-cell.js","names":[],"sources":["../../../resources/js/table/components/table-cell.tsx"],"sourcesContent":["import { useColumnRegistry } from \"@lattice-php/lattice/core/registry-context\";\nimport type { ColumnNodeType } from \"@lattice-php/lattice/types/generated\";\nimport {\n  columnCell,\n  type ColumnRegistry,\n  type ColumnRegistryFor,\n} from \"@lattice-php/lattice/table/registry\";\nimport type { TableColumn, TableRow } from \"@lattice-php/lattice/table/types\";\nimport { BadgeCell } from \"./cells/badge-cell\";\nimport { BooleanCell } from \"./cells/boolean-cell\";\nimport { IconCell } from \"./cells/icon-cell\";\nimport { ImageCell } from \"./cells/image-cell\";\nimport { MoneyCell } from \"./cells/money-cell\";\nimport { NumberCell } from \"./cells/number-cell\";\nimport { StackCell } from \"./cells/stack-cell\";\nimport { TextCell } from \"./cells/text-cell\";\n\n// Built-in cells live with the (lazy-loaded) table feature rather than the\n// eager registry, so they stay code-split. Consumer-registered columns are\n// merged on top and win on type collisions.\nconst builtinColumnCells: ColumnRegistry = {\n  \"column.badge\": columnCell(BadgeCell),\n  \"column.boolean\": columnCell(BooleanCell),\n  \"column.icon\": columnCell(IconCell),\n  \"column.image\": columnCell(ImageCell),\n  \"column.money\": columnCell(MoneyCell),\n  \"column.number\": columnCell(NumberCell),\n  \"column.stack\": columnCell(StackCell),\n  \"column.text\": columnCell(TextCell),\n} satisfies ColumnRegistryFor<ColumnNodeType>;\n\nexport function ColumnCell({ column, row }: { column: TableColumn; row: TableRow }) {\n  const customCells = useColumnRegistry();\n  const Cell =\n    customCells[column.type] ??\n    builtinColumnCells[column.type] ??\n    builtinColumnCells[\"column.text\"];\n\n  return <Cell column={column} props={column.props} row={row} value={row[column.key]} />;\n}\n"],"mappings":";;;;;;;;;;;;AAoBA,IAAM,qBAAqC;CACzC,gBAAgB,WAAW,SAAS;CACpC,kBAAkB,WAAW,WAAW;CACxC,eAAe,WAAW,QAAQ;CAClC,gBAAgB,WAAW,SAAS;CACpC,gBAAgB,WAAW,SAAS;CACpC,iBAAiB,WAAW,UAAU;CACtC,gBAAgB,WAAW,SAAS;CACpC,eAAe,WAAW,QAAQ;AACpC;AAEA,SAAgB,WAAW,EAAE,QAAQ,OAA+C;CAElF,MAAM,OADc,kBAElB,CAAA,CAAY,OAAO,SACnB,mBAAmB,OAAO,SAC1B,mBAAmB;CAErB,OAAO,oBAAC,MAAD;EAAc;EAAQ,OAAO,OAAO;EAAY;EAAK,OAAO,IAAI,OAAO;CAAO,CAAA;AACvF"}

package/dist/table/components/table-search.js.map

@@ -1 +1 @@
-{"version":3,"file":"table-search.js","names":[],"sources":["../../../resources/js/table/components/table-search.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\nimport { Icon } from \"@lattice-php/lattice/icons\";\nimport { IconButton } from \"@lattice-php/lattice/ui/icon-button\";\nimport { Input } from \"@lattice-php/lattice/ui/input\";\nimport { useT } from \"@lattice-php/lattice/i18n\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\nimport { useDebouncedCallback } from \"@lattice-php/lattice/lib/use-debounced-callback\";\n\nconst DEBOUNCE_MS = 300;\n\n/**\n * The table-level quick-search box. Keystrokes update the input immediately and\n * commit the term to the server after a short debounce; an externally-changed\n * value (e.g. a filter reset) is adopted without echoing keystroke round-trips.\n */\nexport function TableSearch({\n  value,\n  onSearch,\n}: {\n  value: string;\n  onSearch: (term: string) => void;\n}) {\n  const { t } = useT(\"lattice\");\n  const [term, setTerm] = useState(value);\n  const committed = useRef(value);\n\n  useEffect(() => {\n    if (value !== committed.current) {\n      committed.current = value;\n      setTerm(value);\n    }\n  }, [value]);\n\n  function commit(next: string): void {\n    committed.current = next;\n    onSearch(next);\n  }\n\n  const commitDebounced = useDebouncedCallback(commit, DEBOUNCE_MS);\n\n  function change(next: string): void {\n    setTerm(next);\n    commitDebounced(next);\n  }\n\n  function clear(): void {\n    commitDebounced.cancel();\n    setTerm(\"\");\n    commit(\"\");\n  }\n\n  const label = t(\"table.search.placeholder\", \"Search\");\n\n  return (\n    <div className=\"relative w-full max-w-xs\">\n      <Icon\n        name=\"search\"\n        aria-hidden=\"true\"\n        className=\"pointer-events-none absolute left-2.5 top-1/2 size-lt-icon-sm -translate-y-1/2 text-lt-muted-fg\"\n      />\n      <Input\n        type=\"search\"\n        data-test=\"table-search\"\n        value={term}\n        placeholder={label}\n        aria-label={label}\n        onChange={(event) => change(event.target.value)}\n        className={cn(\"px-8\", \"[&::-webkit-search-cancel-button]:hidden\")}\n      />\n      {term !== \"\" && (\n        <IconButton\n          size=\"xs\"\n          icon=\"x\"\n          label={t(\"table.search.clear\", \"Clear search\")}\n          data-test=\"table-search-clear\"\n          className=\"absolute right-1.5 top-1/2 -translate-y-1/2\"\n          onClick={clear}\n        />\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;AAQA,IAAM,cAAc;;;;;;AAOpB,SAAgB,YAAY,EAC1B,OACA,YAIC;CACD,MAAM,EAAE,MAAM,KAAK,SAAS;CAC5B,MAAM,CAAC,MAAM,WAAW,SAAS,KAAK;CACtC,MAAM,YAAY,OAAO,KAAK;CAE9B,gBAAgB;EACd,IAAI,UAAU,UAAU,SAAS;GAC/B,UAAU,UAAU;GACpB,QAAQ,KAAK;EACf;CACF,GAAG,CAAC,KAAK,CAAC;CAEV,SAAS,OAAO,MAAoB;EAClC,UAAU,UAAU;EACpB,SAAS,IAAI;CACf;CAEA,MAAM,kBAAkB,qBAAqB,QAAQ,WAAW;CAEhE,SAAS,OAAO,MAAoB;EAClC,QAAQ,IAAI;EACZ,gBAAgB,IAAI;CACtB;CAEA,SAAS,QAAc;EACrB,gBAAgB,OAAO;EACvB,QAAQ,EAAE;EACV,OAAO,EAAE;CACX;CAEA,MAAM,QAAQ,EAAE,4BAA4B,QAAQ;CAEpD,OACE,qBAAC,OAAD;EAAK,WAAU;YAAf;GACE,oBAAC,MAAD;IACE,MAAK;IACL,eAAY;IACZ,WAAU;GACX,CAAA;GACD,oBAAC,OAAD;IACE,MAAK;IACL,aAAU;IACV,OAAO;IACP,aAAa;IACb,cAAY;IACZ,WAAW,UAAU,OAAO,MAAM,OAAO,KAAK;IAC9C,WAAW,GAAG,QAAQ,0CAA0C;GACjE,CAAA;GACA,SAAS,MACR,oBAAC,YAAD;IACE,MAAK;IACL,MAAK;IACL,OAAO,EAAE,sBAAsB,cAAc;IAC7C,aAAU;IACV,WAAU;IACV,SAAS;GACV,CAAA;EAEA;;AAET"}
+{"version":3,"file":"table-search.js","names":[],"sources":["../../../resources/js/table/components/table-search.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\nimport { Icon } from \"@lattice-php/lattice/icons\";\nimport { IconButton } from \"@lattice-php/lattice/ui/icon-button\";\nimport { Input } from \"@lattice-php/lattice/ui/input\";\nimport { useT } from \"@lattice-php/lattice/i18n\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\nimport { useDebouncedCallback } from \"@lattice-php/lattice/lib/use-debounced-callback\";\n\nconst DEBOUNCE_MS = 300;\n\n/**\n * The table-level quick-search box. Keystrokes update the input immediately and\n * commit the term to the server after a short debounce; an externally-changed\n * value (e.g. a filter reset) is adopted without echoing keystroke round-trips.\n */\nexport function TableSearch({\n  value,\n  onSearch,\n}: {\n  value: string;\n  onSearch: (term: string) => void;\n}) {\n  const { t } = useT(\"lattice\");\n  const [term, setTerm] = useState(value);\n  const committed = useRef(value);\n\n  useEffect(() => {\n    if (value !== committed.current) {\n      committed.current = value;\n      setTerm(value);\n    }\n  }, [value]);\n\n  function commit(next: string): void {\n    committed.current = next;\n    onSearch(next);\n  }\n\n  const commitDebounced = useDebouncedCallback(commit, DEBOUNCE_MS);\n\n  function change(next: string): void {\n    setTerm(next);\n    commitDebounced(next);\n  }\n\n  function clear(): void {\n    commitDebounced.cancel();\n    setTerm(\"\");\n    commit(\"\");\n  }\n\n  const label = t(\"table.search.placeholder\", \"Search\");\n\n  return (\n    <div className=\"relative w-full max-w-xs\">\n      <Icon\n        name=\"search\"\n        aria-hidden=\"true\"\n        className=\"pointer-events-none absolute left-2.5 top-1/2 size-lt-icon-sm -translate-y-1/2 text-lt-muted-fg\"\n      />\n      <Input\n        type=\"search\"\n        data-test=\"table-search\"\n        value={term}\n        placeholder={label}\n        aria-label={label}\n        onChange={(event) => change(event.target.value)}\n        className={cn(\"px-8\", \"[&::-webkit-search-cancel-button]:hidden\")}\n      />\n      {term !== \"\" && (\n        <IconButton\n          size=\"xs\"\n          icon=\"x\"\n          label={t(\"table.search.clear\", \"Clear search\")}\n          data-test=\"table-search-clear\"\n          className=\"absolute right-1.5 top-1/2 -translate-y-1/2\"\n          onClick={clear}\n        />\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;AAQA,IAAM,cAAc;;;;;;AAOpB,SAAgB,YAAY,EAC1B,OACA,YAIC;CACD,MAAM,EAAE,MAAM,KAAK,SAAS;CAC5B,MAAM,CAAC,MAAM,WAAW,SAAS,KAAK;CACtC,MAAM,YAAY,OAAO,KAAK;CAE9B,gBAAgB;EACd,IAAI,UAAU,UAAU,SAAS;GAC/B,UAAU,UAAU;GACpB,QAAQ,KAAK;EACf;CACF,GAAG,CAAC,KAAK,CAAC;CAEV,SAAS,OAAO,MAAoB;EAClC,UAAU,UAAU;EACpB,SAAS,IAAI;CACf;CAEA,MAAM,kBAAkB,qBAAqB,QAAQ,WAAW;CAEhE,SAAS,OAAO,MAAoB;EAClC,QAAQ,IAAI;EACZ,gBAAgB,IAAI;CACtB;CAEA,SAAS,QAAc;EACrB,gBAAgB,OAAO;EACvB,QAAQ,EAAE;EACV,OAAO,EAAE;CACX;CAEA,MAAM,QAAQ,EAAE,4BAA4B,QAAQ;CAEpD,OACE,qBAAC,OAAD;EAAK,WAAU;EAAf,UAAA;GACE,oBAAC,MAAD;IACE,MAAK;IACL,eAAY;IACZ,WAAU;GACX,CAAA;GACD,oBAAC,OAAD;IACE,MAAK;IACL,aAAU;IACV,OAAO;IACP,aAAa;IACb,cAAY;IACZ,WAAW,UAAU,OAAO,MAAM,OAAO,KAAK;IAC9C,WAAW,GAAG,QAAQ,0CAA0C;GACjE,CAAA;GACA,SAAS,MACR,oBAAC,YAAD;IACE,MAAK;IACL,MAAK;IACL,OAAO,EAAE,sBAAsB,cAAc;IAC7C,aAAU;IACV,WAAU;IACV,SAAS;GACV,CAAA;EAEA;;AAET"}

package/dist/table/components/table.js

@@ -9,7 +9,7 @@ import { useColumnVisibility } from "../hooks/use-column-visibility.js";
 import { useExpandedRows } from "../hooks/use-expanded-rows.js";
 import { alignJustifyItems, alignText } from "../lib/align.js";
 import { getBulkActions } from "../lib/bulk.js";
-import { getRowActions, getRowDetail, getRowKey } from "../lib/payload.js";
+import { getPerPageOptions, getRowActions, getRowDetail, getRowKey } from "../lib/payload.js";
 import { getQueryParams, getTableSizingColumns, getTableUtilityTracks, getVisiblePages } from "../lib/query.js";
 import { useTable } from "../hooks/use-table.js";
 import { useTableSelection } from "../hooks/use-table-selection.js";
@@ -27,7 +27,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 //#region resources/js/table/components/table.tsx
 var TableComponent = ({ node }) => {
 	const { t } = useT("lattice");
-	const { columns, rows, pagination, query, filters, tableFilters, search, addFilter, updateFilter, removeFilter, replaceColumnFilters, setTableFilter, resetFilters, setSearch, searchFilterOptions, processing, hasLoaded, infiniteLoaderRef, sort, clearSort, goToPage, loadMore } = useTable(node);
+	const { columns, rows, pagination, query, filters, tableFilters, search, addFilter, updateFilter, removeFilter, replaceColumnFilters, setTableFilter, resetFilters, setSearch, searchFilterOptions, processing, hasLoaded, infiniteLoaderRef, sort, clearSort, goToPage, setPerPage, loadMore } = useTable(node);
 	const bulkActions = useMemo(() => getBulkActions(node.props?.bulkActions), [node.props?.bulkActions]);
 	const hasBulkActions = bulkActions.length > 0;
 	const rowEntries = useMemo(() => rows.map((row, index) => ({
@@ -48,6 +48,7 @@ var TableComponent = ({ node }) => {
 	const currentPage = pagination.currentPage ?? query.page;
 	const lastPage = pagination.lastPage ?? currentPage;
 	const mode = pagination.mode ?? "table";
+	const perPageOptions = useMemo(() => getPerPageOptions(node.props?.perPageOptions), [node.props?.perPageOptions]);
 	const visiblePages = getVisiblePages(currentPage, lastPage);
 	const hasNextPage = pagination.hasMore ?? currentPage < lastPage;
 	const hasActions = rowEntries.some((entry) => entry.actions.length > 0);
@@ -316,6 +317,9 @@ var TableComponent = ({ node }) => {
 					hasNextPage,
 					visiblePages,
 					infiniteLoaderRef,
+					perPageOptions,
+					perPageValue: mode === "infinite" ? "infinite" : query.perPage,
+					onPerPage: setPerPage,
 					onPage: goToPage,
 					onLoadMore: loadMore
 				})