@colisweb/rescript-toolkit 5.44.5 → 5.45.0

package/package.json

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

package/src/router/Toolkit__Router.res

@@ -237,7 +237,7 @@ module Make = (Config: RouterConfig) => {
     let make = () => <div className="border-b" />
   }
 
-  let commonClassName = "flex items-center py-3 hover:bg-primary-100 focus:bg-primary-100 focus:shadow-none text-neutral-700 rounded relative font-semibold transition-all ease-linear duration-200"
+  let commonClassName = "flex items-center py-3 hover:bg-primary-100 focus:bg-primary-100 focus:shadow-none text-neutral-700 rounded relative font-semibold transition-all ease-linear duration-200 overflow-hidden"
 
   module SingleLink = {
     @react.component
@@ -262,7 +262,7 @@ module Make = (Config: RouterConfig) => {
           className={cx([
             commonClassName,
             "py-3 sidenav-link",
-            isSubLink ? "ml-3" : "",
+            isSubLink ? "group-hover:ml-3" : "",
             containerClassName,
           ])}>
           <span className="overflow-hidden flex">
@@ -272,21 +272,13 @@ module Make = (Config: RouterConfig) => {
             <span
               className={cx([
                 "transition-all duration-200 ease-in-out absolute ml-12 w-40 transform top-1/2 -translate-y-1/2",
-                isNavOpen ? "pl-1 opacity-100 delay-75" : "opacity-0 invisible",
-                isSubLink ? "text-sm" : "",
+                "lg:opacity-0 group-hover:opacity-100 group-hover:delay-100",
+                // isNavOpen ? "pl-1 opacity-100 delay-75" : "opacity-0 invisible",
+                isSubLink ? "text-sm focus:bg-primary-200" : "",
                 labelClassName,
               ])}>
               label
             </span>
-            {isNavOpen
-              ? React.null
-              : <div
-                  className={cx([
-                    "sidenav-link-tooltip absolute left-0 p-2 bg-neutral-700 text-white rounded transform top-1/2 -translate-y-1/2 transition-all duration-200 ease-in-out opacity-0 invisible ml-16 whitespace-nowrap",
-                    tooltipClassName,
-                  ])}>
-                  label
-                </div>}
           </span>
         </a>
       | App(config) =>
@@ -298,12 +290,15 @@ module Make = (Config: RouterConfig) => {
           route
           className={cx([
             commonClassName,
-            isSubLink ? "ml-3" : "",
             config.icon->Option.isNone ? "py-5" : "",
             "sidenav-link",
             containerClassName,
+            isActive && isSubLink && !disabledActiveLink
+              ? "bg-primary-100/50 text-neutral-700"
+              : "",
             isActive && !disabledActiveLink ? "bg-primary-100/75 text-neutral-700" : "",
             isActive && !disabledActiveLink ? activeClassName : "",
+            isSubLink ? "group-hover:ml-3" : "",
           ])}
           activeClassName={cx([
             disabledActiveLink ? "" : "bg-primary-100/75 text-neutral-700",
@@ -317,21 +312,13 @@ module Make = (Config: RouterConfig) => {
             <span
               className={cx([
                 "transition-all duration-200 ease-in-out absolute ml-12 w-40 transform top-1/2 -translate-y-1/2",
-                isNavOpen ? "pl-1 opacity-100 delay-75" : "opacity-0 invisible",
+                "lg:opacity-0 group-hover:opacity-100 group-hover:delay-100",
+                // isNavOpen ? "pl-1 opacity-100 delay-75" : "opacity-0 invisible",
                 isSubLink ? "text-sm" : "",
                 labelClassName,
               ])}>
               label
             </span>
-            {isNavOpen
-              ? React.null
-              : <div
-                  className={cx([
-                    "sidenav-link-tooltip absolute left-0 p-2 bg-neutral-700 text-white rounded transform top-1/2 -translate-y-1/2 transition-all duration-200 ease-in-out opacity-0 invisible ml-16 whitespace-nowrap",
-                    tooltipClassName,
-                  ])}>
-                  label
-                </div>}
           </span>
         </Link>
       }
@@ -366,7 +353,6 @@ module Make = (Config: RouterConfig) => {
       ~links: array<link>,
       ~isNavOpen: bool,
       ~onLinkClick=() => (),
-      ~openMenu,
       ~iconClassName="",
       ~labelClassName="",
     ) => {
@@ -403,7 +389,6 @@ module Make = (Config: RouterConfig) => {
       <React.Fragment>
         <button
           onClick={_ => {
-            openMenu()
             toggle()
           }}
           className={cx([
@@ -411,19 +396,22 @@ module Make = (Config: RouterConfig) => {
             "flex items-center w-full sidenav-link",
             hasActiveSubRoute || relativeRoute->Option.isSome ? "bg-primary-100/75" : "",
           ])}>
-          <span
-            className={cx(["mr-2 text-neutral-800", isNavOpen ? "pl-2" : "px-2", iconClassName])}>
+          <span className={cx(["mr-2 text-neutral-800 px-2", iconClassName])}>
             groupInfo.icon
           </span>
           <span
             className={cx([
               "transition-all duration-200 ease-in-out absolute ml-12 w-40 transform top-1/2 -translate-y-1/2 text-left",
-              isNavOpen ? "pl-1 opacity-100 delay-75" : "opacity-0 invisible",
+              "lg:opacity-0 group-hover:opacity-100 group-hover:delay-100",
               labelClassName,
             ])}>
             groupInfo.label
           </span>
-          <span className={cx(["absolute right-0 mr-2", isNavOpen ? "opacity-100" : "opacity-0"])}>
+          <span
+            className={cx([
+              "absolute right-0 mr-2 group-hover:opacity-100 delay-100",
+              isNavOpen ? "opacity-100" : "opacity-0",
+            ])}>
             <ReactIcons.MdKeyboardArrowRight
               size=24
               className={cx([
@@ -432,12 +420,6 @@ module Make = (Config: RouterConfig) => {
               ])}
             />
           </span>
-          {isNavOpen
-            ? React.null
-            : <div
-                className="sidenav-link-tooltip absolute left-0 p-2 bg-neutral-700 text-white rounded transform top-1/2 -translate-y-1/2 transition-all duration-200 ease-in-out opacity-0 invisible ml-16 whitespace-nowrap">
-                groupInfo.label
-              </div>}
         </button>
         <div
           className={cx([

package/src/ui/Toolkit__Ui_DropdownMenu.res

@@ -8,38 +8,23 @@ type itemContent = {
   ...DropdownMenu.Item.options,
   ...item,
 }
+type checkboxItemContent = {
+  ...DropdownMenu.CheckboxItem.options,
+  ...item,
+}
 type subTrigger = {...DropdownMenu.SubTrigger.options, ...item}
 
-type content =
+type rec content =
   | Item(itemContent)
+  | CheckboxItem(checkboxItemContent)
   | Separator
   | Label(React.element)
-  | SubItems(subTrigger, array<itemContent>)
+  | SubItems(subTrigger, array<content>)
 
 %%private(let renderRightSlot = rightSlot => <div className="RightSlot"> rightSlot </div>)
 
-@react.component
-let make = (
-  ~trigger,
-  ~triggerOptions: option<DropdownMenu.Trigger.options>=?,
-  ~rootOptions: option<DropdownMenu.Root.options>=?,
-  ~contentOptions: option<DropdownMenu.Content.options>=?,
-  ~content: array<content>,
-) => {
-  <DropdownMenu.Root {...(rootOptions->Option.getWithDefault({})->Obj.magic)}>
-    <DropdownMenu.Trigger {...(triggerOptions->Option.getWithDefault({})->Obj.magic)}>
-      trigger
-    </DropdownMenu.Trigger>
-    <DropdownMenu.Portal>
-      <DropdownMenu.Content
-        {...(contentOptions->Option.getWithDefault({})->Obj.magic)}
-        className="DropdownMenuContent"
-        sideOffset={contentOptions
-        ->Option.flatMap(v => v.sideOffset)
-        ->Option.getWithDefault(5)}>
-        {content
-        ->Array.mapWithIndex((i, content) => {
-          switch content {
+
+let rec renderContent = (content, i) => switch content {
           | Label(element) =>
             <DropdownMenu.Label
               key={i->Int.toString ++ "dropdown-menu-item"} className="DropdownMenuLabel">
@@ -58,6 +43,21 @@ let make = (
               {item.label}
               {item.rightSlot->Option.mapWithDefault(React.null, renderRightSlot)}
             </DropdownMenu.Item>
+          | CheckboxItem(item) =>
+            <DropdownMenu.CheckboxItem
+              key={i->Int.toString ++ "dropdown-menu-item"}
+              className="DropdownMenuCheckboxItem"
+              checked={item.checked}
+              disabled=?{item.disabled}
+              textValue=?{item.textValue}
+              onCheckedChange={item.onCheckedChange}
+              onSelect=?{item.onSelect}>
+              <DropdownMenu.ItemIndicator className="DropdownMenuItemIndicator">
+                <ReactIcons.FaCheck size=8 />
+              </DropdownMenu.ItemIndicator>
+              {item.label}
+              {item.rightSlot->Option.mapWithDefault(React.null, renderRightSlot)}
+            </DropdownMenu.CheckboxItem>
 
           | SubItems(item, subContent) =>
             <DropdownMenu.Sub key={i->Int.toString ++ "dropdown-menu-item"}>
@@ -70,20 +70,36 @@ let make = (
                   className="DropdownMenuSubContent" sideOffset={2} alignOffset={-5}>
                   {subContent
                   ->Array.mapWithIndex((j, item) => {
-                    <DropdownMenu.Item
-                      key={i->Int.toString ++ j->Int.toString ++ "dropdown-menu-item"}
-                      disabled=?{item.disabled}
-                      onSelect=?{item.onSelect}
-                      className="DropdownMenuItem">
-                      {item.label}
-                      {item.rightSlot->Option.mapWithDefault(React.null, renderRightSlot)}
-                    </DropdownMenu.Item>
+                   renderContent(item,j)
                   })
                   ->React.array}
                 </DropdownMenu.SubContent>
               </DropdownMenu.Portal>
             </DropdownMenu.Sub>
           }
+          
+@react.component
+let make = (
+  ~trigger,
+  ~triggerOptions: option<DropdownMenu.Trigger.options>=?,
+  ~rootOptions: option<DropdownMenu.Root.options>=?,
+  ~contentOptions: option<DropdownMenu.Content.options>=?,
+  ~content: array<content>,
+) => {
+  <DropdownMenu.Root {...(rootOptions->Option.getWithDefault({})->Obj.magic)}>
+    <DropdownMenu.Trigger {...(triggerOptions->Option.getWithDefault({})->Obj.magic)}>
+      trigger
+    </DropdownMenu.Trigger>
+    <DropdownMenu.Portal>
+      <DropdownMenu.Content
+        {...(contentOptions->Option.getWithDefault({})->Obj.magic)}
+        className="DropdownMenuContent"
+        sideOffset={contentOptions
+        ->Option.flatMap(v => v.sideOffset)
+        ->Option.getWithDefault(5)}>
+        {content
+        ->Array.mapWithIndex((i, content) => {
+          renderContent(content,i)
         })
         ->React.array}
         <DropdownMenu.Arrow className="DropdownMenuArrow" />

package/src/ui/Toolkit__Ui_Layout.res

@@ -39,7 +39,8 @@ module App = {
         className="bg-white h-16 border-b flex items-center px-1 justify-between fixed top-0 left-0 w-full z-40 print:hidden">
         <div className="flex items-center px-1 gap-1">
           <button
-            onClick=toggleMenu className="text-neutral-800 hover:bg-neutral-300 rounded-full p-2">
+            onClick=toggleMenu
+            className="text-neutral-800 hover:bg-neutral-300 rounded-full p-2 block lg:hidden">
             <ReactIcons.MdMenu size=32 />
           </button>
           <a
@@ -52,7 +53,7 @@ module App = {
             <img
               src={logoSrc->Option.getWithDefault("/assets/logo.svg")}
               alt="Colisweb"
-              className="w-16 ml-4"
+              className="w-16"
             />
           </a>
           {environment->Option.mapWithDefault(React.null, environment => {
@@ -112,8 +113,8 @@ module App = {
       <React.Fragment>
         <nav
           className={cx([
-            "sidenav",
-            "lg:flex border-r px-2 py-3 fixed flex-col bg-white justify-between transition-all duration-300 ease-in-out z-40 print:hidden",
+            "sidenav group",
+            "lg:flex border-r px-2 py-3 fixed flex-col hover:w-64 bg-white justify-between transition-all duration-300 ease-in-out z-40 print:hidden hover:overflow-y-auto",
             isNavOpen ? "w-64 overflow-y-auto" : "w-16 hidden sidenav--closed",
           ])}>
           {children({onLinkClick, isNavOpen, openMenu})}
@@ -121,7 +122,7 @@ module App = {
             <div className={!isNavOpen ? "overflow-hidden" : ""}>
               <div
                 className={cx([
-                  "flex flex-col justify-end transition-all duration-300 ease-in-out w-[14.75rem]",
+                  "flex flex-col group-hover:opacity-100 justify-end transition-all duration-300 ease-in-out w-[14.75rem]",
                   isNavOpen ? "opacity-100" : "opacity-0",
                 ])}>
                 content
@@ -153,23 +154,12 @@ module App = {
     ~logoSrc=?,
     ~environment=?,
   ) => {
-    let {isLg} = Toolkit__Hooks.useMediaQuery()
-    let (isNavOpen, setOpen) = React.useState(() =>
-      Browser.LocalStorage.getItem(localStorageNavKey)
-      ->Js.Nullable.toOption
-      ->Option.flatMap(value => value->bool_of_string_opt)
-      ->Option.flatMap(isOpen => isLg ? Some(isOpen) : None)
-      ->Option.getWithDefault(false)
-    )
+    let (isNavOpen, setOpen) = React.useState(() => false)
 
     let toggleMenu = React.useCallback(_ =>
       setOpen(value => {
         let newValue = !value
 
-        Browser.LocalStorage.setItem(
-          localStorageNavKey,
-          newValue->string_of_bool->Js.Nullable.return,
-        )
         newValue
       })
     , [])
@@ -187,8 +177,8 @@ module App = {
           <main
             className={cx([
               className,
-              "flex-initial w-full transition-all duration-300 ease-in-out mt-16 z-20 print:mt-0 print:!pl-0",
-              isNavOpen ? "navOpen lg:pl-64" : "lg:pl-16",
+              "flex-initial w-full lg:pl-16 transition-all duration-300 ease-in-out mt-16 z-20 print:mt-0 print:!pl-0",
+              isNavOpen ? "navOpen " : "",
             ])}>
             children
           </main>

package/src/vendors/Radix.res

@@ -262,10 +262,10 @@ module DropdownMenu = {
   module CheckboxItem = {
     type options = {
       className?: string,
-      checked?: bool,
+      checked: bool,
       disabled?: bool,
       textValue?: bool,
-      onCheckedChange?: bool => unit,
+      onCheckedChange: bool => unit,
       onSelect?: ReactEvent.Mouse.t => unit,
     }
 

package/src/vendors/ReactTableV8.res

@@ -1,184 +0,0 @@
-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"
-
-type paginationState = {
-  pageIndex: int,
-  pageSize: int,
-}
-
-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,
-  columnFilters?: array<filterState>,
-  sorting?: array<sortingState>,
-}
-type tableInitialState = {
-  pagination?: paginationState,
-  rowSelection?: rowSelectionState,
-  columnFilters?: array<filterState>,
-  sorting?: array<sortingState>,
-}
-
-module TableAPI = {
-  type t = {initialState: tableInitialState}
-}
-
-module ColumnDef = {
-  type tableContext = {
-    getIsAllRowsSelected: unit => bool,
-    getIsSomeRowsSelected: unit => bool,
-    getToggleAllRowsSelectedHandler: (unit, ReactEvent.Form.t) => unit,
-  }
-
-  type rowOptions = {
-    getIsSelected: unit => bool,
-    getCanSelect: unit => bool,
-    getIsSomeSelected: unit => bool,
-    getToggleSelectedHandler: (unit, ReactEvent.Form.t) => unit,
-  }
-
-  type cellOptions<'columnData> = {
-    getValue: unit => 'columnData,
-    row: rowOptions,
-  }
-
-  type columnMeta<'filterVariant> = {filterVariant?: 'filterVariant}
-  type filterFnVariant = | @as("equals") Equals
-  type t<'tableData, 'filterVariant>
-  @obj
-  external make: (
-    ~id: string=?,
-    ~accessorFn: 'tableData => 'columnData,
-    ~header: 'columnData => React.element=?,
-    ~footer: unit => React.element=?,
-    ~cell: cellOptions<'columnData> => React.element,
-    ~meta: columnMeta<'filterVariant>=?,
-    ~enableResizing: int=?,
-    ~maxSize: int=?,
-    ~minSize: int=?,
-    ~size: int=?,
-    ~enableSorting: bool=?,
-    ~filterFn: filterFnVariant=?,
-    unit,
-  ) => t<'tableData, 'filterVariant> = ""
-}
-
-module Header = {
-  type t
-  type tableContext = {setColumnFilters: (array<filterState> => array<filterState>) => unit}
-  type context = {table: tableContext}
-
-  @module("@tanstack/react-table")
-  external flexRender: (t, context) => React.element = "flexRender"
-}
-
-module Cell = {
-  type t
-  type context
-
-  @module("@tanstack/react-table")
-  external flexRender: (t, context) => React.element = "flexRender"
-}
-
-type rec rowModel<'filterVariant> = {rows: array<row<'filterVariant>>}
-and row<'filterVariant> = {
-  getVisibleCells: unit => array<rowModelCell<'filterVariant>>,
-  id: string,
-}
-and rowModelCell<'filterVariant> = {
-  id: string,
-  isPlaceholder: bool,
-  column: 'filterValue. parentColumn<'filterValue, 'filterVariant>,
-  getContext: unit => Cell.context,
-}
-
-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,
-  cell: Cell.t,
-  meta?: ColumnDef.columnMeta<'filterVariant>,
-}
-
-type rec headerGroup<'filterVariant> = {headers: array<header<'filterVariant>>, id: string}
-and header<'filterVariant> = {
-  isPlaceholder: bool,
-  column: 'a. parentColumn<'a, 'filterVariant>,
-  colSpan: int,
-  getSize: unit => int,
-  getContext: unit => Header.context,
-  id: string,
-}
-
-type columnInstance = {setFilterValue: 'a. 'a => unit}
-
-type rec tableInstance<'tableData, 'filterVariant> = {
-  getHeaderGroups: unit => array<headerGroup<'filterVariant>>,
-  getRowModel: unit => rowModel<'filterVariant>,
-  getFooterGroups: unit => array<headerGroup<'filterVariant>>,
-  getPageCount: unit => int,
-  getCanPreviousPage: unit => bool,
-  getCanNextPage: unit => bool,
-  getIsAllRowsSelected: unit => bool,
-  getIsSomeRowsSelected: unit => bool,
-  getToggleAllRowsSelectedHandler: (unit, ReactEvent.Form.t) => unit,
-  setPageIndex: (int => int) => unit,
-  setPageSize: int => unit,
-  previousPage: unit => unit,
-  nextPage: unit => unit,
-  getState: unit => tableState,
-  setOptions: (
-    tableOptions<'tableData, 'filterVariant> => tableOptions<'tableData, 'filterVariant>
-  ) => unit,
-  setColumnFilters: (array<filterState> => array<filterState>) => unit,
-  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,
-  enableRowSelection?: bool,
-  enableMultiRowSelection?: bool,
-  debugTable?: bool,
-}
-
-@module("@tanstack/react-table")
-external useReactTable: tableOptions<'tableData, 'filterVariant> => tableInstance<
-  'tableData,
-  'filterVariant,
-> = "useReactTable"