@tcn/ui-table 2.3.12 → 2.3.14

package/dist/components/cells/header_cell.js

@@ -4,7 +4,7 @@ import { Box as r, HStack as h } from "@tcn/ui/stacks";
 import { TH as f } from "@tcn/ui/layouts";
 import { c as u } from "../../cell.module-WpHnQBVu.js";
 import { SortControl as y } from "./sort_control.js";
-function H({
+function z({
   heading: n,
   sticky: l,
   onResize: i,
@@ -14,7 +14,7 @@ function H({
   canSort: d
 }) {
   const m = l != null ? 2 : 1, p = x(
-    (t) => {
+    ({ width: t }) => {
       i?.(Math.max(t, 20));
     },
     [i]
@@ -60,6 +60,6 @@ function H({
   );
 }
 export {
-  H as HeaderCell
+  z as HeaderCell
 };
 //# sourceMappingURL=header_cell.js.map

package/dist/components/cells/header_cell.js.map

@@ -1 +1 @@
-{"version":3,"file":"header_cell.js","sources":["../../../src/components/cells/header_cell.tsx"],"sourcesContent":["import React, { useCallback } from 'react';\n\nimport { Box, HStack } from '@tcn/ui/stacks';\n\nimport { TH } from '@tcn/ui/layouts';\nimport cellStyles from './cell.module.css';\nimport { SortControl, type SortControlProps } from './sort_control.js';\n\nexport interface HeaderCellProps extends SortControlProps {\n  heading: React.ReactNode;\n  index: number;\n  sticky?: 'start' | 'end';\n  onResize?: (width: number) => void;\n  width?: number;\n}\n\nexport function HeaderCell({\n  heading,\n  sticky,\n  onResize,\n  width,\n  sortMode,\n  onSortModeChange,\n  canSort,\n}: HeaderCellProps) {\n  const zIndex = sticky != null ? 2 : 1;\n\n  const handleResize = useCallback(\n    (newSize: number) => {\n      onResize?.(Math.max(newSize, 20));\n    },\n    [onResize]\n  );\n\n  return (\n    <TH\n      className={cellStyles['table-cell']}\n      data-stick-to={sticky}\n      style={{ width: `${width}px`, zIndex }}\n    >\n      <Box\n        padding=\"0px 8px\" // FIXME: should be on theme ideally.\n        overflow=\"hidden\"\n        minWidth=\"24px\"\n        enableResizeOnEnd\n        onWidthResize={handleResize}\n        style={{ width: `${width}px`, minWidth: '20px' }}\n        onClick={e => e.stopPropagation()}\n      >\n        <HStack>\n          <Box\n            minWidth=\"24px\"\n            className=\"ellipsis\"\n            style={{ alignItems: 'center', display: 'flex' }}\n          >\n            {heading}\n          </Box>\n\n          <SortControl\n            canSort={canSort}\n            onSortModeChange={onSortModeChange}\n            sortMode={sortMode}\n          />\n        </HStack>\n      </Box>\n    </TH>\n  );\n}\n"],"names":["HeaderCell","heading","sticky","onResize","width","sortMode","onSortModeChange","canSort","zIndex","handleResize","useCallback","newSize","jsx","TH","cellStyles","Box","e","HStack","SortControl"],"mappings":";;;;;;AAgBO,SAASA,EAAW;AAAA,EACzB,SAAAC;AAAA,EACA,QAAAC;AAAA,EACA,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,SAAAC;AACF,GAAoB;AAClB,QAAMC,IAASN,KAAU,OAAO,IAAI,GAE9BO,IAAeC;AAAA,IACnB,CAACC,MAAoB;AACnB,MAAAR,IAAW,KAAK,IAAIQ,GAAS,EAAE,CAAC;AAAA,IAClC;AAAA,IACA,CAACR,CAAQ;AAAA,EAAA;AAGX,SACE,gBAAAS;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAW,YAAY;AAAA,MAClC,iBAAeZ;AAAA,MACf,OAAO,EAAE,OAAO,GAAGE,CAAK,MAAM,QAAAI,EAAA;AAAA,MAE9B,UAAA,gBAAAI;AAAA,QAACG;AAAA,QAAA;AAAA,UACC,SAAQ;AAAA,UACR,UAAS;AAAA,UACT,UAAS;AAAA,UACT,mBAAiB;AAAA,UACjB,eAAeN;AAAA,UACf,OAAO,EAAE,OAAO,GAAGL,CAAK,MAAM,UAAU,OAAA;AAAA,UACxC,SAAS,CAAAY,MAAKA,EAAE,gBAAA;AAAA,UAEhB,4BAACC,GAAA,EACC,UAAA;AAAA,YAAA,gBAAAL;AAAA,cAACG;AAAA,cAAA;AAAA,gBACC,UAAS;AAAA,gBACT,WAAU;AAAA,gBACV,OAAO,EAAE,YAAY,UAAU,SAAS,OAAA;AAAA,gBAEvC,UAAAd;AAAA,cAAA;AAAA,YAAA;AAAA,YAGH,gBAAAW;AAAA,cAACM;AAAA,cAAA;AAAA,gBACC,SAAAX;AAAA,gBACA,kBAAAD;AAAA,gBACA,UAAAD;AAAA,cAAA;AAAA,YAAA;AAAA,UACF,EAAA,CACF;AAAA,QAAA;AAAA,MAAA;AAAA,IACF;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"header_cell.js","sources":["../../../src/components/cells/header_cell.tsx"],"sourcesContent":["import React, { useCallback } from 'react';\n\nimport { Box, HStack, type OnWidthResizePayload } from '@tcn/ui/stacks';\n\nimport { TH } from '@tcn/ui/layouts';\nimport cellStyles from './cell.module.css';\nimport { SortControl, type SortControlProps } from './sort_control.js';\n\nexport interface HeaderCellProps extends SortControlProps {\n  heading: React.ReactNode;\n  index: number;\n  sticky?: 'start' | 'end';\n  onResize?: (width: number) => void;\n  width?: number;\n}\n\nexport function HeaderCell({\n  heading,\n  sticky,\n  onResize,\n  width,\n  sortMode,\n  onSortModeChange,\n  canSort,\n}: HeaderCellProps) {\n  const zIndex = sticky != null ? 2 : 1;\n\n  const handleResize = useCallback(\n    ({ width }: OnWidthResizePayload) => {\n      onResize?.(Math.max(width, 20));\n    },\n    [onResize]\n  );\n\n  return (\n    <TH\n      className={cellStyles['table-cell']}\n      data-stick-to={sticky}\n      style={{ width: `${width}px`, zIndex }}\n    >\n      <Box\n        padding=\"0px 8px\" // FIXME: should be on theme ideally.\n        overflow=\"hidden\"\n        minWidth=\"24px\"\n        enableResizeOnEnd\n        onWidthResize={handleResize}\n        style={{ width: `${width}px`, minWidth: '20px' }}\n        onClick={e => e.stopPropagation()}\n      >\n        <HStack>\n          <Box\n            minWidth=\"24px\"\n            className=\"ellipsis\"\n            style={{ alignItems: 'center', display: 'flex' }}\n          >\n            {heading}\n          </Box>\n\n          <SortControl\n            canSort={canSort}\n            onSortModeChange={onSortModeChange}\n            sortMode={sortMode}\n          />\n        </HStack>\n      </Box>\n    </TH>\n  );\n}\n"],"names":["HeaderCell","heading","sticky","onResize","width","sortMode","onSortModeChange","canSort","zIndex","handleResize","useCallback","jsx","TH","cellStyles","Box","e","HStack","SortControl"],"mappings":";;;;;;AAgBO,SAASA,EAAW;AAAA,EACzB,SAAAC;AAAA,EACA,QAAAC;AAAA,EACA,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,SAAAC;AACF,GAAoB;AAClB,QAAMC,IAASN,KAAU,OAAO,IAAI,GAE9BO,IAAeC;AAAA,IACnB,CAAC,EAAE,OAAAN,QAAkC;AACnC,MAAAD,IAAW,KAAK,IAAIC,GAAO,EAAE,CAAC;AAAA,IAChC;AAAA,IACA,CAACD,CAAQ;AAAA,EAAA;AAGX,SACE,gBAAAQ;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAW,YAAY;AAAA,MAClC,iBAAeX;AAAA,MACf,OAAO,EAAE,OAAO,GAAGE,CAAK,MAAM,QAAAI,EAAA;AAAA,MAE9B,UAAA,gBAAAG;AAAA,QAACG;AAAA,QAAA;AAAA,UACC,SAAQ;AAAA,UACR,UAAS;AAAA,UACT,UAAS;AAAA,UACT,mBAAiB;AAAA,UACjB,eAAeL;AAAA,UACf,OAAO,EAAE,OAAO,GAAGL,CAAK,MAAM,UAAU,OAAA;AAAA,UACxC,SAAS,CAAAW,MAAKA,EAAE,gBAAA;AAAA,UAEhB,4BAACC,GAAA,EACC,UAAA;AAAA,YAAA,gBAAAL;AAAA,cAACG;AAAA,cAAA;AAAA,gBACC,UAAS;AAAA,gBACT,WAAU;AAAA,gBACV,OAAO,EAAE,YAAY,UAAU,SAAS,OAAA;AAAA,gBAEvC,UAAAb;AAAA,cAAA;AAAA,YAAA;AAAA,YAGH,gBAAAU;AAAA,cAACM;AAAA,cAAA;AAAA,gBACC,SAAAV;AAAA,gBACA,kBAAAD;AAAA,gBACA,UAAAD;AAAA,cAAA;AAAA,YAAA;AAAA,UACF,EAAA,CACF;AAAA,QAAA;AAAA,MAAA;AAAA,IACF;AAAA,EAAA;AAGN;"}

package/dist/components/table_filter_panel/table_filter_panel.d.ts

@@ -2,11 +2,12 @@ import { DataSource } from '@tcn/resource-store';
 import { ReactElement } from 'react';
 import { FieldFilterProps } from './field_filters/field_filter_props.js';
 import { TableFilterPanelPresenter } from './table_filter_panel_presenter.js';
-export type TableFilterPanelProps = {
+import { PanelProps } from '@tcn/ui/surfaces';
+export interface TableFilterPanelProps extends Omit<PanelProps, 'children'> {
     children: ReactElement<FieldFilterProps>[] | ReactElement<FieldFilterProps>;
     dataSource: DataSource<any>;
     onClose?: () => void;
-};
-export declare function TableFilterPanel({ children, dataSource, onClose, }: TableFilterPanelProps): import("react/jsx-runtime").JSX.Element;
+}
+export declare function TableFilterPanel({ children, dataSource, className, onClose, ...props }: TableFilterPanelProps): import("react/jsx-runtime").JSX.Element;
 export declare const TableFilterPanelContext: import('react').Context<TableFilterPanelPresenter<unknown> | null>;
 //# sourceMappingURL=table_filter_panel.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"table_filter_panel.d.ts","sourceRoot":"","sources":["../../../src/components/table_filter_panel/table_filter_panel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AACjD,OAAO,EAAE,YAAY,EAA2B,MAAM,OAAO,CAAC;AAC9D,OAAO,EAAE,gBAAgB,EAAE,MAAM,uCAAuC,CAAC;AACzE,OAAO,EAAE,yBAAyB,EAAE,MAAM,mCAAmC,CAAC;AAQ9E,MAAM,MAAM,qBAAqB,GAAG;IAClC,QAAQ,EAAE,YAAY,CAAC,gBAAgB,CAAC,EAAE,GAAG,YAAY,CAAC,gBAAgB,CAAC,CAAC;IAC5E,UAAU,EAAE,UAAU,CAAC,GAAG,CAAC,CAAC;IAC5B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAEF,wBAAgB,gBAAgB,CAAC,EAC/B,QAAQ,EACR,UAAU,EACV,OAAO,GACR,EAAE,qBAAqB,2CA6BvB;AAED,eAAO,MAAM,uBAAuB,oEAEnC,CAAC"}
+{"version":3,"file":"table_filter_panel.d.ts","sourceRoot":"","sources":["../../../src/components/table_filter_panel/table_filter_panel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AACjD,OAAO,EAAE,YAAY,EAA2B,MAAM,OAAO,CAAC;AAC9D,OAAO,EAAE,gBAAgB,EAAE,MAAM,uCAAuC,CAAC;AACzE,OAAO,EAAE,yBAAyB,EAAE,MAAM,mCAAmC,CAAC;AAC9E,OAAO,EAAS,KAAK,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAO1D,MAAM,WAAW,qBAAsB,SAAQ,IAAI,CAAC,UAAU,EAAE,UAAU,CAAC;IACzE,QAAQ,EAAE,YAAY,CAAC,gBAAgB,CAAC,EAAE,GAAG,YAAY,CAAC,gBAAgB,CAAC,CAAC;IAC5E,UAAU,EAAE,UAAU,CAAC,GAAG,CAAC,CAAC;IAC5B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,QAAQ,EACR,UAAU,EACV,SAAS,EACT,OAAO,EACP,GAAG,KAAK,EACT,EAAE,qBAAqB,2CAgCvB;AAED,eAAO,MAAM,uBAAuB,oEAEnC,CAAC"}

package/dist/components/table_filter_panel/table_filter_panel.js

@@ -1,44 +1,53 @@
 import { jsx as e, jsxs as r } from "react/jsx-runtime";
-import { createContext as o, useState as c } from "react";
-import { TableFilterPanelPresenter as s } from "./table_filter_panel_presenter.js";
-import { Panel as b } from "@tcn/ui/surfaces";
-import { Header as p, VBody as f, Section as m } from "@tcn/ui/layouts";
-import { Spacer as d } from "@tcn/ui/stacks";
-import { Button as y } from "@tcn/ui/actions";
-import { CrossIcon as u } from "@tcn/icons/cross_icon.js";
-import '../../table_filter_panel.css';const P = "_table-filter-panel_124e30e", h = "_table-filter-panel-body_c016eb0", F = "_table-filter-panel-section_cfd2eb9", t = { "table-filter-panel": P, "table-filter-panel-body": h, "table-filter-panel-section": F };
-function v({
+import { createContext as s, useState as b } from "react";
+import { TableFilterPanelPresenter as p } from "./table_filter_panel_presenter.js";
+import { Panel as f } from "@tcn/ui/surfaces";
+import { Header as m, VBody as d, Section as y } from "@tcn/ui/layouts";
+import { Spacer as u } from "@tcn/ui/stacks";
+import { Button as P } from "@tcn/ui/actions";
+import { CrossIcon as h } from "@tcn/icons/cross_icon.js";
+import '../../table_filter_panel.css';const F = "_table-filter-panel_124e30e", _ = "_table-filter-panel-body_c016eb0", x = "_table-filter-panel-section_cfd2eb9", t = { "table-filter-panel": F, "table-filter-panel-body": _, "table-filter-panel-section": x };
+function w({
   children: a,
   dataSource: n,
-  onClose: l
+  className: i,
+  onClose: l,
+  ...o
 }) {
-  const [i] = c(() => new s(n));
-  return /* @__PURE__ */ e(_.Provider, { value: i, children: /* @__PURE__ */ r(b, { className: `${t["table-filter-panel"]} tcn-table-filter-panel`, children: [
-    /* @__PURE__ */ r(p, { children: [
-      "Table Filters",
-      /* @__PURE__ */ e(d, {}),
-      l && /* @__PURE__ */ e(y, { utility: !0, hierarchy: "tertiary", onClick: l, children: /* @__PURE__ */ e(u, {}) })
-    ] }),
-    /* @__PURE__ */ e(
-      f,
-      {
-        className: `${t["table-filter-panel-body"]} tcn-table-filter-panel-body`,
-        children: /* @__PURE__ */ e(
-          m,
+  const [c] = b(() => new p(n));
+  return /* @__PURE__ */ e(S.Provider, { value: c, children: /* @__PURE__ */ r(
+    f,
+    {
+      className: `${t["table-filter-panel"]} tcn-table-filter-panel ${i}`,
+      ...o,
+      children: [
+        /* @__PURE__ */ r(m, { children: [
+          "Table Filters",
+          /* @__PURE__ */ e(u, {}),
+          l && /* @__PURE__ */ e(P, { utility: !0, hierarchy: "tertiary", onClick: l, children: /* @__PURE__ */ e(h, {}) })
+        ] }),
+        /* @__PURE__ */ e(
+          d,
           {
-            className: `${t["table-filter-panel-section"]} tcn-table-filter-panel-section`,
-            children: a
+            className: `${t["table-filter-panel-body"]} tcn-table-filter-panel-body`,
+            children: /* @__PURE__ */ e(
+              y,
+              {
+                className: `${t["table-filter-panel-section"]} tcn-table-filter-panel-section`,
+                children: a
+              }
+            )
           }
         )
-      }
-    )
-  ] }) });
+      ]
+    }
+  ) });
 }
-const _ = o(
+const S = s(
   null
 );
 export {
-  v as TableFilterPanel,
-  _ as TableFilterPanelContext
+  w as TableFilterPanel,
+  S as TableFilterPanelContext
 };
 //# sourceMappingURL=table_filter_panel.js.map

package/dist/components/table_filter_panel/table_filter_panel.js.map

@@ -1 +1 @@
-{"version":3,"file":"table_filter_panel.js","sources":["../../../src/components/table_filter_panel/table_filter_panel.tsx"],"sourcesContent":["import { DataSource } from '@tcn/resource-store';\nimport { ReactElement, useState, createContext } from 'react';\nimport { FieldFilterProps } from './field_filters/field_filter_props.js';\nimport { TableFilterPanelPresenter } from './table_filter_panel_presenter.js';\nimport { Panel } from '@tcn/ui/surfaces';\nimport { Header, Section, VBody } from '@tcn/ui/layouts';\nimport styles from './table_filter_panel.module.css';\nimport { Spacer } from '@tcn/ui/stacks';\nimport { Button } from '@tcn/ui/actions';\nimport { CrossIcon } from '@tcn/icons/cross_icon.js';\n\nexport type TableFilterPanelProps = {\n  children: ReactElement<FieldFilterProps>[] | ReactElement<FieldFilterProps>;\n  dataSource: DataSource<any>;\n  onClose?: () => void;\n};\n\nexport function TableFilterPanel({\n  children,\n  dataSource,\n  onClose,\n}: TableFilterPanelProps) {\n  const [presenter] = useState(() => {\n    return new TableFilterPanelPresenter(dataSource);\n  });\n\n  return (\n    <TableFilterPanelContext.Provider value={presenter}>\n      <Panel className={`${styles['table-filter-panel']} tcn-table-filter-panel`}>\n        <Header>\n          Table Filters\n          <Spacer />\n          {onClose && (\n            <Button utility hierarchy=\"tertiary\" onClick={onClose}>\n              <CrossIcon />\n            </Button>\n          )}\n        </Header>\n        <VBody\n          className={`${styles['table-filter-panel-body']} tcn-table-filter-panel-body`}\n        >\n          <Section\n            className={`${styles['table-filter-panel-section']} tcn-table-filter-panel-section`}\n          >\n            {children}\n          </Section>\n        </VBody>\n      </Panel>\n    </TableFilterPanelContext.Provider>\n  );\n}\n\nexport const TableFilterPanelContext = createContext<TableFilterPanelPresenter | null>(\n  null\n);\n"],"names":["TableFilterPanel","children","dataSource","onClose","presenter","useState","TableFilterPanelPresenter","jsx","TableFilterPanelContext","jsxs","Panel","styles","Header","Spacer","Button","CrossIcon","VBody","Section","createContext"],"mappings":";;;;;;;;;AAiBO,SAASA,EAAiB;AAAA,EAC/B,UAAAC;AAAA,EACA,YAAAC;AAAA,EACA,SAAAC;AACF,GAA0B;AACxB,QAAM,CAACC,CAAS,IAAIC,EAAS,MACpB,IAAIC,EAA0BJ,CAAU,CAChD;AAED,SACE,gBAAAK,EAACC,EAAwB,UAAxB,EAAiC,OAAOJ,GACvC,UAAA,gBAAAK,EAACC,GAAA,EAAM,WAAW,GAAGC,EAAO,oBAAoB,CAAC,2BAC/C,UAAA;AAAA,IAAA,gBAAAF,EAACG,GAAA,EAAO,UAAA;AAAA,MAAA;AAAA,wBAELC,GAAA,EAAO;AAAA,MACPV,KACC,gBAAAI,EAACO,GAAA,EAAO,SAAO,IAAC,WAAU,YAAW,SAASX,GAC5C,UAAA,gBAAAI,EAACQ,GAAA,CAAA,CAAU,EAAA,CACb;AAAA,IAAA,GAEJ;AAAA,IACA,gBAAAR;AAAA,MAACS;AAAA,MAAA;AAAA,QACC,WAAW,GAAGL,EAAO,yBAAyB,CAAC;AAAA,QAE/C,UAAA,gBAAAJ;AAAA,UAACU;AAAA,UAAA;AAAA,YACC,WAAW,GAAGN,EAAO,4BAA4B,CAAC;AAAA,YAEjD,UAAAV;AAAA,UAAA;AAAA,QAAA;AAAA,MACH;AAAA,IAAA;AAAA,EACF,EAAA,CACF,EAAA,CACF;AAEJ;AAEO,MAAMO,IAA0BU;AAAA,EACrC;AACF;"}
+{"version":3,"file":"table_filter_panel.js","sources":["../../../src/components/table_filter_panel/table_filter_panel.tsx"],"sourcesContent":["import { DataSource } from '@tcn/resource-store';\nimport { ReactElement, useState, createContext } from 'react';\nimport { FieldFilterProps } from './field_filters/field_filter_props.js';\nimport { TableFilterPanelPresenter } from './table_filter_panel_presenter.js';\nimport { Panel, type PanelProps } from '@tcn/ui/surfaces';\nimport { Header, Section, VBody } from '@tcn/ui/layouts';\nimport styles from './table_filter_panel.module.css';\nimport { Spacer } from '@tcn/ui/stacks';\nimport { Button } from '@tcn/ui/actions';\nimport { CrossIcon } from '@tcn/icons/cross_icon.js';\n\nexport interface TableFilterPanelProps extends Omit<PanelProps, 'children'> {\n  children: ReactElement<FieldFilterProps>[] | ReactElement<FieldFilterProps>;\n  dataSource: DataSource<any>;\n  onClose?: () => void;\n}\n\nexport function TableFilterPanel({\n  children,\n  dataSource,\n  className,\n  onClose,\n  ...props\n}: TableFilterPanelProps) {\n  const [presenter] = useState(() => {\n    return new TableFilterPanelPresenter(dataSource);\n  });\n\n  return (\n    <TableFilterPanelContext.Provider value={presenter}>\n      <Panel\n        className={`${styles['table-filter-panel']} tcn-table-filter-panel ${className}`}\n        {...props}\n      >\n        <Header>\n          Table Filters\n          <Spacer />\n          {onClose && (\n            <Button utility hierarchy=\"tertiary\" onClick={onClose}>\n              <CrossIcon />\n            </Button>\n          )}\n        </Header>\n        <VBody\n          className={`${styles['table-filter-panel-body']} tcn-table-filter-panel-body`}\n        >\n          <Section\n            className={`${styles['table-filter-panel-section']} tcn-table-filter-panel-section`}\n          >\n            {children}\n          </Section>\n        </VBody>\n      </Panel>\n    </TableFilterPanelContext.Provider>\n  );\n}\n\nexport const TableFilterPanelContext = createContext<TableFilterPanelPresenter | null>(\n  null\n);\n"],"names":["TableFilterPanel","children","dataSource","className","onClose","props","presenter","useState","TableFilterPanelPresenter","jsx","TableFilterPanelContext","jsxs","Panel","styles","Header","Spacer","Button","CrossIcon","VBody","Section","createContext"],"mappings":";;;;;;;;;AAiBO,SAASA,EAAiB;AAAA,EAC/B,UAAAC;AAAA,EACA,YAAAC;AAAA,EACA,WAAAC;AAAA,EACA,SAAAC;AAAA,EACA,GAAGC;AACL,GAA0B;AACxB,QAAM,CAACC,CAAS,IAAIC,EAAS,MACpB,IAAIC,EAA0BN,CAAU,CAChD;AAED,SACE,gBAAAO,EAACC,EAAwB,UAAxB,EAAiC,OAAOJ,GACvC,UAAA,gBAAAK;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,WAAW,GAAGC,EAAO,oBAAoB,CAAC,2BAA2BV,CAAS;AAAA,MAC7E,GAAGE;AAAA,MAEJ,UAAA;AAAA,QAAA,gBAAAM,EAACG,GAAA,EAAO,UAAA;AAAA,UAAA;AAAA,4BAELC,GAAA,EAAO;AAAA,UACPX,KACC,gBAAAK,EAACO,GAAA,EAAO,SAAO,IAAC,WAAU,YAAW,SAASZ,GAC5C,UAAA,gBAAAK,EAACQ,GAAA,CAAA,CAAU,EAAA,CACb;AAAA,QAAA,GAEJ;AAAA,QACA,gBAAAR;AAAA,UAACS;AAAA,UAAA;AAAA,YACC,WAAW,GAAGL,EAAO,yBAAyB,CAAC;AAAA,YAE/C,UAAA,gBAAAJ;AAAA,cAACU;AAAA,cAAA;AAAA,gBACC,WAAW,GAAGN,EAAO,4BAA4B,CAAC;AAAA,gBAEjD,UAAAZ;AAAA,cAAA;AAAA,YAAA;AAAA,UACH;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAAA,GAEJ;AAEJ;AAEO,MAAMS,IAA0BU;AAAA,EACrC;AACF;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tcn/ui-table",
-  "version": "2.3.12",
+  "version": "2.3.14",
   "type": "module",
   "description": "React table component library",
   "author": "TCN",
@@ -41,9 +41,9 @@
     "clarity-pattern-parser": "^11.5.4",
     "@tcn/aip-160": "1.2.5",
     "@tcn/icons": "2.3.0",
-    "@tcn/resource-store": "2.5.1",
-    "@tcn/state": "1.2.0",
-    "@tcn/ui": "0.12.3"
+    "@tcn/resource-store": "2.5.3",
+    "@tcn/ui": "0.12.5",
+    "@tcn/state": "1.3.0"
   },
   "peerDependencies": {
     "react": "^18.2.0",

package/src/components/cells/header_cell.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback } from 'react';
 
-import { Box, HStack } from '@tcn/ui/stacks';
+import { Box, HStack, type OnWidthResizePayload } from '@tcn/ui/stacks';
 
 import { TH } from '@tcn/ui/layouts';
 import cellStyles from './cell.module.css';
@@ -26,8 +26,8 @@ export function HeaderCell({
   const zIndex = sticky != null ? 2 : 1;
 
   const handleResize = useCallback(
-    (newSize: number) => {
-      onResize?.(Math.max(newSize, 20));
+    ({ width }: OnWidthResizePayload) => {
+      onResize?.(Math.max(width, 20));
     },
     [onResize]
   );

package/src/components/table_filter_panel/table_filter_panel.tsx

@@ -2,23 +2,25 @@ import { DataSource } from '@tcn/resource-store';
 import { ReactElement, useState, createContext } from 'react';
 import { FieldFilterProps } from './field_filters/field_filter_props.js';
 import { TableFilterPanelPresenter } from './table_filter_panel_presenter.js';
-import { Panel } from '@tcn/ui/surfaces';
+import { Panel, type PanelProps } from '@tcn/ui/surfaces';
 import { Header, Section, VBody } from '@tcn/ui/layouts';
 import styles from './table_filter_panel.module.css';
 import { Spacer } from '@tcn/ui/stacks';
 import { Button } from '@tcn/ui/actions';
 import { CrossIcon } from '@tcn/icons/cross_icon.js';
 
-export type TableFilterPanelProps = {
+export interface TableFilterPanelProps extends Omit<PanelProps, 'children'> {
   children: ReactElement<FieldFilterProps>[] | ReactElement<FieldFilterProps>;
   dataSource: DataSource<any>;
   onClose?: () => void;
-};
+}
 
 export function TableFilterPanel({
   children,
   dataSource,
+  className,
   onClose,
+  ...props
 }: TableFilterPanelProps) {
   const [presenter] = useState(() => {
     return new TableFilterPanelPresenter(dataSource);
@@ -26,7 +28,10 @@ export function TableFilterPanel({
 
   return (
     <TableFilterPanelContext.Provider value={presenter}>
-      <Panel className={`${styles['table-filter-panel']} tcn-table-filter-panel`}>
+      <Panel
+        className={`${styles['table-filter-panel']} tcn-table-filter-panel ${className}`}
+        {...props}
+      >
         <Header>
           Table Filters
           <Spacer />