@agregio-solutions/design-system 1.102.6 → 2.0.0

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

@@ -32,7 +32,8 @@ export type Props = {
     initialIsCollapsed?: boolean;
     /**
      * The current path of the navigation (from the router).
-     * @experimental This feature is currently experimental and may change in the future.
+     * Drives the active state of every `NavigationItem`: an item is active when the current path
+     * starts with its `href` (`/` is matched exactly), a dropdown when one of its sub links is.
      */
     currentPath?: string;
     /**

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

@@ -17,7 +17,7 @@ import { Meta, StoryObj } from "@storybook/react-vite";
 import Navigation from "./Navigation";
 import NavigationItem from "../NavigationItem/NavigationItem";
 import { I18nProvider } from "react-aria-components";
-import { fn } from "storybook/test";
+import { expect, fn, within } from "storybook/test";
 
 const meta: Meta<typeof Navigation> = {
   component: Navigation,
@@ -42,6 +42,7 @@ type Story = StoryObj<typeof meta>;
 export const Playground: Story = {
   args: {
     logo: "agregio",
+    currentPath: "/item-3",
     onParametersClick: fn(),
     onLogoutClick: fn(),
     children: (
@@ -57,12 +58,7 @@ export const Playground: Story = {
           ]}
         />
 
-        <NavigationItem
-          label="Item 3"
-          href="/item-3"
-          iconLeft="bolt"
-          isActive
-        />
+        <NavigationItem label="Item 3" href="/item-3" iconLeft="bolt" />
       </>
     ),
   },
@@ -100,20 +96,29 @@ export const InitialCollapsed: Story = {
 export const WithSubItemActive: Story = {
   args: {
     ...Playground.args,
+    currentPath: "/item-2-2",
     children: (
       <>
         <NavigationItem
           label="Item 1"
           iconLeft="business"
-          defaultOpen
           subLinks={[
             { href: "/item-2-1", label: "Item 1.1" },
-            { href: "/item-2-2", label: "Item 1.2", isActive: true },
+            { href: "/item-2-2", label: "Item 1.2" },
           ]}
         />
       </>
     ),
   },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await expect(
+      await canvas.findByRole("link", { name: "Item 1.2" }),
+    ).toHaveAttribute("data-active", "true");
+    await expect(
+      canvas.getByRole("link", { name: "Item 1.1" }),
+    ).toHaveAttribute("data-active", "false");
+  },
 };
 
 export const LotsOfItems: Story = {

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

@@ -21,6 +21,7 @@ export type Props = {
     /**
      * Whether the navigation item is active (meaning it's the current page).
      * Only used if the navigation item is a link (has an href).
+     * @deprecated Pass `currentPath` to `Navigation` instead. Will be removed in V3.
      */
     isActive?: boolean;
     /**
@@ -30,6 +31,9 @@ export type Props = {
     subLinks?: Array<{
         href: string;
         label: string;
+        /**
+         * @deprecated Pass `currentPath` to `Navigation` instead. Will be removed in V3.
+         */
         isActive?: boolean;
         /**
          * The component to wrap the sub link in.

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

@@ -60,9 +60,15 @@ export const Link: Story = {
 };
 
 export const ActiveLink: Story = {
+  decorators: [
+    (Story) => (
+      <NavigationProvider currentPath="/some-url">
+        <Story />
+      </NavigationProvider>
+    ),
+  ],
   args: {
     ...Link.args,
-    isActive: true,
   },
   play: async ({ canvasElement, args }) => {
     const canvas = within(canvasElement);
@@ -135,14 +141,20 @@ export const LinkCollapsed: Story = {
 export const LinkCollapsedActive: Story = {
   decorators: [
     (Story) => (
-      <NavigationProvider initialIsCollapsed={true}>
+      <NavigationProvider initialIsCollapsed={true} currentPath="/some-url">
         <Story />
       </NavigationProvider>
     ),
   ],
   args: {
     ...Link.args,
-    isActive: true,
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await expect(canvas.getByRole("link")).toHaveAttribute(
+      "data-active",
+      "true",
+    );
   },
 };
 

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

@@ -33,12 +33,21 @@ import arrayOfLength from "@internal/arrayOfLength/arrayOfLength";
 import { I18nProvider } from "react-aria-components";
 import { useMemo } from "react";
 import {
+  columnFilteringFeature,
   createColumnHelper,
-  getCoreRowModel,
-  getFilteredRowModel,
-  getPaginationRowModel,
-  getSortedRowModel,
-  useReactTable,
+  createFilteredRowModel,
+  createPaginatedRowModel,
+  createSortedRowModel,
+  filterFn_arrIncludesSome,
+  filterFn_equals,
+  filterFn_includesString,
+  globalFilteringFeature,
+  rowPaginationFeature,
+  rowSortingFeature,
+  sortFn_alphanumeric,
+  sortFn_text,
+  tableFeatures,
+  useTable,
 } from "@tanstack/react-table";
 import DataTableHeader from "../DataTable/DataTableHeader/DataTableHeader";
 import DataTableCell from "../DataTable/DataTableCell/DataTableCell";
@@ -49,6 +58,26 @@ import Checkbox from "../Checkbox/Checkbox";
 import Switch from "../Switch/Switch";
 import DataTable from "../DataTable/DataTable";
 
+// Since react-table v9, every feature a table uses has to be registered through
+// `tableFeatures()`, and the column helper is typed from that set.
+const tableFeaturesSet = tableFeatures({
+  columnFilteringFeature,
+  globalFilteringFeature,
+  rowSortingFeature,
+  rowPaginationFeature,
+  // Register only the built-ins the columns use: the full `filterFns` / `sortFns`
+  // registries are deprecated because they pull every built-in into the bundle.
+  filterFns: {
+    arrIncludesSome: filterFn_arrIncludesSome,
+    equals: filterFn_equals,
+    includesString: filterFn_includesString,
+  },
+  sortFns: { alphanumeric: sortFn_alphanumeric, text: sortFn_text },
+  filteredRowModel: createFilteredRowModel(),
+  sortedRowModel: createSortedRowModel(),
+  paginatedRowModel: createPaginatedRowModel(),
+});
+
 const meta: Meta<typeof PageLayout> = {
   component: PageLayout,
   parameters: {
@@ -246,173 +275,185 @@ export const PageLayoutWithDataTable: Story = {
       // Here starts the interesting stuff: columns definitions.
       // All the features of the filters comes from those columns definitions
       // Please read carefully each column, they all serve as a different example of how to use the filters
-      const columnHelper = createColumnHelper<User>();
+      const columnHelper = createColumnHelper<typeof tableFeaturesSet, User>();
 
       const columns = useMemo(
-        () => [
-          columnHelper.accessor("firstname", {
-            // Here, because there is no "FilterInDrawer" component, there will be nothing in the filter drawer related to the firstname
-            // But the firstname can still be filtered by the global filter (search input)
-            header: ({ header }) => (
-              <DataTableHeader
-                onSortClick={header.column.getToggleSortingHandler()}
-                sortDirection={header.column.getIsSorted() || "none"}
-                text="Firstname"
-              />
-            ),
-            cell: (props) => <DataTableCell>{props.getValue()}</DataTableCell>,
-          }),
-          // Here is an example using a "FilterInDrawer" component that render a radio group to filter the day
-          // Please note the "filterFn" is "arrIncludes" for this king of value (Array<string>)
-          // Also note the usage of `satisfies TypeTableColumnWithFilter<User>` to help you type check the column definition (because meta is a custom property)
-          // Finally, you will note that the Chips are auto-generated, if you do not want to use them you can set the `skipFilterChips` to true
-          columnHelper.accessor("day", {
-            id: "Day",
-            header: () => <DataTableHeader text="Day" />,
-            cell: (props) => <DataTableCell>{props.getValue()}</DataTableCell>,
-            filterFn: "equals",
-            meta: {
-              FilterInDrawer: ({ column }) => (
-                <div>
-                  <b>Filter by day:</b>
-
-                  {DAYS.map((day) => (
-                    <Radio
-                      label={day}
-                      key={day}
-                      checked={column.getFilterValue() === day}
-                      onChange={() => column.setFilterValue(day)}
-                    />
-                  ))}
-                </div>
+        () =>
+          columnHelper.columns([
+            columnHelper.accessor("firstname", {
+              // Here, because there is no "FilterInDrawer" component, there will be nothing in the filter drawer related to the firstname
+              // But the firstname can still be filtered by the global filter (search input)
+              header: ({ header }) => (
+                <DataTableHeader
+                  onSortClick={header.column.getToggleSortingHandler()}
+                  sortDirection={header.column.getIsSorted() || "none"}
+                  text="Firstname"
+                />
+              ),
+              cell: (props) => (
+                <DataTableCell>{props.getValue()}</DataTableCell>
+              ),
+            }),
+            // Here is an example using a "FilterInDrawer" component that render a radio group to filter the day
+            // Please note the "filterFn" is "arrIncludes" for this king of value (Array<string>)
+            // Also note the usage of `satisfies TypeTableColumnWithFilter<typeof tableFeaturesSet, User>` to help you type check the column definition (because meta is a custom property)
+            // Finally, you will note that the Chips are auto-generated, if you do not want to use them you can set the `skipFilterChips` to true
+            columnHelper.accessor("day", {
+              id: "Day",
+              header: () => <DataTableHeader text="Day" />,
+              cell: (props) => (
+                <DataTableCell>{props.getValue()}</DataTableCell>
               ),
-            } satisfies TypeTableColumnWithFilter<User>,
-          }),
-          // Here is another example using a "FilterInDrawer" component that render a checkbox group to filter the food
-          // Please note the "filterFn" is "arrIncludesSome" -> we want to include all entries that match at least one food
-          // Also note the usage of `satisfies TypeTableColumnWithFilter<User>` to help you type check the column definition (because meta is a custom property)
-          // Finally, you will note that the Chips are auto-generated, if you do not want to use them you can set the `skipFilterChips` to true
-          columnHelper.accessor("foods", {
-            id: "Foods",
-            header: () => <DataTableHeader text="Foods" />,
-            cell: (props) => (
-              <DataTableCell>{props.getValue()?.join(", ")}</DataTableCell>
-            ),
-            filterFn: "arrIncludesSome",
-            meta: {
-              FilterInDrawer: ({ column }) => (
-                <div style={{ marginTop: 8 }}>
-                  <b>Filter by food (at least one):</b>
-                  <CheckboxGroup
+              filterFn: "equals",
+              meta: {
+                FilterInDrawer: ({ column }) => (
+                  <div>
+                    <b>Filter by day:</b>
+
+                    {DAYS.map((day) => (
+                      <Radio
+                        label={day}
+                        key={day}
+                        checked={column.getFilterValue() === day}
+                        onChange={() => column.setFilterValue(day)}
+                      />
+                    ))}
+                  </div>
+                ),
+              } satisfies TypeTableColumnWithFilter<
+                typeof tableFeaturesSet,
+                User
+              >,
+            }),
+            // Here is another example using a "FilterInDrawer" component that render a checkbox group to filter the food
+            // Please note the "filterFn" is "arrIncludesSome" -> we want to include all entries that match at least one food
+            // Also note the usage of `satisfies TypeTableColumnWithFilter<typeof tableFeaturesSet, User>` to help you type check the column definition (because meta is a custom property)
+            // Finally, you will note that the Chips are auto-generated, if you do not want to use them you can set the `skipFilterChips` to true
+            columnHelper.accessor("foods", {
+              id: "Foods",
+              header: () => <DataTableHeader text="Foods" />,
+              cell: (props) => (
+                <DataTableCell>{props.getValue()?.join(", ")}</DataTableCell>
+              ),
+              filterFn: "arrIncludesSome",
+              meta: {
+                FilterInDrawer: ({ column }) => (
+                  <div style={{ marginTop: 8 }}>
+                    <b>Filter by food (at least one):</b>
+                    <CheckboxGroup
+                      value={column.getFilterValue() as any}
+                      onChange={(value) => column.setFilterValue(value)}
+                      aria-label="Filter by food (at least one)"
+                    >
+                      {ALL_FOODS.map((food) => (
+                        <div key={food}>
+                          <Checkbox label={food} value={food} />
+                        </div>
+                      ))}
+                    </CheckboxGroup>
+                  </div>
+                ),
+              } satisfies TypeTableColumnWithFilter<
+                typeof tableFeaturesSet,
+                User
+              >,
+            }),
+            // Here is another example using a "FilterInDrawer" component that render a select to filter the organization
+            // Please note the "filterFn" is a custom function that will filter the data based on the organization id
+            // Also note the usage of `satisfies TypeTableColumnWithFilter<typeof tableFeaturesSet, User>` to help you type check the column definition (because meta is a custom property)
+            // And most important here, we have a custom meta property `filterChips` that will generate a chip to display the selected organization
+            // The Filter can not handle automatic chips when the data is a complex object, so you have to handle that manually
+            columnHelper.accessor("organization", {
+              id: "Organization",
+              header: () => <DataTableHeader text="Organization" />,
+              cell: (props) => (
+                <DataTableCell>{props.getValue()?.name}</DataTableCell>
+              ),
+              filterFn: (row, _, filterValue) => {
+                if (!filterValue) return true;
+                return row.original.organization?.id === filterValue;
+              },
+              meta: {
+                filterChips: ({ column }) => {
+                  const value = column.getFilterValue();
+                  const organization = ORGANIZATIONS.find(
+                    (org) => org.id === value,
+                  );
+                  if (!organization) return [];
+                  return [
+                    {
+                      value: `Organization: ${organization.name}`,
+                      onClose: () => column.setFilterValue(null),
+                    },
+                  ];
+                },
+                FilterInDrawer: ({ column }) => (
+                  <Select
+                    id="organization-select"
+                    label="Filter by organization:"
+                    mode="single"
                     value={column.getFilterValue() as any}
-                    onChange={column.setFilterValue}
-                    aria-label="Filter by food (at least one)"
+                    onChange={(value) => column.setFilterValue(value)}
+                    fullWidth
+                    wrapperProps={{ style: { marginBottom: 8 } }}
                   >
-                    {ALL_FOODS.map((food) => (
-                      <div key={food}>
-                        <Checkbox label={food} value={food} />
-                      </div>
+                    {ORGANIZATIONS.map((organization) => (
+                      <SelectItem
+                        text={organization.name}
+                        id={organization.id}
+                        key={organization.id}
+                      />
                     ))}
-                  </CheckboxGroup>
-                </div>
+                  </Select>
+                ),
+              } satisfies TypeTableColumnWithFilter<
+                typeof tableFeaturesSet,
+                User
+              >,
+            }),
+            // Here is an example that uses a filter outside of the drawer.
+            // See the "extraLeftContent" prop to see how to connect it to react-table filtering features
+            columnHelper.accessor("isActive", {
+              header: () => <DataTableHeader text="Active" />,
+              cell: (props) => (
+                <DataTableCell>{props.getValue() ? "✅" : "❌"}</DataTableCell>
               ),
-            } satisfies TypeTableColumnWithFilter<User>,
-          }),
-          // Here is another example using a "FilterInDrawer" component that render a select to filter the organization
-          // Please note the "filterFn" is a custom function that will filter the data based on the organization id
-          // Also note the usage of `satisfies TypeTableColumnWithFilter<User>` to help you type check the column definition (because meta is a custom property)
-          // And most important here, we have a custom meta property `filterChips` that will generate a chip to display the selected organization
-          // The Filter can not handle automatic chips when the data is a complex object, so you have to handle that manually
-          columnHelper.accessor("organization", {
-            id: "Organization",
-            header: () => <DataTableHeader text="Organization" />,
-            cell: (props) => (
-              <DataTableCell>{props.getValue()?.name}</DataTableCell>
-            ),
-            filterFn: (row, _, filterValue) => {
-              if (!filterValue) return true;
-              return row.original.organization?.id === filterValue;
-            },
-            meta: {
-              filterChips: ({ column }) => {
-                const value = column.getFilterValue();
-                const organization = ORGANIZATIONS.find(
-                  (org) => org.id === value,
-                );
-                if (!organization) return [];
-                return [
-                  {
-                    value: `Organization: ${organization.name}`,
-                    onClose: () => column.setFilterValue(null),
-                  },
-                ];
+              filterFn: (row, _, filterValue) => {
+                if (!filterValue) return true;
+                return !!row.original.isActive;
               },
-              FilterInDrawer: ({ column }) => (
-                <Select
-                  id="organization-select"
-                  label="Filter by organization:"
-                  mode="single"
-                  value={column.getFilterValue() as any}
-                  onChange={column.setFilterValue}
-                  fullWidth
-                  wrapperProps={{ style: { marginBottom: 8 } }}
-                >
-                  {ORGANIZATIONS.map((organization) => (
-                    <SelectItem
-                      text={organization.name}
-                      id={organization.id}
-                      key={organization.id}
-                    />
-                  ))}
-                </Select>
+            }),
+            // Here is an example of an empty column, for example to display an actions bar
+            // You can note that the header is empty, the text is optional
+            columnHelper.display({
+              id: "actions",
+              header: () => <DataTableHeader />,
+              cell: () => (
+                <DataTableCell>
+                  <Button mode="secondary" iconLeft="edit" />
+                </DataTableCell>
               ),
-            } satisfies TypeTableColumnWithFilter<User>,
-          }),
-          // Here is an example that uses a filter outside of the drawer.
-          // See the "extraLeftContent" prop to see how to connect it to react-table filtering features
-          columnHelper.accessor("isActive", {
-            header: () => <DataTableHeader text="Active" />,
-            cell: (props) => (
-              <DataTableCell>{props.getValue() ? "✅" : "❌"}</DataTableCell>
-            ),
-            filterFn: (row, _, filterValue) => {
-              if (!filterValue) return true;
-              return !!row.original.isActive;
-            },
-          }),
-          // Here is an example of an empty column, for example to display an actions bar
-          // You can note that the header is empty, the text is optional
-          columnHelper.display({
-            id: "actions",
-            header: () => <DataTableHeader />,
-            cell: () => (
-              <DataTableCell>
-                <Button mode="secondary" iconLeft="edit" />
-              </DataTableCell>
-            ),
-          }),
-        ],
+            }),
+          ]),
         [ALL_FOODS, DAYS, ORGANIZATIONS, columnHelper],
       );
 
       // And here we define the table as usual
-      const table = useReactTable({
+      const table = useTable({
+        features: tableFeaturesSet,
         data,
         columns,
         initialState: {
           globalFilter: "",
           pagination: {
+            pageIndex: 0,
             pageSize: 50,
           },
         },
-        getCoreRowModel: getCoreRowModel(),
-        getSortedRowModel: getSortedRowModel(),
-        getFilteredRowModel: getFilteredRowModel(),
-        getPaginationRowModel: getPaginationRowModel(),
       });
 
       // Get the pagination state
-      const pagination = table.getState().pagination;
+      const pagination = table.state.pagination;
 
       // Render the table using the base DataTable component
       return (
@@ -446,7 +487,7 @@ export const PageLayoutWithDataTable: Story = {
         >
           <>
             <Header title={"Test"} />
-            <Filter<User>
+            <Filter
               onDownloadClick={() => alert("Download")}
               onSettingsClick={() => alert("Settings")}
               table={table}

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

@@ -2,7 +2,7 @@ import { default as React } from 'react';
 import { ButtonProps } from 'react-aria-components';
 import { Props as FormGroupWrapperProps } from '../../internal-components/FormGroupWrapper/FormGroupWrapper';
 import { Props as LabelProps } from '../Label/Label';
-interface GenericProps extends Pick<LabelProps, "label" | "labelIconRight" | "labelIconRightTooltip" | "required">, Pick<FormGroupWrapperProps, "description" | "helperText" | "helperTextIcon" | "errorHelperText" | "errorHelperTextIcon" | "successHelperText" | "successHelperTextIcon" | "warningHelperText" | "warningHelperTextIcon" | "orientation"> {
+interface GenericProps extends 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
      */

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

@@ -26,7 +26,6 @@ const meta: Meta<typeof Select> = {
     open: { control: false },
     helperText: { control: { type: "text" } },
     label: { control: { type: "text" } },
-    description: { control: { type: "text" } },
     children: { control: false },
     mode: { control: false },
     errorHelperText: { control: { type: "text" } },
@@ -62,7 +61,6 @@ export const Playground: StoryObj<typeof Select> = {
     labelIconRight: "help_outline",
     labelIconRightTooltip: "Additional information",
     required: true,
-    description: "[Insert description]",
     name: "my-select",
     helperText: "[Insert helper]",
     helperTextIcon: "help_outline",
@@ -75,7 +73,6 @@ export const Playground: StoryObj<typeof Select> = {
     const canvas = within(canvasElement);
     await canvas.findByTitle("Required");
     await canvas.findByText("[Insert label]");
-    await canvas.findByText("[Insert description]");
     await canvas.findByText("[Insert helper]");
   },
 };
@@ -154,7 +151,6 @@ export const WithHorizontalOrientation: StoryObj<typeof Select> = {
     ...Playground.args,
     fullWidth: false,
     orientation: "horizontal",
-    description: undefined,
     wrapperProps: undefined,
   },
 };
@@ -229,7 +225,6 @@ const meta: Meta<typeof Select> = {
     open: { control: false },
     helperText: { control: { type: "text" } },
     label: { control: { type: "text" } },
-    description: { control: { type: "text" } },
     children: { control: false },
     mode: { control: false },
     errorHelperText: { control: { type: "text" } },
@@ -293,7 +288,6 @@ export const Playground: StoryObj<typeof Select> = {
     labelIconRight: "help_outline",
     labelIconRightTooltip: "Additional information",
     required: true,
-    description: "[Insert description]",
     helperText: "[Insert helper]",
     helperTextIcon: "help_outline",
     fullWidth: true,
@@ -305,7 +299,6 @@ export const Playground: StoryObj<typeof Select> = {
     const canvas = within(canvasElement);
     await canvas.findByTitle("Required");
     await canvas.findByText("[Insert label]");
-    await canvas.findByText("[Insert description]");
     await canvas.findByText("[Insert helper]");
   },
 };
@@ -360,7 +353,6 @@ export const WithHorizontalOrientation: StoryObj<typeof Select> = {
     ...Playground.args,
     fullWidth: false,
     orientation: "horizontal",
-    description: undefined,
     wrapperProps: undefined,
   },
 };
@@ -439,7 +431,6 @@ const meta: Meta<typeof Select> = {
     open: { control: { type: "boolean" } },
     helperText: { control: { type: "text" } },
     label: { control: { type: "text" } },
-    description: { control: { type: "text" } },
   },
   parameters: {
     layout: "centered",

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

@@ -62,11 +62,11 @@ export interface Props {
      */
     id?: string;
     /**
-     * The style of the wrapper element that contains the slider but also the label, description, helperText, etc.
+     * The style of the wrapper element that contains the slider but also the label, helperText, etc.
      */
     style?: React.CSSProperties;
     /**
-     * The className of the wrapper element that contains the slider but also the label, description, helperText, etc.
+     * The className of the wrapper element that contains the slider but also the label, helperText, etc.
      */
     className?: string;
     /**
@@ -78,18 +78,12 @@ export interface Props {
      * Requires `labelIconRight` to be set. When provided, the icon is wrapped in a Tooltip.
      */
     labelIconRightTooltip?: string;
-    /**
-     * Optional description to display under the label and above the field
-     */
-    description?: string | React.ReactNode;
     /**
      * Helper text displayed below the input field, like additional instructions.
-     * @deprecated use `description` instead
      */
     helperText?: string | React.ReactNode;
     /**
      * Optional icon to display on the left side of the helperText. Only visible if there is a helperText
-     * @deprecated will be removed in v2
      */
     helperTextIcon?: IconName;
     /**
@@ -113,4 +107,4 @@ export interface Props {
      */
     "aria-label"?: string;
 }
-export default function Slider({ id, label, minValue, maxValue, step, isDisabled, style, className, onChange, onChangeEnd, value: initialValue, thumbLabels, labelIconRight, labelIconRightTooltip, description, helperText, helperTextIcon, errorHelperText, errorHelperTextIcon, successHelperText, successHelperTextIcon, isInvalid, withTrackDots, ...otherProps }: Props): React.JSX.Element;
+export default function Slider({ id, label, minValue, maxValue, step, isDisabled, style, className, onChange, onChangeEnd, value: initialValue, thumbLabels, labelIconRight, labelIconRightTooltip, helperText, helperTextIcon, errorHelperText, errorHelperTextIcon, successHelperText, successHelperTextIcon, isInvalid, withTrackDots, ...otherProps }: Props): React.JSX.Element;