@tcn/ui-table 2.3.7 → 2.3.8

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>
   );
 }