@colisweb/rescript-toolkit 5.38.1 → 5.39.0

package/package.json

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

package/src/identifier/Toolkit__Identifier.res

@@ -1,7 +1,14 @@
 module MakeString = () => {
-  module Id = {
+  module Id: {
+    @spice
+    type t
+    module Dict: {
+      let deleteKey: (Js.Dict.t<'a>, string) => Js.Dict.t<'a>
+    }
+  } = {
     @spice
     type t = string
+
     module Dict = {
       include Js.Dict
 

package/src/router/Toolkit__Router.res

@@ -247,6 +247,10 @@ module Make = (Config: RouterConfig) => {
       ~isSubLink=false,
       ~isActive=false,
       ~onLinkClick=() => (),
+      ~containerClassName="",
+      ~labelClassName="",
+      ~tooltipClassName="",
+      ~activeClassName="",
     ) =>
       switch link {
       | Custom(element) => element
@@ -255,7 +259,12 @@ module Make = (Config: RouterConfig) => {
         <a
           href=url
           target="_blank"
-          className={cx([commonClassName, "py-3 sidenav-link", isSubLink ? "ml-3" : ""])}>
+          className={cx([
+            commonClassName,
+            "py-3 sidenav-link",
+            isSubLink ? "ml-3" : "",
+            containerClassName,
+          ])}>
           <span className="overflow-hidden flex">
             {config.icon->Option.mapWithDefault(React.null, icon =>
               <div className={cx(["text-neutral-800", isNavOpen ? "pl-2" : "px-2"])}> icon </div>
@@ -265,13 +274,17 @@ module Make = (Config: RouterConfig) => {
                 "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" : "",
+                labelClassName,
               ])}>
               label
             </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">
+                  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>
@@ -288,9 +301,14 @@ module Make = (Config: RouterConfig) => {
             isSubLink ? "ml-3" : "",
             config.icon->Option.isNone ? "py-5" : "",
             "sidenav-link",
+            containerClassName,
             isActive && !disabledActiveLink ? "bg-primary-100/75 text-neutral-700" : "",
+            isActive && !disabledActiveLink ? activeClassName : "",
+          ])}
+          activeClassName={cx([
+            disabledActiveLink ? "" : "bg-primary-100/75 text-neutral-700",
+            disabledActiveLink ? "" : activeClassName,
           ])}
-          activeClassName={disabledActiveLink ? "" : "bg-primary-100/75 text-neutral-700"}
           onClick={_ => onLinkClick()}>
           <span className="overflow-hidden flex">
             {config.icon->Option.mapWithDefault(React.null, icon =>
@@ -301,13 +319,17 @@ module Make = (Config: RouterConfig) => {
                 "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" : "",
+                labelClassName,
               ])}>
               label
             </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">
+                  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>
@@ -345,6 +367,8 @@ module Make = (Config: RouterConfig) => {
       ~isNavOpen: bool,
       ~onLinkClick=() => (),
       ~openMenu,
+      ~iconClassName="",
+      ~labelClassName="",
     ) => {
       let (isOpen, setIsOpen) = React.useState(() => false)
       let currentRoute = useRoute()
@@ -387,13 +411,15 @@ 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"])}>
+          <span
+            className={cx(["mr-2 text-neutral-800", isNavOpen ? "pl-2" : "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",
+              labelClassName,
             ])}>
             groupInfo.label
           </span>