New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@reusable-ui/navbar

Package Overview
Dependencies
Maintainers
1
Versions
37
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@reusable-ui/navbar - npm Package Compare versions

Comparing version

5.0.6
to
5.0.7

12

dist/Navbar.d.ts

@@ -26,6 +26,6 @@ import { default as React } from 'react';

listGridArea: import("@cssfn/css-types").CssComplexValueOf<import("@cssfn/css-types").CssCustomKeyframesRef | import("csstype").Property.GridArea> | null | undefined;
listGridAreaExpand: import("@cssfn/css-types").CssComplexValueOf<import("@cssfn/css-types").CssCustomKeyframesRef | import("csstype").Property.GridArea> | null | undefined;
listDisplay: import("@cssfn/css-types").CssComplexValueOf<import("@cssfn/css-types").CssCustomKeyframesRef | import("csstype").Property.Display> | null | undefined;
listFlexDirection: import("@cssfn/css-types").CssComplexValueOf<import("@cssfn/css-types").CssCustomKeyframesRef | import("csstype").Property.FlexDirection> | null | undefined;
listFlexDirectionExpand: import("@cssfn/css-types").CssComplexValueOf<import("@cssfn/css-types").CssCustomKeyframesRef | import("csstype").Property.FlexDirection> | null | undefined;
listGridAreaExpand: import("@cssfn/css-types").CssComplexValueOf<import("@cssfn/css-types").CssCustomKeyframesRef | import("csstype").Property.GridArea> | null | undefined;
listJustifySelf: import("@cssfn/css-types").CssComplexValueOf<import("@cssfn/css-types").CssCustomKeyframesRef | import("csstype").Property.JustifySelf> | null | undefined;

@@ -71,6 +71,6 @@ listAlignSelf: import("@cssfn/css-types").CssComplexValueOf<import("@cssfn/css-types").CssCustomKeyframesRef | import("csstype").Property.AlignSelf> | null | undefined;

listGridArea: import("@cssfn/css-types").CssComplexValueOf<import("@cssfn/css-types").CssCustomKeyframesRef | import("csstype").Property.GridArea> | null | undefined;
listGridAreaExpand: import("@cssfn/css-types").CssComplexValueOf<import("@cssfn/css-types").CssCustomKeyframesRef | import("csstype").Property.GridArea> | null | undefined;
listDisplay: import("@cssfn/css-types").CssComplexValueOf<import("@cssfn/css-types").CssCustomKeyframesRef | import("csstype").Property.Display> | null | undefined;
listFlexDirection: import("@cssfn/css-types").CssComplexValueOf<import("@cssfn/css-types").CssCustomKeyframesRef | import("csstype").Property.FlexDirection> | null | undefined;
listFlexDirectionExpand: import("@cssfn/css-types").CssComplexValueOf<import("@cssfn/css-types").CssCustomKeyframesRef | import("csstype").Property.FlexDirection> | null | undefined;
listGridAreaExpand: import("@cssfn/css-types").CssComplexValueOf<import("@cssfn/css-types").CssCustomKeyframesRef | import("csstype").Property.GridArea> | null | undefined;
listJustifySelf: import("@cssfn/css-types").CssComplexValueOf<import("@cssfn/css-types").CssCustomKeyframesRef | import("csstype").Property.JustifySelf> | null | undefined;

@@ -102,8 +102,8 @@ listAlignSelf: import("@cssfn/css-types").CssComplexValueOf<import("@cssfn/css-types").CssCustomKeyframesRef | import("csstype").Property.AlignSelf> | null | undefined;

navbarExpanded: boolean;
menuExpanded: boolean;
toggleMenu: EventHandler<boolean | undefined>;
listExpanded: boolean;
toggleList: EventHandler<boolean | undefined>;
handleActiveChange: EventHandler<ActiveChangeEvent>;
handleClickAsToggleMenu: React.MouseEventHandler<Element>;
handleClickToToggleList: React.MouseEventHandler<Element>;
}
export declare type NavbarChildren = React.ReactNode | ((params: NavbarParams) => React.ReactNode);
export type NavbarChildren = React.ReactNode | ((params: NavbarParams) => React.ReactNode);
export interface NavbarProps<TElement extends Element = HTMLElement, TExpandedChangeEvent extends ExpandedChangeEvent = ExpandedChangeEvent> extends Omit<BasicProps<TElement>, 'children'>, Omit<React.HTMLAttributes<TElement>, 'role' | 'children'>, CollapsibleProps<TExpandedChangeEvent>, BasicComponentProps<TElement> {

@@ -110,0 +110,0 @@ breakpoint?: BreakpointName;

40

dist/Navbar.js

@@ -53,3 +53,3 @@ // react:

gridTemplateRows: [[
'1fr', // limiting only one row, so the excess items flows automatically to a new column
'1fr', // limiting only one row, so the items (logo, toggler, etc) placed automatically to a new column
]],

@@ -80,6 +80,6 @@ justifyContent: 'space-between',

listGridArea: '2/1/2/3',
listGridAreaExpand: 'unset',
listDisplay: 'flex',
listFlexDirection: 'column',
listFlexDirectionExpand: 'row',
listGridAreaExpand: 'unset',
listJustifySelf: 'stretch',

@@ -236,3 +236,3 @@ listAlignSelf: 'stretch',

const {
// breakpoints:
// behaviors:
breakpoint: _breakpoint, // remove

@@ -254,5 +254,5 @@ // states:

// states:
const [menuExpanded, setMenuExpanded] = useState(false);
const [listExpanded, setListExpanded] = useState(false);
// handlers:
const toggleMenu = useEvent((newMenuExpanded) => {
const toggleList = useEvent((newListExpanded) => {
// conditions:

@@ -262,9 +262,9 @@ if (navbarExpanded)

// actions:
setMenuExpanded(newMenuExpanded ?? !menuExpanded);
setListExpanded(newListExpanded ?? !listExpanded);
});
const handleActiveChange = useEvent((event) => {
// actions:
toggleMenu(event.active);
toggleList(event.active);
});
const handleClickAsToggleMenu = useEvent((event) => {
const handleClickToToggleList = useEvent((event) => {
// conditions:

@@ -274,6 +274,6 @@ if (event.defaultPrevented)

// actions:
toggleMenu();
toggleList();
event.preventDefault(); // handled
});
const handleClickAsCollapseMenu = useEvent((event) => {
const handleClickToCollapseList = useEvent((event) => {
// conditions:

@@ -288,3 +288,3 @@ // if (event.defaultPrevented) return; // always handle click even if the event has been handled

// actions:
toggleMenu(false);
toggleList(false);
// event.preventDefault(); // handled

@@ -298,9 +298,9 @@ });

// actions:
handleClickAsCollapseMenu);
handleClickToCollapseList);
// dom effects:
// collapses the <Navbar>'s menu if switched from mobile to desktop:
// collapses the <Navbar>'s list if switched from mobile to desktop:
useIsomorphicLayoutEffect(() => {
// conditions:
if (!menuExpanded)
return; // the <Navbar>'s menu was already collapsed => ignore
if (!listExpanded)
return; // the <Navbar>'s list was already collapsed => ignore
if (!navbarExpanded)

@@ -311,3 +311,3 @@ return; // the <Navbar> is in mobile version => ignore

cancelRequest = requestAnimationFrame(() => {
setMenuExpanded(false); // collapsing the <Navbar>'s menu
setListExpanded(false); // collapsing the <Navbar>'s list
});

@@ -320,3 +320,3 @@ });

};
}, [navbarExpanded, menuExpanded]);
}, [navbarExpanded, listExpanded]);
// jsx:

@@ -346,9 +346,9 @@ return React.cloneElement(basicComponent,

navbarExpanded,
menuExpanded,
listExpanded,
// handlers:
toggleMenu,
toggleList,
handleActiveChange,
handleClickAsToggleMenu,
handleClickToToggleList,
})));
};
export { Navbar, Navbar as default, };

2

package.json
{
"name": "@reusable-ui/navbar",
"version": "5.0.6",
"version": "5.0.7",
"description": "A responsive navigation header. Supports for branding, navigation and more.",

@@ -5,0 +5,0 @@ "keywords": [

src/Navbar.tsx

Sorry, the diff of this file is not supported yet