@agregio-solutions/design-system 1.102.6 → 2.0.0

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

@@ -438,6 +438,31 @@ export const LinkWithTarget: StoryObj<typeof Button> = {
   },
 };
 
+export const ShouldFindTheDisabledButtonByItsText: StoryObj<typeof Button> = {
+  args: {
+    ...Playground.args,
+    disabled: true,
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await expect(canvas.getByText("[Insert name]")).toBeDisabled();
+  },
+};
+
+export const ShouldFindTheLoadingButtonByItsText: StoryObj<typeof Button> = {
+  args: {
+    ...Playground.args,
+    isLoading: true,
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await expect(canvas.getByText("[Insert name]")).toHaveAttribute(
+      "aria-disabled",
+      "true",
+    );
+  },
+};
+
 export const LoadingKeepsTheButtonFocusable: StoryObj<typeof Button> = {
   args: {
     ...Playground.args,
@@ -480,6 +505,8 @@ export const LoadingLinkIsDisabled: StoryObj<typeof Button> = {
 };
 
 const HOLD_DURATION = 300;
+// How the browser serializes the "transparent" keyword in a computed style
+const TRANSPARENT = "rgba(0, 0, 0, 0)";
 
 // `userEvent.pointer` does not drive React Aria's press events here, so we
 // dispatch the pointer events ourselves to press without releasing.
@@ -526,7 +553,9 @@ export const HoldReleasedTooEarly: StoryObj<typeof Button> = {
 
     await pressWithoutReleasing(button);
     await someTime(HOLD_DURATION / 3);
-    await expect(canvas.getByText("[Insert name]")).not.toBeVisible();
+    await expect(getComputedStyle(button).webkitTextFillColor).toBe(
+      TRANSPARENT,
+    );
     // The progress must be in the accessibility tree while the label is hidden
     await expect(
       canvas.getByRole("progressbar", { name: "Keep holding to confirm" }),
@@ -535,7 +564,9 @@ export const HoldReleasedTooEarly: StoryObj<typeof Button> = {
     await release(button);
     await someTime(HOLD_DURATION * 2);
     await expect(args.onClick).not.toHaveBeenCalled();
-    await expect(canvas.getByText("[Insert name]")).toBeVisible();
+    await expect(getComputedStyle(button).webkitTextFillColor).not.toBe(
+      TRANSPARENT,
+    );
     await expect(canvas.queryByRole("progressbar")).not.toBeInTheDocument();
   },
 };

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

@@ -3,7 +3,7 @@ import { Props as FormGroupWrapperProps } from '../../internal-components/FormGr
 import { Props as SelectItemProps } from '../SelectItem/SelectItem';
 import { Props as LabelProps } from '../Label/Label';
 export type ComboboxItem = SelectItemProps;
-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.
      */
@@ -91,7 +91,7 @@ export type Props = Pick<LabelProps, "label" | "labelIconRight" | "labelIconRigh
      */
     triggerContentRight?: React.ReactNode;
 };
-declare const Combobox: React.ForwardRefExoticComponent<Pick<LabelProps, "label" | "required" | "labelIconRight" | "labelIconRightTooltip"> & Pick<FormGroupWrapperProps, "orientation" | "description" | "helperText" | "helperTextIcon" | "errorHelperText" | "errorHelperTextIcon" | "successHelperText" | "successHelperTextIcon" | "warningHelperText" | "warningHelperTextIcon"> & {
+declare const Combobox: 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/Combobox/doc.md

@@ -23,7 +23,6 @@ const meta: Meta<typeof Combobox> = {
   argTypes: {
     helperText: { control: { type: "text" } },
     label: { control: { type: "text" } },
-    description: { control: { type: "text" } },
     errorHelperText: { control: { type: "text" } },
     successHelperText: { control: { type: "text" } },
     items: { control: false },
@@ -60,7 +59,6 @@ export const Playground: StoryObj<typeof Combobox> = {
     labelIconRight: "help_outline",
     labelIconRightTooltip: "Additional information",
     required: true,
-    description: "[Insert description]",
     helperText: "[Insert helper]",
     helperTextIcon: "help_outline",
     fullWidth: true,
@@ -72,7 +70,6 @@ export const Playground: StoryObj<typeof Combobox> = {
     const canvas = within(canvasElement);
     await canvas.findByTitle("Required");
     await canvas.findByText("[Insert label]");
-    await canvas.findByText("[Insert description]");
     await canvas.findByText("[Insert helper]");
   },
 };
@@ -142,7 +139,6 @@ export const WithWarning: StoryObj<typeof Combobox> = {
 export const Horizontal: StoryObj<typeof Combobox> = {
   args: {
     ...Playground.args,
-    description: undefined,
     orientation: "horizontal",
     wrapperProps: undefined,
     fullWidth: false,

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

@@ -1,6 +1,8 @@
 import { default as React } from 'react';
-import { PaginationState, Row, Table } from '@tanstack/react-table';
-type Props<TData> = {
+import { PaginationState, ReactTable, Row, RowData, Table_RowPagination, TableFeatures, TableState_All } from '@tanstack/react-table';
+/** Requires `rowPaginationFeature`. */
+type OptionalPaginationApi<TFeatures extends TableFeatures, TData extends RowData> = Partial<Pick<Table_RowPagination<TFeatures, TData>, "getRowCount" | "setPageIndex" | "setPageSize">>;
+type Props<TFeatures extends TableFeatures, TData extends RowData> = {
     /**
      * The CSS className for the element.
      */
@@ -10,18 +12,25 @@ type Props<TData> = {
      */
     style?: React.CSSProperties;
     /**
-     * The table instance given by `react-table`.
+     * The table instance given by `react-table` `useTable`.
+     * The pagination and filtering APIs are read when the table registers their
+     * feature, and ignored otherwise.
+     * Call `useTable` without a state selector: `table.state` only holds the
+     * slices the selector keeps, and this component reads the filtering ones.
      */
-    table: Table<TData>;
+    table: ReactTable<TFeatures, TData> & OptionalPaginationApi<TFeatures, TData> & {
+        state: TableState_All;
+    };
     /**
      * The pagination state given by `react-table`.
+     * Requires the table to register `rowPaginationFeature`.
      */
     pagination?: PaginationState;
     /**
      * The function to render the sub component custom UI.
      */
     renderSubComponent?: (props: {
-        row: Row<TData>;
+        row: Row<TFeatures, TData>;
     }) => React.ReactNode;
     /**
      * The list of available page sizes.
@@ -33,5 +42,5 @@ type Props<TData> = {
      */
     size?: "small" | "default" | "large";
 };
-export default function DataTable<TData>({ table, pagination, renderSubComponent, itemsPerPageOptions, size, ...divProps }: Props<TData>): React.JSX.Element;
+export default function DataTable<TFeatures extends TableFeatures, TData extends RowData>({ table, pagination, renderSubComponent, itemsPerPageOptions, size, ...divProps }: Props<TFeatures, TData>): React.JSX.Element;
 export {};

package/dist/packages/components/DataTable/DataTableRow/DataTableRow.d.ts

@@ -1,10 +1,5 @@
 import { default as React } from 'react';
 export type Props = {
-    /**
-     * The level of the row, mainly to change its background color. Defaults to "root".
-     * @deprecated sub rows styling are now handled internally
-     */
-    depth?: number;
     /**
      * The CSS className for the element.
      */
@@ -15,4 +10,4 @@ export type Props = {
     style?: React.CSSProperties;
     children?: React.ReactNode;
 };
-export default function DataTableRow({ children, depth, ...otherProps }: Props): React.JSX.Element;
+export default function DataTableRow({ children, ...otherProps }: Props): React.JSX.Element;