Fix CheckboxFilter #207, Table mobile headers #210, release workflow

.github/workflows/ci.yml

@@ -85,6 +85,7 @@ jobs:
       - uses: actions/checkout@v4
         with:
           fetch-depth: 0
+          token: ${{ secrets.GH_TOKEN }}
       - uses: actions/setup-node@v4
         with:
           node-version: '20.x'

.github/workflows/release.yml

@@ -1,7 +1,7 @@
 name: Release
 
 on:
-  create:
+  push:
     tags:
       - '*'
 

packages/react-drylus/src/components/Filter.tsx

@@ -367,16 +367,21 @@ function getLabelForCheckboxFilter<T>(
 ) {
   if (values == null) {
     return label;
-  } else if (values.length === 1) {
+  }
+  const optionValues = options
+    .filter((option): option is Option<T> => 'value' in option)
+    .map((option) => String(option.value));
+  const matchedValues = values.filter((v) => optionValues.includes(String(v)));
+  if (matchedValues.length === 1) {
     return options.find((option) => {
       if ('value' in option) {
-        return String(option.value) === String(values[0]);
+        return String(option.value) === String(matchedValues[0]);
       } else {
         return false;
       }
     })?.label;
-  } else if (values.length > 1) {
-    return `${label} (${values.length})`;
+  } else if (matchedValues.length > 1) {
+    return `${label} (${matchedValues.length})`;
   } else {
     return label;
   }
@@ -416,6 +421,19 @@ export const CheckboxFilter = <T extends any>({
 }: CheckboxFilterProps<T>) => {
   const currentLabel = getLabelForCheckboxFilter(label, options, values);
 
+  if (process.env.NODE_ENV !== 'production' && values.length > 0) {
+    const optionValues = options
+      .filter((option): option is Option<T> => 'value' in option)
+      .map((option) => String(option.value));
+    const unmatched = values.filter((v) => !optionValues.includes(String(v)));
+    if (unmatched.length > 0) {
+      console.warn(
+        `CheckboxFilter: values [${unmatched.join(', ')}] do not match any option. ` +
+        `These values will be ignored in the displayed count.`,
+      );
+    }
+  }
+
   const [searchTerm, setSearchTerm] = useState('');
 
   useEffect(() => {
@@ -441,7 +459,7 @@ export const CheckboxFilter = <T extends any>({
     <BaseFilter
       {...rest}
       label={currentLabel != null ? String(currentLabel) : label}
-      active={currentLabel != null && values.length > 0}
+      active={currentLabel != null && currentLabel !== label}
       header={
         enableSearch ? (
           <div className={cx(styles.searchSection)}>

packages/react-drylus/src/components/Table.tsx

@@ -749,14 +749,25 @@ const EmptyTable = ({ columns, emptyContent }: EmptyTableProps) => {
   );
 };
 
+function _extractCellLabel(children: React.ReactNode): string {
+  if (children == null) return '';
+  if (typeof children === 'string' || typeof children === 'number') return String(children);
+  if (Array.isArray(children)) {
+    return children.map(_extractCellLabel).filter(Boolean).join('');
+  }
+  if (React.isValidElement(children) && (children.props as any).children != null) {
+    return _extractCellLabel((children.props as any).children);
+  }
+  return '';
+}
+
 function _addAttributesToCells(
   children?: [React.ReactElement<typeof THead>, React.ReactElement<typeof TBody>],
 ): React.ReactNode {
   if (children == null) return;
   if (children[0]?.type === THead && children[1]?.type === TBody) {
-    // TODO fix .props as any
     const headerValues = (children[0].props as any).children.map(
-      (child: React.ReactElement<typeof TCell>) => (child.props as any).children,
+      (child: React.ReactElement<typeof TCell>) => _extractCellLabel((child.props as any).children),
     );
     const transformedRows: typeof children[1] = React.Children.map(
       (children[1].props as any).children,