@contentful/f36-navbar 5.0.0-alpha.4 → 5.0.0-alpha.43

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/README.mdx +2 -7
  2. package/dist/esm/index.js +22 -11
  3. package/dist/esm/index.js.map +1 -1
  4. package/dist/index.d.mts +85 -62
  5. package/dist/index.d.ts +85 -62
  6. package/dist/index.js +24 -29
  7. package/dist/index.js.map +1 -1
  8. package/package.json +11 -8
package/dist/index.d.mts CHANGED
@@ -1,63 +1,82 @@
1
1
  import { MenuListProps, MenuProps, MenuItemProps, MenuDivider, MenuSectionTitle } from '@contentful/f36-menu';
2
- import { CommonProps, PolymorphicComponent, ExpandProps } from '@contentful/f36-core';
2
+ import { CommonProps, PolymorphicComponent, ExpandProps, PropsWithHTMLElement } from '@contentful/f36-core';
3
3
  import React from 'react';
4
4
  import { IconProps } from '@contentful/f36-icons';
5
5
 
6
+ declare const NAVBAR_HEIGHT = 60;
7
+
6
8
  declare type NavbarOwnProps = CommonProps & {
7
- children?: React.ReactNode;
8
- account?: React.ReactNode;
9
- search?: React.ReactNode;
10
- switcher?: React.ReactNode;
11
- help?: React.ReactNode;
12
- badge?: React.ReactNode;
13
- /**
14
- * Items that will be rendered on the bottom-right of the navbar.
15
- * Useful for separating other navigation items from main ones, (e.g. separating "Settings" from all other navigation items).
16
- */
17
- bottomRightItems?: React.ReactNode;
18
9
  /**
19
- * Items that will be rendered on the top-right of the navbar.
20
- * Useful for providing additional context or actions to the user (e.g. a Feedback form link).
10
+ * Accepts a React Component that will be displayed
11
+ * instead of the Contentful Logo
21
12
  */
22
- topRightItems?: React.ReactNode;
13
+ logo?: React.ReactNode;
14
+ /** Promotions component, displayed on most left side */
15
+ promotions?: React.ReactNode;
16
+ /** Environment Switcher component */
17
+ switcher?: React.ReactNode;
18
+ /** Main Navigation Elements */
19
+ mainNavigation?: React.ReactNode;
20
+ /** Secondary Navigation Elements, displayed in the right side */
21
+ secondaryNavigation?: React.ReactNode;
22
+ /** User Account Component */
23
+ account?: React.ReactNode;
24
+ /** Navigation displayed on mobile versions */
25
+ mobileNavigation?: React.ReactNode;
26
+ /** breakpoint to determine when to show the mobile navigation */
27
+ mobileNavigationBp?: 'small' | 'medium';
23
28
  /**
24
29
  * Defines the max-width of the content inside the navbar.
25
30
  * @default '100%'
26
31
  */
27
32
  contentMaxWidth?: string;
33
+ /**
34
+ * Describes the size variation of the Navbar
35
+ * Variant wide will set the contentMaxWidth to 1524px
36
+ */
37
+ variant?: 'wide' | 'fullscreen';
28
38
  };
29
39
  declare type NavbarHTMLElementProps = Pick<React.ComponentPropsWithoutRef<'div'>, 'id'>;
30
40
  declare type NavbarProps = NavbarHTMLElementProps & NavbarOwnProps;
31
41
  declare const Navbar$1: React.ForwardRefExoticComponent<NavbarHTMLElementProps & CommonProps & {
32
- children?: React.ReactNode;
33
- account?: React.ReactNode;
34
- search?: React.ReactNode;
35
- switcher?: React.ReactNode;
36
- help?: React.ReactNode;
37
- badge?: React.ReactNode;
38
- /**
39
- * Items that will be rendered on the bottom-right of the navbar.
40
- * Useful for separating other navigation items from main ones, (e.g. separating "Settings" from all other navigation items).
41
- */
42
- bottomRightItems?: React.ReactNode;
43
42
  /**
44
- * Items that will be rendered on the top-right of the navbar.
45
- * Useful for providing additional context or actions to the user (e.g. a Feedback form link).
43
+ * Accepts a React Component that will be displayed
44
+ * instead of the Contentful Logo
46
45
  */
47
- topRightItems?: React.ReactNode;
46
+ logo?: React.ReactNode;
47
+ /** Promotions component, displayed on most left side */
48
+ promotions?: React.ReactNode;
49
+ /** Environment Switcher component */
50
+ switcher?: React.ReactNode;
51
+ /** Main Navigation Elements */
52
+ mainNavigation?: React.ReactNode;
53
+ /** Secondary Navigation Elements, displayed in the right side */
54
+ secondaryNavigation?: React.ReactNode;
55
+ /** User Account Component */
56
+ account?: React.ReactNode;
57
+ /** Navigation displayed on mobile versions */
58
+ mobileNavigation?: React.ReactNode;
59
+ /** breakpoint to determine when to show the mobile navigation */
60
+ mobileNavigationBp?: 'small' | 'medium';
48
61
  /**
49
62
  * Defines the max-width of the content inside the navbar.
50
63
  * @default '100%'
51
64
  */
52
65
  contentMaxWidth?: string;
66
+ /**
67
+ * Describes the size variation of the Navbar
68
+ * Variant wide will set the contentMaxWidth to 1524px
69
+ */
70
+ variant?: 'wide' | 'fullscreen';
53
71
  } & React.RefAttributes<HTMLElement>>;
54
72
 
55
- declare const NavbarAccount: React.ForwardRefExoticComponent<Omit<Omit<Pick<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "key" | keyof React.ButtonHTMLAttributes<HTMLButtonElement>>, never>, "children" | keyof CommonProps | "username" | "avatar" | "initials" | "hasNotification" | "notificationVariant"> & CommonProps & {
73
+ declare const NavbarAccount: React.ForwardRefExoticComponent<Omit<Omit<Pick<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "key" | keyof React.ButtonHTMLAttributes<HTMLButtonElement>>, never>, "label" | "children" | keyof CommonProps | "username" | "avatar" | "initials" | "hasNotification" | "notificationVariant"> & CommonProps & {
56
74
  children: React.ReactNode;
57
75
  username: string;
58
76
  avatar?: string;
59
77
  initials?: string;
60
78
  hasNotification?: boolean;
79
+ label?: string;
61
80
  /**
62
81
  * @default 'warning'
63
82
  */
@@ -75,11 +94,13 @@ declare type NavbarMenuProps = {
75
94
 
76
95
  declare type NavbarItemIconProps = {
77
96
  icon: React.ReactElement<IconProps>;
78
- } & Pick<IconProps, 'variant'>;
97
+ className?: string;
98
+ } & Partial<Pick<IconProps, 'isActive'>>;
79
99
 
80
100
  declare const NAVBAR_ITEM_DEFAULT_TAG = "button";
81
101
  declare type NavbarItemTriggerProps = CommonProps & {
82
- title: string;
102
+ label?: string;
103
+ title?: string;
83
104
  icon?: NavbarItemIconProps['icon'];
84
105
  isActive?: boolean;
85
106
  as?: React.ElementType;
@@ -112,43 +133,44 @@ declare const NavbarMenuItemSkeleton: ({ ariaLabel, }: {
112
133
  ariaLabel?: string;
113
134
  }) => JSX.Element;
114
135
 
115
- declare const NavbarSwitcher: React.ForwardRefExoticComponent<Omit<Omit<Pick<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "key" | keyof React.ButtonHTMLAttributes<HTMLButtonElement>>, never>, "children" | keyof CommonProps | "logo"> & CommonProps & {
136
+ declare type EnvVariant = 'master' | 'non-master' | 'trial';
137
+ declare type NavbarLoadingProps = {
138
+ isLoading?: true;
116
139
  children?: React.ReactNode;
117
- /**
118
- * Will be displayed instead of the default Contentful logo
119
- */
120
- logo?: React.ReactNode;
121
- } & React.RefAttributes<HTMLButtonElement>>;
140
+ environment?: never;
141
+ space?: never;
142
+ } | {
143
+ isLoading?: false;
144
+ children?: never;
145
+ environment?: string;
146
+ space?: string;
147
+ };
148
+ declare type NavbarSwitcherOwnProps = CommonProps & NavbarLoadingProps & {
149
+ isCircle?: boolean;
150
+ envVariant?: EnvVariant;
151
+ isAlias?: boolean;
152
+ ariaLabel?: string;
153
+ };
154
+ declare type NavbarSwitcherProps = PropsWithHTMLElement<NavbarSwitcherOwnProps, 'button'>;
155
+ declare const NavbarSwitcher: React.ForwardRefExoticComponent<NavbarSwitcherProps & React.RefAttributes<HTMLButtonElement>>;
122
156
 
123
157
  declare const NavbarSwitcherSkeleton: ({ estimatedWidth, }: {
124
158
  estimatedWidth: number;
125
159
  }) => JSX.Element;
126
160
 
127
- declare const NavbarSearch: React.ForwardRefExoticComponent<Omit<Omit<Pick<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "key" | keyof React.ButtonHTMLAttributes<HTMLButtonElement>>, never>, keyof CommonProps> & CommonProps & React.RefAttributes<HTMLButtonElement>>;
128
-
129
- declare const NavbarSwitcherItem: React.ForwardRefExoticComponent<Omit<Omit<Pick<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "key" | keyof React.LiHTMLAttributes<HTMLLIElement>>, never>, "children" | keyof CommonProps | "isCircle" | "envVariant" | "isAlias"> & CommonProps & {
130
- children?: React.ReactNode;
131
- isCircle?: boolean;
132
- envVariant?: 'master' | 'non-master';
133
- isAlias?: boolean;
134
- } & React.RefAttributes<HTMLLIElement>>;
135
-
136
- declare const NavbarHelp: React.ForwardRefExoticComponent<Omit<Omit<Pick<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "key" | keyof React.ButtonHTMLAttributes<HTMLButtonElement>>, never>, "children" | keyof CommonProps> & CommonProps & {
137
- children: React.ReactNode;
138
- } & React.RefAttributes<HTMLButtonElement>>;
139
-
140
- declare const NAVBAR_BADGE_DEFAULT_TAG$1 = "div";
161
+ declare const NAVBAR_BADGE_DEFAULT_TAG = "div";
141
162
  declare type NavbarBadgeOwnProps = CommonProps & {
142
163
  children?: React.ReactNode;
143
164
  as?: React.ElementType;
144
165
  };
145
- declare const NavbarBadge: PolymorphicComponent<ExpandProps<NavbarBadgeOwnProps>, typeof NAVBAR_BADGE_DEFAULT_TAG$1>;
166
+ declare const NavbarBadge: PolymorphicComponent<ExpandProps<NavbarBadgeOwnProps>, typeof NAVBAR_BADGE_DEFAULT_TAG>;
146
167
 
147
- declare const NAVBAR_BADGE_DEFAULT_TAG = "button";
148
- declare type NavbarTopbarItemOwnProps = CommonProps & {
168
+ declare type NavbarSubmenuProps = {
169
+ title: string;
170
+ icon?: NavbarItemIconProps['icon'];
149
171
  children?: React.ReactNode;
150
- };
151
- declare const NavbarTopbarItem: PolymorphicComponent<ExpandProps<NavbarTopbarItemOwnProps>, typeof NAVBAR_BADGE_DEFAULT_TAG>;
172
+ } & Pick<MenuListProps, 'testId'> & Pick<MenuProps, 'onOpen' | 'onClose'>;
173
+ declare const NavbarSubmenu: (props: NavbarSubmenuProps) => JSX.Element;
152
174
 
153
175
  declare type CompoundNavbar = typeof Navbar$1 & {
154
176
  Item: typeof NavbarItem;
@@ -157,18 +179,19 @@ declare type CompoundNavbar = typeof Navbar$1 & {
157
179
  MenuItemSkeleton: typeof NavbarMenuItemSkeleton;
158
180
  MenuDivider: typeof MenuDivider;
159
181
  MenuSectionTitle: typeof MenuSectionTitle;
182
+ Submenu: typeof NavbarSubmenu;
160
183
  Switcher: typeof NavbarSwitcher;
161
184
  SwitcherSkeleton: typeof NavbarSwitcherSkeleton;
162
- SwitcherItem: typeof NavbarSwitcherItem;
163
- Search: typeof NavbarSearch;
164
- Help: typeof NavbarHelp;
165
185
  Account: typeof NavbarAccount;
166
186
  AccountSkeleton: typeof NavbarAccountSkeleton;
167
187
  Badge: typeof NavbarBadge;
168
- TopbarItem: typeof NavbarTopbarItem;
169
188
  };
170
189
  declare const Navbar: CompoundNavbar;
171
190
 
172
191
  declare const getNavbarItemActiveStyles: () => string;
173
192
 
174
- export { Navbar, NavbarProps, getNavbarItemActiveStyles };
193
+ declare type screens = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
194
+ declare type mediaqueries = Record<screens, string>;
195
+ declare const mqs: mediaqueries;
196
+
197
+ export { NAVBAR_HEIGHT, Navbar, NavbarProps, getNavbarItemActiveStyles, mqs as navbarMediaQueries };
package/dist/index.d.ts CHANGED
@@ -1,63 +1,82 @@
1
1
  import { MenuListProps, MenuProps, MenuItemProps, MenuDivider, MenuSectionTitle } from '@contentful/f36-menu';
2
- import { CommonProps, PolymorphicComponent, ExpandProps } from '@contentful/f36-core';
2
+ import { CommonProps, PolymorphicComponent, ExpandProps, PropsWithHTMLElement } from '@contentful/f36-core';
3
3
  import React from 'react';
4
4
  import { IconProps } from '@contentful/f36-icons';
5
5
 
6
+ declare const NAVBAR_HEIGHT = 60;
7
+
6
8
  declare type NavbarOwnProps = CommonProps & {
7
- children?: React.ReactNode;
8
- account?: React.ReactNode;
9
- search?: React.ReactNode;
10
- switcher?: React.ReactNode;
11
- help?: React.ReactNode;
12
- badge?: React.ReactNode;
13
- /**
14
- * Items that will be rendered on the bottom-right of the navbar.
15
- * Useful for separating other navigation items from main ones, (e.g. separating "Settings" from all other navigation items).
16
- */
17
- bottomRightItems?: React.ReactNode;
18
9
  /**
19
- * Items that will be rendered on the top-right of the navbar.
20
- * Useful for providing additional context or actions to the user (e.g. a Feedback form link).
10
+ * Accepts a React Component that will be displayed
11
+ * instead of the Contentful Logo
21
12
  */
22
- topRightItems?: React.ReactNode;
13
+ logo?: React.ReactNode;
14
+ /** Promotions component, displayed on most left side */
15
+ promotions?: React.ReactNode;
16
+ /** Environment Switcher component */
17
+ switcher?: React.ReactNode;
18
+ /** Main Navigation Elements */
19
+ mainNavigation?: React.ReactNode;
20
+ /** Secondary Navigation Elements, displayed in the right side */
21
+ secondaryNavigation?: React.ReactNode;
22
+ /** User Account Component */
23
+ account?: React.ReactNode;
24
+ /** Navigation displayed on mobile versions */
25
+ mobileNavigation?: React.ReactNode;
26
+ /** breakpoint to determine when to show the mobile navigation */
27
+ mobileNavigationBp?: 'small' | 'medium';
23
28
  /**
24
29
  * Defines the max-width of the content inside the navbar.
25
30
  * @default '100%'
26
31
  */
27
32
  contentMaxWidth?: string;
33
+ /**
34
+ * Describes the size variation of the Navbar
35
+ * Variant wide will set the contentMaxWidth to 1524px
36
+ */
37
+ variant?: 'wide' | 'fullscreen';
28
38
  };
29
39
  declare type NavbarHTMLElementProps = Pick<React.ComponentPropsWithoutRef<'div'>, 'id'>;
30
40
  declare type NavbarProps = NavbarHTMLElementProps & NavbarOwnProps;
31
41
  declare const Navbar$1: React.ForwardRefExoticComponent<NavbarHTMLElementProps & CommonProps & {
32
- children?: React.ReactNode;
33
- account?: React.ReactNode;
34
- search?: React.ReactNode;
35
- switcher?: React.ReactNode;
36
- help?: React.ReactNode;
37
- badge?: React.ReactNode;
38
- /**
39
- * Items that will be rendered on the bottom-right of the navbar.
40
- * Useful for separating other navigation items from main ones, (e.g. separating "Settings" from all other navigation items).
41
- */
42
- bottomRightItems?: React.ReactNode;
43
42
  /**
44
- * Items that will be rendered on the top-right of the navbar.
45
- * Useful for providing additional context or actions to the user (e.g. a Feedback form link).
43
+ * Accepts a React Component that will be displayed
44
+ * instead of the Contentful Logo
46
45
  */
47
- topRightItems?: React.ReactNode;
46
+ logo?: React.ReactNode;
47
+ /** Promotions component, displayed on most left side */
48
+ promotions?: React.ReactNode;
49
+ /** Environment Switcher component */
50
+ switcher?: React.ReactNode;
51
+ /** Main Navigation Elements */
52
+ mainNavigation?: React.ReactNode;
53
+ /** Secondary Navigation Elements, displayed in the right side */
54
+ secondaryNavigation?: React.ReactNode;
55
+ /** User Account Component */
56
+ account?: React.ReactNode;
57
+ /** Navigation displayed on mobile versions */
58
+ mobileNavigation?: React.ReactNode;
59
+ /** breakpoint to determine when to show the mobile navigation */
60
+ mobileNavigationBp?: 'small' | 'medium';
48
61
  /**
49
62
  * Defines the max-width of the content inside the navbar.
50
63
  * @default '100%'
51
64
  */
52
65
  contentMaxWidth?: string;
66
+ /**
67
+ * Describes the size variation of the Navbar
68
+ * Variant wide will set the contentMaxWidth to 1524px
69
+ */
70
+ variant?: 'wide' | 'fullscreen';
53
71
  } & React.RefAttributes<HTMLElement>>;
54
72
 
55
- declare const NavbarAccount: React.ForwardRefExoticComponent<Omit<Omit<Pick<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "key" | keyof React.ButtonHTMLAttributes<HTMLButtonElement>>, never>, "children" | keyof CommonProps | "username" | "avatar" | "initials" | "hasNotification" | "notificationVariant"> & CommonProps & {
73
+ declare const NavbarAccount: React.ForwardRefExoticComponent<Omit<Omit<Pick<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "key" | keyof React.ButtonHTMLAttributes<HTMLButtonElement>>, never>, "label" | "children" | keyof CommonProps | "username" | "avatar" | "initials" | "hasNotification" | "notificationVariant"> & CommonProps & {
56
74
  children: React.ReactNode;
57
75
  username: string;
58
76
  avatar?: string;
59
77
  initials?: string;
60
78
  hasNotification?: boolean;
79
+ label?: string;
61
80
  /**
62
81
  * @default 'warning'
63
82
  */
@@ -75,11 +94,13 @@ declare type NavbarMenuProps = {
75
94
 
76
95
  declare type NavbarItemIconProps = {
77
96
  icon: React.ReactElement<IconProps>;
78
- } & Pick<IconProps, 'variant'>;
97
+ className?: string;
98
+ } & Partial<Pick<IconProps, 'isActive'>>;
79
99
 
80
100
  declare const NAVBAR_ITEM_DEFAULT_TAG = "button";
81
101
  declare type NavbarItemTriggerProps = CommonProps & {
82
- title: string;
102
+ label?: string;
103
+ title?: string;
83
104
  icon?: NavbarItemIconProps['icon'];
84
105
  isActive?: boolean;
85
106
  as?: React.ElementType;
@@ -112,43 +133,44 @@ declare const NavbarMenuItemSkeleton: ({ ariaLabel, }: {
112
133
  ariaLabel?: string;
113
134
  }) => JSX.Element;
114
135
 
115
- declare const NavbarSwitcher: React.ForwardRefExoticComponent<Omit<Omit<Pick<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "key" | keyof React.ButtonHTMLAttributes<HTMLButtonElement>>, never>, "children" | keyof CommonProps | "logo"> & CommonProps & {
136
+ declare type EnvVariant = 'master' | 'non-master' | 'trial';
137
+ declare type NavbarLoadingProps = {
138
+ isLoading?: true;
116
139
  children?: React.ReactNode;
117
- /**
118
- * Will be displayed instead of the default Contentful logo
119
- */
120
- logo?: React.ReactNode;
121
- } & React.RefAttributes<HTMLButtonElement>>;
140
+ environment?: never;
141
+ space?: never;
142
+ } | {
143
+ isLoading?: false;
144
+ children?: never;
145
+ environment?: string;
146
+ space?: string;
147
+ };
148
+ declare type NavbarSwitcherOwnProps = CommonProps & NavbarLoadingProps & {
149
+ isCircle?: boolean;
150
+ envVariant?: EnvVariant;
151
+ isAlias?: boolean;
152
+ ariaLabel?: string;
153
+ };
154
+ declare type NavbarSwitcherProps = PropsWithHTMLElement<NavbarSwitcherOwnProps, 'button'>;
155
+ declare const NavbarSwitcher: React.ForwardRefExoticComponent<NavbarSwitcherProps & React.RefAttributes<HTMLButtonElement>>;
122
156
 
123
157
  declare const NavbarSwitcherSkeleton: ({ estimatedWidth, }: {
124
158
  estimatedWidth: number;
125
159
  }) => JSX.Element;
126
160
 
127
- declare const NavbarSearch: React.ForwardRefExoticComponent<Omit<Omit<Pick<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "key" | keyof React.ButtonHTMLAttributes<HTMLButtonElement>>, never>, keyof CommonProps> & CommonProps & React.RefAttributes<HTMLButtonElement>>;
128
-
129
- declare const NavbarSwitcherItem: React.ForwardRefExoticComponent<Omit<Omit<Pick<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "key" | keyof React.LiHTMLAttributes<HTMLLIElement>>, never>, "children" | keyof CommonProps | "isCircle" | "envVariant" | "isAlias"> & CommonProps & {
130
- children?: React.ReactNode;
131
- isCircle?: boolean;
132
- envVariant?: 'master' | 'non-master';
133
- isAlias?: boolean;
134
- } & React.RefAttributes<HTMLLIElement>>;
135
-
136
- declare const NavbarHelp: React.ForwardRefExoticComponent<Omit<Omit<Pick<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "key" | keyof React.ButtonHTMLAttributes<HTMLButtonElement>>, never>, "children" | keyof CommonProps> & CommonProps & {
137
- children: React.ReactNode;
138
- } & React.RefAttributes<HTMLButtonElement>>;
139
-
140
- declare const NAVBAR_BADGE_DEFAULT_TAG$1 = "div";
161
+ declare const NAVBAR_BADGE_DEFAULT_TAG = "div";
141
162
  declare type NavbarBadgeOwnProps = CommonProps & {
142
163
  children?: React.ReactNode;
143
164
  as?: React.ElementType;
144
165
  };
145
- declare const NavbarBadge: PolymorphicComponent<ExpandProps<NavbarBadgeOwnProps>, typeof NAVBAR_BADGE_DEFAULT_TAG$1>;
166
+ declare const NavbarBadge: PolymorphicComponent<ExpandProps<NavbarBadgeOwnProps>, typeof NAVBAR_BADGE_DEFAULT_TAG>;
146
167
 
147
- declare const NAVBAR_BADGE_DEFAULT_TAG = "button";
148
- declare type NavbarTopbarItemOwnProps = CommonProps & {
168
+ declare type NavbarSubmenuProps = {
169
+ title: string;
170
+ icon?: NavbarItemIconProps['icon'];
149
171
  children?: React.ReactNode;
150
- };
151
- declare const NavbarTopbarItem: PolymorphicComponent<ExpandProps<NavbarTopbarItemOwnProps>, typeof NAVBAR_BADGE_DEFAULT_TAG>;
172
+ } & Pick<MenuListProps, 'testId'> & Pick<MenuProps, 'onOpen' | 'onClose'>;
173
+ declare const NavbarSubmenu: (props: NavbarSubmenuProps) => JSX.Element;
152
174
 
153
175
  declare type CompoundNavbar = typeof Navbar$1 & {
154
176
  Item: typeof NavbarItem;
@@ -157,18 +179,19 @@ declare type CompoundNavbar = typeof Navbar$1 & {
157
179
  MenuItemSkeleton: typeof NavbarMenuItemSkeleton;
158
180
  MenuDivider: typeof MenuDivider;
159
181
  MenuSectionTitle: typeof MenuSectionTitle;
182
+ Submenu: typeof NavbarSubmenu;
160
183
  Switcher: typeof NavbarSwitcher;
161
184
  SwitcherSkeleton: typeof NavbarSwitcherSkeleton;
162
- SwitcherItem: typeof NavbarSwitcherItem;
163
- Search: typeof NavbarSearch;
164
- Help: typeof NavbarHelp;
165
185
  Account: typeof NavbarAccount;
166
186
  AccountSkeleton: typeof NavbarAccountSkeleton;
167
187
  Badge: typeof NavbarBadge;
168
- TopbarItem: typeof NavbarTopbarItem;
169
188
  };
170
189
  declare const Navbar: CompoundNavbar;
171
190
 
172
191
  declare const getNavbarItemActiveStyles: () => string;
173
192
 
174
- export { Navbar, NavbarProps, getNavbarItemActiveStyles };
193
+ declare type screens = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
194
+ declare type mediaqueries = Record<screens, string>;
195
+ declare const mqs: mediaqueries;
196
+
197
+ export { NAVBAR_HEIGHT, Navbar, NavbarProps, getNavbarItemActiveStyles, mqs as navbarMediaQueries };