@tcn/ui-table 2.3.6 → 2.3.8

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,11 +409,11 @@ export function WithFilterPanel() {
 
   return (
     <StoryWrapper>
-      <VPanel height="100%">
+      <Panel height="100%">
         <Header>The Table</Header>
         <VBody>
           <Rail>
-            <Side>
+            <Side padding="0px">
               <Box
                 minWidth="300px"
                 enableResizeOnEnd
@@ -423,7 +423,10 @@ export function WithFilterPanel() {
                   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.
                 }}
               >
-                <TableFilterPanel dataSource={source}>
+                <TableFilterPanel
+                  dataSource={source}
+                  onClose={() => window.alert('Closed')}
+                >
                   <StringFieldFilter fieldName="name" label="Name (string)" />
                   <NumberFieldFilter fieldName="age" label="Age (number)" />
                   <DateFieldFilter fieldName="birthdate" label="Birthdate (date range)" />
@@ -431,7 +434,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 +449,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;

package/src/components/table_filter_panel/field_filters/clear_button.tsx

@@ -0,0 +1,17 @@
+import { CrossCircleIcon } from '@tcn/icons/cross_circle_icon.js';
+import { Button, type ButtonProps } from '@tcn/ui/actions';
+
+export interface ClearFilterButtonProps extends Omit<ButtonProps, 'children'> {}
+
+export function ClearFilterButton({
+  onClick,
+  hierarchy = 'tertiary',
+  utility = true,
+  ...props
+}: ClearFilterButtonProps) {
+  return (
+    <Button utility={utility} onClick={onClick} hierarchy={hierarchy} {...props}>
+      <CrossCircleIcon />
+    </Button>
+  );
+}

package/src/components/table_filter_panel/field_filters/clearable_field.tsx

@@ -0,0 +1,33 @@
+import { HStack, VStack, type VStackProps } from '@tcn/ui/stacks';
+import { ClearFilterButton } from './clear_button.js';
+import { FieldLabel } from '@tcn/ui/form';
+
+export interface ClearableFieldProps extends VStackProps {
+  label?: string;
+  onClear?: () => void;
+  isClearable?: boolean;
+  inline?: boolean;
+}
+
+export function ClearableField({
+  children,
+  label,
+  onClear,
+  isClearable,
+  vAlign = 'start',
+  hAlign = 'start',
+  gap = '4px',
+  inline = false,
+  ...props
+}: ClearableFieldProps) {
+  return (
+    <VStack vAlign={vAlign} hAlign={hAlign} gap={gap} {...props}>
+      {!inline && <FieldLabel>{label}</FieldLabel>}
+      <HStack width="flex" gap="4px">
+        {inline && <FieldLabel>{label}</FieldLabel>}
+        <HStack width="flex">{children}</HStack>
+        <ClearFilterButton onClick={onClear} disabled={isClearable} />
+      </HStack>
+    </VStack>
+  );
+}

package/src/components/table_filter_panel/field_filters/date_field_filter.tsx

@@ -1,12 +1,9 @@
-import { CrossCircleIcon } from '@tcn/icons/cross_circle_icon.js';
 import { useSignalValue } from '@tcn/state';
-import { Button } from '@tcn/ui/actions';
 import { DatePickerInput } from '@tcn/ui/inputs';
-import { Box, HStack, VStack } from '@tcn/ui/stacks';
-import { BodyText, Title } from '@tcn/ui/typography';
-import React from 'react';
 import { useFieldFilterStrategy } from './use_field_filter_strategy.js';
 import { DateFieldFilterPresenter } from './date_field_filter_presenter.js';
+import { ClearableField } from './clearable_field.js';
+import { FieldSet } from '@tcn/ui/form';
 
 export function DateFieldFilter({
   fieldName,
@@ -21,50 +18,29 @@ export function DateFieldFilter({
   const endDate = useSignalValue(presenter.broadcasts.endDate);
 
   return (
-    <VStack gap="4px">
-      <Box width="flex">
-        <Title size="md">{label}</Title>
-      </Box>
-      <HStack gap="4px">
-        <Box width="auto">
-          <BodyText size="lg">Start</BodyText>
-        </Box>
-        <Box width="flex">
-          <DatePickerInput
-            value={startDate}
-            onChange={value => presenter.setStartDate(value)}
-          />
-        </Box>
-        <Box width="auto">
-          <Button
-            onClick={() => presenter.setStartDate(null)}
-            hierarchy="tertiary"
-            disabled={startDate == null}
-          >
-            <CrossCircleIcon />
-          </Button>
-        </Box>
-      </HStack>
-      <HStack gap="4px">
-        <Box width="auto">
-          <BodyText size="lg">End</BodyText>
-        </Box>
-        <Box width="flex">
-          <DatePickerInput
-            value={endDate}
-            onChange={value => presenter.setEndDate(value)}
-          />
-        </Box>
-        <Box width="auto">
-          <Button
-            onClick={() => presenter.setEndDate(null)}
-            hierarchy="tertiary"
-            disabled={endDate == null}
-          >
-            <CrossCircleIcon />
-          </Button>
-        </Box>
-      </HStack>
-    </VStack>
+    <FieldSet legend={label} gap="4px">
+      <ClearableField
+        inline
+        label="Start"
+        onClear={() => presenter.setStartDate(null)}
+        isClearable={startDate == null}
+      >
+        <DatePickerInput
+          value={startDate}
+          onChange={value => presenter.setStartDate(value)}
+        />
+      </ClearableField>
+      <ClearableField
+        inline
+        label="End"
+        onClear={() => presenter.setEndDate(null)}
+        isClearable={endDate == null}
+      >
+        <DatePickerInput
+          value={endDate}
+          onChange={value => presenter.setEndDate(value)}
+        />
+      </ClearableField>
+    </FieldSet>
   );
 }

package/src/components/table_filter_panel/field_filters/mulit_select_field_filter.tsx

@@ -1,14 +1,11 @@
-import React from 'react';
-
-import { CrossCircleIcon } from '@tcn/icons/cross_circle_icon.js';
 import { useSignalValue } from '@tcn/state';
-import { Button } from '@tcn/ui/actions';
 import { Multiselect, Option } from '@tcn/ui/inputs';
 import { Box, HStack, VStack } from '@tcn/ui/stacks';
 import { Title } from '@tcn/ui/typography';
 import { FieldFilterProps } from './field_filter_props.js';
 import { MultiSelectFieldFilterPresenter } from './multi_select_field_filter_presenter.js';
 import { useFieldFilterStrategy } from './use_field_filter_strategy.js';
+import { ClearFilterButton } from './clear_button.js';
 
 export type MulitSelectFieldFilterProps = FieldFilterProps & {
   options: { label: string; value: string | boolean | number }[];
@@ -55,13 +52,10 @@ export function MulitSelectFieldFilter({
             ))}
           </Multiselect>
         </Box>
-        <Button
+        <ClearFilterButton
           onClick={() => presenter.setValue(null)}
-          hierarchy="tertiary"
           disabled={values == null || values.length === 0}
-        >
-          <CrossCircleIcon />
-        </Button>
+        />
       </HStack>
     </VStack>
   );

package/src/components/table_filter_panel/field_filters/number_field_filter.tsx

@@ -1,14 +1,10 @@
-import { CrossCircleIcon } from '@tcn/icons/cross_circle_icon.js';
 import { useSignalValue } from '@tcn/state';
-import { Button } from '@tcn/ui/actions';
-import { Input, Option, Select } from '@tcn/ui/inputs';
-import { Box, HStack, VStack } from '@tcn/ui/stacks';
-import { Title } from '@tcn/ui/typography';
-import React from 'react';
+import { Input, Option, Select, InputGroup } from '@tcn/ui/inputs';
 import { FieldFilterProps } from './field_filter_props.js';
 import { NumberFieldFilterPresenter } from './number_field_filter_presenter.js';
 import { useFieldFilterStrategy } from './use_field_filter_strategy.js';
 import { ComparisonOperator } from '../types.js';
+import { ClearableField } from './clearable_field.js';
 
 const operators: ComparisonOperator[] = ['>=', '>', '<=', '<', '=', '!='];
 
@@ -19,11 +15,12 @@ export function NumberFieldFilter({ fieldName, label }: FieldFilterProps) {
   const operator = useSignalValue(presenter.broadcasts.operator);
 
   return (
-    <VStack gap="4px">
-      <Box width="flex">
-        <Title size="md">{label}</Title>
-      </Box>
-      <HStack width="flex">
+    <ClearableField
+      label={label}
+      onClear={() => presenter.setValue(null)}
+      isClearable={value == null}
+    >
+      <InputGroup>
         <Select
           value={operator}
           onChange={value => presenter.setOperator(value as ComparisonOperator)}
@@ -40,14 +37,7 @@ export function NumberFieldFilter({ fieldName, label }: FieldFilterProps) {
           value={String(value ?? '')}
           onChange={value => presenter.setValue(Number(value))}
         />
-        <Button
-          onClick={() => presenter.setValue(null)}
-          hierarchy="tertiary"
-          disabled={value == null}
-        >
-          <CrossCircleIcon />
-        </Button>
-      </HStack>
-    </VStack>
+      </InputGroup>
+    </ClearableField>
   );
 }

package/src/components/table_filter_panel/field_filters/number_range_field_filter.tsx

@@ -1,12 +1,9 @@
-import { CrossCircleIcon } from '@tcn/icons/cross_circle_icon.js';
 import { useSignalValue } from '@tcn/state';
-import { Button } from '@tcn/ui/actions';
 import { Input } from '@tcn/ui/inputs';
-import { Box, HStack, VStack } from '@tcn/ui/stacks';
-import { BodyText, Title } from '@tcn/ui/typography';
-import React from 'react';
 import { useFieldFilterStrategy } from './use_field_filter_strategy.js';
 import { NumberRangeFieldFilterPresenter } from './number_range_field_filter_presenter.js';
+import { FieldSet } from '@tcn/ui/form';
+import { ClearableField } from './clearable_field.js';
 
 export function NumberRangeFieldFilter({
   fieldName,
@@ -21,48 +18,32 @@ export function NumberRangeFieldFilter({
   const maxValue = useSignalValue(presenter.broadcasts.maxValue);
 
   return (
-    <VStack gap="4px">
-      <Box width="flex">
-        <Title size="md">{label}</Title>
-      </Box>
-      <HStack gap="4px">
-        <Box width="auto">
-          <BodyText size="lg">Min</BodyText>
-        </Box>
-        <Box width="flex">
-          <Input
-            type="number"
-            value={String(minValue ?? '')}
-            onChange={value => presenter.setMinValue(Number(value))}
-          />
-        </Box>
-        <Button
-          onClick={() => presenter.setMinValue(null)}
-          hierarchy="tertiary"
-          disabled={minValue == null}
-        >
-          <CrossCircleIcon />
-        </Button>
-      </HStack>
-      <HStack gap="4px">
-        <Box width="auto">
-          <BodyText size="lg">Max</BodyText>
-        </Box>
-        <Box width="flex">
-          <Input
-            type="number"
-            value={String(maxValue ?? '')}
-            onChange={value => presenter.setMaxValue(Number(value))}
-          />
-        </Box>
-        <Button
-          onClick={() => presenter.setMaxValue(null)}
-          hierarchy="tertiary"
-          disabled={maxValue == null}
-        >
-          <CrossCircleIcon />
-        </Button>
-      </HStack>
-    </VStack>
+    <FieldSet legend={label} gap="4px">
+      <ClearableField
+        label="Min"
+        onClear={() => presenter.setMinValue(null)}
+        isClearable={minValue == null}
+        inline
+      >
+        <Input
+          type="number"
+          value={String(minValue ?? '')}
+          onChange={value => presenter.setMinValue(Number(value))}
+        />
+      </ClearableField>
+
+      <ClearableField
+        label="Max"
+        onClear={() => presenter.setMaxValue(null)}
+        isClearable={maxValue == null}
+        inline
+      >
+        <Input
+          type="number"
+          value={String(maxValue ?? '')}
+          onChange={value => presenter.setMaxValue(Number(value))}
+        />
+      </ClearableField>
+    </FieldSet>
   );
 }

package/src/components/table_filter_panel/field_filters/select_field_filter.tsx

@@ -1,14 +1,11 @@
-import React from 'react';
-
-import { CrossCircleIcon } from '@tcn/icons/cross_circle_icon.js';
 import { useSignalValue } from '@tcn/state';
-import { Button } from '@tcn/ui/actions';
 import { Option, Select } from '@tcn/ui/inputs';
 import { Box, HStack, VStack } from '@tcn/ui/stacks';
 import { Title } from '@tcn/ui/typography';
 import { FieldFilterProps } from './field_filter_props.js';
 import { SelectFieldFilterPresenter } from './select_field_filter_presenter.js';
 import { useFieldFilterStrategy } from './use_field_filter_strategy.js';
+import { ClearFilterButton } from './clear_button.js';
 
 export type SelectFieldFilterProps = FieldFilterProps & {
   options: { label: string; value: string | boolean | number }[];
@@ -44,13 +41,10 @@ export function SelectFieldFilter({ fieldName, label, options }: SelectFieldFilt
             </Option>
           ))}
         </Select>
-        <Button
+        <ClearFilterButton
           onClick={() => presenter.setValue(null)}
-          hierarchy="tertiary"
           disabled={value == null}
-        >
-          <CrossCircleIcon />
-        </Button>
+        />
       </HStack>
     </VStack>
   );

package/src/components/table_filter_panel/field_filters/string_field_filter.tsx

@@ -1,15 +1,11 @@
-import { CrossCircleIcon } from '@tcn/icons/cross_circle_icon.js';
 import { useSignalValue } from '@tcn/state';
-import { Button } from '@tcn/ui/actions';
-import { Input, Option, Select } from '@tcn/ui/inputs';
-import { Box, HStack, VStack } from '@tcn/ui/stacks';
-import { Title } from '@tcn/ui/typography';
-import React from 'react';
+import { Input, Option, Select, InputGroup } from '@tcn/ui/inputs';
 import { FieldFilterProps } from './field_filter_props.js';
 import { StringFieldFilterPresenter } from './string_field_filter_presenter.js';
 import { ComparisonOperator } from '../types.js';
 
 import { useFieldFilterStrategy } from './use_field_filter_strategy.js';
+import { ClearableField } from './clearable_field.js';
 
 const allOperators: ('is' | 'isNot' | 'has')[] = ['is', 'isNot', 'has'];
 const operatorSymbols: Record<'is' | 'isNot' | 'has', string> = {
@@ -32,11 +28,12 @@ export function StringFieldFilter({ fieldName, label, operators }: FieldFilterPr
   const availableOperators = operators || allOperators;
 
   return (
-    <VStack gap="4px">
-      <Box width="flex">
-        <Title size="md">{label}</Title>
-      </Box>
-      <HStack width="flex">
+    <ClearableField
+      label={label}
+      onClear={() => presenter.setValue(null)}
+      isClearable={value == null}
+    >
+      <InputGroup>
         <Select
           value={operator}
           onChange={value => presenter.setOperator(value as ComparisonOperator)}
@@ -57,15 +54,7 @@ export function StringFieldFilter({ fieldName, label, operators }: FieldFilterPr
           value={value ?? ''}
           onChange={value => presenter.setValue(value)}
         />
-        <Button
-          onClick={() => presenter.setValue(null)}
-          hierarchy="tertiary"
-          utility
-          disabled={value == null}
-        >
-          <CrossCircleIcon />
-        </Button>
-      </HStack>
-    </VStack>
+      </InputGroup>
+    </ClearableField>
   );
 }

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

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

package/src/components/table_filter_panel/table_filter_panel.tsx

@@ -1,22 +1,51 @@
 import { DataSource } from '@tcn/resource-store';
-import { VStack } from '@tcn/ui/stacks';
-import React, { ReactElement, useState, createContext } from 'react';
+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 { 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 = {
   children: ReactElement<FieldFilterProps>[] | ReactElement<FieldFilterProps>;
   dataSource: DataSource<any>;
+  onClose?: () => void;
 };
 
-export function TableFilterPanel({ children, dataSource }: TableFilterPanelProps) {
+export function TableFilterPanel({
+  children,
+  dataSource,
+  onClose,
+}: TableFilterPanelProps) {
   const [presenter] = useState(() => {
     return new TableFilterPanelPresenter(dataSource);
   });
 
   return (
     <TableFilterPanelContext.Provider value={presenter}>
-      <VStack gap="16px">{children}</VStack>
+      <Panel className={`${styles['table-filter-panel']} tcn-table-filter-panel`}>
+        <Header>
+          Table Filters
+          <Spacer />
+          {onClose && (
+            <Button utility hierarchy="tertiary" onClick={onClose}>
+              <CrossIcon />
+            </Button>
+          )}
+        </Header>
+        <VBody
+          className={`${styles['table-filter-panel-body']} tcn-table-filter-panel-body`}
+        >
+          <Section
+            className={`${styles['table-filter-panel-section']} tcn-table-filter-panel-section`}
+          >
+            {children}
+          </Section>
+        </VBody>
+      </Panel>
     </TableFilterPanelContext.Provider>
   );
 }