@colisweb/rescript-toolkit 5.42.3 → 5.42.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@colisweb/rescript-toolkit",
-  "version": "5.42.3",
+  "version": "5.42.4",
   "type": "module",
   "scripts": {
     "clean": "rescript clean",

package/src/form/Toolkit__Form.res

@@ -696,9 +696,9 @@ module Make = (StateLenses: Config) => {
               ?dropdownClassName
               ?itemClassName
               options
-              defaultValue={value}
+              defaultValue={options->Array.keep(item => value->Array.some(v => v === item.value))}
               ?disabled
-              onChange={items => handleChange(items)}
+              onChange={items => handleChange(items->Array.map(item => item.value))}
               onClose
               placeholder
             />

package/src/ui/Toolkit__Ui_MultiSelect.res

@@ -58,14 +58,14 @@ let make = (
     dropdownClassName
     label={switch selectedOptions {
     | [] =>
-      <p className="flex flex-row gap-2 w-full items-center relative">
+      <div className="flex flex-row gap-2 w-full items-center relative">
         {placeholder->Option.mapWithDefault(React.null, placeholder => {
           <span className={cx(["ml-1", placeholderClassName])}> {placeholder} </span>
         })}
         <span className="absolute inset-y-0 right-0 flex items-center">
           <ReactIcons.FaAngleDown />
         </span>
-      </p>
+      </div>
     | options =>
       <>
         <div
@@ -75,7 +75,7 @@ let make = (
             {options->Array.map(({label}) => label)->Js.Array2.joinWith(", ")->React.string}
           </span>
         </div>
-        <button
+        <div
           className={"absolute right-1 bg-info-100 text-info-600 text-sm rounded px-1.5 py-0.5 inline-flex items-center gap-2"}
           onClick={event => {
             event->JsxEventC.Mouse.stopPropagation
@@ -86,7 +86,7 @@ let make = (
           <span className={"rounded-full bg-info-600 text-info-100 p-0.5"}>
             <ReactIcons.MdClose size={14} />
           </span>
-        </button>
+        </div>
       </>
     }}>
     {_ =>

package/src/vendors/ReactTableV8.res

@@ -1,10 +1,13 @@
 type coreRowModel
+type sortedRowModel
 type filteredRowModel
 type paginationRowModel
 
 @module("@tanstack/react-table")
 external getCoreRowModel: unit => coreRowModel = "getCoreRowModel"
 @module("@tanstack/react-table")
+external getSortedRowModel: unit => sortedRowModel = "getSortedRowModel"
+@module("@tanstack/react-table")
 external getFilteredRowModel: unit => filteredRowModel = "getFilteredRowModel"
 @module("@tanstack/react-table")
 external getPaginationRowModel: unit => paginationRowModel = "getPaginationRowModel"
@@ -18,6 +21,8 @@ type rowSelectionState = Js.Dict.t<bool>
 type filterState = {id: string, value: unknown}
 type sortingState = {id: string, desc: bool}
 
+@unboxed type sortState = Bool(bool) | SortOrder(string)
+
 type tableState = {
   pagination: paginationState,
   rowSelection: rowSelectionState,
@@ -108,6 +113,9 @@ and parentColumn<'filterValue, 'filterVariant> = {
   columnDef: parentColumnDef<'filterVariant>,
   getFilterValue: unit => 'filterValue,
   setFilterValue: 'filterValue => unit,
+  getCanSort: unit => bool,
+  getIsSorted: unit => sortState,
+  getToggleSortingHandler: 'a. (. unit) => 'a => unit,
 }
 and parentColumnDef<'filterVariant> = {
   header: Header.t,
@@ -122,14 +130,10 @@ and header<'filterVariant> = {
   colSpan: int,
   getSize: unit => int,
   getContext: unit => Header.context,
-  getIsSorted: unit => bool,
-  getCanFilter: unit => bool,
-  getCanSort: unit => bool,
-  getToggleSortingHandler: unit => unit,
   id: string,
 }
 
-type columnInstance = {setFilterValue: 'a. ('a) => unit}
+type columnInstance = {setFilterValue: 'a. 'a => unit}
 
 type rec tableInstance<'tableData, 'filterVariant> = {
   getHeaderGroups: unit => array<headerGroup<'filterVariant>>,
@@ -150,18 +154,21 @@ type rec tableInstance<'tableData, 'filterVariant> = {
     tableOptions<'tableData, 'filterVariant> => tableOptions<'tableData, 'filterVariant>
   ) => unit,
   setColumnFilters: (array<filterState> => array<filterState>) => unit,
-  getColumn: ( string) => option<columnInstance>,
+  getColumn: string => option<columnInstance>,
 }
 and tableOptions<'tableData, 'filterVariant> = {
   data: array<'tableData>,
   columns: array<ColumnDef.t<'tableData, 'filterVariant>>,
   getCoreRowModel: coreRowModel,
+  getSortedRowModel?: sortedRowModel,
+  onSortingChange?: (array<sortingState> => array<sortingState>) => unit,
   getFilteredRowModel?: filteredRowModel,
   getPaginationRowModel?: paginationRowModel,
   onPaginationChange?: (paginationState => paginationState) => paginationState,
   onRowSelectionChange?: (rowSelectionState => rowSelectionState) => unit,
   pageCount?: int,
   initialState?: tableInitialState,
+  state?: tableInitialState,
   manualPagination?: bool,
   manualSorting?: bool,
   manualFiltering?: bool,