@jakubmazanec/ui 0.1.0 → 0.1.1-next.80f405d

package/build/theme/internals/themeContext.d.ts

@@ -102,6 +102,10 @@ export declare const themeContext: import("react").Context<import("@jakubmazanec
     Error: {
         className: import("./ClassName.js").ClassName;
     };
+} & {
+    Field: {
+        className: import("./ClassName.js").ClassName;
+    };
 } & {
     Fieldset: {
         className?: import("./ClassName.js").ClassName;
@@ -112,10 +116,6 @@ export declare const themeContext: import("react").Context<import("@jakubmazanec
             readonly disabled: [true, false];
         }, undefined> | undefined;
     };
-} & {
-    Field: {
-        className: import("./ClassName.js").ClassName;
-    };
 } & {
     Form: {
         className: import("./ClassName.js").ClassName;
@@ -200,10 +200,6 @@ export declare const themeContext: import("react").Context<import("@jakubmazanec
     MenuHeading: {
         className: import("./ClassName.js").ClassName;
     };
-} & {
-    MenuItems: {
-        className: import("./ClassName.js").ClassName;
-    };
 } & {
     MenuItem: {
         className?: import("./ClassName.js").ClassName;
@@ -214,6 +210,10 @@ export declare const themeContext: import("react").Context<import("@jakubmazanec
             readonly disabled: [true, false];
         }, undefined> | undefined;
     };
+} & {
+    MenuItems: {
+        className: import("./ClassName.js").ClassName;
+    };
 } & {
     MenuSection: {
         className: import("./ClassName.js").ClassName;
@@ -309,11 +309,11 @@ export declare const themeContext: import("react").Context<import("@jakubmazanec
         className: import("./ClassName.js").ClassName;
     };
 } & {
-    TableHeader: {
+    TableHead: {
         className: import("./ClassName.js").ClassName;
     };
 } & {
-    TableHead: {
+    TableHeader: {
         className: import("./ClassName.js").ClassName;
     };
 } & {
@@ -324,6 +324,16 @@ export declare const themeContext: import("react").Context<import("@jakubmazanec
     Table: {
         className: import("./ClassName.js").ClassName;
     };
+} & {
+    Text: {
+        className?: import("./ClassName.js").ClassName;
+        variants: import("./ComponentThemeVariants.js").ComponentThemeVariants<{
+            readonly size: ["small", "medium", "large"];
+        }, undefined>;
+        compoundVariants?: import("./ComponentThemeCompoundVariants.js").ComponentThemeCompoundVariants<{
+            readonly size: ["small", "medium", "large"];
+        }, undefined> | undefined;
+    };
 } & {
     Textarea: {
         classNames?: {
@@ -338,16 +348,6 @@ export declare const themeContext: import("react").Context<import("@jakubmazanec
             readonly disabled: [true, false];
         }, ["root", "textarea", "icon"]> | undefined;
     };
-} & {
-    Text: {
-        className?: import("./ClassName.js").ClassName;
-        variants: import("./ComponentThemeVariants.js").ComponentThemeVariants<{
-            readonly size: ["small", "medium", "large"];
-        }, undefined>;
-        compoundVariants?: import("./ComponentThemeCompoundVariants.js").ComponentThemeCompoundVariants<{
-            readonly size: ["small", "medium", "large"];
-        }, undefined> | undefined;
-    };
 } & {
     merge: (...rest: import("./ClassName.js").ClassName[]) => string;
 }> | undefined>;

package/build/theme/internals/useTheme.d.ts

@@ -102,6 +102,10 @@ export declare function useTheme(): import("@jakubmazanec/ts-utils").Simplify<{
     Error: {
         className: import("./ClassName.js").ClassName;
     };
+} & {
+    Field: {
+        className: import("./ClassName.js").ClassName;
+    };
 } & {
     Fieldset: {
         className?: import("./ClassName.js").ClassName;
@@ -112,10 +116,6 @@ export declare function useTheme(): import("@jakubmazanec/ts-utils").Simplify<{
             readonly disabled: [true, false];
         }, undefined> | undefined;
     };
-} & {
-    Field: {
-        className: import("./ClassName.js").ClassName;
-    };
 } & {
     Form: {
         className: import("./ClassName.js").ClassName;
@@ -200,10 +200,6 @@ export declare function useTheme(): import("@jakubmazanec/ts-utils").Simplify<{
     MenuHeading: {
         className: import("./ClassName.js").ClassName;
     };
-} & {
-    MenuItems: {
-        className: import("./ClassName.js").ClassName;
-    };
 } & {
     MenuItem: {
         className?: import("./ClassName.js").ClassName;
@@ -214,6 +210,10 @@ export declare function useTheme(): import("@jakubmazanec/ts-utils").Simplify<{
             readonly disabled: [true, false];
         }, undefined> | undefined;
     };
+} & {
+    MenuItems: {
+        className: import("./ClassName.js").ClassName;
+    };
 } & {
     MenuSection: {
         className: import("./ClassName.js").ClassName;
@@ -309,11 +309,11 @@ export declare function useTheme(): import("@jakubmazanec/ts-utils").Simplify<{
         className: import("./ClassName.js").ClassName;
     };
 } & {
-    TableHeader: {
+    TableHead: {
         className: import("./ClassName.js").ClassName;
     };
 } & {
-    TableHead: {
+    TableHeader: {
         className: import("./ClassName.js").ClassName;
     };
 } & {
@@ -324,6 +324,16 @@ export declare function useTheme(): import("@jakubmazanec/ts-utils").Simplify<{
     Table: {
         className: import("./ClassName.js").ClassName;
     };
+} & {
+    Text: {
+        className?: import("./ClassName.js").ClassName;
+        variants: import("./ComponentThemeVariants.js").ComponentThemeVariants<{
+            readonly size: ["small", "medium", "large"];
+        }, undefined>;
+        compoundVariants?: import("./ComponentThemeCompoundVariants.js").ComponentThemeCompoundVariants<{
+            readonly size: ["small", "medium", "large"];
+        }, undefined> | undefined;
+    };
 } & {
     Textarea: {
         classNames?: {
@@ -338,16 +348,6 @@ export declare function useTheme(): import("@jakubmazanec/ts-utils").Simplify<{
             readonly disabled: [true, false];
         }, ["root", "textarea", "icon"]> | undefined;
     };
-} & {
-    Text: {
-        className?: import("./ClassName.js").ClassName;
-        variants: import("./ComponentThemeVariants.js").ComponentThemeVariants<{
-            readonly size: ["small", "medium", "large"];
-        }, undefined>;
-        compoundVariants?: import("./ComponentThemeCompoundVariants.js").ComponentThemeCompoundVariants<{
-            readonly size: ["small", "medium", "large"];
-        }, undefined> | undefined;
-    };
 } & {
     merge: (...rest: import("./ClassName.js").ClassName[]) => string;
 }> | undefined;

package/build/theme/internals.d.ts

@@ -1,18 +1,18 @@
 export * from './internals/booleanToString.js';
-export * from './internals/ClassName.js';
-export * from './internals/ComponentProps.js';
-export * from './internals/ComponentTheme.js';
-export * from './internals/ComponentThemeCompoundVariants.js';
-export * from './internals/ComponentThemeDefinition.js';
-export * from './internals/ComponentThemeDefinitionElements.js';
-export * from './internals/ComponentThemeDefinitionVariants.js';
-export * from './internals/ComponentThemeProps.js';
-export * from './internals/ComponentThemeVariants.js';
-export * from './internals/ComponentWithTheme.js';
+export type * from './internals/ClassName.js';
+export type * from './internals/ComponentProps.js';
+export type * from './internals/ComponentTheme.js';
+export type * from './internals/ComponentThemeCompoundVariants.js';
+export type * from './internals/ComponentThemeDefinition.js';
+export type * from './internals/ComponentThemeDefinitionElements.js';
+export type * from './internals/ComponentThemeDefinitionVariants.js';
+export type * from './internals/ComponentThemeProps.js';
+export type * from './internals/ComponentThemeVariants.js';
+export type * from './internals/ComponentWithTheme.js';
 export * from './internals/createComponentTheme.js';
 export * from './internals/createUseComponentThemeReturn.js';
 export * from './internals/pickPropertyIfExists.js';
 export * from './internals/themeContext.js';
-export * from './internals/UseComponentTheme.js';
-export * from './internals/UseComponentThemeReturn.js';
+export type * from './internals/UseComponentTheme.js';
+export type * from './internals/UseComponentThemeReturn.js';
 export * from './internals/useTheme.js';

package/build/theme/internals.js

@@ -1,20 +1,8 @@
 "use strict";
 export * from "./internals/booleanToString.js";
-export * from "./internals/ClassName.js";
-export * from "./internals/ComponentProps.js";
-export * from "./internals/ComponentTheme.js";
-export * from "./internals/ComponentThemeCompoundVariants.js";
-export * from "./internals/ComponentThemeDefinition.js";
-export * from "./internals/ComponentThemeDefinitionElements.js";
-export * from "./internals/ComponentThemeDefinitionVariants.js";
-export * from "./internals/ComponentThemeProps.js";
-export * from "./internals/ComponentThemeVariants.js";
-export * from "./internals/ComponentWithTheme.js";
 export * from "./internals/createComponentTheme.js";
 export * from "./internals/createUseComponentThemeReturn.js";
 export * from "./internals/pickPropertyIfExists.js";
 export * from "./internals/themeContext.js";
-export * from "./internals/UseComponentTheme.js";
-export * from "./internals/UseComponentThemeReturn.js";
 export * from "./internals/useTheme.js";
 //# sourceMappingURL=internals.js.map

package/build/theme/internals.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../source/theme/internals.ts"],
-  "sourcesContent": ["export * from './internals/booleanToString.js';\nexport * from './internals/ClassName.js';\nexport * from './internals/ComponentProps.js';\nexport * from './internals/ComponentTheme.js';\nexport * from './internals/ComponentThemeCompoundVariants.js';\nexport * from './internals/ComponentThemeDefinition.js';\nexport * from './internals/ComponentThemeDefinitionElements.js';\nexport * from './internals/ComponentThemeDefinitionVariants.js';\nexport * from './internals/ComponentThemeProps.js';\nexport * from './internals/ComponentThemeVariants.js';\nexport * from './internals/ComponentWithTheme.js';\nexport * from './internals/createComponentTheme.js';\nexport * from './internals/createUseComponentThemeReturn.js';\nexport * from './internals/pickPropertyIfExists.js';\nexport * from './internals/themeContext.js';\nexport * from './internals/UseComponentTheme.js';\nexport * from './internals/UseComponentThemeReturn.js';\nexport * from './internals/useTheme.js';\n"],
-  "mappings": ";AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;",
+  "sourcesContent": ["export * from './internals/booleanToString.js';\nexport type * from './internals/ClassName.js';\nexport type * from './internals/ComponentProps.js';\nexport type * from './internals/ComponentTheme.js';\nexport type * from './internals/ComponentThemeCompoundVariants.js';\nexport type * from './internals/ComponentThemeDefinition.js';\nexport type * from './internals/ComponentThemeDefinitionElements.js';\nexport type * from './internals/ComponentThemeDefinitionVariants.js';\nexport type * from './internals/ComponentThemeProps.js';\nexport type * from './internals/ComponentThemeVariants.js';\nexport type * from './internals/ComponentWithTheme.js';\nexport * from './internals/createComponentTheme.js';\nexport * from './internals/createUseComponentThemeReturn.js';\nexport * from './internals/pickPropertyIfExists.js';\nexport * from './internals/themeContext.js';\nexport type * from './internals/UseComponentTheme.js';\nexport type * from './internals/UseComponentThemeReturn.js';\nexport * from './internals/useTheme.js';\n"],
+  "mappings": ";AAAA,cAAc;AAWd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AAGd,cAAc;",
   "names": []
 }

package/build/theme.d.ts

@@ -1,3 +1,3 @@
 export * from './theme/defaultTheme.js';
-export * from './theme/Theme.js';
+export type * from './theme/Theme.js';
 export * from './theme/ThemeProvider.js';

package/build/theme.js

@@ -1,5 +1,4 @@
 "use strict";
 export * from "./theme/defaultTheme.js";
-export * from "./theme/Theme.js";
 export * from "./theme/ThemeProvider.js";
 //# sourceMappingURL=theme.js.map

package/build/theme.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../source/theme.ts"],
-  "sourcesContent": ["export * from './theme/defaultTheme.js';\nexport * from './theme/Theme.js';\nexport * from './theme/ThemeProvider.js';\n"],
-  "mappings": ";AAAA,cAAc;AACd,cAAc;AACd,cAAc;",
+  "sourcesContent": ["export * from './theme/defaultTheme.js';\nexport type * from './theme/Theme.js';\nexport * from './theme/ThemeProvider.js';\n"],
+  "mappings": ";AAAA,cAAc;AAEd,cAAc;",
   "names": []
 }

package/build/utilities.d.ts

@@ -1,3 +1,3 @@
 export * from './utilities/formatDateTime.js';
 export * from './utilities/formatNumber.js';
-export * from './utilities/WithLocaleOrLocales.js';
+export type * from './utilities/WithLocaleOrLocales.js';

package/build/utilities.js

@@ -1,5 +1,4 @@
 "use strict";
 export * from "./utilities/formatDateTime.js";
 export * from "./utilities/formatNumber.js";
-export * from "./utilities/WithLocaleOrLocales.js";
 //# sourceMappingURL=utilities.js.map

package/build/utilities.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../source/utilities.ts"],
-  "sourcesContent": ["export * from './utilities/formatDateTime.js';\nexport * from './utilities/formatNumber.js';\nexport * from './utilities/WithLocaleOrLocales.js';\n"],
-  "mappings": ";AAAA,cAAc;AACd,cAAc;AACd,cAAc;",
+  "sourcesContent": ["export * from './utilities/formatDateTime.js';\nexport * from './utilities/formatNumber.js';\nexport type * from './utilities/WithLocaleOrLocales.js';\n"],
+  "mappings": ";AAAA,cAAc;AACd,cAAc;",
   "names": []
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jakubmazanec/ui",
-  "version": "0.1.0",
+  "version": "0.1.1-next.80f405d",
   "description": "React component library.",
   "repository": {
     "type": "git",
@@ -41,7 +41,7 @@
     "@dnd-kit/utilities": "^3.2.2",
     "@headlessui/react": "^2.2.0",
     "@heroicons/react": "^2.1.5",
-    "@jakubmazanec/ts-utils": "^3.0.1",
+    "@jakubmazanec/ts-utils": "3.0.5-next.80f405d",
     "@tanstack/match-sorter-utils": "^8.19.4",
     "@tanstack/react-table": "^8.20.5",
     "culori": "^4.0.1",
@@ -51,7 +51,7 @@
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^1.9.0",
-    "@jakubmazanec/eslint-config": "^3.2.0",
+    "@jakubmazanec/eslint-config": "4.0.0-next.80f405d",
     "@storybook/addon-controls": "^8.4.2",
     "@storybook/addon-essentials": "^8.4.2",
     "@storybook/addon-interactions": "^8.4.2",
@@ -74,7 +74,7 @@
     "concurrently": "^9.1.0",
     "del-cli": "^6.0.0",
     "esbuild": "^0.24.0",
-    "eslint": "^8.56.0",
+    "eslint": "^9.15.0",
     "happy-dom": "^15.10.1",
     "prettier": "^3.3.3",
     "prettier-plugin-packagejson": "^2.5.3",

package/source/components/Combobox.tsx

@@ -1,5 +1,3 @@
-// TODO: fix somehow
-/* eslint-disable complexity -- TODO */
 import {
   Combobox as HeadlessCombobox,
   ComboboxButton as HeadlessComboboxButton,
@@ -52,9 +50,9 @@ export type ComboboxProps<
     (
       | {
           as?: T | undefined;
-          value?: V | undefined;
-          defaultValue?: V | undefined;
-          multiple?: false | undefined;
+          value?: V[] | undefined;
+          defaultValue?: V[] | undefined;
+          multiple: true;
           items?: Array<ComboboxItem<V>> | undefined;
           placeholder?: string;
           immediate?: boolean | undefined;
@@ -62,13 +60,13 @@ export type ComboboxProps<
           customValue?: boolean | undefined;
           name?: string | undefined;
           className?: string;
-          onChange?: (selectedValue: V | undefined) => void;
+          onChange?: (selectedValue: V[] | undefined) => void;
         }
       | {
           as?: T | undefined;
-          value?: V[] | undefined;
-          defaultValue?: V[] | undefined;
-          multiple: true;
+          value?: V | undefined;
+          defaultValue?: V | undefined;
+          multiple?: false | undefined;
           items?: Array<ComboboxItem<V>> | undefined;
           placeholder?: string;
           immediate?: boolean | undefined;
@@ -76,7 +74,7 @@ export type ComboboxProps<
           customValue?: boolean | undefined;
           name?: string | undefined;
           className?: string;
-          onChange?: (selectedValue: V[] | undefined) => void;
+          onChange?: (selectedValue: V | undefined) => void;
         }
     )
 >;
@@ -158,8 +156,8 @@ export const Combobox = forwardRef(
         items?.filter((item) =>
           `${item.label as number | string}`
             .toLowerCase()
-            .replace(/\s+/g, '')
-            .includes(query.toLowerCase().replace(/\s+/g, '')),
+            .replaceAll(/\s+/g, '')
+            .includes(query.toLowerCase().replaceAll(/\s+/g, '')),
         )
       : items;
     let filteredChildren =
@@ -172,8 +170,8 @@ export const Combobox = forwardRef(
             typeof (child.props as {children?: unknown[] | string}).children === 'string' &&
             (child.props as {children: string}).children
               .toLowerCase()
-              .replace(/\s+/g, '')
-              .includes(query.toLowerCase().replace(/\s+/g, ''))
+              .replaceAll(/\s+/g, '')
+              .includes(query.toLowerCase().replaceAll(/\s+/g, ''))
           ) {
             return true;
           }
@@ -207,8 +205,8 @@ export const Combobox = forwardRef(
         <div className={theme.root('relative', className)} data-component="combobox">
           <HeadlessComboboxInput
             className={theme.input(null, className)}
-            size={1} // so the input default width without styling is small
             displayValue={displayValue}
+            size={1} // so the input default width without styling is small
             onChange={handleQueryChange}
           />
           <HeadlessComboboxButton className={theme.icon('absolute')}>
@@ -219,7 +217,7 @@ export const Combobox = forwardRef(
         </div>
 
         {virtual && filteredItems ?
-          <HeadlessComboboxOptions className={theme.options()} anchor="bottom start">
+          <HeadlessComboboxOptions anchor="bottom start" className={theme.options()}>
             {({option}: {option: V}) => (
               <ComboboxOption value={option}>
                 {items?.find((item) => item.value === option)?.label}
@@ -229,7 +227,7 @@ export const Combobox = forwardRef(
         : null}
 
         {!virtual && filteredItems ?
-          <HeadlessComboboxOptions className={theme.options()} anchor="bottom start">
+          <HeadlessComboboxOptions anchor="bottom start" className={theme.options()}>
             {customValue && query.length ?
               <ComboboxOption key={query} value={query}>
                 {query}
@@ -244,7 +242,7 @@ export const Combobox = forwardRef(
         : null}
 
         {!filteredItems && Array.isArray(filteredChildren) ?
-          <HeadlessComboboxOptions className={theme.options()} anchor="bottom start">
+          <HeadlessComboboxOptions anchor="bottom start" className={theme.options()}>
             {customValue && query.length ?
               <ComboboxOption value={query}>{query}</ComboboxOption>
             : null}

package/source/components/Listbox.tsx

@@ -1,5 +1,3 @@
-// TODO: fix somehow
-/* eslint-disable complexity -- TODO */
 import {
   Listbox as HeadlessListbox,
   ListboxButton as HeadlessListboxButton,
@@ -52,19 +50,6 @@ export type ListboxProps<
   ComponentProps<typeof useListboxTheme> &
     ComponentPropsWithoutRef<T> &
     (
-      | {
-          as?: T | undefined;
-          value?: V | undefined;
-          defaultValue?: V | undefined;
-          multiple?: false | undefined;
-          hideSelected?: never; // must be here so the type of props is correct
-          items?: Array<ListboxItem<V>> | undefined;
-          placeholder?: string;
-          name?: string | undefined;
-          className?: string | undefined;
-          showFilter?: boolean | undefined;
-          onChange?: (selectedValue: V) => void;
-        }
       | {
           as?: T | undefined;
           value?: V[] | undefined;
@@ -83,6 +68,19 @@ export type ListboxProps<
           showFilter?: boolean | undefined;
           onChange?: (selectedValue: V[]) => void;
         }
+      | {
+          as?: T | undefined;
+          value?: V | undefined;
+          defaultValue?: V | undefined;
+          multiple?: false | undefined;
+          hideSelected?: never; // must be here so the type of props is correct
+          items?: Array<ListboxItem<V>> | undefined;
+          placeholder?: string;
+          name?: string | undefined;
+          className?: string | undefined;
+          showFilter?: boolean | undefined;
+          onChange?: (selectedValue: V) => void;
+        }
     )
 >;
 
@@ -149,8 +147,8 @@ export const Listbox = forwardRef(
         items?.filter((item) =>
           item.label
             .toLowerCase()
-            .replace(/\s+/g, '')
-            .includes(query.toLowerCase().replace(/\s+/g, '')),
+            .replaceAll(/\s+/g, '')
+            .includes(query.toLowerCase().replaceAll(/\s+/g, '')),
         )
       : items;
     let filteredChildren =
@@ -163,8 +161,8 @@ export const Listbox = forwardRef(
             typeof (child.props as {children?: unknown[] | string}).children === 'string' &&
             (child.props as {children: string}).children
               .toLowerCase()
-              .replace(/\s+/g, '')
-              .includes(query.toLowerCase().replace(/\s+/g, ''))
+              .replaceAll(/\s+/g, '')
+              .includes(query.toLowerCase().replaceAll(/\s+/g, ''))
           ) {
             return true;
           }
@@ -192,8 +190,8 @@ export const Listbox = forwardRef(
       <HeadlessListbox {...props}>
         <HeadlessListboxButton
           className={theme.root('relative', className)}
-          data-multiple={multiple ? true : null}
           data-component="listbox"
+          data-multiple={multiple ? true : null}
         >
           {({value: selectedValue}) => {
             if (!items && !multiple) {
@@ -333,8 +331,8 @@ export const Listbox = forwardRef(
           }}
         </HeadlessListboxButton>
         <HeadlessListboxOptions
-          className={theme.options()}
           anchor="bottom start"
+          className={theme.options()}
           onKeyDown={handleTab}
         >
           {showFilter ?

package/source/components/Radio.tsx

@@ -58,8 +58,8 @@ export const Radio = forwardRef(
       <HeadlessRadio {...props}>
         <span className={theme.icon()}>
           <Icon>
-            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" xmlSpace="preserve">
-              <circle cx="10" cy="10" r="4" fill="currentColor" />
+            <svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" xmlSpace="preserve">
+              <circle cx="10" cy="10" fill="currentColor" r="4" />
             </svg>
           </Icon>
         </span>

package/source/components/data-table/DataTable.tsx

@@ -1,5 +1,3 @@
-// TODO: fix
-/* eslint-disable complexity -- TODO */
 import {
   closestCenter,
   DndContext,
@@ -295,16 +293,16 @@ export function DataTable<D extends RowData, C extends Array<ColumnDef<D>>>({
 
   return (
     <DndContext
-      id={id}
       collisionDetection={closestCenter}
+      id={id}
       modifiers={[restrictToHorizontalAxis]}
       sensors={sensors}
       onDragEnd={handleDragEnd}
     >
       <DataTableSearchComponent
-        table={table}
         clientSearch={clientSearch}
         search={controlledSearch}
+        table={table}
         onSearch={onSearchChange}
       />
       <Table
@@ -320,16 +318,16 @@ export function DataTable<D extends RowData, C extends Array<ColumnDef<D>>>({
                 {headerGroup.headers.map((header) => (
                   <DataTableHeader
                     key={header.id}
-                    table={table}
-                    header={header}
-                    clientSorting={clientSorting}
-                    sorting={controlledSorting}
-                    clientFilters={clientFilters}
-                    filters={controlledFilters}
                     clientFaceting={clientFaceting}
+                    clientFilters={clientFilters}
+                    clientSorting={clientSorting}
                     faceting={faceting}
-                    onSorting={onSortingChange}
+                    filters={controlledFilters}
+                    header={header}
+                    sorting={controlledSorting}
+                    table={table}
                     onFiltering={onFiltersChange}
+                    onSorting={onSortingChange}
                   />
                 ))}
               </SortableContext>
@@ -367,11 +365,11 @@ export function DataTable<D extends RowData, C extends Array<ColumnDef<D>>>({
         </TableFoot>
       </Table>
       <DataTablePaginationComponent
-        table={table}
+        clientPagination={clientPagination}
         page={page}
-        pageSize={pageSize}
         pageCount={pageCount}
-        clientPagination={clientPagination}
+        pageSize={pageSize}
+        table={table}
         onPagination={onPaginationChange}
       />
     </DndContext>