@lattice-php/lattice 0.19.0 → 0.20.0

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 { controlSurface } from \"@lattice-php/lattice/ui/control\";\nimport { useT } from \"@lattice-php/lattice/i18n\";\nimport type { FilterType } from \"@lattice-php/lattice/types/generated\";\n\nexport const fieldClass = controlSurface({ density: \"compact\" });\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.filterBy\", \"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      <select\n        aria-label={inputLabel}\n        data-test={testId}\n        className={`${fieldClass} ${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      </select>\n    );\n  }\n\n  if (type === \"date\") {\n    return (\n      <input\n        type=\"date\"\n        aria-label={inputLabel}\n        data-test={testId}\n        className={`${fieldClass} ${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        aria-label={inputLabel}\n        data-test={testId}\n        className={`${fieldClass} ${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        <button\n          type=\"button\"\n          aria-label={t(\"table.filter.clear\", \"Clear {{label}} filter\", { label })}\n          data-test={testId ? `${testId}-clear` : undefined}\n          className=\"absolute right-1 inline-flex size-6 items-center justify-center rounded-lt-sm hover:bg-lt-muted disabled:opacity-50\"\n          disabled={processing}\n          onClick={onClear}\n        >\n          <Icon name=\"x\" aria-hidden=\"true\" className=\"size-lt-icon-sm\" />\n        </button>\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;;;;AAMA,IAAa,aAAa,eAAe,EAAE,SAAS,UAAU,CAAC;AAE/D,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,yBAAyB,oBAAoB,EAAE,MAAM,CAAC;CACxF,MAAM,eAAe,UAAU,mBAAmB;CAElD,gBAAgB;EACd,SAAS,KAAK;CAChB,GAAG,CAAC,KAAK,CAAC;CAEV,IAAI,SAAS,WACX,OACE,qBAAC,UAAD;EACE,cAAY;EACZ,aAAW;EACX,WAAW,GAAG,WAAW,GAAG;EAC5B,UAAU;EACH;EACP,WAAW,UAAU,SAAS,MAAM,OAAO,KAAK;YANlD;GAQE,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;EAC1D;;CAIZ,IAAI,SAAS,QACX,OACE,oBAAC,SAAD;EACE,MAAK;EACL,cAAY;EACZ,aAAW;EACX,WAAW,GAAG,WAAW,GAAG;EAC5B,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,SAAD;IACE,MAAM,SAAS,WAAW,WAAW;IACrC,cAAY;IACZ,aAAW;IACX,WAAW,GAAG,WAAW,GAAG,aAAa,GAAG,iBAAiB,SAAS,GAAG,GAAG,UAAU,SAAS;IAC/F,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,UAAD;IACE,MAAK;IACL,cAAY,EAAE,sBAAsB,0BAA0B,EAAE,MAAM,CAAC;IACvE,aAAW,SAAS,GAAG,OAAO,UAAU,KAAA;IACxC,WAAU;IACV,UAAU;IACV,SAAS;cAET,oBAAC,MAAD;KAAM,MAAK;KAAI,eAAY;KAAO,WAAU;IAAmB,CAAA;GACzD,CAAA;EAEP;;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;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"}

package/dist/table/components/pagination.js

@@ -1,4 +1,5 @@
 import { useT } from "../../i18n/instance.js";
+import { Button } from "../../ui/button.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 }) {
@@ -13,30 +14,27 @@ function TablePagination({ pagination, currentPage, processing, mode, hasNextPag
 		}) }), mode === "infinite" ? /* @__PURE__ */ jsx("div", {
 			ref: infiniteLoaderRef,
 			className: "flex items-center gap-2",
-			children: pagination.hasMore ? /* @__PURE__ */ jsx("button", {
-				type: "button",
+			children: pagination.hasMore ? /* @__PURE__ */ jsx(Button, {
+				variant: "outline",
 				"data-test": "pagination-load-more",
-				className: "h-lt-control-md rounded-lt-sm border border-lt-border px-3 font-medium disabled:opacity-50",
 				disabled: processing,
 				onClick: onLoadMore,
-				children: processing ? t("table.pagination.loading", "Loading...") : t("table.pagination.loadMore", "Load more")
+				children: processing ? t("table.pagination.loading", "Loading...") : t("table.pagination.load-more", "Load more")
 			}) : /* @__PURE__ */ jsx("span", {
 				className: "text-lt-muted-fg",
-				children: t("table.pagination.allLoaded", "All rows loaded")
+				children: t("table.pagination.all-loaded", "All rows loaded")
 			})
 		}) : mode === "simple" ? /* @__PURE__ */ jsxs("div", {
 			className: "flex items-center gap-2",
-			children: [/* @__PURE__ */ jsx("button", {
-				type: "button",
+			children: [/* @__PURE__ */ jsx(Button, {
+				variant: "outline",
 				"data-test": "pagination-previous",
-				className: "h-lt-control-md rounded-lt-sm border border-lt-border px-3 font-medium disabled:opacity-50",
 				disabled: processing || currentPage <= 1,
 				onClick: () => onPage(currentPage - 1),
 				children: t("table.pagination.previous", "Previous")
-			}), /* @__PURE__ */ jsx("button", {
-				type: "button",
+			}), /* @__PURE__ */ jsx(Button, {
+				variant: "outline",
 				"data-test": "pagination-next",
-				className: "h-lt-control-md rounded-lt-sm border border-lt-border px-3 font-medium disabled:opacity-50",
 				disabled: processing || !hasNextPage,
 				onClick: () => onPage(currentPage + 1),
 				children: t("table.pagination.next", "Next")
@@ -44,28 +42,26 @@ function TablePagination({ pagination, currentPage, processing, mode, hasNextPag
 		}) : mode === "table" ? /* @__PURE__ */ jsxs("div", {
 			className: "flex items-center gap-2",
 			children: [
-				/* @__PURE__ */ jsx("button", {
-					type: "button",
+				/* @__PURE__ */ jsx(Button, {
+					variant: "outline",
 					"data-test": "pagination-previous",
-					className: "h-lt-control-md rounded-lt-sm border border-lt-border px-3 font-medium disabled:opacity-50",
 					disabled: processing || currentPage <= 1,
 					onClick: () => onPage(currentPage - 1),
 					children: t("table.pagination.previous", "Previous")
 				}),
-				visiblePages.map((pageNumber) => /* @__PURE__ */ jsx("button", {
-					type: "button",
+				visiblePages.map((pageNumber) => /* @__PURE__ */ jsx(Button, {
+					variant: "outline",
+					size: "icon",
 					"data-test": `pagination-page-${pageNumber}`,
-					className: "inline-flex size-lt-control-md items-center justify-center rounded-lt-sm border border-lt-border font-medium disabled:opacity-50",
 					disabled: processing || pageNumber === currentPage,
 					"aria-current": pageNumber === currentPage ? "page" : void 0,
 					"aria-label": t("table.pagination.page", "Page {{page}}", { page: pageNumber }),
 					onClick: () => onPage(pageNumber),
 					children: pageNumber
 				}, pageNumber)),
-				/* @__PURE__ */ jsx("button", {
-					type: "button",
+				/* @__PURE__ */ jsx(Button, {
+					variant: "outline",
 					"data-test": "pagination-next",
-					className: "h-lt-control-md rounded-lt-sm border border-lt-border px-3 font-medium disabled:opacity-50",
 					disabled: processing || !hasNextPage,
 					onClick: () => onPage(currentPage + 1),
 					children: t("table.pagination.next", "Next")

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 { 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              type=\"button\"\n              data-test=\"pagination-load-more\"\n              className=\"h-lt-control-md rounded-lt-sm border border-lt-border px-3 font-medium disabled:opacity-50\"\n              disabled={processing}\n              onClick={onLoadMore}\n            >\n              {processing\n                ? t(\"table.pagination.loading\", \"Loading...\")\n                : t(\"table.pagination.loadMore\", \"Load more\")}\n            </button>\n          ) : (\n            <span className=\"text-lt-muted-fg\">\n              {t(\"table.pagination.allLoaded\", \"All rows loaded\")}\n            </span>\n          )}\n        </div>\n      ) : mode === \"simple\" ? (\n        <div className=\"flex items-center gap-2\">\n          <button\n            type=\"button\"\n            data-test=\"pagination-previous\"\n            className=\"h-lt-control-md rounded-lt-sm border border-lt-border px-3 font-medium disabled:opacity-50\"\n            disabled={processing || currentPage <= 1}\n            onClick={() => onPage(currentPage - 1)}\n          >\n            {t(\"table.pagination.previous\", \"Previous\")}\n          </button>\n          <button\n            type=\"button\"\n            data-test=\"pagination-next\"\n            className=\"h-lt-control-md rounded-lt-sm border border-lt-border px-3 font-medium disabled:opacity-50\"\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            type=\"button\"\n            data-test=\"pagination-previous\"\n            className=\"h-lt-control-md rounded-lt-sm border border-lt-border px-3 font-medium disabled:opacity-50\"\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              type=\"button\"\n              data-test={`pagination-page-${pageNumber}`}\n              className=\"inline-flex size-lt-control-md items-center justify-center rounded-lt-sm border border-lt-border font-medium disabled:opacity-50\"\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            type=\"button\"\n            data-test=\"pagination-next\"\n            className=\"h-lt-control-md rounded-lt-sm border border-lt-border px-3 font-medium disabled:opacity-50\"\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":";;;AAKA,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,UAAD;IACE,MAAK;IACL,aAAU;IACV,WAAU;IACV,UAAU;IACV,SAAS;cAER,aACG,EAAE,4BAA4B,YAAY,IAC1C,EAAE,6BAA6B,WAAW;GACxC,CAAA,IAER,oBAAC,QAAD;IAAM,WAAU;cACb,EAAE,8BAA8B,iBAAiB;GAC9C,CAAA;EAEL,CAAA,IACH,SAAS,WACX,qBAAC,OAAD;GAAK,WAAU;aAAf,CACE,oBAAC,UAAD;IACE,MAAK;IACL,aAAU;IACV,WAAU;IACV,UAAU,cAAc,eAAe;IACvC,eAAe,OAAO,cAAc,CAAC;cAEpC,EAAE,6BAA6B,UAAU;GACpC,CAAA,GACR,oBAAC,UAAD;IACE,MAAK;IACL,aAAU;IACV,WAAU;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,UAAD;KACE,MAAK;KACL,aAAU;KACV,WAAU;KACV,UAAU,cAAc,eAAe;KACvC,eAAe,OAAO,cAAc,CAAC;eAEpC,EAAE,6BAA6B,UAAU;IACpC,CAAA;IACP,aAAa,KAAK,eACjB,oBAAC,UAAD;KAEE,MAAK;KACL,aAAW,mBAAmB;KAC9B,WAAU;KACV,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,UAAD;KACE,MAAK;KACL,aAAU;KACV,WAAU;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 { 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              variant=\"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            variant=\"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            variant=\"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            variant=\"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              variant=\"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            variant=\"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,SAAQ;IACR,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,SAAQ;IACR,aAAU;IACV,UAAU,cAAc,eAAe;IACvC,eAAe,OAAO,cAAc,CAAC;cAEpC,EAAE,6BAA6B,UAAU;GACpC,CAAA,GACR,oBAAC,QAAD;IACE,SAAQ;IACR,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,SAAQ;KACR,aAAU;KACV,UAAU,cAAc,eAAe;KACvC,eAAe,OAAO,cAAc,CAAC;eAEpC,EAAE,6BAA6B,UAAU;IACpC,CAAA;IACP,aAAa,KAAK,eACjB,oBAAC,QAAD;KAEE,SAAQ;KACR,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,SAAQ;KACR,aAAU;KACV,UAAU,cAAc,CAAC;KACzB,eAAe,OAAO,cAAc,CAAC;eAEpC,EAAE,yBAAyB,MAAM;IAC5B,CAAA;GACL;OACH,IACD;;AAET"}

package/dist/table/components/sort-bar.d.ts

@@ -1,7 +1,7 @@
-import { TableColumn, TableSort, TableState } from '../types.js';
-export declare function SortBar({ columnsByKey, state, processing, onClear, }: {
+import { TableColumn, TableSort, TableQuery } from '../types.js';
+export declare function SortBar({ columnsByKey, query, processing, onClear, }: {
     columnsByKey: Map<string, TableColumn>;
-    state: TableState;
+    query: TableQuery;
     processing: boolean;
     onClear: (sort: TableSort) => void;
 }): import("react").JSX.Element;

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

@@ -1,11 +1,14 @@
 import { Icon } from "../../icons/sprite.js";
+import { useT } from "../../i18n/instance.js";
+import { IconButton } from "../../ui/icon-button.js";
 import { getSortDirectionLabel } from "../lib/query.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region resources/js/table/components/sort-bar.tsx
-function SortBar({ columnsByKey, state, processing, onClear }) {
+function SortBar({ columnsByKey, query, processing, onClear }) {
+	const { t } = useT("lattice");
 	return /* @__PURE__ */ jsx("div", {
 		className: "flex flex-wrap items-center gap-4 border-b border-lt-border px-4 py-2.5 text-sm",
-		children: state.sorts.map((sort, index) => {
+		children: query.sorts.map((sort, index) => {
 			const label = columnsByKey.get(sort.key)?.props.label ?? sort.key;
 			const arrow = sort.direction === "desc" ? "arrow-down" : "arrow-up";
 			return /* @__PURE__ */ jsxs("span", {
@@ -22,17 +25,13 @@ function SortBar({ columnsByKey, state, processing, onClear }) {
 						"aria-label": getSortDirectionLabel(sort.direction),
 						className: "size-lt-icon-sm text-lt-muted-fg"
 					}),
-					/* @__PURE__ */ jsx("button", {
-						type: "button",
-						className: "inline-flex size-5 items-center justify-center rounded-lt-sm text-lt-muted-fg hover:bg-lt-muted disabled:opacity-50",
-						disabled: processing,
-						"aria-label": `Clear ${label} sort`,
+					/* @__PURE__ */ jsx(IconButton, {
+						size: "xs",
+						icon: "x",
+						label: t("table.sort.clear", "Clear {{label}} sort", { label }),
 						"data-test": `clear-${sort.key}-sort`,
-						onClick: () => onClear(sort),
-						children: /* @__PURE__ */ jsx(Icon, {
-							name: "x",
-							className: "size-lt-icon-sm"
-						})
+						disabled: processing,
+						onClick: () => onClear(sort)
 					})
 				]
 			}, sort.key);

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 { getSortDirectionLabel } from \"@lattice-php/lattice/table/lib/query\";\nimport type { TableColumn, TableSort, TableState } from \"@lattice-php/lattice/table/types\";\n\nexport function SortBar({\n  columnsByKey,\n  state,\n  processing,\n  onClear,\n}: {\n  columnsByKey: Map<string, TableColumn>;\n  state: TableState;\n  processing: boolean;\n  onClear: (sort: TableSort) => void;\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      {state.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            <button\n              type=\"button\"\n              className=\"inline-flex size-5 items-center justify-center rounded-lt-sm text-lt-muted-fg hover:bg-lt-muted disabled:opacity-50\"\n              disabled={processing}\n              aria-label={`Clear ${label} sort`}\n              data-test={`clear-${sort.key}-sort`}\n              onClick={() => onClear(sort)}\n            >\n              <Icon name=\"x\" className=\"size-lt-icon-sm\" />\n            </button>\n          </span>\n        );\n      })}\n    </div>\n  );\n}\n"],"mappings":";;;;AAIA,SAAgB,QAAQ,EACtB,cACA,OACA,YACA,WAMC;CACD,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,UAAD;MACE,MAAK;MACL,WAAU;MACV,UAAU;MACV,cAAY,SAAS,MAAM;MAC3B,aAAW,SAAS,KAAK,IAAI;MAC7B,eAAe,QAAQ,IAAI;gBAE3B,oBAAC,MAAD;OAAM,MAAK;OAAI,WAAU;MAAmB,CAAA;KACtC,CAAA;IACJ;MAnBK,KAAK,GAmBV;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;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"}

package/dist/table/components/table-search.d.ts

@@ -0,0 +1,9 @@
+/**
+ * The table-level quick-search box. Keystrokes update the input immediately and
+ * commit the term to the server after a short debounce; an externally-changed
+ * value (e.g. a filter reset) is adopted without echoing keystroke round-trips.
+ */
+export declare function TableSearch({ value, onSearch, }: {
+    value: string;
+    onSearch: (term: string) => void;
+}): import("react").JSX.Element;

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

@@ -0,0 +1,75 @@
+import { cn } from "../../lib/utils.js";
+import { Icon } from "../../icons/sprite.js";
+import { useT } from "../../i18n/instance.js";
+import { Input } from "../../ui/input.js";
+import { IconButton } from "../../ui/icon-button.js";
+import { useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region resources/js/table/components/table-search.tsx
+var DEBOUNCE_MS = 300;
+/**
+* The table-level quick-search box. Keystrokes update the input immediately and
+* commit the term to the server after a short debounce; an externally-changed
+* value (e.g. a filter reset) is adopted without echoing keystroke round-trips.
+*/
+function TableSearch({ value, onSearch }) {
+	const { t } = useT("lattice");
+	const [term, setTerm] = useState(value);
+	const timer = useRef(null);
+	const committed = useRef(value);
+	useEffect(() => {
+		if (value !== committed.current) {
+			committed.current = value;
+			setTerm(value);
+		}
+	}, [value]);
+	useEffect(() => () => {
+		if (timer.current) clearTimeout(timer.current);
+	}, []);
+	function commit(next) {
+		committed.current = next;
+		onSearch(next);
+	}
+	function change(next) {
+		setTerm(next);
+		if (timer.current) clearTimeout(timer.current);
+		timer.current = setTimeout(() => commit(next), DEBOUNCE_MS);
+	}
+	function clear() {
+		if (timer.current) clearTimeout(timer.current);
+		setTerm("");
+		commit("");
+	}
+	const label = t("table.search.placeholder", "Search");
+	return /* @__PURE__ */ jsxs("div", {
+		className: "relative w-full max-w-xs",
+		children: [
+			/* @__PURE__ */ jsx(Icon, {
+				name: "search",
+				"aria-hidden": "true",
+				className: "pointer-events-none absolute left-2.5 top-1/2 size-lt-icon-sm -translate-y-1/2 text-lt-muted-fg"
+			}),
+			/* @__PURE__ */ jsx(Input, {
+				type: "search",
+				"data-test": "table-search",
+				value: term,
+				placeholder: label,
+				"aria-label": label,
+				onChange: (event) => change(event.target.value),
+				className: cn("px-8", "[&::-webkit-search-cancel-button]:hidden")
+			}),
+			term !== "" && /* @__PURE__ */ jsx(IconButton, {
+				size: "xs",
+				icon: "x",
+				label: t("table.search.clear", "Clear search"),
+				"data-test": "table-search-clear",
+				className: "absolute right-1.5 top-1/2 -translate-y-1/2",
+				onClick: clear
+			})
+		]
+	});
+}
+//#endregion
+export { TableSearch };
+
+//# sourceMappingURL=table-search.js.map

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

@@ -0,0 +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\";\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 timer = useRef<ReturnType<typeof setTimeout> | null>(null);\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  useEffect(\n    () => () => {\n      if (timer.current) {\n        clearTimeout(timer.current);\n      }\n    },\n    [],\n  );\n\n  function commit(next: string): void {\n    committed.current = next;\n    onSearch(next);\n  }\n\n  function change(next: string): void {\n    setTerm(next);\n\n    if (timer.current) {\n      clearTimeout(timer.current);\n    }\n\n    timer.current = setTimeout(() => commit(next), DEBOUNCE_MS);\n  }\n\n  function clear(): void {\n    if (timer.current) {\n      clearTimeout(timer.current);\n    }\n\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":";;;;;;;;AAOA,IAAM,cAAc;;;;;;AAOpB,SAAgB,YAAY,EAC1B,OACA,YAIC;CACD,MAAM,EAAE,MAAM,KAAK,SAAS;CAC5B,MAAM,CAAC,MAAM,WAAW,SAAS,KAAK;CACtC,MAAM,QAAQ,OAA6C,IAAI;CAC/D,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,sBACc;EACV,IAAI,MAAM,SACR,aAAa,MAAM,OAAO;CAE9B,GACA,CAAC,CACH;CAEA,SAAS,OAAO,MAAoB;EAClC,UAAU,UAAU;EACpB,SAAS,IAAI;CACf;CAEA,SAAS,OAAO,MAAoB;EAClC,QAAQ,IAAI;EAEZ,IAAI,MAAM,SACR,aAAa,MAAM,OAAO;EAG5B,MAAM,UAAU,iBAAiB,OAAO,IAAI,GAAG,WAAW;CAC5D;CAEA,SAAS,QAAc;EACrB,IAAI,MAAM,SACR,aAAa,MAAM,OAAO;EAG5B,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"}

package/dist/table/components/table.js

@@ -1,13 +1,15 @@
 import { cn } from "../../lib/utils.js";
 import { Icon } from "../../icons/sprite.js";
+import { Renderer } from "../../core/renderer.js";
 import { useT } from "../../i18n/instance.js";
 import { nodeIdentity } from "../../core/test-id.js";
 import { useColumnResizing } from "../../core/hooks/use-column-resizing.js";
 import { Checkbox } from "../../ui/checkbox.js";
 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, getRowKey } from "../lib/payload.js";
+import { 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";
@@ -18,29 +20,33 @@ import { ColumnVisibilityMenu } from "./column-visibility-menu.js";
 import { FilterBar, FilterMenu } from "./filter-bar.js";
 import { TablePagination } from "./pagination.js";
 import { SortBar } from "./sort-bar.js";
+import { TableSearch } from "./table-search.js";
 import { TableActionNode } from "./table-action-node.js";
 import { ColumnCell } from "./table-cell.js";
-import { useMemo } from "react";
+import { Fragment, useMemo } from "react";
 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, state, filters, tableFilters, addFilter, updateFilter, removeFilter, replaceColumnFilters, setTableFilter, resetFilters, 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, 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) => ({
 		row,
 		actions: getRowActions(row),
+		detail: getRowDetail(row),
 		key: getRowKey(row, index)
 	})), [rows]);
 	const selection = useTableSelection(rowEntries.map((entry) => entry.key));
+	const { isExpanded, toggle: toggleRow } = useExpandedRows();
+	const hasExpandable = rowEntries.some((entry) => entry.detail != null);
 	const columnsByKey = useMemo(() => new Map(columns.map((column) => [column.key, column])), [columns]);
 	const visibilityIdentity = nodeIdentity(node);
 	const { hasToggleableColumns, hasHidden, isVisible, resetVisibility, setColumnVisible, toggleableColumns, visibleColumns } = useColumnVisibility({
 		columns,
 		storageKey: visibilityIdentity ? `lattice:table-column-visibility:${visibilityIdentity}` : void 0
 	});
-	const currentPage = pagination.currentPage ?? state.page;
+	const currentPage = pagination.currentPage ?? query.page;
 	const lastPage = pagination.lastPage ?? currentPage;
 	const mode = pagination.mode ?? "table";
 	const visiblePages = getVisiblePages(currentPage, lastPage);
@@ -56,7 +62,11 @@ var TableComponent = ({ node }) => {
 	const hasDedicatedFilters = filterDefinitions.length > 0;
 	const hasTrailingUtility = hasActions || hasDedicatedFilters || hasToggleableColumns;
 	const sizingColumns = useMemo(() => getTableSizingColumns(visibleColumns), [visibleColumns]);
-	const utilityTracks = useMemo(() => getTableUtilityTracks(hasTrailingUtility, hasBulkActions), [hasTrailingUtility, hasBulkActions]);
+	const utilityTracks = useMemo(() => getTableUtilityTracks(hasTrailingUtility, hasBulkActions, hasExpandable), [
+		hasTrailingUtility,
+		hasBulkActions,
+		hasExpandable
+	]);
 	const resizingEnabled = node.props?.resizableColumns === true;
 	const resizeStorageIdentity = nodeIdentity(node);
 	const { getResizeHandleProps, gridTemplateColumns, hasOverrides, resizeRootRef, resetColumns } = useColumnResizing({
@@ -72,11 +82,11 @@ var TableComponent = ({ node }) => {
 		"data-lattice-component": node.id,
 		className: "relative",
 		children: [hasOverrides && /* @__PURE__ */ jsx("button", {
-			"aria-label": t("table.resetColumnWidths", "Reset column widths"),
+			"aria-label": t("table.reset-column-widths", "Reset column widths"),
 			className: "absolute right-1 top-1 z-10 hidden rounded-lt-sm p-1 text-lt-muted-fg hover:text-lt-fg md:inline-flex",
 			"data-test": "table-reset-columns",
 			onClick: resetColumns,
-			title: t("table.resetColumnWidths", "Reset column widths"),
+			title: t("table.reset-column-widths", "Reset column widths"),
 			type: "button",
 			children: /* @__PURE__ */ jsx(Icon, {
 				name: "rotate-ccw",
@@ -86,10 +96,18 @@ var TableComponent = ({ node }) => {
 			"data-slot": "table-scroll",
 			className: "overflow-x-auto rounded-lt-sm border border-lt-border",
 			children: [
+				node.props?.searchable && /* @__PURE__ */ jsx("div", {
+					"data-slot": "table-toolbar",
+					className: "flex items-center gap-2 border-b border-lt-border px-4 py-2",
+					children: /* @__PURE__ */ jsx(TableSearch, {
+						value: search,
+						onSearch: setSearch
+					})
+				}),
 				/* @__PURE__ */ jsx(FilterBar, {
 					clauses: filters,
 					columnsByKey,
-					indicators: state.tableFilterIndicators,
+					indicators: query.tableFilterIndicators,
 					processing,
 					onRemoveClause: removeFilter,
 					onChange: setTableFilter,
@@ -100,14 +118,14 @@ var TableComponent = ({ node }) => {
 					selectedKeys: selection.selectedKeys,
 					allMatching: selection.allMatching,
 					total: pagination.total ?? void 0,
-					query: getQueryParams(state),
+					query: getQueryParams(query),
 					canSelectAllMatching: selection.allVisibleSelected && !selection.allMatching && pagination.total != null && pagination.total > selection.selectedKeys.length,
 					onSelectAllMatching: selection.selectAllMatching,
 					onCompleted: selection.clear
 				}),
-				state.sorts.length > 0 && /* @__PURE__ */ jsx(SortBar, {
+				query.sorts.length > 0 && /* @__PURE__ */ jsx(SortBar, {
 					columnsByKey,
-					state,
+					query,
 					processing,
 					onClear: clearSort
 				}),
@@ -124,11 +142,16 @@ var TableComponent = ({ node }) => {
 							className: "hidden min-w-full md:grid md:grid-cols-[var(--lattice-table-columns)]",
 							role: "row",
 							children: [
+								hasExpandable && /* @__PURE__ */ jsx("div", {
+									className: "px-2 py-3",
+									role: "columnheader",
+									"aria-hidden": "true"
+								}),
 								hasBulkActions && /* @__PURE__ */ jsx("div", {
 									className: "flex items-center px-4 py-3",
 									role: "columnheader",
 									children: /* @__PURE__ */ jsx(Checkbox, {
-										"aria-label": t("table.selectAllRows", "Select all rows"),
+										"aria-label": t("table.select-all-rows", "Select all rows"),
 										"data-test": "select-all",
 										checked: selection.allSelected,
 										onCheckedChange: () => selection.toggleAll()
@@ -139,7 +162,7 @@ var TableComponent = ({ node }) => {
 									processing,
 									resizeHandleProps: resizingEnabled ? getResizeHandleProps(sizingColumns[index]) : void 0,
 									sort,
-									state
+									query
 								}, column.key)),
 								hasTrailingUtility && /* @__PURE__ */ jsxs("div", {
 									className: "flex items-center justify-end gap-2 px-4 py-2 align-middle font-semibold text-lt-fg",
@@ -163,7 +186,7 @@ var TableComponent = ({ node }) => {
 										}),
 										hasActions && /* @__PURE__ */ jsx("span", {
 											className: "sr-only",
-											children: node.props?.actionsLabel
+											children: node.props?.actionsLabel ?? t("table.actions", "Actions")
 										})
 									]
 								})
@@ -172,6 +195,10 @@ var TableComponent = ({ node }) => {
 							className: "hidden min-w-full border-t border-lt-border md:grid md:grid-cols-[var(--lattice-table-columns)]",
 							role: "row",
 							children: [
+								hasExpandable && /* @__PURE__ */ jsx("div", {
+									className: "px-2 py-2",
+									role: "cell"
+								}),
 								hasBulkActions && /* @__PURE__ */ jsx("div", {
 									className: "px-4 py-2",
 									role: "cell"
@@ -211,19 +238,39 @@ var TableComponent = ({ node }) => {
 							role: "row",
 							children: /* @__PURE__ */ jsx("div", {
 								role: "cell",
-								children: node.props?.emptyLabel
+								children: node.props?.emptyLabel ?? t("table.empty", "No results")
 							})
-						}) : rowEntries.map(({ row, actions, key }) => {
-							return /* @__PURE__ */ jsxs("div", {
+						}) : rowEntries.map(({ row, actions, detail, key }) => {
+							const expanded = detail != null && isExpanded(key);
+							const detailId = `${nodeIdentity(node) ?? "table"}-row-detail-${key}`;
+							return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
 								"data-slot": "table-row",
 								className: `grid grid-cols-1 border-b border-lt-border last:border-b-0 md:grid-cols-[var(--lattice-table-columns)] ${striped ? "odd:bg-lt-muted/30" : ""}`,
 								role: "row",
 								children: [
+									hasExpandable && /* @__PURE__ */ jsx("div", {
+										className: "flex items-center px-2 py-lt-cell-y",
+										role: "cell",
+										children: detail && /* @__PURE__ */ jsx("button", {
+											type: "button",
+											"data-test": `row-expand-${key}`,
+											"aria-expanded": expanded,
+											"aria-controls": detailId,
+											"aria-label": t("table.row-detail.toggle", "Toggle detail"),
+											className: "inline-flex size-6 items-center justify-center rounded-lt-sm text-lt-muted-fg hover:bg-lt-muted hover:text-lt-fg",
+											onClick: () => toggleRow(key),
+											children: /* @__PURE__ */ jsx(Icon, {
+												name: "chevron-down",
+												"aria-hidden": "true",
+												className: cn("size-lt-icon-md transition-transform", !expanded && "-rotate-90")
+											})
+										})
+									}),
 									hasBulkActions && /* @__PURE__ */ jsx("div", {
 										className: "flex items-center px-lt-cell-x py-lt-cell-y",
 										role: "cell",
 										children: /* @__PURE__ */ jsx(Checkbox, {
-											"aria-label": t("table.selectRow", "Select row {{key}}", { key }),
+											"aria-label": t("table.select-row", "Select row {{key}}", { key }),
 											"data-test": `select-row-${key}`,
 											checked: selection.isSelected(key),
 											onCheckedChange: () => selection.toggle(key)
@@ -252,7 +299,13 @@ var TableComponent = ({ node }) => {
 										children: actions.map((action, actionIndex) => /* @__PURE__ */ jsx(TableActionNode, { node: action }, action.key ?? action.id ?? actionIndex))
 									})
 								]
-							}, key);
+							}), expanded && detail && /* @__PURE__ */ jsx("div", {
+								id: detailId,
+								role: "region",
+								"data-slot": "table-row-detail",
+								className: "border-b border-lt-border bg-lt-muted/20 px-lt-cell-x py-lt-cell-y",
+								children: /* @__PURE__ */ jsx(Renderer, { nodes: [detail] })
+							})] }, key);
 						})
 					})]
 				}),