@agregio-solutions/design-system 1.102.5 → 2.0.0

package/dist/packages/components/DatePicker/DatePicker.d.ts

@@ -1,7 +1,7 @@
 import { Props as FormGroupWrapperProps } from '../../internal-components/FormGroupWrapper/FormGroupWrapper';
 import { default as React } from 'react';
 import { Props as LabelProps } from '../Label/Label';
-export type Props = Pick<LabelProps, "label" | "labelIconRight" | "labelIconRightTooltip" | "required"> & Pick<FormGroupWrapperProps, "description" | "helperText" | "helperTextIcon" | "errorHelperText" | "errorHelperTextIcon" | "successHelperText" | "successHelperTextIcon" | "warningHelperText" | "warningHelperTextIcon" | "orientation"> & {
+export type Props = Pick<LabelProps, "label" | "labelIconRight" | "labelIconRightTooltip" | "required"> & Pick<FormGroupWrapperProps, "helperText" | "helperTextIcon" | "errorHelperText" | "errorHelperTextIcon" | "successHelperText" | "successHelperTextIcon" | "warningHelperText" | "warningHelperTextIcon" | "orientation"> & {
     /**
      * Required id, used mainly to link the label to the field
      */
@@ -114,7 +114,7 @@ export type Props = Pick<LabelProps, "label" | "labelIconRight" | "labelIconRigh
      */
     fullWidth?: boolean;
 };
-declare const DatePicker: React.ForwardRefExoticComponent<Pick<LabelProps, "label" | "required" | "labelIconRight" | "labelIconRightTooltip"> & Pick<FormGroupWrapperProps, "orientation" | "description" | "helperText" | "helperTextIcon" | "errorHelperText" | "errorHelperTextIcon" | "successHelperText" | "successHelperTextIcon" | "warningHelperText" | "warningHelperTextIcon"> & {
+declare const DatePicker: React.ForwardRefExoticComponent<Pick<LabelProps, "label" | "required" | "labelIconRight" | "labelIconRightTooltip"> & Pick<FormGroupWrapperProps, "orientation" | "helperText" | "helperTextIcon" | "errorHelperText" | "errorHelperTextIcon" | "successHelperText" | "successHelperTextIcon" | "warningHelperText" | "warningHelperTextIcon"> & {
     /**
      * Required id, used mainly to link the label to the field
      */

package/dist/packages/components/DatePicker/doc.md

@@ -28,7 +28,6 @@ const meta: Meta<typeof DatePicker> = {
       options: ["America/New_York", "Europe/Paris"],
     },
     shouldCloseOnSelect: { control: "boolean" },
-    description: { control: "text" },
     helperText: { control: "text" },
     errorHelperText: { control: "text" },
     successHelperText: { control: "text" },

package/dist/packages/components/DateRangePicker/DateRangePicker.d.ts

@@ -5,7 +5,7 @@ export type DatePickerValue = null | {
     start: string;
     end: string;
 };
-export type Props = Pick<LabelProps, "label" | "labelIconRight" | "labelIconRightTooltip" | "required"> & Pick<FormGroupWrapperProps, "description" | "helperText" | "helperTextIcon" | "errorHelperText" | "errorHelperTextIcon" | "successHelperText" | "successHelperTextIcon" | "warningHelperText" | "warningHelperTextIcon" | "orientation"> & {
+export type Props = Pick<LabelProps, "label" | "labelIconRight" | "labelIconRightTooltip" | "required"> & Pick<FormGroupWrapperProps, "helperText" | "helperTextIcon" | "errorHelperText" | "errorHelperTextIcon" | "successHelperText" | "successHelperTextIcon" | "warningHelperText" | "warningHelperTextIcon" | "orientation"> & {
     /**
      * Required id, used mainly to link the label to the field
      */
@@ -114,7 +114,7 @@ export type Props = Pick<LabelProps, "label" | "labelIconRight" | "labelIconRigh
      */
     fullWidth?: boolean;
 };
-declare const DateRangePicker: React.ForwardRefExoticComponent<Pick<LabelProps, "label" | "required" | "labelIconRight" | "labelIconRightTooltip"> & Pick<FormGroupWrapperProps, "orientation" | "description" | "helperText" | "helperTextIcon" | "errorHelperText" | "errorHelperTextIcon" | "successHelperText" | "successHelperTextIcon" | "warningHelperText" | "warningHelperTextIcon"> & {
+declare const DateRangePicker: React.ForwardRefExoticComponent<Pick<LabelProps, "label" | "required" | "labelIconRight" | "labelIconRightTooltip"> & Pick<FormGroupWrapperProps, "orientation" | "helperText" | "helperTextIcon" | "errorHelperText" | "errorHelperTextIcon" | "successHelperText" | "successHelperTextIcon" | "warningHelperText" | "warningHelperTextIcon"> & {
     /**
      * Required id, used mainly to link the label to the field
      */

package/dist/packages/components/DateRangePicker/doc.md

@@ -28,7 +28,6 @@ const meta: Meta<typeof DateRangePicker> = {
       options: ["America/New_York", "Europe/Paris"],
     },
     shouldCloseOnSelect: { control: "boolean" },
-    description: { control: "text" },
     helperText: { control: "text" },
     errorHelperText: { control: "text" },
     successHelperText: { control: "text" },

package/dist/packages/components/Drawer/Drawer.d.ts

@@ -1,4 +1,5 @@
 import { default as React } from 'react';
+import { DrawerActions, DrawerContent, DrawerForm } from './Drawer.styled';
 export interface Props {
     /**
      * Determines if the drawer is open or closed
@@ -13,34 +14,16 @@ export interface Props {
      */
     title: string;
     /**
-     * Content to be rendered inside the drawer
+     * Content to be rendered inside the drawer, below the title.
+     * Compose it with `DrawerContent` (scrollable padded body) and `DrawerActions` (bottom action bar),
+     * wrapped in `DrawerForm` when the drawer holds a form.
      */
     children: React.ReactNode;
     /**
-     * Handler call on click on the primary action button
-     */
-    onPrimaryClick?: () => void;
-    /**
-     * Label for the primary action button
-     */
-    primaryLabel?: string;
-    /**
-     * Handler call on click on the secondary action button
-     */
-    onSecondaryClick?: () => void;
-    /**
-     * Label for the secondary action button
-     */
-    secondaryLabel?: string;
-    /**
-     * Whether the user can close the modal by clicking outside of it or pressing the escape key
+     * Whether the user can close the drawer by clicking outside of it or pressing the escape key
      * @default true
      */
     isDismissable?: boolean;
-    /**
-     * Custom implementation of the bottom action bar (with primary and secondary buttons)
-     * Please ensure there is at least a close button.
-     */
-    customActionsBar?: React.ReactNode;
 }
-export default function Drawer({ children, onPrimaryClick, primaryLabel, onSecondaryClick, secondaryLabel, isOpen, onOpenChange, title, isDismissable, customActionsBar, }: Props): React.JSX.Element;
+export default function Drawer({ children, isOpen, onOpenChange, title, isDismissable, }: Props): React.JSX.Element;
+export { DrawerContent, DrawerActions, DrawerForm };

package/dist/packages/components/Drawer/doc.md

@@ -14,8 +14,8 @@ Base stories:
 
 ```tsx
 import { Meta, StoryObj } from "@storybook/react-vite";
-import Drawer, { Props } from "./Drawer";
-import { screen, fn } from "storybook/test";
+import Drawer, { DrawerActions, DrawerContent, Props } from "./Drawer";
+import { screen, fn, expect } from "storybook/test";
 import { useState } from "react";
 import Button from "@components/Button/Button";
 import {
@@ -35,17 +35,6 @@ const meta: Meta<typeof Drawer> = {
     function ParentComponent(props: Props) {
       const [isOpen, setIsOpen] = useState(props.isOpen);
 
-      // Trick to make the drawer close on button with text "Close" (to avoid generating a lot of render stories)
-      const onPrimaryClick =
-        props.primaryLabel === "Close"
-          ? () => setIsOpen(false)
-          : props.onPrimaryClick;
-
-      const onSecondaryClick =
-        props.secondaryLabel === "Close"
-          ? () => setIsOpen(false)
-          : props.onSecondaryClick;
-
       return (
         <div
           style={{
@@ -55,14 +44,17 @@ const meta: Meta<typeof Drawer> = {
             height: "100vh",
           }}
         >
-          <Drawer
-            {...props}
-            onPrimaryClick={onPrimaryClick}
-            onSecondaryClick={onSecondaryClick}
-            isOpen={isOpen}
-            onOpenChange={setIsOpen}
-          >
-            {props.children}
+          <Drawer {...props} isOpen={isOpen} onOpenChange={setIsOpen}>
+            <DrawerContent>{props.children}</DrawerContent>
+
+            <DrawerActions>
+              <Button
+                onClick={() => setIsOpen(false)}
+                text="Close"
+                mode="secondary"
+              />
+              <Button onClick={() => setIsOpen(false)} text="Apply" />
+            </DrawerActions>
           </Drawer>
 
           <div style={{ textAlign: "center" }}>
@@ -85,29 +77,31 @@ export const Playground: StoryObj<typeof Drawer> = {
     title: "[Insert drawer title]",
     children: <div>The content</div>,
     isOpen: true,
-    primaryLabel: "Close",
-    onPrimaryClick: fn(),
-    onSecondaryClick: fn(),
     onOpenChange: fn(),
   },
   play: async ({ args }) => {
     await screen.findByText(args.title);
     await screen.findByText("The content");
     await screen.findByText("Close");
+    await screen.findByText("Apply");
     await screen.findByLabelText("Close");
-    await expectNotPresent(() => screen.queryByText("Submit"));
   },
 };
 
-export const WithSecondaryAction: StoryObj<typeof Drawer> = {
+export const WithoutActions: StoryObj<typeof Drawer> = {
   args: {
     ...Playground.args,
-    primaryLabel: "Send",
-    secondaryLabel: "Close",
   },
-  play: async () => {
-    await screen.findByText("Send");
-    await screen.findByText("Close");
+  render: (args) => (
+    <Drawer {...args}>
+      <DrawerContent>{args.children}</DrawerContent>
+    </Drawer>
+  ),
+  play: async ({ args }) => {
+    const drawer = await screen.findByRole("dialog", { name: args.title });
+    await screen.findByText("The content");
+    await expectNotPresent(() => screen.queryByText("Apply"));
+    await expect(drawer.querySelector("footer")).toBeNull();
   },
 };
 
@@ -116,6 +110,10 @@ export const OverflowingContent: StoryObj<typeof Drawer> = {
     ...Playground.args,
     children: "The content. ".repeat(300),
   },
+  play: async ({ args }) => {
+    await screen.findByText(args.title);
+    await screen.findByText("Apply");
+  },
 };
 
 export const Mobile: StoryObj<typeof Drawer> = {
@@ -130,17 +128,9 @@ export const Mobile: StoryObj<typeof Drawer> = {
     ...Playground.args,
     children: "The content. ".repeat(300),
   },
-};
-
-export const WithCustomActionsBar: StoryObj<typeof Drawer> = {
-  args: {
-    ...Playground.args,
-    customActionsBar: (
-      <>
-        <Button text="Close" mode="secondary" />
-        <Button text="Validate" isLoading />
-      </>
-    ),
+  play: async ({ args }) => {
+    await screen.findByText(args.title);
+    await screen.findByText("Apply");
   },
 };
 ```
@@ -151,12 +141,12 @@ Here are some more advanced stories with more testing coverage and examples that
 
 ```tsx
 import { Meta, StoryObj } from "@storybook/react-vite";
-import Drawer from "../Drawer";
-import { userEvent, within, screen, expect } from "storybook/test";
+import Drawer, { DrawerActions, DrawerContent, DrawerForm } from "../Drawer";
+import { userEvent, within, screen, expect, fn } from "storybook/test";
 import { useState } from "react";
 import Button from "@components/Button/Button";
 import { expectNotPresent } from "@internal/test-utils-storybook/test-utils-storybook";
-import { Playground, WithSecondaryAction } from "../Drawer.stories";
+import { Playground } from "../Drawer.stories";
 import baseMeta from "../Drawer.stories";
 import { useForm } from "react-hook-form";
 import TextInput from "@packages/components/TextInput/TextInput";
@@ -203,21 +193,6 @@ export const TestFooterCloseButtonShouldCloseDrawer: StoryObj<typeof Drawer> = {
   },
 };
 
-export const TestShouldShowASecondaryButtonIfGiven: StoryObj<typeof Drawer> = {
-  args: {
-    ...WithSecondaryAction.args,
-    secondaryLabel: "Dismiss",
-  },
-  play: async ({ args }) => {
-    const user = userEvent.setup({ delay: 50 });
-    await screen.findByText(args.title);
-    await user.click(screen.getByText("Send"));
-    await expect(args.onPrimaryClick).toHaveBeenCalledTimes(1);
-    await user.click(screen.getByText("Dismiss"));
-    await expect(args.onSecondaryClick).toHaveBeenCalledTimes(1);
-  },
-};
-
 export const ExampleUsage: StoryObj<typeof Drawer> = {
   render: () => {
     function ParentComponent() {
@@ -228,14 +203,16 @@ export const ExampleUsage: StoryObj<typeof Drawer> = {
           <div>
             <Button onClick={() => setIsOpen(true)} text="Open drawer" />
           </div>
-          <Drawer
-            isOpen={isOpen}
-            onOpenChange={setIsOpen}
-            title="Drawer title"
-            primaryLabel="Close"
-            onPrimaryClick={() => setIsOpen(false)}
-          >
-            <div>Drawer content</div>
+          <Drawer isOpen={isOpen} onOpenChange={setIsOpen} title="Drawer title">
+            <DrawerContent>Drawer content</DrawerContent>
+            <DrawerActions>
+              <Button
+                onClick={() => setIsOpen(false)}
+                text="Close"
+                mode="secondary"
+              />
+              <Button onClick={() => setIsOpen(false)} text="Apply" />
+            </DrawerActions>
           </Drawer>
         </div>
       );
@@ -245,24 +222,46 @@ export const ExampleUsage: StoryObj<typeof Drawer> = {
   },
 };
 
+type UserForm = {
+  name: string;
+  email: string;
+};
+
+type UserFormProps = {
+  onClose: () => void;
+  onSubmit: (values: UserForm) => Promise<void> | void;
+};
+
+function CreateUserForm({ onClose, onSubmit }: UserFormProps) {
+  const form = useForm<UserForm>();
+
+  return (
+    <DrawerForm onSubmit={form.handleSubmit(onSubmit)} noValidate>
+      <DrawerContent>
+        <TextInput
+          {...form.register("name", { required: "Name is required" })}
+          id="name"
+          label="Name"
+          errorHelperText={form.formState.errors.name?.message}
+        />
+        <TextInput {...form.register("email")} id="email" label="Email" />
+      </DrawerContent>
+      <DrawerActions>
+        <Button onClick={onClose} text="Close" mode="secondary" />
+        <Button
+          type="submit"
+          text="Create user"
+          isLoading={form.formState.isSubmitting}
+        />
+      </DrawerActions>
+    </DrawerForm>
+  );
+}
+
 export const ExampleWithReactHookForm: StoryObj<typeof Drawer> = {
   render: () => {
-    type Form = {
-      name: string;
-      email: string;
-    };
-
     function ParentComponent() {
       const [isOpen, setIsOpen] = useState(false);
-      const form = useForm<Form>();
-
-      const onSubmit = form.handleSubmit(async (data: Form) => {
-        // API call for example
-        console.log(data); // eslint-disable-line no-console
-        await new Promise((resolve) => setTimeout(resolve, 250));
-        form.reset();
-        setIsOpen(false);
-      });
 
       return (
         <>
@@ -275,31 +274,16 @@ export const ExampleWithReactHookForm: StoryObj<typeof Drawer> = {
             isOpen={isOpen}
             onOpenChange={setIsOpen}
             title="Creating a new user"
-            customActionsBar={
-              <>
-                <Button
-                  onClick={() => setIsOpen(false)}
-                  text="Close"
-                  mode="secondary"
-                />
-                <Button
-                  type="submit"
-                  form="create-user-form" // <- link the form to the button (by the form id)
-                  text="Create user"
-                  isLoading={form.formState.isSubmitting}
-                />
-              </>
-            }
           >
-            <form id="create-user-form" onSubmit={onSubmit} noValidate>
-              <TextInput
-                {...form.register("name", { required: "Name is required" })}
-                id="name"
-                label="Name"
-                errorHelperText={form.formState.errors.name?.message}
-              />
-              <TextInput {...form.register("email")} id="email" label="Email" />
-            </form>
+            <CreateUserForm
+              onClose={() => setIsOpen(false)}
+              onSubmit={async (values) => {
+                // API call for example
+                console.log(values); // eslint-disable-line no-console
+                await new Promise((resolve) => setTimeout(resolve, 250));
+                setIsOpen(false);
+              }}
+            />
           </Drawer>
         </>
       );
@@ -308,6 +292,52 @@ export const ExampleWithReactHookForm: StoryObj<typeof Drawer> = {
     return <ParentComponent />;
   },
 };
+
+const onSubmitUser = fn();
+
+export const TestFormShouldSubmitOnEnterFromAField: StoryObj<typeof Drawer> = {
+  args: {
+    ...Playground.args,
+  },
+  render: (args) => (
+    <Drawer {...args}>
+      <CreateUserForm onClose={() => {}} onSubmit={onSubmitUser} />
+    </Drawer>
+  ),
+  beforeEach: () => {
+    onSubmitUser.mockClear();
+  },
+  play: async () => {
+    const user = userEvent.setup({ delay: 50 });
+    await user.type(await screen.findByLabelText("Name"), "Jane{Enter}");
+    await expect(onSubmitUser).toHaveBeenCalledTimes(1);
+    await expect(onSubmitUser.mock.calls[0][0]).toMatchObject({
+      name: "Jane",
+    });
+  },
+};
+
+export const TestFormShouldShowErrorsWhenSubmittedInvalid: StoryObj<
+  typeof Drawer
+> = {
+  args: {
+    ...Playground.args,
+  },
+  render: (args) => (
+    <Drawer {...args}>
+      <CreateUserForm onClose={() => {}} onSubmit={onSubmitUser} />
+    </Drawer>
+  ),
+  beforeEach: () => {
+    onSubmitUser.mockClear();
+  },
+  play: async () => {
+    const user = userEvent.setup({ delay: 50 });
+    await user.click(await screen.findByText("Create user"));
+    await screen.findByText("Name is required");
+    await expect(onSubmitUser).not.toHaveBeenCalled();
+  },
+};
 ```
 
 ## Developer notes

package/dist/packages/components/Dropdown/Dropdown.d.ts

@@ -1,13 +1,7 @@
 import { default as React } from 'react';
-import { Props as DropdownListItemProps } from './components/DropdownListItem/DropdownListItem';
 export type Props = {
     /**
-     * The items to display in the dropdown. Same props as `DropdownListItem`.
-     * @deprecated use `children` instead
-     */
-    items?: Array<DropdownListItemProps>;
-    /**
-     * Render you items manually if you prefer to use composition instead of props.
+     * The `DropdownListItem` components to display in the dropdown.
      */
     children?: React.ReactNode;
     /**

package/dist/packages/components/Dropdown/doc.md

@@ -31,7 +31,6 @@ const meta: Meta<typeof Dropdown> = {
   },
   argTypes: {
     children: { control: false },
-    items: { control: false },
   },
 };
 export default meta;
@@ -143,29 +142,6 @@ export const WithControlledSelectedItem: StoryObj<typeof Dropdown> = {
     );
   },
 };
-
-export const WithDeprecatedItemsProp: StoryObj<typeof Dropdown> = {
-  args: {
-    items: generateItems(5),
-    style: {
-      width: 315,
-    },
-  },
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    await canvas.findByText("Item 1");
-    await canvas.findByText("Item 2");
-    await canvas.findByText("Item 3");
-    await expect(canvas.queryByText("Item 4")?.parentElement).toHaveAttribute(
-      "data-selected",
-      "true",
-    );
-    await expect(canvas.queryByText("Item 5")?.parentElement).toHaveAttribute(
-      "data-disabled",
-      "true",
-    );
-  },
-};
 ```
 
 ## Developer notes
@@ -186,10 +162,7 @@ The dropdown is a simple component that allows you to create a dropdown menu.
 
 This component **does not handle it's absolute positioning**, you need to do it yourself with whatever method or lib you prefer.
 
-There is two ways of using this component:
-
-- ✅ **Recommended:** pass a list of `DropdownListItem` components as `children`
-- ⚠️ **Deprecated:** pass an array of `items` which values are the same as [DropdownListItem](?path=/docs/components-dropdown-components-dropdownlistitem--docs) props. (this prop may be removed in a future version)
+Pass a list of [DropdownListItem](?path=/docs/components-dropdown-components-dropdownlistitem--docs) components as `children`.
 
 <Canvas of={Dropdown.Default} />
 
@@ -197,7 +170,7 @@ There is two ways of using this component:
 
 <Controls of={Dropdown.Default} />
 
-### Dropdown `items` keys (for reference)
+### DropdownListItem props
 
 <Controls of={DropdownListItem.Default} />
 

package/dist/packages/components/FileUpload/doc.md

@@ -42,7 +42,6 @@ export const Playground: Story = {
     formGroupWrapperProps: {
       htmlForId: "file-upload",
       label: "[Insert label]",
-      description: "[Insert description]",
       errorHelperText: "[Insert helper]",
       errorHelperTextIcon: "error_outline",
       required: true,
@@ -77,7 +76,6 @@ export const Playground: Story = {
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
     await canvas.findByText("[Insert label]");
-    await canvas.findByText("[Insert description]");
     await canvas.findByText("[Insert helper]");
     await canvas.findByText("[Filename.exe]");
     await canvas.findByText("test 2.txt");

package/dist/packages/components/Filter/Filter.d.ts

@@ -1,10 +1,24 @@
 import { default as React } from 'react';
-import { Column, Table } from '@tanstack/react-table';
-type Props<TData> = {
+import { Column, ReactTable, RowData, Table_ColumnFiltering, Table_GlobalFiltering, TableFeatures, TableState_All } from '@tanstack/react-table';
+/**
+ * Since `react-table` v9, an API only exists on the instance when its feature is
+ * registered through `tableFeatures()`. `Filter` reads the filtering APIs
+ * optionally so a table without them still renders.
+ */
+type OptionalFilteringApi<TFeatures extends TableFeatures, TData extends RowData> = 
+/** Requires `columnFilteringFeature`. */
+Partial<Pick<Table_ColumnFiltering, "resetColumnFilters">> & 
+/** Requires `globalFilteringFeature`. */
+Partial<Pick<Table_GlobalFiltering<TFeatures, TData>, "setGlobalFilter">>;
+type Props<TFeatures extends TableFeatures, TData extends RowData> = {
     /**
-     * Table instance from react-table
+     * Table instance from react-table.
+     * Call `useTable` without a state selector: `table.state` only holds the
+     * slices the selector keeps, and this component reads `globalFilter`.
      */
-    table: Table<TData>;
+    table: ReactTable<TFeatures, TData> & OptionalFilteringApi<TFeatures, TData> & {
+        state: TableState_All;
+    };
     /**
      * Aria label for the filter input
      */
@@ -36,12 +50,12 @@ type Props<TData> = {
      */
     divProps?: React.HTMLProps<HTMLDivElement>;
 };
-export type TypeTableColumnWithFilter<TData> = {
+export type TypeTableColumnWithFilter<TFeatures extends TableFeatures, TData extends RowData> = {
     /**
      * Filter form component that will be rendered in the drawer
      */
-    FilterInDrawer?: ({ column }: {
-        column: Column<TData>;
+    FilterInDrawer?: ({ column, }: {
+        column: Column<TFeatures, TData, unknown>;
     }) => React.ReactNode;
     /**
      * If true, the automatic filter chips will not be displayed (even if there is active filters for this column)
@@ -52,12 +66,12 @@ export type TypeTableColumnWithFilter<TData> = {
      * use it if you really need to manipulate the display of the chips
      * or if you have complexe data objects that cannont be automatically transformed into Chips by the Filter component
      */
-    filterChips?: ({ column }: {
-        column: Column<TData>;
+    filterChips?: ({ column, }: {
+        column: Column<TFeatures, TData, unknown>;
     }) => Array<{
         value: string;
         onClose: () => void;
     }>;
 };
-export default function Filter<TData>({ extraLeftContent, extraRightContent, divProps, onDownloadClick: onDownload, onSettingsClick: onSettings, table, searchAriaLabel, searchPlaceholder, }: Props<TData>): React.JSX.Element;
+export default function Filter<TFeatures extends TableFeatures, TData extends RowData>({ extraLeftContent, extraRightContent, divProps, onDownloadClick: onDownload, onSettingsClick: onSettings, table, searchAriaLabel, searchPlaceholder, }: Props<TFeatures, TData>): React.JSX.Element;
 export {};

package/dist/packages/components/Filter/doc.md

@@ -163,10 +163,21 @@ To enable the search bar, when creating your `table` instance with `react-table`
 
 To remove it, simply do not set it (or set it to `undefined`).
 
+Since `react-table` v9, the `globalFilteringFeature` also has to be registered in
+`tableFeatures()`, otherwise the `globalFilter` state does not exist.
+
 Code example to **enable** the search bar:
 
 ```
-const table = useReactTable({
+const features = tableFeatures({
+  globalFilteringFeature, // <- Without it, there is no globalFilter state
+  columnFilteringFeature,
+  filterFns: { includesString: filterFn_includesString }, // Only the built-ins you use
+  filteredRowModel: createFilteredRowModel(),
+});
+
+const table = useTable({
+  features,
   data,
   columns,
   initialState: {
@@ -181,6 +192,25 @@ As you can see in the source code for the example story, adding a filter into th
 
 Please use the exported type `TypeTableColumnWithFilter` to benefit from the type-safety and autocompletion features of your IDE.
 
+Since `react-table` v9, declare it through module augmentation so that every column
+definition gets it, and so that `column` is correctly typed inside `FilterInDrawer`
+and `filterChips`:
+
+```
+declare module "@tanstack/react-table" {
+  interface ColumnMeta<
+    TFeatures extends TableFeatures,
+    TData extends RowData,
+    TValue,
+  > extends TypeTableColumnWithFilter<TFeatures, TData> {}
+}
+```
+
+v9 also offers a per-table `columnMeta` slot (`metaHelper<MyMeta>()` inside
+`tableFeatures()`), but it cannot carry `TypeTableColumnWithFilter`: the type needs
+`typeof features`, which would reference the features object inside its own
+initializer.
+
 Here are the available keys for the `meta` object with filter abilities:
 
 - `FilterInDrawer`: function that must return a React node, typically the form to filter the column entry (like a Select, Radios, etc.)

package/dist/packages/components/Modal/doc.md

@@ -105,7 +105,7 @@ Here are some more advanced stories with more testing coverage and examples that
 
 ```tsx
 import { Meta, StoryObj } from "@storybook/react-vite";
-import Modal, { ModalActions, ModalContent } from "../Modal";
+import Modal, { ModalActions, ModalContent, ModalForm } from "../Modal";
 import { userEvent, within, screen } from "storybook/test";
 import { useState } from "react";
 import Button from "@components/Button/Button";
@@ -114,7 +114,6 @@ import { Playground } from "../Modal.stories";
 import baseMeta from "../Modal.stories";
 import { useForm } from "react-hook-form";
 import TextInput from "@components/TextInput/TextInput";
-import { ModalForm } from "../Modal.styled";
 
 const meta: Meta<typeof Modal> = {
   component: Modal,