@tcn/ui-table 2.3.15 → 2.3.16

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

@@ -7,7 +7,8 @@ export interface TableFilterPanelProps extends Omit<PanelProps, 'children'> {
     children: ReactElement<FieldFilterProps>[] | ReactElement<FieldFilterProps>;
     dataSource: DataSource<any>;
     onClose?: () => void;
+    title?: string;
 }
-export declare function TableFilterPanel({ children, dataSource, className, onClose, ...props }: TableFilterPanelProps): import("react/jsx-runtime").JSX.Element;
+export declare function TableFilterPanel({ children, dataSource, className, onClose, title, ...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;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"}
+{"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;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,QAAQ,EACR,UAAU,EACV,SAAS,EACT,OAAO,EACP,KAAuB,EACvB,GAAG,KAAK,EACT,EAAE,qBAAqB,2CA6BvB;AAED,eAAO,MAAM,uBAAuB,oEAEnC,CAAC"}

package/dist/components/table_filter_panel/table_filter_panel.js

@@ -1,53 +1,47 @@
-import { jsx as e, jsxs as r } from "react/jsx-runtime";
-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 { jsx as e, jsxs as l } from "react/jsx-runtime";
+import { createContext as b, useState as p } from "react";
+import { TableFilterPanelPresenter as f } from "./table_filter_panel_presenter.js";
+import { Aside as m } from "@tcn/ui/surfaces";
+import { Header as d, VBody as y, Section as u } from "@tcn/ui/layouts";
+import { Spacer as h } 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 };
+import { CrossIcon as F } from "@tcn/icons/cross_icon.js";
+import '../../table_filter_panel.css';const x = "_table-filter-panel-body_c016eb0", S = "_table-filter-panel-section_cfd2eb9", r = { "table-filter-panel-body": x, "table-filter-panel-section": S };
 function w({
-  children: a,
-  dataSource: n,
+  children: n,
+  dataSource: a,
   className: i,
-  onClose: l,
-  ...o
+  onClose: t,
+  title: o = "Table Filters",
+  ...c
 }) {
-  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,
+  const [s] = p(() => new f(a));
+  return /* @__PURE__ */ e(T.Provider, { value: s, children: /* @__PURE__ */ l(m, { className: `tcn-table-filter-panel ${i}`, ...c, children: [
+    /* @__PURE__ */ l(d, { children: [
+      o,
+      /* @__PURE__ */ e(h, {}),
+      t && /* @__PURE__ */ e(P, { utility: !0, hierarchy: "tertiary", onClick: t, children: /* @__PURE__ */ e(F, {}) })
+    ] }),
+    /* @__PURE__ */ e(
+      y,
+      {
+        className: `${r["table-filter-panel-body"]} tcn-table-filter-panel-body`,
+        children: /* @__PURE__ */ e(
+          u,
           {
-            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
-              }
-            )
+            className: `${r["table-filter-panel-section"]} tcn-table-filter-panel-section`,
+            children: n
           }
         )
-      ]
-    }
-  ) });
+      }
+    )
+  ] }) });
 }
-const S = s(
+const T = b(
   null
 );
 export {
   w as TableFilterPanel,
-  S as TableFilterPanelContext
+  T 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, 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;"}
+{"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 { Aside, 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  title?: string;\n}\n\nexport function TableFilterPanel({\n  children,\n  dataSource,\n  className,\n  onClose,\n  title = 'Table Filters',\n  ...props\n}: TableFilterPanelProps) {\n  const [presenter] = useState(() => {\n    return new TableFilterPanelPresenter(dataSource);\n  });\n\n  return (\n    <TableFilterPanelContext.Provider value={presenter}>\n      <Aside className={`tcn-table-filter-panel ${className}`} {...props}>\n        <Header>\n          {title}\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      </Aside>\n    </TableFilterPanelContext.Provider>\n  );\n}\n\nexport const TableFilterPanelContext = createContext<TableFilterPanelPresenter | null>(\n  null\n);\n"],"names":["TableFilterPanel","children","dataSource","className","onClose","title","props","presenter","useState","TableFilterPanelPresenter","jsx","TableFilterPanelContext","jsxs","Aside","Header","Spacer","Button","CrossIcon","VBody","styles","Section","createContext"],"mappings":";;;;;;;;;AAkBO,SAASA,EAAiB;AAAA,EAC/B,UAAAC;AAAA,EACA,YAAAC;AAAA,EACA,WAAAC;AAAA,EACA,SAAAC;AAAA,EACA,OAAAC,IAAQ;AAAA,EACR,GAAGC;AACL,GAA0B;AACxB,QAAM,CAACC,CAAS,IAAIC,EAAS,MACpB,IAAIC,EAA0BP,CAAU,CAChD;AAED,SACE,gBAAAQ,EAACC,EAAwB,UAAxB,EAAiC,OAAOJ,GACvC,UAAA,gBAAAK,EAACC,GAAA,EAAM,WAAW,0BAA0BV,CAAS,IAAK,GAAGG,GAC3D,UAAA;AAAA,IAAA,gBAAAM,EAACE,GAAA,EACE,UAAA;AAAA,MAAAT;AAAA,wBACAU,GAAA,EAAO;AAAA,MACPX,KACC,gBAAAM,EAACM,GAAA,EAAO,SAAO,IAAC,WAAU,YAAW,SAASZ,GAC5C,UAAA,gBAAAM,EAACO,GAAA,CAAA,CAAU,EAAA,CACb;AAAA,IAAA,GAEJ;AAAA,IACA,gBAAAP;AAAA,MAACQ;AAAA,MAAA;AAAA,QACC,WAAW,GAAGC,EAAO,yBAAyB,CAAC;AAAA,QAE/C,UAAA,gBAAAT;AAAA,UAACU;AAAA,UAAA;AAAA,YACC,WAAW,GAAGD,EAAO,4BAA4B,CAAC;AAAA,YAEjD,UAAAlB;AAAA,UAAA;AAAA,QAAA;AAAA,MACH;AAAA,IAAA;AAAA,EACF,EAAA,CACF,EAAA,CACF;AAEJ;AAEO,MAAMU,IAA0BU;AAAA,EACrC;AACF;"}

package/dist/table_filter_panel.css

@@ -1 +1 @@
-._table-filter-panel_124e30e{--material: #fafafa;background:var(--material)}._table-filter-panel-body_c016eb0{padding-block:8px}._table-filter-panel-body_c016eb0 ._table-filter-panel-section_cfd2eb9{gap:8px}
+._table-filter-panel-body_c016eb0{padding-block:8px}._table-filter-panel-body_c016eb0 ._table-filter-panel-section_cfd2eb9{gap:8px}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tcn/ui-table",
-  "version": "2.3.15",
+  "version": "2.3.16",
   "type": "module",
   "description": "React table component library",
   "author": "TCN",
@@ -39,11 +39,11 @@
   ],
   "dependencies": {
     "clarity-pattern-parser": "^11.5.4",
-    "@tcn/icons": "2.3.0",
     "@tcn/aip-160": "1.2.5",
-    "@tcn/resource-store": "2.5.4",
-    "@tcn/state": "1.3.1",
-    "@tcn/ui": "0.12.6"
+    "@tcn/resource-store": "2.5.5",
+    "@tcn/icons": "2.3.0",
+    "@tcn/ui": "0.12.7",
+    "@tcn/state": "1.3.2"
   },
   "peerDependencies": {
     "react": "^18.2.0",

package/src/__stories__/table.stories.tsx

@@ -414,18 +414,10 @@ export function WithFilterPanel() {
         <VBody>
           <Rail>
             <Side padding="0px">
-              <Box
-                minWidth="300px"
-                enableResizeOnEnd
-                overflowY="auto"
-                height="100%"
-                style={{
-                  scrollbarGutter: 'stable', // Not sure if there is a better way to prevent the scrollbar appearing causing a horizontal scroll - to to resizing, we fix the width of the content, so adding a vertical scrollbar causing a horizontal overflow.
-                }}
-              >
+              <Box minWidth="300px" enableResizeOnEnd height="100%" maxHeight="100%">
                 <TableFilterPanel
                   dataSource={source}
-                  onClose={() => window.alert('Closed')}
+                  onClose={() => window.alert('onClose callback called.')}
                 >
                   <StringFieldFilter fieldName="name" label="Name (string)" />
                   <NumberFieldFilter fieldName="age" label="Age (number)" />

package/src/components/table_filter_panel/table_filter_panel.module.css

@@ -1,8 +1,3 @@
-.table-filter-panel {
-  --material: #fafafa;
-  background: var(--material);
-}
-
 .table-filter-panel-body {
   padding-block: 8px;
   .table-filter-panel-section {

package/src/components/table_filter_panel/table_filter_panel.stories.tsx

@@ -3,7 +3,7 @@ import {
   StaticNumberField,
   StaticStringField,
 } from '@tcn/resource-store';
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { items } from '../../__stories__/sample_data.js';
 import { NumberFieldFilter } from './field_filters/number_field_filter.js';
 import { TableFilterPanel } from './table_filter_panel.js';

package/src/components/table_filter_panel/table_filter_panel.tsx

@@ -2,7 +2,7 @@ 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, type PanelProps } from '@tcn/ui/surfaces';
+import { Aside, 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';
@@ -13,6 +13,7 @@ export interface TableFilterPanelProps extends Omit<PanelProps, 'children'> {
   children: ReactElement<FieldFilterProps>[] | ReactElement<FieldFilterProps>;
   dataSource: DataSource<any>;
   onClose?: () => void;
+  title?: string;
 }
 
 export function TableFilterPanel({
@@ -20,6 +21,7 @@ export function TableFilterPanel({
   dataSource,
   className,
   onClose,
+  title = 'Table Filters',
   ...props
 }: TableFilterPanelProps) {
   const [presenter] = useState(() => {
@@ -28,12 +30,9 @@ export function TableFilterPanel({
 
   return (
     <TableFilterPanelContext.Provider value={presenter}>
-      <Panel
-        className={`${styles['table-filter-panel']} tcn-table-filter-panel ${className}`}
-        {...props}
-      >
+      <Aside className={`tcn-table-filter-panel ${className}`} {...props}>
         <Header>
-          Table Filters
+          {title}
           <Spacer />
           {onClose && (
             <Button utility hierarchy="tertiary" onClick={onClose}>
@@ -50,7 +49,7 @@ export function TableFilterPanel({
             {children}
           </Section>
         </VBody>
-      </Panel>
+      </Aside>
     </TableFilterPanelContext.Provider>
   );
 }

package/tsconfig.json

@@ -1,36 +1,7 @@
 {
+  "extends": "../../tsconfig.base.json",
   "compilerOptions": {
-    "esModuleInterop": true,
-    "jsx": "react-jsx",
-    "paths": {
-      "~aip-160/*": [
-        "../aip-160/src/*"
-      ],
-      "~aip-160-editor/*": [
-        "../aip-160-editor/src/*"
-      ],
-      "~icons/*": [
-        "../icons/src/*"
-      ],
-      "~resource-store/*": [
-        "../resource-store/src/*"
-      ],
-      "~sb-blackcat-addon/*": [
-        "../sb-blackcat-addon/src/*"
-      ],
-      "~state/*": [
-        "../state/src/*"
-      ],
-      "~ui/*": [
-        "../ui/src/*"
-      ],
-      "~ui-table/*": [
-        "./src/*"
-      ]
-    }
+    "rootDir": "."
   },
-  "include": [
-    "src/**/*",
-    "types/**/*"
-  ]
-}
+  "include": ["src/**/*", ".storybook/**/*", "types/**/*", "package.json"]
+}