@latte-macchiat-io/latte-vanilla-components 0.0.243 → 0.0.245

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@latte-macchiat-io/latte-vanilla-components",
-  "version": "0.0.243",
+  "version": "0.0.245",
   "description": "Beautiful components for amazing projects, with a touch of Vanilla 🥤",
   "type": "module",
   "main": "./src/index.ts",

package/src/components/Header/HeaderToggleNav/index.tsx

@@ -4,12 +4,12 @@ import { bar, toggleNavButton } from './styles.css';
 
 export type HeaderToggleNavProps = {
   isOpen?: boolean;
-  onToggle: () => void;
+  onClick: () => void;
 };
 
-export const HeaderToggleNav = ({ isOpen, onToggle }: HeaderToggleNavProps) => {
+export const HeaderToggleNav = ({ isOpen, onClick }: HeaderToggleNavProps) => {
   return (
-    <button onClick={onToggle} aria-label="Toggle navigation" className={toggleNavButton()}>
+    <button onClick={onClick} aria-label="Toggle navigation" className={toggleNavButton()}>
       <span className={clsx(bar, isOpen && 'open')} />
       <span className={clsx(bar, isOpen && 'open')} />
       <span className={clsx(bar, isOpen && 'open')} />

package/src/components/Header/index.tsx

@@ -9,23 +9,22 @@ export type HeaderProps = React.HTMLAttributes<HTMLDivElement> &
     isFixed?: boolean;
     children: React.ReactNode;
     childrenOverlay?: React.ReactNode;
-    childrenToggleNav?: React.ReactNode | ((args: { isOpen: boolean; onToggle: () => void }) => React.ReactNode);
+    childrenToggleNav?: (args: { isOpen: boolean; onClick: () => void }) => React.ReactNode;
   };
 
 export const Header = ({ children, childrenOverlay, childrenToggleNav, isFixed = false, toggleNavVisibility, className }: HeaderProps) => {
   const [isNavOpen, setNavOpen] = useState(false);
   const onToggleNav = () => setNavOpen(!isNavOpen);
 
-  const renderToggleNav = () => {
-    if (typeof childrenToggleNav === 'function') {
-      return childrenToggleNav({ isOpen: isNavOpen, onToggle: onToggleNav });
-    }
-    return (
-      <div className={headerToggleNav({ toggleNavVisibility })}>
-        {childrenToggleNav || <HeaderToggleNav isOpen={isNavOpen} onToggle={onToggleNav} />}
-      </div>
-    );
-  };
+  const renderToggleNav = () => (
+    <div className={headerToggleNav({ toggleNavVisibility })}>
+      {childrenToggleNav !== undefined ? (
+        childrenToggleNav({ isOpen: isNavOpen, onClick: onToggleNav })
+      ) : (
+        <HeaderToggleNav isOpen={isNavOpen} onClick={onToggleNav} />
+      )}
+    </div>
+  );
 
   return (
     <>