@tcn/ui-table 2.4.0 → 2.4.2

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

@@ -1,11 +1,10 @@
 import { useSignalValue } from '@tcn/state';
 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';
+import { ClearableField } from './clearable_field.js';
+import styles from './mulit_select_field_filter.module.css';
 
 export type MulitSelectFieldFilterProps = FieldFilterProps & {
   options: { label: string; value: string | boolean | number }[];
@@ -25,38 +24,28 @@ export function MulitSelectFieldFilter({
       .filter(Boolean) ?? [];
 
   return (
-    <VStack gap="4px">
-      <Box width="flex">
-        <Title size="md">{label}</Title>
-      </Box>
-      <HStack>
-        <Box width="flex">
-          <Multiselect
-            value={selectedLabels}
-            onChange={selectedLabels => {
-              const realValues = selectedLabels
-                .map(label => options.find(option => option.label === label)?.value)
-                .filter(value => value !== undefined) as (string | boolean | number)[];
+    <ClearableField
+      label={label}
+      onClear={() => presenter.setValue(null)}
+      isClearable={values == null || values.length === 0}
+      className={styles['multiselect-filter']}
+    >
+      <Multiselect
+        value={selectedLabels}
+        onChange={selectedLabels => {
+          const realValues = selectedLabels
+            .map(label => options.find(option => option.label === label)?.value)
+            .filter(value => value !== undefined) as (string | boolean | number)[];
 
-              presenter.setValue(realValues.length > 0 ? realValues : null);
-            }}
-          >
-            {options.map(option => (
-              <Option
-                key={option.value.toString()}
-                value={option.label}
-                label={option.label}
-              >
-                {option.label}
-              </Option>
-            ))}
-          </Multiselect>
-        </Box>
-        <ClearFilterButton
-          onClick={() => presenter.setValue(null)}
-          disabled={values == null || values.length === 0}
-        />
-      </HStack>
-    </VStack>
+          presenter.setValue(realValues.length > 0 ? realValues : null);
+        }}
+      >
+        {options.map(option => (
+          <Option key={option.value.toString()} value={option.label} label={option.label}>
+            {option.label}
+          </Option>
+        ))}
+      </Multiselect>
+    </ClearableField>
   );
 }

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

@@ -1,11 +1,9 @@
 import { useSignalValue } from '@tcn/state';
 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';
+import { ClearableField } from './clearable_field.js';
 
 export type SelectFieldFilterProps = FieldFilterProps & {
   options: { label: string; value: string | boolean | number }[];
@@ -18,34 +16,25 @@ export function SelectFieldFilter({ fieldName, label, options }: SelectFieldFilt
   const valueLabel = options.find(option => option.value === value)?.label ?? '';
 
   return (
-    <VStack gap="4px">
-      <Box width="flex">
-        <Title size="md">{label}</Title>
-      </Box>
-      <HStack>
-        <Select
-          value={valueLabel}
-          onChange={value => {
-            const realValue = options.find(option => option.label === value)?.value;
-            presenter.setValue(realValue ?? null);
-          }}
-          width="flex"
-        >
-          {options.map(option => (
-            <Option
-              key={option.value.toString()}
-              value={option.label}
-              label={option.label}
-            >
-              {option.label}
-            </Option>
-          ))}
-        </Select>
-        <ClearFilterButton
-          onClick={() => presenter.setValue(null)}
-          disabled={value == null}
-        />
-      </HStack>
-    </VStack>
+    <ClearableField
+      label={label}
+      onClear={() => presenter.setValue(null)}
+      isClearable={value == null}
+    >
+      <Select
+        value={valueLabel}
+        onChange={value => {
+          const realValue = options.find(option => option.label === value)?.value;
+          presenter.setValue(realValue ?? null);
+        }}
+        width="flex"
+      >
+        {options.map(option => (
+          <Option key={option.value.toString()} value={option.label} label={option.label}>
+            {option.label}
+          </Option>
+        ))}
+      </Select>
+    </ClearableField>
   );
 }

package/src/components/table_filter_panel/table_filter_panel.tsx

@@ -3,7 +3,7 @@ import { ReactElement, useState, createContext } from 'react';
 import { FieldFilterProps } from './field_filters/field_filter_props.js';
 import { TableFilterPanelPresenter } from './table_filter_panel_presenter.js';
 import { Aside, type PanelProps } from '@tcn/ui/surfaces';
-import { Body, Header, Scaffold, Section } from '@tcn/ui/layouts';
+import { Header, Scaffold, Section } from '@tcn/ui/layouts';
 import styles from './table_filter_panel.module.css';
 import { Spacer } from '@tcn/ui/stacks';
 import { Button } from '@tcn/ui/actions';
@@ -41,17 +41,15 @@ export function TableFilterPanel({
             </Button>
           )}
         </Header>
-        <Body
+        <Scaffold
           className={`${styles['table-filter-panel-body']} tcn-table-filter-panel-body`}
         >
-          <Scaffold>
-            <Section
-              className={`${styles['table-filter-panel-section']} tcn-table-filter-panel-section`}
-            >
-              {children}
-            </Section>
-          </Scaffold>
-        </Body>
+          <Section
+            className={`${styles['table-filter-panel-section']} tcn-table-filter-panel-section`}
+          >
+            {children}
+          </Section>
+        </Scaffold>
       </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"]
+}