fix: filter chip and DataTable.Filters layout

docs/V1-migration.md

@@ -841,6 +841,8 @@ import { Command, Button } from '@raystack/apsara';
 <DataTable mode="server" totalRowCount={1000} columns={columns} data={visibleData} />
 ```
 
+- **`DataTable.Filters` `classNames.container` is no longer supported.** The Filters `classNames` prop now accepts only `filterChips` and `addFilter`. Use the `className` prop on `DataTable.Filters` to style the outer wrapper.
+
 ---
 
 ### Dialog

packages/raystack/components/data-table/components/filters.tsx

@@ -1,13 +1,15 @@
 'use client';
 
-import React, { isValidElement, ReactNode, useMemo } from 'react';
+import { cx } from 'class-variance-authority';
+import { isValidElement, ReactNode, useMemo } from 'react';
 import { FilterIcon } from '~/icons';
 import { FilterOperatorTypes, FilterType } from '~/types/filters';
 import { Button } from '../../button';
 import { FilterChip, type FilterChipValue } from '../../filter-chip';
 import { Flex } from '../../flex';
 import { IconButton } from '../../icon-button';
 import { Menu } from '../../menu';
+import styles from '../data-table.module.css';
 import { DataTableColumn } from '../data-table.types';
 import { useDataTable } from '../hooks/useDataTable';
 import { useFilters } from '../hooks/useFilters';
@@ -45,7 +47,7 @@ function AddFilter<TData, TValue>({
     else if (children) return children;
     else if (appliedFiltersSet.size > 0)
       return (
-        <IconButton size={4}>
+        <IconButton size={3}>
           <FilterIcon />
         </IconButton>
       );
@@ -88,7 +90,6 @@ export function Filters<TData, TValue>({
   trigger
 }: {
   classNames?: {
-    container?: string;
     filterChips?: string;
     addFilter?: string;
   };
@@ -132,34 +133,29 @@ export function Filters<TData, TValue>({
   return (
     <Flex
       gap={3}
-      className={className}
+      align='center'
+      className={cx(styles.filterContainer, className)}
       data-has-filter-chips={appliedFilters.length > 0 || undefined}
     >
-      {appliedFilters.length > 0 && (
-        <Flex gap={3} className={classNames?.container}>
-          {appliedFilters.map(filter => (
-            <FilterChip
-              key={filter.name}
-              label={filter.label}
-              value={filter.value as FilterChipValue}
-              onRemove={() => handleRemoveFilter(filter.name)}
-              onValueChange={value =>
-                handleFilterValueChange(filter.name, value)
-              }
-              onOperationChange={operator =>
-                handleFilterOperationChange(
-                  filter.name,
-                  operator as FilterOperatorTypes
-                )
-              }
-              columnType={filter.filterType}
-              options={filter.options}
-              selectProps={filter.selectProps}
-              className={classNames?.filterChips}
-            />
-          ))}
-        </Flex>
-      )}
+      {appliedFilters?.map(filter => (
+        <FilterChip
+          key={filter.name}
+          label={filter.label}
+          value={filter.value as FilterChipValue}
+          onRemove={() => handleRemoveFilter(filter.name)}
+          onValueChange={value => handleFilterValueChange(filter.name, value)}
+          onOperationChange={operator =>
+            handleFilterOperationChange(
+              filter.name,
+              operator as FilterOperatorTypes
+            )
+          }
+          columnType={filter.filterType}
+          options={filter.options}
+          selectProps={filter.selectProps}
+          className={classNames?.filterChips}
+        />
+      ))}
       <AddFilter
         columnList={columnList}
         appliedFiltersSet={appliedFiltersSet}

packages/raystack/components/data-table/components/toolbar.tsx

@@ -18,7 +18,8 @@ export function Toolbar<TData, TValue>({ className }: { className?: string }) {
     <Flex
       className={cx(styles['toolbar'], className)}
       justify='between'
-      align='center'
+      gap={3}
+      align='start'
     >
       <Filters<TData, TValue> />
       <DisplaySettings />

packages/raystack/components/data-table/data-table.module.css

@@ -1,5 +1,6 @@
 .toolbar {
-  padding: var(--rs-space-3) var(--rs-space-7) var(--rs-space-3) var(--rs-space-5);
+  padding: var(--rs-space-3) var(--rs-space-7) var(--rs-space-3)
+    var(--rs-space-5);
   align-self: stretch;
 
   border-bottom: 0.5px solid var(--rs-color-border-base-primary);
@@ -37,7 +38,7 @@
   min-width: 0;
 }
 
-.display-popover-properties-select>span {
+.display-popover-properties-select > span {
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
@@ -233,4 +234,8 @@
   box-sizing: border-box;
   background: var(--rs-color-background-base-secondary);
   box-shadow: 0 0.5px 0 0 var(--rs-color-border-base-primary);
-}
+}
+
+.filterContainer {
+  flex-wrap: wrap;
+}

packages/raystack/components/filter-chip/filter-chip.module.css

@@ -8,15 +8,17 @@
   border-radius: var(--rs-radius-2);
   text-wrap: nowrap;
   width: fit-content;
+  min-width: min-content;
+  overflow: clip;
 }
 
 .chip-default {
   border: 1px solid var(--rs-color-border-base-tertiary);
-  box-shadow: var(--rs-shadow-feather);
 }
 
 .chip-label {
   padding: 0 var(--rs-space-3);
+  flex-shrink: 0;
 }
 .operationText {
   color: var(--rs-color-foreground-base-secondary);
@@ -26,6 +28,7 @@
   letter-spacing: var(--rs-letter-spacing-small);
   display: flex;
   align-items: center;
+  flex-shrink: 0;
 }
 
 .operationText:hover {
@@ -40,6 +43,7 @@
   background: transparent;
   min-height: unset;
   padding: 0;
+  text-overflow: ellipsis;
 }
 
 /* Control height of Select items */
@@ -54,7 +58,7 @@
   box-shadow: none;
   background: transparent;
   min-height: unset;
-  border-radius: var(--rs-radius-1);
+  border-radius: 0;
   color: var(--rs-color-foreground-base-primary);
   font-weight: var(--rs-font-weight-regular);
   font-size: var(--rs-font-size-small);
@@ -66,11 +70,13 @@
   display: flex;
   align-items: center;
   height: 100%;
-  padding-left: var(--rs-space-3);
-  padding-right: var(--rs-space-3);
+  padding-left: var(--rs-space-2);
+  padding-right: var(--rs-space-2);
   margin: 0;
-  border-top-right-radius: var(--rs-radius-2);
-  border-bottom-right-radius: var(--rs-radius-2);
+  width: var(--rs-space-7);
+  justify-content: center;
+  flex-shrink: 0;
+  cursor: pointer;
 }
 
 .removeIconContainer:hover {
@@ -102,19 +108,18 @@
   min-height: auto;
   padding: var(--rs-space-2) var(--rs-space-3);
   border-radius: 0;
+  min-width: 0;
+  overflow: hidden;
 }
 
 .selectValue * {
   font-weight: var(--rs-font-weight-regular);
+  min-width: 0;
 }
 
 .operationValue {
   color: var(--rs-color-foreground-base-secondary);
-}
-
-.selectColumn {
-  border-top-right-radius: var(--rs-radius-2);
-  border-bottom-right-radius: var(--rs-radius-2);
+  flex-shrink: 0;
 }
 
 button.selectValue:hover {
@@ -132,14 +137,15 @@ button.selectValue:hover {
 }
 
 .inputFieldWrapper {
-  padding: 0 var(--rs-space-2);
-  min-width: 60px;
+  padding: 0;
+  min-width: 0;
+  overflow: hidden;
 }
 
 .inputField {
-  border-radius: var(--rs-radius-1);
-  min-height: 18px;
-  height: 18px;
+  border-radius: 0;
+  min-height: 22px;
+  height: 22px;
   border: none;
   box-shadow: none;
 }
@@ -151,23 +157,24 @@ button.selectValue:hover {
 }
 
 .inputFieldWrapper input {
-  padding-left: var(--rs-space-2);
-  padding-right: var(--rs-space-2);
+  padding-left: var(--rs-space-3);
+  padding-right: var(--rs-space-3);
 }
 
 .dateFieldWrapper {
-  padding: 0 var(--rs-space-2);
-  min-width: var(--rs-space-17);
+  padding: 0;
+  min-width: 0;
+  overflow: hidden;
 }
 
 .dateField {
-  border-radius: var(--rs-radius-1);
+  border-radius: 0;
   display: flex;
   justify-content: space-between;
   align-items: center;
-  width: 100%;
-  height: 18px;
-  min-height: 18px;
+  width: fit-content;
+  height: 22px;
+  min-height: 22px;
   border: none;
   box-shadow: none;
 }
@@ -180,8 +187,8 @@ button.selectValue:hover {
 
 .dateField input {
   text-align: left;
-  padding-left: var(--rs-space-2);
-  padding-right: var(--rs-space-2);
+  padding-left: var(--rs-space-3);
+  padding-right: var(--rs-space-3);
 }
 
 .dateField [data-trailing] {