@tcn/ui-table 2.3.6 → 2.3.7

package/dist/components/cells/header_cell.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"header_cell.d.ts","sourceRoot":"","sources":["../../../src/components/cells/header_cell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsB,MAAM,OAAO,CAAC;AAK3C,OAAO,EAAe,KAAK,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAGvE,MAAM,WAAW,eAAgB,SAAQ,gBAAgB;IACvD,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;IACzB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,wBAAgB,UAAU,CAAC,EACzB,OAAO,EACP,MAAM,EACN,QAAQ,EACR,KAAK,EACL,QAAQ,EACR,gBAAgB,EAChB,OAAO,GACR,EAAE,eAAe,2CA2CjB"}
+{"version":3,"file":"header_cell.d.ts","sourceRoot":"","sources":["../../../src/components/cells/header_cell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsB,MAAM,OAAO,CAAC;AAM3C,OAAO,EAAe,KAAK,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAEvE,MAAM,WAAW,eAAgB,SAAQ,gBAAgB;IACvD,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;IACzB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,wBAAgB,UAAU,CAAC,EACzB,OAAO,EACP,MAAM,EACN,QAAQ,EACR,KAAK,EACL,QAAQ,EACR,gBAAgB,EAChB,OAAO,GACR,EAAE,eAAe,2CA2CjB"}

package/dist/components/cells/header_cell.js

@@ -1,9 +1,9 @@
 import { jsx as e, jsxs as c } from "react/jsx-runtime";
 import { useCallback as x } from "react";
 import { Box as r, HStack as h } from "@tcn/ui/stacks";
-import { c as f } from "../../cell.module-WpHnQBVu.js";
-import { SortControl as u } from "./sort_control.js";
-import { TH as y } from "@tcn/ui/layouts";
+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({
   heading: n,
   sticky: l,
@@ -20,9 +20,9 @@ function H({
     [i]
   );
   return /* @__PURE__ */ e(
-    y,
+    f,
     {
-      className: f["table-cell"],
+      className: u["table-cell"],
       "data-stick-to": l,
       style: { width: `${o}px`, zIndex: m },
       children: /* @__PURE__ */ e(
@@ -46,7 +46,7 @@ function H({
               }
             ),
             /* @__PURE__ */ e(
-              u,
+              y,
               {
                 canSort: d,
                 onSortModeChange: a,

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 cellStyles from './cell.module.css';\nimport { SortControl, type SortControlProps } from './sort_control.js';\nimport { TH } from '@tcn/ui/layouts';\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 } 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;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tcn/ui-table",
-  "version": "2.3.6",
+  "version": "2.3.7",
   "type": "module",
   "description": "React table component library",
   "author": "TCN",
@@ -40,10 +40,10 @@
   "dependencies": {
     "clarity-pattern-parser": "^11.5.4",
     "@tcn/aip-160": "1.2.5",
-    "@tcn/resource-store": "2.5.1",
     "@tcn/icons": "2.2.1",
-    "@tcn/ui": "0.9.0",
-    "@tcn/state": "1.2.0"
+    "@tcn/state": "1.2.0",
+    "@tcn/ui": "0.10.0",
+    "@tcn/resource-store": "2.5.1"
   },
   "peerDependencies": {
     "react": "^18.2.0",

package/src/__stories__/aip_table.stories.tsx

@@ -15,7 +15,7 @@ import { Title } from '@tcn/ui/typography';
 
 import styles from './table.module.css';
 
-import { VPanel } from '@tcn/ui/surfaces';
+import { Panel } from '@tcn/ui/surfaces';
 import { AuthContext, useToken } from './auth_provider.js';
 
 const meta: Meta = {
@@ -94,7 +94,7 @@ function BasicContent() {
   return (
     <VStack>
       <HStack height="auto">{tokenValue === '' ? 'Sign in to load data' : ''}</HStack>
-      <VPanel>
+      <Panel>
         <HStack className={styles.header} padding="8px" vAlign="center">
           <Title>Organizations</Title>
           <Spacer />
@@ -172,7 +172,7 @@ function BasicContent() {
         <HStack padding="8px">
           <TablePager dataSource={source} />
         </HStack>
-      </VPanel>
+      </Panel>
     </VStack>
   );
 }

package/src/__stories__/demo.stories.tsx

@@ -8,9 +8,9 @@ import {
 import { useSignalValue } from '@tcn/state';
 import { Button } from '@tcn/ui/actions';
 import { Box, HStack, Spacer } from '@tcn/ui/stacks';
-import { VPanel } from '@tcn/ui/surfaces';
+import { Panel } from '@tcn/ui/surfaces';
 import { Title } from '@tcn/ui/typography';
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { GlobalSearch } from '../components/global_search.js';
 import { Table } from '../components/table/table.js';
 import { TableColumn } from '../components/table/table_column.js';
@@ -59,7 +59,7 @@ export function Demo() {
   const isFiltered = filterString !== '';
 
   return (
-    <VPanel height="100%">
+    <Panel height="100%">
       <HStack padding="8px" vAlign="center">
         <Title>Cosmerinas</Title>
         <Spacer />
@@ -132,6 +132,6 @@ export function Demo() {
         </Box>
         <TablePager dataSource={source} />
       </HStack>
-    </VPanel>
+    </Panel>
   );
 }

package/src/__stories__/table.stories.tsx

@@ -1,6 +1,7 @@
 import { Meta } from '@storybook/react-vite';
 import React, { useCallback, useState } from 'react';
 
+import { CrossIcon } from '@tcn/icons/cross_icon.js';
 import {
   StaticDataSource,
   StaticDateField,
@@ -9,8 +10,9 @@ import {
 } from '@tcn/resource-store';
 import { useSignalValue } from '@tcn/state';
 import { Button } from '@tcn/ui/actions';
+import { Footer, Header, HBody, Rail, Side, VBody } from '@tcn/ui/layouts';
 import { Box, HStack, Spacer, VStack, ZStack } from '@tcn/ui/stacks';
-import { VPanel } from '@tcn/ui/surfaces';
+import { Panel } from '@tcn/ui/surfaces';
 import { Title } from '@tcn/ui/typography';
 import { GlobalSearch } from '../components/global_search.js';
 import { Table } from '../components/table/table.js';
@@ -22,9 +24,7 @@ import { StringFieldFilter } from '../components/table_filter_panel/field_filter
 import { TableFilterPanel } from '../components/table_filter_panel/table_filter_panel.js';
 import { TablePager } from '../components/table_pager.js';
 import { DataItem, items, stickyItems } from './sample_data.js';
-import { CrossIcon } from '@tcn/icons/cross_icon.js';
 import styles from './table.module.css';
-import { Footer, Header, Main, Rail, Side, VBody } from '@tcn/ui/layouts';
 
 const meta: Meta = {
   title: 'Table',
@@ -302,7 +302,7 @@ export function WithTableHeaderAndTableFooter() {
 
   return (
     <StoryWrapper>
-      <VPanel>
+      <Panel>
         <Header className={styles.header} padding="8px" vAlign="center">
           <Title>The Table</Title>
           <Spacer />
@@ -327,7 +327,7 @@ export function WithTableHeaderAndTableFooter() {
         <Footer>
           <TablePager dataSource={source} />
         </Footer>
-      </VPanel>
+      </Panel>
     </StoryWrapper>
   );
 }
@@ -409,7 +409,7 @@ export function WithFilterPanel() {
 
   return (
     <StoryWrapper>
-      <VPanel height="100%">
+      <Panel height="100%">
         <Header>The Table</Header>
         <VBody>
           <Rail>
@@ -431,7 +431,7 @@ export function WithFilterPanel() {
                 </TableFilterPanel>
               </Box>
             </Side>
-            <Main>
+            <HBody>
               <Table dataSource={source} height="100%" width="flex">
                 <TableColumn heading="Name" fieldName="name" sticky="start" />
                 <TableColumn heading="Age" fieldName="age" width={150} canSort />
@@ -446,13 +446,13 @@ export function WithFilterPanel() {
                 <TableColumn heading="Occupation" fieldName="occupation" width={200} />
                 <TableColumn heading="Active" fieldName="isActive" />
               </Table>
-            </Main>
+            </HBody>
           </Rail>
         </VBody>
         <Footer>
           <TablePager dataSource={source} />
         </Footer>
-      </VPanel>
+      </Panel>
     </StoryWrapper>
   );
 }

package/src/components/cells/header_cell.tsx

@@ -2,9 +2,9 @@ import React, { useCallback } from 'react';
 
 import { Box, HStack } from '@tcn/ui/stacks';
 
+import { TH } from '@tcn/ui/layouts';
 import cellStyles from './cell.module.css';
 import { SortControl, type SortControlProps } from './sort_control.js';
-import { TH } from '@tcn/ui/layouts';
 
 export interface HeaderCellProps extends SortControlProps {
   heading: React.ReactNode;