@prairielearn/ui 1.9.0 → 1.10.0

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @prairielearn/ui
 
+## 1.10.0
+
+### Minor Changes
+
+- e2bffd9: Prefer `className` instead of `class`
+
+### Patch Changes
+
+- Updated dependencies [e2bffd9]
+  - @prairielearn/preact-cjs@2.0.0
+
+## 1.9.1
+
+### Patch Changes
+
+- f404bb4: Upgrade all JavaScript dependencies
+
 ## 1.9.0
 
 ### Minor Changes

package/dist/components/CategoricalColumnFilter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CategoricalColumnFilter.d.ts","sourceRoot":"","sources":["../../src/components/CategoricalColumnFilter.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAEpD,OAAO,EAAE,KAAK,GAAG,EAAqB,MAAM,eAAe,CAAC;AAiB5D;;;;;;;;GAQG;AACH,wBAAgB,uBAAuB,CAAC,KAAK,EAAE,MAAM,EAAE,EACrD,MAAM,EACN,eAAe,EACf,gBAA0C,GAC3C,EAAE;IACD,MAAM,EAAE,MAAM,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;IAC9B,eAAe,EAAE,MAAM,EAAE,GAAG,SAAS,MAAM,EAAE,CAAC;IAC9C,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,UAAU,EAAE,OAAO,CAAA;KAAE,KAAK,GAAG,CAAC,OAAO,CAAC;CACnF,eAoIA"}
+{"version":3,"file":"CategoricalColumnFilter.d.ts","sourceRoot":"","sources":["../../src/components/CategoricalColumnFilter.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAEpD,OAAO,EAAE,KAAK,GAAG,EAAqB,MAAM,eAAe,CAAC;AAiB5D;;;;;;;;GAQG;AACH,wBAAgB,uBAAuB,CAAC,KAAK,EAAE,MAAM,EAAE,EACrD,MAAM,EACN,eAAe,EACf,gBAA0C,GAC3C,EAAE;IACD,MAAM,EAAE,MAAM,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;IAC9B,eAAe,EAAE,MAAM,EAAE,GAAG,SAAS,MAAM,EAAE,CAAC;IAC9C,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,UAAU,EAAE,OAAO,CAAA;KAAE,KAAK,GAAG,CAAC,OAAO,CAAC;CACnF,eAuIA"}

package/dist/components/CategoricalColumnFilter.js

@@ -9,7 +9,7 @@ function computeSelected(allStatusValues, mode, selected) {
     return new Set(allStatusValues.filter((s) => !selected.has(s)));
 }
 function defaultRenderValueLabel({ value }) {
-    return _jsx("span", { class: "text-nowrap", children: String(value) });
+    return _jsx("span", { className: "text-nowrap", children: String(value) });
 }
 /**
  * A component that allows the user to filter a categorical column.
@@ -45,17 +45,17 @@ export function CategoricalColumnFilter({ column, allColumnValues, renderValueLa
         }
         apply(mode, set);
     };
-    return (_jsxs(Dropdown, { align: "end", children: [_jsx(Dropdown.Toggle, { variant: "link", class: "text-muted p-0", id: `filter-${columnId}`, "aria-label": `Filter ${label.toLowerCase()}`, title: `Filter ${label.toLowerCase()}`, children: _jsx("i", { class: clsx('bi', selected.size > 0 ? ['bi-funnel-fill', 'text-primary'] : 'bi-funnel'), "aria-hidden": "true" }) }), _jsxs(Dropdown.Menu, { class: "p-0", children: [_jsxs("div", { class: "p-3 pb-0", children: [_jsxs("div", { class: "d-flex align-items-center justify-content-between mb-2", children: [_jsx("div", { class: "fw-semibold text-nowrap", children: label }), _jsx("button", { type: "button", class: clsx('btn btn-link btn-sm text-decoration-none', {
+    return (_jsxs(Dropdown, { align: "end", children: [_jsx(Dropdown.Toggle, { variant: "link", className: "text-muted p-0", id: `filter-${columnId}`, "aria-label": `Filter ${label.toLowerCase()}`, title: `Filter ${label.toLowerCase()}`, children: _jsx("i", { className: clsx('bi', selected.size > 0 ? ['bi-funnel-fill', 'text-primary'] : 'bi-funnel'), "aria-hidden": "true" }) }), _jsxs(Dropdown.Menu, { className: "p-0", children: [_jsxs("div", { className: "p-3 pb-0", children: [_jsxs("div", { className: "d-flex align-items-center justify-content-between mb-2", children: [_jsx("div", { className: "fw-semibold text-nowrap", children: label }), _jsx("button", { type: "button", className: clsx('btn btn-link btn-sm text-decoration-none', {
                                             // Hide the clear button if no filters are applied.
                                             // Use `visibility` instead of conditional rendering to avoid layout shift.
                                             invisible: selected.size === 0 && mode === 'include',
-                                        }), onClick: () => apply('include', new Set()), children: "Clear" })] }), _jsxs("div", { class: "btn-group btn-group-sm w-100 mb-2", children: [_jsx("input", { type: "radio", class: "btn-check", name: `filter-${columnId}-options`, id: `filter-${columnId}-include`, autocomplete: "off", checked: mode === 'include', onChange: () => apply('include', selected) }), _jsx("label", { class: "btn btn-outline-primary", for: `filter-${columnId}-include`, children: _jsxs("span", { class: "text-nowrap", children: [mode === 'include' && _jsx("i", { class: "bi bi-check-lg me-1", "aria-hidden": "true" }), "Include"] }) }), _jsx("input", { type: "radio", class: "btn-check", name: `filter-${columnId}-options`, id: `filter-${columnId}-exclude`, autocomplete: "off", checked: mode === 'exclude', onChange: () => apply('exclude', selected) }), _jsx("label", { class: "btn btn-outline-primary", for: `filter-${columnId}-exclude`, children: _jsxs("span", { class: "text-nowrap", children: [mode === 'exclude' && _jsx("i", { class: "bi bi-check-lg me-1", "aria-hidden": "true" }), "Exclude"] }) })] })] }), _jsx("div", { class: "list-group list-group-flush", style: {
+                                        }), onClick: () => apply('include', new Set()), children: "Clear" })] }), _jsxs("div", { className: "btn-group btn-group-sm w-100 mb-2", children: [_jsx("input", { type: "radio", className: "btn-check", name: `filter-${columnId}-options`, id: `filter-${columnId}-include`, autocomplete: "off", checked: mode === 'include', onChange: () => apply('include', selected) }), _jsx("label", { className: "btn btn-outline-primary", for: `filter-${columnId}-include`, children: _jsxs("span", { className: "text-nowrap", children: [mode === 'include' && _jsx("i", { className: "bi bi-check-lg me-1", "aria-hidden": "true" }), "Include"] }) }), _jsx("input", { type: "radio", className: "btn-check", name: `filter-${columnId}-options`, id: `filter-${columnId}-exclude`, autocomplete: "off", checked: mode === 'exclude', onChange: () => apply('exclude', selected) }), _jsx("label", { className: "btn btn-outline-primary", for: `filter-${columnId}-exclude`, children: _jsxs("span", { className: "text-nowrap", children: [mode === 'exclude' && _jsx("i", { className: "bi bi-check-lg me-1", "aria-hidden": "true" }), "Exclude"] }) })] })] }), _jsx("div", { className: "list-group list-group-flush", style: {
                             // This is needed to prevent the last item's background from covering
                             // the dropdown's border radius.
                             '--bs-list-group-bg': 'transparent',
                         }, children: allColumnValues.map((value) => {
                             const isSelected = selected.has(value);
-                            return (_jsx("div", { class: "list-group-item d-flex align-items-center gap-3", children: _jsxs("div", { class: "form-check", children: [_jsx("input", { class: "form-check-input", type: "checkbox", checked: isSelected, id: `${columnId}-${value}`, onChange: () => toggleSelected(value) }), _jsx("label", { class: "form-check-label fw-normal", for: `${columnId}-${value}`, children: renderValueLabel({
+                            return (_jsx("div", { className: "list-group-item d-flex align-items-center gap-3", children: _jsxs("div", { className: "form-check", children: [_jsx("input", { className: "form-check-input", type: "checkbox", checked: isSelected, id: `${columnId}-${value}`, onChange: () => toggleSelected(value) }), _jsx("label", { className: "form-check-label fw-normal", for: `${columnId}-${value}`, children: renderValueLabel({
                                                 value,
                                                 isSelected,
                                             }) })] }) }, value));

package/dist/components/CategoricalColumnFilter.js.map

@@ -1 +1 @@
-{"version":3,"file":"CategoricalColumnFilter.js","sourceRoot":"","sources":["../../src/components/CategoricalColumnFilter.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { Column } from '@tanstack/react-table';\nimport clsx from 'clsx';\nimport { type JSX, useMemo, useState } from 'preact/compat';\nimport Dropdown from 'react-bootstrap/Dropdown';\n\nfunction computeSelected<T extends readonly any[]>(\n  allStatusValues: T,\n  mode: 'include' | 'exclude',\n  selected: Set<T[number]>,\n) {\n  if (mode === 'include') {\n    return selected;\n  }\n  return new Set(allStatusValues.filter((s) => !selected.has(s)));\n}\n\nfunction defaultRenderValueLabel<T>({ value }: { value: T }) {\n  return <span class=\"text-nowrap\">{String(value)}</span>;\n}\n/**\n * A component that allows the user to filter a categorical column.\n * The filter mode always defaults to \"include\".\n *\n * @param params\n * @param params.column - The TanStack Table column object\n * @param params.allColumnValues - The values to filter by\n * @param params.renderValueLabel - A function that renders the label for a value\n */\nexport function CategoricalColumnFilter<TData, TValue>({\n  column,\n  allColumnValues,\n  renderValueLabel = defaultRenderValueLabel,\n}: {\n  column: Column<TData, TValue>;\n  allColumnValues: TValue[] | readonly TValue[];\n  renderValueLabel?: (props: { value: TValue; isSelected: boolean }) => JSX.Element;\n}) {\n  const [mode, setMode] = useState<'include' | 'exclude'>('include');\n\n  const columnId = column.id;\n\n  const label =\n    column.columnDef.meta?.label ??\n    (typeof column.columnDef.header === 'string' ? column.columnDef.header : column.id);\n\n  const columnValuesFilter = column.getFilterValue() as TValue[] | undefined;\n\n  const selected = useMemo(() => {\n    return computeSelected(allColumnValues, mode, new Set(columnValuesFilter));\n  }, [mode, allColumnValues, columnValuesFilter]);\n\n  const apply = (newMode: 'include' | 'exclude', newSelected: Set<TValue>) => {\n    const selected = computeSelected(allColumnValues, newMode, newSelected);\n    setMode(newMode);\n    const newValue = Array.from(selected);\n    column.setFilterValue(newValue);\n  };\n\n  const toggleSelected = (value: TValue) => {\n    const set = new Set(selected);\n    if (set.has(value)) {\n      set.delete(value);\n    } else {\n      set.add(value);\n    }\n    apply(mode, set);\n  };\n\n  return (\n    <Dropdown align=\"end\">\n      <Dropdown.Toggle\n        variant=\"link\"\n        class=\"text-muted p-0\"\n        id={`filter-${columnId}`}\n        aria-label={`Filter ${label.toLowerCase()}`}\n        title={`Filter ${label.toLowerCase()}`}\n      >\n        <i\n          class={clsx('bi', selected.size > 0 ? ['bi-funnel-fill', 'text-primary'] : 'bi-funnel')}\n          aria-hidden=\"true\"\n        />\n      </Dropdown.Toggle>\n      <Dropdown.Menu class=\"p-0\">\n        <div class=\"p-3 pb-0\">\n          <div class=\"d-flex align-items-center justify-content-between mb-2\">\n            <div class=\"fw-semibold text-nowrap\">{label}</div>\n            <button\n              type=\"button\"\n              class={clsx('btn btn-link btn-sm text-decoration-none', {\n                // Hide the clear button if no filters are applied.\n                // Use `visibility` instead of conditional rendering to avoid layout shift.\n                invisible: selected.size === 0 && mode === 'include',\n              })}\n              onClick={() => apply('include', new Set())}\n            >\n              Clear\n            </button>\n          </div>\n\n          <div class=\"btn-group btn-group-sm w-100 mb-2\">\n            <input\n              type=\"radio\"\n              class=\"btn-check\"\n              name={`filter-${columnId}-options`}\n              id={`filter-${columnId}-include`}\n              autocomplete=\"off\"\n              checked={mode === 'include'}\n              onChange={() => apply('include', selected)}\n            />\n            <label class=\"btn btn-outline-primary\" for={`filter-${columnId}-include`}>\n              <span class=\"text-nowrap\">\n                {mode === 'include' && <i class=\"bi bi-check-lg me-1\" aria-hidden=\"true\" />}\n                Include\n              </span>\n            </label>\n\n            <input\n              type=\"radio\"\n              class=\"btn-check\"\n              name={`filter-${columnId}-options`}\n              id={`filter-${columnId}-exclude`}\n              autocomplete=\"off\"\n              checked={mode === 'exclude'}\n              onChange={() => apply('exclude', selected)}\n            />\n            <label class=\"btn btn-outline-primary\" for={`filter-${columnId}-exclude`}>\n              <span class=\"text-nowrap\">\n                {mode === 'exclude' && <i class=\"bi bi-check-lg me-1\" aria-hidden=\"true\" />}\n                Exclude\n              </span>\n            </label>\n          </div>\n        </div>\n\n        <div\n          class=\"list-group list-group-flush\"\n          style={{\n            // This is needed to prevent the last item's background from covering\n            // the dropdown's border radius.\n            '--bs-list-group-bg': 'transparent',\n          }}\n        >\n          {allColumnValues.map((value) => {\n            const isSelected = selected.has(value);\n            return (\n              <div key={value} class=\"list-group-item d-flex align-items-center gap-3\">\n                <div class=\"form-check\">\n                  <input\n                    class=\"form-check-input\"\n                    type=\"checkbox\"\n                    checked={isSelected}\n                    id={`${columnId}-${value}`}\n                    onChange={() => toggleSelected(value)}\n                  />\n                  <label class=\"form-check-label fw-normal\" for={`${columnId}-${value}`}>\n                    {renderValueLabel({\n                      value,\n                      isSelected,\n                    })}\n                  </label>\n                </div>\n              </div>\n            );\n          })}\n        </div>\n      </Dropdown.Menu>\n    </Dropdown>\n  );\n}\n"]}
+{"version":3,"file":"CategoricalColumnFilter.js","sourceRoot":"","sources":["../../src/components/CategoricalColumnFilter.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { Column } from '@tanstack/react-table';\nimport clsx from 'clsx';\nimport { type JSX, useMemo, useState } from 'preact/compat';\nimport Dropdown from 'react-bootstrap/Dropdown';\n\nfunction computeSelected<T extends readonly any[]>(\n  allStatusValues: T,\n  mode: 'include' | 'exclude',\n  selected: Set<T[number]>,\n) {\n  if (mode === 'include') {\n    return selected;\n  }\n  return new Set(allStatusValues.filter((s) => !selected.has(s)));\n}\n\nfunction defaultRenderValueLabel<T>({ value }: { value: T }) {\n  return <span className=\"text-nowrap\">{String(value)}</span>;\n}\n/**\n * A component that allows the user to filter a categorical column.\n * The filter mode always defaults to \"include\".\n *\n * @param params\n * @param params.column - The TanStack Table column object\n * @param params.allColumnValues - The values to filter by\n * @param params.renderValueLabel - A function that renders the label for a value\n */\nexport function CategoricalColumnFilter<TData, TValue>({\n  column,\n  allColumnValues,\n  renderValueLabel = defaultRenderValueLabel,\n}: {\n  column: Column<TData, TValue>;\n  allColumnValues: TValue[] | readonly TValue[];\n  renderValueLabel?: (props: { value: TValue; isSelected: boolean }) => JSX.Element;\n}) {\n  const [mode, setMode] = useState<'include' | 'exclude'>('include');\n\n  const columnId = column.id;\n\n  const label =\n    column.columnDef.meta?.label ??\n    (typeof column.columnDef.header === 'string' ? column.columnDef.header : column.id);\n\n  const columnValuesFilter = column.getFilterValue() as TValue[] | undefined;\n\n  const selected = useMemo(() => {\n    return computeSelected(allColumnValues, mode, new Set(columnValuesFilter));\n  }, [mode, allColumnValues, columnValuesFilter]);\n\n  const apply = (newMode: 'include' | 'exclude', newSelected: Set<TValue>) => {\n    const selected = computeSelected(allColumnValues, newMode, newSelected);\n    setMode(newMode);\n    const newValue = Array.from(selected);\n    column.setFilterValue(newValue);\n  };\n\n  const toggleSelected = (value: TValue) => {\n    const set = new Set(selected);\n    if (set.has(value)) {\n      set.delete(value);\n    } else {\n      set.add(value);\n    }\n    apply(mode, set);\n  };\n\n  return (\n    <Dropdown align=\"end\">\n      <Dropdown.Toggle\n        variant=\"link\"\n        className=\"text-muted p-0\"\n        id={`filter-${columnId}`}\n        aria-label={`Filter ${label.toLowerCase()}`}\n        title={`Filter ${label.toLowerCase()}`}\n      >\n        <i\n          className={clsx(\n            'bi',\n            selected.size > 0 ? ['bi-funnel-fill', 'text-primary'] : 'bi-funnel',\n          )}\n          aria-hidden=\"true\"\n        />\n      </Dropdown.Toggle>\n      <Dropdown.Menu className=\"p-0\">\n        <div className=\"p-3 pb-0\">\n          <div className=\"d-flex align-items-center justify-content-between mb-2\">\n            <div className=\"fw-semibold text-nowrap\">{label}</div>\n            <button\n              type=\"button\"\n              className={clsx('btn btn-link btn-sm text-decoration-none', {\n                // Hide the clear button if no filters are applied.\n                // Use `visibility` instead of conditional rendering to avoid layout shift.\n                invisible: selected.size === 0 && mode === 'include',\n              })}\n              onClick={() => apply('include', new Set())}\n            >\n              Clear\n            </button>\n          </div>\n\n          <div className=\"btn-group btn-group-sm w-100 mb-2\">\n            <input\n              type=\"radio\"\n              className=\"btn-check\"\n              name={`filter-${columnId}-options`}\n              id={`filter-${columnId}-include`}\n              autocomplete=\"off\"\n              checked={mode === 'include'}\n              onChange={() => apply('include', selected)}\n            />\n            <label className=\"btn btn-outline-primary\" for={`filter-${columnId}-include`}>\n              <span className=\"text-nowrap\">\n                {mode === 'include' && <i className=\"bi bi-check-lg me-1\" aria-hidden=\"true\" />}\n                Include\n              </span>\n            </label>\n\n            <input\n              type=\"radio\"\n              className=\"btn-check\"\n              name={`filter-${columnId}-options`}\n              id={`filter-${columnId}-exclude`}\n              autocomplete=\"off\"\n              checked={mode === 'exclude'}\n              onChange={() => apply('exclude', selected)}\n            />\n            <label className=\"btn btn-outline-primary\" for={`filter-${columnId}-exclude`}>\n              <span className=\"text-nowrap\">\n                {mode === 'exclude' && <i className=\"bi bi-check-lg me-1\" aria-hidden=\"true\" />}\n                Exclude\n              </span>\n            </label>\n          </div>\n        </div>\n\n        <div\n          className=\"list-group list-group-flush\"\n          style={{\n            // This is needed to prevent the last item's background from covering\n            // the dropdown's border radius.\n            '--bs-list-group-bg': 'transparent',\n          }}\n        >\n          {allColumnValues.map((value) => {\n            const isSelected = selected.has(value);\n            return (\n              <div key={value} className=\"list-group-item d-flex align-items-center gap-3\">\n                <div className=\"form-check\">\n                  <input\n                    className=\"form-check-input\"\n                    type=\"checkbox\"\n                    checked={isSelected}\n                    id={`${columnId}-${value}`}\n                    onChange={() => toggleSelected(value)}\n                  />\n                  <label className=\"form-check-label fw-normal\" for={`${columnId}-${value}`}>\n                    {renderValueLabel({\n                      value,\n                      isSelected,\n                    })}\n                  </label>\n                </div>\n              </div>\n            );\n          })}\n        </div>\n      </Dropdown.Menu>\n    </Dropdown>\n  );\n}\n"]}

package/dist/components/ColumnManager.js

@@ -10,10 +10,10 @@ function ColumnLeafItem({ column, onPinningBoundary = false, onTogglePin, classN
     // Use meta.label if available, otherwise fall back to header or column.id
     const header = column.columnDef.meta?.label ??
         (typeof column.columnDef.header === 'string' ? column.columnDef.header : column.id);
-    return (_jsxs("div", { class: clsx('px-2 py-1 d-flex align-items-center justify-content-between', className), children: [_jsxs("label", { class: "form-check me-auto text-nowrap d-flex align-items-stretch", children: [_jsx("input", { type: "checkbox", class: "form-check-input", checked: column.getIsVisible(), disabled: !column.getCanHide(), "aria-label": column.getIsVisible() ? `Hide '${header}' column` : `Show '${header}' column`, "aria-describedby": `${column.id}-label`, onChange: column.getToggleVisibilityHandler() }), _jsx("span", { class: "form-check-label ms-2", id: `${column.id}-label`, children: header })] }), _jsx("button", { type: "button", 
+    return (_jsxs("div", { className: clsx('px-2 py-1 d-flex align-items-center justify-content-between', className), children: [_jsxs("label", { className: "form-check me-auto text-nowrap d-flex align-items-stretch", children: [_jsx("input", { type: "checkbox", className: "form-check-input", checked: column.getIsVisible(), disabled: !column.getCanHide(), "aria-label": column.getIsVisible() ? `Hide '${header}' column` : `Show '${header}' column`, "aria-describedby": `${column.id}-label`, onChange: column.getToggleVisibilityHandler() }), _jsx("span", { className: "form-check-label ms-2", id: `${column.id}-label`, children: header })] }), _jsx("button", { type: "button", 
                 // Since the HTML changes, but we want to refocus the pin button, we track
                 // the active pin button and refocuses it when the column manager is rerendered.
-                id: `${column.id}-pin`, class: clsx('btn btn-sm btn-ghost ms-2', (!column.getCanPin() || !onPinningBoundary) && 'invisible'), "aria-label": column.getIsPinned() ? `Unfreeze '${header}' column` : `Freeze '${header}'  column`, title: column.getIsPinned() ? 'Unfreeze column' : 'Freeze column', "data-bs-toggle": "tooltip", onClick: () => onTogglePin(column.id), children: _jsx("i", { class: `bi ${column.getIsPinned() ? 'bi-x' : 'bi-snow'}`, "aria-hidden": "true" }) })] }, column.id));
+                id: `${column.id}-pin`, className: clsx('btn btn-sm btn-ghost ms-2', (!column.getCanPin() || !onPinningBoundary) && 'invisible'), "aria-label": column.getIsPinned() ? `Unfreeze '${header}' column` : `Freeze '${header}'  column`, title: column.getIsPinned() ? 'Unfreeze column' : 'Freeze column', "data-bs-toggle": "tooltip", onClick: () => onTogglePin(column.id), children: _jsx("i", { className: `bi ${column.getIsPinned() ? 'bi-x' : 'bi-snow'}`, "aria-hidden": "true" }) })] }, column.id));
 }
 function ColumnGroupItem({ column, onTogglePin, getIsOnPinningBoundary, }) {
     const [isExpanded, setIsExpanded] = useState(false);
@@ -34,10 +34,10 @@ function ColumnGroupItem({ column, onTogglePin, getIsOnPinningBoundary, }) {
     // Use meta.label if available, otherwise fall back to header or column.id
     const header = column.columnDef.meta?.label ??
         (typeof column.columnDef.header === 'string' ? column.columnDef.header : column.id);
-    return (_jsxs("div", { class: "d-flex flex-column", children: [_jsx("div", { class: "px-2 py-1 d-flex align-items-center justify-content-between", children: _jsxs("div", { class: "d-flex align-items-center flex-grow-1", children: [_jsx("input", { type: "checkbox", class: "form-check-input flex-shrink-0", checked: isAllVisible, indeterminate: isSomeVisible, "aria-label": `Toggle visibility for group '${header}'`, onChange: handleToggleVisibility }), _jsxs("button", { type: "button", class: "btn btn-link text-decoration-none text-reset w-100 text-start d-flex align-items-center justify-content-between ps-2 py-0 pe-0", "aria-expanded": isExpanded, onClick: (e) => {
+    return (_jsxs("div", { className: "d-flex flex-column", children: [_jsx("div", { className: "px-2 py-1 d-flex align-items-center justify-content-between", children: _jsxs("div", { className: "d-flex align-items-center flex-grow-1", children: [_jsx("input", { type: "checkbox", className: "form-check-input flex-shrink-0", checked: isAllVisible, indeterminate: isSomeVisible, "aria-label": `Toggle visibility for group '${header}'`, onChange: handleToggleVisibility }), _jsxs("button", { type: "button", className: "btn btn-link text-decoration-none text-reset w-100 text-start d-flex align-items-center justify-content-between ps-2 py-0 pe-0", "aria-expanded": isExpanded, onClick: (e) => {
                                 e.stopPropagation();
                                 setIsExpanded(!isExpanded);
-                            }, children: [_jsx("span", { class: "fw-bold text-truncate", children: header }), _jsx("i", { class: clsx('bi ms-2 text-muted', isExpanded ? 'bi-chevron-down' : 'bi-chevron-right'), "aria-hidden": "true" })] })] }) }), isExpanded && (_jsx("div", { class: "ps-3 border-start ms-3 mb-1", children: column.columns.map((childCol) => (_jsx(ColumnItem, { column: childCol, getIsOnPinningBoundary: getIsOnPinningBoundary, onTogglePin: onTogglePin }, childCol.id))) }))] }));
+                            }, children: [_jsx("span", { className: "fw-bold text-truncate", children: header }), _jsx("i", { className: clsx('bi ms-2 text-muted', isExpanded ? 'bi-chevron-down' : 'bi-chevron-right'), "aria-hidden": "true" })] })] }) }), isExpanded && (_jsx("div", { className: "ps-3 border-start ms-3 mb-1", children: column.columns.map((childCol) => (_jsx(ColumnItem, { column: childCol, getIsOnPinningBoundary: getIsOnPinningBoundary, onTogglePin: onTogglePin }, childCol.id))) }))] }));
 }
 function ColumnItem({ column, onTogglePin, getIsOnPinningBoundary, }) {
     if (column.columns.length > 0) {
@@ -149,15 +149,15 @@ export function ColumnManager({ table, topContent, }) {
             , { 
                 // We assume that this component will only appear once per page. If that changes,
                 // we'll need to do something to ensure ID uniqueness here.
-                id: "column-manager", variant: "tanstack-table", children: [_jsx("i", { class: "bi bi-view-list me-2", "aria-hidden": "true" }), " View", ' '] }), _jsxs(Dropdown.Menu, { style: { maxHeight: '60vh', overflowY: 'auto' }, children: [topContent && (_jsxs(_Fragment, { children: [topContent, _jsx(Dropdown.Divider, {})] })), pinnedMenuColumns.length > 0 && (_jsxs(_Fragment, { children: [_jsx("div", { class: "px-2 py-1 text-muted small", role: "presentation", children: "Frozen columns" }), _jsx("div", { role: "group", children: pinnedMenuColumns.map((column, index) => {
+                id: "column-manager", variant: "tanstack-table", children: [_jsx("i", { className: "bi bi-view-list me-2", "aria-hidden": "true" }), " View", ' '] }), _jsxs(Dropdown.Menu, { style: { maxHeight: '60vh', overflowY: 'auto' }, children: [topContent && (_jsxs(_Fragment, { children: [topContent, _jsx(Dropdown.Divider, {})] })), pinnedMenuColumns.length > 0 && (_jsxs(_Fragment, { children: [_jsx("div", { className: "px-2 py-1 text-muted small", role: "presentation", children: "Frozen columns" }), _jsx("div", { role: "group", children: pinnedMenuColumns.map((column, index) => {
                                     return (_jsx(ColumnLeafItem, { column: column, onPinningBoundary: index === pinnedMenuColumns.length - 1, onTogglePin: handleTogglePin }, column.id));
                                 }) }), _jsx(Dropdown.Divider, {})] })), unpinnedRootColumns.length > 0 && (_jsxs(_Fragment, { children: [_jsx("div", { role: "group", children: unpinnedRootColumns.map((column) => {
                                     return (_jsx(ColumnItem, { column: column, getIsOnPinningBoundary: getIsOnPinningBoundary, onTogglePin: handleTogglePin }, column.id));
-                                }) }), showResetButton && _jsx(Dropdown.Divider, {})] })), showResetButton && (_jsx("div", { class: "px-2 py-1", children: _jsxs(Button, { variant: "secondary", size: "sm", class: "w-100", "aria-label": "Reset all columns to default visibility and pinning", onClick: () => {
+                                }) }), showResetButton && _jsx(Dropdown.Divider, {})] })), showResetButton && (_jsx("div", { className: "px-2 py-1", children: _jsxs(Button, { variant: "secondary", size: "sm", className: "w-100", "aria-label": "Reset all columns to default visibility and pinning", onClick: () => {
                                 table.resetColumnVisibility();
                                 table.resetColumnPinning();
                                 // Move focus to the column manager button after resetting.
                                 setActiveElementId('column-manager');
-                            }, children: [_jsx("i", { class: "bi bi-arrow-counterclockwise me-2", "aria-hidden": "true" }), "Reset view"] }) }))] })] }));
+                            }, children: [_jsx("i", { className: "bi bi-arrow-counterclockwise me-2", "aria-hidden": "true" }), "Reset view"] }) }))] })] }));
 }
 //# sourceMappingURL=ColumnManager.js.map

package/dist/components/ColumnManager.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColumnManager.js","sourceRoot":"","sources":["../../src/components/ColumnManager.tsx"],"names":[],"mappings":"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","sourcesContent":["import { type Column, type Table } from '@tanstack/react-table';\nimport clsx from 'clsx';\nimport { type JSX, useEffect, useRef, useState } from 'preact/compat';\nimport Button from 'react-bootstrap/Button';\nimport Dropdown from 'react-bootstrap/Dropdown';\n\ninterface ColumnMenuItemProps<RowDataModel> {\n  column: Column<RowDataModel>;\n  onPinningBoundary: boolean;\n  onTogglePin: (columnId: string) => void;\n  className?: string;\n}\n\nfunction ColumnLeafItem<RowDataModel>({\n  column,\n  onPinningBoundary = false,\n  onTogglePin,\n  className,\n}: ColumnMenuItemProps<RowDataModel>) {\n  if (!column.getCanHide()) return null;\n\n  // Use meta.label if available, otherwise fall back to header or column.id\n  const header =\n    column.columnDef.meta?.label ??\n    (typeof column.columnDef.header === 'string' ? column.columnDef.header : column.id);\n\n  return (\n    <div\n      key={column.id}\n      class={clsx('px-2 py-1 d-flex align-items-center justify-content-between', className)}\n    >\n      <label class=\"form-check me-auto text-nowrap d-flex align-items-stretch\">\n        <input\n          type=\"checkbox\"\n          class=\"form-check-input\"\n          checked={column.getIsVisible()}\n          disabled={!column.getCanHide()}\n          aria-label={column.getIsVisible() ? `Hide '${header}' column` : `Show '${header}' column`}\n          aria-describedby={`${column.id}-label`}\n          onChange={column.getToggleVisibilityHandler()}\n        />\n        <span class=\"form-check-label ms-2\" id={`${column.id}-label`}>\n          {header}\n        </span>\n      </label>\n      <button\n        type=\"button\"\n        // Since the HTML changes, but we want to refocus the pin button, we track\n        // the active pin button and refocuses it when the column manager is rerendered.\n        id={`${column.id}-pin`}\n        class={clsx(\n          'btn btn-sm btn-ghost ms-2',\n          (!column.getCanPin() || !onPinningBoundary) && 'invisible',\n        )}\n        aria-label={\n          column.getIsPinned() ? `Unfreeze '${header}' column` : `Freeze '${header}'  column`\n        }\n        title={column.getIsPinned() ? 'Unfreeze column' : 'Freeze column'}\n        data-bs-toggle=\"tooltip\"\n        onClick={() => onTogglePin(column.id)}\n      >\n        <i class={`bi ${column.getIsPinned() ? 'bi-x' : 'bi-snow'}`} aria-hidden=\"true\" />\n      </button>\n    </div>\n  );\n}\n\nfunction ColumnGroupItem<RowDataModel>({\n  column,\n  onTogglePin,\n  getIsOnPinningBoundary,\n}: {\n  column: Column<RowDataModel>;\n  onTogglePin: (columnId: string) => void;\n  getIsOnPinningBoundary: (columnId: string) => boolean;\n}) {\n  const [isExpanded, setIsExpanded] = useState(false);\n\n  const leafColumns = column.getLeafColumns();\n  const visibleLeafColumns = leafColumns.filter((c) => c.getIsVisible());\n  const isAllVisible = visibleLeafColumns.length === leafColumns.length;\n  const isSomeVisible = visibleLeafColumns.length > 0 && !isAllVisible;\n\n  const handleToggleVisibility = (e: Event) => {\n    e.preventDefault();\n    e.stopPropagation();\n    const targetVisibility = !isAllVisible;\n    leafColumns.forEach((col) => {\n      if (col.getCanHide()) {\n        col.toggleVisibility(targetVisibility);\n      }\n    });\n  };\n\n  // Use meta.label if available, otherwise fall back to header or column.id\n  const header =\n    column.columnDef.meta?.label ??\n    (typeof column.columnDef.header === 'string' ? column.columnDef.header : column.id);\n\n  return (\n    <div class=\"d-flex flex-column\">\n      <div class=\"px-2 py-1 d-flex align-items-center justify-content-between\">\n        <div class=\"d-flex align-items-center flex-grow-1\">\n          <input\n            type=\"checkbox\"\n            class=\"form-check-input flex-shrink-0\"\n            checked={isAllVisible}\n            indeterminate={isSomeVisible}\n            aria-label={`Toggle visibility for group '${header}'`}\n            onChange={handleToggleVisibility}\n          />\n          <button\n            type=\"button\"\n            class=\"btn btn-link text-decoration-none text-reset w-100 text-start d-flex align-items-center justify-content-between ps-2 py-0 pe-0\"\n            aria-expanded={isExpanded}\n            onClick={(e) => {\n              e.stopPropagation();\n              setIsExpanded(!isExpanded);\n            }}\n          >\n            <span class=\"fw-bold text-truncate\">{header}</span>\n            <i\n              class={clsx(\n                'bi ms-2 text-muted',\n                isExpanded ? 'bi-chevron-down' : 'bi-chevron-right',\n              )}\n              aria-hidden=\"true\"\n            />\n          </button>\n        </div>\n      </div>\n      {isExpanded && (\n        <div class=\"ps-3 border-start ms-3 mb-1\">\n          {column.columns.map((childCol) => (\n            <ColumnItem\n              key={childCol.id}\n              column={childCol}\n              getIsOnPinningBoundary={getIsOnPinningBoundary}\n              onTogglePin={onTogglePin}\n            />\n          ))}\n        </div>\n      )}\n    </div>\n  );\n}\n\nfunction ColumnItem<RowDataModel>({\n  column,\n  onTogglePin,\n  getIsOnPinningBoundary,\n}: {\n  column: Column<RowDataModel>;\n  onTogglePin: (columnId: string) => void;\n  getIsOnPinningBoundary: (columnId: string) => boolean;\n}) {\n  if (column.columns.length > 0) {\n    return (\n      <ColumnGroupItem\n        column={column}\n        getIsOnPinningBoundary={getIsOnPinningBoundary}\n        onTogglePin={onTogglePin}\n      />\n    );\n  }\n  return (\n    <ColumnLeafItem\n      column={column}\n      onPinningBoundary={getIsOnPinningBoundary(column.id)}\n      onTogglePin={onTogglePin}\n    />\n  );\n}\n\ninterface ColumnManagerProps<RowDataModel> {\n  table: Table<RowDataModel>;\n  topContent?: JSX.Element;\n}\n\n/**\n * Ponyfill for `Array.prototype.findLastIndex`, which is not available in the\n * `ES2022` TypeScript lib that we're currently using.\n */\nfunction findLastIndex<T>(arr: T[], predicate: (value: T, index: number) => boolean): number {\n  for (let i = arr.length - 1; i >= 0; i--) {\n    if (predicate(arr[i], i)) {\n      return i;\n    }\n  }\n  return -1;\n}\n\nexport function ColumnManager<RowDataModel>({\n  table,\n  topContent,\n}: ColumnManagerProps<RowDataModel>) {\n  const [activeElementId, setActiveElementId] = useState<string | null>(null);\n  const [dropdownOpen, setDropdownOpen] = useState(false);\n  const menuRef = useRef<HTMLDivElement>(null);\n  const handleTogglePin = (columnId: string) => {\n    const currentLeft = table.getState().columnPinning.left ?? [];\n    const isPinned = currentLeft.includes(columnId);\n    const allLeafColumns = table.getAllLeafColumns();\n    const currentColumnIndex = allLeafColumns.findIndex((c) => c.id === columnId);\n    let newLeft: string[];\n    if (isPinned) {\n      // Get the previous column that can be set to unpinned.\n      // This is useful since we want to unpin/pin columns that are not shown in the view manager.\n      const previousFrozenColumnIndex = findLastIndex(\n        allLeafColumns,\n        (c, index) => c.getCanHide() && index < currentColumnIndex,\n      );\n      newLeft = allLeafColumns.slice(0, previousFrozenColumnIndex + 1).map((c) => c.id);\n    } else {\n      // Pin all columns to the left of the current column.\n      const leftColumns = allLeafColumns.slice(0, currentColumnIndex + 1);\n      newLeft = leftColumns.map((c) => c.id);\n    }\n    table.setColumnPinning({ left: newLeft, right: [] });\n    setActiveElementId(`${columnId}-pin`);\n  };\n\n  const isVisibilityChanged = Object.entries(table.getState().columnVisibility).some(\n    ([key, value]) => {\n      return value !== table.initialState.columnVisibility[key];\n    },\n  );\n\n  const initialPinning = table.initialState.columnPinning.left ?? [];\n  const currentPinning = table.getState().columnPinning.left ?? [];\n  const isPinningChanged =\n    initialPinning.length !== currentPinning.length ||\n    initialPinning.some((id) => !currentPinning.includes(id));\n  const showResetButton = isVisibilityChanged || isPinningChanged;\n\n  const allLeafColumns = table.getAllLeafColumns();\n  const pinnedMenuColumns = allLeafColumns.filter(\n    (c) => c.getCanHide() && c.getIsPinned() === 'left',\n  );\n  // Only the first unpinned menu column can be pinned, so we only need to find the first one\n  const firstUnpinnedMenuColumn = allLeafColumns.find(\n    (c) => c.getCanHide() && c.getIsPinned() !== 'left',\n  );\n\n  // Determine if a column is on the pinning boundary (can toggle its pin state).\n  // - Columns in a group cannot be pinned\n  // - Columns after a group cannot be pinned\n  // - Only the last pinned menu column can be unpinned\n  // - Only the first unpinned menu column can be pinned\n  const getIsOnPinningBoundary = (columnId: string) => {\n    const column = allLeafColumns.find((c) => c.id === columnId);\n    if (!column) return false;\n\n    // Columns in a group cannot be pinned\n    if (column.parent) return false;\n\n    // Check if any column at or before this one in the full column order is in a group\n    const columnIdx = allLeafColumns.findIndex((c) => c.id === columnId);\n    const hasGroupAtOrBefore = allLeafColumns.slice(0, columnIdx + 1).some((c) => c.parent);\n\n    if (column.getIsPinned() === 'left') {\n      // Only the last pinned menu column can be unpinned\n      return columnId === pinnedMenuColumns[pinnedMenuColumns.length - 1]?.id;\n    } else {\n      // Cannot pin if there's a group at or before this column\n      if (hasGroupAtOrBefore) return false;\n      // Only the first unpinned menu column can be pinned\n      return columnId === firstUnpinnedMenuColumn?.id;\n    }\n  };\n\n  // Get root columns (for showing hierarchy), but filter to only show unpinned ones\n  // We'll show pinned columns separately in the \"Frozen columns\" section\n  const unpinnedRootColumns = table.getAllColumns().filter((c) => {\n    if (c.depth !== 0) return false;\n    // A root column is considered unpinned if all its leaf columns are unpinned\n    const leafCols = c.getLeafColumns();\n    return (\n      leafCols.length > 0 &&\n      leafCols.every((leaf) => leaf.getIsPinned() !== 'left' && c.getCanHide())\n    );\n  });\n\n  useEffect(() => {\n    // When we use the pin or reset button, we want to refocus to another element.\n    // We want this in a useEffect so that this code runs after the component re-renders.\n\n    // eslint-disable-next-line react-you-might-not-need-an-effect/no-event-handler\n    if (activeElementId) {\n      document.getElementById(activeElementId)?.focus();\n    }\n  }, [activeElementId]);\n\n  return (\n    <Dropdown\n      ref={menuRef}\n      autoClose=\"outside\"\n      show={dropdownOpen}\n      onToggle={(isOpen, _meta) => setDropdownOpen(isOpen)}\n      onFocusOut={(e: FocusEvent) => {\n        // Since we aren't using role=\"menu\", we need to manually close the dropdown when focus leaves.\n        if (menuRef.current && !menuRef.current.contains(e.target as Node)) {\n          setDropdownOpen(false);\n        }\n      }}\n    >\n      <Dropdown.Toggle\n        // We assume that this component will only appear once per page. If that changes,\n        // we'll need to do something to ensure ID uniqueness here.\n        id=\"column-manager\"\n        variant=\"tanstack-table\"\n      >\n        <i class=\"bi bi-view-list me-2\" aria-hidden=\"true\" /> View{' '}\n      </Dropdown.Toggle>\n      <Dropdown.Menu style={{ maxHeight: '60vh', overflowY: 'auto' }}>\n        {topContent && (\n          <>\n            {topContent}\n            <Dropdown.Divider />\n          </>\n        )}\n        {pinnedMenuColumns.length > 0 && (\n          <>\n            <div class=\"px-2 py-1 text-muted small\" role=\"presentation\">\n              Frozen columns\n            </div>\n            <div role=\"group\">\n              {/* Only leaf columns can be pinned in the current implementation. */}\n              {pinnedMenuColumns.map((column, index) => {\n                return (\n                  <ColumnLeafItem\n                    key={column.id}\n                    column={column}\n                    onPinningBoundary={index === pinnedMenuColumns.length - 1}\n                    onTogglePin={handleTogglePin}\n                  />\n                );\n              })}\n            </div>\n            <Dropdown.Divider />\n          </>\n        )}\n        {unpinnedRootColumns.length > 0 && (\n          <>\n            <div role=\"group\">\n              {unpinnedRootColumns.map((column) => {\n                return (\n                  <ColumnItem\n                    key={column.id}\n                    column={column}\n                    getIsOnPinningBoundary={getIsOnPinningBoundary}\n                    onTogglePin={handleTogglePin}\n                  />\n                );\n              })}\n            </div>\n            {showResetButton && <Dropdown.Divider />}\n          </>\n        )}\n        {showResetButton && (\n          <div class=\"px-2 py-1\">\n            <Button\n              variant=\"secondary\"\n              size=\"sm\"\n              class=\"w-100\"\n              aria-label=\"Reset all columns to default visibility and pinning\"\n              onClick={() => {\n                table.resetColumnVisibility();\n                table.resetColumnPinning();\n                // Move focus to the column manager button after resetting.\n                setActiveElementId('column-manager');\n              }}\n            >\n              <i class=\"bi bi-arrow-counterclockwise me-2\" aria-hidden=\"true\" />\n              Reset view\n            </Button>\n          </div>\n        )}\n      </Dropdown.Menu>\n    </Dropdown>\n  );\n}\n"]}
+{"version":3,"file":"ColumnManager.js","sourceRoot":"","sources":["../../src/components/ColumnManager.tsx"],"names":[],"mappings":"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","sourcesContent":["import { type Column, type Table } from '@tanstack/react-table';\nimport clsx from 'clsx';\nimport { type JSX, useEffect, useRef, useState } from 'preact/compat';\nimport Button from 'react-bootstrap/Button';\nimport Dropdown from 'react-bootstrap/Dropdown';\n\ninterface ColumnMenuItemProps<RowDataModel> {\n  column: Column<RowDataModel>;\n  onPinningBoundary: boolean;\n  onTogglePin: (columnId: string) => void;\n  className?: string;\n}\n\nfunction ColumnLeafItem<RowDataModel>({\n  column,\n  onPinningBoundary = false,\n  onTogglePin,\n  className,\n}: ColumnMenuItemProps<RowDataModel>) {\n  if (!column.getCanHide()) return null;\n\n  // Use meta.label if available, otherwise fall back to header or column.id\n  const header =\n    column.columnDef.meta?.label ??\n    (typeof column.columnDef.header === 'string' ? column.columnDef.header : column.id);\n\n  return (\n    <div\n      key={column.id}\n      className={clsx('px-2 py-1 d-flex align-items-center justify-content-between', className)}\n    >\n      <label className=\"form-check me-auto text-nowrap d-flex align-items-stretch\">\n        <input\n          type=\"checkbox\"\n          className=\"form-check-input\"\n          checked={column.getIsVisible()}\n          disabled={!column.getCanHide()}\n          aria-label={column.getIsVisible() ? `Hide '${header}' column` : `Show '${header}' column`}\n          aria-describedby={`${column.id}-label`}\n          onChange={column.getToggleVisibilityHandler()}\n        />\n        <span className=\"form-check-label ms-2\" id={`${column.id}-label`}>\n          {header}\n        </span>\n      </label>\n      <button\n        type=\"button\"\n        // Since the HTML changes, but we want to refocus the pin button, we track\n        // the active pin button and refocuses it when the column manager is rerendered.\n        id={`${column.id}-pin`}\n        className={clsx(\n          'btn btn-sm btn-ghost ms-2',\n          (!column.getCanPin() || !onPinningBoundary) && 'invisible',\n        )}\n        aria-label={\n          column.getIsPinned() ? `Unfreeze '${header}' column` : `Freeze '${header}'  column`\n        }\n        title={column.getIsPinned() ? 'Unfreeze column' : 'Freeze column'}\n        data-bs-toggle=\"tooltip\"\n        onClick={() => onTogglePin(column.id)}\n      >\n        <i className={`bi ${column.getIsPinned() ? 'bi-x' : 'bi-snow'}`} aria-hidden=\"true\" />\n      </button>\n    </div>\n  );\n}\n\nfunction ColumnGroupItem<RowDataModel>({\n  column,\n  onTogglePin,\n  getIsOnPinningBoundary,\n}: {\n  column: Column<RowDataModel>;\n  onTogglePin: (columnId: string) => void;\n  getIsOnPinningBoundary: (columnId: string) => boolean;\n}) {\n  const [isExpanded, setIsExpanded] = useState(false);\n\n  const leafColumns = column.getLeafColumns();\n  const visibleLeafColumns = leafColumns.filter((c) => c.getIsVisible());\n  const isAllVisible = visibleLeafColumns.length === leafColumns.length;\n  const isSomeVisible = visibleLeafColumns.length > 0 && !isAllVisible;\n\n  const handleToggleVisibility = (e: Event) => {\n    e.preventDefault();\n    e.stopPropagation();\n    const targetVisibility = !isAllVisible;\n    leafColumns.forEach((col) => {\n      if (col.getCanHide()) {\n        col.toggleVisibility(targetVisibility);\n      }\n    });\n  };\n\n  // Use meta.label if available, otherwise fall back to header or column.id\n  const header =\n    column.columnDef.meta?.label ??\n    (typeof column.columnDef.header === 'string' ? column.columnDef.header : column.id);\n\n  return (\n    <div className=\"d-flex flex-column\">\n      <div className=\"px-2 py-1 d-flex align-items-center justify-content-between\">\n        <div className=\"d-flex align-items-center flex-grow-1\">\n          <input\n            type=\"checkbox\"\n            className=\"form-check-input flex-shrink-0\"\n            checked={isAllVisible}\n            indeterminate={isSomeVisible}\n            aria-label={`Toggle visibility for group '${header}'`}\n            onChange={handleToggleVisibility}\n          />\n          <button\n            type=\"button\"\n            className=\"btn btn-link text-decoration-none text-reset w-100 text-start d-flex align-items-center justify-content-between ps-2 py-0 pe-0\"\n            aria-expanded={isExpanded}\n            onClick={(e) => {\n              e.stopPropagation();\n              setIsExpanded(!isExpanded);\n            }}\n          >\n            <span className=\"fw-bold text-truncate\">{header}</span>\n            <i\n              className={clsx(\n                'bi ms-2 text-muted',\n                isExpanded ? 'bi-chevron-down' : 'bi-chevron-right',\n              )}\n              aria-hidden=\"true\"\n            />\n          </button>\n        </div>\n      </div>\n      {isExpanded && (\n        <div className=\"ps-3 border-start ms-3 mb-1\">\n          {column.columns.map((childCol) => (\n            <ColumnItem\n              key={childCol.id}\n              column={childCol}\n              getIsOnPinningBoundary={getIsOnPinningBoundary}\n              onTogglePin={onTogglePin}\n            />\n          ))}\n        </div>\n      )}\n    </div>\n  );\n}\n\nfunction ColumnItem<RowDataModel>({\n  column,\n  onTogglePin,\n  getIsOnPinningBoundary,\n}: {\n  column: Column<RowDataModel>;\n  onTogglePin: (columnId: string) => void;\n  getIsOnPinningBoundary: (columnId: string) => boolean;\n}) {\n  if (column.columns.length > 0) {\n    return (\n      <ColumnGroupItem\n        column={column}\n        getIsOnPinningBoundary={getIsOnPinningBoundary}\n        onTogglePin={onTogglePin}\n      />\n    );\n  }\n  return (\n    <ColumnLeafItem\n      column={column}\n      onPinningBoundary={getIsOnPinningBoundary(column.id)}\n      onTogglePin={onTogglePin}\n    />\n  );\n}\n\ninterface ColumnManagerProps<RowDataModel> {\n  table: Table<RowDataModel>;\n  topContent?: JSX.Element;\n}\n\n/**\n * Ponyfill for `Array.prototype.findLastIndex`, which is not available in the\n * `ES2022` TypeScript lib that we're currently using.\n */\nfunction findLastIndex<T>(arr: T[], predicate: (value: T, index: number) => boolean): number {\n  for (let i = arr.length - 1; i >= 0; i--) {\n    if (predicate(arr[i], i)) {\n      return i;\n    }\n  }\n  return -1;\n}\n\nexport function ColumnManager<RowDataModel>({\n  table,\n  topContent,\n}: ColumnManagerProps<RowDataModel>) {\n  const [activeElementId, setActiveElementId] = useState<string | null>(null);\n  const [dropdownOpen, setDropdownOpen] = useState(false);\n  const menuRef = useRef<HTMLDivElement>(null);\n  const handleTogglePin = (columnId: string) => {\n    const currentLeft = table.getState().columnPinning.left ?? [];\n    const isPinned = currentLeft.includes(columnId);\n    const allLeafColumns = table.getAllLeafColumns();\n    const currentColumnIndex = allLeafColumns.findIndex((c) => c.id === columnId);\n    let newLeft: string[];\n    if (isPinned) {\n      // Get the previous column that can be set to unpinned.\n      // This is useful since we want to unpin/pin columns that are not shown in the view manager.\n      const previousFrozenColumnIndex = findLastIndex(\n        allLeafColumns,\n        (c, index) => c.getCanHide() && index < currentColumnIndex,\n      );\n      newLeft = allLeafColumns.slice(0, previousFrozenColumnIndex + 1).map((c) => c.id);\n    } else {\n      // Pin all columns to the left of the current column.\n      const leftColumns = allLeafColumns.slice(0, currentColumnIndex + 1);\n      newLeft = leftColumns.map((c) => c.id);\n    }\n    table.setColumnPinning({ left: newLeft, right: [] });\n    setActiveElementId(`${columnId}-pin`);\n  };\n\n  const isVisibilityChanged = Object.entries(table.getState().columnVisibility).some(\n    ([key, value]) => {\n      return value !== table.initialState.columnVisibility[key];\n    },\n  );\n\n  const initialPinning = table.initialState.columnPinning.left ?? [];\n  const currentPinning = table.getState().columnPinning.left ?? [];\n  const isPinningChanged =\n    initialPinning.length !== currentPinning.length ||\n    initialPinning.some((id) => !currentPinning.includes(id));\n  const showResetButton = isVisibilityChanged || isPinningChanged;\n\n  const allLeafColumns = table.getAllLeafColumns();\n  const pinnedMenuColumns = allLeafColumns.filter(\n    (c) => c.getCanHide() && c.getIsPinned() === 'left',\n  );\n  // Only the first unpinned menu column can be pinned, so we only need to find the first one\n  const firstUnpinnedMenuColumn = allLeafColumns.find(\n    (c) => c.getCanHide() && c.getIsPinned() !== 'left',\n  );\n\n  // Determine if a column is on the pinning boundary (can toggle its pin state).\n  // - Columns in a group cannot be pinned\n  // - Columns after a group cannot be pinned\n  // - Only the last pinned menu column can be unpinned\n  // - Only the first unpinned menu column can be pinned\n  const getIsOnPinningBoundary = (columnId: string) => {\n    const column = allLeafColumns.find((c) => c.id === columnId);\n    if (!column) return false;\n\n    // Columns in a group cannot be pinned\n    if (column.parent) return false;\n\n    // Check if any column at or before this one in the full column order is in a group\n    const columnIdx = allLeafColumns.findIndex((c) => c.id === columnId);\n    const hasGroupAtOrBefore = allLeafColumns.slice(0, columnIdx + 1).some((c) => c.parent);\n\n    if (column.getIsPinned() === 'left') {\n      // Only the last pinned menu column can be unpinned\n      return columnId === pinnedMenuColumns[pinnedMenuColumns.length - 1]?.id;\n    } else {\n      // Cannot pin if there's a group at or before this column\n      if (hasGroupAtOrBefore) return false;\n      // Only the first unpinned menu column can be pinned\n      return columnId === firstUnpinnedMenuColumn?.id;\n    }\n  };\n\n  // Get root columns (for showing hierarchy), but filter to only show unpinned ones\n  // We'll show pinned columns separately in the \"Frozen columns\" section\n  const unpinnedRootColumns = table.getAllColumns().filter((c) => {\n    if (c.depth !== 0) return false;\n    // A root column is considered unpinned if all its leaf columns are unpinned\n    const leafCols = c.getLeafColumns();\n    return (\n      leafCols.length > 0 &&\n      leafCols.every((leaf) => leaf.getIsPinned() !== 'left' && c.getCanHide())\n    );\n  });\n\n  useEffect(() => {\n    // When we use the pin or reset button, we want to refocus to another element.\n    // We want this in a useEffect so that this code runs after the component re-renders.\n\n    // eslint-disable-next-line react-you-might-not-need-an-effect/no-event-handler\n    if (activeElementId) {\n      document.getElementById(activeElementId)?.focus();\n    }\n  }, [activeElementId]);\n\n  return (\n    <Dropdown\n      ref={menuRef}\n      autoClose=\"outside\"\n      show={dropdownOpen}\n      onToggle={(isOpen, _meta) => setDropdownOpen(isOpen)}\n      onFocusOut={(e: FocusEvent) => {\n        // Since we aren't using role=\"menu\", we need to manually close the dropdown when focus leaves.\n        if (menuRef.current && !menuRef.current.contains(e.target as Node)) {\n          setDropdownOpen(false);\n        }\n      }}\n    >\n      <Dropdown.Toggle\n        // We assume that this component will only appear once per page. If that changes,\n        // we'll need to do something to ensure ID uniqueness here.\n        id=\"column-manager\"\n        variant=\"tanstack-table\"\n      >\n        <i className=\"bi bi-view-list me-2\" aria-hidden=\"true\" /> View{' '}\n      </Dropdown.Toggle>\n      <Dropdown.Menu style={{ maxHeight: '60vh', overflowY: 'auto' }}>\n        {topContent && (\n          <>\n            {topContent}\n            <Dropdown.Divider />\n          </>\n        )}\n        {pinnedMenuColumns.length > 0 && (\n          <>\n            <div className=\"px-2 py-1 text-muted small\" role=\"presentation\">\n              Frozen columns\n            </div>\n            <div role=\"group\">\n              {/* Only leaf columns can be pinned in the current implementation. */}\n              {pinnedMenuColumns.map((column, index) => {\n                return (\n                  <ColumnLeafItem\n                    key={column.id}\n                    column={column}\n                    onPinningBoundary={index === pinnedMenuColumns.length - 1}\n                    onTogglePin={handleTogglePin}\n                  />\n                );\n              })}\n            </div>\n            <Dropdown.Divider />\n          </>\n        )}\n        {unpinnedRootColumns.length > 0 && (\n          <>\n            <div role=\"group\">\n              {unpinnedRootColumns.map((column) => {\n                return (\n                  <ColumnItem\n                    key={column.id}\n                    column={column}\n                    getIsOnPinningBoundary={getIsOnPinningBoundary}\n                    onTogglePin={handleTogglePin}\n                  />\n                );\n              })}\n            </div>\n            {showResetButton && <Dropdown.Divider />}\n          </>\n        )}\n        {showResetButton && (\n          <div className=\"px-2 py-1\">\n            <Button\n              variant=\"secondary\"\n              size=\"sm\"\n              className=\"w-100\"\n              aria-label=\"Reset all columns to default visibility and pinning\"\n              onClick={() => {\n                table.resetColumnVisibility();\n                table.resetColumnPinning();\n                // Move focus to the column manager button after resetting.\n                setActiveElementId('column-manager');\n              }}\n            >\n              <i className=\"bi bi-arrow-counterclockwise me-2\" aria-hidden=\"true\" />\n              Reset view\n            </Button>\n          </div>\n        )}\n      </Dropdown.Menu>\n    </Dropdown>\n  );\n}\n"]}

package/dist/components/MultiSelectColumnFilter.js

@@ -34,13 +34,13 @@ export function MultiSelectColumnFilter({ column, allColumnValues, renderValueLa
         column.setFilterValue(newValue);
     };
     const hasActiveFilter = selected.size > 0;
-    return (_jsxs(Dropdown, { align: "end", children: [_jsx(Dropdown.Toggle, { variant: "link", class: "text-muted p-0", id: `filter-${columnId}`, "aria-label": `Filter ${label.toLowerCase()}`, title: `Filter ${label.toLowerCase()}`, children: _jsx("i", { class: clsx('bi', hasActiveFilter ? ['bi-funnel-fill', 'text-primary'] : 'bi-funnel'), "aria-hidden": "true" }) }), _jsxs(Dropdown.Menu, { class: "p-0", children: [_jsx("div", { class: "p-3 pb-0", style: { minWidth: '250px' }, children: _jsxs("div", { class: "d-flex align-items-center justify-content-between mb-2", children: [_jsx("div", { class: "fw-semibold", children: label }), _jsx("button", { type: "button", class: "btn btn-link btn-sm text-decoration-none p-0", onClick: () => column.setFilterValue([]), children: "Clear" })] }) }), _jsx("div", { class: "list-group list-group-flush", style: {
+    return (_jsxs(Dropdown, { align: "end", children: [_jsx(Dropdown.Toggle, { variant: "link", className: "text-muted p-0", id: `filter-${columnId}`, "aria-label": `Filter ${label.toLowerCase()}`, title: `Filter ${label.toLowerCase()}`, children: _jsx("i", { className: clsx('bi', hasActiveFilter ? ['bi-funnel-fill', 'text-primary'] : 'bi-funnel'), "aria-hidden": "true" }) }), _jsxs(Dropdown.Menu, { className: "p-0", children: [_jsx("div", { className: "p-3 pb-0", style: { minWidth: '250px' }, children: _jsxs("div", { className: "d-flex align-items-center justify-content-between mb-2", children: [_jsx("div", { className: "fw-semibold", children: label }), _jsx("button", { type: "button", className: "btn btn-link btn-sm text-decoration-none p-0", onClick: () => column.setFilterValue([]), children: "Clear" })] }) }), _jsx("div", { className: "list-group list-group-flush", style: {
                             // This is needed to prevent the last item's background from covering
                             // the dropdown's border radius.
                             '--bs-list-group-bg': 'transparent',
                         }, children: allColumnValues.map((value) => {
                             const isSelected = selected.has(value);
-                            return (_jsx("div", { class: "list-group-item d-flex align-items-center gap-3", children: _jsxs("div", { class: "form-check", children: [_jsx("input", { class: "form-check-input", type: "checkbox", checked: isSelected, id: `${columnId}-${value}`, onChange: () => toggleSelected(value) }), _jsx("label", { class: "form-check-label fw-normal", for: `${columnId}-${value}`, children: renderValueLabel({
+                            return (_jsx("div", { className: "list-group-item d-flex align-items-center gap-3", children: _jsxs("div", { className: "form-check", children: [_jsx("input", { className: "form-check-input", type: "checkbox", checked: isSelected, id: `${columnId}-${value}`, onChange: () => toggleSelected(value) }), _jsx("label", { className: "form-check-label fw-normal", for: `${columnId}-${value}`, children: renderValueLabel({
                                                 value,
                                                 isSelected,
                                             }) })] }) }, value));

package/dist/components/MultiSelectColumnFilter.js.map

@@ -1 +1 @@
-{"version":3,"file":"MultiSelectColumnFilter.js","sourceRoot":"","sources":["../../src/components/MultiSelectColumnFilter.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { Column } from '@tanstack/table-core';\nimport clsx from 'clsx';\nimport { type JSX, useMemo } from 'preact/compat';\nimport Dropdown from 'react-bootstrap/Dropdown';\n\nfunction defaultRenderValueLabel<T>({ value }: { value: T }) {\n  return <span>{String(value)}</span>;\n}\n\n/**\n * A component that allows the user to filter a column containing arrays of values.\n * Uses AND logic: rows must contain ALL selected values to match.\n *\n * @param params\n * @param params.column - The TanStack Table column object\n * @param params.allColumnValues - All possible values that can appear in the column filter\n * @param params.renderValueLabel - A function that renders the label for a value\n */\nexport function MultiSelectColumnFilter<TData, TValue>({\n  column,\n  allColumnValues,\n  renderValueLabel = defaultRenderValueLabel,\n}: {\n  column: Column<TData, TValue>;\n  /** In some cases, the filter values are not the same as the column values, but `TValue` is a good estimation. */\n  allColumnValues: TValue[];\n  renderValueLabel?: (props: { value: TValue; isSelected: boolean }) => JSX.Element;\n}) {\n  const columnId = column.id;\n\n  const label =\n    column.columnDef.meta?.label ??\n    (typeof column.columnDef.header === 'string' ? column.columnDef.header : column.id);\n\n  const columnValuesFilter = column.getFilterValue() as TValue[] | undefined;\n\n  const selected = useMemo(() => {\n    return new Set(columnValuesFilter);\n  }, [columnValuesFilter]);\n\n  const toggleSelected = (value: TValue) => {\n    const set = new Set(selected);\n    if (set.has(value)) {\n      set.delete(value);\n    } else {\n      set.add(value);\n    }\n    const newValue = Array.from(set);\n    column.setFilterValue(newValue);\n  };\n\n  const hasActiveFilter = selected.size > 0;\n\n  return (\n    <Dropdown align=\"end\">\n      <Dropdown.Toggle\n        variant=\"link\"\n        class=\"text-muted p-0\"\n        id={`filter-${columnId}`}\n        aria-label={`Filter ${label.toLowerCase()}`}\n        title={`Filter ${label.toLowerCase()}`}\n      >\n        <i\n          class={clsx('bi', hasActiveFilter ? ['bi-funnel-fill', 'text-primary'] : 'bi-funnel')}\n          aria-hidden=\"true\"\n        />\n      </Dropdown.Toggle>\n      <Dropdown.Menu class=\"p-0\">\n        <div class=\"p-3 pb-0\" style={{ minWidth: '250px' }}>\n          <div class=\"d-flex align-items-center justify-content-between mb-2\">\n            <div class=\"fw-semibold\">{label}</div>\n            <button\n              type=\"button\"\n              class=\"btn btn-link btn-sm text-decoration-none p-0\"\n              onClick={() => column.setFilterValue([])}\n            >\n              Clear\n            </button>\n          </div>\n        </div>\n\n        <div\n          class=\"list-group list-group-flush\"\n          style={{\n            // This is needed to prevent the last item's background from covering\n            // the dropdown's border radius.\n            '--bs-list-group-bg': 'transparent',\n          }}\n        >\n          {allColumnValues.map((value) => {\n            const isSelected = selected.has(value);\n            return (\n              <div key={value} class=\"list-group-item d-flex align-items-center gap-3\">\n                <div class=\"form-check\">\n                  <input\n                    class=\"form-check-input\"\n                    type=\"checkbox\"\n                    checked={isSelected}\n                    id={`${columnId}-${value}`}\n                    onChange={() => toggleSelected(value)}\n                  />\n                  <label class=\"form-check-label fw-normal\" for={`${columnId}-${value}`}>\n                    {renderValueLabel({\n                      value,\n                      isSelected,\n                    })}\n                  </label>\n                </div>\n              </div>\n            );\n          })}\n        </div>\n      </Dropdown.Menu>\n    </Dropdown>\n  );\n}\n"]}
+{"version":3,"file":"MultiSelectColumnFilter.js","sourceRoot":"","sources":["../../src/components/MultiSelectColumnFilter.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { Column } from '@tanstack/table-core';\nimport clsx from 'clsx';\nimport { type JSX, useMemo } from 'preact/compat';\nimport Dropdown from 'react-bootstrap/Dropdown';\n\nfunction defaultRenderValueLabel<T>({ value }: { value: T }) {\n  return <span>{String(value)}</span>;\n}\n\n/**\n * A component that allows the user to filter a column containing arrays of values.\n * Uses AND logic: rows must contain ALL selected values to match.\n *\n * @param params\n * @param params.column - The TanStack Table column object\n * @param params.allColumnValues - All possible values that can appear in the column filter\n * @param params.renderValueLabel - A function that renders the label for a value\n */\nexport function MultiSelectColumnFilter<TData, TValue>({\n  column,\n  allColumnValues,\n  renderValueLabel = defaultRenderValueLabel,\n}: {\n  column: Column<TData, TValue>;\n  /** In some cases, the filter values are not the same as the column values, but `TValue` is a good estimation. */\n  allColumnValues: TValue[];\n  renderValueLabel?: (props: { value: TValue; isSelected: boolean }) => JSX.Element;\n}) {\n  const columnId = column.id;\n\n  const label =\n    column.columnDef.meta?.label ??\n    (typeof column.columnDef.header === 'string' ? column.columnDef.header : column.id);\n\n  const columnValuesFilter = column.getFilterValue() as TValue[] | undefined;\n\n  const selected = useMemo(() => {\n    return new Set(columnValuesFilter);\n  }, [columnValuesFilter]);\n\n  const toggleSelected = (value: TValue) => {\n    const set = new Set(selected);\n    if (set.has(value)) {\n      set.delete(value);\n    } else {\n      set.add(value);\n    }\n    const newValue = Array.from(set);\n    column.setFilterValue(newValue);\n  };\n\n  const hasActiveFilter = selected.size > 0;\n\n  return (\n    <Dropdown align=\"end\">\n      <Dropdown.Toggle\n        variant=\"link\"\n        className=\"text-muted p-0\"\n        id={`filter-${columnId}`}\n        aria-label={`Filter ${label.toLowerCase()}`}\n        title={`Filter ${label.toLowerCase()}`}\n      >\n        <i\n          className={clsx('bi', hasActiveFilter ? ['bi-funnel-fill', 'text-primary'] : 'bi-funnel')}\n          aria-hidden=\"true\"\n        />\n      </Dropdown.Toggle>\n      <Dropdown.Menu className=\"p-0\">\n        <div className=\"p-3 pb-0\" style={{ minWidth: '250px' }}>\n          <div className=\"d-flex align-items-center justify-content-between mb-2\">\n            <div className=\"fw-semibold\">{label}</div>\n            <button\n              type=\"button\"\n              className=\"btn btn-link btn-sm text-decoration-none p-0\"\n              onClick={() => column.setFilterValue([])}\n            >\n              Clear\n            </button>\n          </div>\n        </div>\n\n        <div\n          className=\"list-group list-group-flush\"\n          style={{\n            // This is needed to prevent the last item's background from covering\n            // the dropdown's border radius.\n            '--bs-list-group-bg': 'transparent',\n          }}\n        >\n          {allColumnValues.map((value) => {\n            const isSelected = selected.has(value);\n            return (\n              <div key={value} className=\"list-group-item d-flex align-items-center gap-3\">\n                <div className=\"form-check\">\n                  <input\n                    className=\"form-check-input\"\n                    type=\"checkbox\"\n                    checked={isSelected}\n                    id={`${columnId}-${value}`}\n                    onChange={() => toggleSelected(value)}\n                  />\n                  <label className=\"form-check-label fw-normal\" for={`${columnId}-${value}`}>\n                    {renderValueLabel({\n                      value,\n                      isSelected,\n                    })}\n                  </label>\n                </div>\n              </div>\n            );\n          })}\n        </div>\n      </Dropdown.Menu>\n    </Dropdown>\n  );\n}\n"]}

package/dist/components/NumericInputColumnFilter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NumericInputColumnFilter.d.ts","sourceRoot":"","sources":["../../src/components/NumericInputColumnFilter.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAInD,MAAM,MAAM,wBAAwB,GAChC;IACE,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,EAAE,KAAK,CAAC;CAClB,GACD;IACE,WAAW,EAAE,EAAE,CAAC;IAChB,SAAS,EAAE,IAAI,CAAC;CACjB,CAAC;AAEN;;;;;;GAMG;AACH,wBAAgB,wBAAwB,CAAC,KAAK,EAAE,MAAM,EAAE,EACtD,MAAM,GACP,EAAE;IACD,MAAM,EAAE,MAAM,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;CAC/B,yCA+GA;AAED;;;;;;GAMG;AACH,wBAAgB,kBAAkB,CAAC,WAAW,EAAE,MAAM,GAAG;IACvD,QAAQ,EAAE,GAAG,GAAG,GAAG,GAAG,IAAI,GAAG,IAAI,GAAG,GAAG,CAAC;IACxC,KAAK,EAAE,MAAM,CAAC;CACf,GAAG,IAAI,CAYP;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,qBAAqB,CACnC,GAAG,EAAE,GAAG,EACR,QAAQ,EAAE,MAAM,EAChB,EAAE,WAAW,EAAE,SAAS,EAAE,EAAE,wBAAwB,GACnD,OAAO,CA+BT"}
+{"version":3,"file":"NumericInputColumnFilter.d.ts","sourceRoot":"","sources":["../../src/components/NumericInputColumnFilter.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAInD,MAAM,MAAM,wBAAwB,GAChC;IACE,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,EAAE,KAAK,CAAC;CAClB,GACD;IACE,WAAW,EAAE,EAAE,CAAC;IAChB,SAAS,EAAE,IAAI,CAAC;CACjB,CAAC;AAEN;;;;;;GAMG;AACH,wBAAgB,wBAAwB,CAAC,KAAK,EAAE,MAAM,EAAE,EACtD,MAAM,GACP,EAAE;IACD,MAAM,EAAE,MAAM,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;CAC/B,yCA4GA;AAED;;;;;;GAMG;AACH,wBAAgB,kBAAkB,CAAC,WAAW,EAAE,MAAM,GAAG;IACvD,QAAQ,EAAE,GAAG,GAAG,GAAG,GAAG,IAAI,GAAG,IAAI,GAAG,GAAG,CAAC;IACxC,KAAK,EAAE,MAAM,CAAC;CACf,GAAG,IAAI,CAYP;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,qBAAqB,CACnC,GAAG,EAAE,GAAG,EACR,QAAQ,EAAE,MAAM,EAChB,EAAE,WAAW,EAAE,SAAS,EAAE,EAAE,wBAAwB,GACnD,OAAO,CA+BT"}

package/dist/components/NumericInputColumnFilter.js

@@ -20,26 +20,22 @@ export function NumericInputColumnFilter({ column, }) {
     const emptyOnly = value.emptyOnly;
     const hasActiveFilter = filterValue.trim().length > 0 || emptyOnly;
     const isInvalid = filterValue.trim().length > 0 && parseNumericFilter(filterValue) === null;
-    return (_jsxs(Dropdown, { align: "end", children: [_jsx(Dropdown.Toggle, { variant: "link", class: clsx('text-muted p-0', hasActiveFilter && (isInvalid ? 'text-warning' : 'text-primary')), id: `filter-${columnId}`, "aria-label": `Filter ${label.toLowerCase()}`, title: `Filter ${label.toLowerCase()}`, children: _jsx("i", { class: clsx('bi', isInvalid
+    return (_jsxs(Dropdown, { align: "end", children: [_jsx(Dropdown.Toggle, { variant: "link", className: clsx('text-muted p-0', hasActiveFilter && (isInvalid ? 'text-warning' : 'text-primary')), id: `filter-${columnId}`, "aria-label": `Filter ${label.toLowerCase()}`, title: `Filter ${label.toLowerCase()}`, children: _jsx("i", { className: clsx('bi', isInvalid
                         ? 'bi-exclamation-triangle'
                         : hasActiveFilter
                             ? 'bi-funnel-fill'
-                            : 'bi-funnel'), "aria-hidden": "true" }) }), _jsx(Dropdown.Menu
-            // eslint-disable-next-line @eslint-react/no-forbidden-props
-            , { 
-                // eslint-disable-next-line @eslint-react/no-forbidden-props
-                className: "p-0", children: _jsxs("div", { class: "p-3", style: { minWidth: '240px' }, children: [_jsxs("div", { class: "d-flex align-items-center justify-content-between mb-2", children: [_jsx("label", { class: "form-label fw-semibold mb-0", id: `${columnId}-filter-label`, children: label }), _jsx("button", { type: "button", class: clsx('btn btn-link btn-sm text-decoration-none', !hasActiveFilter && 'invisible'), onClick: () => {
+                            : 'bi-funnel'), "aria-hidden": "true" }) }), _jsx(Dropdown.Menu, { className: "p-0", children: _jsxs("div", { className: "p-3", style: { minWidth: '240px' }, children: [_jsxs("div", { className: "d-flex align-items-center justify-content-between mb-2", children: [_jsx("label", { className: "form-label fw-semibold mb-0", id: `${columnId}-filter-label`, children: label }), _jsx("button", { type: "button", className: clsx('btn btn-link btn-sm text-decoration-none', !hasActiveFilter && 'invisible'), onClick: () => {
                                         column.setFilterValue({ filterValue: '', emptyOnly: false });
-                                    }, children: "Clear" })] }), _jsx("input", { type: "text", class: clsx('form-control form-control-sm', isInvalid && 'is-invalid'), placeholder: "e.g., >0, <5, =10", "aria-labelledby": `${columnId}-filter-label`, value: filterValue, disabled: emptyOnly, "aria-describedby": `${columnId}-filter-description`, onInput: (e) => {
+                                    }, children: "Clear" })] }), _jsx("input", { type: "text", className: clsx('form-control form-control-sm', isInvalid && 'is-invalid'), placeholder: "e.g., >0, <5, =10", "aria-labelledby": `${columnId}-filter-label`, value: filterValue, disabled: emptyOnly, "aria-describedby": `${columnId}-filter-description`, onInput: (e) => {
                                 column.setFilterValue({
                                     filterValue: e.currentTarget.value,
                                     emptyOnly: false,
                                 });
-                            }, onClick: (e) => e.stopPropagation() }), isInvalid && (_jsxs("div", { class: "invalid-feedback d-block", children: ["Invalid filter format. Use operators like ", _jsx("code", { children: ">5" }), " or ", _jsx("code", { children: "<=10" })] })), !isInvalid && (_jsxs("small", { class: "form-text text-nowrap", id: `${columnId}-filter-description`, children: ["Operators: ", _jsx("code", { children: "<" }), ", ", _jsx("code", { children: ">" }), ", ", _jsx("code", { children: "<=" }), ",", ' ', _jsx("code", { children: ">=" }), ", ", _jsx("code", { children: "=" })] })), _jsxs("div", { class: "form-check mt-2", children: [_jsx("input", { class: "form-check-input", type: "checkbox", checked: emptyOnly, id: `${columnId}-empty-filter`, onChange: (e) => {
+                            }, onClick: (e) => e.stopPropagation() }), isInvalid && (_jsxs("div", { className: "invalid-feedback d-block", children: ["Invalid filter format. Use operators like ", _jsx("code", { children: ">5" }), " or ", _jsx("code", { children: "<=10" })] })), !isInvalid && (_jsxs("small", { className: "form-text text-nowrap", id: `${columnId}-filter-description`, children: ["Operators: ", _jsx("code", { children: "<" }), ", ", _jsx("code", { children: ">" }), ", ", _jsx("code", { children: "<=" }), ",", ' ', _jsx("code", { children: ">=" }), ", ", _jsx("code", { children: "=" })] })), _jsxs("div", { className: "form-check mt-2", children: [_jsx("input", { className: "form-check-input", type: "checkbox", checked: emptyOnly, id: `${columnId}-empty-filter`, onChange: (e) => {
                                         column.setFilterValue(e.currentTarget.checked
                                             ? { filterValue: '', emptyOnly: true }
                                             : { filterValue: '', emptyOnly: false });
-                                    } }), _jsx("label", { class: "form-check-label", for: `${columnId}-empty-filter`, children: "Empty values" })] })] }) })] }));
+                                    } }), _jsx("label", { className: "form-check-label", for: `${columnId}-empty-filter`, children: "Empty values" })] })] }) })] }));
 }
 /**
  * Helper function to parse a numeric filter value.

package/dist/components/NumericInputColumnFilter.js.map

@@ -1 +1 @@
-{"version":3,"file":"NumericInputColumnFilter.js","sourceRoot":"","sources":["../../src/components/NumericInputColumnFilter.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { Column } from '@tanstack/table-core';\nimport clsx from 'clsx';\nimport Dropdown from 'react-bootstrap/Dropdown';\n\nexport type NumericColumnFilterValue =\n  | {\n      filterValue: string;\n      emptyOnly: false;\n    }\n  | {\n      filterValue: '';\n      emptyOnly: true;\n    };\n\n/**\n * A component that allows the user to filter a numeric column using comparison operators.\n * Supports syntax like: <1, >0, <=5, >=10, =5, or just 5 (implicit equals)\n *\n * @param params\n * @param params.column - The TanStack Table column object\n */\nexport function NumericInputColumnFilter<TData, TValue>({\n  column,\n}: {\n  column: Column<TData, TValue>;\n}) {\n  const columnId = column.id;\n  const value = (column.getFilterValue() as NumericColumnFilterValue | undefined) ?? {\n    filterValue: '',\n    emptyOnly: false,\n  };\n\n  const label =\n    column.columnDef.meta?.label ??\n    (typeof column.columnDef.header === 'string' ? column.columnDef.header : column.id);\n\n  const filterValue = value.filterValue;\n  const emptyOnly = value.emptyOnly;\n  const hasActiveFilter = filterValue.trim().length > 0 || emptyOnly;\n  const isInvalid = filterValue.trim().length > 0 && parseNumericFilter(filterValue) === null;\n\n  return (\n    <Dropdown align=\"end\">\n      <Dropdown.Toggle\n        variant=\"link\"\n        class={clsx(\n          'text-muted p-0',\n          hasActiveFilter && (isInvalid ? 'text-warning' : 'text-primary'),\n        )}\n        id={`filter-${columnId}`}\n        aria-label={`Filter ${label.toLowerCase()}`}\n        title={`Filter ${label.toLowerCase()}`}\n      >\n        <i\n          class={clsx(\n            'bi',\n            isInvalid\n              ? 'bi-exclamation-triangle'\n              : hasActiveFilter\n                ? 'bi-funnel-fill'\n                : 'bi-funnel',\n          )}\n          aria-hidden=\"true\"\n        />\n      </Dropdown.Toggle>\n      <Dropdown.Menu\n        // eslint-disable-next-line @eslint-react/no-forbidden-props\n        className=\"p-0\"\n      >\n        <div class=\"p-3\" style={{ minWidth: '240px' }}>\n          <div class=\"d-flex align-items-center justify-content-between mb-2\">\n            <label class=\"form-label fw-semibold mb-0\" id={`${columnId}-filter-label`}>\n              {label}\n            </label>\n            <button\n              type=\"button\"\n              class={clsx(\n                'btn btn-link btn-sm text-decoration-none',\n                !hasActiveFilter && 'invisible',\n              )}\n              onClick={() => {\n                column.setFilterValue({ filterValue: '', emptyOnly: false });\n              }}\n            >\n              Clear\n            </button>\n          </div>\n          <input\n            type=\"text\"\n            class={clsx('form-control form-control-sm', isInvalid && 'is-invalid')}\n            placeholder=\"e.g., >0, <5, =10\"\n            aria-labelledby={`${columnId}-filter-label`}\n            value={filterValue}\n            disabled={emptyOnly}\n            aria-describedby={`${columnId}-filter-description`}\n            onInput={(e) => {\n              column.setFilterValue({\n                filterValue: e.currentTarget.value,\n                emptyOnly: false,\n              });\n            }}\n            onClick={(e) => e.stopPropagation()}\n          />\n          {isInvalid && (\n            <div class=\"invalid-feedback d-block\">\n              Invalid filter format. Use operators like <code>&gt;5</code> or <code>&lt;=10</code>\n            </div>\n          )}\n          {!isInvalid && (\n            <small class=\"form-text text-nowrap\" id={`${columnId}-filter-description`}>\n              Operators: <code>&lt;</code>, <code>&gt;</code>, <code>&lt;=</code>,{' '}\n              <code>&gt;=</code>, <code>=</code>\n            </small>\n          )}\n          <div class=\"form-check mt-2\">\n            <input\n              class=\"form-check-input\"\n              type=\"checkbox\"\n              checked={emptyOnly}\n              id={`${columnId}-empty-filter`}\n              onChange={(e) => {\n                column.setFilterValue(\n                  e.currentTarget.checked\n                    ? { filterValue: '', emptyOnly: true }\n                    : { filterValue: '', emptyOnly: false },\n                );\n              }}\n            />\n            <label class=\"form-check-label\" for={`${columnId}-empty-filter`}>\n              Empty values\n            </label>\n          </div>\n        </div>\n      </Dropdown.Menu>\n    </Dropdown>\n  );\n}\n\n/**\n * Helper function to parse a numeric filter value.\n * Returns null if the filter is invalid or empty.\n *\n * @param filterValue - The filter string (e.g., \">5\", \"<=10\", \"3\")\n * @returns Parsed operator and value, or null if invalid\n */\nexport function parseNumericFilter(filterValue: string): {\n  operator: '<' | '>' | '<=' | '>=' | '=';\n  value: number;\n} | null {\n  if (!filterValue.trim()) return null;\n\n  const match = filterValue.trim().match(/^(<=?|>=?|=)?\\s*(-?\\d+\\.?\\d*)$/);\n  if (!match) return null;\n\n  const operator = (match[1] || '=') as '<' | '>' | '<=' | '>=' | '=';\n  const value = Number.parseFloat(match[2]);\n\n  if (Number.isNaN(value)) return null;\n\n  return { operator, value };\n}\n\n/**\n * TanStack Table filter function for numeric columns.\n * Use this as the `filterFn` for numeric columns.\n *\n * @example\n * {\n *   id: 'manual_points',\n *   accessorKey: 'manual_points',\n *   filterFn: numericColumnFilterFn,\n * }\n */\nexport function numericColumnFilterFn(\n  row: any,\n  columnId: string,\n  { filterValue, emptyOnly }: NumericColumnFilterValue,\n): boolean {\n  // Handle object-based filter value\n  const cellValue = row.getValue(columnId) as number | null;\n  const isEmpty = cellValue == null;\n\n  if (emptyOnly) {\n    return isEmpty;\n  }\n\n  // If there's no numeric filter, show all rows\n  const parsed = parseNumericFilter(filterValue);\n  if (!parsed) return true;\n\n  // If cell is empty and we're doing numeric filtering, don't show it\n  if (isEmpty) return false;\n\n  // Apply numeric filter\n  switch (parsed.operator) {\n    case '<':\n      return cellValue < parsed.value;\n    case '>':\n      return cellValue > parsed.value;\n    case '<=':\n      return cellValue <= parsed.value;\n    case '>=':\n      return cellValue >= parsed.value;\n    case '=':\n      return cellValue === parsed.value;\n    default:\n      return true;\n  }\n}\n"]}
+{"version":3,"file":"NumericInputColumnFilter.js","sourceRoot":"","sources":["../../src/components/NumericInputColumnFilter.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { Column } from '@tanstack/table-core';\nimport clsx from 'clsx';\nimport Dropdown from 'react-bootstrap/Dropdown';\n\nexport type NumericColumnFilterValue =\n  | {\n      filterValue: string;\n      emptyOnly: false;\n    }\n  | {\n      filterValue: '';\n      emptyOnly: true;\n    };\n\n/**\n * A component that allows the user to filter a numeric column using comparison operators.\n * Supports syntax like: <1, >0, <=5, >=10, =5, or just 5 (implicit equals)\n *\n * @param params\n * @param params.column - The TanStack Table column object\n */\nexport function NumericInputColumnFilter<TData, TValue>({\n  column,\n}: {\n  column: Column<TData, TValue>;\n}) {\n  const columnId = column.id;\n  const value = (column.getFilterValue() as NumericColumnFilterValue | undefined) ?? {\n    filterValue: '',\n    emptyOnly: false,\n  };\n\n  const label =\n    column.columnDef.meta?.label ??\n    (typeof column.columnDef.header === 'string' ? column.columnDef.header : column.id);\n\n  const filterValue = value.filterValue;\n  const emptyOnly = value.emptyOnly;\n  const hasActiveFilter = filterValue.trim().length > 0 || emptyOnly;\n  const isInvalid = filterValue.trim().length > 0 && parseNumericFilter(filterValue) === null;\n\n  return (\n    <Dropdown align=\"end\">\n      <Dropdown.Toggle\n        variant=\"link\"\n        className={clsx(\n          'text-muted p-0',\n          hasActiveFilter && (isInvalid ? 'text-warning' : 'text-primary'),\n        )}\n        id={`filter-${columnId}`}\n        aria-label={`Filter ${label.toLowerCase()}`}\n        title={`Filter ${label.toLowerCase()}`}\n      >\n        <i\n          className={clsx(\n            'bi',\n            isInvalid\n              ? 'bi-exclamation-triangle'\n              : hasActiveFilter\n                ? 'bi-funnel-fill'\n                : 'bi-funnel',\n          )}\n          aria-hidden=\"true\"\n        />\n      </Dropdown.Toggle>\n      <Dropdown.Menu className=\"p-0\">\n        <div className=\"p-3\" style={{ minWidth: '240px' }}>\n          <div className=\"d-flex align-items-center justify-content-between mb-2\">\n            <label className=\"form-label fw-semibold mb-0\" id={`${columnId}-filter-label`}>\n              {label}\n            </label>\n            <button\n              type=\"button\"\n              className={clsx(\n                'btn btn-link btn-sm text-decoration-none',\n                !hasActiveFilter && 'invisible',\n              )}\n              onClick={() => {\n                column.setFilterValue({ filterValue: '', emptyOnly: false });\n              }}\n            >\n              Clear\n            </button>\n          </div>\n          <input\n            type=\"text\"\n            className={clsx('form-control form-control-sm', isInvalid && 'is-invalid')}\n            placeholder=\"e.g., >0, <5, =10\"\n            aria-labelledby={`${columnId}-filter-label`}\n            value={filterValue}\n            disabled={emptyOnly}\n            aria-describedby={`${columnId}-filter-description`}\n            onInput={(e) => {\n              column.setFilterValue({\n                filterValue: e.currentTarget.value,\n                emptyOnly: false,\n              });\n            }}\n            onClick={(e) => e.stopPropagation()}\n          />\n          {isInvalid && (\n            <div className=\"invalid-feedback d-block\">\n              Invalid filter format. Use operators like <code>&gt;5</code> or <code>&lt;=10</code>\n            </div>\n          )}\n          {!isInvalid && (\n            <small className=\"form-text text-nowrap\" id={`${columnId}-filter-description`}>\n              Operators: <code>&lt;</code>, <code>&gt;</code>, <code>&lt;=</code>,{' '}\n              <code>&gt;=</code>, <code>=</code>\n            </small>\n          )}\n          <div className=\"form-check mt-2\">\n            <input\n              className=\"form-check-input\"\n              type=\"checkbox\"\n              checked={emptyOnly}\n              id={`${columnId}-empty-filter`}\n              onChange={(e) => {\n                column.setFilterValue(\n                  e.currentTarget.checked\n                    ? { filterValue: '', emptyOnly: true }\n                    : { filterValue: '', emptyOnly: false },\n                );\n              }}\n            />\n            <label className=\"form-check-label\" for={`${columnId}-empty-filter`}>\n              Empty values\n            </label>\n          </div>\n        </div>\n      </Dropdown.Menu>\n    </Dropdown>\n  );\n}\n\n/**\n * Helper function to parse a numeric filter value.\n * Returns null if the filter is invalid or empty.\n *\n * @param filterValue - The filter string (e.g., \">5\", \"<=10\", \"3\")\n * @returns Parsed operator and value, or null if invalid\n */\nexport function parseNumericFilter(filterValue: string): {\n  operator: '<' | '>' | '<=' | '>=' | '=';\n  value: number;\n} | null {\n  if (!filterValue.trim()) return null;\n\n  const match = filterValue.trim().match(/^(<=?|>=?|=)?\\s*(-?\\d+\\.?\\d*)$/);\n  if (!match) return null;\n\n  const operator = (match[1] || '=') as '<' | '>' | '<=' | '>=' | '=';\n  const value = Number.parseFloat(match[2]);\n\n  if (Number.isNaN(value)) return null;\n\n  return { operator, value };\n}\n\n/**\n * TanStack Table filter function for numeric columns.\n * Use this as the `filterFn` for numeric columns.\n *\n * @example\n * {\n *   id: 'manual_points',\n *   accessorKey: 'manual_points',\n *   filterFn: numericColumnFilterFn,\n * }\n */\nexport function numericColumnFilterFn(\n  row: any,\n  columnId: string,\n  { filterValue, emptyOnly }: NumericColumnFilterValue,\n): boolean {\n  // Handle object-based filter value\n  const cellValue = row.getValue(columnId) as number | null;\n  const isEmpty = cellValue == null;\n\n  if (emptyOnly) {\n    return isEmpty;\n  }\n\n  // If there's no numeric filter, show all rows\n  const parsed = parseNumericFilter(filterValue);\n  if (!parsed) return true;\n\n  // If cell is empty and we're doing numeric filtering, don't show it\n  if (isEmpty) return false;\n\n  // Apply numeric filter\n  switch (parsed.operator) {\n    case '<':\n      return cellValue < parsed.value;\n    case '>':\n      return cellValue > parsed.value;\n    case '<=':\n      return cellValue <= parsed.value;\n    case '>=':\n      return cellValue >= parsed.value;\n    case '=':\n      return cellValue === parsed.value;\n    default:\n      return true;\n  }\n}\n"]}

package/dist/components/PresetFilterDropdown.js

@@ -85,9 +85,9 @@ export function PresetFilterDropdown({ table, options, label = 'Filter', onSelec
         onSelect?.(optionName);
     };
     const displayLabel = selectedOption ?? 'Custom';
-    return (_jsxs(Dropdown, { as: ButtonGroup, children: [_jsxs(Dropdown.Toggle, { variant: "tanstack-table", children: [_jsx("i", { class: "bi bi-funnel me-2", "aria-hidden": "true" }), label, ": ", displayLabel] }), _jsxs(Dropdown.Menu, { children: [Object.keys(options).map((optionName) => {
+    return (_jsxs(Dropdown, { as: ButtonGroup, children: [_jsxs(Dropdown.Toggle, { variant: "tanstack-table", children: [_jsx("i", { className: "bi bi-funnel me-2", "aria-hidden": "true" }), label, ": ", displayLabel] }), _jsxs(Dropdown.Menu, { children: [Object.keys(options).map((optionName) => {
                         const isSelected = selectedOption === optionName;
-                        return (_jsxs(Dropdown.Item, { as: "button", type: "button", active: isSelected, onClick: () => handleOptionClick(optionName), children: [_jsx("i", { class: `bi ${isSelected ? 'bi-check-circle-fill' : 'bi-circle'} me-2` }), optionName] }, optionName));
-                    }), selectedOption === null && (_jsxs(Dropdown.Item, { as: "button", type: "button", active: true, disabled: true, children: [_jsx("i", { class: "bi bi-check-circle-fill me-2" }), "Custom"] }))] })] }));
+                        return (_jsxs(Dropdown.Item, { as: "button", type: "button", active: isSelected, onClick: () => handleOptionClick(optionName), children: [_jsx("i", { className: `bi ${isSelected ? 'bi-check-circle-fill' : 'bi-circle'} me-2` }), optionName] }, optionName));
+                    }), selectedOption === null && (_jsxs(Dropdown.Item, { as: "button", type: "button", active: true, disabled: true, children: [_jsx("i", { className: "bi bi-check-circle-fill me-2" }), "Custom"] }))] })] }));
 }
 //# sourceMappingURL=PresetFilterDropdown.js.map

package/dist/components/PresetFilterDropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"PresetFilterDropdown.js","sourceRoot":"","sources":["../../src/components/PresetFilterDropdown.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { ColumnFiltersState, Table } from '@tanstack/react-table';\nimport { useMemo } from 'preact/compat';\nimport { ButtonGroup, Dropdown } from 'react-bootstrap';\n\n/**\n * Compares two filter values for deep equality using JSON serialization.\n */\nfunction filtersEqual(a: unknown, b: unknown): boolean {\n  return JSON.stringify(a) === JSON.stringify(b);\n}\n\n/**\n * Extracts all unique column IDs referenced across all preset options.\n */\nfunction getRelevantColumnIds(options: Record<string, ColumnFiltersState>): Set<string> {\n  const columnIds = new Set<string>();\n  for (const filters of Object.values(options)) {\n    for (const filter of filters) {\n      columnIds.add(filter.id);\n    }\n  }\n  return columnIds;\n}\n\n/**\n * Gets the current filter values for the relevant columns from the table.\n */\nfunction getRelevantFilters<TData>(\n  table: Table<TData>,\n  relevantColumnIds: Set<string>,\n): ColumnFiltersState {\n  const allFilters = table.getState().columnFilters;\n  return allFilters.filter((f) => relevantColumnIds.has(f.id));\n}\n\n/**\n * Checks if the current filters match a preset's filters.\n * Both must have the same column IDs with equal values.\n */\nfunction filtersMatchPreset(current: ColumnFiltersState, preset: ColumnFiltersState): boolean {\n  // If lengths differ, they don't match\n  if (current.length !== preset.length) return false;\n\n  // For empty presets, current must also be empty\n  if (preset.length === 0) return current.length === 0;\n\n  // Check that every preset filter exists in current with the same value\n  for (const presetFilter of preset) {\n    const currentFilter = current.find((f) => f.id === presetFilter.id);\n    if (!currentFilter || !filtersEqual(currentFilter.value, presetFilter.value)) {\n      return false;\n    }\n  }\n\n  return true;\n}\n\n/**\n * A dropdown component that allows users to select from preset filter configurations.\n * The selected state is derived from the table's current column filters.\n * If no preset matches, a \"Custom\" option is shown as selected.\n *\n * Currently, this component expects that the filters states are arrays.\n */\nexport function PresetFilterDropdown<OptionName extends string, TData>({\n  table,\n  options,\n  label = 'Filter',\n  onSelect,\n}: {\n  /** The TanStack Table instance */\n  table: Table<TData>;\n  /** Mapping of option names to their filter configurations */\n  options: Record<OptionName, ColumnFiltersState>;\n  /** Label prefix for the dropdown button (e.g., \"Filter\") */\n  label?: string;\n  /** Callback when an option is selected, useful for side effects like column visibility */\n  onSelect?: (optionName: OptionName) => void;\n}) {\n  const relevantColumnIds = getRelevantColumnIds(options);\n\n  const currentRelevantFilters = useMemo(\n    () => getRelevantFilters(table, relevantColumnIds),\n    [table, relevantColumnIds],\n  );\n\n  // Find which option matches the current filters\n  const selectedOption = useMemo<OptionName | null>(() => {\n    for (const [optionName, presetFilters] of Object.entries(options)) {\n      if (filtersMatchPreset(currentRelevantFilters, presetFilters as ColumnFiltersState)) {\n        return optionName as OptionName;\n      }\n    }\n    return null; // No preset matches - custom filter state\n  }, [options, currentRelevantFilters]);\n\n  const handleOptionClick = (optionName: OptionName) => {\n    const presetFilters = options[optionName];\n\n    // Get current filters, removing any that are in our relevant columns\n    const currentFilters = table.getState().columnFilters;\n    const preservedFilters = currentFilters.filter((f) => !relevantColumnIds.has(f.id));\n\n    // For columns not in the preset, explicitly set empty filter to clear them\n    // This ensures the table's onColumnFiltersChange handler can sync the cleared state\n    const clearedFilters = Array.from(relevantColumnIds)\n      .filter((colId) => !presetFilters.some((f) => f.id === colId))\n      .map((colId) => ({\n        id: colId,\n        // TODO: This expects that we are only clearing filters whose state is an array.\n        value: [],\n      }));\n\n    // Combine preserved filters with the new preset filters and cleared filters\n    const newFilters = [...preservedFilters, ...presetFilters, ...clearedFilters];\n    table.setColumnFilters(newFilters);\n\n    onSelect?.(optionName);\n  };\n\n  const displayLabel = selectedOption ?? 'Custom';\n\n  return (\n    <Dropdown as={ButtonGroup}>\n      <Dropdown.Toggle variant=\"tanstack-table\">\n        <i class=\"bi bi-funnel me-2\" aria-hidden=\"true\" />\n        {label}: {displayLabel}\n      </Dropdown.Toggle>\n      <Dropdown.Menu>\n        {Object.keys(options).map((optionName) => {\n          const isSelected = selectedOption === optionName;\n          return (\n            <Dropdown.Item\n              key={optionName}\n              as=\"button\"\n              type=\"button\"\n              active={isSelected}\n              onClick={() => handleOptionClick(optionName as OptionName)}\n            >\n              <i class={`bi ${isSelected ? 'bi-check-circle-fill' : 'bi-circle'} me-2`} />\n              {optionName}\n            </Dropdown.Item>\n          );\n        })}\n        {/* Show Custom option only when no preset matches */}\n        {selectedOption === null && (\n          <Dropdown.Item as=\"button\" type=\"button\" active disabled>\n            <i class=\"bi bi-check-circle-fill me-2\" />\n            Custom\n          </Dropdown.Item>\n        )}\n      </Dropdown.Menu>\n    </Dropdown>\n  );\n}\n"]}
+{"version":3,"file":"PresetFilterDropdown.js","sourceRoot":"","sources":["../../src/components/PresetFilterDropdown.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { ColumnFiltersState, Table } from '@tanstack/react-table';\nimport { useMemo } from 'preact/compat';\nimport { ButtonGroup, Dropdown } from 'react-bootstrap';\n\n/**\n * Compares two filter values for deep equality using JSON serialization.\n */\nfunction filtersEqual(a: unknown, b: unknown): boolean {\n  return JSON.stringify(a) === JSON.stringify(b);\n}\n\n/**\n * Extracts all unique column IDs referenced across all preset options.\n */\nfunction getRelevantColumnIds(options: Record<string, ColumnFiltersState>): Set<string> {\n  const columnIds = new Set<string>();\n  for (const filters of Object.values(options)) {\n    for (const filter of filters) {\n      columnIds.add(filter.id);\n    }\n  }\n  return columnIds;\n}\n\n/**\n * Gets the current filter values for the relevant columns from the table.\n */\nfunction getRelevantFilters<TData>(\n  table: Table<TData>,\n  relevantColumnIds: Set<string>,\n): ColumnFiltersState {\n  const allFilters = table.getState().columnFilters;\n  return allFilters.filter((f) => relevantColumnIds.has(f.id));\n}\n\n/**\n * Checks if the current filters match a preset's filters.\n * Both must have the same column IDs with equal values.\n */\nfunction filtersMatchPreset(current: ColumnFiltersState, preset: ColumnFiltersState): boolean {\n  // If lengths differ, they don't match\n  if (current.length !== preset.length) return false;\n\n  // For empty presets, current must also be empty\n  if (preset.length === 0) return current.length === 0;\n\n  // Check that every preset filter exists in current with the same value\n  for (const presetFilter of preset) {\n    const currentFilter = current.find((f) => f.id === presetFilter.id);\n    if (!currentFilter || !filtersEqual(currentFilter.value, presetFilter.value)) {\n      return false;\n    }\n  }\n\n  return true;\n}\n\n/**\n * A dropdown component that allows users to select from preset filter configurations.\n * The selected state is derived from the table's current column filters.\n * If no preset matches, a \"Custom\" option is shown as selected.\n *\n * Currently, this component expects that the filters states are arrays.\n */\nexport function PresetFilterDropdown<OptionName extends string, TData>({\n  table,\n  options,\n  label = 'Filter',\n  onSelect,\n}: {\n  /** The TanStack Table instance */\n  table: Table<TData>;\n  /** Mapping of option names to their filter configurations */\n  options: Record<OptionName, ColumnFiltersState>;\n  /** Label prefix for the dropdown button (e.g., \"Filter\") */\n  label?: string;\n  /** Callback when an option is selected, useful for side effects like column visibility */\n  onSelect?: (optionName: OptionName) => void;\n}) {\n  const relevantColumnIds = getRelevantColumnIds(options);\n\n  const currentRelevantFilters = useMemo(\n    () => getRelevantFilters(table, relevantColumnIds),\n    [table, relevantColumnIds],\n  );\n\n  // Find which option matches the current filters\n  const selectedOption = useMemo<OptionName | null>(() => {\n    for (const [optionName, presetFilters] of Object.entries(options)) {\n      if (filtersMatchPreset(currentRelevantFilters, presetFilters as ColumnFiltersState)) {\n        return optionName as OptionName;\n      }\n    }\n    return null; // No preset matches - custom filter state\n  }, [options, currentRelevantFilters]);\n\n  const handleOptionClick = (optionName: OptionName) => {\n    const presetFilters = options[optionName];\n\n    // Get current filters, removing any that are in our relevant columns\n    const currentFilters = table.getState().columnFilters;\n    const preservedFilters = currentFilters.filter((f) => !relevantColumnIds.has(f.id));\n\n    // For columns not in the preset, explicitly set empty filter to clear them\n    // This ensures the table's onColumnFiltersChange handler can sync the cleared state\n    const clearedFilters = Array.from(relevantColumnIds)\n      .filter((colId) => !presetFilters.some((f) => f.id === colId))\n      .map((colId) => ({\n        id: colId,\n        // TODO: This expects that we are only clearing filters whose state is an array.\n        value: [],\n      }));\n\n    // Combine preserved filters with the new preset filters and cleared filters\n    const newFilters = [...preservedFilters, ...presetFilters, ...clearedFilters];\n    table.setColumnFilters(newFilters);\n\n    onSelect?.(optionName);\n  };\n\n  const displayLabel = selectedOption ?? 'Custom';\n\n  return (\n    <Dropdown as={ButtonGroup}>\n      <Dropdown.Toggle variant=\"tanstack-table\">\n        <i className=\"bi bi-funnel me-2\" aria-hidden=\"true\" />\n        {label}: {displayLabel}\n      </Dropdown.Toggle>\n      <Dropdown.Menu>\n        {Object.keys(options).map((optionName) => {\n          const isSelected = selectedOption === optionName;\n          return (\n            <Dropdown.Item\n              key={optionName}\n              as=\"button\"\n              type=\"button\"\n              active={isSelected}\n              onClick={() => handleOptionClick(optionName as OptionName)}\n            >\n              <i className={`bi ${isSelected ? 'bi-check-circle-fill' : 'bi-circle'} me-2`} />\n              {optionName}\n            </Dropdown.Item>\n          );\n        })}\n        {/* Show Custom option only when no preset matches */}\n        {selectedOption === null && (\n          <Dropdown.Item as=\"button\" type=\"button\" active disabled>\n            <i className=\"bi bi-check-circle-fill me-2\" />\n            Custom\n          </Dropdown.Item>\n        )}\n      </Dropdown.Menu>\n    </Dropdown>\n  );\n}\n"]}