@tcn/ui-table 2.3.3 → 2.3.5

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

@@ -1 +1 @@
-{"version":3,"file":"table.js","sources":["../../../src/components/table/table.tsx"],"sourcesContent":["import React, { isValidElement, ReactElement, useState, useRef } from 'react';\n\nimport { DataSource } from '@tcn/resource-store';\nimport { Status, useRunnerStatus, useSignalValue } from '@tcn/state';\nimport { Box, BoxProps } from '@tcn/ui/stacks';\nimport { BodyText } from '@tcn/ui/typography';\nimport { DataCell } from '../cells/data_cell.js';\nimport { FooterCell } from '../cells/footer_cell.js';\nimport { HeaderCell } from '../cells/header_cell.js';\nimport { StickyRowDataCell } from '../cells/sticky_row_data_cell.js';\nimport { StickyRowFillCell } from '../cells/sticky_row_fill_cell.js';\nimport styles from './table.module.css';\nimport { TableColumn, TableColumnProps } from './table_column.js';\nimport { TablePresenter } from './table_presenter.js';\n\nexport type TableProps<T> = BoxProps & {\n  dataSource: DataSource<T>;\n  children: ReactElement<TableColumnProps<T>>[];\n  onRowClick?: (row: T, rowIndex: number) => void;\n  isRowHighlighted?: (row: T, rowIndex: number) => boolean;\n  stickyItems?: T[];\n};\n\nconst HEADER_ROW_HEIGHT = 30;\n\n// @TODO: Props for loading and error states\n\nfunction wrapContent(content: React.ReactNode): React.ReactNode {\n  if (typeof content === 'string') {\n    return <BodyText>{content}</BodyText>;\n  }\n  return content;\n}\n\nexport function Table<T>({\n  dataSource,\n  stickyItems,\n  children,\n  width = '100%',\n  height = '100%',\n  zIndex,\n  isRowHighlighted,\n  onRowClick,\n  ...props\n}: TableProps<T>) {\n  const rows = useSignalValue(dataSource.broadcasts.currentResults);\n  const page = useSignalValue(dataSource.broadcasts.currentPageIndex);\n\n  const scrollerRef = useRef<HTMLDivElement>(null);\n\n  const columns = React.Children.toArray(children).filter(\n    (child): child is ReactElement<TableColumnProps<T>> =>\n      isValidElement(child) && child.type === TableColumn\n  );\n\n  const [presenter] = useState(\n    () =>\n      new TablePresenter({\n        dataSource,\n        columns: columns.map(column => ({\n          fieldName: column.props.fieldName,\n          width: column.props.width ?? 100,\n          sortMode: 'none',\n          canSort: column.props.canSort ?? false,\n          heading: column.props.heading,\n          footer: column.props.footer,\n          sticky: column.props.sticky,\n          render: column.props.render,\n        })),\n        scrollerRef,\n      })\n  );\n\n  const columnInfo = useSignalValue(presenter.broadcasts.columnInfo);\n  const itemsStatus = useRunnerStatus(dataSource.broadcasts.currentResults);\n  const showFooter = useSignalValue(presenter.broadcasts.showFooter);\n\n  const isClickable = typeof onRowClick === 'function';\n  return (\n    <Box\n      ref={scrollerRef}\n      zIndex={zIndex}\n      className={styles['table-body-wrapper']}\n      style={{ overflow: 'auto' }}\n      {...props}\n    >\n      <table\n        className={styles['table-body']}\n        data-is-clickable={isClickable}\n        style={{ width, height }}\n      >\n        <thead>\n          <tr>\n            {columnInfo.map((column, index) => (\n              <HeaderCell\n                key={`h-${index}`}\n                index={index}\n                heading={wrapContent(column.heading)}\n                sticky={column.sticky}\n                onResize={newSize => presenter.setColumnWidth(index, newSize)}\n                width={column.width}\n                sortMode={column.sortMode}\n                onSortModeChange={() => presenter.setNextColumnSortMode(index)}\n                canSort={column.canSort}\n              />\n            ))}\n            <th key=\"fill\" className=\"fill\"></th>\n          </tr>\n        </thead>\n        <tbody>\n          {stickyItems?.map((item, index) => (\n            <tr key={`sticky-${index}`} data-sticky-row>\n              {columnInfo.map((col, colIndex) => {\n                const fieldName = col.fieldName;\n                const render = col.render;\n                const content = render\n                  ? render(item)\n                  : fieldName\n                    ? String((item as Record<string, unknown>)[fieldName] ?? '')\n                    : '';\n                return (\n                  <StickyRowDataCell\n                    key={`${page}-${index}-${colIndex}`}\n                    content={content}\n                    sticky={col.sticky}\n                    width={col.width}\n                    top={HEADER_ROW_HEIGHT * (index + 1)}\n                  />\n                );\n              })}\n              <StickyRowFillCell top={HEADER_ROW_HEIGHT * (index + 1) + 1} />\n            </tr>\n          ))}\n          {itemsStatus === Status.SUCCESS &&\n            rows.map((item, rowIndex) => (\n              <tr\n                key={`${page}-${rowIndex}`}\n                data-selected={isRowHighlighted?.(item, rowIndex)}\n                onClick={() => onRowClick?.(item, rowIndex)}\n              >\n                {columnInfo.map((col, colIndex) => {\n                  const fieldName = col.fieldName;\n                  const render = col.render;\n                  const content = render\n                    ? render(item)\n                    : fieldName\n                      ? String((item as Record<string, unknown>)[fieldName] ?? '')\n                      : '';\n                  return (\n                    <DataCell\n                      key={`${page}-${rowIndex}-${colIndex}`}\n                      content={content}\n                      sticky={col.sticky}\n                      width={col.width}\n                    />\n                  );\n                })}\n                <td key=\"fill\" className=\"fill\"></td>\n              </tr>\n            ))}\n          {itemsStatus === Status.PENDING && 'Loading...'}\n          {itemsStatus === Status.ERROR && 'Error loading data'}\n          <tr key=\"fill\" className=\"fill\"></tr>\n        </tbody>\n        {showFooter && (\n          <tfoot>\n            <tr>\n              {columnInfo.map((col, colIndex) => (\n                <FooterCell\n                  key={`footer-${colIndex}`}\n                  content={wrapContent(col.footer)}\n                  sticky={col.sticky}\n                  width={col.width}\n                />\n              ))}\n              <td key=\"footer-fill\" className=\"fill\"></td>\n            </tr>\n          </tfoot>\n        )}\n      </table>\n    </Box>\n  );\n}\n"],"names":["HEADER_ROW_HEIGHT","wrapContent","content","jsx","BodyText","Table","dataSource","stickyItems","children","width","height","zIndex","isRowHighlighted","onRowClick","props","rows","useSignalValue","page","scrollerRef","useRef","columns","React","child","isValidElement","TableColumn","presenter","useState","TablePresenter","column","columnInfo","itemsStatus","useRunnerStatus","showFooter","isClickable","Box","styles","jsxs","index","HeaderCell","newSize","item","col","colIndex","fieldName","render","StickyRowDataCell","StickyRowFillCell","Status","rowIndex","DataCell","FooterCell"],"mappings":"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"}
+{"version":3,"file":"table.js","sources":["../../../src/components/table/table.tsx"],"sourcesContent":["import React, { isValidElement, ReactElement, useState, useRef } from 'react';\n\nimport { DataSource } from '@tcn/resource-store';\nimport { Status, useRunnerStatus, useSignalValue } from '@tcn/state';\nimport { Box, BoxProps } from '@tcn/ui/stacks';\nimport { BodyText } from '@tcn/ui/typography';\nimport { DataCell } from '../cells/data_cell.js';\nimport { FooterCell } from '../cells/footer_cell.js';\nimport { HeaderCell } from '../cells/header_cell.js';\nimport { StickyRowDataCell } from '../cells/sticky_row_data_cell.js';\nimport { StickyRowFillCell } from '../cells/sticky_row_fill_cell.js';\nimport styles from './table.module.css';\nimport { TableColumn, TableColumnProps } from './table_column.js';\nimport { TablePresenter } from './table_presenter.js';\nimport {\n  TTable as PrimitiveTable,\n  TBody,\n  TD,\n  TFoot,\n  TH,\n  THead,\n  TR,\n} from '@tcn/ui/layouts';\nexport type TableProps<T> = BoxProps & {\n  dataSource: DataSource<T>;\n  children: ReactElement<TableColumnProps<T>>[];\n  onRowClick?: (row: T, rowIndex: number) => void;\n  isRowHighlighted?: (row: T, rowIndex: number) => boolean;\n  stickyItems?: T[];\n};\n\n// FIXME: Ideally should be on theme - even if its a required theme variable.\nconst HEADER_ROW_HEIGHT = 32;\nconst BODY_ROW_HEIGHT = 24;\n\n// @TODO: Props for loading and error states\n\nfunction wrapContent(content: React.ReactNode): React.ReactNode {\n  if (typeof content === 'string') {\n    return <BodyText>{content}</BodyText>;\n  }\n  return content;\n}\n\nexport function Table<T>({\n  dataSource,\n  stickyItems,\n  children,\n  width = '100%',\n  height = '100%',\n  zIndex,\n  isRowHighlighted,\n  onRowClick,\n  ...props\n}: TableProps<T>) {\n  const rows = useSignalValue(dataSource.broadcasts.currentResults);\n  const page = useSignalValue(dataSource.broadcasts.currentPageIndex);\n\n  const scrollerRef = useRef<HTMLDivElement>(null);\n\n  const columns = React.Children.toArray(children).filter(\n    (child): child is ReactElement<TableColumnProps<T>> =>\n      isValidElement(child) && child.type === TableColumn\n  );\n\n  const [presenter] = useState(\n    () =>\n      new TablePresenter({\n        dataSource,\n        columns: columns.map(column => ({\n          fieldName: column.props.fieldName,\n          width: column.props.width ?? 100,\n          sortMode: 'none',\n          canSort: column.props.canSort ?? false,\n          heading: column.props.heading,\n          footer: column.props.footer,\n          sticky: column.props.sticky,\n          render: column.props.render,\n        })),\n        scrollerRef,\n      })\n  );\n\n  const columnInfo = useSignalValue(presenter.broadcasts.columnInfo);\n  const itemsStatus = useRunnerStatus(dataSource.broadcasts.currentResults);\n  const showFooter = useSignalValue(presenter.broadcasts.showFooter);\n\n  const isClickable = typeof onRowClick === 'function';\n  return (\n    <Box\n      ref={scrollerRef}\n      zIndex={zIndex}\n      className={styles['table-body-wrapper']}\n      style={{ overflow: 'auto' }}\n      {...props}\n    >\n      <PrimitiveTable\n        className={styles['table-body']}\n        data-is-clickable={isClickable}\n        style={{ width, height }}\n      >\n        <THead>\n          <TR>\n            {columnInfo.map((column, index) => (\n              <HeaderCell\n                key={`h-${index}`}\n                index={index}\n                heading={wrapContent(column.heading)}\n                sticky={column.sticky}\n                onResize={newSize => presenter.setColumnWidth(index, newSize)}\n                width={column.width}\n                sortMode={column.sortMode}\n                onSortModeChange={() => presenter.setNextColumnSortMode(index)}\n                canSort={column.canSort}\n              />\n            ))}\n            <TH key=\"fill\" fill className=\"fill\"></TH>\n          </TR>\n        </THead>\n        <TBody>\n          {stickyItems?.map((item, index) => (\n            <TR key={`sticky-${index}`} data-sticky-row>\n              {columnInfo.map((col, colIndex) => {\n                const fieldName = col.fieldName;\n                const render = col.render;\n                const content = render\n                  ? render(item)\n                  : fieldName\n                    ? String((item as Record<string, unknown>)[fieldName] ?? '')\n                    : '';\n                return (\n                  <StickyRowDataCell\n                    key={`${page}-${index}-${colIndex}`}\n                    content={content}\n                    sticky={col.sticky}\n                    width={col.width}\n                    top={HEADER_ROW_HEIGHT + BODY_ROW_HEIGHT * index}\n                  />\n                );\n              })}\n              <StickyRowFillCell top={HEADER_ROW_HEIGHT + BODY_ROW_HEIGHT * index} />\n            </TR>\n          ))}\n          {itemsStatus === Status.SUCCESS &&\n            rows.map((item, rowIndex) => (\n              <TR\n                key={`${page}-${rowIndex}`}\n                data-selected={isRowHighlighted?.(item, rowIndex)}\n                isSelected={isRowHighlighted?.(item, rowIndex)}\n                onClick={() => onRowClick?.(item, rowIndex)}\n              >\n                {columnInfo.map((col, colIndex) => {\n                  const fieldName = col.fieldName;\n                  const render = col.render;\n                  const content = render\n                    ? render(item)\n                    : fieldName\n                      ? String((item as Record<string, unknown>)[fieldName] ?? '')\n                      : '';\n                  return (\n                    <DataCell\n                      key={`${page}-${rowIndex}-${colIndex}`}\n                      content={content}\n                      sticky={col.sticky}\n                      width={col.width}\n                    />\n                  );\n                })}\n                <TD key=\"fill\" fill className=\"fill\"></TD>\n              </TR>\n            ))}\n          {itemsStatus === Status.PENDING && 'Loading...'}\n          {itemsStatus === Status.ERROR && 'Error loading data'}\n          <TR key=\"fill\" className=\"fill\"></TR>\n        </TBody>\n        {showFooter && (\n          <TFoot>\n            <TR>\n              {columnInfo.map((col, colIndex) => (\n                <FooterCell\n                  key={`footer-${colIndex}`}\n                  content={wrapContent(col.footer)}\n                  sticky={col.sticky}\n                  width={col.width}\n                />\n              ))}\n              <TD key=\"footer-fill\" fill className=\"fill\"></TD>\n            </TR>\n          </TFoot>\n        )}\n      </PrimitiveTable>\n    </Box>\n  );\n}\n"],"names":["HEADER_ROW_HEIGHT","BODY_ROW_HEIGHT","wrapContent","content","jsx","BodyText","Table","dataSource","stickyItems","children","width","height","zIndex","isRowHighlighted","onRowClick","props","rows","useSignalValue","page","scrollerRef","useRef","columns","React","child","isValidElement","TableColumn","presenter","useState","TablePresenter","column","columnInfo","itemsStatus","useRunnerStatus","showFooter","isClickable","Box","styles","jsxs","PrimitiveTable","THead","TR","index","HeaderCell","newSize","TH","TBody","item","col","colIndex","fieldName","render","StickyRowDataCell","StickyRowFillCell","Status","rowIndex","DataCell","TD","TFoot","FooterCell"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"string_field_filter.d.ts","sourceRoot":"","sources":["../../../../src/components/table_filter_panel/field_filters/string_field_filter.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAkB3D,wBAAgB,iBAAiB,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,gBAAgB,2CA4ClF"}
+{"version":3,"file":"string_field_filter.d.ts","sourceRoot":"","sources":["../../../../src/components/table_filter_panel/field_filters/string_field_filter.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAkB3D,wBAAgB,iBAAiB,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,gBAAgB,2CA6ClF"}

package/dist/components/table_filter_panel/field_filters/string_field_filter.js

@@ -1,4 +1,4 @@
-import { jsxs as i, jsx as t } from "react/jsx-runtime";
+import { jsxs as o, jsx as e } from "react/jsx-runtime";
 import { CrossCircleIcon as m } from "@tcn/icons/cross_circle_icon.js";
 import { useSignalValue as l } from "@tcn/state";
 import { Button as d } from "@tcn/ui/actions";
@@ -6,8 +6,8 @@ import { Select as h, Option as u, Input as f } from "@tcn/ui/inputs";
 import { VStack as x, Box as b, HStack as S } from "@tcn/ui/stacks";
 import { Title as g } from "@tcn/ui/typography";
 import { StringFieldFilterPresenter as v } from "./string_field_filter_presenter.js";
-import { useFieldFilterStrategy as F } from "./use_field_filter_strategy.js";
-const y = ["is", "isNot", "has"], C = {
+import { useFieldFilterStrategy as y } from "./use_field_filter_strategy.js";
+const F = ["is", "isNot", "has"], C = {
   is: "=",
   isNot: "!=",
   has: ":"
@@ -17,42 +17,43 @@ const y = ["is", "isNot", "has"], C = {
   has: "has"
 };
 function L({ fieldName: a, label: n, operators: c }) {
-  const r = F(v, a), o = l(r.broadcasts.value), p = l(r.broadcasts.operator);
-  return /* @__PURE__ */ i(x, { gap: "4px", children: [
-    /* @__PURE__ */ t(b, { width: "flex", children: /* @__PURE__ */ t(g, { size: "md", children: n }) }),
-    /* @__PURE__ */ i(S, { width: "flex", children: [
-      /* @__PURE__ */ t(
+  const r = y(v, a), i = l(r.broadcasts.value), p = l(r.broadcasts.operator);
+  return /* @__PURE__ */ o(x, { gap: "4px", children: [
+    /* @__PURE__ */ e(b, { width: "flex", children: /* @__PURE__ */ e(g, { size: "md", children: n }) }),
+    /* @__PURE__ */ o(S, { width: "flex", children: [
+      /* @__PURE__ */ e(
         h,
         {
           value: p,
-          onChange: (e) => r.setOperator(e),
+          onChange: (t) => r.setOperator(t),
           width: "65px",
-          children: (c || y).map((e) => /* @__PURE__ */ t(
+          children: (c || F).map((t) => /* @__PURE__ */ e(
             u,
             {
-              value: C[e],
-              label: s[e],
-              children: s[e]
+              value: C[t],
+              label: s[t],
+              children: s[t]
             },
-            e
+            t
           ))
         }
       ),
-      /* @__PURE__ */ t(
+      /* @__PURE__ */ e(
         f,
         {
           type: "text",
-          value: o ?? "",
-          onChange: (e) => r.setValue(e)
+          value: i ?? "",
+          onChange: (t) => r.setValue(t)
         }
       ),
-      /* @__PURE__ */ t(
+      /* @__PURE__ */ e(
         d,
         {
           onClick: () => r.setValue(null),
           hierarchy: "tertiary",
-          disabled: o == null,
-          children: /* @__PURE__ */ t(m, {})
+          utility: !0,
+          disabled: i == null,
+          children: /* @__PURE__ */ e(m, {})
         }
       )
     ] })

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

@@ -1 +1 @@
-{"version":3,"file":"string_field_filter.js","sources":["../../../../src/components/table_filter_panel/field_filters/string_field_filter.tsx"],"sourcesContent":["import { CrossCircleIcon } from '@tcn/icons/cross_circle_icon.js';\nimport { useSignalValue } from '@tcn/state';\nimport { Button } from '@tcn/ui/actions';\nimport { Input, Option, Select } from '@tcn/ui/inputs';\nimport { Box, HStack, VStack } from '@tcn/ui/stacks';\nimport { Title } from '@tcn/ui/typography';\nimport React from 'react';\nimport { FieldFilterProps } from './field_filter_props.js';\nimport { StringFieldFilterPresenter } from './string_field_filter_presenter.js';\nimport { ComparisonOperator } from '../types.js';\n\nimport { useFieldFilterStrategy } from './use_field_filter_strategy.js';\n\nconst allOperators: ('is' | 'isNot' | 'has')[] = ['is', 'isNot', 'has'];\nconst operatorSymbols: Record<'is' | 'isNot' | 'has', string> = {\n  is: '=',\n  isNot: '!=',\n  has: ':',\n};\nconst operatorLabels: Record<'is' | 'isNot' | 'has', string> = {\n  is: 'is',\n  isNot: 'is not',\n  has: 'has',\n};\n\nexport function StringFieldFilter({ fieldName, label, operators }: FieldFilterProps) {\n  const presenter = useFieldFilterStrategy(StringFieldFilterPresenter, fieldName);\n\n  const value = useSignalValue(presenter.broadcasts.value);\n  const operator = useSignalValue(presenter.broadcasts.operator);\n\n  const availableOperators = operators || allOperators;\n\n  return (\n    <VStack gap=\"4px\">\n      <Box width=\"flex\">\n        <Title size=\"md\">{label}</Title>\n      </Box>\n      <HStack width=\"flex\">\n        <Select\n          value={operator}\n          onChange={value => presenter.setOperator(value as ComparisonOperator)}\n          width=\"65px\"\n        >\n          {availableOperators.map(operator => (\n            <Option\n              key={operator}\n              value={operatorSymbols[operator]}\n              label={operatorLabels[operator]}\n            >\n              {operatorLabels[operator]}\n            </Option>\n          ))}\n        </Select>\n        <Input\n          type=\"text\"\n          value={value ?? ''}\n          onChange={value => presenter.setValue(value)}\n        />\n        <Button\n          onClick={() => presenter.setValue(null)}\n          hierarchy=\"tertiary\"\n          disabled={value == null}\n        >\n          <CrossCircleIcon />\n        </Button>\n      </HStack>\n    </VStack>\n  );\n}\n"],"names":["allOperators","operatorSymbols","operatorLabels","StringFieldFilter","fieldName","label","operators","presenter","useFieldFilterStrategy","StringFieldFilterPresenter","value","useSignalValue","operator","jsxs","VStack","jsx","Box","Title","HStack","Select","Option","Input","Button","CrossCircleIcon"],"mappings":";;;;;;;;;AAaA,MAAMA,IAA2C,CAAC,MAAM,SAAS,KAAK,GAChEC,IAA0D;AAAA,EAC9D,IAAI;AAAA,EACJ,OAAO;AAAA,EACP,KAAK;AACP,GACMC,IAAyD;AAAA,EAC7D,IAAI;AAAA,EACJ,OAAO;AAAA,EACP,KAAK;AACP;AAEO,SAASC,EAAkB,EAAE,WAAAC,GAAW,OAAAC,GAAO,WAAAC,KAA+B;AACnF,QAAMC,IAAYC,EAAuBC,GAA4BL,CAAS,GAExEM,IAAQC,EAAeJ,EAAU,WAAW,KAAK,GACjDK,IAAWD,EAAeJ,EAAU,WAAW,QAAQ;AAI7D,SACE,gBAAAM,EAACC,GAAA,EAAO,KAAI,OACV,UAAA;AAAA,IAAA,gBAAAC,EAACC,GAAA,EAAI,OAAM,QACT,UAAA,gBAAAD,EAACE,KAAM,MAAK,MAAM,aAAM,EAAA,CAC1B;AAAA,IACA,gBAAAJ,EAACK,GAAA,EAAO,OAAM,QACZ,UAAA;AAAA,MAAA,gBAAAH;AAAA,QAACI;AAAA,QAAA;AAAA,UACC,OAAOP;AAAA,UACP,UAAU,CAAAF,MAASH,EAAU,YAAYG,CAA2B;AAAA,UACpE,OAAM;AAAA,UAEL,WAbkBJ,KAAaN,GAaZ,IAAI,CAAAY,MACtB,gBAAAG;AAAA,YAACK;AAAA,YAAA;AAAA,cAEC,OAAOnB,EAAgBW,CAAQ;AAAA,cAC/B,OAAOV,EAAeU,CAAQ;AAAA,cAE7B,YAAeA,CAAQ;AAAA,YAAA;AAAA,YAJnBA;AAAAA,UAAA,CAMR;AAAA,QAAA;AAAA,MAAA;AAAA,MAEH,gBAAAG;AAAA,QAACM;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,OAAOX,KAAS;AAAA,UAChB,UAAU,CAAAA,MAASH,EAAU,SAASG,CAAK;AAAA,QAAA;AAAA,MAAA;AAAA,MAE7C,gBAAAK;AAAA,QAACO;AAAA,QAAA;AAAA,UACC,SAAS,MAAMf,EAAU,SAAS,IAAI;AAAA,UACtC,WAAU;AAAA,UACV,UAAUG,KAAS;AAAA,UAEnB,4BAACa,GAAA,CAAA,CAAgB;AAAA,QAAA;AAAA,MAAA;AAAA,IACnB,EAAA,CACF;AAAA,EAAA,GACF;AAEJ;"}
+{"version":3,"file":"string_field_filter.js","sources":["../../../../src/components/table_filter_panel/field_filters/string_field_filter.tsx"],"sourcesContent":["import { CrossCircleIcon } from '@tcn/icons/cross_circle_icon.js';\nimport { useSignalValue } from '@tcn/state';\nimport { Button } from '@tcn/ui/actions';\nimport { Input, Option, Select } from '@tcn/ui/inputs';\nimport { Box, HStack, VStack } from '@tcn/ui/stacks';\nimport { Title } from '@tcn/ui/typography';\nimport React from 'react';\nimport { FieldFilterProps } from './field_filter_props.js';\nimport { StringFieldFilterPresenter } from './string_field_filter_presenter.js';\nimport { ComparisonOperator } from '../types.js';\n\nimport { useFieldFilterStrategy } from './use_field_filter_strategy.js';\n\nconst allOperators: ('is' | 'isNot' | 'has')[] = ['is', 'isNot', 'has'];\nconst operatorSymbols: Record<'is' | 'isNot' | 'has', string> = {\n  is: '=',\n  isNot: '!=',\n  has: ':',\n};\nconst operatorLabels: Record<'is' | 'isNot' | 'has', string> = {\n  is: 'is',\n  isNot: 'is not',\n  has: 'has',\n};\n\nexport function StringFieldFilter({ fieldName, label, operators }: FieldFilterProps) {\n  const presenter = useFieldFilterStrategy(StringFieldFilterPresenter, fieldName);\n\n  const value = useSignalValue(presenter.broadcasts.value);\n  const operator = useSignalValue(presenter.broadcasts.operator);\n\n  const availableOperators = operators || allOperators;\n\n  return (\n    <VStack gap=\"4px\">\n      <Box width=\"flex\">\n        <Title size=\"md\">{label}</Title>\n      </Box>\n      <HStack width=\"flex\">\n        <Select\n          value={operator}\n          onChange={value => presenter.setOperator(value as ComparisonOperator)}\n          width=\"65px\"\n        >\n          {availableOperators.map(operator => (\n            <Option\n              key={operator}\n              value={operatorSymbols[operator]}\n              label={operatorLabels[operator]}\n            >\n              {operatorLabels[operator]}\n            </Option>\n          ))}\n        </Select>\n        <Input\n          type=\"text\"\n          value={value ?? ''}\n          onChange={value => presenter.setValue(value)}\n        />\n        <Button\n          onClick={() => presenter.setValue(null)}\n          hierarchy=\"tertiary\"\n          utility\n          disabled={value == null}\n        >\n          <CrossCircleIcon />\n        </Button>\n      </HStack>\n    </VStack>\n  );\n}\n"],"names":["allOperators","operatorSymbols","operatorLabels","StringFieldFilter","fieldName","label","operators","presenter","useFieldFilterStrategy","StringFieldFilterPresenter","value","useSignalValue","operator","jsxs","VStack","jsx","Box","Title","HStack","Select","Option","Input","Button","CrossCircleIcon"],"mappings":";;;;;;;;;AAaA,MAAMA,IAA2C,CAAC,MAAM,SAAS,KAAK,GAChEC,IAA0D;AAAA,EAC9D,IAAI;AAAA,EACJ,OAAO;AAAA,EACP,KAAK;AACP,GACMC,IAAyD;AAAA,EAC7D,IAAI;AAAA,EACJ,OAAO;AAAA,EACP,KAAK;AACP;AAEO,SAASC,EAAkB,EAAE,WAAAC,GAAW,OAAAC,GAAO,WAAAC,KAA+B;AACnF,QAAMC,IAAYC,EAAuBC,GAA4BL,CAAS,GAExEM,IAAQC,EAAeJ,EAAU,WAAW,KAAK,GACjDK,IAAWD,EAAeJ,EAAU,WAAW,QAAQ;AAI7D,SACE,gBAAAM,EAACC,GAAA,EAAO,KAAI,OACV,UAAA;AAAA,IAAA,gBAAAC,EAACC,GAAA,EAAI,OAAM,QACT,UAAA,gBAAAD,EAACE,KAAM,MAAK,MAAM,aAAM,EAAA,CAC1B;AAAA,IACA,gBAAAJ,EAACK,GAAA,EAAO,OAAM,QACZ,UAAA;AAAA,MAAA,gBAAAH;AAAA,QAACI;AAAA,QAAA;AAAA,UACC,OAAOP;AAAA,UACP,UAAU,CAAAF,MAASH,EAAU,YAAYG,CAA2B;AAAA,UACpE,OAAM;AAAA,UAEL,WAbkBJ,KAAaN,GAaZ,IAAI,CAAAY,MACtB,gBAAAG;AAAA,YAACK;AAAA,YAAA;AAAA,cAEC,OAAOnB,EAAgBW,CAAQ;AAAA,cAC/B,OAAOV,EAAeU,CAAQ;AAAA,cAE7B,YAAeA,CAAQ;AAAA,YAAA;AAAA,YAJnBA;AAAAA,UAAA,CAMR;AAAA,QAAA;AAAA,MAAA;AAAA,MAEH,gBAAAG;AAAA,QAACM;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,OAAOX,KAAS;AAAA,UAChB,UAAU,CAAAA,MAASH,EAAU,SAASG,CAAK;AAAA,QAAA;AAAA,MAAA;AAAA,MAE7C,gBAAAK;AAAA,QAACO;AAAA,QAAA;AAAA,UACC,SAAS,MAAMf,EAAU,SAAS,IAAI;AAAA,UACtC,WAAU;AAAA,UACV,SAAO;AAAA,UACP,UAAUG,KAAS;AAAA,UAEnB,4BAACa,GAAA,CAAA,CAAgB;AAAA,QAAA;AAAA,MAAA;AAAA,IACnB,EAAA,CACF;AAAA,EAAA,GACF;AAEJ;"}

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

@@ -1 +1 @@
-{"version":3,"file":"table_pager.d.ts","sourceRoot":"","sources":["../../src/components/table_pager.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAGjD,OAAO,EAAU,cAAc,EAAE,qBAAqB,EAAE,MAAM,gBAAgB,CAAC;AAM/E,MAAM,WAAW,kBAAkB,CAAC,CAAC;IACnC,UAAU,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC;CAC3B;AACD,MAAM,MAAM,eAAe,CAAC,CAAC,IAAI,qBAAqB,CACpD,kBAAkB,CAAC,CAAC,CAAC,GAAG,cAAc,EACtC,KAAK,CACN,CAAC;AAEF,wBAAgB,UAAU,CAAC,CAAC,EAAE,EAAE,UAAU,EAAE,GAAG,KAAK,EAAE,EAAE,eAAe,CAAC,CAAC,CAAC,2CAkBzE"}
+{"version":3,"file":"table_pager.d.ts","sourceRoot":"","sources":["../../src/components/table_pager.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAGjD,OAAO,EAAU,cAAc,EAAE,qBAAqB,EAAE,MAAM,gBAAgB,CAAC;AAM/E,MAAM,WAAW,kBAAkB,CAAC,CAAC;IACnC,UAAU,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC;CAC3B;AACD,MAAM,MAAM,eAAe,CAAC,CAAC,IAAI,qBAAqB,CACpD,kBAAkB,CAAC,CAAC,CAAC,GAAG,cAAc,EACtC,KAAK,CACN,CAAC;AAEF,wBAAgB,UAAU,CAAC,CAAC,EAAE,EAAE,UAAU,EAAE,GAAG,KAAK,EAAE,EAAE,eAAe,CAAC,CAAC,CAAC,2CA4BzE"}

package/dist/components/table_pager.js

@@ -1,23 +1,41 @@
-import { jsxs as n, jsx as e } from "react/jsx-runtime";
-import { ChevronLeftIcon as l } from "@tcn/icons/chevron_left_icon.js";
-import { useSignalValue as r } from "@tcn/state";
+import { jsxs as i, jsx as t } from "react/jsx-runtime";
+import { ChevronLeftIcon as p } from "@tcn/icons/chevron_left_icon.js";
+import { useSignalValue as o } from "@tcn/state";
 import { Button as a } from "@tcn/ui/actions";
-import { HStack as i } from "@tcn/ui/stacks";
-import { BodyText as s } from "@tcn/ui/typography";
-import { ChevronRightIcon as g } from "@tcn/icons/chevron_right_icon.js";
-import '../table_pager.css';const d = "_page-count_2afc65e", h = { "page-count": d };
-function v({ dataSource: t, ...c }) {
-  const o = r(t.broadcasts.currentPageIndex), p = r(t.broadcasts.hasNextPage);
-  return /* @__PURE__ */ n(i, { as: "div", height: "auto", width: "auto", gap: "8px", ...c, children: [
-    /* @__PURE__ */ n(i, { gap: "4px", width: "auto", children: [
-      /* @__PURE__ */ e(s, { children: "Page:" }),
-      /* @__PURE__ */ e(s, { className: h["page-count"], children: o + 1 })
+import { HStack as n } from "@tcn/ui/stacks";
+import { BodyText as c } from "@tcn/ui/typography";
+import { ChevronRightIcon as h } from "@tcn/icons/chevron_right_icon.js";
+import '../table_pager.css';const g = "_page-count_2afc65e", u = { "page-count": g };
+function C({ dataSource: e, ...s }) {
+  const r = o(e.broadcasts.currentPageIndex), l = o(e.broadcasts.hasNextPage);
+  return /* @__PURE__ */ i(n, { as: "div", height: "auto", width: "auto", gap: "8px", ...s, children: [
+    /* @__PURE__ */ i(n, { gap: "4px", width: "auto", children: [
+      /* @__PURE__ */ t(c, { children: "Page:" }),
+      /* @__PURE__ */ t(c, { className: u["page-count"], children: r + 1 })
     ] }),
-    /* @__PURE__ */ e(a, { onClick: () => t.previousPage(), disabled: o === 0, children: /* @__PURE__ */ e(l, { flipOnRtl: !0 }) }),
-    /* @__PURE__ */ e(a, { onClick: () => t.nextPage(), disabled: !p, children: /* @__PURE__ */ e(g, { flipOnRtl: !0 }) })
+    /* @__PURE__ */ t(
+      a,
+      {
+        utility: !0,
+        hierarchy: "tertiary",
+        onClick: () => e.previousPage(),
+        disabled: r === 0,
+        children: /* @__PURE__ */ t(p, { flipOnRtl: !0 })
+      }
+    ),
+    /* @__PURE__ */ t(
+      a,
+      {
+        utility: !0,
+        hierarchy: "tertiary",
+        onClick: () => e.nextPage(),
+        disabled: !l,
+        children: /* @__PURE__ */ t(h, { flipOnRtl: !0 })
+      }
+    )
   ] });
 }
 export {
-  v as TablePager
+  C as TablePager
 };
 //# sourceMappingURL=table_pager.js.map

package/dist/components/table_pager.js.map

@@ -1 +1 @@
-{"version":3,"file":"table_pager.js","sources":["../../src/components/table_pager.tsx"],"sourcesContent":["import React from 'react';\n\nimport { ChevronLeftIcon } from '@tcn/icons/chevron_left_icon.js';\nimport { DataSource } from '@tcn/resource-store';\nimport { useSignalValue } from '@tcn/state';\nimport { Button } from '@tcn/ui/actions';\nimport { HStack, HStackOwnProps, WithDetailedHTMLProps } from '@tcn/ui/stacks';\nimport { BodyText } from '@tcn/ui/typography';\n\nimport { ChevronRightIcon } from '@tcn/icons/chevron_right_icon.js';\nimport styles from './table_pager.module.css';\n\nexport interface TablePagerOwnProps<T> {\n  dataSource: DataSource<T>;\n}\nexport type TablePagerProps<T> = WithDetailedHTMLProps<\n  TablePagerOwnProps<T> & HStackOwnProps,\n  'div'\n>;\n\nexport function TablePager<T>({ dataSource, ...props }: TablePagerProps<T>) {\n  const pageIndex = useSignalValue(dataSource.broadcasts.currentPageIndex);\n  const hasNextPage = useSignalValue(dataSource.broadcasts.hasNextPage);\n\n  return (\n    <HStack as=\"div\" height=\"auto\" width=\"auto\" gap=\"8px\" {...props}>\n      <HStack gap=\"4px\" width=\"auto\">\n        <BodyText>Page:</BodyText>\n        <BodyText className={styles['page-count']}>{pageIndex + 1}</BodyText>\n      </HStack>\n      <Button onClick={() => dataSource.previousPage()} disabled={pageIndex === 0}>\n        <ChevronLeftIcon flipOnRtl />\n      </Button>\n      <Button onClick={() => dataSource.nextPage()} disabled={!hasNextPage}>\n        <ChevronRightIcon flipOnRtl />\n      </Button>\n    </HStack>\n  );\n}\n"],"names":["TablePager","dataSource","props","pageIndex","useSignalValue","hasNextPage","jsxs","HStack","jsx","BodyText","styles","Button","ChevronLeftIcon","ChevronRightIcon"],"mappings":";;;;;;;;AAoBO,SAASA,EAAc,EAAE,YAAAC,GAAY,GAAGC,KAA6B;AAC1E,QAAMC,IAAYC,EAAeH,EAAW,WAAW,gBAAgB,GACjEI,IAAcD,EAAeH,EAAW,WAAW,WAAW;AAEpE,SACE,gBAAAK,EAACC,GAAA,EAAO,IAAG,OAAM,QAAO,QAAO,OAAM,QAAO,KAAI,OAAO,GAAGL,GACxD,UAAA;AAAA,IAAA,gBAAAI,EAACC,GAAA,EAAO,KAAI,OAAM,OAAM,QACtB,UAAA;AAAA,MAAA,gBAAAC,EAACC,KAAS,UAAA,QAAA,CAAK;AAAA,wBACdA,GAAA,EAAS,WAAWC,EAAO,YAAY,GAAI,cAAY,EAAA,CAAE;AAAA,IAAA,GAC5D;AAAA,IACA,gBAAAF,EAACG,GAAA,EAAO,SAAS,MAAMV,EAAW,aAAA,GAAgB,UAAUE,MAAc,GACxE,UAAA,gBAAAK,EAACI,GAAA,EAAgB,WAAS,IAAC,GAC7B;AAAA,IACA,gBAAAJ,EAACG,GAAA,EAAO,SAAS,MAAMV,EAAW,SAAA,GAAY,UAAU,CAACI,GACvD,UAAA,gBAAAG,EAACK,GAAA,EAAiB,WAAS,IAAC,EAAA,CAC9B;AAAA,EAAA,GACF;AAEJ;"}
+{"version":3,"file":"table_pager.js","sources":["../../src/components/table_pager.tsx"],"sourcesContent":["import React from 'react';\n\nimport { ChevronLeftIcon } from '@tcn/icons/chevron_left_icon.js';\nimport { DataSource } from '@tcn/resource-store';\nimport { useSignalValue } from '@tcn/state';\nimport { Button } from '@tcn/ui/actions';\nimport { HStack, HStackOwnProps, WithDetailedHTMLProps } from '@tcn/ui/stacks';\nimport { BodyText } from '@tcn/ui/typography';\n\nimport { ChevronRightIcon } from '@tcn/icons/chevron_right_icon.js';\nimport styles from './table_pager.module.css';\n\nexport interface TablePagerOwnProps<T> {\n  dataSource: DataSource<T>;\n}\nexport type TablePagerProps<T> = WithDetailedHTMLProps<\n  TablePagerOwnProps<T> & HStackOwnProps,\n  'div'\n>;\n\nexport function TablePager<T>({ dataSource, ...props }: TablePagerProps<T>) {\n  const pageIndex = useSignalValue(dataSource.broadcasts.currentPageIndex);\n  const hasNextPage = useSignalValue(dataSource.broadcasts.hasNextPage);\n\n  return (\n    <HStack as=\"div\" height=\"auto\" width=\"auto\" gap=\"8px\" {...props}>\n      <HStack gap=\"4px\" width=\"auto\">\n        <BodyText>Page:</BodyText>\n        <BodyText className={styles['page-count']}>{pageIndex + 1}</BodyText>\n      </HStack>\n      <Button\n        utility\n        hierarchy=\"tertiary\"\n        onClick={() => dataSource.previousPage()}\n        disabled={pageIndex === 0}\n      >\n        <ChevronLeftIcon flipOnRtl />\n      </Button>\n      <Button\n        utility\n        hierarchy=\"tertiary\"\n        onClick={() => dataSource.nextPage()}\n        disabled={!hasNextPage}\n      >\n        <ChevronRightIcon flipOnRtl />\n      </Button>\n    </HStack>\n  );\n}\n"],"names":["TablePager","dataSource","props","pageIndex","useSignalValue","hasNextPage","jsxs","HStack","jsx","BodyText","styles","Button","ChevronLeftIcon","ChevronRightIcon"],"mappings":";;;;;;;;AAoBO,SAASA,EAAc,EAAE,YAAAC,GAAY,GAAGC,KAA6B;AAC1E,QAAMC,IAAYC,EAAeH,EAAW,WAAW,gBAAgB,GACjEI,IAAcD,EAAeH,EAAW,WAAW,WAAW;AAEpE,SACE,gBAAAK,EAACC,GAAA,EAAO,IAAG,OAAM,QAAO,QAAO,OAAM,QAAO,KAAI,OAAO,GAAGL,GACxD,UAAA;AAAA,IAAA,gBAAAI,EAACC,GAAA,EAAO,KAAI,OAAM,OAAM,QACtB,UAAA;AAAA,MAAA,gBAAAC,EAACC,KAAS,UAAA,QAAA,CAAK;AAAA,wBACdA,GAAA,EAAS,WAAWC,EAAO,YAAY,GAAI,cAAY,EAAA,CAAE;AAAA,IAAA,GAC5D;AAAA,IACA,gBAAAF;AAAA,MAACG;AAAA,MAAA;AAAA,QACC,SAAO;AAAA,QACP,WAAU;AAAA,QACV,SAAS,MAAMV,EAAW,aAAA;AAAA,QAC1B,UAAUE,MAAc;AAAA,QAExB,UAAA,gBAAAK,EAACI,GAAA,EAAgB,WAAS,GAAA,CAAC;AAAA,MAAA;AAAA,IAAA;AAAA,IAE7B,gBAAAJ;AAAA,MAACG;AAAA,MAAA;AAAA,QACC,SAAO;AAAA,QACP,WAAU;AAAA,QACV,SAAS,MAAMV,EAAW,SAAA;AAAA,QAC1B,UAAU,CAACI;AAAA,QAEX,UAAA,gBAAAG,EAACK,GAAA,EAAiB,WAAS,GAAA,CAAC;AAAA,MAAA;AAAA,IAAA;AAAA,EAC9B,GACF;AAEJ;"}

package/dist/table.css

@@ -1 +1 @@
-._table-body-wrapper_55f7034{box-shadow:var(--table-box-shadow, inset 0px 1px 2px 0px rgba(0, 0, 0, .5));font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;color:#333}._table-body_b8c928c{border-spacing:0;width:auto;min-width:100%;height:auto;min-height:100%;font-size:12px;table-layout:fixed;background-color:#ebebeb}.dark-mode ._table-body_b8c928c{background-color:#333;color:#ffffffe6}td{text-align:start;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;background-color:inherit}._table-body_b8c928c tr{font-size:12px}._table-body_b8c928c tr[data-clickable=true]{cursor:pointer}._table-body_b8c928c thead tr th{position:sticky;top:0;z-index:1;box-sizing:border-box}._table-body_b8c928c thead{position:sticky;top:0;z-index:3}._table-body_b8c928c tbody{position:relative;z-index:1}._table-body_b8c928c tfoot{position:relative;z-index:2}._table-body_b8c928c th{--accent-color: #0077aa;--accent-surface-light: color-mix(in srgb, var(--accent-color) 8%, white);background-color:var(--accent-surface-light);color:#000;font-weight:400;text-align:start}._table-body_b8c928c th>div{border-inline-start:1px solid #ccc;border-bottom:1px solid #ccc;display:flex;align-items:center}._table-body_b8c928c th:first-child>div{border-inline-start:none}._table-body_b8c928c th:last-child>div{border-inline:1px solid #ccc}.dark-mode ._table-body_b8c928c th:last-child{border-inline:1px solid #202020}._table-body_b8c928c td:last-child>div{border-inline:1px solid #ccc}.dark-mode ._table-body_b8c928c td:last-child>div{border-inline:1px solid #202020}.dark-mode ._table-body_b8c928c th{color:#ffffffe6;border-bottom:1px solid #202020;border-inline-start:1px solid #202020;background-color:#333}._table-body_b8c928c td>div{height:100%;display:flex;align-items:center;border-bottom:1px solid #e0e0e0}.dark-mode ._table-body_b8c928c td>div{border-bottom:1px solid #202020}._table-body_b8c928c tr:nth-child(odd){background-color:#f1f1f1}._table-body_b8c928c tr:nth-child(2n){background-color:#fff}.dark-mode ._table-body_b8c928c tr:nth-child(odd){background-color:#3b3b3b}.dark-mode ._table-body_b8c928c tr:nth-child(2n){background-color:#2e2e2e}._table-body_b8c928c tr:hover{background-color:#dedede}.dark-mode ._table-body_b8c928c tr:hover{background-color:#1e1e1e}._table-body_b8c928c thead{box-shadow:0 2px 2px -1px #0000001a}._table-body_b8c928c tfoot td{background-color:#f0f0f0;font-weight:700}._table-body_b8c928c tr.fill{height:auto}._table-body_b8c928c tr td.fill{width:auto;min-width:none;background-color:inherit}._table-body_b8c928c tr th.fill{width:auto;background-color:inherit}._table-body_b8c928c tfoot{position:sticky;bottom:0}._table-body_b8c928c tr[data-selected=true],.dark-mode ._table-body_b8c928c tr[data-selected=true]{background-color:var(--accent-color, #549aff);color:#fff}._table-body_b8c928c td,._table-body_b8c928c th{max-height:30px;height:30px;font-size:12px;vertical-align:middle}._table-body_b8c928c td:first-child>div{padding-inline-start:var(--surface-inset, 6px)}._table-body_b8c928c td:last-child>div{padding-inline-end:var(--surface-inset, 6px)}.small-text ._table-body_b8c928c td,.small-text ._table-body_b8c928c th{max-height:20px;height:20px;font-size:10px}.medium-small-text ._table-body_b8c928c td,.medium-small-text ._table-body_b8c928c th{max-height:22px;height:22px;font-size:12px}.medium-text ._table-body_b8c928c td,.medium-text ._table-body_b8c928c th{max-height:24px;height:24px;font-size:14px}.medium-large-text ._table-body_b8c928c td,.medium-large-text ._table-body_b8c928c th{max-height:26px;height:26px;font-size:16px}.large-text ._table-body_b8c928c td,.large-text ._table-body_b8c928c th{height:28px;max-height:28px;font-size:18px}._table-body_b8c928c th{padding:0!important}._table-body_b8c928c tr th.spacer{background-color:#f1f1f1}.dark-mode ._table-body_b8c928c tr th.spacer{background-color:#333}._table-body_b8c928c tr th.fill{background-color:#f1f1f1}.dark-mode ._table-body_b8c928c tr th.fill{background-color:#333}._table-body_b8c928c tr[data-sticky-row] td{background-color:#ccc}.dark-mode ._table-body_b8c928c tr[data-sticky-row] td{background-color:#2f2f2f}._table-body_b8c928c[data-is-clickable=true] td{cursor:pointer}
+._table-body_b8c928c{border-spacing:0;width:auto;min-width:100%;height:auto;min-height:100%;table-layout:fixed;display:table}._table-body_b8c928c thead th,._table-body_b8c928c thead td{padding:0}:is(._table-body_b8c928c thead tr,._table-body_b8c928c tbody tr) th[data-stick-to=start],:is(._table-body_b8c928c thead tr,._table-body_b8c928c tbody tr) td[data-stick-to=start]{border-inline-end:1px solid #ccc}:is(._table-body_b8c928c thead tr,._table-body_b8c928c tbody tr) th[data-stick-to=end],:is(._table-body_b8c928c thead tr,._table-body_b8c928c tbody tr) td[data-stick-to=end]{border-inline-start:1px solid #ccc}._table-body_b8c928c tr[data-clickable=true]{cursor:pointer}._table-body_b8c928c thead tr th{position:sticky;top:0;z-index:1;box-sizing:border-box}._table-body_b8c928c thead{position:sticky;top:0;z-index:3}._table-body_b8c928c tbody{position:relative;z-index:1}._table-body_b8c928c tfoot{position:relative;z-index:2}._table-body_b8c928c th>div{display:flex;align-items:center}._table-body_b8c928c td>div{height:100%;display:flex;align-items:center}._table-body_b8c928c tfoot{position:sticky;bottom:0}._table-body_b8c928c td,._table-body_b8c928c th{vertical-align:middle}._table-body_b8c928c[data-is-clickable=true] td{cursor:pointer}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tcn/ui-table",
-  "version": "2.3.3",
+  "version": "2.3.5",
   "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.2.1",
-    "@tcn/resource-store": "2.5.0",
-    "@tcn/state": "1.1.1",
-    "@tcn/ui": "0.7.0"
+    "@tcn/resource-store": "2.5.1",
+    "@tcn/state": "1.2.0",
+    "@tcn/ui": "0.8.1"
   },
   "peerDependencies": {
     "react": "^18.2.0",